به هنگام استفاده از کدها به موارد ذیل توجه نمایید:
جدیدترین اسکریپت (ها):
فهرست کدها
|
| انتخاب صفحه: |
</script>
راهنمای استفاده راهنمای استفاده راهنمای استفاده راهنمای استفاده <div class="contentdiv">
محتوای شماره 2
</div>
<div class="contentdiv">
محتوای شماره 3
</div>
</div>
<div id="paginate-slider1" class="pagination">
</div>
<script type="text/javascript">
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline",
""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup",
["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for
"prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to
reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes
slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
<!-- ---------------------------------- انتهای کد نمونه 1 ------------------------------
-->
<!-- =================== نمونه 2 ==================== -->
<div id="slider2" class="sliderwrapper">
<div class="contentdiv">
محتوای شماره 1
</div>
<div class="contentdiv">
محتوای شماره 2 <br />
<p></p><a href="javascript:featuredcontentslider.jumpTo('slider2',
1)">Go back to 1st slide</a></p>
</div>
<div class="contentdiv">
محتوای شماره 3
</div>
</div>
<div id="paginate-slider2" class="pagination">
<a href="#" class="toc">page 1</a> <a href="#" class="toc anotherclass">page 2</a> <a href="#" class="toc">page 3</a> <a href="#" class="prev" style="margin-left: 10px"><strong><</strong></a> <a href="#" class="next"><strong>></strong></a></div>
<script type="text/javascript">
featuredcontentslider.init({
id: "slider2", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline",
""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup",
["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for
"prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to
reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [false, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes
slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</div>
</body>
راهنمای استفاده راهنمای استفاده راهنمای استفاده .hintanchor{ /*CSS for link that shows hint onmouseover*/
font-weight: bold;
color: navy;
margin: 3px 8px;
}
</style>
<script type="text/javascript">
var horizontal_offset="9px" //horizontal offset of hint box from anchor
link
/////No further editting needed
var vertical_offset="0" //horizontal offset of hint box from anchor link.
No need to change.
var ie=document.all
var ns6=document.getElementById&&!document.all
function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")?
document.documentElement : document.body
}
function clearbrowseredge(obj, whichedge){
var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1
: parseInt(vertical_offset)*-1
if (whichedge=="rightedge"){
var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30
: window.pageXOffset+window.innerWidth-40
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset)
}
else{
var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15
: window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
}
return edgeoffset
}
function showhint(menucontents, obj, e, tipwidth){
if ((ie||ns6) && document.getElementById("hintbox")){
dropmenuobj=document.getElementById("hintbox")
dropmenuobj.innerHTML=menucontents
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (tipwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=tipwidth
}
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
dropmenuobj.style.visibility="visible"
obj.onmouseout=hidetip
}
}
function hidetip(e){
dropmenuobj.style.visibility="hidden"
dropmenuobj.style.left=""
}
function createhintbox(){
var divblock=document.createElement("div")
divblock.setAttribute("id", "hintbox")
document.body.appendChild(divblock)
}
if (window.addEventListener)
window.addEventListener("load", createhintbox, false)
else if (window.attachEvent)
window.attachEvent("onload", createhintbox)
else if (document.getElementById)
window.onload=createhintbox
</script>
</head>
<body>
<form>
<table width="40%" border="0" cellspacing="0" cellpadding="0"
style="font-size:11px">
<tr>
<td width="22%" height="30" align="left" valign="middle">Name:</td>
<td width="78%" align="left" valign="middle"><input
name="text" type="text" class="test" />
<a href="#" class="hintanchor"
onMouseOver="showhint('Description ...', this, event, '150px')">[?]</a>
<!-- پهنای فضای نمایش توضیحات می باشد . این مقدار قابل حذف یا
تغییر می باشد 150px -->
</td>
</tr>
<tr>
<td height="30" align="left" valign="middle">Tel.
:</td>
<td align="left" valign="middle"><input name="text2"
type="text" class="test" />
<a href="#" class="hintanchor"
onMouseOver="showhint('Description ...', this, event, '150px')">[?]</a></td>
</tr>
<tr>
<td height="30" align="left" valign="middle">Education
:</td>
<td align="left" valign="middle"><input name="text2"
type="text" class="test" />
<a href="#" class="hintanchor"
onMouseOver="showhint('Description ...', this, event, '150px')">[?]</a>
</td>
</tr>
<tr>
<td height="30" align="left" valign="middle">Address:</td>
<td align="left" valign="middle"><textarea name="text3"
rows="4" class="test" style="margin-top:3px"></textarea>
<a href="#" class="hintanchor"
onMouseOver="showhint('Description ...', this, event, '150px')">[?]</a></td>
</tr>
</table>
</form>
</body>
راهنمای استفاده راهنمای استفاده <script type="text/javascript" src="photogallery.js">
</script>
<style type="text/css">
.photogallery{ /*CSS for TABLE containing a photo album*/
text-align:center
}
.photogallery img{ /*CSS for images within an album*/
border: 2px solid #333;
}
.photonavlinks{ /*CSS for pagination DIV*/
font: bold 14px Arial; padding:2px; text-align:center; width:700px}
.photonavlinks a{ /*CSS for each navigational link*/
margin-right: 2px;
margin-bottom: 3px;
padding: 1px 5px;
border:1px solid gray;
text-decoration: none;
background-color: white;
}
.photonavlinks a.current{ /*CSS for currently selected navigational link*/
background-color: #ffffdd;
}
</style>
</head>
<body><script type="text/javascript">
//Define your own array to hold the photo album images
//Syntax: ["path_to_thumbnail", "opt_image_title", "opt_destinationurl",
"opt_linktarget"]
var myvacation=new Array()
myvacation[0]=["../images/js_prev_pics/img1.jpg",
"sample 1", "http://www.webkaran.com"]
myvacation[1]=["../images/js_prev_pics/img2.jpg", "sample 2",
"http://www.yahoo.com"]
myvacation[2]=["../images/js_prev_pics/img3.jpg", "sample 3",
"http://www.google.com"]
myvacation[3]=["../images/js_prev_pics/img1.jpg", "sample 4",
"http://www.webkaran.com"]
myvacation[4]=["../images/js_prev_pics/img2.jpg", "sample 5",
"http://www.yahoo.com"]
myvacation[5]=["../images/js_prev_pics/img3.jpg", "sample 6",
"http://www.google.com"]
myvacation[6]=["../images/js_prev_pics/img1.jpg", "sample 7",
"http://www.webkaran.com"]
myvacation[7]=["../images/js_prev_pics/img2.jpg", "sample 8",
"http://www.yahoo.com"]
myvacation[8]=["../images/js_prev_pics/img3.jpg", "sample 9",
"http://www.google.com"]
//initiate a photo gallery
//Syntax: new photogallery(imagearray, cols, rows, tablewidth, tableheight, opt_[paginatetext_prefix,
paginatetext_linkprefix])
var thepics=new photogallery(myvacation, 3, 2, '700px', '200px')
//----------------------------- راهنمایی ---------------------------------
// 3: تعداد تصاویر در هر ردیف
// 2: تعداد تصاویر در هر ستون
// 700: پهنای فضای گالری
// 200: ارتفاع فضای گالری
//--------------------------------------------------------------------------
راهنمای استفاده .progress{
width: 1px;
height: 14px;
color: white;
font-size: 12px;
overflow: hidden;
background-color: navy;
padding-left: 5px;
}
</style>
<script type="text/JavaScript">
function textCounter(field,counter,maxlimit,linecounter) {
// text width//
var fieldWidth = parseInt(field.offsetWidth);
var charcnt = field.value.length;
// trim the extra text
if (charcnt > maxlimit) {
field.value = field.value.substring(0, maxlimit);
}
else {
// progress bar percentage
var percentage = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ;
document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+"px";
document.getElementById(counter).innerHTML="Limit: "+percentage+"%"
// color correction on style from CCFFF -> CC0000
setcolor(document.getElementById(counter),percentage,"background-color");
}
}
function setcolor(obj,percentage,prop){
obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
}
</script>
</head>
<body>
<form>
<textarea rows="5" cols="40" name="maxcharfield"
id="maxcharfield"
onKeyDown="textCounter(this,'progressbar1',20)"
onKeyUp="textCounter(this,'progressbar1',20)"
onFocus="textCounter(this,'progressbar1',20)" ></textarea><br
/>
<div id="progressbar1" class="progress"></div>
<script>textCounter(document.getElementById("maxcharfield"),"progressbar1",20)</script>
</form>
</body>
راهنمای استفاده راهنمای استفاده
راهنمای استفاده راهنمای استفاده //Autumn leaves- by Kurt Grigg (kurt.grigg@virgin.net)
//Modified by Dynamic Drive for NS6 functionality
//visit http://www.dynamicdrive.com for this script
//Pre-load your image below!
grphcs=new Array(6)
Image0=new Image();
Image0.src=grphcs[0]="img9.gif";
Image1=new Image();
Image1.src=grphcs[1]="img8-01.gif"
Image2=new Image();
Image2.src=grphcs[2]="img8-02.gif"
Image3=new Image();
Image3.src=grphcs[3]="img8-03.gif"
Image4=new Image();
Image4.src=grphcs[4]="img8-04.gif"
Image5=new Image();
Image5.src=grphcs[5]="img8-05.gif"
Amount=8; //Smoothness depends on image file size, the smaller the size the more
you can use!
Ypos=new Array();
Xpos=new Array();
Speed=new Array();
Step=new Array();
Cstep=new Array();
ns=(document.layers)?1:0;
ns6=(document.getElementById&&!document.all)?1:0;
if (ns){
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img
src="+rndPic+"></LAYER>");
}
}
else{
document.write('<div style="position:absolute;top:0px;left:0px; z-index:100"><div
style="position:relative">');
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
}
document.write('</div></div>');
}
WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
for (i=0; i < Amount; i++){
Ypos[i] = Math.round(Math.random()*WinHeight);
Xpos[i] = Math.round(Math.random()*WinWidth);
Speed[i]= Math.random()*5+3;
Cstep[i]=0;
Step[i]=Math.random()*0.1+0.05;
}
function fall(){
var WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
var WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
var hscrll=(ns||ns6)?window.pageYOffset:document.body.scrollTop;
var wscrll=(ns||ns6)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < Amount; i++){
sy = Speed[i]*Math.sin(90*Math.PI/120);
sx = Speed[i]*Math.cos(Cstep[i]);
Ypos[i]+=sy;
Xpos[i]+=sx;
if (Ypos[i] > WinHeight){
Ypos[i]=-60;
Xpos[i]=Math.round(Math.random()*WinWidth);
Speed[i]=Math.random()*5+3;
}
if (ns){
document.layers['sn'+i].left=Xpos[i];
document.layers['sn'+i].top=Ypos[i]+hscrll;
}
else if (ns6){
document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i]);
document.getElementById("si"+i).style.top=Ypos[i]+hscrll;
}
else{
eval("document.all.si"+i).style.left=Xpos[i];
eval("document.all.si"+i).style.top=Ypos[i]+hscrll;
}
Cstep[i]+=Step[i];
}
setTimeout('fall()',30);
}
راهنمای استفاده #dhtmltooltip{
position: absolute;
width: 150px;
border: 1px solid #444444;
padding: 2px;
background-color: #ffffdd;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within
this CSS*/
/*filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=125);*/
}
#dhtmlpointer{
position:absolute;
z-index: 101;
visibility: hidden;
}
</style>
<script type="text/javascript">
var offsetfromcursorX=12 //Customize x offset of tooltip
var offsetfromcursorY=10 //Customize y offset of tooltip
var offsetdivfrompointerX=10 //Customize x offset of tooltip DIV relative to pointer
image
var offsetdivfrompointerY=12 //Customize y offset of tooltip DIV relative to pointer
image. Tip: Set it to (height_of_pointer_image-1).
document.write('<div id="dhtmltooltip"></div>') //write out
tooltip DIV
document.write('<img id="dhtmlpointer" src="../images/spacer.gif">')
//write out pointer image
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById?
document.getElementById("dhtmltooltip") : ""
var pointerobj=document.all? document.all["dhtmlpointer"] : document.getElementById? document.getElementById("dhtmlpointer") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")?
document.documentElement : document.body
}
function ddrivetip(thetext, thewidth, thecolor){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}
function positiontip(e){
if (enabletip){
var nondefaultpos=false
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20
var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX
: winwidth-e.clientX-offsetfromcursorX
var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY
: winheight-e.clientY-offsetfromcursorY
var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000
//if the horizontal distance isn't enough to accomodate the width of the context
menu
if (rightedge<tipobj.offsetWidth){
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=curX-tipobj.offsetWidth+"px"
nondefaultpos=true
}
else if (curX<leftedge)
tipobj.style.left="5px"
else{
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px"
pointerobj.style.left=curX+offsetfromcursorX+"px"
}
//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight){
tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px"
nondefaultpos=true
}
else{
tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px"
pointerobj.style.top=curY+offsetfromcursorY+"px"
}
tipobj.style.visibility="visible"
if (!nondefaultpos)
pointerobj.style.visibility="visible"
else
pointerobj.style.visibility="hidden"
}
}
function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
pointerobj.style.visibility="hidden"
tipobj.style.left="0px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip
</script> راهنمای استفاده <form name="jumpy" >
<select name="example" size="1" onChange="gone()">
<!-- CHANGE THE BELOW URLS TO YOUR OWN-->
<option value="http://www.yahoo.com" selected>Yahoo</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.amazon.com">Amazon</option>
<option value="http://www.AltaVista.com">AltaVista</option>
</select>
<input type="button" name="test" value=" Go! "
onClick="gone()">
</form>
</div>
<script language="javascript">
<!--
//Specify display mode (0 or 1)
//0 causes document to be displayed in an inline frame, while 1 in a new browser
window
var displaymode=0
//if displaymode=0, configure inline frame attributes (ie: dimensions, intial document
shown
var iframecode='<iframe id="external" style="width:100%;height:450px;
border: 1px dashed #999999" src="http://www.yahoo.com"></iframe>'
/////NO NEED TO EDIT BELOW HERE////////////
if (displaymode==0)
document.write(iframecode)
راهنمای استفاده <!-- Do not edit IE conditional style below -->
<!--[if gte IE 5.5]>
<style type="text/css">
#motioncontainer {
width:expression(Math.min(this.offsetWidth, maxwidth)+'px');
}
</style>
<![endif]-->
<!-- End Conditional Style -->
<script type="text/javascript" src="motiongallery.js"></script>
<style type="text/css">
#motioncontainer {
WIDTH: 50%; height: 142px
}
#motioncontainer A IMG {
BORDER-RIGHT: #aaaaaa 1px solid; BORDER-TOP: #aaaaaa 1px solid; BORDER-LEFT: #aaaaaa
1px solid; BORDER-BOTTOM: #aaaaaa 1px solid
}
#motioncontainer A:hover IMG {
BORDER-RIGHT: black 1px dashed; BORDER-TOP: black 1px dashed; BORDER-LEFT: black
1px dashed; BORDER-BOTTOM: black 1px dashed
}
#statusdiv {
BORDER-RIGHT: gray 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: gray 1px solid; PADDING-LEFT:
2px; LEFT: -300px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: gray 1px
solid; PADDING-TOP: 2px; BORDER-BOTTOM: gray 1px solid; POSITION: absolute; background-color:#ffffcc
}
#motioncontainer A:hover {
COLOR: #cc0000
}
</style>
</head>
<body>
<div id="motioncontainer" style="position:relative;overflow:hidden">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space:
nowrap">
<span id="trueContainer"><a href="javascript:enlargeimage('sample.gif')"><img src="sample.gif" border=1></a> <a href="javascript:enlargeimage('sample.gif', 300, 300)"><img src="sample.gif" border=1></a> <a href="http://www.webkaran.com"><img src="sample.gif" border=1></a> <a href="#"><img src="sample.gif" border=1></a> <a href="#"><img src="sample.gif" border=1></a> <a href="#"><img src="sample.gif" border=1></a> <a href="#"><img src="sample.gif" border=1></a> <a href="#"><img src="sample.gif" border=1></a> <a href="#"><img src="sample.gif" border=1></a></span>
</div>| motiongallery.js :دانلود فایل ضمیمه |
راهنمای استفاده راهنمای استفاده <!-- Print Page Script Use this script to have your users print your HTML page
-->
<script language="JavaScript">
if (window.print) {
document.write(' '
+ '<input type=button name=print value="Click" '
+ 'onClick="javascript:window.print()"> To Print this page!');
}
// End -->
</script>
<!-- -- No: 02 ----------------- Icon Type ----- -->
<script language="JavaScript" type="text/javascript"> راهنمای استفاده راهنمای استفاده راهنمای استفاده راهنمای استفاده| انتخاب صفحه: |
