JavaScript - Open Page To A Specific Slide From Another Page
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); } Similar TutorialsHello. 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 know this is a common problem, and each slide show script is a bit different and I can't get this to work exactly right: http://www.javascriptkit.com/script/...ifferent.shtml I've got two tables containing mouseover image "slide" shows - numbered sequentially but both are on the same index.html page. One image show comes up with the first navigation link, the second image show comes up with the second navigation link. The first image show works, the second doesn't - could you tell me what is causing that. there is a javascript glider that requires them both to be on the same page. link to the page here . . . http://www.sunupdesignbuild.com/NEW/index.html appreciate your help thank you T 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. I've got a client using JQuery pageslide function on a wordpress site - http://srobbin.com/blog/jquery-pageslide/ There is a sidebar menu on the left and about 5 pages in the right hand side. So you click one of the links on the sidebar menu and it slides to one of the 5 corresponding pages. I guess the 5 pages are all really one page though within the slider app? I'm wondering if it's possible to link directly to a page within the slider... because right now it always goes to the first page of the 5. And is there a way to program it so the back button in the browser makes the page slide go back to the previous page, rather than going to the last actual page in the browser? This may be a stupid question, but is there a way to have a page refreshed at a specific time of day? I have made up a page I set as my browser's home page, an electronic Page-A-Day calendar. If I am working on the computer overnight I would like this page to refresh autotically at midnight. I have seen all sorts of posts that describe how to refresh after a certain amount of time has passed, but nothing for what I would like to do. For those interested the code i have for the webpage in in the attached file. Nite hi there, i wish there could be solution to this as I cannot figure how to do it. I would like to have an autocopy and paste data from a page to a textbox...Like if a webpage has the details like receive from: and receive to:, can this text be autocopied to a textbox on a click of a button? the text box is place on another webpage, so there are basically two webpages, 1st page is where the data to be copied is contained while the 2nd webpage is where the textbox is contained. the data to be copied on the 1st page are the contents of received from: and recieved to: like receive from:edward receive to:jacob. So with a click of a button I would like the contents receive from:edward receive to:jacob be copied and pasted on the text box from another page... I hope this sounds clear enough...sorry to be a pain... regards, verve Hi I have created a very very simple javascript that displays random text quotes. It is in Greek but here it is anyway: http://gerogriniaris.blogspot.com It is in blogger and shows up as a gadget. My problem is that i need to make it reload by a button and at the same time go to the top of this gadget (using an anchor). The reason I want to do this is that I have been sharing this with other bloggers, but if they don't put it on top of their page, as soon as they press the button that reloads the page, they are in the top of the page and they would have to scroll down to find the quote. I have tried to use window.location.reload with window.location.hash. It works in Firefox, but not in IE. I have been trying something like that: Code: <input type="button" value="Click to refresh" style="width: 130px" onclick="window.location.hash='#something';window.location.reload()" /> As i said, this works with Firefox, but not with IE9 Also, I can't define urls beforehand because I want other people to be able to use it to their own blog or website. I suppose this is a noob question, but I have been trying to find a solution and couldn't. Please be kind... Any ideas? Hey guys, I have a quick question for you today I am coding a little login script, just password, the security is meant to be weak I'm using it as a teaching aid: Here is my problem, I want it to go to a page if the password is true, and go to another if it isnt, my code will explain. The window.open works but it takes you to another tab I want it to load in the same place. CODE:http://codepad.org/s34r3BQl Thanks in advanced Owen Hello All, i have a script which which restrict a user to access a page once per day, i need your help to modify the script so that a user can view the page once in 90 days. <script language ='javascript'> function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } /* Check the cookie and redirect if they have it set. */ sWhere = 'http://google.com'; // replace this with where you want them to be sent when they can't view page. if(!readCookie('viewcheck')){ createCookie('viewcheck',1,1); } else { window.location = sWhere; } </script> I am creating chat application.I have friend list with whom login user can chat.onclick of user name i want to open different div in which i can load my chat page.Can anyone suggest me javascript for this task.
Currently the page has some divs' displays set to none. When a user clicks an anchored link, it displays the appropriate div. Here is the script I'm currently using, which works fine: Code: function showApp(whichApp) { document.getElementById('dTips').style.display='none'; document.getElementById('dCaseStudies').style.display='none'; document.getElementById('dWebinars').style.display='none'; document.getElementById('dReports').style.display='none'; document.getElementById('dDigimags').style.display='none'; document.getElementById('dPodcasts').style.display='none'; document.getElementById('dNews').style.display='none'; document.getElementById('dCalendar').style.display='none'; if (document.getElementById) { document.getElementById(whichApp).style.display='block'; } } Here's how I call it within the page: Code: <a href="javascript:showApp('dTips')">Tips</a> Is there any way to modify it so that if the user clicks a link on a different page, it goes to the APPS page and displays the requested div? If not, is there another way to accomplish this task? Good day all I have a contact form that opens up in a iframe on my home page. I have a second page with a link for contact and I would like to know If their is a javascript that when I press the contact link on the second page that it can go to the home page and open the iframe for the cntact form. Please note I do not know javascript I am trying to learn it. Thank you Shoutout I have looked all over for an answer to this, but haven't found a definite way to do it yet. I am updating my audio page (a demo track list for getting composing work) and getting rid of my flash audio player in favor of embedding .mp3 files, or adding them with the HTML5 audio tag. What I would like to be able to do is link into the page, and have that link autoplay a specific track out of the 10-20 that I will have on the same page. The problem is I am extremely new to scripting and have no idea where to even start with this. The reason I want it to be able to autoplay specific tracks is so I can market a specific track, and have that person (who is already expecting to hear the music on page load) not have to then look through the track list for that one track I was promoting and click play. Any help would be greatly appreciated, Thanks! I am current building an information database for the company I work at...basically just a place for employees to get information and answers from. It is all hosted on a local server and I can only use javascript, html, and css. Ive got everything made there is just one thing i want to add to it. basically an "alerts and updates" page that only some people can edit without having to know html so if im not there they can post important updates. no computers have access to the internet so I did try some rich text editors but none of them worked. the lay out I'm going for is kind of like this. ------------------------------------ Alerts and Updates Click on links to show updates: update 1 * update 2 * update 3 * update 4 stuff goes in the update [edit button] ------------------------------------- you click edit it prompts you to login, bring up something to edit the text in that specific update you hit submit and it changes the info that was on there. The update links are linked to a script i wrote that just display the info below so when the page loads you see whats in update 1 then you click update and it changes the content to the next one. i dont know if there is any way to do this in javascript and html. any help or a good direction to start would be great...thanks. Hey there I want to know how i can make a page that opens and loads content in a div tag when i click a certain link on my home page. i have a javscript code to load content into a div tag when the link is on the same page as the div tag, but i want to get a script where it will open a new page and load content into a div tag on that page. like the link must be something like main.html?div=content.html i know how to do this with iframes, but i want to work with div tags thank you javascript for loading content into the div tag on the same page : PHP Code: var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no) var loadedobjects="" var rootdomain="http://"+window.location.hostname var bustcacheparameter="" function clientSideInclude(containerid, url){ var page_request = false if (window.XMLHttpRequest) // if Mozilla, Safari etc page_request = new XMLHttpRequest() else if (window.ActiveXObject){ // if IE try { page_request = new ActiveXObject("Msxml2.XMLHTTP") } catch (e){ try{ page_request = new ActiveXObject("Microsoft.XMLHTTP") } catch (e){} } } else return false page_request.onreadystatechange=function(){ loadpage(containerid, page_request) } if (bustcachevar) //if bust caching of external page bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime() page_request.open('GET', url+bustcacheparameter, true) page_request.send(null) } function loadpage(containerid, page_request){ if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) document.getElementById(containerid).innerHTML=page_request.responseText } function loadobjs(){ if (!document.getElementById) return for (i=0; i<arguments.length; i++){ var file=arguments[i] var fileref="" if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding if (file.indexOf(".js")!=-1){ //If object is a js file fileref=document.createElement('script') fileref.setAttribute("type","text/javascript"); fileref.setAttribute("src", file); } else if (file.indexOf(".css")!=-1){ //If object is a css file fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type", "text/css"); fileref.setAttribute("href", file); } } if (fileref!=""){ document.getElementsByTagName("head").item(0).appendChild(fileref) loadedobjects+=file+" " //Remember this object as being already added to page } } } I have a website that is using ajax to keep the page up to date with the database information. I call this page through a file called start.php. Once index.php is loaded it has a menu with selections. I then want it to call a page called query.php in an iframe to update the information, but not open a new window. In the iframe the query.php will run and then redirect itself to blank.php. The code is as follows and any help would be much appreciated. I have tried several methods of doing this and they have been commented out because they didn't work or didn't do what I wanted them to do. I do not want to use window.open since IE doesn't work well with it. window.open does work by pop up windows but I want to stay away from them. The main code I am looking to get help on is in red under start.php. In start.php I will include the entire file. In index.php I'm only going to include the main sections I use for this snippit. In query.php I'm not going to include query.php since I beleive this file isn't important for this snippit. start.php Code: <html> <head> <title>Countries At War!</title> <body style="background-color:#B0C4DE;"> <script language="JavaScript" type="text/javascript"> //Gets the browser specific XmlHttpRequest Object function getXmlHttpRequestObject() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); //Not IE } else if(window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); //IE } else { //Display your error message here. //and inform the user they might want to upgrade //their browser. alert("Your browser doesn't support the XmlHttpRequest object. Better upgrade to Firefox."); } } //Get our browser specific XmlHttpRequest object. var receiveReq = getXmlHttpRequestObject(); //Initiate the asyncronous request function sayHello() { //If our XmlHttpRequest object is not in the middle of a request, start the new asyncronous call. if (receiveReq.readyState == 4 || receiveReq.readyState == 0) { //Setup the connection as a GET call to SayHello.html. //True explicity sets the request to asyncronous (default). receiveReq.open("GET", 'index.php', true); //Set the function that will be called when the XmlHttpRequest objects state changes. receiveReq.onreadystatechange = handleSayHello; //Make the actual request. receiveReq.send(null); } } //Called every time our XmlHttpRequest objects state changes. function handleSayHello() { //Check to see if the XmlHttpRequests state is finished. if (receiveReq.readyState == 4) { //Set the contents of our span element to the result of the asyncronous call. document.getElementById('span_result').innerHTML = receiveReq.responseText; } } function openMenu(query) { var myString = 'query.php?' + query; // window.open(myString, 'linkname', 'title=no, height=465, width=400, left=550, top=150, location=yes, resizable=no, menubar=no, scrollbars=no') //document.getElementById('engine').src = myString; //document.getElementById('engine').setAttribute('src',myString;); //top.frames['engine'].location.href = myString; pausecomp(1000); sayHello(); } function pausecomp(millis) { var date = new Date(); var curDate = null; do { curDate = new Date(); } while(curDate-date < millis); } </script> </head> <body> <a href="javascript:sayHello();">Say Hello</a><br /> <iframe src="blank.php" MarginWidth="0" transparent="yes" width="30" height="25" frameborder="0" scrolling="no" name="engine"> UPGRADE YOUR BROWSER</iframe> <span id="span_result"></span> <body onLoad="sayHello();"> </body> </html> index.php Code: <table width="100%" border="2" bordercolor="Black"> <tr><center> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=1');">Home</a></td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=2');">Jobs</td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=3');">Travel</td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=4');">Fight</td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=5');">Inventory</td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=6');">Properties</td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=7');">Rewards<?php if($db_field['rewardpoints'] >= "1") print "(". $db_field['rewardpoints'] . ")";?></td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=8');">Profile<?php if($db_field['profilepoints'] >= "1") print "(". $db_field['profilepoints'] . ")";?></td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=9');">Alliances</td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=10');">Options</td> </tr></center> </table> Thanks in advance for all the help. Hi Im trying to creat a website so when the small image is rolled over a new page opens in the frame ( called main) i will upload it now to http://www.e-z-host.com/GZ/ all help apricated ! at the momment you have to click to open the page in the main frame. I have a menu that lists all the categories and sub categories, when someone clicks a main category it opens up the sub cats for it. if someone clicks one of the sub cats the page open up to show all items in that category. But what I would like to find out is how do I get the menu to open up as it was so it shows the category and sub category open? Code: <!-- start show cat list --> <br><div style="font-weight: bold; font-size: 0.825em; padding: 0em 0em 0.3125em;">Select items by category</div> <ul class="catMenuItem"> <li><a style="background-image: url("images/triangle_down.gif");" href="#" class="titleTriangle"><span>cat1</span></a></li> <li style="display: block;" class="catSubMenu"> <a href="?cat=2">sub 1-2</a> (0)<br> <a href="?cat=7">sub 1-3</a> (2)<br> <a href="?cat=8">sub 1-4</a> (0)<br> <a href="?cat=9">sub 1-5</a> (0)<br> <br> </li> </ul> <ul class="catMenuItem"> <li><a href="#" class="titleTriangle"><span>cat2</span></a></li> <li style="display: none;" class="catSubMenu"> <a href="?cat=3">sub 2-1</a> (0)<br> <a href="?cat=4">sub 2-2</a> (0)<br> <a href="?cat=5">sub 2-3</a> (0)<br> <a href="?cat=6">sub 2-4</a> (1)<br> <br> </li> </ul> <ul class="catMenuItem"> <li><a href="#" class="titleTriangle"><span>cat3</span></a></li> <li style="display: none;" class="catSubMenu"> <br> </li> </ul> <ul class="catMenuItem"> <li><a href="#" class="titleTriangle"><span>cat4</span></a></li> <li style="display: none;" class="catSubMenu"> <br> </li> </ul> <ul class="catMenuItem"> <li><a href="#" class="titleTriangle"><span>cat5</span></a></li> <li style="display: none;" class="catSubMenu"> <br> </li> </ul> <script type="text/javascript"><!-- /* Categories Menu START */ var prevCat; function menu(newCat) { var mens; var anchors; if (prevCat) { mens = prevCat.parentNode.getElementsByTagName('li')[0]; anchors = mens.getElementsByTagName('a')[0].style.backgroundImage='url(images/triangle_right.gif)'; prevCat.style.display = 'none'; } if (newCat != prevCat) { mens = newCat.parentNode.getElementsByTagName('li')[0]; anchors = mens.getElementsByTagName('a')[0].style.backgroundImage='url(images/triangle_down.gif)'; newCat.style.display = 'block'; prevCat = newCat; } else { prevCat = null; } } onload = function() { var menus = document.getElementsByTagName('ul'); for (var a=0,x=menus.length; a<x; a++) { if (menus[a].className === 'catMenuItem') { menus[a].getElementsByTagName('li')[0].getElementsByTagName('a')[0].onclick = function() { menu(this.parentNode.parentNode.getElementsByTagName('li')[1]); } menus[a].getElementsByTagName('li')[1].style.display = 'none'; } } } /* Categories Menu END */ --></script> <!-- end show cat list --> Hello Everybody I have recently been tasked with a unique task and for the life of me I can not work out how to do it. Using this website as an example: http://www.coastalcontacts.com/cFaq.html You can see that the FAQ questions open and close as you click on them, leaving the page looking clean for the most part. Now I am writing up a landing page that will be doing something similar, however I would like the page to scroll down as each new question is opened up. Meaning I click on one of the faq questions closer to the bottom of the page and then it scrolls down to show all the new content. This does not need to happen for questions that do not go to the bottom of the page and are fully visible. Any and all ideas would be much appreciated Thank you |