Skrypty HTML na stronę www, lub wasze forum

DEMON PL · 2007-05-03 18:09:29

REGULAMIN:
1. Proszę pisać tylko skrypty w HTMl'u.
2. Każdego innego typu posty będą raportowane, a ich autor dostanie ostrzeżenie.
3. W tym temacie NIE WOLNO pisać postów typu: "Pomocy, jak to wkleić i gdzie....", "Jak to działa itp..". Dozwolone są tylko posty wnoszące nowe skrypty z HTML'a.
4. Wpisanie nowego postu = z akceptację powyższego regulaminu.
5. Zmianę regulaminu może dokonać TYLKO i WYŁĄCZNIE główny Admin pun.pl.
6. Każdy, kto będzie próbował "przeszkadzć" postowo (SPAM), będzie raportowany Adminowi pun.pl.
7. Post piszemy w następujący sposób:

OPIS: Opis skryptu, oraz gdzie dokładnie mamy go wklejić <body>, <head> lub gdzie indziej.
SCRIPT: Tu wpisujemy skrypt w całości, gotowy do wklejenia na stronę www, lub forum. Przy założeniu, że forum obsługuje HTML'a.
PZYKŁADY: Tu dajemy przykład danego skryptu. (Rubryka nie obowiązkowa).

--------------------------------------------------------------------------------------------------

OPIS: Zegarek, prosty zegar cyfrowy.

[b]SCRIPT:[/b] 
<SCRIPT> <!-- hide from non JS browsers.
//Define a couple of global variables.

	var timerID = null
	var timerRunning = false

function stopTimer(){
	//stop the clock
	if(timerRunning) {
		clearTimeout(timerID)
		timerRunning = false
	}
} 
function startTimer(){
     // Stop the clock (in case it's running), then make it go.
    stopTimer()
    runClock()
}
function runClock(){
	document.clock.face.value = timeNow()
	//Notice how setTimeout() calls its own calling function, runClock().
	timerID = setTimeout("runClock()",1000)
	timerRunning = true
}
function timeNow() {
	//Grabs the current time and formats it into hh:mm:ss am/pm format.
	now = new Date()
	hours = now.getHours()
	minutes = now.getMinutes()
	seconds = now.getSeconds()
	timeStr = ((hours > 12) ? hours - 12 : hours)
	timeStr  += ((minutes < 10) ? ":0" : ":") + minutes
	timeStr  += ((seconds < 10) ? ":0" : ":") + seconds
	timeStr  += (hours >= 12) ? " PM" : " AM"
	return timeStr
}
// End of custom functions, stop hiding code -->
</SCRIPT>

Ostatnio edytowany przez DEMON PL (2007-05-04 21:13:21)

DEMON PL · 2007-05-04 19:12:44

OPIS: Sktypt dodaje okienko powitalne (ostrzeżenie, powitanie) "Windowsowe". W poniższym przykładzie, wyskoczy okienko z napisem: "Witam na mojej stronie!!", tekst oczywiście mozna zmienić według waszych upodobań [dblpt]) .

[b]SCRIPT:[/b]
<SCRIPT LANGUAGE="JavaScript">
<!--- Hide script from old browsers.
alert("Witam na mojej stronie!!")
// End the hiding here. -->
</SCRIPT>

OPIS: Kolorowe tło:
Ten skrypt pozwoli odwiedzającemu zmienić kolor tła strony. Po naciśnięciu przycisku zmienia się kolor tła - kolory można dowolnie modyfikować zmieniając wartości onclick="changeBackground('#FFFFFF')". Poniższy tekst należy umieścić w BODY!.

[b]SCRIPT:[/b]
<script language="JavaScript">

<!-- hide this script tag's contents from old browsers
// keep track of whether we just computed display.value
var computed = false
var decimal = 0
function convert (entryform, from, to)
{
	convertfrom = from.selectedIndex
	convertto = to.selectedIndex
	entryform.display.value = (entryform.input.value * from[convertfrom].value / to[convertto].value )
}
function addChar (input, character)
{
	if((character=='.' && decimal=="0") || character!='.')
	{
		(input.value == "" || input.value == "0") ? input.value = character : input.value += character
		convert(input.form,input.form.measure1,input.form.measure2)
		computed = true	
		if (character=='.')
		{
			decimal=1
		}	
	}
}
function openVothcom()
{
	window.open("","Display window","toolbar=no,directories=no,menubar=no");
}
function clear (form)
{
	form.input.value = 0
	form.display.value = 0
	decimal=0
}
function changeBackground(hexNumber)
{
	document.bgColor=hexNumber
}
<!-- done hiding from old browsers -->
</script>

