Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JS degrade nicely plus transition issues - scrolling slides

    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.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    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.

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,478
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Quote Originally Posted by sunfighter View Post
    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;}

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    @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?

  • #6
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    This sounds like a problem with the Slideshow. Double check that you have it implemented correctly and then write the author.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •