Suggestions: Static "Slider" for Main HTML Content?

Thanks, Ryan!

It was a great course - I really enjoyed the lessons and have a list of others I'm looking forward to taking soon.

Now, I've made it to the point where I know enough to know that there are a lot of things I don't know enough about yet ;)

That being said... I think I may have been a bit ambitious with the (public) deadline I set for updating my website (this week). Regardless, I'm really happy with what I know so far and all of the improvements I've been able to make as a result. Just a few sticking points left to get past, lol.

Any suggestions for my main content section?

Hi Scott - thanks for your reply!

That's what I was leaning towards... However, if the user has JavaScript disabled, would the site stretch remaining sections down the original page or could it display the first section (and then link to a page with the rest of the content stretched out to keep the original pages a bit cleaner)?

Regardless, I don't necessarily need it to slide (in fact, now that you mention it, the motion may actually be "too busy" due to the amount of text in each section, so simple is probably better).

As far as functionality, I would like for them to have options (not sure what placement will be the most intuitive for my audience): click arrows on either side, click a link in the text, or (for screens tablet size and above) click either the section number or tittle below - but I imagine, after creating the script, I'd have a "link" to each section that could be added to the other places easily, right?

I think the process would be kind of like the "Build an Interactive Website > Including JQuery in our Project" Deep Dive (where we hid and displayed the PayPal buttons for the Smells Like Bakin' website), right? I'm not as familiar with JavaScript, so any additional assistance you'd be willing to provide would be super helpful...

Thanks again, Scott!

You shouldn't worry too much about people browsing without JS enabled. It's pretty rare nowadays. This will explain what I mean.

It'll be a lot like the Paypal button deep dive with jQuery, except you'll be writing an if/else statement to show/hide the right content at the right time. For example, "if slide 3 is displayed, hide the other slides".

Hey Scott... Thanks for the article. That makes more sense now.

Any chance you're around? I'm still having trouble getting this to work... I've tried it bunch of different ways (test for one section being visible, test for two sections being hidden, etc.)...

I've placed arrows in each section and have written the following code to make the right arrow work (when clicked, 2 should go to 3, 3 should go to 1, and 1 should go to 2); however, my code is looping (2 goes to 1, 1 goes to 2). Any thoughts on what I've done wrong or what might be a better way to do this?

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

    $("#one").hide();
$("#three").hide();

$(".right").click(function() {
    if ($("#one").is(':hidden') && $("#three").is(':hidden')) {
        $("#three").show();
        $("#one").hide();
        $("#two").hide();
    } if ($("#three").is(':hidden') && $("#two").is(':hidden')) {
        $("#two").show();
        $("#one").hide();
        $("#three").hide();
    } else {
        $("#one").show();
        $("#three").hide();
        $("#two").hide();}
    });

</script>

1. Your conditional should use if { ... } else if { ... } else { ... }.
2. And if an element is already hidden, you don't need to hide it again in the block with .hide().
3. Finally, it doesn't look like you're closing your click function properly.
4. Can you also post the HTML for the sections?

Ah, "else if"! - I tried "elseif" and got an error - thank you... and you were right about the other tips too. I got it :)

Here's the final code that worked for the five-section pages (I shortened it a bit with checking for visible instead of hidden):

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">

        $("#two").hide();
        $("#three").hide();
        $("#four").hide();
        $("#five").hide();

        $(".right").click(function() {
            if ($("#one").is(':visible')) {
                $("#two").show();
                $("#one").hide();
            } else if ($("#two").is(':visible')) {
                $("#three").show();
                $("#two").hide();
            } else if ($("#three").is(':visible')) {
                $("#four").show();
                $("#three").hide();
            } else if ($("#four").is(':visible')) {
                $("#five").show();
                $("#four").hide();
            } else {
                $("#one").show();
                $("#five").hide();}
        });

        $(".left").click(function() {
            if ($("#one").is(':visible')) {
                $("#five").show();
                $("#one").hide();
            } else if ($("#two").is(':visible')) {
                $("#one").show();
                $("#two").hide();
            } else if ($("#three").is(':visible')) {
                $("#two").show();
                $("#three").hide();
            } else if ($("#four").is(':visible')) {
                $("#three").show();
                $("#four").hide();
            } else {
                $("#four").show();
                $("#five").hide();}
        });

    </script>

Now, I'm initializing the content on the page to display a particular slide (with the initial hide commands)... but how to I link to the other sections (i.e. coming directly to the page displays section two; but, coming to the page from another page displays section three)?

To be more clear, www.site.com/page.html shows section two and hides the other sections. What would be the link to show section one and hide the other sections, etc?

Thanks again, Scott!

You should be able to use window.location.hash to load a specific slide (I think), but you'll need to link to the page url with a special hash attached. For example, if you want the page to show slide 3 instead of the default slide when the page loads, you would have the url be site.com/index.html#slide3 and then your JS would be:

if (window.location.hash === '#slide2') {
    ...do something
} else if ...

Make sense?

Thanks, Scott,

I tried that a few different ways, but it doesn't seem to be doing anything (the "slide" part still works, just only when I click on the arrows, not the links)... Here's the additional code I was trying, maybe I missed a step?

if (window.location.hash === '#two') {
        $("#one").hide();
        $("#three").hide();
        $("#four").hide();
        $("#five").hide();
    } else if (window.location.hash === '#three') {
        $("#one").hide();
        $("#two").hide();
        $("#four").hide();
        $("#five").hide();
    } else if (window.location.hash === '#four') {
        $("#one").hide();
        $("#two").hide();
        $("#three").hide();
        $("#five").hide();
    } else if (window.location.hash === '#five') {
        $("#one").hide();
        $("#two").hide();
        $("#three").hide();
        $("#four").hide();
        $("#right").hide();
    } else {
        $("#two").hide();
        $("#three").hide();
        $("#four").hide();
        $("#five").hide();
        $("#left").hide();
        $("#unique") == $("#right");
    }

Regardless of the code above, it looks like my anchor links aren't bringing up the sections indicated... here's how I did them:

        <a name="winh"></a><div id="one" title="What is WINH?" class="slide">
            <h3>What is <abbr title="When I Need Help">WINH</abbr>?</h3>
            <p>Text</p>
            <p>Text</p>
            <p class="hook">Text  <a href="#unique">Click the right arrow button above for the answers to these questions and more.</a></p>
<a name="unique"></a><div id="two" title="WINH is Unique" class="slide">
           <h3>Unique</h3>
           <p>Text</p>
            <p>Text</p>
            <p class="hook">Text <a href="#diplomatic">Click the right arrow button above to keep reading.</a></p>
        </div>

Thanks again for your help!

I thought you wanted to be able to land on the page from another page and have a certain slide show up. I didn't know you just wanted the links to function the same as the arrows. In that case, you'll just use the same click() method as with the arrow.

$("#two-button").click(function() {
    $("#two").show();
    $("#one, #three, #four, #five").hide();
});

Does that help?