| انتخاب صفحه: |
$(function(){
setPosVer();
setPosHor();
$('.show-popup').click(function(){
$('.popup-screen').fadeIn(300,function(){
$('.popup-win').slideDown();
});
});
$('.close-btn').click(function(){
$('.popup-win').slideUp(300,function(){
$('.popup-screen').fadeOut();
});
});
});
$(window).resize(function(){
setPosVer();
setPosHor();
});
راهنمای استفاده
کد را مطابق نمونه در دو قسمت head و body صفحه قرار دهید. در قسمت head صفحه، فایل جی کوئری به همراه استایل ها و اسکریپت مربوطه قرار دارند. بهتر است از نسخه جی کوئری که در فایل ضمیمه قرار دارد استفاده کنید.
راهنمای استفاده راهنمای استفادهvar banned_ip_page = "http://www.google.com"; // This is the page to direct to if the ip is banned
// get the visitor's IP address
var visitor_ip = '88.176.68.51'; // This is the visitor's IP address as returned by the server
// User defined test - add as many groups as you need for all the banned ips;
// Make sure you modify these example ip addresses and do not lock yourself out.
// The || (vertical bars or pipe lines) mean "or" and the == is used to test equality
// Each individual test is enclosed in parentheses
// The entire set of tests is enclosed in parentheses
if ( // opening parenthesis for the entire test
// You may change the tests from here
(visitor_ip == "88.176.68.51" )
|| (visitor_ip == "198.74.51.33" )
|| (visitor_ip == "198.74.61.68" )
|| (visitor_ip == "66.55.61.68" )
// until here ...
) // closing parenthesis for the entire test
{ alert("Sorry, your IP has been banned from this site");
document.location = banned_ip_page; }
راهنمای استفاده});
</script>
</head>
<body>
<div class="div-as-checkbox"><img src="../images/radio-checkbox/tick-icon.png" style="position:absolute; bottom:1px" class="tick" />
<input name="test" type="checkbox" value="" border="0" />
</div>
<div class="div-as-checkbox"><img src="../images/radio-checkbox/tick-icon.png" style="position:absolute; bottom:1px" class="tick selected" />
<input name="test" type="checkbox" value="" border="0" />
</div>
<div class="div-as-checkbox"><img src="../images/radio-checkbox/tick-icon.png" style="position:absolute; bottom:1px" class="tick" />
<input name="test" type="checkbox" value="" border="0" />
</div>
<div class="div-as-radio"><img src="../images/radio-checkbox/radio-icon.png" style="position:absolute; bottom:1px" class="radio selected" />
<input name="test" type="radio" value="" border="0" />
</div>
<div class="div-as-radio"><img src="../images/radio-checkbox/radio-icon.png" style="position:absolute; bottom:1px" class="radio" />
<input name="test" type="radio" value="" border="0" />
</div>
<div class="div-as-radio"><img src="../images/radio-checkbox/radio-icon.png" style="position:absolute; bottom:1px" class="radio" />
<input name="test" type="radio" value="" border="0" />
</div>
</body>
راهنمای استفاده
راهنمای استفاده راهنمای استفاده راهنمای استفاده راهنمای استفاده راهنمای استفاده راهنمای استفاده</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>
راهنمای استفاده راهنمای استفاده
راهنمای استفاده| انتخاب صفحه: |
