Style Switcher Scriprs

Question

I am very new to jQuery and Javascript so I'm having issues with my style switcher, the css part works but the script doesn't and I'm not sure how to do make it work.

Javascript:

$("#navorin li a").click(function() { 
    $("link.nav").attr("href",$(this).attr('rel'));
    $("script.nav").attr("src",$(this).attr('role'));
});

HTML:

<ul id="navorin">
    <li><a href="#" rel="assets/css/leftmenu.css" role="assets/js/leftmenu.js">Left Menu</a></li>
    <li><a href="#" rel="assets/css/rightmenu.css" role="assets/js/rightmenu.js">Right Menu</a></li>
    <li><a href="#" rel="assets/css/topmenu.css" role="assets/js/topmenu.js">Top Menu</a></li>
    <li><a href="#" rel="assets/css/topmenufixed.css" role="assets/js/topmenufixed.js">Top Menu Fixed</a></li>
</ul>

It changes these:

<script class="nav" src="assets/js/leftmenu.js"></script>
<link class="nav" href="assets/css/leftmenu.css" type="text/css" media="screen" rel="stylesheet">

My menu scripts looks roughly like this, if that helps:

    $(window).load(function () {
    $('.sidenav ul > li').click(function (ev) {
        $(this).find('>ul').fadeToggle();
        ev.stopPropagation();
    });
    $('.sidenav ul > li a.back').click(function (ev) {
        $(this).parent().parent().fadeOut();
        ev.stopPropagation();
    });
});
$(window).on("load resize", function () {
  if ($(window).width() <= 768) {
      $(document).on("swiperight", function () {
          $(".sidenav").addClass('sidenavhover');
          $(".overlay").fadeIn();
          $(".sidenav li.user").addClass('usershow');
      });
      $(document).on("swipeleft", function () {
          $(".sidenav").removeClass('sidenavhover');
          $(".sidenav ul > li ul").hide();
          $(".overlay").fadeOut();
          $(".sidenav li.user").removeClass('usershow');
      });
      $(".overlay").click(function () {
          $(".sidenav").removeClass('sidenavhover');
          $(".sidenav ul > li ul").hide();
          $(".overlay").fadeOut();
          $(".sidenav li.user").removeClass('usershow');
      });
  }
  if ($(window).width() >= 769) {
      $(".sidenav").mouseover(function () {
          $(".sidenav").addClass('sidenavhover');
          $(".sidenav li.user").addClass('usershow');
          $(".overlay").fadeIn();
      });
      $(".overlay").click(function () {
          $(".sidenav").removeClass('sidenavhover');
          $(".sidenav ul > li ul").slideUp(100);
          $(".sidenav li.user").removeClass('usershow');
          $(".overlay").fadeOut();
      });
  }  if ($(window).height() < 458) {
      $(".sidenav ul > li.logout").css('position', 'relative');
      $(".sidenav ul > li.logout").css('border-top', '0');
  }
  if ($(window).height() > 458) {
      $(".sidenav ul > li.logout").css('position', 'absolute');
      $(".sidenav ul > li.logout").css('border-top', '1px solid #eeeeee');
  }
  if ($(window).height() < 588) {
      $(".sidenav.sidenavhover ul > li.logout").css('position', 'relative');
      $(".sidenav.sidenavhover ul > li.logout").css('border-top', '0');
  }
  if ($(window).height() > 588) {
      $(".sidenav.sidenavhover ul > li.logout").css('position', 'absolute');
      $(".sidenav.sidenavhover ul > li.logout").css('border-top', '1px solid #eeeeee');
  }
});

If anyone could help my make it work that would be amazing

Thanks, Alfred

... and doing that won't undo the effects of the previous script; event handlers, global objects, etc will still exist. Basically this is just not the way to do things. — Pointy, Nov 08 '13 at 18:48
What's probably best is having a global variable for what style is currently being used, then execute functions from that in your script. — orhanhenrik, Nov 08 '13 at 18:50
Another idea would be to create your style variants with a global class and simply add the class to the body on switching styles. — Tim Vermaelen, Nov 08 '13 at 19:00
Is there any way of stoping a script executing? sorry but I'm not experienced — user1919077, Nov 08 '13 at 19:02

Style Switcher Scriprs

0 Answers0