JavaScript - Jumping Web Page, Please Help!
Hello all,
I have a slight problem with a web page I have coded. I have created an image gallery, which uses a series of thumbnail images, displayed at the bottom of the page, with a space for a larger image in the centre of the page. When you click on the thumbnail images, a larger version of the thumbnail is displayed on the centre of the web page. Only thing is that each time you click the thumbnail, the web page scrolls up to the top, and hence you have to scroll back down again, to be able to click on the next thumbnail image. Is there a reason for this jumping page, and if so, how can I resolve it? The code I have used is as follows; <script> function showImage(imageName){ document.largePicture.src = imageName; } function thumb_description(description){ document.getElementById("thumb_desc").innerHTML=(description) } </script> <body> code for large center image: <div class="large_img"><img name="largePicture" src="lm_1.jpg" height="300" width="273" /></div> <br /> <p id="thumb_desc" class="name_desc"></p></td> code for small thumbnail image <a href="#" onclick="showImage('j_rosseau1.jpg');thumb_description('Jacqueline Rosseau Womenswear')"> <img src="j_rosseau1.jpg" height="100" width="108" /> </a> </body> Any tips, suggestions will be very helpful as the last thing I want is to annoy users with a hop-skip page!! Thanks very much in advance. Nonye Similar TutorialsIs there anyway to stop the page 'jumping to the top' when using a link like the below? Code: <a href="#" onClick="arrangeCards();">blah</a> .. I just want it to stay in the same position on the page & not jump to the top of the page every time a link like that is clicked. Cheers! I have a div which toggles visible, ie, it disappears when you click "close" with Code: <a href='#' onclick="toggle_visibility('div1'); toggle_visibility('div2'); return false;" >Close </a> which calls this: Code: function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } The problem I have is that when I click that button, the page jumps down to center on exactly where I clicked. This is really unwanted, I was wondering if anyone could help? Thanks for your time. Hey all, so im working on a piece of jquery/JS which executes (drops down a new div) when you click a link. I have the links setup as <a href="#" id="d0">Execute 1</a> <a href="#" id="d1">Execute 2</a> <a href="#" id="d2">Execute 3</a> And the jscript detects when d0, d1 or d2 is clicked and executes my script. It all works perfectly, however when you click on a link it will jump to the top of the page as a side effect of the a href="#" I assume? Is there anyway to have my same effect work inline (without jumping the page to the top) ? Thank you very much! This is my test page: http://www.thesacstudio.com/ccid_web...ndex_copy.html Am using Dynamic Drive's smooth menu javascript When viewed on a PC using IR the menu makes the page "jump" i am a Mac guy and at my limit of what to do. thanks for any assistance I just wrote an essay to discover it had logged me out and I lost everything. Grrrrrrr. Here goes again, simplified this time. I've got a sticky footer at the bottom of the page and a spry collapsible panel which expands to reveal content on mouse over. The problem I'm facing is that the page doesn't scroll down with it, only the scroll bar gets larger to accommodate for a manual scroll down. This is kind of useless because the user might not even realise that there's extra content there in the first place if it's not automatic. My question is, what's the best javascript code to use to automatically scroll the page down when the spry tab is opened and where would I insert it? I've tried all morning with no success so far! Thanks, Nick, I'm copy pasting this post this time round, I don't trust this website now Hello. My goal is to load the JS for a specific element before displaying that element. I integrated a third part script, and it works well. I set the timer he The JS is in my heading as <script type="text/javascript" src="countdownpro.js"></script> About mid-body I have: <span id="countdown1">2010-07-20 00:00:00 GMT+00:00</span> which allows for the setting of a target date to countdown to. When the page first loads it shows the above long format target time, until the js/meta tags kick in to modify it to just show the actual countdown as 00:00:00. I have attached countdownpro.js to this post. I tried shifting the function CD_Init() to the top of the script, and also appended it inline with the .html. I tried setting the big external script to "defer", but neither arrangement worked. I also tried placing the src file right at the top. I appreciate your help. I want to implement a javascript function where a submit button will be submitted from the parent page each time I close a child page. Please let me know what I did wrong in my code and please elaborate your answer so that I could understand it better. Thank you so much for your help. I have the following jscript code but it is now working. Code: window.onunload = submitParent; function submitParent() { var doc = window.opener.document, theForm = doc.getElementById("finalForm"); theField = doc.getElementById("finalSelected"); theForm.submit(); theField.trigger('click'); } My form from the parent page is as follow. I want my jscript to just click on the submit button once. Code: <form id = "finalForm "name= "finalForm" method="POST" action=""> <input type="Submit" id = "finalSelected" name="finalSelected"/> Hi, I am Aditya. I am explaining below the exact scenario where I need the help: I am developing a web application in which I need to integrate a javascript/html editor on some of the web pages and then provide 'Edit' buttons on those web pages so that users can edit the content on that partciular html/jsp page (like editing in wiki pages) and then, when they add some content and click on submit button, the new content should appear on the web page with all the formatting (i.e. bold, italics, color and so on) which was applied by user when he was entering the text. Now, I need help for the below issues: 1. Please suggest me a good javascript/html editor (freely downloadable) which I can use to integrate with my web pages. 2. Once the user has entered some content using the above javascript editor, how to make that content reach the server and update the corresponding web page. I am new to web development, so may be that these questions are too simple. But, I need some help from you. Waiting for your reply, Thanks, Aditya Hi All, Im new to this forum...need some of your help and advice. I have a js code like this : <script type="text/javascript"> <!-- var sipPos = 0; $(document).ready(function() { $("#panel-tab").click(function(e) { //if(autoTimer) clearTimeout(autoTimer); //autoTimer = null; e.preventDefault(); $("#panel").animate({ left: sipPos }, 1764, 'linear', function() { if(sipPos == 0) { sipPos = -856; } else { sipPos = 0; } }); }); }); --> </script> what it does is that it hide and show a panel by slidint it to the left. But my client want that on page load the panel opens automatically for about 2-3 seconds just to let users know that its here. So ive written this : <script type="text/javascript"> <!-- var sipPos = 0; $(document).ready(function() { var autoTimer = null; autoTimer = setTimeout(function(){ $("#panel").animate({ left: sipPos }); autoTimer = setTimeout(function(){ $("#panel").animate({ left: sipPos = -856 }); }, 2000); },1000); $("#panel-tab").click(function(e) { //if(autoTimer) clearTimeout(autoTimer); //autoTimer = null; e.preventDefault(); $("#panel").animate({ left: sipPos }, 1764, 'linear', function() { if(sipPos == 0) { sipPos = -856; } else { sipPos = 0; } }); }); }); --> </script> But when the panel finished showing the button to open it again doesn't work...any help please..really urgent. thks //Sam Hi there! I am using GlassBox "http://www.glassbox-js.com/" As a light box on a website. Basically, You click an thumbnail image, and a window pops up with a larger version of that image. Now originally, the window opened X number of pixels from the top of the page. However, My thumbnail images were located mid page, so when you clicked on one, the window would open at the top of the page and the user would not see it unless they scrolled up. So I attempted to modify the script so that it would get the users page width/height and display it directly in the center no matter the position. Now my problem is that the script only works when the user has already scrolled down. So if the page is scrolled all the way to the top, and you click on a thumbnail, the window will not open center screen. Here is an example: http://synaxis.pcriot.com/ When the page loads, DO NOT scroll it, and click on the image. You will see the window pop up, and not centered, like it should be. However, now if you scroll down, and click the image again, you see that it is now centered. I also noticed that when the page is scrolled up, and the image does not center, it always is placed below the thumbnail image, or otherwise where ever the DIV is located. It normally located under the image, but if i place the DIV at the top of the page then the window will pop up there. And this does happen on every browser that I have tested, Firefox, IE, and Chrome. So, I am pretty much stumped as to why this is happening. If anyone can shed some light I would be very grateful. Thank You Here is a link to the original code: http://synaxis.pcriot.com/javascript...ox/glassbox.js And modified code: http://synaxis.pcriot.com/javascript...ox/glassbox.js The modified code is at the very bottom of the script. Original Code: Code: /** * @public */ if ( typeof($) == 'undefined' ) { $ = function (id) { return document.getElementById(id); } } Modified Code Code: /** * @private */ var removeElement = function(id) { var Node = document.getElementById(id); Node.parentNode.removeChild(Node); } /** * @private */ var getDocHeight = function() { var db = document.body; var ddE = document.documentElement; return Math.max( db.scrollHeight, db.offsetHeight, db.clientHeight, ddE.scrollHeight, ddE.offsetHeight, ddE.clientHeight ); } /** * @public */ if ( typeof($) == 'undefined' ) { $ = function (id) { return document.getElementById(id); } } Hi there, Im a total newbie and learning html and javascript as I go along, so any help you can give is greatly appreciated! It is possible to perform a find in page search that looks at a specific link, opens the page in a new window and finds the text within that document?? Basically I regularly use an html page in work that has a list of people and their telephone numbers. I want to be able to type in a searchbox on my main page and it open the target page and find the name I am looking for? Is this possible or can you only Find In Page on the same page or another frame? Tearing my hair out........ Thanks Glen Hi guys, I need to redirect a page to another url when it detects that the page is opened inside an iframe. I need help with this <script > if(location.href != top.location.href){ window.location = 'http://myurl.com' } </script> - check my attachment index.zip Thx. hi, I have a large list of UK towns, see he http://www.mypubspace.com/mobile/index.php#towns I would like to add an a-z link so that when a user clicks on say 'W' they are then presented with the towns that begin with 'W' the problem is, is that I have to keep #towns in the URL as it's a web application Can anyone help? thanks I have a slideshow on the "Projects" page. The javascript is external. There's a link on the homepage that when clicked needs to open the Projects page with the appropriate slide loaded. How do I do that? Here's the code I have for the slideshow: Code: var prev = document.getElementById('prev'); var next = document.getElementById('next'); var current = 0; function prevPic() { clearInterval(interval); if(current > 0) { current--; if(current == 0) { document.getElementById('next').src = "images/right_arrow.jpg"; document.getElementById('prev').src = "images/left_arrow_off.jpg"; } else { document.getElementById('next').src = "images/right_arrow.jpg"; document.getElementById('prev').src = "images/left_arrow.jpg"; } update(); } } function nextPic() { clearInterval(interval); if(current < slides.length - 1) { current++; if(current == slides.length - 1) { document.getElementById('next').src = "images/right_arrow_off.jpg"; document.getElementById('prev').src = "images/left_arrow.jpg"; } else { document.getElementById('next').src = "images/right_arrow.jpg"; document.getElementById('prev').src = "images/left_arrow.jpg"; } update(); } } function update() { var pic = slides[current]; document.getElementById('project_title').innerHTML = pic.title; document.getElementById('project_image').src = "images/slides/" + pic.image; document.getElementById('project_location').innerHTML = "<span>Location:</span> " + pic.location; document.getElementById('project_operation').innerHTML = "<span>Commercial Operation:</span> " + pic.commercial_operation; document.getElementById('counter').innerHTML = (current + 1) + " of " + slides.length; if(pic.link) { document.getElementById('project_link').style.display = "block"; document.getElementById('project_href').href = pic.link; } else { document.getElementById('project_link').style.display = "none"; } } //preload slides var images = []; for(i in slides) { var img = new Image(); img.src = "images/slides/" + slides[i].image; images.push(img); } Hello Basically I have found and adapted the code: Code: alreadyloading = false; nextpage = 2; $(window).scroll(function() { if ($('body').height() <= ($(window).height() + $(window).scrollTop())) { if (alreadyloading == false) { var url = "page"+nextpage+".html"; alreadyloading = true; $.post(url, function(data) { $('#projectscontainer').children().last().after(data); alreadyloading = false; nextpage++; }); } } }); I want when the user scrolls to the bottom of the page for content in a new page to load under the div "#projectscontainer". So in the new page 'Page2.html" I have put 5 divs going down with content in... I want the new content to appear below "#projectscontainer'" Why won't this work? Anyone know? Thanks On this website... http://livedemo00.template-help.com/...21/index.html# When you click on the Navigation Bar the website pages load inside that page? How exactly would i go around doing this? Thankyou Hello, I don't know if this can be done in Javascript, or requires any other language but i was wondering if this would be possible. I would like to embed this Javascript code in to a PHP file and then for it to run automatically upon the PHP file loading: Code: <td class="smallDesc"> <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td> The Javascirpt is the Facebook Share button that basically allows users that have Facebook to share the page there currently on in their Facebook status by pressing the button, but if there not logged in it shows the login page, not a problem just continue the script. The current button i which is what i want to load automatically in the PHP file is located here, to test the functionalilty just click "Share" button in blue.. http://watch-movies-online.anyfilman...-Movie-17.html To summarise, i would like the above Javascript code to execute automatically upon pageload of this PHP file.. http://www.watch-movies-online.anyfi...p://google.com. If that could be done, and if this also is possible.. i would like for the "Share" button on the external page that is loaded from the Javascript code above to be clicked automatically so in effect when ever someone visits the PHP page after clicking "Click Here to Watch/Stream 2012 Online For Free" on this page it will automatically load the Facebook Share box, and automatically click the "Share" Button and then close the page if possible, but not required. Please feel free to ask any questions, i'll be happy to answer. Thanks in advance. Best Regards, Jonathan. hello guys the idea is to make "offline" bill of lading i used to do php thing and well this time i only need to kinda make bill of lading generator so i want to pass value from page 1 to page 2 and to page . all offline without web server interaction i was never fluent in javascript and i wanted to get a quick start from you guys how do i pass the form ( javascript variable from 1 page to another page ) i am googling this as well right now and hoping answer from codingforums thanks I am looking at making either an intro or entrance page to my website... I am looking for one like www.bodybuilding.com has... I have many parts to my website and I would like a page that has links to all the parts of my website as my index page. I guess it might be called a sitemap or something... Anyway I was wondering if there were any free page makers out there like the WIX.com program? The only thing wrong with that program is that you cannot use it on your personal website but instead you must purchase their own hosting...
I want to pass 2 variables from a html page and collecting in another html page using javascript. say i pass xyz and abc to a page 2.html from 1.html without using cookies. In 1.html page i have many links. each link should be able to pass different variable to 2.html. when some one clicks on a link the variables should be passed to 2.html I want to know how to collect them and use them. please provide me code snippet. |