I've written some basic Javascript code to work with the videos on my website. Basically I have embedded video content, placed a transparent and clickable div over the video that when hovered over will play the video behind it, then pause when the mouse is moved away. It works flawlessly on Chrome and Safari (not tested IE, I work on a Mac) but not at all on Firefox, the videos do not play. I've searched here and other places for a reason why, but haven't been able to find anything. I've only started playing with Javascript the last couple of weeks so I wouldn't be surprised if I've missed something obvious!
<div class="sectionWrapper">
<a href="http://weathereddown.co.uk">
<div id="sales-section" class="video-block" onmouseover="playVideo1()" onmouseout="playVideo1()"></div>
</a>
<div class="videoWrapper">
<div id="wistia_92lscndvjx" class="wistia_embed" style="width:900px;height:506px;"> </div>
</div>
<script charset="ISO-8859-1" src="//fast.wistia.com/assets/external/E-v1.js"></script>
<script>
wistiaEmbed = Wistia.embed("92lscndvjx", {
videoFoam: true
});
</script>
<script type="text/javascript">
var open = false;
function playVideo1() {
open = !open
if (open == true) {
document.getElementById('wistia_8').play();
}
else {
document.getElementById('wistia_8').pause();
}
}
</script>
</div>
The Id references ('wistia_8') are correct, they refer to the code automatically generated on the page by the Wistia embed code.
Try using the same methods as the W3Schools site but instead of hooking up the buttons use your mouseover mouseout events instead!
Here
Hope this helps!
Related
So I'm making an extension for Google Chrome with my friend, and for most of the features (i.e. calendar, settings, etc.) we open a modal so we don't have to redirect to another page. We are trying to get the modal to close when you click outside of the content. Here's a little markup screenshot to give you an idea of what I'm talking about.
I want to be able to close the modal by clicking outside the white area. Currently it closes even when I click inside the white area. I have tried pretty much everything, including stopPropagation(), pointer-events:none;, and jquery disabling. None of them work for reasons unknown to me. Something weird about Chrome Extensions, I guess.
Here's some of my code so far:
function calendar() {
document.getElementById("calendmodal").style.display = "block";
}
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("calendicon").addEventListener("click", calendar);
document.getElementById("calendmodal").addEventListener("click", closeModal);
document.getElementById("calendmodal").addEventListener("click", function(event) {
event.stopPropagation();
});
});
And HTML:
<div class="icons" id="icons_calendar">
<img src='https://preview.ibb.co/jE76Bm/calendar.png' alt="calendar" border="0" id="calendicon"/>
</div>
<div id=calendmodal class="generalmodal">
<div class="modal-content" id="calendcontent">
<iframe src="https://calendar.google.com/calendar/embed?src=googleapps.wrdsb.ca_ptpdj55efmhg1nb89ruc15fi3k%40group.calendar.google.com&ctz=America%2FToronto" style="border: 0" width="800" height="600" frameborder="0" scrolling="no" visibility="hidden" id="calendiframe"></iframe>
<p id=infostuff>For a more extensive calendar and<br>more school tools, visit The SJAM Website.</p>
</div>
</div>
Not really sure what I'm doing wrong, I don't know how to do this in an extension.
I don't know exactly how you show your modal dialog, but my approach for this issue is like this (you may be able to adapt it ot your particular case):
I have a transparent <div> as container that takes up the whole screen, and inside it, using CSS, I position the modal dialog. Something like:
<div id="container" style="position:fixed;top:0;bottom:0;left:0;right:0;display:none">
<div id="myModal" style="position:absolute;width:300px;height:200px;left:100px;top:100px">
<!-- Here goes my content -->
</div>
</div>
With this approach, to display the dialog I do something like:
function openModal(){
document.getElementById("container").style.display = "block";
}
And to close it when clicked on the transparent background but not on the dialog I have:
document.getElementById("container").onclick = function(event) {
if (event.target === this) {
this.style.display = "none";
}
};
In your earlier attempts, where did you execute event.stopPropagation()? It's not included in your code example.
What you need to do is prevent a click event on #calendmodal from bubbling up the DOM and triggering a click event on the body (or another container element) whose event handler closes your modal dialog.
You can do so like this:
document.getElementById("calendmodal").addEventListener("click", function(event) {
event.stopPropagation();
});
The following script is the most common I found to be used for managing the preloader but does this actually work or is it just some stuff we display for few seconds and assume the content of the site would have been loaded by then?
Here is that script.
$(document).ready(function() {
$(window).on('load', function() {
$('.loader').fadeOut(); // will first fade out the loading animation
$('.preloader').delay(1000).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(1500).css({'overflow':'visible'});
});
});
and then the HTML
<body>
<div class="preloader">
<div class="loader"> .... </div>
</div>
<div class="content">...</div>
Another thing i would like to ask is if we can have a simple preloader that actually works with just JavaScript instead of jQuery.... there seems to be some problem displayed in console when using the latest version of jQuery
Thanks in advance
I'm having to write a scraper using nightmare. On one the links the website is using a div for the user to navigate away from the page. In order to follow the navigation flow, I would like my nightmare instance to "click" the div. However, nothing happens when I'm on chrome, and obtain the element and call click. Unlike Firefox, where this works fine.
The script
let elem = document.getElementByClassName('is-a-div-element')[0];
elem.click()
Works fine on firefox, nothing happens on chrome! Any ideas? The site causing issue is using React. Not sure if that helps or not.
The HTML structure looks like this.
<div class="nav-element">
<div class="is-a-div-element">
<div roll="button">
<span roll="presentation">Hello World</span>
<span class="Exit">Exit</span>
</div>
</div>
</div>
I'm not sure how Nightmare relates to this issue since you mention Chrome and Firefox and appear to be using standard browser Javascript, but I'll try answer anyway.
Since you've edited your question with more specific information I'll edit my answer. Now the main issue I can see is that you're using getElementByClassName, which isn't a function (missing the s).
Do this instead:
let elem = document.getElementsByClassName('is-a-div-element')[0];
Tested working in Chrome and Firefox:
window.addEventListener('load', function() {
let elem = document.getElementsByClassName('is-a-div-element')[0];
elem.click();
});
<div class="nav-element">
<div class="is-a-div-element" onclick="alert('this was clicked frens');">
<div roll="button">
<span roll="presentation">Hello World</span>
<span class="Exit">Exit</span>
</div>
</div>
</div>
I'm building a website which uses IFrames to play YouTube videos, instead of uploading the raw video as the host doesn't allow large file uploads and it seemed easier to use IFrames. However, how the website works is that when you press a button it opens a div over the top of the rest of the page, like a 'popup' I guess. So this requires that you can hide the IFrame when you close the div.
However, this doesn't work on mobile Chrome of Safari (for iOS10 latest versions). When I try to hide it, the rest of the div hides like normal but the video leaves an impression, as in you can't play it or click anything on the video but it prevents you clicking anything under the video also.
Has anyone encountered any issues like this? Can anyone suggest where my code is wrong?
The website is at http://citm.uk.tn/
Here's the code:
JavaScript:
function fillText(a){
$('#body').load('html/' + a + '.html');
b.style.height = '60vw';
b.style.visibility = 'visible';
ex.style.filter = 'blur(20px)';
ex.style.WebkitFilter = 'blur(20px)';
window.scrollTo(0,0);
}
function wipePop(){
b.style.height = '0';
b.style.visibility = 'hidden';
ex.style.filter = 'none';
ex.style.WebkitFilter = 'none';
frame.style.height = '0';
frame.style.opacity = '0';
}
HTML:
<a class='back' onclick='wipePop()'>Back To Home</a>
<iframe class='video' src="https://www.youtube.com/embed/YXwYJyrKK5A?wmode=opaque" frameborder="0" allowfullscreen id="frame">
</iframe>
More HTML:
<div class='ex' id='ex'>
<div class='banner'><img src='images/full.png' class='full' id='im'></div>
<div class='buttons'><button class='cir' id='1'><img class='buttonimg' src='images/1.png'></button><button class='cir' id='2'><img class='buttonimg' src='images/2.png'></button><button class='cir' id='3'><img class='buttonimg' src='images/3.png'></button><button class='cir' id='4'><img class='buttonimg' src='images/4.png'></button></div>
<div class='videobanner'><button class='vidbanner_l' onclick="fillText('video1')"><img src='images/video.png'></button><button class='vidbanner' onclick="fillText('video2')"><img src='images/video2.png'></button></div>
<br><br><br>
</div>
<div class='body' id='body'>
</div>
I am using jQuery but anything using pure javascript would be prefered. Thanks in advance.
can anyone help me out, been banging my head against a wall for 2 days! Trying to get iScroll to work with my phonegap/jqtouch app. Have tried all the suggestions I can find on the Internet, but all I get is either no scrolling or rubber banding so I can't view the bottom of the page.
My code in a nutshell is:
HTML header:
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" src="jqtouch/jquery.js"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js"></script>
<script type="text/javascript" src="iscroll-lite.js"></script>
<script type="text/javascript" src="myAppCode.js"></script>
<script type="text/javascript">
var myScroll;
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
function onDeviceReady()
{
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
}
function loaded()
{
myScroll = new iScroll('wrapper');
myScroll.refresh();
}
</script>
HTML (I've added the 'wrapper' and 'scroller' divs):
<!-- Options Page header bar-->
<div id="options_page">
<div class="toolbar">
<h1>Past Paper</h1>
<a class="button flip" href="#reset_page">Reset Stats</a>
</div>
<!-- why won't you scroll??? -->
<div id="wrapper">
<div id="scroller">
<!-- Stats section div - dynamically generated stats by refreshStats() -->
<div id="Stats"></div>
<h2>General</h2>
<ul class="rounded">
<li>Only new questions?<span class="toggle"><input type="checkbox" id="notSeen" /></span></li></ul>
<h2>Categories</h2>
<ul class="rounded">
<li>Cardiology<span class="toggle"><input type="checkbox" id="cardiology" /></span></li>
<li>Respiratory<span class="toggle"><input type="checkbox" id="respiratory" /></span></li>
<li>Gastrointestinal<span class="toggle"><input type="checkbox" id="gastrointestinal" /></span></li>
<li>Neurology<span class="toggle"><input type="checkbox" id="neurology" /></span></li>
</ul>
<div id="optionStartQuiz">
<ul><li class="whiteButton">Start!</li></ul>
</div>
</div>
</div>
</div>
myAppCode.js contains the refreshStats() function to display info in the Stats div above:
$(document).ready(function()
{
// load variables from local storage
loadLocalStorage();
// load the stats div
refreshStats();
// refresh scores everytime the main page is loaded
$('#main_page1').bind('pageAnimationStart', function(){
refreshStats();
});
});
function refreshStats()
{
// an HTML ul
var tempStats = '<h2>Current Stats</h2><ul class="rounded"><li>Questions completed<span style="float: right">' + OVERALL_questionsFirstTime + '/' + OVERALL_numberOfQuestions + '</span></li><li>Percentage correct<span style="float: right">' + percentageScore + '%</span></li></ul>';
// display me
$('#Stats').html(tempStats);
}
So basically I want to be able to scroll the stuff within the wrapper and scroller divs but can't get my head around it! Thanks, Nick
I was having the same problem. The div that was supposed to scroll would exhibit rubberbanding until I changed the orientation on the iphone. I tried the timeout methods from the iscroll doc page but nothing worked.
Using v4.0 beta4 I added
checkDOMChange: true
when creating my scroll wrapper. This works like a charm. Not really sure what the problem was but I am using this in a jQTouch page.
One thing to note, the checkDOMChange: is listed as being experimental...
hth
Ok finally got this working. To get jQTOuch and iScroll to play nice with each other, the scrolling areas on the page need to be reset each time JQTouch makes them disappear. In other words, once you hide the div, iScroll doesn't know what to scroll the next time it's made visible. So as a result, you get the infamous rubberband effect. To solve this, just add an event listener that resets the scrolling area right after the div is called. Make sure you give it 100 to 300ms delay. This code below assumes your variable is called myScroll:
$(".about").tap(function(){
setTimeout(function(){myScroll.refresh()},300);
});
And on a side note, here's how to establish multiple scrollers using iScroll:
var scroll1, scroll2;
function loaded() {
scroll1 = new iScroll('wrapper1');
scroll2 = new iScroll('wrapper2');
}
Hope this helps someone.
I was facing the same issue. My element used just to bounce and settle back.
I edited the scroll.js to make checkDOMChanges:true and it started working fine.
This is my solution.
$("a").tap(function(){
setTimeout(function(){myScroll.refresh()},300);
});
The codes above assume that your iScroll variable is myScroll,
and the code is force your iScroll to refresh as you tap a link.
I'm not sure about iScroll4, but the original iScroll depended on CSS classes to scroll correctly - specifically, the wrapper needed to be positioned, and have overflow set - in the demo for iScroll4 I see they are still setting similar properties on the wrapper and the scroller:
http://www.cubiq.org/dropbox/iscroll4/examples/simple/
I'm not sure if you've already done this (and just didn't include the CSS) - but your code looks fine.
I've had inordinate troubles with iScroll (pre-iScroll4, haven't tested 4 yet) getting it to work with DIVs instead of UL lists. BUT... today I found a post in google groups (see reply by manmade at 9:59) where it is suggested to add a line:
that.refresh();
into the iScroll code around line 81. In the latest iScroll (v3.7.1), this line is added at line 85, within the case for "START_EVENT" just after the line:
that.touchStart(e);
I haven't analyzed exactly why it works, but it works for getting my div to scroll perfectly.