3

EDIT: See this code pen for an example of what's wrong: http://codepen.io/sdejaneiro/pen/MKZeov?editors=1010

Also, please note I am not trying to target mobile devices with my code. I am trying to target desktop computer browser screen sizes. Creating code to target mobile devices will not resolve the issue I'm having.

Click on any of the tabs and then shrink the screen. You will see that the tab selected no longer has the blue background color to show it's selected. That same thing happens if you click a tab in the smaller screen view and expand the screen--you will not see the tab highlighted anymore. That is the problem I'm trying to solve.

Yes, I know this is a very odd idea--going from a ul list tab setup to a div accordion setup is not a recommended approach. However, this is not my call to make. Then again, maybe what I am asking is not possible considering this scenario? If that is the case then I am fine with that.

This is what I have so far but it doesn't maintain the active state from desktop to mobile and mobile to desktop:

 (function($) {

  $(document).ready(function() {
    // tabbed content on product detail page
    if ($('.tabs').length) {
      $('.tabs li').each(function(i, n) {
        $(n).bind('click', function(e) {
          e.preventDefault();
          $('.tabs .active').removeClass('active');
          $($('.tabs li')[i]).addClass('active');

          //call to toggleTab function with class of current .tab li item

        });
      });
    }

    //mobile SDS tab navigation
    $('.tab-link-wrap').each(function(i, n) {
      $(n).bind('click', function(e) {
        e.preventDefault();
        $('.activeLink').removeClass('activeLink');
        $($('.tab-link-wrap')[i]).addClass('activeLink');

        //call to toggleTab function with class of current tab-link-wrap div
      });
    });
  });

  //Toggle the active state of the tabs from mobile -> desktop and desktop->mobile
  function toggleTab(num) {
    $(".tab-link-wrap").find("#" + num).toggleClass("activeLink");
    $(".tabs").find("#" + num).toggleClass("active");
  }

}(jQuery));
Dejsa Cocan
  • 1,418
  • 2
  • 16
  • 45
  • Basically, at screen width of 630px, the mobile CSS is targeted. That is what I mean. – Dejsa Cocan Feb 10 '16 at 16:56
  • ahh, you explained it with one line of text -- you need to use css media queries for that, although it can also be done by js code -- http://www.w3schools.com/cssref/css3_pr_mediaquery.asp -- https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ – Tasos Feb 10 '16 at 17:16
  • Using just media queries won't work. The mobile CSS can be triggered if the browser on a desktop is made small enough. I will post a codepen link with an example of what I'm doing so it will be easier to see what's wrong. – Dejsa Cocan Feb 10 '16 at 17:34
  • if you think css media queries are not for you then as i mentioned in my last comment you cant also check by code -- http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery – Tasos Feb 10 '16 at 17:49
  • Targeting mobile devices isn't the issue. The issue is targeting a CSS class for 2 different sets of HTML elements. – Dejsa Cocan Feb 10 '16 at 18:07
  • I added a link to a codepen example. Please view it to see what the issue is I'm trying to resolve. You will see that the blue background color of a selected tab does not carry over when shrinking or expanding the screen. – Dejsa Cocan Feb 10 '16 at 18:16
  • ok so you only need to know if a mobile device is in use and change the css -- i added some code in your pen to check for that -- http://codepen.io/anon/pen/Qyzdwy?editors=0010 -- all you need then (if mobile) is change the css link to the mobile css -- that would be the easiest way to achieve what you want -- swap the css file, so have 2, 1 general one and one for devices -- check here on how to swap css dynamically -- http://stackoverflow.com/questions/19844545/replacing-css-file-on-the-fly-and-apply-the-new-style-to-the-page – Tasos Feb 10 '16 at 18:39
  • That's still not what I need, though. I am not trying to resolve an issue that relates to mobile devices. I am trying to resolve the issue based on screen sizes in a desktop computer browser. Essentially, it's a responsive problem not a mobile one. I do not need to target any mobile devices like android or iPhone or anything like that. – Dejsa Cocan Feb 10 '16 at 18:48
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/103135/discussion-between-gallifrey1212-and-tasos). – Dejsa Cocan Feb 10 '16 at 18:50
  • cant chat, i understand now what you need -- let me fix your code and post a pen – Tasos Feb 10 '16 at 18:51
  • 1
    all done buddy -- check the demo -- wasnt sure if the active class went to the (li) or the(a) -- http://codepen.io/anon/pen/MKZJxQ?editors=1010 – Tasos Feb 10 '16 at 19:23
  • 1
    @Tasos Thank you! That is what I was trying to achieve. Sorry it was such a confusing request--this wasn't how I wanted to set things up for this task but I had no say in the matter. – Dejsa Cocan Feb 10 '16 at 19:33
  • no probs, i didnt realize you had 2 sets of tabs, meaning different markup hence the confusion. ill put it as answer – Tasos Feb 10 '16 at 19:39

2 Answers2

3

You can add a data attribute data-id="1" , 2 , 3 to each menu option, tab so you know which one was clicked and make changes to both menus

e.g

<li><a href="#" data-id="1" class="1 tab-link">Tab A</a></li>

<div data-id="1" class="1 tab-link-wrap">

code

$(".tab-link, .tab-link-wrap").on("click", function() { 

var id = $(this).attr("data-id");

$('.tabs .active').removeClass('active');

$('.tab-link[data-id="'+id+'"]').closest("li").addClass('active');

$('.activeLink').removeClass('activeLink');

$('.tab-link-wrap[data-id="'+id+'"]').addClass('activeLink');

})

Demo

Tasos
  • 5,263
  • 1
  • 13
  • 26
0

They are different elements, so you have to add classes for active links in both cases:

$('.tabs .active').removeClass('active');
$('.tab-link-wrap').removeClass('activeLink');
$($('.tab-link-wrap')[i]).addClass('activeLink');
$($('.tabs li')[i]).addClass('active');

Full code (http://codepen.io/anon/pen/Qyzdmd?editors=1010):

(function($) {

  $(document).ready(function() {
    // tabbed content on product detail page
    if ($('.tabs').length) {
      $('.tabs li').each(function(i, n) {
        $(n).bind('click', function(e) {
          e.preventDefault();
          $('.tabs .active').removeClass('active');
          $('.tab-link-wrap').removeClass('activeLink');
          $($('.tab-link-wrap')[i]).addClass('activeLink');
          $($('.tabs li')[i]).addClass('active');

          //call to toggleTab function with class of current .tab li item

        });
      });
    }

    //mobile SDS tab navigation
    $('.tab-link-wrap').each(function(i, n) {
      $(n).bind('click', function(e) {
        e.preventDefault();
        **$('.tabs .active').removeClass('active');
        $('.tab-link-wrap').removeClass('activeLink');
        $($('.tab-link-wrap')[i]).addClass('activeLink');
        $($('.tabs li')[i]).addClass('active');**

        //call to toggleTab function with class of current tab-link-wrap div
      });
    });
  });

  //Toggle the active state of the tabs from mobile -> desktop and desktop->mobile
  function toggleTab(num) {
    $(".tab-link-wrap").find("#" + num).toggleClass("activeLink");
    $(".tabs").find("#" + num).toggleClass("active");
  }

}(jQuery));
stig-js
  • 1,951
  • 12
  • 24