Hi Mark,
I think maybe you were saying something similar to what Brad also said. I didn't get what you two were saying at first because I'm still new to this. (I've written about 10 lines of JQuery in my life, having never had a class in either JavaScript or JQuery. I'm cutting my teeth with this site.)
I'm going to play around with your and Brad's tips first chance I get.
Thanks,
Kelly
-----Original Message-----
From: WEB400 [mailto:web400-bounces@xxxxxxxxxxxx] On Behalf Of Mark Murphy/STAR BASE Consulting Inc.
Sent: Monday, July 13, 2015 3:08 PM
To: Web Enabling the IBM i (AS/400 and iSeries)
Subject: Re: [WEB400] A Responsive Single Page App (SPA) with 3 Issues to Consider
My point was, that since jQuery is loading something into your DOM, that implies some javascript is running, and that javascript knows what is being loaded. What is stopping that javascript from setting the classes in your menu elements? The functions to do that are part of jQuery as well. I am saying this blind though since the firewall here at work prevents me from actually seeing your code. Maybe I will look at it when I get home. If the power is on.
Mark Murphy
STAR BASE Consulting, Inc.
mmurphy@xxxxxxxxxxxxxxx
-----Kelly Cookson <KCookson@xxxxxxxxxxxx> wrote: -----
To: "Web Enabling the IBM i (AS/400 and iSeries)" <web400@xxxxxxxxxxxx>
From: Kelly Cookson <KCookson@xxxxxxxxxxxx>
Date: 07/13/2015 12:57PM
Subject: Re: [WEB400] 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.
--
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.
midrange.com
