Vertical Ticker Customize it....
<!-- BEGINNING OF THE CODE FOR THE VERTICAL TEXT TICKER -->
<!-----------------------------------------> <!-- STYLE-CONFIGURATION STARTS HERE --> <!-----------------------------------------> <style> a.textstyle { color:#ffffff; /* You may change it */ font-family:Arial; /* You may change it */ font-size:13pt; /* You may change it */ font-weight:bold; /* You may change it */ text-decoration:none; /* You may change it */ } a.textstyle:visited { color:#ffffff; /* You may change it */ } a.textstyle:hover { color:#maroon; /* You may change it */ } /* PLEASE NOTE that padding, width and height of ticker, border-width must be set within the script-code. See script code below! */ /* IMPORTANT you may change the direction of typing from bottom to top. See comments below within this style-zone */ .boxstyle { background-color:#000000;/* You may change it */ border-color:#ffffff;/* You may change it */ opacity:1; /* Set the opacity for Firefox, Opera, Safari and Chrome. Values may range from 0 to 1 */ position:absolute; /* Do not change */ overflow:hidden; /* Do not change */ display: inline-block; /* Do not change */ -moz-transform: scale(1) rotate(90deg) translate(0px); /* Set rotate(-90deg) to change typing from bottom to top */ -webkit-transform: scale(1) rotate(90deg) translate(0px); /* Set rotate(-90deg) to change typing from bottom to top */ -o-transform: scale(1) rotate(90deg) translate(0px); /* Set rotate(-90deg) to change typing from bottom to top */ filter: /* Do not change */ progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=6.123233995736766e-17, M12=-1,M21=1, M22=6.123233995736766e-17), /* Set M12=1,M21=-1 to change typing from bottom to top */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=6.123233995736766e-17, M12=-1, M21=1, M22=6.123233995736766e-17, sizingMethod='auto expand')" /* Set M12=1,M21=-1 to change typing from bottom to top */ alpha(opacity=100); /* Set the opacity for Internet Explorer. Values may range from 0 to 100*/ /* rounded corners for Firefox */ -moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px; /* rounded corners for Chrome and Safari */ -webkit-border-top-left-radius: 15px; -webkit-border-bottom-right-radius: 15px; /* rounded corners for Opera */ border-top-left-radius: 15px; border-bottom-right-radius: 15px; } </style> <!-----------------------------------------> <!-- STYLE-CONFIGURATION ENDS HERE --> <!-----------------------------------------> <script> // CREDITS: // Vertical text ticker // By Peter Gehrig // Copyright (c) 2010 Peter Gehrig. All rights reserved. // Permission given to use the script provided that this notice remains as is. // Additional scripts can be found at http://www.fabulant.com // IMPORTANT: // If you add this script to a script-library or script-archive // you have to add a highly visible link to // http://www.fabulant.com on the webpage // where this script will be featured var text=new Array() var textlink=new Array() var texttarget=new Array() ///////////////////////////////////////////////// // SCRIPT-CONFIGURATION STARTS HERE ///////////////////////////////////////////////// // Your messages. Add as many as you like. Experienced webmasters may even embed simple HTML-tags // Use short messages as this is a one-line-ticker text[0]="1 Safar, 1434." text[1]="20-Arbaeen-e-Shuhada-e-Karbala (AS)." text[2]="24-Martyrdom: BiBi Zainab (SA) (ref)." // Add a link for each message // Enter "#" if you don't want to link a message (see sample below) textlink[0]="http://www.fabulant.com" textlink[1]="http://www.fabulant.com" textlink[2]="#" // Add the target of the link // Accepted values are "_blank","_top", "_self", "_parent" or the name of any frame texttarget[0]="_blank" texttarget[1]="_self" texttarget[2]="_parent" // width and height of ticker (pixels) var textwidth=470 var textheight=54 // pause between the messages (seconds) var textpause=2 // border-width (enter 0 if you don't want to add a border) var textborder=1 // padding of text, distance to border (pixels) var textpadding=5 // speed (higher=slower) var speed=80 // set the position of the ticker. Acceptable values are "rightposition" or "leftposition" or "myposition" // "rightposition" places the ticker into the top-corner on the right // "leftposition" places the ticker into the top-corner on the left // "myposition" sets the the horizontal (x_position) and vertical (y_position) position to your needs var tickerposition="myposition" // if you set "myposition" you should enter the x_position amd y_position below (pixels) var x_position=950 var y_position=140 ///////////////////////////////////////////////// // SCRIPT-CONFIGURATION ENDS HERE ///////////////////////////////////////////////// // Do not edit below this line if (document.all) { var marginright=document.body.clientWidth-textheight } else { var marginright=window.innerWidth-textheight } var okbrowser=true var okbr=true var agt=navigator.userAgent.toLowerCase(); var i_mes=0 var i_substring=0 var i_presubstring=0 var i_text=0 var textcontent="" var notag=true var textpresubstring="" var textaftersubstring="" textpause*=1000 var browserinfos=navigator.userAgent var ie4=!document.getElementById&&document.all&&!browserinfos.match(/Opera/) var ie5=document.getElementById&&document.all&&!browserinfos.match(/Opera/) var ns6=document.getElementById&&!document.all&&!browserinfos.match(/Opera/) var opera=browserinfos.match(/Opera/) function gettextcontent() { tablewidth=textwidth-2*textborder tableheight=textheight-2*textborder textpresubstring=text[i_text].substring(0,i_presubstring) var i_prepre=i_presubstring-1 if (i_prepre<0) {i_prepre=0} if (text[i_text].substring(i_prepre,i_presubstring)=="<"){notag=false} if (text[i_text].substring(i_prepre,i_presubstring)==">"){notag=true} if (notag) { textcontent="<a href='"+textlink[i_text]+"' target='"+texttarget[i_text]+"' 'textstyle'>" textcontent+=textpresubstring textcontent+="</a>" } } function showticker() { if (i_substring<=text[i_text].length) { i_substring++ i_presubstring=i_substring-1 if (i_presubstring<0) {i_presubstring=0} gettextcontent() document.getElementById("ticker").innerHTML=textcontent var timer=setTimeout("showticker()", speed) } else { clearTimeout(timer) var timer=setTimeout("changetext()", textpause) } } function changetext() { i_substring=0 i_presubstring=0 i_text++ if (i_text>text.length-1) { i_text=0 } showticker() } if (!document.all) { textwidth-=(2*textborder+2*textpadding) textheight-=(2*textborder+2*textpadding) if (tickerposition=="rightposition") { document.write('<div ID="ticker" >') document.write('</div>') } else if (tickerposition=="leftposition") { document.write('<div ID="ticker" >') document.write('</div>') } else if (tickerposition=="myposition") { document.write('<div ID="ticker" >') document.write('</div>') } window.onload=showticker } else if (document.all) { textwidth-=(2*textborder+2*textpadding) textheight-=(2*textborder+2*textpadding) if (tickerposition=="rightposition") { document.write('<div ID="ticker" >') document.write('</div>') } else if (tickerposition=="leftposition") { document.write('<div ID="ticker" >') document.write('</div>') } else if (tickerposition=="myposition") { document.write('<div ID="ticker" >') document.write('</div>') } window.onload=showticker } </script> <a href="http://alhussainii.weebly.com/index">alhussaini</a> <!-- END OF THE CODE FOR THE VERTICAL TEXT TICKER --> Slide In Menu
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" ></script>
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script> <script > $(function(){ $('.slide-out-div').tabSlideOut({ tabHandle: '.handle', //class of the element that will become your tab pathToTabImage: 'https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-ash3/c0.0.403.403/p403x403/537689_4537159581338_394597839_n.jpg', //path to the image for the tab //Optionally can be set using css imageHeight: '700px', //height of tab image //Optionally can be set using css imageWidth: '40px', //width of tab image //Optionally can be set using css tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left speed: 300, //speed of animation action: 'click', //options: 'click' or 'hover', action to trigger animation topPos: '100px', //position from the top/ use if tabLocation is left or left leftPos: '20px', //position from right/ use if tabLocation is bottom or top fixedPosition: true //options: true makes it stick(fixed position) on scroll }); }); </script> </script> <style > .slide-out-div { padding: 20px; width: 170px; background: #ffff; border: 1px solid #ffff; } </style> <div > <a <li><a href="http://alhussainii.weebly.com/fundamental-of-islam/">Fundamental Of Islam</a></li> <li><a href="http://alhussainii.weebly.com/fourteen-infallible/">Fourteen Infallibles</a></li> <li><a href="http://alhussainii.weebly.com/islamic-organizations/">Islamic Organizations</a></li> <li><a href="http://alhussainii.weebly.com/noha-manqabat-majalis/">Noha's Manqabat Majalis </a></li> <li><a href="http://alhussainii.weebly.com/ayatollahas-websites/">Ayatullah Websites</a></li> <li><a href="http://alhussainii.weebly.com/shia-killing-pictures/">Shohada's Photos</a></li> <li><a href="http://alhussainii.weebly.com/islamic-websites/">Islamic Websites</a></li> <li><a href="http://alhussainii.weebly.com/holy-quran/">Holy Quran mp3</a></li> <li><a href="http://alhussainii.weebly.com/nahjul-balaghah/">Nahjul Balagah</a></li> <li><a href="http://alhussainii.weebly.com/islamic-poetry/">Islamic Poetry</a></li> <li><a href="http://alhussainii.weebly.com/islamic-books/">Islamic Books</a></li> <li><a href="http://alhussainii.weebly.com/videos/">Islamic Movies</a></li> <li><a href="http://alhussainii.weebly.com/questions--answers/">Islamic Forum</a></li> <li><a href="http://alhussainii.weebly.com/calendar/">Islamic Calendar </a></li> <li><a href="http://alhussainii.weebly.com/i-s-l-a-m-i-c-q-u-o-t-e-s/">Islamic Qoutes</a></li> <li><a href="http://alhussainii.weebly.com/-shia-wallpaper/">Shia Wallpaper</a></li> <li><a href="http://alhussainii.weebly.com/islamic-stories/">True Stories</a></li> <li><a href="http://alhussainii.weebly.com/send-questions/">Ask Question </a></li> <li><a href="http://alhussainii.weebly.com/shia-killing-tube/">Shia Tube</a></li> <li><a href="http://alhussainii.weebly.com/news/">Shia News</a></li> <li><a href="http://http://alhussainii.weebly.com/biographies-of-islamic-hero/" >Biographies</a></li> <li><a href="http://alhussainii.weebly.com/freeware/">Free Sofware</a></li> <li><a href="http://alhussainii.weebly.com/kinds-of-namaz/domref/">Namazain</a></li> <li><a href="http://alhussainii.weebly.com/duas">Dua's</a></li> <li ><a href="http://alhussainii.weebly.com/about-us/">About us</a></li> </ul> <h3>Pay Fatiha For My Mohter<h3> <a href="http://alhussainii.weebly.com/index">alhussaini</a> </div> Nivo Slider<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://u.jimdo.com/www54/o/sdfd33ca1d413f4c9/userlayout/js/jquery-nivo-slider-pack.js"></script> <script > //<![CDATA[ var $j = jQuery.noConflict(); $j(window).load(function() { $j('#slider').nivoSlider({ effect:'fade', //Specify sets like: 'fold,fade,sliceDown' slices:15, animSpeed:500, //Slide transition speed pauseTime:3000, startSlide:0, //Set starting Slide (0 index) directionNav:true, //Next & Prev directionNavHide:true, //Only show on hover controlNav:true, //1,2,3... controlNavThumbs:false, //Use thumbnails for Control Nav controlNavThumbsFromRel:false, //Use image rel for thumbs controlNavThumbsSearch: '.jpg', //Replace this with... controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src keyboardNav:true, //Use left & right arrows pauseOnHover:false, //Stop animation while hovering manualAdvance:false, //Force manual transitions captionOpacity:0.8, //Universal caption opacity beforeChange: function(){}, afterChange: function(){}, slideshowEnd: function(){}, //Triggers after all slides have been shown lastSlide: function(){}, //Triggers when last slide is shown afterLoad: function(){} //Triggers when slider has loaded }); }); //]]> </script> <style > /*<![CDATA[*/ /* The Nivo Slider styles */ .nivoSlider { position: relative; } .nivoSlider img { position: absolute; top: 0; left: 0; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; z-index: 60; display: none; } /* The slices in the Slider */ .nivo-slice { display: block; position: absolute; z-index: 50; height: 100%; } /* Caption styles */ .nivo-caption { position: absolute; left: 0; bottom: 0; background: #000; color: #fff; opacity: 0.8; width: 100%; z-index: 89; } .nivo-caption p { padding: 5px; margin: 0; } .nivo-caption a { display: inline !important; } .nivo-html-caption { display: none; } /* Direction nav styles (e.g. Next & Prev) */ .nivo-directionNav a { position: absolute; top: 45%; z-index: 99; cursor: pointer; } .nivo-prevNav { left: 0; } .nivo-nextNav { right: 0; } /* Control nav styles (e.g. 1,2,3...) */ .nivo-controlNav a { position: relative; z-index: 99; cursor: pointer; } .nivo-controlNav a.active { font-weight: 700; } #slider { width: 678px; height: 100%; background: #fff url(http://u.jimdo.com/www54/o/sdfd33ca1d413f4c9/userlayout/img/loading.gif?t=1343764172) no-repeat 50% 50%; } #slider img { position: absolute; top: 0; left: 0; display: none; } #slider a { border: 0; display: block; } .nivo-controlNav { position: absolute; left: 45%; bottom: -30px; } .nivo-controlNav a { display: block; width: 22px; height: 22px; background: url(http://u.jimdo.com/www54/o/sdfd33ca1d413f4c9/userlayout/img/bullets.png?t=1343764092) no-repeat; text-indent: -9999px; border: 0; margin-right: 3px; float: left; } .nivo-controlNav a.active { background-position: 0 -22px; } .nivo-directionNav a { display: block; width: 30px; height: 30px; background: url(http://u.jimdo.com/www54/o/sdfd33ca1d413f4c9/userlayout/img/arrows.png?t=1343764181) no-repeat; text-indent: -9999px; border: 0; } a.nivo-nextNav { background-position: -30px 0; right: 15px; } a.nivo-prevNav { left: 15px; } .nivo-caption { text-shadow: none; font-family: Helvetica, Arial, sans-serif; } .nivo-caption a { color: #efe9d1; text-decoration: underline; } /*]]>*/ </style> <div id="slider" > <img src="http://alhussainii.weebly.com/uploads/1/3/9/2/13924055/5472602_orig.jpg" alt=""/> <img src="http://alhussainii.weebly.com/uploads/1/3/9/2/13924055/2083791_orig.jpg" alt=""/> <img src="http://alhussainii.weebly.com/uploads/1/3/9/2/13924055/9943150_orig.jpg" alt=""/> <img src="http://alhussainii.weebly.com/uploads/1/3/9/2/13924055/1053909_orig.jpg" alt=""/> <img src="http://alhussainii.weebly.com/uploads/1/3/9/2/13924055/7300679_orig.jpg" alt=""/> <img src="http://alhussainii.weebly.com/uploads/1/3/9/2/13924055/1610113_orig.jpg" alt=""/> <img src="http://alhussainii.weebly.com/uploads/1/3/9/2/13924055/7462733_orig.jpg" alt=""/> <img src="http://alhussainii.weebly.com/uploads/1/3/9/2/13924055/5492355_orig.jpg" alt=""/> <img src="http://alhussainii.weebly.com/uploads/1/3/9/2/13924055/8479310_orig.jpg" alt=""/> </div> _____________________________________________________________________________________ Back to top.......code <!--BACK-TO-TOP-STARTS--> <a href="#" title="Back to Top"><img onmouseover="this.src='http://lh6.ggpht.com/_7wsQzULWIwo/SgXYIY37QsI/AAAAAAAABDY/IyDZK-CJzdA/Up1Blue%5B4%5D.png?imgmax=800'" src="http://lh6.ggpht.com/_7wsQzULWIwo/SgXYJAl0TcI/AAAAAAAABDc/_gSevr05V18/Up1Blue%5B9%5D.png?imgmax=800" onmouseout="this.src='URL Of Your Smaller Button Image'"/></a> <!--BACK-TO-TOP-STOPS--> |