JS degrade nicely plus transition issues - scrolling slides

barricades · 09-08-2012, 08:05 PM

I'm trying to create a javscript scroller following the example at: http://www.deadmarshes.com/Blog/jQue...Crossfade.html

Unfortunately this version doesn't show anything when javascript is disabled but I'd like it to at least show the first image and caption and then just not move.

I stuck together a fiddle

http://jsfiddle.net/Lew7H/8/

Does anyone know how to make the initial transition not happen and just have the first 'slide' there?

Also I adapted this slightly to show 4 slides instead of 3. I changed 3 to 4 in two places in the JS (where it's keeping tally) and that seemed to work alright but now in FF when you click on a few of the numbers to change slides a few times then let it go back to normal running, the indicator which is meant to show which slide you're on starts appearing all over the place. The timing of the transitions also goes weird. It's like clicking a couple of times means the transitions and the pointers are going a couple of times. IE there's more than one bit of JS moving the slides and pointers, resulting in strangly timed transitions and more than one pointer. Could that be possible?

I assume that's to do with the way it's being counted in the JS but I haven't a clue what it's doing to be honest.

Any help would be appreciated.

sunfighter · 09-09-2012, 06:13 PM

Javascript can not tell you if js is off, because it's not working.

What you want to do is show the static image you want seen with js off. Then in javascript turn the image off and run your scroller.

barricades · 09-10-2012, 11:03 AM

Hey there, thanks for the reply. Yeah, I've since figured that bit out but I'm still stuck with how when you click one of the indicators then when transitions resume they aren't at regular intervals and there is often more than one indicator active at the same time.

any ideas?

VIPStephan · 09-10-2012, 11:25 AM

Quote:

Originally Posted by sunfighter

Javascript can not tell you if js is off, because it's not working.

What you want to do is show the static image you want seen with js off. Then in javascript turn the image off and run your scroller.

You’re close with your thinking but not quite there. The actual problem is that the HTML is styled (through CSS) with the assumption that JS is present/active even though it might be not. For example, in order to hide content initially which is faded in with JS later on, people apply display: none to that content without realizing that it will always be hidden and never fade in when JS is not present.

The ultimate solution to this is to make JavaScript assign a class to an element in the document and only hide contents if that class is present. If JS is not available the class won’t be added and the content won’t be hidden by default. Makes sense?

I’m usually adding a class to the body and use that as CSS selector:

Code:

document.getElementsByTagName('body')[0].className = 'jsenabled';

// or in jQuery
$('body').addClass('jsenabled');

Code:

…
<body>
<div id="example"></div>
</body>

Code:

#example {…}
.jsenabled #example {display: none;}

sunfighter · 09-10-2012, 06:38 PM

@VIPStephan, Your way is probably the best, but I don't understand it. Especially the last bit of code. Could you give me an example as a single peace of code?

I don't do this any more because only 2% of USA browsers have js turned off. But back in the day I did something like this:

Code:

<body>
<div id="js">You need javascript enabled to use this site.</div>
<script type="text/javascript">
document.getElementById('js').style.display = 'none';
</script>
</body>

Or if I had a page that didn't need js :

Code:

<body>
<div id="js">You need javascript enabled to use this site.</div>
<script type="text/javascript">
var text = document.getElementById('js').innerHTML;
if(text == 'You need javascript enabled to use this site.')
	window.location="http://www.google.com";
</script>
</body>

Your thoughts?

barricades · 09-11-2012, 12:45 AM

Hey guys, thanks for all the help so far. I think I've got the JS not appearing thing sorted. But I'm still stuck with the problem that when you click a few times on the 1, 2, 3 or 4 indicator links, just clicking any of them begins the problems.

The transition is no longer the 10secs it's meant to be, sometimes it seems like 10secs but mostly it's much quicker. Also the 1, 2, 3 indicators just seem to light up randomly. It's like clicking on one of them has started a cycle again without stopping the previous one.

I hope that makes sense !

Thanks

sunfighter · 09-12-2012, 11:21 PM

This sounds like a problem with the Slideshow. Double check that you have it implemented correctly and then write the author.