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

Hi Brad,

Ah, I think I see what you're suggesting now. I'm still new to this and simply didn't understand what you were suggesting.

I'm going to play around with your suggestion as soon as I get a chance. It would definitely make life easier. It would allow the navigation links to change in the HTML file with no change needed in the JavaScript.

Thanks for the tip!

Thanks,
Kelly


-----Original Message-----
From: WEB400 [mailto:web400-bounces@xxxxxxxxxxxx] On Behalf Of Bradley Stone
Sent: Monday, July 13, 2015 12:37 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

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.

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