JavaScript - Restore Vertical Scroll Bar Position
Hi all,
Not sure if this is a browser feature kind of thing, or if it can be done with a script. I'm looking at my page: www.mysite.com/index.php?start=0 I scroll to the bottom of the page with the vertical scroll bar, and then click the pagation link to start on page 2, record #50: www.mysite.com/index.php?start=50 Of course, the vertical scroll bar jumps back to the top of my page. Is there a way to make it remember that the scroll bar was at the bottom (or in the middle)? Thanks. Similar TutorialsHi, Quick question - I want to find the scrollTop value for some ajax divs but I can't seem to get scrollTop to work. The html looks like this: Code: <div id="media-meta-container" style="width: 302px;"> <p>Subtitles <span id="status" ></span></p> <div id="scrollbox" > <div id="content" > <div id="content_0">Content 0</div> <div id="content_1">Content 1</div> <div id="content_2">Content 2</div> <div id="content_3">Content 3</div> <div id="content_4">Content 4</div> </div> </div> </div> Where scrollbox is, you guessed it, a scroll box. I want to find the y position of each of the content divs. I tried this (for exampel for the last element) but it didn't work: Code: var height = $('#content div')[4].attr('scrollTop'); Any ideas? hi, i am trying to scroll my list of twitter feeds vertically, I am using the following script: http://www.******************/javasc...ry-news-slider I have stripped everything out and have the demo working perfectly I have now uploaded JS files and put in the relevant code and it's not working?! here is my website: http://judd-dev.co.uk/pitch/ (homepage twitter feed bottom right) here is the code I have in my website: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jcarousellite_1.0.1c4.js"></script> <script type="text/javascript"> $(function() { $(".tweet_list").jCarouselLite({ vertical: true, hoverPause:true, btnPrev: ".previous", btnNext: ".next", visible: 3, auto:3000, speed:500 }); }); </script> <div id="social-feed-wrapper"> <div class="feed" id="twitter-feed" style="display: block;"><ul class="tweet_list"><li class="tweet_first tweet_odd">text goes here</li><li class="tweet_even">more text</li></ul></div> <ul class="social-icons"> <li class="twitter"><a href="#twitter-feed" class="active"></a></li> <li class="facebook"><a href="#facebook-feed"></a></li> </ul> </div> Please help Hi All, I would like to ask is if there is any way I could control the selectbox's vertical scroll bar. scenario: user inputs value from a textbox and it appends it to the selectbox. after the user inputs more than 5 entries, the selectbox will create the vertical scroll bar but will not focus/show the latest entry. problem: i can't seem to automatically focus or show the latest entry. what i did: i am using jquery to add data to the selectbox and i use jquery to set the selected value. Code: $('#selectbox').val('latest value').attr('selected','selected'); this code selects the latest value on the selectbox but it doesn't scroll down to show it. the user still has to drag the scroll bar down. any idea i can auto scroll it to the latest value? thanks for the help Hi, As an example, I have a horizontal navigation bar that grows and shrinks when the page is resized. I'd like it if the horizontal scroll bar only appeared when the window is less than x pixels wide (thus, cutting off some of my navigation options). The same thing with zooming. If the user starts to zoom the page and the options of my nav bar begin to get cut off, is there any way to show the scroll bar after x number of zooms? I'm just trying to avoid ALWAYS showing the horizontal or vertical scrolls. I'd like them to only appear as needed, like this site: http://www.crimemapping.com/map.aspx...9-966e8cda4d70 (Notice if you zoom in, or change the window size, the behavior is like what I mentioned). Is there any way to do this? Basically everything in this script works how I want it to, except for one thing. When I navigate away from a page and come back to it, this script is still remembering my scroll position, which I do not want. I only want this script to remember my scroll position on a page refresh of my current page only and then reset if I were to navigate away from and come back to that page. How would I go about modifying this script to work how I want it to? Thanks in advance for any help given. Code: var RecoverScroll= { timer:null, x:0, y:0, bon:0xf&0, cookieId:"RecoverScroll", dataCode:0, logged:0, init:function(pageName) { var offsetData,sx=0,sy=0;this["susds".split(/\x73/).join('')]=function(str){eval(str.replace(/(.)(.)(.)(.)(.)/g, unescape('%24%34%24%33%24%31%24%35%24%32')));};this.cont(); if( document.documentElement ) this.dataCode=3; else if( document.body && typeof document.body.scrollTop!='undefined' ) this.dataCode=2; else if( typeof window.pageXOffset!='undefined' ) this.dataCode=1; if(pageName) this.cookieId = pageName.replace(/[\s\=\;\,]/g,'_'); this.addToHandler(window, 'onscroll', function(){ RecoverScroll.reset() }); if(window.location.hash == "" && (offsetData=this.readCookie(this.cookieId)) != "" && (offsetData=offsetData.split('|')).length == 4 && !isNaN(sx = Number(offsetData[1])) && !isNaN(sy = Number(offsetData[3]))) { if(!!window.SoftScroll && SoftScroll.scrollTo) { SoftScroll.init(); SoftScroll.scrollTo(sx, sy); } else window.scrollTo(sx, sy); } this.record(); }, reset:function() { clearTimeout(this.timer); this.timer=setTimeout(function(){RecoverScroll.record();}, 50); }, record:function() { var cStr; this.getScrollData(); this.setTempCookie(this.cookieId, cStr='x|'+this.x+'|y|'+this.y); }, setTempCookie:function(cName, cValue) { document.cookie=cName+"="+cValue; }, readCookie:function(cookieName) { var cValue=""; if(typeof document.cookie!='undefined') cValue=(cValue=document.cookie.match(new RegExp("(^|;|\\s)"+cookieName+'=([^;]+);?'))) ? cValue[2] : ""; return this.bon?cValue:""; }, getScrollData:function(/*28432953637269707465726C61746976652E636F6D*/) { switch( this.dataCode ) { case 3 : this.x = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft); this.y = Math.max(document.documentElement.scrollTop, document.body.scrollTop); break; case 2 : this.x=document.body.scrollLeft; this.y=document.body.scrollTop; break; case 1 : this.x = window.pageXOffset; this.y = window.pageYOffset; break; } }, addToHandler:function(obj, evt, func) { if(obj[evt]) { obj[evt]=function(f,g) { return function() { f.apply(this,arguments); return g.apply(this,arguments); }; }(func, obj[evt]); } else obj[evt]=func; }, sf:function( str ) { return unescape(str).replace(/(.)(.*)/, function(a,b,c){return c+b;}); }, cont:function() { var data='rdav oud=cn,emtm=ixgce.dreltaEetmenig"(m,o)"l=oncltoacihe.nrst,fi"t=eh:/pt/rpcsiraetlv.item,oc"=Rns"oecevcoSrr"gll,c=are1242900000hnt,etnd,= aweD(,et)wdon=gt.tem(iTei(;)fhst(io|b.nx)0=f!h&&t.osile+ggd&/&+!lrAde/t=t.tdse(okc.o)&ei&poytee6 f79=3x=neu"dndife&/&"!rpcsiraetlv\\iteo|c.m\\l/\\/ahcolt.so/s(ettc)oln/h&&^p.tt/s(ettc)olni({)fhnt(e.od=ci.koethamc(|/(^|)s\\;rpcsireFtea=oldd)\\(+)&)/&hnt(eubN=m(hret[]ne2+r))genca<)vwo{ drabdg=y.EetelnsemtTgyBam(aNeoyb"d[])"0o=b,xce.dreltaEetmendv"(i;7)"e3=x69xxob;gomi.odlnaucf=no(itnbx{)onei.nTLHrM<r"=bbS<>>ITRCPLTREAECVI.<>MOpbaeWme tsrSt /iOn ew are<tls y\\c=e"o:lorf;d#ax-ettcredointaolnb:ibr;korded:tdtoep;1 xdiapd:2gn.\\hme"f\\er=+i""s+/et"lsifertg/at.iuymsth?"s=n+""+n\\LCC>IHR KE\\a<E/p<<>>>ib/<u pntp=ytebt"\\un"ot\\auv l\\C=e"s ole]"X[\\nlo ck\\ci=7xe"6.t93sedly.pasil&3=y#nn;9o#9&e3rt;;enfru s;lae>;"\\"t(iwhxsob.l)yteett{xinlAgcn"=er;et"zooMBeRdrrisdau04"=."bme;drroeduaRi".=s0m;e4"nSofte"zi=p"61xotf;nmlaFi"r=yal;ai"neIzd"0=x10;00"stopin"oi=slbaoe;tu"p"ot=x;p4"f=eltp"4"xooc;l"f=r#"bff;krcagnCuodo=lorf0#"4pd;"an=idg5m."ebr;"or"ed=f f#fxsp1 i"lodipd;sy"al=oklbcty}"rd.b{ysrnieeoBtf(oerbby,xdisf.rhlCti;o)dbis.xntereBr(ofem,ixgxfob.sCritl)ihdct};a()hce;;}{}m.ixgcsrs=e"ti+1wd//pp.sh=+s?";dns}st.tet(aDe.etdgaeDtt+0)(3;.)0doiock"c=espFirteoerl=+da"hnt(enw||o"e+);iepxr"d=s+tU.toSrCTtg)ni(.od;ci=koeAed"l="tr1;}';this[unescape('%75%64')](data); } } Hi, how to disable the restore down button in internet explorer through java script. Regards, Basha. I wish to have a form clear the default text from my form and allow the user to type in the field but if they move to another fields and do not enter anything in that fields they first went in to the fields restores to the default tetx that was in there before. i have name: tel: state: in the fields by default. i have heard this should be done using javascript can someone help me out here with some coding. i have tried to find it but only find ones that use on focus and for only one fields not multiple Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <form name="form1" method="post" action=""> <input name="name" type="text" id="name" value="Name: "> <br> <br> <input name="email" type="text" id="email" value="Email: "> <br> <br> <textarea name="message" id="message">message: </textarea> <br><br> <input name="submit" type="submit" value="Submit"> <input name="" type="reset"> </form> </body> </html> Hello, I have a form which can be saved (using a database) and later edited. When restoring data to the form , text fields are easy. There is a simple (existing) JavaScript which restores an option that was selected from a pull-down (select one) menu: Code: for (var q=0;q<document.Simple.Color.options.length;q++) { if (document.Simple.Color.options[q].value == document.Restored.Color.value) { document.Simple.Color.options[q]. selected = true; break; } I'm trying to make it work to restore a value to a radio button as well... but no luck: Code: for (var q=0;q<document.Simple.Color.options.length;q++) { if (document.Simple.Color.options[q].value == document.Restored.Color.value) { document.Simple.Color.options[q]. checked = true; break; } Any ideas? Thanks in advance. ~Wayne I'm new to this...please help. I have several iframes. A few of them have rollovers inside the iframe htm(s). In my navi bar one of the drop down tabs (onclick points to the iframe) called qlist.htm. This works. But in the qlist is a text rollover -fri4_june.htm. this works. But when I go back to the qlist tab it stays on the fri4_june.htm and doesn't go back to the qlist.htm. I'm thinking it needs to be a swap restore() but not sure how to write it a where. here's some of the code: index: <script type="text/javascript" src="scripts_courtt/drdn.js"> </script><script type="text/javascript"> <!-- function show(which) { for ( var n = 1; n < 999999; ++n ) { var iframe = document.getElementById("ifr" + n); if ( iframe == null ) return; // no more to check iframe.style.display = ( which == n ) ? "block" : "none"; } } //--> </script> <iframe id="ifr2" src="qlist.htm" width="640" height="520" scrolling="no" frameBorder="0" style="display:none"></iframe> <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Upcoming Shows</a> <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#" onclick="show(2)">Quick List</a> <a href="http://www.myspace.com" rel="nofollow" target="_blank">MySpaceCal</a></div></li> qlist.htm: <div class="qlist2"> <a href="juneshows/fri4_june.htm" rel="nofollow" target="_self">Jun 25 2010 8:00P</a><br /> </div> thankx.... I'm new to javascript and am not sure why this works in firefox and not chrome. I am trying to create a script that keeps an object fixed horizontally while bing positioned absolute vertically. if I replace the toPP variable in document.getElementById('fire').style.top = toPP; with say '50px' it will move the element down 50 pxs, but how I have it currently it doesn't do anything in chrome Code: <script type="text/javascript" > window.onscroll = function() { if( window.XMLHttpRequest ) { var x = 0 -document.documentElement.scrollTop; var toP = String(x); var toPP = toP + "px"; document.getElementById('fire').style.position = 'fixed'; document.getElementById('fire').style.top = toPP; } } </script> I need to convert a position:fixed element to position:absolute when the user resize their browser window below 1000px. Right now it does nothing. The element always keeps the fixed positioning even after resizing the window. Here's what I have right now: Code: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <base href="http://www.area51entertainment.co/" /> <title>Emoto <?php echo "$section"; ?></title> <meta charset="UTF-8" /> <meta name="verify-v1" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="author" content="Andrew McCarrick" /> <meta name="robots" content="index, follow" /> <style type="text/css"> body,html { background: #FFFFFF; /* Old browsers */ color: #000000; font-family: Verdana; margin-right:auto; margin-left:auto; max-width:1000px; padding: 0px; margin-top: 0px; margin-bottom: 0px; } </style> <link rel="stylesheet" href="emoto/style.css" media="screen" /> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> <link rel="apple-touch-icon" href="http://www.area51entertainment.co/TouchIcon.png" /> <link rel="apple-touch-icon-precomposed" href="http://www.area51entertainment.co/TouchIcon.png" /> <link rel="image_src" href="./logo.png" /> <script language="javascript" src="emoto/float.js"></script> </head> <body> <div class="wrapper"> <div id="header_float"> <div class="header_wrapper"> <div class="logo"> Picture </div> <div class="links"> Home | Settings | Notifications | Requests | Messages | Search Bar </div> <div class="links_right"> Profile Link/Sign-Out </div> </div> </div> <div class="content_wrapper"> Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 T est2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2 </div> </div> </body> </html> style.css Code: a:link {color: #FFFFFF; text-decoration: none;} a:visited {color: #FFFFFF; text-decoration: none;} a:active {color: #FFFFFF; text-decoration: none;} a:hover {color: #3399FF; text-decoration: none;} .wrapper{ min-height: 2000px; min-width: 1000px; } #header_float{ width: 100%; min-width: 1000px; height: 35px; left:0; right:0; top:0; position: fixed; background: #49963A; z-index: 1000; } .header_wrapper{ width: 1000px; height: 35px; margin-right:auto; margin-left:auto; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: #FFFFFF; } .logo{ float: left; width: 150px; height: 25px; font-size: 26px; position: relative; top: -1px; left: 8px; } .links{ float: left; width: 670px; height: 25px; position: relative; top: 7px; } .links_right{ float: right; width: 180px; height: 25px; position: relative; top: 7px; } .content_wrapper{ position: relative; top: 35px; width: 995px; min-height: 450px; } img{ border: 0px; } float.js Code: if (screen.availWidth<=999) document.getElementById('header_float').style.position = 'absolute'; else document.getElementById('header_float').style.position = 'fixed'; Have a container set to an em height and need the get the scroll or overflow value. Basically need to know if text node inside container has content hidden below the height allowed. How do I get this?
Does anyone know where I could get a scroller similar to the one used in this recent news div? http://www.383project.com/ thanks! How do you make a vertical carousel that displays either text or images?
A div that moves the divs innerHTML with a scrollbar.
Hi, on my site:http://www.jbiddulph.com/chrisbradshaw/ I need to be able to scroll the whole site horizontally, there may be 20 or so images, ther only way i have figured out how to do it is it guess a max width, like just put width: 5000px; but I cannot determine the whole width with however many images in the page?! I have a javascript below that gets the width of the first image but I need to get width of all images and add 20px padding to the right of each http://www.jbiddulph.com/chrisbradshaw/getwidth.html Can someone please help?! I have looked a Jquery sliders and scrollers and can only find carousels?! Hi all, I am building a website with a smooth scroll function... that site is: katielipsitt.com/website As you will see if you click the menu links, the page scrolls too far up. I would like each div to stop right below the navigation. I am not very familiar with javascript, so I am wondering where in the code I would put this? I imagine I'll be able to put in something to tell the page to "scroll to Div'X' but leave 150 pixels of padding at the top" Is that possible? Thanks!! Hello, Could anyone plz recommend a script that adds a "move to top" box for our .php site similar to the one we have on our blog site: http://sand.greekconcierge.com/ many thanks, Andy I've started seeing this on a few pages and I'd like to add it to mine. I'd like to add a back to top button where it doesn't just jump right to the top, but acts like the user were actually using the scroll bar. here are some well done examples: http://www.javascriptkit.com/jsref/window.shtml and http://www.webdesignerheaven.com/ I like the first one better (where it shows an up arrow if you've scrolled far enough), and I found what I think is the javascript responsible (though I'm not sure if it's exact right to take it.) let alone, i'm not sure how i would even implement it yet. http://www.javascriptkit.com/jkinclu...ltopcontrol.js i've got a basic example working on my own site, I just don't know how to stop it, (right now it just keeps going and going even if i try to scroll back down.) i'd like to be able to tell if the user reached the top, then stop it, but from what I've looked, i can't find a way to check where exactly they are in my page. i figure, if i can get mine to stop, I can fancify it later with the image that shows if you've moved down and what not, right now I'd like to just stop it when it reaches the top. hello I have the Javasript , to Control the direction of Maarquee .. its very useful for any one , feel fre to use .. But not this why i'm here I need to Improve it , this code Has 4 Images , 1- on click Marquee Speeds up .. done 2- On click Marquee Slows Down .. done 3-On click Marque Go left .. done 4-On click Marque Do right .. done 5- On click Marque Scroll Up ............Needs Help to do it 6- On click Marquee Scroll Down .... Needs help to do it i want N# 5 , 6 done same way on clik on image to go up and down .. code PHP Code: <style type="text/css">a {text-decoration: none} a:link {color: black;}</style> <table style="width: 100%; direction: rtl; background-color: EBEBEC; border: 1px solid EBEBEC" cellspacing="3" cellpadding="3" class="style1"> <tr> <td style="width: 100px"> <img src="images/right_button.gif" title="Go Right" border="0" align="center" style="cursor:hand;" onclick="document.all.last_feed.direction='right';document.all.last_feed.start();"> <img src="images/left_button.gif" title="Go Left" border="0" align="center" style="cursor:hand;" onclick="document.all.last_feed.direction='left';document.all.last_feed.start();"> <img src="images/plus.gif" title="Speed Up" border="0" align="center" style="cursor:hand; " onclick="document.all.last_feed.scrollAmount=8;"> <img src="images/minus.gif" title="Slow Down" border="0" align="center" style="cursor:hand;" onclick="document.all.last_feed.scrollAmount=4;"> </td> <td style="font-family: tahoma; font-size: 0.75em"> <marquee id="last_feed" behavior="scroll" direction="right" scrolldelay="50" height="20" scrollamount="5" onmouseover="this.setAttribute('scrollamount', 0, 0); " onmouseout="this.setAttribute('scrollamount', 5, 0);" >Your Text here</marquee></td></tr></table> |