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

[Bradley Stone <bvstone@xxxxxxxxx>]

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.