I added to a website a plugin that shows a calendar and the user can choose several days. It works fine on Firefox, but it does not execute on Chrome and Opera. The strange thing is that I isolated the plugin in another website, just with this code:
<title>jQuery Datepicker</title>
<style type="text/css">
#import "jquery.datepick.css";
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.datepick.js"></script>
<script type="text/javascript" src="jquery.datepick.lang.min.js"></script>
<script type="text/javascript" src="jquery.datepick-es.js"></script>
<script type="text/javascript">
$(function() {
$('#popupDatepicker').datepick({multiSelect: 999, monthsToShow: 2,dateFormat: 'yyyy/mm/dd', showTrigger: '<button id="showcal" type="button" class="trigger ">' +
'<img src="img/calendar.gif" alt="Calendario"></button>'});
//$.datepick.regional['es']));
});
</script>
</head>
<body>
<p>A popup datepicker <input type="text" id="popupDatepicker"></p>
Which is the minimum code to get the plugin working and it does work in Chrome (plugin site here)1
The problem is when I implement it on the complete website, which doesn't work. It is the same code with the same libraries included, but obviously with other code.
I have checked firebug and it does not return any error, so I am a bit lost.
Just in case in needed, my Chrome version is 18.0.1025.162, but should not be relevant.
What can be wrong?
One last thing: Is there any kind of javascript standard which would work on all browsers?
Thank you very much in advance
jQuery UI has an excellent datepicker and is a good bet to be compatible with most browsers.
Related
I run this simple script that comes from Angular documentation, and it's working fine:
http://plnkr.co/edit/6uIlw6HGVVpT0amF2vhj
If I add jQuery and jQuery Mobile, then the example doesn't work anymore. The radiobuttons are not clickable.
Example: If I add these two scripts and the following CSS in the above example:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
If I put them before the include of angular.js, then the radiobutton are clickable, but the display of the choice ("You choose...") doesn't work anymore.
Does somebody knows why is it not working?
Use this Sequence. dont know the reason but worked in plunkr.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
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
This question already has an answer here:
Plugin implementation issue with jQuery
(1 answer)
Closed 9 years ago.
Here is my problem. There's a nifty looking plugin here http://lab.smashup.it/flip/ which flips things around. I managed to implement it, but for some odd reason I'm only getting the first half of the animation rendered, the second part is just invisible (or hidden) and then it jumps to the end. To make things even more fun, everything was working fine at some point but then suddenly not. I of course backtracked as far back as possible back to when things were fine, and same problem again. I can't seem to locate the source of the problem. If someone could just please help me out by testing out the plugin and telling me if they managed to get a full animation rendered. For my HTML I based it on the source code of the plugin demo page to make sure, but to no avail.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test#0935</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load jQuery
google.load("jquery", "1");
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="JS/jquery.flip.js"></script>
<script type="text/javascript">
$(function() {
$("#id1").bind("click", function() {
$("#flipo").flip({
direction: "bt"
})
return false;
});
});
</script>
<style type="text/css">
#flipo {
width:100px;
height:70px;
background-color:lightblue;
margin:20px;
}
</style>
</head>
<body>
<div id="flipo"></div>
<div id="id1">left</div>
</body>
</html>
For those of you who recognize this problem, I did try to avoid posting a new thread until I was advised to do so as no one was reading the old post. I've also flagged my initial post for deletion.
Nothing wrong with the basics of what you posted, I set up a quick fiddle and it worked fine, but that was when I noticed that you have not included your JS correctly. I think the issue is with that.
First you are pulling in jQuery from google using google.load. Then you are getting a (potentially different) version from jQuery.com. Also, flip relies on jQuery UI, and I can't see you importing that anywhere in the html snippet you posted.
Why don't you try this and get rid of the google.load and jQuery.com sources and see if that works.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="JS/jquery.flip.js"></script>
Demo Fiddle
This plugin depend's on jquery and jqueryUI, include both in your code
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
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() {
...
});