Simply javascript jQuery code working in Chrome, not Firefox, Safari, IE - javascript

I have a simple bit of jQuery code:
<script type="text/javascript">
$(document).ready(function() {
// fade in content.
$('.coming_soon').fadeIn(5000);
});
</script>
Website: Classic Car Gallery Test
It works quite nicely in Chrome with the "coming soon" image fading in nicely. Unfortunately this does not work in Firefox, Safari, and IE. What have I done wrong? Any input, advice or code snippets would be much appreciated.

I think your image is shown before you call fadeIn.
putting some css to hide your image (display:none on .coming_soon) should do the trick

$('.coming_soon').hide().fadeIn(5000);

You have to hide it first :)
display:none would be better solution than .hide() as it happens before JS is loaded
http://jsfiddle.net/Jacek_FH/z3tpS/1/

Jquery is a crossbrowser framework, so should work fine. Make sure your .coming_soon tag is set to display:none; in your css.
e.g.
.coming_soon {display:none;}

Related

jquery window.load() function won't trigger on ios5

I have a simple loading div on my page that fades out when the whole page has been loaded.
I am using a simple code snippet as follows :
$(window).load(function(){
$('#loading').fadeOut(500);
});
this code is working fine in all my desktop browsers and in my mobiles chrome, but it won't work with my ipod 3g's ios5 safari browser.The loader won't go away thus the webpage is useless.
What can I do to solve this problem?
ps: I don't want to use document.ready here because what I'm trying to do happens when the page has been COMPLETELY loaded.
You should do this:
$(function(){
$('#loading').fadeOut(500);
});
So I figured it out by myself that using javascript's native load event will solve the problem :
window.addEventListner('load', function(){
//do the stuff
});
cheers

How to make Dreamweaver AP Div Show/hide functions work in IE9?

I created a page using Dreamweaver and fireworks that uses one AP Div as a button to show and hide two other AP Divs using JavaScript. However, the AP divs are relatively places. It all works fine in google chrome and safari but it doesn't work at all in IE 9. I suspect it's an issue with the JavaScript and IE9. I am new to this, and I know my site is built in a weird way. All help is appreciated.
I also tried using this tutorial:
http://webdesign.about.com/od/dhtml/a/aa101507.htm (Shows and Hides divs with a link)
where the a div is a link, to make it work, but it didn't fix it.
Thanks in Advance
Right, I've scrapped your code, not because it's bad but because I dont understand it :P, I've used something different, this may mean that you have to re-write some code on your page. What my code does it replaces the content with-in the div instead of hiding/showing between 2 divs... Below is a link to a jsfiddle, try running it in IE9 and see if that works.
http://jsfiddle.net/hSMk3/
If it doesn't work tell me in the comment section thingy below :)

jQuery Find() not working in Firefox or IE

I'd like to change the attribute of a Google Calendar select element.
The code I'm trying works in WebKit browsers, but not in FF or IE.
Here's what I have:
$jqry('iframe').contents().find('.calendar-nav').attr('style','display: table; background: blue');
I think it's getting stuck on the find() function. Is my iframe being treated as ajax? Is the issue being caused by mime/content type? Please help with a code example if possible.
Many thanks!
Try this,
Chrome/Firefox:
xml.children[0].childNodes[1].innerHTML
IE8+/Safari:
xml.childNodes[0].childNodes[1].textContent
IE8:
xml.documentElement.childNodes[1].text;
I found a solution that worked for me. It seems Firefox and IE didn't like the vagueness of having only a tag selector: $('iframe'). As soon as I added a class it worked: $('.myiframe'). I'm guessing an ID would work just the same: $('#myiframe'). I was only using the tag selector because I didn't want to modify the plugin I was using, and it was the only iframe on the page -- oh well. Thanks to those who provided input.

JavaScript not working in Mobile Safari

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()

jQuery datepicker not working in IE

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.

Categories

Resources