JS Hamburger Menu (Acorn)

[Chris M]

We've a lot going on in this thread

I tried the same theory with videos, iframes to be precise. Works as expected...but...I think we've been down this track before. Is there a way of stopping the video from playing when it 'hides'?

My efforts >HERE<webfile attached below.

Dragonforce.web

[Initiostar]

We've a lot going on in this thread

I tried the same theory with videos, iframes to be precise. Works as expected...but...I think we've been down this track before. Is there a way of stopping the video from playing when it 'hides'?

My efforts >HERE<webfile attached below.

Dragonforce.web

I think you would need Play and Pause/Mute function buttons (maybe outside the placeholder) otherwise even when you hide a video the sound track continues for each one that was started. I can't remember seeing a solution on TG though.

I have multiple videos on my site https://initiostar.co.uk. Each video is on a separate popup layer, starting one stops the other with the link such as "javascript:xr_cpu(6); window.scrollTo({ top: 200, left: 0, behavior: 'smooth'});xr_ppc("xr_xp7");xr_ppc("xr_xp8");". The 6, 7, and 8 are the internal Xara generated references for the respective popups. Each popup has a pause button that closes the video. Since the videos don't have an audio track I have not bothered with a mute function.

The videos scroll upwards to ensure that for most desktops the video will always be in view.

Just an alternative way of looking at it.

Gary

[letsgofishing]

LGF, let's assume it's finger trouble.
My last change puts the Link as javascript: openSesame('.Ham4');

If not fingers, can you upload your file?

Acorn

Hi Acorn,
I really don't want to change everything back to javascriptpen() as all the menu links are now working - see attached file.
I'm using WDP17 and was trying to find out if, in future, I create another JS nav bar, will I always have to have to add "openSesame" (or as I landed up using - "openUp" to ALL the links?
Sorry for any misunderstanding - I really appreciate the help.
LGF

[Acorn]

Chris, you would use something like https://www.talkgraphics.com/showthr...821#post614821.

javascript: document.getElementById('player1').pause();
would be changed to
javascript: void $('#101vid, #102vid, #103vid, #104vid').trigger('pause');

Each video Placeholder would need a suitable ID added, like:

<video id="104vid" controls="controls" 
width="100%" height="100%">
<source src="https://auzlink.net.au/vids/Defqon104.mp4" 
width="850" height="478" type="video/mp4" />

pause can be change to stop or play.

In you case, you are after stopping them all at only, I think, but I would stick with the pause.
You could change the ID to a ClassName, say, vid for all MP$s to make it simpler:
javascript: void $('.vid').trigger('pause'); so you new STOP ALL code finally becomes:

javascript: void $('.vid').trigger('pause'); void $('.vid1, .vid2, .vid3, .vid4').slideUp(0); void $('').fadeToggle(1000);

Acorn

[Chris M]

javascript: document.getElementById('player1').pause();Acorn

That's the bit that was tickling my memory. I used it, or something very close, when you helped me with an audio player a while back.

I may not get around to it today, and I want to fiddle so I understand what is what, but I'm keen to add this to my arsenal. The whole concept is only just out of reach of my understanding. Like one of those marathon runners whose legs turn to noodles within sight of the finish line.

[Chris M]

I think you would need Play and Pause/Mute function buttons (maybe outside the placeholder) otherwise even when you hide a video the sound track continues for each one that was started. I can't remember seeing a solution on TG though.

I have multiple videos on my site https://initiostar.co.uk. Each video is on a separate popup layer, starting one stops the other with the link such as "javascript:xr_cpu(6); window.scrollTo({ top: 200, left: 0, behavior: 'smooth'});xr_ppc("xr_xp7");xr_ppc("xr_xp8");". The 6, 7, and 8 are the internal Xara generated references for the respective popups. Each popup has a pause button that closes the video. Since the videos don't have an audio track I have not bothered with a mute function.

The videos scroll upwards to ensure that for most desktops the video will always be in view.

Just an alternative way of looking at it.

Gary

I have several of your players in my treasure trove to be dragged out and used when needed. Anything to do with video and /or slideshows that has your name attached to it makes me go "Oooh, I'll bet that works well" and has me playing around with it.

This particular project is an old 'been-and-gone' one that I'm using just to try and cement my understanding of how things work rather than achieving a result.

[Chris M]

Chris, you would use something like https://www.talkgraphics.com/showthr...821#post614821.

javascript: document.getElementById('player1').pause();
would be changed to
javascript: void $('#101vid, #102vid, #103vid, #104vid').trigger('pause');

Forget the 'Stop All' button. Taking this one small bite at a time.

What does 'void' signify?
I have named the placeholders htmlclass="vid1" (2, 3, 4). Should the #101vid, #102 etc reflect those names? If so, aren't we telling the trigger('pause') to act on a placeholder, not the videos themselves?
Lastly in bite one - why is the javascript #101vid, but the placeholder the video id is 101vid (sans #)?

[letsgofishing]

Pretty comfortable with the theory now, although I don't claim to know 70% of the actual code.

I can dive in and change the speed of animation, toggle and slide, slideUp, hide and fade, but that's about it.

Link to my efforts < HERE > along with Acorn's code that makes it work.

And the .web for anyone who wants edit/add/expand the page.

Attachment 127542

@Chris

I've done the same just using xara pop-up layers plus animation - as far as I can tell, using JS lets you click the button a second time to close the image?

In the xara version you can just click on the desktop, but I was thinking it would be great to be able to have a button that has 2 states like "on" and "off" and being able to give each state a different action.

In xara terms, click on a button which then changes colour (mouse over) for example, and it opens an image.
Click it again and it shows a text paragraph about the image ( I can do this with pop ups) but can't get back to the previous button state without a Back button.
Is there simple JS I could use instead as "back button"?

LGF

[Chris M]

On your last pop up button (pop-up3) type popup:close in the link box.

[Acorn]

Chris

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

When a browser follows a javascript: URI, it evaluates the code in the URI and then replaces the contents of the page with the returned value, unless the returned value is undefined. The void operator can be used to return undefined.

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