<form method="POST" name="background">
    <p align="center"><input type="button" value="żółty"
    onclick="changeBackground('#FFF000')"> <input type="button"
    value="czarny" onclick="changeBackground('#000000')"> <input
    type="button" value="biały"
    onclick="changeBackground('#FFFFFF')"> <input type="button"
    value="zielony" onclick="changeBackground('#00FF00')"> <input
    type="button" value="niebieski"
    onclick="changeBackground('#0000FF')"> <input type="button"
    value="pomarańczowy" onclick="changeBackground('#FF8000')"> <input
    type="button" value="szary"
    onclick="changeBackground('#c0c0c0')"> <input type="button"
    value="czerwony" onclick="changeBackground('#FF0000')"> </p>
</form>

OPIS:Ruchoma (przewijana) strona:
Skrypt pozwala na uzyskanie ciekawego efektu - strona przewija się aż do samego końca. W znaczniku Body umieszczamy: onload="scroller()". Dodatkowo możemy regulować szybkość przewijania var timer = setTimeout("scroller()",3 (w skrypcie wartość 3) i miejsce, do którego ma się przewinąć strona position != 320.

[b]SCRIPT:[/b]
<SCRIPT LANGUAGE="JavaScript">
<!--
        var position =1;
function scroller() {
        if (position != 320) {
                position++;
                scroll(0,position);
                clearTimeout(timer);
                var timer = setTimeout("scroller()",3); timer;
        }
        else
                 {
           location.replace("#");
        }
}
// -->
</SCRIPT>

PS: Przepraszam za nieporozumienie i frustrację modów [dblpt])

Ostatnio edytowany przez DEMON PL (2007-05-04 21:18:22)

DEMON PL · 2007-05-05 22:43:53

OPIS:Rozwijane menu zawsze widoczne!. Pierwszą część zamieszczamy w nagłówku, a druga w BODY.(Skrypt Thomasa Brattli )

SCRIPT:

