Is there a way for a youtube video to autoplay when the video is on the screen (when scrolled to)?
I got a section in my site that looks like this:
<!-- Home -->
<section id="home" class="container relative pattern-black">
<!-- Ful Screen Home -->
<div id="fullscreen" class="fullscreen pattern-black soft-bg-1 z-1">
<!-- Video -->
<div id="P2" class="player video-container" data-property="{videoURL:'gpSSGCf9nHY',containment:'#fullscreen',autoPlay:true, showControls:true, mute:false, startAt:0, opacity:0.2}"></div>
<!-- End Video -->
</div>
<!-- End Ful Screen Home -->
<!-- Home Elements v2 -->
<div class="home-elements">
<!-- Home Inner -->
<div class="home-inner v2 t-center">
<!-- Home Text Slider -->
<div class="home-text-slider relative">
<div class="text-slider clearfix">
<!-- Home Text Slides -->
<ul class="home-texts clearfix t-center semibold">
<li class="slide white uppercase">we are create awesome themes!</li>
<li class="slide white uppercase">We are creative designers</li>
<li class="slide white uppercase">we love to designing</li>
</ul>
<!-- End Home Text Slides -->
<!-- Home Fixed Text -->
<h1 class="home-fixed-text t-center">Welcome to <span class="gray-tone">North!</span> We love to design. We are happy with <span class="gray-tone">you are !</span></h1>
</div>
</div>
<!-- End Home Text Slider -->
<!-- Home Button -->
<a href="#" target="_blank" class="home-button-1 uppercase oswald semibold gray">
purchase
</a>
<!-- Home Button -->
<a href="#about" class="scroll home-button-1 uppercase oswald semibold gray">
read more
</a>
</div><!-- End Home Inner -->
</div><!-- End Home Elements -->
</section><!-- End Home Section -->
This is the code that is used for the video (jquery.mb.YTPlayer.js):
http://jsfiddle.net/55omdr0o/
I found a way to do this.
Using the jQuery waypoints plugin you can detect when a user is scrolling to an element.
The div with the video has the id 'P2', so I added this code to my page with the video:
<script>
// Use waypoints.min.js to detect if the user is at div with id P2
$(function() {
$('#P2').waypoint(function() {
$('#P2').playYTP();
});
});
</script>
You can find waypoints here: https://github.com/imakewebthings/jquery-waypoints
Related
Being very new to coding and HTML i am very much struggling to get the login button in the header to load an iframe when clicked
I would be very grateful if some one could help me out
<header class="header-area header-sticky wow slideInDown" data-wow-duration="0.75s" data-wow-delay="0s">
<div class="container">
<div class="row">
<div class="col-12">
<nav class="main-nav">
<!-- ***** Logo Start ***** -->
<a href="index.html" class="logo">
<img src="logo-v1.png" alt="">
</a>
<!-- ***** Logo End ***** -->
<!-- ***** Menu Start ***** -->
<ul class="nav">
<li class="scroll-to-section">Home</li>
<li class="scroll-to-section">About</li>
<li class="scroll-to-section">Services</li>
<li class="scroll-to-section">Contact</li>
<li class="scroll-to-section"><div class="border-first-button">login</div></li>
</ul>
<a class='menu-trigger'>
<span>Menu</span>
</a>
<!-- ***** Menu End ***** -->
</nav>
</div>
</div>
</div>
</header>
<!-- ***** Header Area End ***** -->````
I integrated the Bootstrap Carousel (http://getbootstrap.com/examples/carousel/) in my 'comingsoon' homepage: http://247tutors.net/comingsoon/index.html
If you wait for the page to fully load, you will see that the automated slide transitions are not aligning properly (problem occurring in Chrome and Firefox). Each new slide comes in at a level and then once slide/img is covering carousel, i.e., at the end of the slide transition, the slide drops down by ~10px.
Notice my carousel's side panels onHover, leave a gap of about the same amount of pixels at the bottom.
..Can't tell it the error is caused by the navbar css (although, I do have the carousel-style.css being pulled in on the index.html after all other relevant css files (thus, giving carousel-style.css precedent over the class & div settings), or possibly, the error stems from loginDropdown.css (http://247tutors.net/comingsoon/css/loginDropdown.css)..?
Full source code url: view-source:http://247tutors.net/comingsoon/index.html
My Carousel css is here: http://247tutors.net/comingsoon/css/carousel-style.css
Carousel region snippet from index.html:
<script type="text/javascript">var switchTo5x=true;</script>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="images/slider/custom/main/a-advanced.png" alt="Advanced Subjects">
<div class="container">
<div id="custom247slider" class="carousel-caption">
<h1 id="textNormal">Advanced Subjects</h1>
<h4 id="textNormal">We specialize in college
<br />
courses and above.
</h4>
</div> <!-- END carousel-caption -->
</div> <!-- END container -->
</div> <!-- END item active -->
<div class="item">
<img src="images/slider/custom/main/a-available.png" alt="Tutors Available 247">
<div class="container">
<div id="custom247slider" class="carousel-caption">
<h1 id="textNormal" style="color:#222;">24/7 Availability</h1>
<h4 id="textNormal" style="color:#222;">Tutors whenever you need.</h4>
</div> <!-- END carousel-caption -->
</div> <!-- END container -->
</div> <!-- END item -->
<div class="item">
<img src="images/slider/custom/main/a-economical.png" alt="Affordable Pricing">
<div class="container">
<div id="custom247slider" class="carousel-caption">
<h1 id="textNormal">Economical</h1>
<h4 id="textNormal">Pay by the minute, the
<br />
week, or the month.</h4>
</div> <!-- END carousel-caption -->
</div> <!-- END container -->
</div> <!-- END item -->
<div class="item">
<img src="images/slider/custom/main/a-ivy.png" alt="Ivy League-level Tutoring">
<div class="container">
<div id="custom247slider" class="carousel-caption">
<h1 id="textNormal">Exceptional Tutors</h1>
<h4 id="textNormal">College graduates from top schools
<br />
in a wide range of disciplines.
</h4>
</div> <!-- END carousel-caption -->
</div> <!-- END container -->
</div> <!-- END item -->
</div> <!-- END carousel-inner -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div> <!-- END myCarousel -->
You have to remove the absolute positioning of the .carousel-inner > .item > img class on line 11 of your carousel-style.css style sheet. It should remove the skipping effect! ;)
I have a frustrating issue.
According to the documentation, I am allowed to have external panels:
http://demos.jquerymobile.com/1.4.2/panel-external/
In the above example the header is inside the page, but the panels are outside the page
I am also allowed to have external headers and footers:
http://demos.jquerymobile.com/1.4.2/toolbar-fixed-persistent/
Then logically I should be able to combine them:
<div data-role="header" data-position="fixed" data-theme="a">
<span>Open left panel</span>
<h1>Info</h1>
</div><!-- /header -->
<div id="locale" data-role="page" data-title="Info" class="jqm-demos">
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<h1>LOCALE</h1>
</div><!-- /content -->
</div><!-- /page -->
<div id="privacy" data-role="page" data-title="Info" class="jqm-demos">
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<h1>PRIVACY</h1>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="panel" id="main_menu" data-position="left" data-display="reveal" data-theme="a">
<ul data-role="listview" id="menu_contents">
<li data-role="list-divider" class="h2 ui-li-divider ui-bar-a ui-first-child">
Page 1
</li>
<li data-role="list-divider" class="h2 ui-li-divider ui-bar-a ui-first-child">
Page 2
</li>
</ul>
</div>
Fiddle: http://jsfiddle.net/sidouglas/qVNyf/1/
As you will see in the fiddle, the sliding animation is not the same as ( http://demos.jquerymobile.com/1.4.2/panel-external/ ). It's laggy and the height of the document is not being calculated correctly.
As per another question, I tried using <div class="ui-panel-wrapper"> in this fiddle. Still the same problem.
And here's a working solution: http://jsfiddle.net/Palestinian/8nM4u/
At least until this bug is solved, you should subscribe to bug report I left you in my comments on top.
Here's additional code you need for this to work correctly:
$(document).on("pagecreate", function () {
$("[data-role=panel]").one("panelbeforeopen", function () {
var height = $.mobile.pageContainer.pagecontainer("getActivePage").outerHeight();
$(".ui-panel-wrapper").css("height", height + 1);
});
});
And say hi to Omar, he made you this solution. :)
I have a working left panel in my App that I have began to build, however when I try and go back to my main screen the panel no longer works. To see this bug, use the following method:
1) Click on 'Bars' Icon top left and go to Google Maps
2) Once on the blank page, use the panel to go back to Home page.
3) Try and open panel once more.
JSFiddle Link
Any ideas?
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<!-- <link rel="stylesheet" href="jquery.mobile-1.4.0.min.css"> -->
<!-- <script src="jquery-2.0.3.min.js"></script> -->
<!-- <script src="jquery.mobile-1.4.0.min.js"></script> -->
</head>
<body>
<!-- Main Page -->
<div data-role="page" id="home">
<!-- Left-Panel -->
<div data-role="panel" id="left-panel" data-display="overlay"> Home
About Us
News
Key Dates
Calendar
Contact
Links
Google Map
Videos
Gallery
</div>
<!-- Header -->
<div data-role="header" data-position="fixed" data-theme="a">
<!-- Header -->
<h1>Header</h1>
</div>
<!-- Content -->
<div role="main" class="ui-content">
<div>
<img src="" id="picture">
</div>
</div>
<!-- Footer -->
<div data-role="footer" data-position="fixed" data-theme="a">
<h4>Footer</h4>
</div>
</div>
<!-- Maps Page -->
<!-- Start of second page -->
<div data-role="page" id="two">
<!-- Left-Panel -->
<div data-role="panel" id="left-panel" data-display="overlay"> Home
About Us
News
Key Dates
Calendar
Contact
Links
Google Map
Videos
Gallery
</div>
<!-- Header -->
<div data-role="header" data-position="fixed" data-theme="a">
<!-- Header -->
<h1>Header</h1>
<a href="#left-panel" data-iconpos="notext" data-icon="bars">
</div>
<div role="main" class="ui-content">
</div><!-- /content -->
<!-- Footer -->
<div data-role="footer" data-position="fixed" data-theme="a">
<h4>Footer</h4>
</div>
Fixed, here is the fiddle:
http://jsfiddle.net/tHDWJ/1/
Problem was that you were referencing the same panel in both pages and when you navigate the current page hides the previous panel.
Note the difference in the following lines:
<div data-role="panel" id="left-panel1" data-display="overlay">
<div data-role="panel" id="left-panel2" data-display="overlay">
We're using a recently CSS-modified Featured Content Rotator with jQuery (http://demo.webdeveloperplus.com/featured-content-slider/) on our Drupal 6 site.
If a user scrolls down to read things towards the bottom of the page, once the slider automatically shifts to the next content fragment the page instantly jumps back up to halfway up the slider container every time it switches.
The only time this doesn't happen is when the viewer is a logged-in admin (assuming because of the extra back-end scripts running).
Any idea what could cause this or how to stop it?
Thanks so much in advance!
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
<div id="featured">
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1">
<img alt="" src="image-tn-1.jpg" /><span>Title 1</span></li>
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-2">
<img alt="" src="image-tn-2.jpg" /><span>Title 2</span></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3">
<img alt="" src="image-tn-3.jpg" /><span>Title 3</span></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4">
<img alt="" src="image-tn-4.jpg" /><span>Title 4</span></li>
</ul>
<!-- First Content -->
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-1" style="">
<img src="image-1.jpg" />
</div>
<!-- Second Content -->
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-2" style="">
<img src="image-2.jpg" />
</div>
<!-- Third Content -->
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-3" style="">
<img src="image-3.jpg" />
</div>
<!-- Fourth Content -->
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-4" style="">
<img src="image-4.jpg" />
</div>
</div>
Fixed! Just needed to set a height for the rotator space.
thank you for your answer Erin H. it worked marvels :)
for the new ones that like me had a difficult time figurring it out this is how it should look. i've added the height at the end of the rotator space and it worked.
#rotator {
background:#FFF;
color:#000;
position:relative;
padding-bottom:2.6em;
margin:0;
font-size:16px;
--> height:275px;
}