Welcome to TalkGraphics.com
Page 6 of 6 FirstFirst ... 456
Results 51 to 56 of 56
  1. #51
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    948

    Default Re: JS Hamburger Menu (Acorn)

    Quote Originally Posted by Acorn View Post
    Chris

    The void simply ensures the following expression is evaluated and then returns nothing (undefined). Specifically:

    https://developer.mozilla.org/en-US/...Operators/void

    Without it, the browser jumps away from your site to a new page and tries to present the return value of your expression, usually, [object Object].
    This is better explained in https://en.wikipedia.org/wiki/Bookmarklet by the inventor of JavaScript.

    I have explored the use of a variable declaration like, javascript: { var xxx=$('.Hamburger').toggle(500); }, where jQuery still seems to execute but there is no return value but as I am not that knowledgeable with JS arcanery, I have stuck to what I believe is safest.

    You gave the Placeholders the ClassNames: vid[1,2,3,4].
    The methods are for the videos themselves so these have to be identified individually as IDs: [101vid, 102vid, 103vid, 104vid].

    In JavaScript, a collection of items with ClassName is accessed with the convention of a preceding dot (e.g., .vid3) and an individual object's ID is preceded with a hash (e.g., #102vid).
    Look at it just the way we accept a Tweet like @AcornIsBrill with barely a glance.

    The actual declaration of a ClassName and ID in JavaScript is with class='fred' and id='gertie', so there is no need to add the dot or hash because I have just told you what they are.

    Acorn
    I couldn't digest that in one sitting, but after reading a few times may I say; bravo, very well presented. Code is, literally, another language and you explained part of it to a non native in a manner that makes sense. I'm not sure if I'm more impressed with your multi-lingual skills or your teaching skills.

  2. #52
    Join Date
    Oct 2010
    Location
    South Africa
    Posts
    660

    Default Re: JS Hamburger Menu (Acorn)

    Quote Originally Posted by Chris M View Post
    On your last pop up button (pop-up3) type popup:close in the link box.

    Attachment 127565
    Many thanks Chris

  3. #53
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    12,048

    Info Re: JS Hamburger Menu (Acorn)

    The following is a very simple development of my Ultimate Xara Menu Maker applied to having a "button" have multiple actions or states.

    All I have done is ensure the numbers are on top of each other and each has a link to fir up the next ( #4 has a Link of javascript: openSesame('.3'); ).

    Only the starter has an extra twist. It starts off with a ClassName of Menu so it shows on page load. When it is clicked there is an action to add in Menu ( javascript: void $('.5').addClass('Menu'); openSesame('.4'); ).
    Thereafter the coundown simply cycle3 5-4-3-2-1-5...

    Other Objects are given the required ClassNames of a number.

    In my demonstration, I have a Red Circle that does not appear on page load but does for every 5 revealed thereafter. Remove its Menu ClassName and it will show on page load as well.

    JS - Multi-state Anything.xar

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  4. #54
    Join Date
    Oct 2010
    Location
    South Africa
    Posts
    660

    Default Re: JS Hamburger Menu (Acorn)

    Quote Originally Posted by Acorn View Post
    The following is a very simple development of my Ultimate Xara Menu Maker applied to having a "button" have multiple actions or states.

    All I have done is ensure the numbers are on top of each other and each has a link to fir up the next ( #4 has a Link of javascript: openSesame('.3'); ).

    Only the starter has an extra twist. It starts off with a ClassName of Menu so it shows on page load. When it is clicked there is an action to add in Menu ( javascript: void $('.5').addClass('Menu'); openSesame('.4'); ).
    Thereafter the coundown simply cycle3 5-4-3-2-1-5...

    Other Objects are given the required ClassNames of a number.

    In my demonstration, I have a Red Circle that does not appear on page load but does for every 5 revealed thereafter. Remove its Menu ClassName and it will show on page load as well.

    JS - Multi-state Anything.xar

    Acorn
    Thanks Acorn - could you add "forward" and "back" buttons/icons/text/ to this?
    LGF

  5. #55
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    12,048

    Info Re: JS Hamburger Menu (Acorn)

    Quote Originally Posted by letsgofishing View Post
    Thanks Acorn - could you add "forward" and "back" buttons/icons/text/ to this?LGF
    LGF, try this.

    You have 10 pictures so give them htmlclass="Menu 1" .. "Menu 10".
    Create a small line of the numbers 1..10. Give each a Link of javascript: openSesame('.1'); .. javascript: openSesame('.10');
    These numbers can be buttons/icons/text. They only need Links as they are always visible.

    All they do is open the selected image/associated text and, potentially, left and right arrows.

    The left/right arrows are trickier.
    Give them Image Filenames of leftArrow and rightArrow.
    Think of them as a pair associated with each image. They must share the same htmlclass as the image.
    The leftArrow has a link to the preceding image number so:
    • image(1) has leftArrow Link openSesame('.10'); and rightArrow has rightArrow Link openSesame('.2');
    • image(2) has leftArrow Link openSesame('.1'); and rightArrow has rightArrow Link openSesame('.3');
    • ...
    • image(10) has leftArrow Link openSesame('.9'); and rightArrow has rightArrow Link openSesame('.1');

    Stack all the left arrows together. Ditto the right arrows.

    All these arrows could be replaced with a pair and a lot of JavaScript instead.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  6. #56
    Join Date
    Oct 2010
    Location
    South Africa
    Posts
    660

    Default Re: JS Hamburger Menu (Acorn)

    Quote Originally Posted by Acorn View Post
    LGF, try this.

    You have 10 pictures so give them htmlclass="Menu 1" .. "Menu 10".
    Create a small line of the numbers 1..10. Give each a Link of javascript: openSesame('.1'); .. javascript: openSesame('.10');
    These numbers can be buttons/icons/text. They only need Links as they are always visible.

    All they do is open the selected image/associated text and, potentially, left and right arrows.

    The left/right arrows are trickier.
    Give them Image Filenames of leftArrow and rightArrow.
    Think of them as a pair associated with each image. They must share the same htmlclass as the image.
    The leftArrow has a link to the preceding image number so:
    • image(1) has leftArrow Link openSesame('.10'); and rightArrow has rightArrow Link openSesame('.2');
    • image(2) has leftArrow Link openSesame('.1'); and rightArrow has rightArrow Link openSesame('.3');
    • ...
    • image(10) has leftArrow Link openSesame('.9'); and rightArrow has rightArrow Link openSesame('.1');

    Stack all the left arrows together. Ditto the right arrows.

    All these arrows could be replaced with a pair and a lot of JavaScript instead.

    Acorn
    Many thanks Acorn - appreciated!

 

 

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
  •