<style>
#divBg{position:absolute; top:0; left:0; visibility:hidden; height:50}
DIV.clSub{position:relative; top:-5; padding:10px; visibility:hidden; background-color:#FFCCCC; layer-background-color:Silver}
</style>
<script language="JavaScript1.2">
/********************************************************************************
Copyright (C) 1999 Thomas Brattli
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit for more great scripts.
This may be used freely as long as this msg is intact!
********************************************************************************
Browsercheck:*/
ie=document.all?1:0
n=document.layers?1:0

//Do you want it to move with the page if the user scroll the page?
var moveOnScroll=true

//Do you want to hide all the other submenus when you click a new?
var hideAll=true

function makeMenuBar(obj,nest,vis){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style')
this.hideIt=b_hideIt; this.showIt=b_showIt; this.vis=b_vis 
if(ie && vis) this.css.visibility='hidden'
this.state=1
this.go=0
this.height=n?this.css.document.height:eval(obj+'.offsetHeight')
this.top=b_gettop
this.obj = obj + "Object"; eval(this.obj + "=this")
}
//Get's the top position.
function b_gettop(){
var gleft=(n) ? eval(this.css.top):eval(this.css.pixelTop);
return gleft;
}
//The functions for showing and hiding
function b_showIt(){
this.css.visibility="visible"
}
function b_hideIt(){
this.css.visibility="hidden"
}
function b_vis(){
if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;
}
function checkScrolled(){
if(!oMenu.go)oMenu.css.top=(!oMenu.state)?eval(scrolled):eval(scrolled)
if(n) setTimeout('checkScrolled()',30)
}
function menuBarInit(){
oSub=new Array()
//Change it here if you want more or less submenus.
oSub[0]=new makeMenuBar('divSub0','divBg',1)
oSub[1]=new makeMenuBar('divSub1','divBg',1)
oSub[2]=new makeMenuBar('divSub2','divBg',1)
oSub[3]=new makeMenuBar('divSub3','divBg',1)
oSub[4]=new makeMenuBar('divSub4','divBg',1)
//Moving menuBar
oMenu=new makeMenuBar('divBg')
scrolled=n?"window.pageYOffset":"document.body.scrollTop"
oMenu.css.top=eval(scrolled)
oMenu.css.visibility='visible'
if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();
}
function extract(num){
if(hideAll){
for(i=0;i<oSub.length;i++){
if(num!=i) oSub[i].hideIt()
}
}
!oSub[num].vis()?oSub[num].hideIt():oSub[num].showIt();
}
onload=menuBarInit;
</script> 

<div id="divBg">
<table width="102%" border="0" cellspacing="0" cellpadding="5" align="CENTER" valign="MIDDLE">
<tr bgcolor="#C0C0C0">
<td height="30"><a href="#" onclick="extract(0); return false">Kliknij</a></td>
<td><a href="#" onclick="extract(1); return false">Choice 2</a></td>
<td><a href="#" onclick="extract(2); return false">Choice 3</a></td>
<td><a href="#" onclick="extract(3); return false">Choice 4</a></td>
<td><a href="#" onclick="extract(4); return false">Choice 5</a></td>
</tr>
<!-- If you on't want submenu, just remove this tr and
remove the onclicks above and change the #'s to links -->
<tr>
<td valign="TOP">
<div id="divSub0" class="clSub">
<!-- To make the links link somewhere, just replace the #'s
with the link location -->
Pozycja menu 1<br>
Pozycja menu 2<br>
Pozycja menu 3<br>
Pozycja menu 4<br>
</div>
</td>
<td valign="TOP">
<div id="divSub1" class="clSub">
<a href="#">Sub choice 1</a> <br>
<a href="#">Sub choice 2</a><br>
<a href="#">Sub choice 3</a>
</div>
</td>
<td valign="TOP">
<div id="divSub2" class="clSub">
<a href="#">Sub choice 1</a> <br>
<a href="#">Sub choice 2</a>
</div>
</td>
<td valign="TOP">
<div id="divSub3" class="clSub">
<a href="#">Sub choice 1</a> <br>
<a href="#">Sub choice 2</a><br>
<a href="#">Sub choice 3</a><br>
<a href="#">Sub choice 4</a><br>
<a href="#">Sub choice 5</a>
</div>
</td>
<td valign="TOP">
<div id="divSub4" class="clSub">
<a href="#">Sub choice 1</a> <br>
<a href="#">Sub choice 2</a><br>
<a href="#">Sub choice 3</a><br>
<a href="#">Sub choice 4</a>
</div>
</td>
</tr>
</table>
</div>

OPIS:Skrypt pokazuje ścieżkę serwera do aktualnie wyświetlanej strony.

SCRIPT:

<script language="JavaScript" type="text/javascript">
<!--
document.write("Adres bieżącego dokumentu to: " + document.location);
// -->
</script>

OPIS:Duży zegar. (by Wojciech Wysznacki)

W HEAD wpisujemy:

<STYLE TYPE="text/css">
<!--
.clock
{
position:absolute;
top: 100px;
width:80pt;
font-family: Times New Roman;
font-size:80px;
color:navy;
visibility:hidden;
}
// -->
</style>
<SCRIPT LANGUAGE="JavaScript1.2">
<!-- -->
<!-- JavaScript Example, freeware -->
<!-- -->
<!-- Copyright (c) 1997,98 by Wojciech Wysznacki -->
<!-- E-mail: woytek@polbox.com -->
<!-- WWW : http://www.polbox.com/w/woytek -->
<!-- -->
<!--
timerRunning = null
first=1
var hour1, hour2, minute1, minute2, second1, second2;
function clock()
{
ohour1 = hour1
ohour2 = hour2
ominute1 = minute1
ominute2 = minute2
osecond1 = second1
osecond2 = second2
if(++second2 > 9) { second2=0
if(++second1 >5) { second1=0
if(++minute2 > 9) { minute1=0
if(++minute2 > 5) { minute2=0
if(++hour2 > 9) { hour2=0
if(++hour1 > 2) { hour1 =0 }
}
}
}
}
}
if(document.layers) var w=innerWidth/2-185
else var w=document.body.offsetWidth/2-185
if (ohour1 != hour1 || first) {
if(document.layers) {
document.layers["z0"+ohour1].visibility="hidden"
document.layers["z0"+hour1].left=w
document.layers["z0"+hour1].visibility="visible"
}
else {
document.all["z0"+ohour1].style.visibility="hidden"
document.all["z0"+hour1].style.left=w
document.all["z0"+hour1].style.visibility="visible"
}
}
if (ohour2 != hour2 || first) {
if(document.layers) {
document.layers["z1"+ohour2].visibility="hidden"
document.layers["z1"+hour2].left=w+44
document.layers["z1"+hour2].visibility="visible"
}
else {
document.all["z1"+ohour2].style.visibility="hidden"
document.all["z1"+hour2].style.left=w+44
document.all["z1"+hour2].style.visibility="visible"
}
}
if (ominute1 != minute1 || first) {
if(document.layers) {
document.layers["z2"+ominute1].visibility="hidden"
document.layers["z2"+minute1].left=w+117
document.layers["z2"+minute1].visibility="visible"
}
else {
document.all["z2"+ominute1].style.visibility="hidden"
document.all["z2"+minute1].style.left=w+117
document.all["z2"+minute1].style.visibility="visible"
}
}
if (ominute2 != minute2 || first) {
if(document.layers) {
document.layers["z3"+ominute2].visibility="hidden"
document.layers["z3"+minute2].left=w+161
document.layers["z3"+minute2].visibility="visible"
}
else {
document.all["z3"+ominute2].style.visibility="hidden"
document.all["z3"+minute2].style.left=w+161
document.all["z3"+minute2].style.visibility="visible"
}
}
if (osecond1 != second1 || first) {
if(document.layers) {
document.layers["z4"+osecond1].visibility="hidden"
document.layers["z4"+second1].left=w+234
document.layers["z4"+second1].visibility="visible"
}
else {
document.all["z4"+osecond1].style.visibility="hidden"
document.all["z4"+second1].style.left=w+234
document.all["z4"+second1].style.visibility="visible"
}
}
if(document.layers) {
document.layers["z5"+osecond2].visibility="hidden"
document.layers["z5"+second2].left=w+278
document.layers["z5"+second2].visibility="visible"
}
else {
document.all["z5"+osecond2].style.visibility="hidden"
document.all["z5"+second2].style.left=w+278
document.all["z5"+second2].style.visibility="visible"
}
if (first) {
if(document.layers) {
document.z1.left= w+88;
document.z1.top = 94;
document.z1.visibility = "visible"
document.z2.left= w+205;
document.z2.top = 94;
document.z2.visibility = "visible"
}
else {
z1.style.left= w+88;
z1.style.top = 94;
z1.style.visibility = "visible"
z2.style.left= w+205;
z2.style.top = 94;
z2.style.visibility = "visible"
}
}
first = 0
timerID = setTimeout("clock()",1000)
}
function start()
{
var now = new Date()
var hour = now.getHours()
var minute = now.getMinutes()
var sec = now.getSeconds()
if (hour < 10) hour = "0" + hour
hour += ""
hour1 = parseInt(hour.charAt(0))
hour2 = parseInt(hour.charAt(1))
if (minute < 10) minute = "0" + minute
minute += ""
minute1 = parseInt(minute.charAt(0))
minute2 = parseInt(minute.charAt(1))
if (sec < 10) sec = "0" + sec
sec += ""
second1 = parseInt(sec.charAt(0))
second2 = parseInt(sec.charAt(1))
clock()
}
// -->
</SCRIPT>

W BODY wpisujemy:

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
if(timerRunning) clearTimeout(timerID)
timerRunning = false
timerID = setTimeout("start()",0)
// -->
</SCRIPT>
<div id="z00" class='clock'>0</div>
<div id="z01" class='clock'>1</div>
<div id="z02" class='clock'>2</div>
<div id="z10" class='clock'>0</div>
<div id="z11" class='clock'>1</div>
<div id="z12" class='clock'>2</div>
<div id="z13" class='clock'>3</div>
<div id="z14" class='clock'>4</div>
<div id="z15" class='clock'>5</div>
<div id="z16" class='clock'>6</div>
<div id="z17" class='clock'>7</div>
<div id="z18" class='clock'>8</div>
<div id="z19" class='clock'>9</div>
<div id="z20" class='clock'>0</div>
<div id="z21" class='clock'>1</div>
<div id="z22" class='clock'>2</div>
<div id="z23" class='clock'>3</div>
<div id="z24" class='clock'>4</div>
<div id="z25" class='clock'>5</div>
<div id="z30" class='clock'>0</div>
<div id="z31" class='clock'>1</div>
<div id="z32" class='clock'>2</div>
<div id="z33" class='clock'>3</div>
<div id="z34" class='clock'>4</div>
<div id="z35" class='clock'>5</div>
<div id="z36" class='clock'>6</div>
<div id="z37" class='clock'>7</div>
<div id="z38" class='clock'>8</div>
<div id="z39" class='clock'>9</div>
<div id="z40" class='clock'>0</div>
<div id="z41" class='clock'>1</div>
<div id="z42" class='clock'>2</div>
<div id="z43" class='clock'>3</div>
<div id="z44" class='clock'>4</div>
<div id="z45" class='clock'>5</div>
<div id="z50" class='clock'>0</div>
<div id="z51" class='clock'>1</div>
<div id="z52" class='clock'>2</div>
<div id="z53" class='clock'>3</div>
<div id="z54" class='clock'>4</div>
<div id="z55" class='clock'>5</div>
<div id="z56" class='clock'>6</div>
<div id="z57" class='clock'>7</div>
<div id="z58" class='clock'>8</div>
<div id="z59" class='clock'>9</div>
<div id="z1" class='clock'>:</div>
<div id="z2" class='clock'>:</div>

OPIS:Napis przy kursorze myszki:
Skrypt pozwala na uzyskanie ciekawego efektu napisu idącego za kursorem. Nie można jednak zapomnieć o dodaniu w znaczniku <body> poniższej linijki:
onLoad="makesnake()" style="width:100%; overflow-x:hidden; overflow-y:scroll"

SCRIPT:

W HEAD:

<style type="text/css">
<!--
.spanstyle {position:absolute; visibility:visible; top:-50px; font-size:12pt; font-weight:bolder; color:#009000}
-->
</style>
<script>
<!--
var x,y
var step=7
var flag=10

var message="To jest napis kontrolny..."
message=message.split("")

var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
xpos[i]=-50
}
var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
ypos[i]=-50
}
function handlerMM(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
flag=1
}
function makesnake() {
if (flag==1 && document.all) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y

for (i=0; i<message.length-1; i++) {
var thisspan = eval("span"+(i)+".style")
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i]
}}
else if (flag==1 && document.layers) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y

