I did search the site before posting this question but I'm looking for a really specific answer.
I'm creating a website with a full width slider. The first slide is the 1 min embed Youtube video. I need the video to autoplay when user arrives on site but I need the video to autostop whenever user scroll down the page or when the slide changes.
Slider.html
<!-- start slider -->
<div id="fwslider">
<div class="slider_container">
<div class="slide">
<!-- Slide image -->
<iframe src='https://www.youtube.com/embed/pTBjHjRhx_Y' frameborder='0' allowfullscreen></iframe>
<!-- /Slide image -->
<!-- Texts container -->
<div class="slide_content">
<div class="slide_content_wrap">
<!-- Text title -->
<h1 class="title">Run Over<br>Everything</h1>
<!-- /Text title -->
<div class="button">See Details</div>
</div>
</div>
<!-- /Texts container -->
</div>
<!-- /Duplicate to create more slides -->
<div class="slide">
<img src="images/slider2.jpg" class="img-responsive" alt=""/>
<div class="slide_content">
<div class="slide_content_wrap">
<h1 class="title">Run Over<br>Everything</h1>
<div class="button">See Details</div>
</div>
</div>
</div>
<!--/slide -->
</div>
<div class="timers"></div>
<!-- Nav Controls -->
<div class="slidePrev"><span></span></div>
<div class="slideNext"><span></span></div></div>
<!--/slider -->
</div>
just add ?autoplay=1 to ur iframe src like below and this will do the job
<iframe src='https://www.youtube.com/embed/pTBjHjRhx_Y?autoplay=1' frameborder='0' allowfullscreen></iframe>
Related
I am expecting that one of my button will work and pop out these forms, but every time I hit the button "More" nothing happens. Please help!
<body>
<!--Hero Image-->
<div class="hero-image">
<div class="hero-text">
<h1 id="demo">Hi! I'm Jake</h1>
<p>Webby web</p>
<!-- The overlay -->
<div id="myNav" class="overlay">
<!-- Button to close the overlay navigation -->
×
<!-- Overlay content -->
<div class="overlay-content">
About
Services
Clients
Contact
</div>
</div>
<!--Use any element to open/show the overlay navigation menu-->
<button class="button" onclick="myFunction()">More</button>
</div>
</div>
You're setting the wrong CSS property in your JavaScript. It should be display, not height. See, for example:
document.getElementById("myNav").style.display = "none";
function displayNav() {
document.getElementById("myNav").style.display = "block";
}
function closeNav() {
document.getElementById("myNav").style.display = "none";
}
<!--Hero Image-->
<div class="hero-image">
<div class="hero-text">
<h1 id="demo">Hi! I'm Jake</h1>
<p>Webby web</p>
<!-- The overlay -->
<div id="myNav" class="overlay">
<!-- Button to close the overlay navigation -->
×
<!-- Overlay content -->
<div class="overlay-content">
About
Services
Clients
Contact
</div>
</div>
<!--Use any element to open/show the overlay navigation menu-->
<button class="button" onclick="displayNav()">More</button>
</div>
</div>
I want the header to stick on scroll as shown here. (http://davist11.github.io/jQuery-Stickem/)
Source site (https://github.com/davist11/jQuery-Stickem)
I have a full screen video at the top of the page playing and I want to scroll and have the header stick when it hits it. Similarly there is a small border at the top on the other pages I want the scroll to miss then stick when it reaches this point.
Here is what it currently looks like
http://jsfiddle.net/wp7ornmv/
EDIT: Scroll on the HTML window
<div id="logo">
</div>
<div id="intro">
<video autoplay loop poster="images/work/bluesky.jpg" id="bgvid">
<source src="video/Peri_CloudLoop_BlueTV.webm" type="video/webm">
<source src="video/Peri_CloudLoop_BlueTV_3.mp4" type="video/mp4">
</video>
</div>
<div id="container">
<div id="content">
<div id="Mbackground">
<div id="Ncontainer">
<div id="Ncontain">
<div id="Nlogo">Logo
</div>
<div id="Nmenu">
<div class="Nlink">Contact
</div>
<div class="Nlink">About
</div>
<div class="Nlink">Work
</div>
</div>
</div>
</div>
</div>
<div id="Mbackground">
<div id="Mbody">
<div class="Mrow">
<div class="Mcontainer">
<a href="project.html" class="transition">
<span class="link-spanner"></span>
</a>
<div id="Mimageone" class="Mimage">
</div>
<div id="Mborderone" class="Mborder">
</div>
<div id="Mboxone" class="Mbox">
<div class="Mtext">
<div class="Mtitle">Title
</div>
<div class="Msubtitle">Subtitle
</div>
<div class="Mdescrip">Descript
</div>
</div>
<div class="Meye">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footerhalf1">
</div>
<div id="footerhalf2">
<div id="footercontents">Made by
</div>
</div>
</div>
This is a javascript supported behavior by stickem. You may find it HERE
Just make sure your container has a position relative and your sidebar has a position:fixed; top:0; left:auto and you will have it done.
This technique is quite common on websites running advertisements on a side panel. There is a lot more intricate information about this online and I assure you, using the source for the demo you provided along with the stickem jquery library, you will be done in no time.
Good luck
How can i hide a image slider using javascript? i want show this banner in first loading and want to hide this banner with a button or "a" tag. if a visitor dont want to see the banner again they can hide the banner.
here my code
<div class="bootslider" id="bootslider">
<!-- Bootslider Loader -->
<div class="bs-loader">
<img src="img/loader.gif" width="31" height="31" alt="Loading.." id="loader" />
</div>
<div class="bs-container">
<!-- Bootslider Slide -->
<div class="bs-slide active" data-animate-in="swing" data-animate-out="magic">
<div class="bs-foreground">
<div class="text-center text-white" data-x="420" data-y="144" data-speed="400" data-animate-in="fadeInDown" data-delay="400">
<h1 class="banner_text1">TEXT<br>
MINING <br>
ENGINE</h1>
<p class="hidden-xs banner_text2">
TEXT SENTIMENTAL ANALYSIS
</p>
</div>
<div class="text-center">
<div class="text-center" style="position:absolute; width:43.75%; margin-left:28.125%;">
<img class="banner_img_imac" style="z-index:0" data-animate-in="fadeInDown" data-delay="800" src="img/template-product-1-imac.png" alt="iMac" class="image-layer" />
</div>
</div>
</div>
<div class="bs-background">
<img src="img/template-product-1.jpg" alt="" />
</div>
</div>
<!-- /Bootslider Slide -->
</div>
<!-- Bootslider Progress -->
<div class="bs-progress progress">
<div class="progress-bar wet-ashpalt"></div>
</div>
<!-- /Bootslider Progress -->
<!-- Bootslider Thumbnails -->
<div class="bs-thumbnails text-center text-wet-ashpalt">
<ul class=""></ul>
</div>
<!-- /Bootslider Thumbnails -->
<!-- Bootslider Pagination -->
<div class="bs-pagination text-center text-wet-ashpalt">
<ul class="list-inline"></ul>
</div>
<!-- /Bootslider Pagination -->
<!-- Bootslider Controls -->
<div class="text-center">
<div class="bs-controls">
<img src="images/arrow_left.png">
<img src="images/arrow_rit.png">
</div>
</div>
<!-- /Bootslider Controls -->
</div>
please search stackoverflow before
guess you were looking for THIS
of course if you want to hide it permenetly you have to add some to a DB
otherwise it will appear everytime as long the session is refreshed :)
Here's my gallery tab that i want to have a jquery photo gallery or slide. I already downloaded a jquery photo gallery script but my big trouble is i don't know where to put the code on the page. Please help me.
Here's my gallery.asp code: (Please tell me where to put the photo gallery jquery code)
<% intSectionId = 103 %>
<!--#include file ="include/inc_header.asp"-->
<!--#include file ="include/functions_default.asp"-->
<body>
<div id="art-page-background-gradient"></div>
<div id="art-main">
<div class="art-Sheet">
<div class="art-Sheet-tl"></div>
<div class="art-Sheet-tr"></div>
<div class="art-Sheet-bl"></div>
<div class="art-Sheet-br"></div>
<div class="art-Sheet-tc"></div>
<div class="art-Sheet-bc"></div>
<div class="art-Sheet-cl"></div>
<div class="art-Sheet-cr"></div>
<div class="art-Sheet-cc"></div>
<div class="art-Sheet-body">
<!-- start header2 section -->
<!--#include file ="include/inc_header2.asp"-->
<!-- end header2 section -->
<!-- start navigation section -->
<!--#include file ="include/inc_navigation.asp"-->
<!-- end navigation section -->
<!-- start main content section -->
<div class="art-contentLayout">
<div class="art-content">
<div class="art-Post">
<div class="art-Post-body">
<!-- start inner content section -->
<div class="art-Post-inner">
<h2 class="art-PostHeader">
Gallery</h2>
<div class="art-PostContent">
<div style="float:right;margin:0px 5px 5px 5px"></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div style="padding:0px 60px 0px 60px;">
<p> </p>
</div>
<div style="padding:0px 60px 0px 60px;">
<p align="right"> </p>
</div>
</div>
<div class="cleared"></div>
<!-- end inner content section -->
</div>
<div class="cleared"></div>
</div>
</div>
</div>
<!-- end main content section -->
<!-- start sidebar section -->
<!--#include file ="include/inc_sidebar.asp"-->
<!-- end sidebar section -->
<!-- start footer section -->
<!--#include file ="include/inc_footer.asp"-->
<!-- end footer section -->
</div>
<div class="cleared"></div>
</div>
</div>
<div class="cleared"></div>
<p class="art-page-footer"></p>
</div>
</body>
Have you used jcarousal sorgalla.com/jcarousel see the examples you will get your answer
it depends on your css, and on the particular jquery widget, but i think you should try right after:
<div class="art-PostContent">
VERY new to js but here it goes.
I want to be able to click on one of the images in the Portfolio section and have it change the text of the h3 in the Text section with a fade transition as well as select the corresponding slide in the slider.
Code:
<!-- 960 Container -->
<div class="container">
<!-- Description -->
<div class="sixteen columns">
<!-- Text -->
<h3 class="page_headline">Why Do You Need Manage+ For Your Business?</h3>
<div class="flexslider">
<ul class="slides">
<li>
<div id="details">Tier-1 Tech Support</div>
</li>
<li>
<div id="details">Off-site Backups</div>
</li>
<li>
<div id="details">Loaner Computer</div>
</li>
</ul>
</div>
</div><!-- End Description-->
<!-- Portfolio Content -->
<div id="portfolio-wrapper">
<!-- 1/4 Column -->
<div class="four columns portfolio-item">
<div class="item-img"><a href="support.html"><img src="img/support.jpg" alt=""/>
<div class="overlay link"></div></a></div>
<div class="portfolio-item-meta">
<h4>Tier-1 Tech Support</h4>
</div>
</div>
<!-- 1/4 Column -->
<div class="four columns portfolio-item">
<div class="item-img"><a href="backup.html"><img src="img/backup.jpg" alt=""/>
<div class="overlay link"></div></a></div>
<div class="portfolio-item-meta">
<h4>Off-site Backups</h4>
</div>
</div>
<!-- 1/4 Column -->
<div class="four columns portfolio-item">
<div class="item-img"><a href="loaner.html"><img src="img/loaner.jpg" alt=""/>
<div class="overlay link"></div></a></div>
<div class="portfolio-item-meta">
<h4>Loaner Computer</h4>
</div>
</div>
</div><!-- End Portfolio Content -->
</div><!-- End 960 Container -->
all you need is plane javascript or for lesser code, jquery.
just place your img and your div in the markup and bind the click event of the img to function in which you toggle your division display
you can have multiple images, referring to multiple containers(or same containers), which are hidden by default, but as you click on the relative image, it would appear.
see the code below
create your markup like:
<div class="wrapper">
<div class="image">
<img src='../images/actions_button_ok.png' data-target="one" />
<img src='../images/actions_button_ok.png' data-target="two" />
<img src='../images/actions_button_ok.png' data-target="three" />
</div>
<div class="target" id="one" >
this is text A
</div>
<div class="target" id="two" >
this is text B
</div>
<div class="target" id="three" >
this is text C
</div>
</div>
and your jquery code as:
$(document).ready(function(){
$('img').on("click",function(){
$('.target').hide();
$('#'+$(this).data('target')).toggle(1000);
});
});
basically, your html structure can be of your choice, but that's how you should go about it.
explore more about jquery.
see this fiddle.
instead of binding click to img, you can bind it to your li aswell.