I have a very basic script that sets up datepicker on three of my inputs, this script works perfect in all browsers apart from Internet Explorer, I just wondered if anyone knew why. This is all of my JavaScript for that page:
<script type='text/javascript'>
$(function() {
CKEDITOR.replace('content');
$('input.datepicker').datepicker();
$('input[name="media"]').click(function() {
$('fieldset.media').toggle('slow');
});
$('input[name="digital"]').click(function() {
$('fieldset.digital').toggle('slow');
});
});
</script>
The element exists because it works in all other browsers. Firebug (Firefox addon) does not show any errors.
Thanks for any help you can give.
EDIT
This is what my script tag for including jQuery looks like.
<script src='/assets/javascript/jquery.js' type='text/javascript'></script>
EDIT 2
It is working completely (including opacity) in IE6 and IE7, IE8 is not working.
I have fixed it by using individual ID's for each of the elements and changing the conditional comment for Blueprint CSS from this
<!--[if IE]>
To this
<!--[if lt IE 8]>
Hope this helps some people.
I'm just throwing out a guess here, but have you tried putting your code into the .ready() handler? I'm thinking that maybe the reason why your code isn't working is that the document is not fully loaded when the code executes. So, just for kicks, try this:
$(document).ready(function(){ /*your code here*/ });
I am able to use the datepicker control with no problems in IE7 and IE8, but my code is in the .ready handler.
I cannot attest to the functionality in lower versions of IE, but I'd suspect that IE6 would have some issues.
Related
here's a landing page I've coded up:
http://rsa-partner.com/
It all looks fine in every browser bar IE8. In IE8, the advanced CSS selector 'nth child' is not recognised.
I downloaded and linked selectivizr.js (http://selectivizr.com/), which should have sorted it in ie, but alas, the background images that show on all my nth child selectors are not showing. The code is
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="js/selectivizr-min.js"></script>
<![endif]-->
Is there something I'm missing? I swear I've used conditional IE specific comments before and got nothing back. Any suggestions would be much appreciated.
Of course I could simply remove my nth child selectors and replace with specific classes but I'd like to avoid that if possible!
If your content is loaded in dynamically (like if you are using a CMS system), then it gets loaded after Selectivizr is run, and therefore it won't work.
From selectivzr.com:
The emulation is not dynamic. Once the styles are applied they are fixed so changes to the DOM won't be reflected.
I recommend using Modernizr instead. You can check for css-lastchild and customize the styles if the browser doesn't support it (together with the rest of the CSS3 selectors, like nth-child, etc.). I share your pain though!
When I load jquery using:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
it works on IE9, firefox, chrome, safari but not IE8. I tried the developer/debugger tools but still don't understand why this is an issue.
This is the character code jquery supposedly has error on: 32039.
On that line there is such function:
G=function(a){
var b=F.exec(a);
b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));
return b
}
Anyone came across this issue as well?
The site is http://www.kanersan.com
I am not calling jquery before it is loaded and I'm loading it inside the head tag.
This is a bug in jQuery 1.7.1 when used with SyntaxHighlighter
http://bugs.jquery.com/ticket/10961
So you have to upgrade jQuery to 1.7.2 and everything will be working fine.
try to folow some steps:-
1.jQuery is not being loaded, this is not likely specific to IE8. Check the path on your jQuery include. statement. Or better yet,.. TRy to give direct path.
2.May be because of compatibility issue.. Try to give compatibility solutions..
Things worked in IE6, Firefox, and IE8 running in IE7 compatibility mode; but not in 'normal' IE8. My solution was to put this code in the header
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
As to why jquery isn't working in IE8 I'm unclear.
3.Try to load your jquery on window load.
4.Try to define your jquery file in top..
5.Very important point - try to check your html and jquery code.. IE is very sensetive for code.. so cross check your Html code ,... Is everything is fine..
6.Changing browser sercurity level to allow executing external javascript code.
7.Replicate javascript framwork..
May this will help You !!!!!!!!1
Some things worth trying...
Remove type="text/javascript" like so: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Make sure you reference jquery.min.js before your javascript code that uses jQuery.
Most probably, the above suggestions will not help, but since the problem sounds IE8 specific, I believe it's worth a try doing some trivial things that might solve the problem.
Ok, so the problem is that JS code that I am using will not work in mobile Safari straight away. Everything works fine in desktop safari, chrome, etc.
In mobile safari (iphone 4 and ipod touch 2nd gen tested) the page is completely blank. BUT if you navigate to another page and then click back, it loads fine!
Could someone tell me what on earth is happening here?
Thanks :)
Here is a link to the site
http://osmithcouk.ipage.com/exposed/index.php
and here is JS code
NOTE I HAVE EDITED THE CODE SINCE RYUUTATSUO RECOMMENDED THAT I DO SO but still not working :(
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
And here is the HTML that goes alongside that.
<b><?php include 'headline1.txt'; ?></b>
<div class="slidingDiv">
<?php include 'story1.txt'; ?> Hide story...</div>
And the CSS for slidingDiv and show_hide.
.slidingDiv {
background-color: #FFFFFF;
padding:20px;
margin-top:10px;
}
.show_hide {
display:none;
}
Thank you very much for all your help :)
Actually, the problem is that you have to add query string parameters in order to get it rendered on mobile. For example
script src="js/Common.js" type="text/javascript"
Should be replaced by
script src="js/Common.js?v=1.1" type="text/javascript"
and you can also supply version in comments of your js file so that client can come to know that he has latest version of JS files.
I don't really know if this is the proper protocol but I have fixed it myself so thought I would post my answer!
It really is simple, I just moved the JS to below the .CSS. Apparently Safari has a problem rendering jQuery before CSS :s
use
jQuery(window).load()
instead of
jQuery(document).ready()
I have a written a jquery plug-in which pops-up a div section on hover over an element, and I need to deal with the "select z-index" bug in IE6 (http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx). So, if running in IE6, my code needs to hide some select boxes on the page, when the pop-up div is visible.
My question is: In trying to follow best practices, I would like to avoid detecting the actual browser version and instead do a 'feature-test", to determine whether I am in an affected browser. (http://ejohn.org/blog/future-proofing-javascript-libraries). Is there any way to do this? Or should I just treat this as a special case, detect the browser and handle IE6?
I use this snippet all the time. It's cool because it checks only for IE6. But be aware that if you using any code compression tools that removes HTML comments this won't work.
<!-- THESE LINES ARE NOT NORMAL HTML COMMENTS! They are instructions that only IE6 can understand. -->
<!--[if IE 6]>
<script type="text/javascript">
// redirect to the Default error page passing a custom error code.
window.location = '/your/redirect/page';
</script>
Cheers.
Use the bgiframe plugin to fix the bug without having to hide the select boxes on the page.
In my page there is two links, register and login.
The important one now is register. When I click it, it loads a .tpl file using jquery load function. In this tpl file I include a new js file with <script> ofcourse, and it works perfectly in safari, ff, opera and chrome, but of course, Why should it be working in IE?
So my question is, what should I do to make it working in IE? I think if I put the js in the .tpl file that would solve my problem, but if there is a better solution, I'd like to hear it. No this didn't help, so I guess there is no solution : D
Now I tried it with a simple alert, it worked perfectly.
My problem has changed. If there is a $(document).ready in the JS file the IE "ignores" the whole script, but if there isn't it works perfectly. The thing is that i need that document ready. : D
Thanks.
If the script is "ignored" if there's a $(document)ready then there may be an error in that block of the script and your IE is set to stop running scripts on error.
Try to simplify your issue a bit to try to pin point it. For example, copy the following code into a brand new html file and try it out (NOTE: you'll need to change the src path to the jquery.js file.)
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert('test');
}
</script>
</head>
<body>
</body>
</html>
Does the above work in IE for you or does it get ignored as well (again, after you update the path to the jquery.js file)?
If this works but it doesn't in your scenario, check your page's source in IE for how everything is loaded. The only time I've seen $(document).ready() throw an error is when the jquery.js file is not loaded prior to it or there's a conflict with the $() function...in which case you'll need the noConflict() function.
Make sure that the script tag is not in this form:
<script ... />
IE only accepts:
<script>...</script>
IE considers injection of script tags as a security issue. Change the script tag to:
document.write("<scri" + "pt src=...></scri" + "pt>");
Are you sure that your loaded javascript executes properly in IE. Perhaps it have a javascript quirk that is throwing an error and is making it appear as if it's not loading?
To test this out, non-dynamically including the javascript (include it in the page or similar) and set up a break-point in the script code and step through ot make sure it executes all the way through. Firebug would be an excellent tool for this.
I realise this is grasping at straws, but give it a try perhaps?