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

Hi Brad,

I see how that would work if I were loading a new page each time the user clicked a link. I'm not sure how it would work now that my site is a single page app. Perhaps I'm missing something.

When a user visits my site, the index.html file, all of the CSS and all of the JavaScript are downloaded into the user's browser one time. No other HTML files are ever loaded after that. When the user clicks on a link, the only thing that happens is the text inside the DOM element <article id="#content"></article> gets replaced. If you visit my site, you will see the URL never changes when you click a link. You never leave the index.html page. http://www.socialhope.info/

When you see the other HTML file names in my code, they only hold the content for the DOM element <article id="#content"></article>. So, for example, here is the complete contents of the dare.html file:

<p>Dare to take risks when caring for other people.</p>

That's it. No document id. No HTML header. No HTML body. No list of navigation links. Nothing but the HTML markup that I want JQuery to load into the DOM element <article id="#content"></article>.

Consequently, since the only thing that happens when clicking a link is that the text changes inside a particular DOM element on the index.html page, I have to condition the link color changes based on which content is being loaded into the DOM element. I therefore need a conditional statement:

switch (s) {
case "home.html":
(insert your favorite way of identifying which link to change)
break;
case "care.html":
(insert your favorite way of identifying which link to change)
break;
case "offer.html":
(insert your favorite way of identifying which link to change)
break;
case "turn.html":
(insert your favorite way of identifying which link to change)
break;
case "stop.html":
(insert your favorite way of identifying which link to change)
break;
case "accept.html":
(insert your favorite way of identifying which link to change)
break;
case "dare.html":
(insert your favorite way of identifying which link to change)
break;
}

Thanks,
Kelly


-----Original Message-----
From: WEB400 [mailto:web400-bounces@xxxxxxxxxxxx] On Behalf Of Bradley Stone
Sent: Monday, July 13, 2015 9:39 AM
To: Web Enabling the IBM i (AS/400 and iSeries)
Subject: Re: [WEB400] 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.

--
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.