|
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,"#1f8bbc");
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",
break;"#1f8bbc");
case "care.html":
$(".nav-bar li:nth-child(2) a").css("background-color",
break;"#1f8bbc");
case "offer.html":
$(".nav-bar li:nth-child(3) a").css("background-color",
break;"#1f8bbc");
case "turn.html":
$(".nav-bar li:nth-child(4) a").css("background-color",
break;"#1f8bbc");
case "stop.html":
$(".nav-bar li:nth-child(5) a").css("background-color",
break;"#1f8bbc");
case "accept.html":
$(".nav-bar li:nth-child(6) a").css("background-color",
break;"#1f8bbc");
case "dare.html":
$(".nav-bar li:nth-child(7) a").css("background-color",
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.
As an Amazon Associate we earn from qualifying purchases.
This mailing list archive is Copyright 1997-2024 by midrange.com and David Gibbs as a compilation work. Use of the archive is restricted to research of a business or technical nature. Any other uses are prohibited. Full details are available on our policy page. If you have questions about this, please contact [javascript protected email address].
Operating expenses for this site are earned using the Amazon Associate program and Google Adsense.