Welcome to TalkGraphics.com
Page 2 of 6 FirstFirst 1234 ... LastLast
Results 11 to 20 of 56
  1. #11
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,740

    Default Re: JS Hamburger Menu (Acorn)

    Enthusiasm slipped to frustration then spiralled into despair. I tried to make an object slide out from the right using this page as reference LINK

    It's a lack of understanding what bit does what on my part. As an example, this bit of the code is in the Head section, and looks like it's the bit that makes it do the slidey part. But how and where does one glue that into Xara? I understand the '.box' is a reference to the part of the code that created the box.

    <script>
    $(document).ready(function(){
    $(".slide-toggle").click(function(){
    $(".box").animate({
    width: "toggle"
    });
    });
    });
    </script>

    Don't be scared to say Here Lies Dragons. If this looks to be too far above my understanding I'll gladly move on. It's only something that's caught my attention, not something I need for a job.

  2. #12
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,747

    Info Re: JS Hamburger Menu (Acorn)

    Quote Originally Posted by Chris M View Post
    Enthusiasm slipped to frustration then spiralled into despair. I tried to make an object slide out from the right using this page as reference LINK

    It's a lack of understanding what bit does what on my part. As an example, this bit of the code is in the Head section, and looks like it's the bit that makes it do the slidey part. But how and where does one glue that into Xara? I understand the '.box' is a reference to the part of the code that created the box.

    <script>
    $(document).ready(function(){
    $(".slide-toggle").click(function(){
    $(".box").animate({
    width: "toggle"
    });
    });
    });
    </script>

    Don't be scared to say Here Lies Dragons. If this looks to be too far above my understanding I'll gladly move on. It's only something that's caught my attention, not something I need for a job.
    Nothing to see here.

    Let's deconstruct.

    You add code directly into the Xara link box.
    It will be javascript: void $('#box').({width: toggle});

    toggle may not be the right option.
    You may have to give your box width an actual px dimension.
    I used a Name of box, which is invoked as #box.

    I am absent from any machine from an unexpected happening for a couple of days.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  3. #13
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,747

    Info Re: JS Hamburger Menu (Acorn)

    Excuse the typos, the code will be javascript: void $('.yellow').animate({"width": "toggle"});

    To show how messy it can be in fitting it all into the Link box here is an accordion approach.
    To see your slideLeft action, you need to collapse all the other text blocks.

    JS - Accordions.xar.

    This why I "invented" the Ultimate Menu...
    I abstracted the code into one place.

    Clearly, I need to add the ability to morph all this capability into my code so it is easier to tweak.

    It will take a more than a day.

    Acorn
    Attached Files Attached Files
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  4. #14
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,740

    Default Re: JS Hamburger Menu (Acorn)

    Plenty of time to play with this project - part of a social media campaign that's due to kick in when the Gold Coast nightclubs fully reopen.

    Using Acorn's 'Accordions' (above):
    Apart from editing the names and changing part of the javascript from 'hide' to 'slideUp' I've left everything as is. My problem is when I first click either javascript link, they do the slideUp bit, but not the slideToggle bit. Clicking again makes everything work as expected, it's just the initial click.

    < 2clubs.web >

    The tag is 'When 2 Clubs Share A Door'. I'm aware that 'When 2 Vibes Share A Door' is the better pun, but the word vibe doesn't have the right...well...vibe.

  5. #15
    Join Date
    Oct 2010
    Location
    South Africa
    Posts
    877

    Default Re: JS Hamburger Menu (Acorn)

    Hi guys,
    I have really enjoyed playing with design freedom that JS offers Being trying to get things like I want them for more than 2 days - it's been a case of 1 step forward and 2 steps back....
    I'm at the stage where I'm pretty happy with the way things work - but I cannot get COURSE LOG IN and APP LOG IN to work as links to other web addresses - I've used www.xara.com as an example. When I click on either of these buttons the menu just closes and I cannot for the life of me find the script/command that's making that happen.
    Not sure what I'm going to do about the menus sitting over the text though.... I'm starting to think about a horizontal menu bar......
    Many thanks,
    LGF

    JS - LGF Hamburger Menu_2_mods2.web

    PS: The page is really a mess with the 1 menu showing on top of the other - could I put 1 menu on a separate layer and "call up" that layer when the menu button is selected?
    Last edited by letsgofishing; 31 July 2020 at 01:26 PM.

  6. #16
    Join Date
    Oct 2010
    Location
    South Africa
    Posts
    877

    Default Re: JS Hamburger Menu (Acorn)

    Quote Originally Posted by Acorn View Post
    Excuse the typos, the code will be javascript: void $('.yellow').animate({"width": "toggle"});

    To show how messy it can be in fitting it all into the Link box here is an accordion approach.
    To see your slideLeft action, you need to collapse all the other text blocks.

    JS - Accordions.xar.

    This why I "invented" the Ultimate Menu...
    I abstracted the code into one place.

    Clearly, I need to add the ability to morph all this capability into my code so it is easier to tweak.

    It will take a more than a day.

    Acorn

    I like the concept ! How would I change the code so that all you saw were the tabs when the site first opens, as opposed to having the "content" of the yellow tab show as at present?

    LGF

  7. #17
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,740

    Default Re: JS Hamburger Menu (Acorn)

    Quote Originally Posted by letsgofishing View Post
    I like the concept ! How would I change the code so that all you saw were the tabs when the site first opens, as opposed to having the "content" of the yellow tab show as at present?

    LGF
    You're only seeing the yellow because it's the top layer. Make it transparent and you see the green underneath. In other words, all the layers begin as visible and don't disappear (hide) until you click one of the javascript links.

  8. #18
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,747

    Info Re: JS Hamburger Menu (Acorn)

    Just add:
    Code:
    <script>
      $('.yellow, .red, .green, .blue').hide();
    </script>
    to Website Body (code).

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  9. #19
    Join Date
    Oct 2010
    Location
    South Africa
    Posts
    877

    Default Re: JS Hamburger Menu (Acorn)

    Quote Originally Posted by Chris M View Post
    You're only seeing the yellow because it's the top layer. Make it transparent and you see the green underneath. In other words, all the layers begin as visible and don't disappear (hide) until you click one of the javascript links.
    OK - I understand. SO there is no way to make just the coloured tabs visible initially?

  10. #20
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,740

    Default Re: JS Hamburger Menu (Acorn)

    Quote Originally Posted by Acorn View Post
    Just add:
    Code:
    <script>
      $('.yellow, .red, .green, .blue').hide();
    </script>
    to Website Body (code).

    Acorn
    Ooh, I feel pretty pleased with myself. I was wandering down the same path, but couldn't put the ,.>$)( in their correct pigeon holes. What does the $ mean/do?

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •