Re: A Responsive Single Page App (SPA) with 3 Issues to Consider

Kelly,

You'd be much better off giving all these items a similar class (you can
assign multiple classes to each item with no problem) and running one
jQuery statement instead of one for each of them.

$(".menuItem").css("background-color", "#1f8bbc");

You could even use CSS to set up both classes with different backgrounds
and instead of changing the background color specifically, change the class
of the item. That way the CSS does the heavy lifting and if any other
attributes need to be changed (not or in the future) they're easily added
to the CSS group.

$(".menutItem1").switchClass("menuItem1", "menuItem2");

And the opposite turn it back to how it was.

Brad
www.bvstools.com

On Mon, Jul 13, 2015 at 9:00 AM, Kelly Cookson <KCookson@xxxxxxxxxxxx>
wrote:

Hi Mark,

Issue 3b, why not adjust the class in your menu using jQuery. Give
each menu item an id, and then you can easily adjust the class
whenever the page changes.

That's basically what I'm doing, except I've targeted the links using the
DOM list array rather than id selectors.

Using id selectors is better if the order of the navigation links has the
potential to change. I used the DOM list array because: (1) I intend this
particular site to be very static once it is finished, and (2) I wanted to
have an example of using the DOM list array that I can refer back to in the
future.

Here's how I'm using JQuery to change the color of the links when new page
content is loaded:

switch (s) {
case "home.html":
$(".nav-bar li:nth-child(1) a").css("background-color", "#1f8bbc");
break;
case "care.html":
$(".nav-bar li:nth-child(2) a").css("background-color", "#1f8bbc");
break;
case "offer.html":
$(".nav-bar li:nth-child(3) a").css("background-color", "#1f8bbc");
break;
case "turn.html":
$(".nav-bar li:nth-child(4) a").css("background-color", "#1f8bbc");
break;
case "stop.html":
$(".nav-bar li:nth-child(5) a").css("background-color", "#1f8bbc");
break;
case "accept.html":
$(".nav-bar li:nth-child(6) a").css("background-color", "#1f8bbc");
break;
case "dare.html":
$(".nav-bar li:nth-child(7) a").css("background-color", "#1f8bbc");
break;
}

Here's how it would look if I used id selectors instead:

switch (s) {
case "home.html":
$("#home").css("background-color", "#1f8bbc");
break;
case "care.html":
$("#care").css("background-color", "#1f8bbc");
break;
case "offer.html":
$("#offer").css("background-color", "#1f8bbc");
break;
case "turn.html":
$("#turn").css("background-color", "#1f8bbc");
break;
case "stop.html":
$("#stop").css("background-color", "#1f8bbc");
break;
case "accept.html":
$("#accept").css("background-color", "#1f8bbc");
break;
case "dare.html":
$("#dare").css("background-color", "#1f8bbc");
break;
}

Thanks,
Kelly


--
This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400) mailing
list
To post a message email: WEB400@xxxxxxxxxxxx
To subscribe, unsubscribe, or change list options,
visit: http://lists.midrange.com/mailman/listinfo/web400
or email: WEB400-request@xxxxxxxxxxxx
Before posting, please take a moment to review the archives
at http://archive.midrange.com/web400.