JavaScript - How Do I Delete The Slide-effect?
I found a very intressting JS function at this webpage:
http://www.dynamicdrive.com/dynamici...edcollapse.htm I wonder if someone knows wihich part from the JS-file i should change/delete so i only get the fade at exempel 1 and not the slide/rolling effect. I only want the fade. The JS is: Code: //** Animated Collapsible DIV v2.0- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com. //** May 24th, 08'- Script rewritten and updated to 2.0. //** June 4th, 08'- Version 2.01: Bug fix to work with jquery 1.2.6 (which changed the way attr() behaves). //** March 5th, 09'- Version 2.2, which adds the following: //1) ontoggle($, divobj, state) event that fires each time a DIV is expanded/collapsed, including when the page 1st loads //2) Ability to expand a DIV via a URL parameter string, ie: index.htm?expanddiv=jason or index.htm?expanddiv=jason,kelly //** March 9th, 09'- Version 2.2.1: Optimized ontoggle event handler slightly. //** July 3rd, 09'- Version 2.4, which adds the following: //1) You can now insert rel="expand[divid] | collapse[divid] | toggle[divid]" inside arbitrary links to act as DIV togglers //2) For image toggler links, you can insert the attributes "data-openimage" and "data-closedimage" to update its image based on the DIV state var animatedcollapse={ divholders: {}, //structu {div.id, div.attrs, div.$divref, div.$togglerimage} divgroups: {}, //structu {groupname.count, groupname.lastactivedivid} lastactiveingroup: {}, //structu {lastactivediv.id} preloadimages: [], show:function(divids){ //public method if (typeof divids=="object"){ for (var i=0; i<divids.length; i++) this.showhide(divids[i], "show") } else this.showhide(divids, "show") }, hide:function(divids){ //public method if (typeof divids=="object"){ for (var i=0; i<divids.length; i++) this.showhide(divids[i], "hide") } else this.showhide(divids, "hide") }, toggle:function(divid){ //public method if (typeof divid=="object") divid=divid[0] this.showhide(divid, "toggle") }, addDiv:function(divid, attrstring){ //public function this.divholders[divid]=({id: divid, $divref: null, attrs: attrstring}) this.divholders[divid].getAttr=function(name){ //assign getAttr() function to each divholder object var attr=new RegExp(name+"=([^,]+)", "i") //get name/value config pair (ie: width=400px,) return (attr.test(this.attrs) && parseInt(RegExp.$1)!=0)? RegExp.$1 : null //return value portion (string), or 0 (false) if none found } this.currentid=divid //keep track of current div object being manipulated (in the event of chaining) return this }, showhide:function(divid, action){ var $divref=this.divholders[divid].$divref //reference collapsible DIV if (this.divholders[divid] && $divref.length==1){ //if DIV exists var targetgroup=this.divgroups[$divref.attr('groupname')] //find out which group DIV belongs to (if any) if ($divref.attr('groupname') && targetgroup.count>1 && (action=="show" || action=="toggle" && $divref.css('display')=='none')){ //If current DIV belongs to a group if (targetgroup.lastactivedivid && targetgroup.lastactivedivid!=divid) //if last active DIV is set this.slideengine(targetgroup.lastactivedivid, 'hide') //hide last active DIV within group first this.slideengine(divid, 'show') targetgroup.lastactivedivid=divid //remember last active DIV } else{ this.slideengine(divid, action) } } }, slideengine:function(divid, action){ var $divref=this.divholders[divid].$divref var $togglerimage=this.divholders[divid].$togglerimage if (this.divholders[divid] && $divref.length==1){ //if this DIV exists var animateSetting={height: action} if ($divref.attr('fade')) animateSetting.opacity=action $divref.animate(animateSetting, $divref.attr('speed')? parseInt($divref.attr('speed')) : 500, function(){ if ($togglerimage){ $togglerimage.attr('src', ($divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open) } if (animatedcollapse.ontoggle){ try{ animatedcollapse.ontoggle(jQuery, $divref.get(0), $divref.css('display')) } catch(e){ alert("An error exists inside your \"ontoggle\" function:\n\n"+e+"\n\nAborting execution of function.") } } }) return false } }, generatemap:function(){ var map={} for (var i=0; i<arguments.length; i++){ if (arguments[i][1]!=null){ //do not generate name/value pair if value is null map[arguments[i][0]]=arguments[i][1] } } return map }, init:function(){ var ac=this jQuery(document).ready(function($){ animatedcollapse.ontoggle=animatedcollapse.ontoggle || null var urlparamopenids=animatedcollapse.urlparamselect() //Get div ids that should be expanded based on the url (['div1','div2',etc]) var persistopenids=ac.getCookie('acopendivids') //Get list of div ids that should be expanded due to persistence ('div1,div2,etc') var groupswithpersist=ac.getCookie('acgroupswithpersist') //Get list of group names that have 1 or more divs with "persist" attribute defined if (persistopenids!=null) //if cookie isn't null (is null if first time page loads, and cookie hasnt been set yet) persistopenids=(persistopenids=='nada')? [] : persistopenids.split(',') //if no divs are persisted, set to empty array, else, array of div ids groupswithpersist=(groupswithpersist==null || groupswithpersist=='nada')? [] : groupswithpersist.split(',') //Get list of groups with divs that are persisted jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object this.$divref=$('#'+this.id) if ((this.getAttr('persist') || jQuery.inArray(this.getAttr('group'), groupswithpersist)!=-1) && persistopenids!=null){ //if this div carries a user "persist" setting, or belong to a group with at least one div that does var cssdisplay=(jQuery.inArray(this.id, persistopenids)!=-1)? 'block' : 'none' } else{ var cssdisplay=this.getAttr('hide')? 'none' : null } if (urlparamopenids[0]=="all" || jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains the single array element "all", or this div's ID cssdisplay='block' //set div to "block", overriding any other setting } else if (urlparamopenids[0]=="none"){ cssdisplay='none' //set div to "none", overriding any other setting } this.$divref.css(ac.generatemap(['height', this.getAttr('height')], ['display', cssdisplay])) this.$divref.attr(ac.generatemap(['groupname', this.getAttr('group')], ['fade', this.getAttr('fade')], ['speed', this.getAttr('speed')])) if (this.getAttr('group')){ //if this DIV has the "group" attr defined var targetgroup=ac.divgroups[this.getAttr('group')] || (ac.divgroups[this.getAttr('group')]={}) //Get settings for this group, or if it no settings exist yet, create blank object to store them in targetgroup.count=(targetgroup.count||0)+1 //count # of DIVs within this group if (jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains this div's ID targetgroup.lastactivedivid=this.id //remember this DIV as the last "active" DIV (this DIV will be expanded). Overrides other settings targetgroup.overridepersist=1 //Indicate to override persisted div that would have been expanded } if (!targetgroup.lastactivedivid && this.$divref.css('display')!='none' || cssdisplay=="block" && typeof targetgroup.overridepersist=="undefined") //if this DIV was open by default or should be open due to persistence targetgroup.lastactivedivid=this.id //remember this DIV as the last "active" DIV (this DIV will be expanded) this.$divref.css({display:'none'}) //hide any DIV that's part of said group for now } }) //end divholders.each jQuery.each(ac.divgroups, function(){ //loop through each group if (this.lastactivedivid && urlparamopenids[0]!="none") //show last "active" DIV within each group (one that should be expanded), unless url param="none" ac.divholders[this.lastactivedivid].$divref.show() }) if (animatedcollapse.ontoggle){ jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object and fire ontoggle event animatedcollapse.ontoggle(jQuery, this.$divref.get(0), this.$divref.css('display')) }) } //Parse page for links containing rel attribute var $allcontrols=$('a[rel]').filter('[rel^="collapse["], [rel^="expand["], [rel^="toggle["]') //get all elements on page with rel="collapse[]", "expand[]" and "toggle[]" $allcontrols.each(function(){ //loop though each control link this._divids=this.getAttribute('rel').replace(/(^\w+)|(\s+)/g, "").replace(/[\[\]']/g, "") //cache value 'div1,div2,etc' within identifier[div1,div2,etc] if (this.getElementsByTagName('img').length==1 && ac.divholders[this._divids]){ //if control is an image link that toggles a single DIV (must be one to one to update status image) animatedcollapse.preloadimage(this.getAttribute('data-openimage'), this.getAttribute('data-closedimage')) //preload control images (if defined) $togglerimage=$(this).find('img').eq(0).data('srcs', {open:this.getAttribute('data-openimage'), closed:this.getAttribute('data-closedimage')}) //remember open and closed images' paths ac.divholders[this._divids].$togglerimage=$(this).find('img').eq(0) //save reference to toggler image (to be updated inside slideengine() ac.divholders[this._divids].$togglerimage.attr('src', (ac.divholders[this._divids].$divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open) } $(this).click(function(){ //assign click behavior to each control link var relattr=this.getAttribute('rel') var divids=(this._divids=="")? [] : this._divids.split(',') //convert 'div1,div2,etc' to array if (divids.length>0){ animatedcollapse[/expand/i.test(relattr)? 'show' : /collapse/i.test(relattr)? 'hide' : 'toggle'](divids) //call corresponding public function return false } }) //end control.click })// end control.each $(window).bind('unload', function(){ ac.uninit() }) }) //end doc.ready() }, uninit:function(){ var opendivids='', groupswithpersist='' jQuery.each(this.divholders, function(){ if (this.$divref.css('display')!='none'){ opendivids+=this.id+',' //store ids of DIVs that are expanded when page unloads: 'div1,div2,etc' } if (this.getAttr('group') && this.getAttr('persist')) groupswithpersist+=this.getAttr('group')+',' //store groups with which at least one DIV has persistance enabled: 'group1,group2,etc' }) opendivids=(opendivids=='')? 'nada' : opendivids.replace(/,$/, '') groupswithpersist=(groupswithpersist=='')? 'nada' : groupswithpersist.replace(/,$/, '') this.setCookie('acopendivids', opendivids) this.setCookie('acgroupswithpersist', groupswithpersist) }, getCookie:function(Name){ var re=new RegExp(Name+"=[^;]*", "i"); //construct RE to search for target name/value pair if (document.cookie.match(re)) //if cookie found return document.cookie.match(re)[0].split("=")[1] //return its value return null }, setCookie:function(name, value, days){ if (typeof days!="undefined"){ //if set persistent cookie var expireDate = new Date() expireDate.setDate(expireDate.getDate()+days) document.cookie = name+"="+value+"; path=/; expires="+expireDate.toGMTString() } else //else if this is a session only cookie document.cookie = name+"="+value+"; path=/" }, urlparamselect:function(){ window.location.search.match(/expanddiv=([\w\-_,]+)/i) //search for expanddiv=divid or divid1,divid2,etc return (RegExp.$1!="")? RegExp.$1.split(",") : [] }, preloadimage:function(){ var preloadimages=this.preloadimages for (var i=0; i<arguments.length; i++){ if (arguments[i] && arguments[i].length>0){ preloadimages[preloadimages.length]=new Image() preloadimages[preloadimages.length-1].src=arguments[i] } } } } Similar TutorialsI am using ASP.NET and AJAX here. basically what I want is a nice little slide effect to show the next batch of images in a mini slide show. Example: << prev [image1] [image2] [image3] [image4] Next >> << prev [image5] [image6] [image7] [image8] Next >> so when the user presses next or previous, it will SLIDE to the left/right. the databinding is done at the server side end and in an update panel so it does an async postback when they press next/prev. how can I go about doing this type of effect? hi all hope someone can help me out here. The code below i found online and it works well but I would like it to slide rather than jump into posistion. Anyone know how I can adapt this or have another way of doing it?? what i like about this script is that it wont allow you to go beyond the bounds of the content when pressing the forward and back links but the transition needs a nice slide!!!. Example of how it works here Link Code: <head> <style> #contents{ position: relative; top: 0; left: 0; width: 786px; height: auto;} #scrollable{ overflow: hidden; width: 786px; height: 400px; border: 1px solid black;} </style> <script> var t = 0; function myback() { t += 786; with(document.getElementById("contents")) { if (t > 0) t = 0; if(style) style.left = t + "px"; else setAttribute("style", "left: " + t + "px"); } } function myforward() { t -= 786; with(document.getElementById("contents")) { if(t < -clientWidth) t = -clientWidth; if(style) style.left = t + "px"; else setAttribute("style", "left: " + t + "px"); } } </script> </head> <body> <table> <tr> <td rowspan="2"> <div id="scrollable"><div id="contents"> <table width="1572" border="0" cellspacing="0" cellpadding="5"> <tr> <td width="776" valign="top" bgcolor="#FFFF99">Some text!!!</td> <td width="776" valign="top" bgcolor="#66FFFF"> Some Text!!!</td> </tr> </table> </div> </div> </td> </tr> </table> <a href="javascript:void(0)" onclick="myback()">back</a> <a href="javascript:void(0)" onclick="myforward()">forward</a> </body> Hope this is clear. Thanks. I am currently trying to convert a relatively simple slide effect in javascript to a fade effect, I have attached the code below and be grateful if anyone can help, var slider = null; var slider_next = null; $(function () { var interval = setInterval('rotate_slider()', 11000); pos = (window.location.pathname == "/" || window.location.pathname == "/home" ? '1280' : '1280'); $('#featuredSlider > div:not(:first)').attr('style','position:absolute;left:'+ pos +'px;width:1280px'); $('#featuredSlider > div:first').next().attr('style','position:absolute;left:0px;width:1280px'); $('#featuredShortcuts > div').click( function() { clearInterval(interval); sliders = $('#featuredSlider > div:not(:first)'); sliders.css({"left": "1280px", "opacity": 0}); var curr_div = $(this); var selected_div = $('#featuredShortcuts > div.selected'); selected_div.toggleClass('selected'); curr_div.toggleClass('selected'); sliders.eq( parseInt(selected_div.attr('id').substr(1, 1)) ).animate({"left": "-=1280px", "opacity": 0}, 1000); sliders.eq( parseInt(curr_div.attr('id').substr(1, 1)) ).animate({"left": "0px", "width": "1280px", "opacity": 1}, 1000); }); }); function rotate_slider() { var next = null; var curr_div = $('#featuredShortcuts > div.selected'); if( $('#featuredShortcuts > div:last').hasClass('selected') ) { next = $('#featuredShortcuts > div:first'); } else { next = curr_div.next(); } curr_div.toggleClass('selected'); next.toggleClass('selected'); if( ! slider ) { slider = $('#featuredShortcuts').next(); slider_next = slider.next(); } else if ( slider_next.html() == $('#featuredSlider > div:last').html() ) { slider = slider.next(); slider_next = $('#featuredShortcuts').next(); } else if ( slider.html() == $('#featuredSlider > div:last').html() ) { slider = $('#featuredShortcuts').next() slider_next = slider_next.next(); } else { slider = slider.next(); slider_next = slider.next(); } slider.animate({"left": "-=1280px", "opacity": 0}, 1000); slider_next.animate({"left": "0px", "width": "1280px","opacity": 1}, 1000, function () { slider.css('left', '1280px') }); } Hi everyone, I was wondering if jQuery or mootools has a set of scripts that creates a page slide effect with a stationary menu? What I mean is instead of loading a page when you click a link, all pages of the website are loaded at first, and then when a link is clicked, the corresponding page slides onto the screen. The navigation menu remains unchanged (except for dropdown menus) throughout everything. This is a perfect example of what I'm looking for: www.mimeartist.com Can anyone point me to the right direction? I tried to search for this but didn't come up with too many great results, and I searched the jQuery documentation and wasn't able to find a slider feature. Thanks. Hi, I'm a complete novice using javascript. I'm trying to get a mootools plugin to work with a slide in/slide out javascript using multiple divs. Here's the page: http://pawsdogs.com/test/Site/work2.htm The mootools code (Noobslide) slides a main image on the right when you click thumbnails on the left, which are wrapped in a thumb mask using CSS. The first row of thumbnails works perfectly, but when it's passed on to the next div the mask isn't passed on and the effect breaks down. Thanks so much if anyone can help! Here's the html: Code: <li><a href="#" id="slidecontrol_2" class="slidecontrol">Click Here</a> <div id="slidedisplay_2" style="display:none;"> <div id="thumbs7"> <div class="thumbs"> <div><img src="images2/img4.jpg" alt="Photo Thumb" /></div> <div><img src="images2/img5.jpg" alt="Photo Thumb" /></div> <div><img src="images2/img6.jpg" alt="Photo Thumb" /></div> </div> <div id="thumbs_mask7"></div> <p id="thumbs_handles7"> <span></span> <span></span> <span></span> </p> </div> </div></li> <li><a href="#" id="slidecontrol_3" class="slidecontrol">asdf</a> <div id="slidedisplay_3" style="display:none;"> <div id="thumbs7"> <div class="thumbs"> <div><img src="images2/img2.jpg" alt="Photo Thumb" /></div> <div><img src="images2/img3.jpg" alt="Photo Thumb" /></div> </div> <div id="thumbs_mask7"></div> <p id="thumbs_handles7"> <span></span> <span></span> </p> </div> </div> The javascript: Code: $(document).ready(function () { $('a.slidecontrol').click(function(){ var $this = $(this); var divID = $this.attr("id").replace("slidecontrol_", "slidedisplay_"); var $div = $('#'+divID); if ($div.is(':visible')) { $div.slideUp(500); } else { $div.slideDown(500); } return false; }); }); The CSS: Code: #thumbs7{ position:relative; width:200px; clear:both; height:41px; overflow:hidden; } #thumbs7 .thumbs, #thumbs_handles7, #thumbs_mask7{ position:absolute; top:0; width:100%; height:41px; } #thumbs7 .thumbs div, #thumbs_handles7 span{ display:block; width:60px; height:41px; margin:0; float:left; cursor:pointer; } #thumbs7 .thumbs div img{ width:54px; float:right; } #thumbs_handles7 span{ background:url(../images2/thumb_invisible.gif) no-repeat; } #thumbs_mask7{ width:1200px; background:url(../images2/thumbs_mask.gif) no-repeat center top; } I have the following 3 buttons on my page. I need when on hover on each respective button, the button to light up with a bg image and a slide out rollover in the top direction. How can I achieve this? <div style="padding-left:45px;width:852px;"> <a href=".html" class="Button"> <div style="text-align:center;padding-top:15px;float:left;width:270px;height:45px;background-image:url(images/homeBG.png);background-repeat:no-repeat"> <span id="homeButtonText">Question 1</span><br /> </div> </a> <a href="" class="Button"> <div style="margin-left:18px;text-align:center;padding-top:15px;float:left;width:270px;height:45px;background-image:url(images/homeBG.png);background-repeat:no-repeat"> <span id="homeButtonText">Question 2</span><br /> </div> </a> <a href="" class="Button"> <div style="text-align:center;padding-top:15px;float:right;width:270px;height:45px;background-image:url(images/homeBG.png);margin-right:5px;background-repeat:no-repeat"> <span id="homeButtonText">Question 3</span><br /> </div> </a> </div> i am trying to slide multiple elements in my page at the same time. I wrote a script that can do one element at a time: Code: var count; var obj; function slide(elem,endy,endx,time){ obj=elem; count=time; currenty=obj.style.top.split('p')[0]; currentx=obj.style.left.split('p')[0]; deltay=endy-currenty; deltax=endx-currentx; yrate=deltay/time; xrate=deltax/time; framey=0; framex=0; fooy=setInterval("movey(obj)",1); foox=setInterval("movex(obj)",1); } function movex(obj){ framex++; currentx=currentx*1+xrate; obj.style.left=Math.floor(currentx); if(framex==count){ clearInterval(foox); } } function movey(obj){ framey++; currenty=currenty*1+yrate; obj.style.top=Math.floor(currenty); if(framey==count){ clearInterval(fooy); } } is their anyway to modify this code so it does not use global variables and can run multiple instances simulatnuasly. I need a sort of slide show feature for my page (specifics below). I've spent a lot of time researching this and have not found what I'm looking for. I'm new to jquery and not sure how big of a chore this will be, but here goes: 1. There will be a title bar placed within a right and left arrow on either side. 2. The right and left arrows should cycle through a list of titles (when the right/left arrow is clicked, the title bar will change to the next/previous title in the list). 3. When each title bar is moused over, a new image will fade in above, and then fade out on mouse out. I hope this all makes sense. I'm not looking for some fancy predesigned slideshow, I'll be using my own layout and images. I just need the basic code to perform these actions. Any help would be most appreciated.. Good Day: I am very interested in a slide show as seen on this website (www.linksyssolutions.com). Can anyone direct me as to where I could find a script for this slideshow to use on my site. Thanks very much in advance. Hello guys! :-) So, this is my first post so bare with me I'm currently under education as a webdesigner/developer, and for my exams i need this slide-in function, of a <div> i made. It has to be javascript, and as simple as possible :-) I've found alot of working scripts, but with all sorts of useless junk I can't have in my final result. So: Does any of you know a simple method of making an object slide-in from the side on MO, and slide back out when mouse is removed? Ty in advance! :-) The menus are supposed to come out from the side, as an animation. I thought I had the correct code but for some reason it isn't working. Could anyone take a look at my Javascript at let me know what I'm doing wrong? Thanks... Here are my files: HTML: Code: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- New Perspectives on JavaScript, 2nd Edition Tutorial 4 Review Assignment The 221B Blog Author: Date: March 6, 2011 Filename: sherlock.htm Supporting files: logo.jpg, mblog.css, sh.jpg, slides.js --> <title>The Works of Sherlock Holmes</title> <link href="mblog.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="slides.js"></script> <!--[if IE]> <style type="text/css"> /* IE-specific styles to ensure list of links is rendered properly */ #linkList ul li {float: left; width: 100%} #linkList ul li a {height: 1%} </style> <![endif]--> </head> <body> <div id="page"> <form id="searchForm" action=""> <div id="head"> <img src="logo.jpg" alt="The 221B Blog" /> <input id="searchTxt" type="text" size="20" /> <label for="searchTxt">Search</label> </div> <div id="linkList"> <ul> <li><a href="#">Home</a></li> <li><ul class="newGroup"> <li class="slideMenu"> <a href="#" class="pTitle">The Adventures of Sherlock Holmes <img class="arrow" src="arrow.gif" alt="" /></a> <ul id="list1"> <li><a href="#">A Scandal in Bohemia</a></li> <li><a href="#">The Red-headed League</a></li> <li><a href="#">A Case of Identity</a></li> <li><a href="#">The Boscombe Valley Mystery</a></li> <li><a href="#">The Five Orange Pips</a></li> <li><a href="#">The Man with the Twisted Lip</a></li> <li><a href="#">The Blue Carbuncle</a></li> <li><a href="#">The Speckled Band</a></li> <li><a href="#">The Engineer's Thumb</a></li> <li><a href="#">The Noble Bachelor</a></li> <li><a href="#">The Beryl Coronet</a></li> <li><a href="#">The Copper Beeches</a></li> </ul> </li> </ul></li> <li><ul> <li class="slideMenu"> <a href="#">The Memoirs of Sherlock Holmes <img class="arrow" src="arrow.gif" alt="" /></a> <ul id="list2"> <li><a href="#">Silver Blaze</a></li> <li><a href="#">The Yellow Face</a></li> <li><a href="#">The Stock-broker's Clerk</a></li> <li><a href="#">The "Gloria Scott"</a></li> <li><a href="#">The Musgrave Ritual</a></li> <li><a href="#">The Reigate Puzzle</a></li> <li><a href="#">The Crooked Man</a></li> <li><a href="#">The Resident Patient</a></li> <li><a href="#">The Greek Interpreter</a></li> <li><a href="#">The Naval Treaty</a></li> <li><a href="#">The Final Problem</a></li> </ul> </li> </ul></li> <li><ul> <li class="slideMenu"> <a href="#">The Return of Sherlock Holmes <img class="arrow" src="arrow.gif" alt="" /></a> <ul id="list3"> <li><a href="#">The Empty House</a></li> <li><a href="#">The Norwood Builder</a></li> <li><a href="#">The Dancing Men</a></li> <li><a href="#">The Solitary Cyclist</a></li> <li><a href="#">The Priory School</a></li> <li><a href="#">Black Peter</a></li> <li><a href="#">Charles Augustus Milverton</a></li> <li><a href="#">The Six Napoleons</a></li> <li><a href="#">The Three Students</a></li> <li><a href="#">The Golden Pince-Nez</a></li> <li><a href="#">The Missing Three-Quarter</a></li> <li><a href="#">The Abbey Grange</a></li> <li><a href="#">The Second Stain</a></li> </ul> </li> </ul></li> <li><ul> <li class="slideMenu"> <a href="#">The Case Book of Sherlock Holmes <img class="arrow" src="arrow.gif" alt="" /></a> <ul id="list4"> <li><a href="#">The Illustrious Client</a></li> <li><a href="#">The Blanched Soldier</a></li> <li><a href="#">The Mazarin Stone</a></li> <li><a href="#">The Three Gables</a></li> <li><a href="#">The Sussex Vampire</a></li> <li><a href="#">The Three Garridebs</a></li> <li><a href="#">Thor Bridge</a></li> <li><a href="#">The Creeping Man</a></li> <li><a href="#">The Lion's Mane</a></li> <li><a href="#">The Veiled Lodger</a></li> <li><a href="#">Shoscombe Old Place</a></li> <li><a href="#">The Retired Colourman</a></li> </ul> </li> </ul></li> <li><ul> <li class="slideMenu"> <a href="#">His Last Bow <img class="arrow" src="arrow.gif" alt="" /></a> <ul id="list5"> <li><a href="#">Wisteria Lodge</a></li> <li><a href="#">The Cardboard Box</a></li> <li><a href="#">The Red Circle</a></li> <li><a href="#">The Bruce-Partington Plans</a></li> <li><a href="#">The Dying Detective</a></li> <li><a href="#">The Disappearance of Lady Frances Carfax</a></li> <li><a href="#">The Devil's Foot</a></li> <li><a href="#">His Last Bow</a></li> </ul> </li> </ul></li> <li><ul> <li class="slideMenu"> <a href="#">The Novels <img class="arrow" src="arrow.gif" alt="" /></a> <ul id="list6"> <li><a href="#">A Study in Scarlet</a></li> <li><a href="#">The Sign of the Four</a></li> <li><a href="#">The Hound of the Baskervilles</a></li> <li><a href="#">The Valley of Fear</a></li> </ul> </li> </ul></li> <li><ul class="newGroup"> <li class="slideMenu"> <a href="#">The 221B Community <img class="arrow" src="arrow.gif" alt="" /></a> <ul id="list7"> <li><a href="#">Essays</a></li> <li><a href="#">Fan Fiction</a></li> <li><a href="#">Art</a></li> <li><a href="#">Discussion Forum</a></li> <li><a href="#">Issues Archive</a></li> </ul> </li> </ul></li> <li><ul> <li class="slideMenu"> <a href="#">Holmes on the Web <img class="arrow" src="arrow.gif" alt="" /></a> <ul id="list8"> <li><a href="#">The 221B Museum</a></li> <li><a href="#">Jeremy Brett Page</a></li> <li><a href="#">Basil Rathbone Page</a></li> <li><a href="#">The Baker Street Irregulars</a></li> </ul> </li> </ul></li> <li><ul> <li class="slideMenu"> <a href="#">Multimedia <img class="arrow" src="arrow.gif" alt="" /></a> <ul id="list9"> <li><a href="#">Radio Podcasts</a></li> <li><a href="#">Audiobooks</a></li> <li><a href="#">Video Clips</a></li> </ul> </li> </ul></li> <li><ul> <li class="slideMenu"> <a href="#">Doyle's Life & Times <img class="arrow" src="arrow.gif" alt="" /></a> <ul id="list10"> <li><a href="#">About Arthur Conan Doyle</a></li> <li><a href="#">Victorian England</a></li> <li><a href="#">Strand Magazine</a></li> <li><a href="#">The Holmes Atlas</a></li> </ul> </li> </ul></li> <li><ul> <li class="slideMenu"> <a href="#">Other Fictional Detectives <img class="arrow" src="arrow.gif" alt="" /></a> <ul id="list11"> <li><a href="#">Miss Marple</a></li> <li><a href="#">Hercule Poirot</a></li> <li><a href="#">Ellery Queen</a></li> </ul> </li> </ul></li> <li class="newGroup"><a href="#">About Me</a></li> </ul> </div> <div id="main"> <img src="sh.jpg" alt="" style="float: right; margin: 0px 0px 5px 5px" /> <p id="firstp"> The most famous of fictional detectives, Sherlock Holmes first appeared in print in 1887, in stories written by the Scottish author and physician, Sir Arthur Conan Doyle. Holmes is famous for his use of deductive reasoning to solve difficult and complex cases. Almost all Holmes stories are told in the first-person narration of Dr. John Watson, Holmes' closest friend and confidant.</p> <p>Doyle wrote four novels and 56 short stories in the Sherlock Holmes canon. The first Holmes tale was the novel, <i>A Study in Scarlet</i> which chronicled the meeting of Holmes and Watson and covered their first case together. As Doyle wrote additional tales, the Sherlock Holmes stories grew in popularity, becoming a regular feature of The Strand magazine. Desiring to explore other literary pursuits, Doyle grew tired of the detective and killed off Holmes in the short story <i>The Final Problem</i>. However public acclaim and a desire for more Holmes stories eventually persuaded Doyle to resurrect the popular detective, bringing him back in <i>The Adventure of the Empty House</i>.</p> <p>Doyle's final Holmes story, <i>His Last Bow</i> appeared in 1914, but that did not end the public's fascination with Holmes and Watson. Basil Rathbone brought the character to the silver screen in 14 movies loosely based on Doyle's original stories. In more recent years, Jeremy Brett played Holmes to great critical acclaim over four seasons of the BBC series, <i>The Adventures of Sherlock Holmes</i>. In all, Holmes has been played by over 70 actors appearing in over 200 films.</p> <p>To enjoy online versions of the Sherlock Holmes short stories and novels, select entries from the menu on the left.</p> </div> </form> </div> </body> </html> Javascript: Code: /* New Perspectives on JavaScript, 2nd Edition Tutorial 4 Review Assignment Author: Date: Filename: slides.js ------------------------------------------------------------- Function List: makeMenus() Initializes the contents of the mystery.htm Web page, locating the sliding menus, setting their initial positions and display styles and defining the onevent handlers. showSlide() Shows a sliding menu while hiding any inactive menus closeSlide() Closes an inactive sliding menu moveSlide() Moves a sliding menu horizontally across the page ------------------------------------------------------------- Global Variable List: currentSlide An object variable pointing to the currently active sliding menu timeID A variable containing the id of a timed command using the setInterval method leftPos The current left position of the sliding menu as it is moved across the page ------------------------------------------------------------- */ window.onload = makeMenus; var currentSlide = null; var timeID = null; var leftPos = 0; function makeMenus() { var slideMenus = new Array(); var allElems = document.getElementsByTagName("*"); for (var i = 0; i < allElems.length; i++) { if (allElems[i].className == "slideMenu") slideMenus.push(allElems[i]); } for (var i = 0; i < slideMenus.length; i++) { slideMenus[i].onclick = showSlide; slideMenus[i].getElementsByTagName("ul")[0].style.left = "0px"; } document.getElementsById("head").onclick = closeSlide; document.getElementsById("main").onclick = closeSlide; } function showSlide() { slideList = this.getElementsByTagName("ul")[0]; if (currentSlide && currentSlide.id == slideList.id) { closeSlide(); } else { closeSlide(); currentSlide = slideList; currentSlide.style.display = "block"; timeID = setInterval("moveSlide()", 1); } } function closeSlide() { if (currentSlide) { clearInterval(timeID); currentSlide.style.left = "0px"; currentSlide.style.display = "none"; currentSlide = null; } } function moveSlide() { leftPos += 5; if (parseInt(currentSlide.style.left) <=220) { currentSlide.style.left = leftPos + "px"; } else { clearInterval(timeID); leftPos = 0; } } CSS Code: /* New Perspectives on JavaScript, 2nd Edition Tutorial 4 Review Assignment Author: Date: Filename: mblog.css This file contains styles used in the sherlock.htm file. */ * {padding: 0px; margin: 0px; line-height: 1.2} body {background-color: white; font-family: 'Trebuchet MS', Arial, Verdana, sans-serif; font-size: 12px} #page {position: absolute; top: 0px; left: 10px; width: 1000px} a {text-decoration: none; color: black} p {margin: 15px 0px} #head {width: 800px; height: 108px; background-color: white; border-bottom: 1px solid black; margin-bottom: 10px} #head img {float: left} #head label {float: right; margin-top: 15px; margin-right: 10px} #head input {float: right; margin-top: 15px; background-color: ivory} #main {float: left; margin-left: 20px; z-index: 1; width: 600px; background-color: white} #firstp {margin-top: 0px} #firstp:first-line {font-variant: small-caps; font-weight: bold} #firstp:first-letter {float: left; font-size: 400%; font-family: 'Times New Roman', serif; line-height: 0.8; margin: 0px 5px 0px 0px} #linkList {width: 225px; background: rgb(0, 14, 238); float: left} #linkList ul {list-style: none; margin: 0px; padding: 0px} #linkList a {font: bold 11px/16px arial, helvetica, sans-serif; display: block; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0px; padding: 2px 3px} #linkList a {color: black; background-color: rgb(172, 172, 172); text-decoration: none} #linkList a:hover {color: white; background: rgb(0, 0, 255)} #linkList li {position: relative} #linkList ul ul ul {position: absolute; display: none; top: 0px; left: 100%; width: 100%} #linkList .arrow {position: absolute; left: 210px; border-width: 0px} #linkList .newGroup {border-top: 1px solid red; z-index: 2} #linkList .slideMenu > a {z-index: 2; position: relative} Hi, can someone help me? I am trying to create a slide show which I learn from the JavaScript Tutorials - How to create a basic slide show. It work fine with 1 slide show but when I put 2 slide show in a web page (created 2 set of script), only 1 will work, what do I have to add in order for multiple slide show to work in a page? Below is the script, thank you. <html> <head> <script type="text/javascript"> <!-- var image1=new Image() image1.src="firstcar.gif" var image2=new Image() image2.src="secondcar" var image3=new Image() image3.src="thirdcar.gif" //--> </script> </head> <body> <img src="firstcar.gif" name="slide" width="100" height="56" /> <script> <!-- //variable that will increment through the images var step=1 function slideit(){ //if browser does not support the image object, exit. if (!document.images) return document.images.slide.src=eval("image"+step+".src") if (step<3) step++ else step=1 //call function "slideit()" every 2.5 seconds setTimeout("slideit()",2500) } slideit() //--> </script> </body> </html> Hi! Can anyone help me make this spoiler slide open and close instead of just appear and disappear? I'd be really grateful Code: <html> <head> <link href="http://fallscountanywhere.com/bbcodes/spoiler.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript"> function showSpoiler(btn, show) { var node = btn; while ( node.className == null || node.className != "spoiler" ) { node = node.parentNode; if ( node == null ) { alert("The html for spoiler is invalid"); return; } } var inners = node.getElementsByTagName("div"); inners[0].style.display = show ? "none" : "block"; inners[1].style.display = show ? "block" : "none"; } </script> </head> <body> <div class="spoiler"> <img src="http://i.imgur.com/6Uq7Y.png" align="right"> <div class="inner"> <input type="button" onclick="showSpoiler(this, true);" value="Show" /> </div> <div class="inner" style="display:none;"> <input type="button" onclick="showSpoiler(this, false);" value="Hide" /> <div class="text">{param}</div> </div> </div> </body> </html> i have a function to dynamically create an image on the screen the problem is i need it to slide down the screen, and i am using the function to have the picture up in more than one place at more then one one time. is their anything i can build into the div tag containing the image that would let it scroll down on its own (or some other method of accomplishing this i haven't thought of) i am putting my function below Code: function newtree(){ x_axis=Math.floor(Math.random()*height); newdiv=document.createElement('div'); newdiv.setAttribute('style','position:absolute; left:'+x_axis+';top:0'); document.body.appendChild(newdiv); newimg=document.createElement('img'); newimg.src="Tree.png"; newimg.width="150"; newdiv.appendChild(newimg); } the 'height' and 'width' variable are already set to the available room in pixels Hi,,, Please help me out to do the image scrolling using jquery, where on onclick of button 5 image scroll at once then next 5 image will show. Hello, I have a slide some on my page which contains some images. It scrolls through images fine but i would like to add some control buttons such as pause/play and scroll back Can anyone tell me how i could do this? i have inc my code cheers Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script type="text/javascript"> var image1=new Image() image1.src="image1.jpg" var image2=new Image() image2.src="toy2.jpg" var image3=new Image() image3.src="toy3.jpg" var image4=new Image() image4.src="toy4.jpg" var image5=new Image() image5.src="toy5.jpg" </script> </head> <style> body { background-image:url('logo2008.jpg'); } .boxed { position:absolute; left:25%; border: 2px black; border-style: plain; width: 700px; height: 800px; } .boxed1 { position:absolute; left:25%; border: 1px blue; border-style: dotted; width: 700px; height: 350px; text-align:center; float: left; padding:2px; background-color: white; } .image { border: 1px blue solid; width: 200px; height:100px; } .image1 { border: 1px blue solid; width: 200px; height:100px; float:left; } .image2 { border: 1px blue solid; width: 200px; height:100px; float:right; } .image3 { border: 1px blue solid; width: 200px; height:100px; } .gallerycontainer{ position: relative; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } .thumbnail img{ border: 1px solid white; margin: 0 5px 5px 0; } .thumbnail:hover{ background-color: transparent; } .thumbnail:hover img{ border: 1px solid blue; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: white; padding: 3px; left: -1000px; border: 0px; visibility: hidden; color: blue; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 1px; } .thumbnail:hover span{ /*CSS for enlarged image*/ visibility: visible; top: 400px; left: 500px; /*position where enlarged image should offset horizontally */ z-index: 50; } </style> <body> <a href="javascript:slidelink()"> <div class="boxed1"> <img src="image1.jpg" name="slide" border="0"width="35%" height="100%" /> </div> </a> <div class="image"> <a class="thumbnail" href="#thumb"><img src="360s.jpg" width="198px" height="98px" border="0" /><span><img src="360s.jpg" /><br />Xbox 360 Slim</span></a> </div> <div class="image"> <a class="thumbnail" href="#thumb"><img src="ps3.jpg" width="198px" height="98px" border="0" /><span><img src="ps3.jpg" /><br />Play station 3.</span></a> </div> <div class="image"> <a class="thumbnail" href="#thumb"><img src="wii.jpg" width="198px" height="98px" border="0" /><span><img src="wii.jpg" /><br />Nintendo Wii</span></a> </div> <br> <br> </br> <div class="image"> <a class="thumbnail" href="#thumb"><img src="tv1.jpg" width="198px" height="98px" border="0" /><span><img src="tv1.jpg" /><br />Sony Bravia KDL-40W2000</span></a> </div> <div class="image"> <a class="thumbnail" href="#thumb"><img src="tv2.jpg" width="198px" height="98px" border="0" /><span><img src="tv2.jpg" /><br />Toshiba Regza AV61 (32AV615DB)</span></a> </div> <div class="image"> <a class="thumbnail" href="#thumb"><img src="tv3.jpg" width="198px" height="98px" border="0" /><span><img src="tv3.jpg" /><br />Samsung B550 (LE40B550)</span></a> </div> <br> <br> </br> <div class="image1"> <a class="thumbnail" href="#thumb"><img src="ttg.jpg" width="198px" height="98px" border="0" /><span><img src="ttg.jpg" /><br />Tom Tom GO</span></a> </div> <div class="image1"> <a class="thumbnail" href="#thumb"><img src="sat2.jpg" width="198px" height="98px" border="0" /><span><img src="sat2.jpg" /><br />Garmin nuvi 3790T</span></a> </div> <div class="image1"> <a class="thumbnail" href="#thumb"><img src="sat3.jpg" width="198px" height="98px" border="0" /><span><img src="sat3.jpg" /><br />Navigon 8450 Live</span></a> </div> <br> <br> </br> <div class="image2"> <a class="thumbnail" href="#thumb"><img src="iphone.jpg" width="198px" height="98px" border="0" /><span><img src="iphone.jpg" /><br />iPhone 4</span></a> </div> <div class="image2"> <a class="thumbnail" href="#thumb"><img src="bbt.jpg" width="198px" height="98px" border="0" /><span><img src="bbt.jpg" /><br />Blackberry torch</span></a> </div> <div class="image2"> <a class="thumbnail" href="#thumb"><img src="gphone.jpg" width="198px" height="98px" border="0" /><span><img src="gphone.jpg" /><br />google HTC phone</span></a> </div> <br> <br> </br> <div class="image3"> <a class="thumbnail" href="#thumb"><img src="cod.jpg" width="198px" height="98px" border="0" /><span><img src="cod.jpg" /><br />Call of duty: Black ops</span></a> </div> <div class="image3"> <a class="thumbnail" href="#thumb"><img src="fifa.jpg" width="198px" height="98px" border="0" /><span><img src="fifa.jpg" /><br />Fifa 2011</span></a> </div> <div class="image3"> <a class="thumbnail" href="#thumb"><img src="f1.jpg" width="198px" height="98px" border="0" /><span><img src="f1.jpg" /><br />Formula 1 2010</span></a> </div> <br> <br> </br> <script type="text/javascript"> <!-- var step=1 var whichimage=1 function slideit(){ if (!document.images) return document.images.slide.src=eval("image"+step+".src") whichimage=step if (step<5) step++ else step=1 setTimeout("slideit()",4000) } slideit() function slidelink(){ if (whichimage==1) window.location="image1.jpg" else if (whichimage==2) window.location="toy2.jpg" else if (whichimage==3) window.location="toy3.jpg" else if (whichimage==4) window.location="toy4.jpg" else if (whichimage==5) window.location="toy5.jpg" } //--> </script> </body> </html> Hi everyone, I'm new in this forum, and hope that someone can help me out. I have created a clickable slide show and it works like it should. At the moment the pictures are changing like a .gif file. How can I do that each picture when it's changing it should slide from the left or right side? Thanks Robert Hi there. I want to slide in (jquery) a link in the bottom right when the page loads that offers the user to be pushed back to the top of the page. So far all is well. I have it appearing at width 1024 or bigger. With a media query set in order for it not to appear for smaller devices: #totop { position: fixed; bottom: 0; right: 10px; background: #FFF; color: #000; padding: 10px; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; display:block; -moz-box-shadow: 10px 10px 5px #000; -webkit-box-shadow: 10px 10px 5px #000; box-shadow: 10px 10px 5px #000; } @media screen and (max-width: 1023px) { #totop { display: none; /* Remove to top button */ } Now I understand I want an if statement checking whether the css is to display block or none. Or if this doesn't work have an if statement checking the screen width itself rather than media queries. So far I have this: $(document).ready(function() { if( $('#totop').is(':visible') ) { ("#totop").slideDown("slow"); } else { ("#totop").hide(); } }); Please help! My slide show seem to not be initializing I used a base from webmonkey.com and tweaked it around to be exactly what I need and it won't start. Any ideas with whats wrong? here is my js Code: var interval = 1500; //1.5 secs var random_display = 0; //goes in order //defines where the images are stored var imageDir = "../image/slideshow1/"; //set images here var imageNum = 0; imageArray = new Array(); imageArray[imageNum++] = new imageItem(imageDir + "01.jpg"); imageArray[imageNum++] = new imageItem(imagedir + "02.jpg"); imageArray[imageNum++] = new imageItem(imagedir + "03.jpg"); imageArray[imageNum++] = new imageItem(imagedir + "04.jpg"); //find total amount of images using .length var totalImages = imageArray.length; function imageItem(image_location){ this.image_item = new Image(); this.image_item.src = image_location; } function get_ImageItemLocation(imageObj) { return(imageObj.image_item.src) } //This is used if random is set to 1 function randNum(x, y){ var range = y - x + 1; return Math.floor(Math.random() * range) + x; } //get next image function getNextImage(){ if(random_display){ imageNum = randNum(0, totalImages-1); } else{ imageNum = (imageNum+1) % totalImages; } //return the value now. var new_image = get_ImageItemLocation(imageArray[imageNum]); return (new_image); } function getPrevImage() { imageNum = (imageNum-1) % totalImages; var new_image = get_ImageItemLocation(imageArray[imageNum]); return (new_image); } function prevImage(place) { var new_image = getPrevImage(); document[place].src = new_image; } //function to switch images function switchImage(place){ var new_image = getNextImage(); document[place].src = new_image; var recur_call = "switchImage('"+place+"')"; timerID = setTimeout(recur_call, interval); } Here is the html with buttons to control the slideshow Code: <div id = "articles"> <div class= "new_article"> <img name="slideImg" src="image/slideshow1/01.jpg" style = "width:400px; height:200px;" border=0> <a href="#" onClick="switchImage('slideImg')">play slide show</a> <a href="#" onClick="clearTimeout(timerID)"> pause</a> <a href="#" onClick="prevImage('slideImg'); clearTimeout(timerID)"> previous</a> <a href="#" onClick="switchImage('slideImg'); clearTimeout(timerID)">next </a> </div> </div> |