I am using this jquery script to create a small slideshow between .jpg's the problem is it only works on firefox, not safari , not chrome , not opera... any ideas?
<script type='text/javascript'>
$(document).ready(function() {
slideShow();
});
function slideShow(){
var current = $('#animation .show');
var next = current.next() .length ? current.next() : current.parent() .children(':first');
current.hide() .removeClass('show');
next.fadeIn() .addClass('show');
setTimeout(slideShow, 2000);
}
</script>
I tried to reproduce your code. Created a simple HTML page:
<div id="animation">
<img class="show" src="http://www.ewatching.nl/wp-content/uploads/2010/10/google_logo_3.jpg" />
<img src="http://thenextweb.com/nl/files/2010/01/google.jpg" />
<img src="http://www.descherpepen.nl/wp-content/uploads/2010/06/google.jpg" />
<img src="http://images.retecool.com/uploads/reet-google_chrome.jpg" />
</div>
with some css (not ideal, but it does the trick)
<style type="text/css">
#animation > img
{
display:none;
visibility:hidden;
}
.show
{
display: block !important;
visibility:visible !important;
}
</style>
Then I use your script to create the slideshow. It works in IE, Opera, Firefox and Safari.
The problem isn't your script. Perhaps your html and css? Can you post those?
Jquery was designed to be cross browser, making it a lot simpler for developers!
I see that the script is probably internal on your page, have you tried clearing the caches of other browsers to make sure any dependant scripts are loaded properly?
Also do you have any browser specific code? Along the lines of, if browser = IE, use some of this code. This can conflict with other pieces of code on your page.
Other than that, make sure you are of course running the same file and not an older version (I've done this before!)
Is it something to do with the spaces in your statements? For example, instead of
current.hide() .removeClass('show');
perhaps try
current.hide().removeClass('show');
And so on for your code? Just a thought!
Related
I am writing a web-app for a mobile device, what I am doing is to change dynamically the css and store that option for the user, I have been looking all night long, googling methods and way to achieve my objective but nothing worked for me.
This is the type of button that I am using, and here comes up another problem, because I wasn't able to Check and Uncheck the checkbox.
HTML
<input id="#checkbox" type="checkbox" checked onclick="swapStyleSheet()">
The only thing that worked fine for me is this:
<head>
<link id="pagestyle" rel="stylesheet" type ="text/css" href="default.css">
<script type="text/javascript">
function swapStyleSheet(sheet) {
document.getElementById('pagestyle').setAttribute('href',sheet);
}
</script>
</head>
and in the body
<input id="#checkbox" type="checkbox" checked onclick="swapStyleSheet("Second.css")">
But this is not dynamically because once the user taps the button is not able to go back and I am not sure that works on a mobile device
Any suggestion how to proceed?
You forgot the quotes around Second.css
onclick="swapStyleSheet('Second.css')"
Without quotes, it's a syntax error (but your console is already telling you this).
Here there is an exemptional link that shows step by step how to how to switch two CSS sheet-file
But for the type of input, I am not sure how you can do
I would not recommend to change your stylesheets like this.
Here are my reasons why:
Loading another file will probably cause a "hard" transition between your two styles. You writing a mobile web-app, so imagine someone with unstable internet connection loads your application. Your web-app will be unstyled for a couple of seconds.
Browser needs to load another file (if you want to switch back, it will probably load the original file again, depending on cache settings)
Can be solved much easier with .scss for example (but also with plain .css). I have got an example for you down below. You can even add transitions, so your changes are much more pleasant.
function rotateStyle () {
document.body.id = document.body.id == 'alternate' ? '' : 'alternate';
}
body {
background-color: #FFFFFF;
color: #000000;
/* you could also add transitions */
transition: background-color 2s;
}
body#alternate {
background-color: #000000;
color: #FFFFFF;
}
<body>
<!-- your content -->
<button onclick="rotateStyle()">Change your style</button>
</body>
Not quite sure how to define this issue. I just started working with jQuery and Javascript and pretty much everything is fine, except for when the page initially loads. I have the page fade in, but it looks like all the CSS isn't being applied until the jQuery loads.
I tried this script in my Head tag, but it doesn't work. Help?
<script type="text/javascript">
$(function(){
$('#box-container').hide();
});
$(window).load(function() {
$("#box-container").show();
});
</script>
Whoops: site: http://www.elijahish.com
You should use a Javascript console like Chrome Console or Firefox Firebug to debug your code.
First, you are placing your script block which requires jQuery before jQuery is defined:
<head>
<script type="text/javascript">
$(function(){
$('#box-container').hide();
});
$(window).load(function() {
$("#box-container").show();
});
</script>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
...
So you would see the following (in Chrome Console):
ReferenceError: $ is not defined
$(function(){
Second, you seem to be trying to run a script which is accessing (in the first block) an element (#box-container) before it has been seen in the DOM itself. You could use jQuery.ready on that first block, but that could be messy. I would instead suggest you place this right after <div id="box-container"> is defined:
<body ...>
<div id="box-container" ...>
...
</div>
<script type="text/javascript">
(function($){
$('#box-container').hide();
$(window).load(function() {
$("#box-container").show();
});
})(jQuery);
</script>
Demo: http://jsfiddle.net/5JpVB/4 (I use a setTimeout for dramatic effect.)
Or put it directly after the <div ...> is opened:
<div id="box-container">
<script type="text/javascript">
(function($){
$('#box-container').hide();
$(window).load(function() {
setTimeout(function(){
$("#box-container").show();
}, 2000);
});
})(jQuery);
</script>
Box Container shown on window.onload.
</div>
http://jsfiddle.net/5JpVB/5/
And the coup de grâce (document.write nothwithstanding):
<head>
...
<script>
document.write('<style>#box-container{display: none;}</style>');
</script>
...
</head>
http://jsfiddle.net/5JpVB/2/
Yes, that is a script that "puts" the style display: none into the header, which "neatly" bypasses some of the conjecture that's been thrown around (there's downsides for each method, more or less). There's an elegance to this method (except, of course, using document.write, which is icky).
And yet another way, using the CSS display: none method:
<head>
...
<style>
#box-container {
display: none;
}
</style>
...
<div id="box-container">
<noscript><style>#box-container{display: block;}</style></noscript>
Box Container shown on window.onload.
</div>
http://jsfiddle.net/5JpVB/3/ (Just the Result page, disable Javascript to see it work.)
You are getting a case of FOUC : http://www.bluerobot.com/web/css/fouc.asp/
And, years later we are still plauged! http://paulirish.com/2009/avoiding-the-fouc-v3/
A variety of solutions are included on this link.
You could also set the style of your content to be hidden before running the javascript that shows the content. Jared shows you a nice way to do this.
Might I make a suggestion that you use combination of CSS and JavaScript, rather than one or the other. I had the same issue using jQueryUI on a site I'm building and found that a lot of these solutions out there would make the contact unavailable to those without JavaScript.
So here is what I did:
CSS:
.flash #wrapper {
display: none;
}
What this does is set the <div id="wrapper"> to hidden only if it is a decendent of the class flash. So to keep it from being hidden from those with out javascript I add the class flash to the <html> element. So it can only be physically hidden if the end user has JavaScript enabled, otherwise they'll at least have access via the unstylized content.
JavaScript:
$('html').addClass('flash');
$(doctument).ready(function() {
/* Do all your stuff */
/* When done show the wrapper with the content stylized */
$(#wrapper).show();
});
Depending on your pages time to load you might get a little flash, but it wont be a flash of unstylized content, which is rather ugly. In my case I had a jQueryUI menu item that would flash the normal <ul> element first then the menuUI item, and my <div> elements are resized with jQuery so that each <div> column is equal hight, but it would flash the different heights first. This fixed it while still giving accessability to none Script enabled browsers.
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() {
...
});
I've added a flash gallery to my site and the required script is causing the background image to shift.
You can see the page here: http://www.arbitersoflight.net/media/screens.html
The script in question is the "swfobject.js". I've determined this by adding/removing the
<script type="text/javascript" src="/scripts/flashgallery/swfobject.js"></script>
line to my site (which is required to run the gallery). Obviously, due to the layout of my site, I cannot having the background being moved...so this is very annoying. Unfortunately I know next to nothing about coding so I lack the skills to find the problem myself. I would really appreciate any help you guys can give me here.
I'm not sure why this is happening, but if you add the following CSS to the following tags it will fix it:
#header { position:relative; top:15px; }
.scroll-pane { position:relative; top:-15px; }
EDIT:
Another reason this might be happening is from white-space in this script tag:
<script type="text/javascript" id="sourcecode">
$(function()
{
$('.scroll-pane').jScrollPane();
});
</script>
A possible way to fix this would be to save that code to a file and include it as:
<script type="text/javascript" src="/scripts/jscrollpane/jquery.jscrollpane.init.js"></script>
I was animating an a element in jQuery using jQuery 1.3.2 and jQuery color plugin. I was animating the 'color' and 'backgroundColor' properties at the same time. In IE8 and FF it worked just fine. Chrome animated the mousehover color and then stopped. The background stayed the same and the mouseout did not undo the effect as it should have.
Chrome's developer tools said something about something being undefined. I know that I'm being somewhat vague here, perhaps this is a known issue?
EDIT - Code(, finally!):
<script>
$(document).ready(function(event){
$(".nav a").hover(function(event){
$(this).animate({"color":"#FFFFFF", "backgroundColor":"#3AB7FF"}, 900);
},function(event){
$(this).animate({"color":"#98DCFF","backgroundColor":"#FFFFFF"}, 900);
});
});
</script>
EDIT:
#Bernhard Hofmann - What do you mean "issues with the properties you've chosen"? Please elaborate.
It would seem that Chrome has a few issues with the properties you've chosen. I managed to get the animation working using mouse enter and leave events in Chrome. Here's the script and mark-up for those wanting to fiddle and have a go as well.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(event){
$(".nav a").
mouseenter(function(){$(this).animate({fontSize:"2em"}, 900);}).
mouseleave(function(){$(this).animate({fontSize:"1em"}, 900);});
/*
$(".nav a").hover(function(){
$(this).animate({"color":"#FFFFFF", "backgroundColor":"#3AB7FF"}, 900);
},function(){
$(this).animate({"color":"#98DCFF","backgroundColor":"#FFFFFF"}, 900);
});
*/
});
</script>
</head>
<body>
<div class="nav" style="color:#000;background:#cfc;padding:2em 2em 2em 2em;margin:2em 2em 2em 2em;">
StackOverflow
</div>
</body>
</html>
This seems to be a bug with the color animation plugin with webkit browsers with their rgba(r,g,b,opacity) format for background color style.
The fix is simple, just add these lines in the appropriate place inside the getRGB(color) function of the plugin.
// Look for rgba(num,num,num,num)
if (result = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
EDIT: Here is a working version with the fix http://jsbin.com/ekoli
Can you provide some HTML? I tried out with Google Chrome 4 BETA on Mac OS and Chrome 3 on XP and it worked as intended.
The HTML I used is as follows
<head>
<!-- These are my local jquery files. Use yours or the ones from Google -->
<script src="/osr/javascript/dev/librarys/jquery.js" type="text/javascript"></script>
<script src="/osr/javascript/dev/librarys/jquery-ui/js/jquery-ui.js" type="text/javascript"></script>
<script>
$(document).ready(function(event){
$(".nav a").hover(function(event){
$(this).animate({"color":"#FFFFFF", "backgroundColor":"#3AB7FF"}, 900);
},function(event){
$(this).animate({"color":"#98DCFF","backgroundColor":"#FFFFFF"}, 900);
});
});
</script>
</head>
<body>
<div class="nav">
<a>aighosvaovhaovuho</a>
</div>
</body>
I have the same issue, using jQuery.animate
Works fine in FF, IE 7 & 8
The code..
$(document).ready(function(){
jQuery.noConflict();
jQuery('.boxgrid.caption').hover(function(){
var s = jQuery(".cover", this).stop();
s.animate({width: "50%"},{queue:false,duration:300});
jQuery(".cover", this).stop().animate({top: "180px"},{queue:false,duration:300});
}, function() {
jQuery(".cover", this).stop().animate({top:'260px'},{queue:false,duration:300});
});
});
Produces:
ERROR : (from chrome dev tool) :
Uncaught TypeError: Cannot set
property 'width' of undefined