for (i=0; i<message.length-1; i++) {
var thisspan = eval("document.span"+i)
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}}
var timer=setTimeout("makesnake()",20)
}
-->
</script>

W BODY:

<script>
<!--
for (i=0;i<=message.length-1;i++) {
document.write("<span id='span"+i+"' class='spanstyle'>")
document.write(message[i])
document.write("</span>")
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
-->
</script>

OPIS:Przesuwanie elementów strony:
Bardzo ciekawy skrypt pozwalający na uzyskanie warstw na stronie. Po najechaniu na obrazek lub tekst można (trzymając lewy przycisk myszy) przesuwać go po stronie. Część "W Body" należy oczywiście zmienić wprowadzając odpowiednie wartości obrazków i napisów.

SCRIPT:

W HEAD:

<style>
<!--
.drag{position:relative;cursor:hand}
-->
</style>
<script language="JavaScript1.2">
<!--
/*Credit Website Abstraction www.wsabstract.com*/
var dragapproved=false
var z,x,y
function move(){
if (event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return false
}
}
function drags(){
if (!document.all)
return
if (event.srcElement.className=="drag"){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
//-->
</script>

W BODY:

<img src="1.jpg" class="drag" title="Przytrzymaj i przesuń">
<img src="2.gif" class="drag" title="Przytrzymaj i przesuń">
<q class="drag" title="Przytrzymaj i przesuń" STYLE=" font-weight: bolder; font-size: 24pt; color: #734A00">Jakiś tekst</q>

OPIS:Pokaz slajdów z przyciskami:
Skrypt wyświetla obrazki pod nimi umieszczone są przyciski nawigacyjne.

SCRIPT:
W BODY:

<div align="center">
  <center>
<table border="0" cellpadding="0">
  <tr>
    <td><img src="7.jpg" width="221" height="280" name="photoslider"></td>
  </tr>
  <tr>
    <td><form method="POST" name="rotater">
      <div align="center"><center><p><script language="JavaScript1.1">
var photos=new Array()
var which=0

/*Change the below variables to reference your own images. You may have as many images in the slider as you wish*/
photos[0]="7.jpg"
photos[1]="2.jpg"
photos[2]="3.jpg"
photos[3]="4.jpg"
photos[4]="5.jpg"
photos[5]="6.jpg"
photos[6]="1.jpg"


function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which]
}
}

function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
}
else window.status='End of gallery'
}
</script><input type="button" value="<<Back" name="B2"
      onClick="backward()" class="pp"> <input type="button" value="Next>>" name="B1"
      onClick="forward()" class="pp"><br>
      <a href="#" onClick="which=1;backward();return false"><small>Start Over</small></a></p>
      </center></div>
    </form>
    </td>
  </tr>
</table>

  </center>
</div>

OPIS:Dodaj stronę do ulubionych:
Skrypt umożliwia dodanie strony do ulubionych w przeglądarce. W sekcji <BODY> </BODY> wstawiamy poniższy skrypt:

SCRIPT:

<A href="javascript:window.external.AddFavorite('http://www.pun.pl/')">Dodaj do ulubionych</A>

Ostatnio edytowany przez DEMON PL (2007-05-06 14:35:31)

Oficjalne forum pomocy serwisu PUN.pl

#1 2007-05-03 18:09:29

Skrypty HTML na stronę www, lub wasze forum

#2 2007-05-04 19:12:44

Odp: Skrypty HTML na stronę www, lub wasze forum

#3 2007-05-05 22:43:53

Odp: Skrypty HTML na stronę www, lub wasze forum

Stopka