Ok, so I'm currently using the code below, to hide and show a div.
The div contains a video which is embedded direct from an MP4 link, the problem i'm having is when I hide the div, the video continues to play in the background, how do I stop this..
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
Find the video tag inside the element you want to hide and pause it. If you do not have more than one video this should work (assuming you are using HTML5 video of course):
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block') {
var video = e.getElementsByTagName("video")[0];
video.pause();
e.style.display = 'none';
} else {
e.style.display = 'block';
}
}
</script>
Related
How to hide navigation menu bar on scroll down and it should appear on scrolling up using angularjs?
As I have seen a solution that library 'headroom.js' is quite useful but I am unable to implement.Please suggest an appropriate solution.
Can it be done with JQuery? I am using code like this in my app, you can use it in AngularJS if you use angular.element(document).ready.
// Navigation Scripts to Show Header on Scroll-Up
jQuery(document).ready(function($) {
var MQL = 1170;
//primary navigation slide-in effect
if ($(window).width() > MQL) {
var headerHeight = $('.navbar-custom').height();
$(window).on('scroll', {
previousTop: 0
},
function() {
var currentTop = $(window).scrollTop();
//check if user is scrolling up
if (currentTop < this.previousTop) {
//if scrolling up...
if (currentTop > 0 && $('.navbar-custom').hasClass('is-fixed')) {
$('.navbar-custom').addClass('is-visible');
} else {
$('.navbar-custom').removeClass('is-visible is-fixed');
}
} else if (currentTop > this.previousTop) {
//if scrolling down...
$('.navbar-custom').removeClass('is-visible');
if (currentTop > headerHeight && !$('.navbar-custom').hasClass('is-fixed')) $('.navbar-custom').addClass('is-fixed');
}
this.previousTop = currentTop;
});
}
});
Thanks to this post: scroll up/down detection
You can use this:
var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
$('body').bind(mousewheelevt, function(e){
var evt = window.event || e //equalize event object
evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible
var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF
if(delta > 0) {
$('.menu').fadeIn();
}
else{
$('.menu').fadeOut();
}
});
There is an example solution you can check out here. It is solved using CSS and JQuery.
I'd like to hide my page's navigation when video is playing, just like the play button does.
Here's the script that succesfully hides the play button:
<script>
$('.vid').parent().click(function () {
if($(this).children(".vid").get(0).paused){
$(this).children(".vid").get(0).play();
$(this).children(".playpause").fadeOut();
}else{
$(this).children(".vid").get(0).pause();
$(this).children(".playpause").fadeIn();
}
});
</script>
And this script I tried to hide my navigation bar with:
<script>
function vidplay() {
var video = document.getElementById(".vid");
var button = document.getElementById(".playpause");
if (video.paused) {
video.play();
$(".navbar").hide();
</script>
Here's link to my site
Try using the jQuery .toggle() function;
$('.vid').parent().click(function () {
$(".navbar").toggle();
});
You didn't close your function and if statement
<script>
function vidplay() {
var video = document.getElementById(".vid");
var button = document.getElementById(".playpause");
if (video.paused) {
video.play();
$(".navbar").hide();
}
}
</script>
I have a fullscreen slider in background and a text logo on it for my wordpress homepage.
I would like to hide and show this slider by clicking on my text logo.
The function I use works actually great but I have to click twice on the text logo to make it run.
<div id="conteneur">
<div id="fullscreen-slider" class="royalSlider rsDefault">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/perron_01.jpg" />
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/perron_01.jpg" />
</div>
<header>
<div id="logo">
Adequat
</div>
And the script :
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}</script>
I think the browser search for the href="#", and only once he finds it, my script goes well.
Thank you for your help and I am sorry but I am a beginner and my website is not yet online.
Adrien Quélet
If you are using jQuery (which I recommend) Here is a jsFiddle example.
The script is very much simpler to use/maintain.
JQUERY
$('#logo').click(function(event) {
$('#logo a').toggle();
event.preventDefault();
});
You would need to modify your css and such to fit your needs, but this should get you going.
Do it the other way around:
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
</script>
I am having HTML page where i ll have link as "SHOW" while clicking on that I need to show div area. where DIV has iframe.
Normally while loading HTML page that div should be in hidden state while clicking only it should be shown.
I need close button inside that link..While clicking on that I need to close the dive that is hide.
a
function toggleDisplay(id)
{
if (!document.getElementById) { return; }
var el = document.getElementById('straddle');
if (el.style.display == ''){
el.style.display = 'none';
}else {
el.style.display = '';
}
}
I don't want this toggle function
Please help me.
Your javascript
<script type="text/javascript">
<!--
var whatever = document.getElementById('mydiv');
whatever.style.display = 'none';
function show(){
whatever.style.display = 'block';
}
function hide(){
whatever.style.display = 'none';
}
//-->
</script>
and then the HTML
Click here to show element
<br/>
<div id="mydiv">
This will disappear and reappear and
Click here remove element</div>`
You may want this (Iframe may take a while to load, so let it load)
HTML:
Show
<div id="straddle">
<div id="close">Close</div>
<iframe width='100%' src="http://heera.it"></iframe>
</div>
JS: (Put it before closong </body> tag between <scripe type="text/javascript"></scripe>)
window.onload = function() {
var show = document.getElementById('show'),
el = document.getElementById('straddle'),
close = document.getElementById('close');
show.onclick = function() {
el.style.display = 'block';
return false;
};
close.onclick = function(){
el.style.display = 'none';
};
};
Update : Added relevant css
#straddle{ display:none; }
#close{
float:right;
cursor:pointer;
display:inline-block;
}
Use jQuery:
$(document).ready(function() {
$('#link1').click(function() { $('#div').css({ display:'none' }) })
$('#link2').click(function() { $('#div').css({ display:'block' }) })
})
Im trying to get a map similar to this for when you click on the region of the map a div appears to the right and shows you the closest stores in that region
http://www.kaiwakaclothing.co.nz/our-stores.php
I have been using this website below for the code;
http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/
and have implemented using hotpoints in dreamweaver to do the following
http://www.colmanweb.co.nz/websites/betacraft/index.php?option=com_content&view=article&id=31
however I cannot seem to get different text or hidden div to appear for each region.
Sorry I managed to fix this problem
added
<script language="javascript" type="text/javascript">
// <![CDATA[
function togglewai() {
var ele = document.getElementById("toggleText2");
var text = document.getElementById("displayText");
if (ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
} else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
// ]]>
the key was changing the name function toggle to togglewai