I am trying to get history.js to work in Internet Explorer because I need history.pushState() to work. I have read over the instructions on GitHub (https://github.com/browserstate/History.js/) and have tried implementing it, but havent had any success.
Here's what I have
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!-- History.js -->
<script defer src="http://balupton.github.com/history.js/scripts/bundled/html4+html5/jquery.history.js"></script>
<script type="text/javascript">
function addHistory(){
// Prepare
var History = window.History; // Note: We are using a capital H instead of a lower h
// Change our States
History.pushState(null, null, "mylink.html");
}
</script>
</head>
<body>
My Link
Other Link
<button onclick="addHistory()" type="button">Add History</button>
</body>
Not sure what I'm doing wrong, but it's definitely not working in IE8 or IE9. It does work in Firefox, but that may be because Firefox actually supports history.pushstate to begin with. Any help is appreciated
In second <script> tag remove the word defer.
because, if you mention that word, which means postpone. ( If you want to save that from to reduce blocking of page rendering, don't remove it). That too IE is very strict, that's why you got that problem. Hope it helps
refer this
Related
I am trying to build a simple webpage that replaces the contents of the <div id="body"> with something new based on the user clicking on a "link"
The following code does exactly what I expect in Chrome and Firefox, but does nothing (except turn the link to the visited color) in IE 10 or 11:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#activities").click(function(){
$("#body").load("test02.html");
});
});
</script>
</head>
<body>
<div id="header">
Activities
<!-- this stays the same -->
</div>
<div id="body">
<p>this is the content that arrives without needing prompting</p>
<!-- All content will be loaded here dynamically -->
</div>
<div id="footer">
<!-- this stays the same -->
</div>
</body>
</html>
This is the content of "test02.html":
<p>---</p>
<p>Hello world!</p>
<p>---</p>
I've checked the javascript security settings in IE and everything is set to "enable." I've also tried adding type="text/javascript" to the script tags.
Some amount of Googling has turned up the possible need to reinstall IE, which I have tried.
Anyone have an idea about how to get this working in IE?
The problem is that IE breaks itself in "compatibility" mode. The way in which it breaks itself in this case is failing to correctly look up your div id="body" element. I think that was observation error on my part, I think the real problem is addEventListener (because jQuery 2.x doesn't fall back to attachEvent anymore, since it doesn't support IE8 and earlier [or the "compatibility" modes that act like them]):
I can replicate the problem. The problem goes away if I tell IE not to break itself (e.g., not to use compatibility mode) by adding this to the top of the head element:
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
IE's default for intranet sites is to display them in "compatibility" mode.
At one point I wasn't at all sure that when in "compatibility" mode it didn't get confused about that element with the id "body". IE has a history of getting confused by things like that. So you might also consider the-body or similar, but I tested and didn't seem to need it.
Side note: You probably also want to add a return false or e.preventDefault() to your click handler, so it doesn't follow the # link (which will scroll back to the top of the page and add # to the address bar).
add meta tag below to your page
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
Do you mean <body> tag or <div id="body"> and do you ever try preventing default behavior of the link by using this below code :
$(document).ready(function(){
$("#activities").click(function( e ){
e.preventDefault(); //<---- add here
$("#body").load("test02.html");
});
});
I am using following code for my website:
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script src="js/jquery-migrate-1.2.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("img#logo").load(function() {
alert('Hello');
});
});
</script>
And this is not working in IE but works fine in Firefox, Chrome and Safari.
I can confirm that your code does work in IE 8 on windows 7 64 using unminified version:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script>
$(document).ready(function () {
console.log($.fn.jquery);
$("img#logo").load(function () {
console.log('Hello');
});
});
</script>
</head>
<body>
<img id="logo" src="somegig.gif" onload="console.log('load');"/>
</body>
</html>
This will log 1.10.1 then load and then Hello, maybe you have to validate your html and make sure your html is valid maybe that's a problem.
a quick review of http://api.jquery.com/load-event/ provides some caveats:
Caveats of the load event when used with images
A common challenge developers attempt to solve using the .load()
shortcut is to execute a function when an image (or collection of
images) have completely loaded. There are several known caveats with
this that should be noted. These are:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache
Note the first and fourth caveats. Clear the cache and try again.
Also, do you need the jQuery migrate ? Lose it and see if it is glitching your IE
Why doesn't this JavaScript work in Internet Explorer 7-8? All I am trying to do is wire up the 'click' event for multiple DIVs by using jQuery to select the DIVs by class name.
It works in Firefox, Chrome, Safari. In IE, it will only work in Browser Mode: IE 9 / Document Mode: IE 9 standards". Can't get it to work in IE 7 or 8.
<!DOCTYPE html>
<head>
<title>IE Click Target Test</title>
</head>
<body>
<div class="ClickTarget">Button 1</div>
<div class="ClickTarget">Button 2</div>
<!-- load jQuery 1.6.4 from CDN -->
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="application/javascript">
// This works fine in all browsers except IE pre-9.
$(document).ready(function () {
$(".ClickTarget").click(function () {
alert("If you can see me, it worked!");
});
});
</script>
</body>
</html>
Normal disclaimers: I wouldn't HAVE to use jQuery for this example, but it illustrates a problem I am having with a larger solution that does use jQuery 1.6.4. IE is often quirky, I've had to deal with it many years, but that's life.
For some reason, maybe the impending holiday, I'm overlooking something. Any ideas why I can't register the click in IE?
I think it's the type="application/javascript" in your <script> tags -
"text/javascript" is the only type that is supported by all three
browsers. However, you don't actually need to put a type. The type
attribute of a script tag will default to "text/javascript" if it is
not otherwise specified. How that will affect validation, I'm not
sure. But does that really matter anyway?
From - Why doesn't IE8 recognize type="application/javascript" in a script tag?
Try changing script tag's type attribute to text/javascript it should work fine in all the browsers.
As Shankar said originally, it's your script type not being "text/javascript"
I tried this JSFiddle in IE8 and worked fine for me.
http://jsfiddle.net/Nna2T/
This is not an answer but comments can't format code, so just an FYI...
This:
$(document).ready(function () {
...
});
Can be shorted to just:
$(function() {
...
});
The following code works fine in Firefox and IE but it doesn't work in Google Chrome, anyone have an idea of how to make it work? or an alternate way to move a window in Google Chrome?
Thanks!
<html>
<head>
<title>Open windows for clicks</title>
</head>
<script type="text/javascript">
function moveWindow()
{
this.resizeTo(400,300);
this.moveTo(0,300);
}
</script>
<body onload="moveWindow();">
<br>
</body>
</html>
That's not possible because if it was it would be abused by ad-companies, hackers, designers without taste and god knows what else.
I doubt it even works in firefox, can't remember if i changed it myself but for me that code does nothing with my firefox.
You can maybe move windows you've created yourself with window.open but dont expect window.resize/move to work just by opening a website.
I guess it's rather a bug, with number 1137420 to be precise, as the explanation of the start-maximized command line argument seems to indicate. (see ao http://www.ostreff.info/?p=1737)
Google guys need themselves a feature like that to test their browser...
try this
<script type="text/javascript">
function moveWindow()
{
setTimeout(function(){
this.resizeTo(400,300);
this.moveTo(0,300);}
,100);
}
</script>
How to use jquery cookies in showing/hiding elements in a page ? I got the plugin from here
Tried some method but i am not successful. I used slideUp() and slideDown() functions to show/hide elements.
When a element is slided up a cookie should be set. when the page is refreshed, the element should be in slided up position
How to apply cookie when slided up and how to get the cookie when page is refreshed ?
I need help !
I think the following is what you're looking for. Let me know if I am mistaken. Good luck!
http://jsfiddle.net/8VCJY/8/
- EDIT -
Sorry! My cookies were getting set backwards. It does work now (new link). Again, all apologies.
- EDIT -
Actually, I don't even know if it does work. It looked like it did, but then reviewing my code, I can't see how that could be right. All in all, I'm pretty sure that the setting of the cookie at the appropriate time and whatnot will at least get you on the right path. I think my usage of the plugin is wrong, to be honest (I've never used it before), but I gave it what I could. I hope it was at least somewhat useful to you.
Would this do the trick?
<!DOCTYPE html>
<html> <!-- xmlns="http://www.w3.org/1999/xhtml" lang="en" -->
<head>
<style type="text/css">
#outer {height:500px;width:500px;background-color:black;position:relative;}
#slide-me {height:50px;width:50px;background-color:white;position:absolute;top:250px;left:5px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
</head>
<body>
<div id="outer">
<div id="slide-me"></div>
</div>
<button type="button" id="myBtn">Slide it!</button>
<script type="text/javascript">
$slideObj = $('#slide-me');
var topOffset = $.cookie('myCookie');
if(topOffset)
$slideObj.offset({top: topOffset - $slideObj.height(), left:$slideObj.offset().left});
$('#myBtn').click(function() {
$slideObj.slideUp();
$.cookie('myCookie', $slideObj.offset().top);
});
</script>
</body>
</html>
P.S I'm using the Cookie plugin.