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

Now remove the javascript call in the href attribute of the link that's
running JavaScript and let jQuery do all the work. :)

You can even get rid of the anchor tags.. like this:
<li class="menuItem" data-id="home.html">Home</li>

Javascript:

$(".menuItem").click(function (event) {
var toLoad = $(event.target).attr('data-id'); //$(this).attr('data-id')
may work instead, but I had one app where it didn't and this did
$(".menuItem").removeClass("clickedItem").addClass("notClickedItem");
$(this).removeClass("notClickedItem").addClass("clickedItem");
c_html(toLoad);
});


On Mon, Jul 13, 2015 at 4:55 PM, Kelly Cookson <KCookson@xxxxxxxxxxxx>
wrote:

Hi Brad and Mark,

After I finally understood what you were saying about changing the color
of links in the navigation bar, here is what I'm doing now.

In the index.html file:
<ul class="clearfix nav-bar">
<li><a class="menuItem"
href="javascript:c_html('home.html');">Home</a></li>
<li><a class="menuItem"
href="javascript:c_html('care.html');">Care</a></li>
<li><a class="menuItem"
href="javascript:c_html('offer.html');">Offer</a></li>
<li><a class="menuItem"
href="javascript:c_html('turn.html');">Turn</a></li>
<li><a class="menuItem"
href="javascript:c_html('stop.html');">Stop</a></li>
<li><a class="menuItem"
href="javascript:c_html('accept.html');">Accept</a></li>
<li><a class="menuItem"
href="javascript:c_html('dare.html');">Dare</a></li>
</ul>

In the CSS style sheet:
.notClickedItem {
background-color: rgba(0,0,0,0.2);
}
.clickedItem {
background-color: #1f8bbc;
}

In the JavaScript script:
$(".menuItem").click(function () {
$(".menuItem").removeClass("clickedItem").addClass("notClickedItem");
$(this).removeClass("notClickedItem").addClass("clickedItem");
});

I could not get the switchClass method to work. I think it might have
something to do with switchClass belonging to JQueryUI, whereas I'm only
using JQuery. I don't know enough about JQuery and JQueryUI to be certain
about that. Nevertheless, I was able to use the addClass and removeClass
methods to achieve the same outcome.

This is a much more elegant and maintainable solution than what I had. Now
I can switch the order of the links around, add links, delete links, and
have everything work without changing the JavaScript.

Thanks to both of you for the tip.

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.