Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Craig Watson
Craig Watson
27,930 Points

A little jQuery help needed!

Hi everyone!

Im trying to toggle these items with bootstrap buttons and collapse.... been on this a while and mind has gone completely blank...

link

I want to have the Desktop Visible on page load and be able to toggle nicely through each version should the respective button be clicked(active) and the previous items toggle away so only showing on device at a time.

I will leave my workspaces open but if you read this and its unavailable leave a comment and ill re load them !!

Any help is much appreciated as and when its finished if you like it your welcome to the code and images for your own use just ask!!

Craig

Craig Watson
Craig Watson
27,930 Points

Should mention this has only been tested in chrome .... No IE / Firefox prefixing is on yet.......

2 Answers

Jeff Everhart
Jeff Everhart
21,732 Points

Cool! I'm glad you figured it out. Instead of passing that anonymous function to the on click event , why not write one custom function that you can pass the other rows and buttons to as parameters, or maybe even two functions that deal with classes or sliding.

Something like this: 

var tablet_row = $(#tablet-row);
var desktop_row = $(#desktop-row);
var mobile_row = $(#mobile-row);

var tablet_button = $(#tablet-button);
var desktop_button = $(#desktop-button);
var mobile_button = $(#mobile-button);

function classUI ( classAdd, classRemove1, classRemove2){
   classRemove2.removeClass( 'active' );
   classRemove1.removeClass( 'active' );
   classAdd.addClass('active');
}

function slideUI(slideUp1, slideUp2, slideDown0){
   slideUp1.slideUp( 'slow' );
    slideUp2.slideUp( 'slow' );
    slideDown0.delay(800).slideDown( 'slow' );

}

$('#desktop-button').click(function(){

slideUI(param1, param2, param3);
classUI(param1, param2, param3);

}

This would make it a bit more manageable. You could also create one function, but you'd have to pass it 6 parameters, which you could also do.

Jeff Everhart
Jeff Everhart
21,732 Points
Jeff Everhart
Jeff Everhart
21,732 Points

Tried to help out but the workspace was unavailable. Have you tried either toggleClass() or hide()/show()?

You could create a CSS class called 'hidden' and toggle that class as you click through the buttons. CSS Visbility jQuery toggleClass method

The hide and show methods could also be viable alternatives.

Let me know if you get the workspace back up.

Regards, JE

Craig Watson
Craig Watson
27,930 Points

Hi Jeff :)

Sorry about that! Workspaces seems only visible if i have the code open on my end..

I have however come up with a solution this morning after a fresh look and strong coffee..

Id be very grateful if you would take a look, as the site is also still being built and I have just applied some but not all of the style in relation to the question above..

Below is the code used to toggle the buttons active class and show/hide the respected demo..

// Prevent window from scrolling when dummy content comes to an end for good user experience
$('iframe').bind('mousewheel DOMMouseScroll', function(e) {
    var scrollTo = null;

    if (e.type == 'mousewheel') {
        scrollTo = (e.originalEvent.wheelDelta * -1);
    }
    else if (e.type == 'DOMMouseScroll') {
        scrollTo = 40 * e.originalEvent.detail;
    }

    if (scrollTo) {
        e.preventDefault();
        $(this).scrollTop(scrollTo + $(this).scrollTop());
    }
});

//Demo Sites Toggle Buttons and Display

//Display Desktop on page load
$('#desktop-row').addClass( 'show-me' );
//on click hide current and show selected
$('#tablet-button').click(function(){
    $('#mobile-row').slideUp( 'slow' );
    $('#desktop-row').slideUp( 'slow' );
    $('#desktop-button').removeClass( 'active' );
    $('#mobile-button').removeClass( 'active' );
    $('#tablet-row').delay(800).slideDown( 'slow' );
    $('#tablet-button').addClass('active');
});
$('#desktop-button').click(function(){
    $('#mobile-row').slideUp( 'slow' );
    $('#tablet-row').slideUp( 'slow' );
    $('#mobile-button').removeClass( 'active' );
    $('#tablet-button').removeClass( 'active' );
    $('#desktop-row').delay(800).slideDown( 'slow' );
    $('#desktop-button').addClass('active');
});
$('#mobile-button').click(function(){
    $('#tablet-row').slideUp( 'slow' );
    $('#desktop-row').slideUp( 'slow' );
    $('#tablet-button').removeClass( 'active' );
    $('#desktop-button').removeClass( 'active' );
    $('#mobile-row').delay(800).slideDown( 'slow' );
    $('#mobile-button').addClass('active');
});

VERY code heavy and any advice on reducing this if there is a way would be much appreciated :)

Please let me know what you think even of the Home Page so far, it is still early and not all responsive styles are finished nor is the footer close to completion but im sure a fresh pair of eyes cant harm. The site is built on a custom bootstrap framework.

Thanks for your response !

Craig