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

Kelly,

What I was doing was showing you how to change 10 lines of code into 1 (or
2) and making it more abstract.

Instead of changing the background color, change the class of the item and
let the CSS handle the background color and any other attributes that may
change in the future. The page doesn't need to be reloaded for this.

And you can use $(this) on the click function instead of using a large case
statement for each of the items. That means when you add or remove menu
items, your JS code stays the same.

Something like:

//when a menu item is clicked
$(".menuItem").click(function() {

//first set all menu items to notClickedItem
$(".menItem").attr("class","notClickedItem");

//next set the clicked item to a class of clickedItem
$(this).switchClass("notClickedItem", "clickedItem");
});

I see your code and I see it as "the hard way". I've done a lot of jQuery
and SPAs and just offering my advice from experience. That's all. I don't
like mixing a lot of tradition JS and hardcoding names when classes and IDs
can (and should be used) along with jQuery functions.

There are probably even better ways that this.

Using CSS classes instead of attributes (like background-color) is like
using Job Descriptions for user ID settings instead of trying to set each
user with their own settings. :) Change the Job Description, not each
User ID.

Check out our responsive/mobile site at http://m.bvstools.com. It's an
SPA site and uses both static and dynamic requests (using RPG CGI or e-RPG
as I call it) to update the page.

The server behind it is an IBM i and there are neat functions that are put
together are the sections where you can request a quote or invoice, or
request temporary keys.

We dynamically alter the page by adding new lines if you want more than one
piece of software (ie, clicking the "add line" button). Lots of cool
jQuery and CGI programming involved.

Brad
www.bvstools.com


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

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.