|
JavaScript - How To Detect Browser Back Button Press With No Page Reload?
Hi I am trying to trigger an event once the user clicks the browsers back/forward buttons, I have built a system just like facebook where if the user has javascript turned on they get the full feature of the site which includes fast switching for example if someone goes to this page "example.com/index.php" and click a link to contact.php it would change the url to "example.com/index.php#!/contact.php" but what I need to know is if there is any way to change the pages content when the user goes back and forth through the fast switch pages? something like "history.back !== -1" or something like that.
If anyone can help please reply, thank you. Similar TutorialsHello, I need some script to force the browser to reload/refresh when a page is reached from the back button. EG You're on page A -> You click a link onto page B -> You Press Browser back to go onto Page A, it has old content that requires a reload. Now, my page is currently php so I won't bother with my code here as I am looking for any solution (I have also posted in php forum). Any JS solution that will trigger a reload on browser back is appreciated. I have tried a few ideas, most work in Chrome, IE always works, Firefox 4 and Opera 11 wont reload, simply fetching from cache I believe. Thanks. Hi All, I am using a loop slider to scroll 4 pages. When I am on any page and click through the product on that. I go to the product but when I click the back button, it goes to the start of the slider rather then the page where I left it. How to go back in loop slider from a back button to the page where we left the scroller. Instead of going to the start of the scroller. It is annoying to go back again to start of the page and scroll all pages. Any help, Highly appreciated. Regards, Meenakshi. It's a well documented issue- when you have a page that contains an iframe, and then navigate inside the iframe, hitting the browsers back button will only affect the contents of the iframe and not the entire page. I've been searching all over for solutions and cant find one that works for my current implementation. Anyone have any suggestions? Here is my code: js Code: function ShowPage(frame)
{
frames[0].location = frame+'.html'
frame.contentWindow.location.replace(newUrl);
}
Buttons that change the contents of the iframe Code: <div id="thumb1"><a onmouseover="ShowPage('frame1')"onclick="ShowPage('frame1')" rel="nofollow" target="mainbox"></a></div>
<div id="thumb2"><a onmouseover="ShowPage('frame2')"onclick="ShowPage('frame2')" rel="nofollow" target="mainbox"></a></div>
<div id="thumb3"><a onmouseover="ShowPage('frame3')"onclick="ShowPage('frame3')" rel="nofollow" target="mainbox"></a></div>
and then the iframe itself Code: <iframe src="frame1.html" type="text/html" style="border-width:0; border-style:hidden;" transparency="true" name="mainbox" frameborder="0" scrolling="no" width="700" height="807"> </iframe> Sorry if this is the wrong place for this question, but... I'm having an issue with the difference in behavior between the IE and FF back buttons. I'm using jQuery to create collapsable div regions which contain text boxes on a search form. After submit, if the use clicks the back button in FF, the region(s) the user had previously expanded, show as expanded. Also, there search term is still present. In IE, when clicking the back button, all regions are collapsed, in there original loaded state, but the search term is still saved. I put the following code at the top of the page: onload=function(){ alert('Onload!'); } When clicking the back button in FF, nothing happens. For IE, the alert pops up. This tells me that IE reloads the page (but somehow still saves some things, like the search text). My question is, is there a way to keep IE from reloading when the use clicks 'back'? I will be creating my own 'edit' back button for users to get around this, but I also would like to prevent this from confusing users and causing undesired results. Any help would be greatly appreciated. I am trying to write script that allows a user to select a new page using a select menu. But if a user changes mind and clicks Back button. i want a use to see again "Select a New Page" as a first option in the select menu. instead i see the page that was chosen before. in firefox, even when i click Refresh button, the select menu does not go back to its initial format. I tried to use the principle that each time window is loaded, the selected Index would be 0. it is not working. Could anyone give me a hint on how to fix this problem? my script is below. <html> <head> <title>Jump Menu 2</title> <script type="text/javascript"> function new_page() { var selectmenu=document.getElementById("states_form").states_select; selectmenu.onchange=function new_state() { var i=selectmenu.selectedIndex; var state=selectmenu.options[i].value; var new_page="http://www.50states.com/"+state+".htm"; location.href=new_page; window.onload=function select_reload() { i=0; } } } window.onload=new_page; </script> </head> <body> <form id="states_form"> <select name="states_select"> <option value="0"> -- Select a New State--</option> <option value="nebraska"> Nebraska</option> <option value="texas"> Texas</option> <option value="florida">Florida </option> <option value="oregon"> Oregon</option> <option value="wisconsi"> Wisconsin</option> </select> </form> </body> </html> Hi there, I basically need script that will detect if the user is using Internet Explorer, and then display a different page to the one that would be loaded for any other browser.
Hello, I've been working on creating a script that zooms the entire webpage. Other than using "CTRL" + "+" keys (generally compatible with all browsers) to zoom in inside a web browser, I want to put it in a different format, as a button; it would be even easier to use. The problem is that I can't figure out how to make it work/ why it does not work. The following is my code: Code: <html>
<head>
<script type = "text/javascript">
document.onkeydown = function(zoomin) {
var key;
zoomin = zoomin || event;
key = zoomin.keyCode;
key == 43;
return false;
if (key == 17) {
return true;
function(zoomin){;
return false;
}
}
}</script>
</head>
<body>
<h1>Is this appearing to get bigger?</h1>
<button onclick="javascript: function('zoomin');">Zoom in</button>
</body>
</html>
Basically I was trying to use a DEC code as the code for the "CTRL" and "+" keys; then put them into a function. The "return true" under the IF statement means that I want it to hold so that the "+" key can be read as part of the script, and therefore make the page zoom in. Once that happens, it returns false. I would appreciate any help/ suggestions. I will also try to look for a way to reset the page (100%) or zoom out as well. Hello, I have a script that enables a certain button when some conditions are met. I'm having an issue with it, so I made a simple script to get to the core of what I'm trying to do. This is the script that I'm using: Code: function disable()
{
document.form.button2.disabled='false';
}
Code: <form name="form"> <input type="button" name="button1" value="Enable Button 2" onclick="disable()" /> <input type="button" name="button2" value="Button 2" disabled="true" /></form> Basically when you press button 1, button 2 enables. If I reverse it (button 2 enabled by default, pressing button 1 enables it) it is fine. But for some reason this way round nothing happens when I press button 1. What am I doing wrong? Hey: I have several "submit" buttons on a form. I want users to be able to hit the "enter" key to submit the form. The page used to "post" the information checks for specifically what form button was pushed to submit the form before executing the appropriate code. I am automatically submitting the page when the enter key is hit, but it is defaulting to the first option of executed code in the post page. Example - I have an "update" button and a "delete" button on the form. On the post page, I first check to see if the delete button was hit. When I press enter on the form, it simply answers yes to the first question (did they click the delete button), and the code is executed. I really wanted to emulate that the update button was hit. So -- is there a way to hit the enter button, and in the js code, mandate that it was the "update" button that was clicked? Thanks. I am attempting to make an page on my website where visitors can set my website as their homepage. I am trying to make my website read which browser my visitors are using and then redirects them to the page for the right browser where I can tell them how they can set my website as their homepage. Basically I need exactly the same thing as THIS. Could you explain to me in plain English how I can realize this. This is what I know have: Code: <table width="759" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr align="center">
<td width="378" height="28" align="right">Selecteer jouw browser </td>
<td width="16"></td>
<td width="365" align="left"><form id="browserSelection" name="browserSelection" action="customizeBrowser" method="GET"><select name="browser" size="1" id="browser" onchange="document.browserSelection.submit();"><option value="ff" selected>Firefox</option><option value="ie">Internet Explorer</option><option value="chrome">Chrome</option><option value="opera">Opera</option><option value="safari">Safari</option></select></form></td>
</tr>
</table>
________________________________________ Please tell me if I make any English mistakes in my posts. I am trying to write as perfectly possible. hey all is there a code where I can detect if the browser is IE6 or IE7 and send them to another webpage? my current design is not compatible with IE6 or 7 and i want to make a new page that's compatible. thanks! Hi.. Anyone can help me to reslove tis.. How to detect iTune plugin in IE Browser...Am using navigator.plugins[] array..its working in firefox,chrome but i need for IE browser..pls help on tis very urgent.. I want to have a browser language detection for 2 languages for Explorer and Firefox and struggle a little to make it work. I don't know really much about JavaScript so I guess I did some grave errors. It works for one language though, but for that I don't really detection. I am not sure if that's wrong, but I try to look for the 'en-' in the language not to deal separately with en-US, en-AU, en-UK etc. PHP Code: <script type="text/javascript"> var str=navigator.language; x = (str.search(/en-/i)); if ( !(x=='-1') ) { document.write("English Mozilla"); } var expl=navigator.browserLanguage; ex = (expl.search(/en-/i)); if ( !(ex=='-1') ) { document.write("Englisch1 Explorer"); } var dm=navigator.language; d1 = (dm.search(/de-/i)); if ( !(d1=='-1') ) { document.write("German Mozilla"); } var dex=navigator.browserLanguage; dexpl = (dex.search(/de-/i)); if ( !(dexpl=='-1') ) { document.write("German Explorer"); } </script> In my application I want user to take an "Exit Survey"(Independent website) when he is leaving the application. As name explains, It should happen only when user closes current browser tab or browser window. Its possible using JavaScript OnUnload event. But the problem is that this event occurs on 1. close of browser tab 2. close of browser window 3. click of any internal page link(i.e anchors and form buttons) 4. click of browser's Refresh button 5. click of browser's Back/Forward button I have handled first 3 cases but not able to detect Refresh and Back/Forward button click. Has anybody of you implemented such functionality?? Thanks in advance!!! Hello everyone! Im new here so any help you can give would be great. I am a Designer, and some time AS3 programer. Teaching my self Javascript for a portfolio website. The Goal: I created a code that randomly creates and Populates Divs in a regular grid, then populates them with an image (using css backgroundImage property) or a print CMY(and Green) color. (eventually will include a shadow box and side scroller) The Problem: The creation and population works just fine, the first time around. if I "Refresh" the page (which i thought destroyed all vars and data) the page loads some times, or freezes. Some times it doesn't load at all! so its very unpredictable, obviously i need this to work the same way every time. Im pretty sure its something simple that i missed, a nuance of javascript or something. So if any one who is more experienced can help I would be super grateful!! here is the page on my website: designchangeseverything.com/beta/divpoptest.html here is the code (i included some of my comments so you can see how i was trying to debug): Code:
<SCRIPT LANGUAGE="JavaScript">
var Tborder = .05
var howmanyIMG = 15
var winHeight = Math.floor(window.innerHeight);
var winWidth = Math.floor(window.innerWidth);
var BoxHeight = Math.floor((winHeight * (1-Tborder)) / 3);
var BoxWidth = BoxHeight;
var howmanyx = Math.floor(winWidth / BoxWidth) + 1;
var howmanyy = 3;
var HowMany = howmanyx * howmanyy;
var used = new Array(howmanyIMG);
var CMYG = ["00AEEF","EC008C","FFF200","41AD49"]
function RNDy(numby){
return Math.floor(Math.random()*numby);
}
function getUniq(){
/* alert("run getuniq");*/
var n;
while ( used[ n = RNDy(howmanyIMG) ] ){}
used[ n ] = true;
return n;
}
function ColorRND() {
if (RNDy(4) ==1) {
return true;
}else{
return false;
}
}
function PlacePop (HMx,HMy){
var counter = 0;
var countc = 0;
for(x=0;x<=HMx;x++){
var countr = 0;
for(y=0;y<HMy;y++){
var divy = document.createElement("div");
var divyID = 'box' + counter;
divy.setAttribute('id', divyID)
divy.style.position="absolute";
divy.style.zIndex = counter + 3;
divy.style.visibility = 'visible';
divy.style.borderWidth = '1';
divy.style.borderColor = '#000000';
divy.style.pixelLeft= x * BoxWidth + (2 * countc);
divy.style.pixelTop= y * BoxHeight + (winHeight * Tborder) + (2 * countr);
divy.style.pixelWidth= BoxWidth;
divy.style.pixelHeight= BoxHeight;
if (ColorRND()){
/*divy.innerHTML = 'color';*/
divy.style.backgroundColor = "#" + CMYG[RNDy(4)];
}else{
/*divy.innerHTML = 'image';*/
divy.style.backgroundImage = "url(resourses/images/portfolio/" + getUniq() + ".png)";
divy.style.backgroundPosition = "center";
/*RNDy(100) + "% " + RNDy(100) + "%";*/
}
document.body.appendChild(divy);
counter++;
countr++;
}countc++;
}
/*
alert("ran" + counter + " times");*/
}
/* used = null;*/
</script>
THANKS FOR ANY HELP YOU CAN GIVE! Hi I am generating a report on submit click.Due to size of data query execution takes some time to display result, in mean time if user press reload button on browser toolbar consequently same query request going to database and the performance become slow down. I am able to restrict user from clicking F5 and ctrl+R button but not reload button. I there any way to handle event on reload button? or can we disable reload button on submit? Thanks in advance! Hi Guys, I need to amend the below so that if any version of IE is detected it calls window.resizeTo(300,400); otherwise no event or a window.moveTo(0,0); event (either one). Firefox is having problems with resizeto THANKS! <SCRIPT LANGUAGE="JavaScript"> if "any version of internet explorer" window.resizeTo(300,400); else window.moveTo(0,0); </SCRIPT> OR <SCRIPT LANGUAGE="JavaScript"> if "any version of internet explorer" window.resizeTo(300,400); else "do nothing" </SCRIPT> Hi everyone, Let's say i have a form that looks like this: <form name="myForm" action="myPage" onsubmit="return validateForm();"> <input type="text" name="myInput" size="10"> <input type="submit" name="add" value="Add this"> <input type="submit" name="cancel" value="Cancel this"> </form> What i'm trying to do is for the validateForm() function to either redirect the page if "Cancel this" is clicked, or continue processing if "Add this" was clicked. So the validateForm() would work something like this: function validateForm() { if (cancel button is clicked){ location.href=go some place } else{ do some other stuff } } So, how can dynamically detect which submit button was clicked, before submitting the form? (that would fill in the "cancel button is clicked") I tried with document.myForm.cancel.selected and other variations but it always returns undefined. Any input will be greatly appreciated. Thanks! this function seems to be working fine in all browser but of course. I'm still a noob at JavaScript and well things like this just doesn't make sense. when I go to alert this function in IE I get undefined. But other browser gives me a value. What am I doing wrong with this function? Code: function ext() {
var img = document.getElementById('photoSmall');
img = img.src;
if (typeof img == 'string' && img != 'undefined') {
var typeis = img.substr(-4);
if (typeis == '.png' || '.jpg' || '.gif') {
return typeis;
}
}
}
Thanks Jon W |
|||||||