0

I have a made a sidebar with a toggle function in jquery. This is my function:

 function toggle() {
     var $btn = $(".sidebarToggle");
     var $budget = $(".budget");
     if ($budget.hasClass("sidebarHidden")) {
        $btn.find("i").removeClass("fa-caret-right").addClass("fa-caret-left");
        $budget.removeClass("sidebarHidden");
     } else {
        $btn.find("i").removeClass("fa-caret-left").addClass("fa-caret-right");
        $budget.addClass("sidebarHidden");
     }
     $(window).trigger('resize');
  }

And this is my HTML5 code:

 <div class="sidebar sidebar-hastopnav autoscroll">     
  <div class="sidebarToggle" ng-click="vm.toggle()"><i class="fa fa fa-caret-left"></i></div>

The problem is when I click on the class it wont fire the $(window).trigger('resize'); function and it doesn't resize. I already check the other stackoverflow post like: jQuery resize event not firing

And

$(window).resize() not working

What am I doing wrong?

Kind regards.

Update:

Sketch

Community
  • 1
  • 1
Fearcoder
  • 753
  • 3
  • 15
  • 47
  • have you tried adding a resize event on the window to see if it is triggered or not? do `$(window).on('resize', function(){console.log('Resize event fired!');});` – antoni Oct 14 '16 at 07:57
  • Hi @antoni thank you for your time. I just copied your code and I openend google dev. The console log doesn't show in the console log. I don't think it's not triggered. – Fearcoder Oct 14 '16 at 07:59
  • Can you do the same and resize browser manually to make sure the window is bindable in your code? you should then see the alert – antoni Oct 14 '16 at 08:03
  • *"and it doesn't resize"* The `resize` event is ... an **event**. ie it fires when the window resizes, it's not a command to "change the size of the window". it's re-active, not pro-active. [unless I'm mis-reading the context and "it" referes to something else and not the window] – freedomn-m Oct 14 '16 at 08:03
  • Do you have any code to listen to the window resize event? It's not included in the question. – freedomn-m Oct 14 '16 at 08:05
  • @freedomn-m, you are right. but you can still trigger the event if you have a binded event on it (in this case i understand user wants to trigger the function associated to a resize event of a third party lib sidebar or whatever) – antoni Oct 14 '16 at 08:05
  • @antoni interesting - where did you get 'third party lib sidebar'? and how does OP know the event is not firing? – freedomn-m Oct 14 '16 at 08:09
  • @Fearhunter how do you know the event is not firing? Fiddle showing event firing on button click: https://jsfiddle.net/fbbsp262/ – freedomn-m Oct 14 '16 at 08:10
  • I made a sketch. When I resize the window manually it does trigger the event. But it must trigger when I click on the arrow. – Fearcoder Oct 14 '16 at 08:10
  • Can you include the basic (not complete) code for the event? Specifically how it's wired up. – freedomn-m Oct 14 '16 at 08:13
  • I notice you use Angular, you should add the tag in case someone knows about a module that does it – antoni Oct 14 '16 at 08:15
  • `$(window).resize()` resizes your browser window not what's inside e.g. `'div` of sidebar and main-space. You need to resize `div` size using plaing jquery or angular(i am not aware of) – gschambial Oct 14 '16 at 08:20

1 Answers1

0

You can try alternative solutions provided in this Stackoverflow blog post on - Window Resize.

Hope this helps you. Thanks.

Community
  • 1
  • 1
Denver Gomes
  • 44
  • 1
  • 12