Skip to main content
R
REELHERO
Inspiring
February 23, 2025
Answered

return event on second toggle

  • February 23, 2025
  • 1 reply
  • 3496 views

I have a burgermenu with an overlay using toggle to activate the overlay (upper right):

 

https://pitchlab.net/

 

I used JS to rotate the burgermenu on toggle... the overlay/menu slides down .but i cant get it it to rotate back to the original position on a second toggle as the overlay/menu clears

 

my script (what I was trying is in bold):

 

        <script>
const bento_box_wrapper = document.querySelector('.bento_box_wrapper');
const bento_box = document.querySelectorAll('.bento_box');
bento_box_wrapper.onclick = function() {
const overlayWrapper = document.querySelector('.overlayWrapper');
overlayWrapper.classList.toggle('overlayWrapperSlideDown');
$('.bento_box_wrapper').addClass('blur');
bento_box_wrapper.style.transform = 'rotate(315deg)';
$('div#toggle').addClass('blur');
const mainNavLinksWrapper = document.querySelector('.mainNavLinksWrapper');
mainNavLinksWrapper.classList.toggle('mainNavLinksWrapperSlideUp');
bento_box_wrapper.classList.toggle = 'rotate(45 deg)';
}
    Correct answer osgood_

    isnt that already in the original script though?

     

    let current = 0,
reviews = document.querySelectorAll(".reviewText");

setTimeout(function() {
reviews[current].style.opacity = '1';
}, 1500)

setInterval(function() {
reviews.forEach((review) => {
review.style.opacity = '0';
});
current = (current !== reviews.length - 1) ? current + 1 : 0;
reviews[current].style.opacity = '1';
}, 5000)

     


    quote

    isnt that already in the original script though?

     

    setTimeout(function() {
reviews[current].style.opacity = '1';
}, 1500)

     

     

    That one just fades in the initial review so you don't have to wait 5 seconds for it to appear.

     

    I'm sure you have worked it out by now:

     

    setInterval(function() {
reviews.forEach((review) => {
review.style.opacity = '0';
});
current = (current !== reviews.length - 1) ? current + 1 : 0;

    setTimeout(function() {
reviews[current].style.opacity = '1';
    }, 1000)
    
}, 5000)

     

     

    1 reply

    L
    L e n a
    Inspiring
    February 23, 2025

    To make the hamburger icon rotate on the first click and return to its original position on the second click, you can use the classList.toggle() method in JavaScript. This method adds a class if it's absent and removes it if it's present, facilitating the alternation between two states.

     

    Here's how you can adapt your code:

     

     

    const bento_box_wrapper = document.querySelector('.bento_box_wrapper');

bento_box_wrapper.onclick = function() {
    const overlayWrapper = document.querySelector('.overlayWrapper');
    overlayWrapper.classList.toggle('overlayWrapperSlideDown');

    const mainNavLinksWrapper = document.querySelector('.mainNavLinksWrapper');
    mainNavLinksWrapper.classList.toggle('mainNavLinksWrapperSlideUp');

    // Add or remove the 'rotated' class to manage the rotation
    bento_box_wrapper.classList.toggle('rotated');
}

     

     

     

    In this script, the rotated class is added or removed with each click on the .bento_box_wrapper element. You can define this class in your CSS to handle the icon's rotation:

     

     

    /* Initial style of the icon */
.bento_box_wrapper {
    /* Your initial styles */
    transition: transform 0.3s ease; /* Adds a transition for smooth rotation */
}

/* Style when the icon is rotated */
.bento_box_wrapper.rotated {
    transform: rotate(315deg); /* Desired rotation angle */
}

     

     

    With this approach, the icon rotates 315 degrees on the first click and returns to its original position on the second click, thanks to the toggling of the rotated class.

    For a visual demonstrationyou can access there https://demo.puce-et-media.com/reelhero/index-2.html

     

      R
      REELHEROAuthor
      Inspiring
      February 23, 2025

      Thank you Lena - I didnt think to use css.. I even added the same additonal spacing I used in the hover state to that rotate css - so its consistent with the hover state..

       

      https://pitchlab.net/

       

      I initially wanted it to rotate clockwise 45 degrees on the second toggle- so that it appeared to return to its original state yet all rotations would be clockwise - but this works..

       

      quick question not related but on my personal site - no one seems to be able to help me but while I have you..

       

      this may be in the API of the player but I cannot figure it out 

       

      hit any thumb to bring up a movie here https://toddheymandirector.com/reel/

       

      the bottom icon in the player is a play button (should be a pause bc it is playing) however if you hit it it stays on a play button but pauses - hit it one more time and it returns to normal function ie pause button shows up when its playing and vice versa - very strange..

       

      any help would be appreciated!

      O
      osgood_
      Brainiac
      February 25, 2025

      i knew you would come up with a better js solution - 

      right now they cross-dissolve

      https://pitchlab.net/index_test.html

       

      Can I adjust the code so that it fades out completely before the new one comes in like here:

      https://pitchlab.net/

       

      I can adjust the other timing i just can figure out how to make it go to opacity:0 before the new review fades in..

       

      also I am trying to get all the reviews no matter what the length to justity right (or align right) so they all end at the far right of "PITCH LAB" but float and text align are not working

       


      quote

       

      @REELHERO wrote:

       

      Can I adjust the code so that it fades out completely before the new one comes in

       

       

      Sure, just add a setTimeout function to the script which delays the text fading in by 1 second:

       

      setTimeout(function() {
      reviews[current].style.opacity = '1';
      }, 1000)

       

      quote

      @REELHERO wrote:

      also I am trying to get all the reviews no matter what the length to justity right (or align right) so they all end at the far right of "PITCH LAB" but float and text align are not working

       

       

      I would make your 'review_container' width 100% and give it the same right position as your 'review-title' css class

       

      #review_container{
      position: fixed;
      right: 10vw;
      width: 100%      ;
      bottom:24vh;
      }


       

      Then apply width: 100% to your 'reviewText' css class. You have 2 declarations of the .reviewText css class, so I would remove one, so only the values below are present.

       

       

      .reviewText {
      font-size: .9vw;
      font-family: "kanitlight", sans-serif;
      font-weight: 100;
      letter-spacing: .05vh;
      color:#022d2c;
      position: fixed;
      line-height: 1;
      transition: opacity 1s ease;
      opacity: 0;
      text-align: right;
      width: 100%      ;
      }

       

      See if that positions the text where you require it to be.

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices