I have scroll box in my website, i want to make it move using main scroll bar..
Here's my preview:
Here's my code html:
<div id="wrapper">
<section>
<div class="row">
<div class="col-md-6 service-one">
<h1 class="header-caption">Service One</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi perspiciatis sequi, autem, ea ratione praesentium et quis fugit.</p>
<ul>
<li>List One</li>
<li>List Two</li>
<li>List Three</li>
</ul>
</div>
<div class="col-md-6 service-one-img">
<div class="box-img">
<img src="img/service-img.png" alt="">
</div>
</div>
</div>
</section>
<section>
<div class="row">
<div class="col-md-6 service-one">
<h1 class="header-caption">Service One</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi perspiciatis sequi, autem, ea ratione praesentium et quis fugit.</p>
<ul>
<li>List One</li>
<li>List Two</li>
<li>List Three</li>
</ul>
</div>
<div class="col-md-6 service-one-img">
<div class="box-img">
<img src="img/service-img.png" alt="">
</div>
</div>
</div>
</section>
</div>
Here's my js:
<script>
$(function(){
$(document).scroll(function(){
$('#wrapper').stop().animate({
scrollTop : $(this).scrollTop()
});
});
});
</script>
and my css:
#wrapper {
height: 80vh;
width: 90%;
overflow-y: auto;
overflow-x: hidden;
background-color: yellow;
position: relative;
top: 100px;
margin: auto;
}
Do you guys know how to make it works? So my scroll box can move using main scroll bar..
I have tried to code like that, and still my scroll box move using their own scroll bar, not using main scroll bar..
you can just set the height of the wrapper to a larger one so that the content doesn't need to have their own scroll bar. The overflow-y:auto sets it into scroll because the height of the content is larger than the wrapper. If you want the height to just occupy the least amount of space you can use height:fit-content. You can read more about it here. You may want to remove the script first before trying this.
Edit: I read your comment. As far as I know you cannot edit the function of the main scroll bar so it is not possible for your target. What you can do though could be a lot more tedious to do. So you can have the wrapper set to position: absolute and z-index:0. Then you will have your 2 main content (above and below scrolling box) at z-index:1 and have it with margin:40vh 0. This doesn't work if you scroll with the main scroll bar, just when you scroll using mouse, mousepad, or mobile.
You need to remove height on your wrapper if you want to use your main scrollbar. What is your intention for giving it a height?
Related
I'm trying to create a page without scroll and I don't have much content to show on the page while I'm designing a web page I face an issue I try to search and try to follow the step to solve the issue but my issue does not solve so if anyone can help me
the issue I'm facing white space at the bottom of my page after the footer I'm sharing example code with my issue
screenshot of the issue
you can see white space right after the footer
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Document</title>
<style>
.img-thumbnail{
height: 150px;
width: 100%;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row d-flex flex-row flex-nowrap">
<div class="col-12 p-0">
<div class="card">
<h4 class="font-weight-light text-center">Bootstrap 4 Horizontal Scrolling Cards with Flexbox</h4>
<div class="card-body">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-lg-3 col-md-12 col-sm-12">
<img src="AboutUs.jpeg" class="img-thumbnail border-0 p-0" alt="" srcset="">
</div>
<div class="col-lg-9 col-md-12 col-sm-12">
<h4>Lorem ipsum dolor sit, amet consectetur</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum, architecto magni? Rem, ipsam ipsa sit, maxime deserunt officiis consequatur cumque libero illum consectetur illo maiores iusto pariatur sapiente necessitatibus magni?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum,
Read More
</p>
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-lg-3 col-md-12 col-sm-12">
<img src="AboutUs.jpeg" class="img-thumbnail border-0 p-0" alt="" srcset="">
</div>
<div class="col-lg-9 col-md-12 col-sm-12">
<h4>Lorem ipsum dolor sit, amet consectetur</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum, architecto magni? Rem, ipsam ipsa sit, maxime deserunt officiis consequatur cumque libero illum consectetur illo maiores iusto pariatur sapiente necessitatibus magni?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum,
Read More
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="bg-dark-08">
<div class="container-fluid p-0 m-0 bg-dark">
<div class="row no-gutters text-center d-flex justify-content-center">
<div class="p-2">
<p class="text-light text-center">Example Address</p>
<p class="text-light text-center">example#example.com</p>
</div>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</body>
</html>
Thank you
You should make use of the #media query. If the screen is smaller than your content, make the footer relative. If the screen is bigger than your content, use position absolute.
footer{
position:relative;
}
#media screen and (min-height:800px){
footer{
position: absolute; // or fixed
bottom:0;
width:100%;
}
}
Because, you dont have much content to fill entire page. You can use something like this.
if($(window).height() > $("body").height()){
$("footer").css({"position" : "fixed", "bottom" : "0" , "width" : "100%"});
} else {
$("footer").css("position", "relative");
}
This looks like bootstrap. Try having a look at the sample code they provide for this kind of thing. Specifically, there is a sticky footer example https://getbootstrap.com/docs/4.0/examples/sticky-footer/
What about:
footer {
position: fixed;
width: 100%;
bottom: 0px;
}
.container-fluid{
margin-bottom: 100px; //Height of your footer
}
Fiddle
html, body {
margin: 0;
padding: 0;
}
.mainContainer {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header {
width: 100%;
height: 100px;
background: blue;
}
.mainContent {
flex: 1;
text-align: center;
font-size: 40px;
padding: 40px;
}
footer {
width: 100%;
height: 100px;
background: red;
}
<html>
<head></head>
<body>
<div class='mainContainer'>
<header></header>
<div class='mainContent'>
All your content goes here
</div>
<footer></footer>
</div>
</body>
</html>
This should work for you. Basically make the page a vertical flexbox with min-height: 100vh and flex the middle element. Then the footer is always anchored to the bottom of the page.
Using Fullpage.js I added a Bootstrap custom navbar inside section 1 for achieving a "our features effect" and when you click on a tab the text inside that section changes.
The Bootstrap code works but I want to set the navbar on the bottom on section 1, but it keeps adding itself to section 0.
What would be the best way to achieve this?
CSS:
#section0 {
background:url("images/vd48-main.jpg") center top no-repeat;
background-image: url("images/vd48-main.jpg");
background-position: fixed;
background-color: #000000;
}
#section1 {
background:url("images/vd48-main.jpg") center top no-repeat;
background-image: url("images/vd48-main.jpg");
background-position: fixed;
}
#section2 img{
margin: 20px 0 0 52px;
background-image: url(images/vd48-main.jpg);
padding: 30% 0 0 0;
}
#section3 img{
bottom: 0px;
position: absolute;
margin-left: -420px;
}
.intro p{
width: 50%;
margin: 0 auto;
font-size: 1.5em;
}
.twitter-share-button{
position: absolute;
z-index: 99;
right: 149px;
top: 9px;
}
.fp-tooltip{
color: #AAA;
}
#fp-nav span, .fp-slidesNav span{
border-color: #AAA;
}
#fp-nav li .active span, .fp-slidesNav .active span{
background: #AAA;
}
.nav-tabs{
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
}
.bg-inverse{
z-index: 999;
}
HTML:
<ul id="menu">
<li data-menuanchor="firstPage">Visit Counter</li>
<li data-menuanchor="secondPage">Feature Image</li>
<li data-menuanchor="3rdPage">Big Image</li>
<li data-menuanchor="4thpage">Product Specs 1</li>
<li data-menuanchor="4thpage">Product Specs 2</li>
<li data-menuanchor="4thpage">Product Specs 3</li>
<li data-menuanchor="4thpage">Customer Care</li>
<li data-menuanchor="4thpage">Our App</li>
<li data-menuanchor="4thpage">Reservation/Contact</li>
</ul>
<div id="fullpage">
<!-- Section 0 -->
<div class="section" id="section0">
<h1>Van Dutch</h1>
<p>Visit Counter lorem ipsum </p>
</div>
<!--Section 1 -->
<div class="section" id="section1">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="container">
<h2>Dynamic Tabs</h2>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</div>
<!--Section 2 -->
<div class="section" id="section2">
<div class="intro">
<h1>Example</h1>
<p>HTML markup example to define 4 sections.</p>
<img src="imgs/example2.png" alt="example" />
</div>
</div>
<!--Section 3 -->
<div class="section" id="section3">
<div class="intro">
<h1>Working On Tablets</h1>
<p>
Designed to fit to different screen sizes as well as tablet and mobile devices.
<br /><br /><br /><br /><br /><br />
</p>
</div>
<img src="imgs/tablets.png" alt="tablets" />
</div>
<!--Left Sidebar -->
<div id="fp-nav" class="left" style="margin-top: -43.5px;">
<ul>
<li>
<span></span>
<div class="fp-tooltip left">fullPage.js</div>
</li>
<li>
<span></span>
<div class="fp-tooltip left">Powerful</div>
</li>
<li>
<span></span><div class="fp-tooltip left">Amazing</div>
</li>
<li>
<span></span><div class="fp-tooltip left">Simple</div>
</li>
</ul>
</div>
I managed to fix my issue using CSS.
#section1 .nav-tabs{
width: 100%;
position: absolute;
bottom: 0;
}
I have a simple accordion. What i am trying to do is that when an item within the content is clicked (How to reach us) for example, the hidden subsequent text is expanded. Once expanded, the new height of the content DIV is calculated. This newly calculated content DIV height is then assigned to the height of .wrapper. The red wrapper should then surround the entire box.
See fiddle: http://jsfiddle.net/oampz/jLQf4/1/
HTML:
<div class="wrapper">
<ul class="panel">
<li>
<div class="heading"> <a>Menu 1</a>
</div>
<div class="content">
<ul>
<h2>Top Ten Questions</h2>
<li>
How to reach us
<p class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</li>
<li>
How to email us
<p class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</li>
<li>
Contact Number
<p class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</li>
</ul>
</div>
</li>
</ul>
</div>
CSS:
.heading {
color: white;
font-weight: bold;
padding: 15px 0 15px 20px;
background: grey;
}
.content {
background: #99CCFF;
position: absolute;
}
.hide {
display: none;
}
.wrapper {
background: #FFD1E0;
position: relative;
}
jQuery:
$(".content ul li a").click(function () {
var $this = $(this);
$this.next(".content ul li a").show(400);
$this.parent().siblings().children().next().hide();
return false;
});
UPDATE *******************************
After the .onClick, would something like:
$(".wrappper").css({'height':($(".content").height()+'px')});
Work?
UPDATE *******************************
Updated fiddle: http://jsfiddle.net/oampz/jLQf4/9/
If I understand your issue correctly, then this may help:
Demo Fiddle
Your content div doesn't have a specified width, so it's automatically wrapping whatever is inside of it, when you show your text it extends out further than it was initially.
EDIT - I think that there may be an easier way to go about what you're trying to accomplish. Instead of using JS to dynamically update the .wrapper I think it would be easier to remove the position: absolute from .content. Some padding seemed to make it look the same.
CSS:
.content {
width: 280px;
background: #99CCFF;
padding: 10px 0;
//position:absolute;
}
I have started designing a template for my webpage using html and for first time.
I have used divs inside the body tag.Everything looks fine when the screen is maximized.
But if i minimize the screen, the alignment looks very odd.How can i design the webpage so that it fits the screen all the time.Here is my sample code.
<body height="100%">
<table width="100%" style="border-spacing: 0;">
<tr>
<td></td>
</tr>
</table>
<div>
<div style="float: left; position:relative;width:700px;height:75px;border:2px solid black;">
</div>
<div style="float: right; width:530px;height:260px;border:2px solid black;">
</div>
<div id="calendartable" style="float:right;position:relative;width:530px;height:30px;border:2px solid black;"></div>
</body>
You are talking something called responsive design Check this
It's very hard to understand what you actually want to accomplish.
First of all, only use for real tables, such as a timetable, or something you would use Exel for. We don't use tables in modern webdesign anymore. Really. :)
Secondly, you should try to come up with an idea of how your site should look like. Before you do any code at all.
A very simple site with "responsive" design:
<body>
<div id="main">
<header>
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</nav>
</header>
<div id="content" class="content">
<h1>My page title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit eligendi non quaerat tempora totam similique aliquid quas architecto rem ratione iure recusandae. Sit incidunt sint amet maxime necessitatibus expedita aspernatur?</p>
<h2>Subtitle</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam cupiditate similique nostrum impedit nulla doloremque assumenda quis provident ducimus nihil iusto veniam voluptatibus distinctio aperiam et vel quae ex libero!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti repellendus quibusdam praesentium cum facilis laboriosam numquam dolor atque cupiditate ullam quasi optio? Ratione maxime quam dolores sint dicta rerum.</p>
</div>
<footer class="footer">
<p>© 2014 – My Fancy Pagename.</p>
<p>Please do copysteal. You're free to use whatever you like from this page as long as you attribute me and link back.</p>
</footer>
</div>
(http://jsfiddle.net/n3gn5/)
As you can see here, I am not using any inline-CSS (that style="color:red;" stuff), but I have the CSS in an extra file:
body {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
nav ul li {
list-style: none;
display: inline;
}
nav ul li a {
text-decoration: none;
color: gray;
margin-right: 10px;
}
h1 {
font-size: 80px;
font-weight: 100;
color: orange;
}
footer {
font-size: 12px;
color: gray;
font-weight: 100;
}
#main {
width: 70%;
margin: auto;
}
With the jsfiddle link, you can mess around and see the result if you like.
I would really recommend to get some help with HTML, CSS and JavaScript. Codecademy does some really nice and free courses. On the other hand there are quite some good books out there. Just make sure with books or articles online: Pick some that are not older than a few years. If you pick up a book or tutorial from 1997, you'll learn wrong stuff, you'll learn bad habits and behavior. It will possibly work (table-layouts), but you won't have any fun with it, nor be able to create good websites with that knowledge.
If you're done there and have special questions, come back and ask them.
Your question feels a little like "How do I build a car? I have no idea!". There is no good answer to that kind of questions.
I hope I could help anyway. :)
you can use bootstrap to develop a responsive web page.
Else, you need to understand the rules about the responsive design. try to follow one of this example and understand how to use MediaQueries ;)
http://www.hongkiat.com/blog/responsive-web-tutorials/
I am working on a prototype for a mega menu type navigation bar. The way that it functions is someone rolls over a main menu item, and the large drop down section appears.
I also want to include the ability to have embedded Youtube videos in the drop down sections. My problem with this, is when a drop down section that contains a video is exited, the video will continue to play in the background.
My issue that I'm running into is I cannot seem to figure out how to dynamically instantiate, get, and pause the videos in an open drop down.
I've read through the API documentation and I've seen the manual instantiation of the YT.Player objects, but I would ideally want to do this dynamically and be able to pause a given YT.Player instance.
I DO NOT want to just remove the source of the iFrame and reassign it back to the iFrame. This just creates more HTTP requests.
Here's my fiddle so far. And my code:
The HTML:
<ul id="mainNav">
<li>
Nav
<div class="secondaryNav">
<div class="subnavFeature"><img width="200" src="http://www.designcrowd.com/img/blog/google.png"></div>
<div class="left">
<p>Item 1</p>
<p>Item 2</p>
</div>
</div>
</li>
<li>
Nav
<div class="secondaryNav">
<div class="subnavFeature"><img width="200" src="http://www.designcrowd.com/img/blog/google.png"></div>
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
</div>
</li>
<li>
Nav
<div class="secondaryNav">
<div class="subnavFeature"><img width="200" src="http://www.designcrowd.com/img/blog/google.png"></div>
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
<p>Item 4</p>
<p>Item 5</p>
</div>
</li>
<li>
Nav
<div class="secondaryNav">
<div class="subnavFeature"><img width="200" src="http://www.designcrowd.com/img/blog/google.png"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, nesciunt, doloremque ratione officia voluptate placeat recusandae totam libero explicabo magnam labore a delectus commodi dolor iusto quae atque ipsum aliquid!</p>
</div>
</li>
<li>
Nav
<div class="secondaryNav">
<div class="subnavFeature"><iframe id="trainingYTVideo" class="youtubeVideo" width="560" height="315" src="http://www.youtube.com/embed/3f7l-Z4NF70?enablejsapi=1" frameborder="0" allowfullscreen></iframe></div>
<p>Item 1</p>
</div>
</li>
<li>
Nav
<div class="secondaryNav">
<div class="subnavFeature"><img width="200" src="http://www.designcrowd.com/img/blog/google.png"></div>
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
</div>
</li>
</ul>
The CSS:
#mainNav{width: 960px; position: relative; padding: 0; margin: 0;}
#mainNav > li { float: left; width:120px; padding:0 20px; height:30px; background: #ccc; list-style: none;}
#mainNav > li:nth-child(2n) {background: #ddd;}
#mainNav > li:hover{background: #eee;}
#mainNav .secondaryNav{ display: none; position:absolute; width: 940px; left:0; top: 30px; background:#eee; padding: 10px;}
.subnavFeature{float: left; padding: 10px;}
.left{float: left;}
The JS:
// jQuery 1.9.1
$(function(){
$('#mainNav > li').hover(
function(){
$(this).find('.secondaryNav').stop(true, true).fadeIn(200);
},
function(){
$(this).find('.secondaryNav').stop(true, true).fadeOut(200, function(){
var videos = $(this).find('.youtubeVideo');
if( videos.length > 0 ){
// pause each video
}
});
}
);
});
TL;DR: How do I dynamically instantiate, get, and pause the videos in an open drop down?
Here's what I ended up doing:
JS
var youtubeVideo1,
youtubeVideo2,
youtubeVideo3,
youtubeVideos;
function onYouTubeIframeAPIReady() {
youtubeVideo1 = new YT.Player('youtubeVideo1');
youtubeVideo2 = new YT.Player('youtubeVideo2');
youtubeVideo3 = new YT.Player('youtubeVideo3');
youtubeVideos = [youtubeVideo1, youtubeVideo2, youtubeVideo3];
}
$(function () {
$('#mainNav > li').hover(
function () {
$(this).find('.secondaryNav').stop(true, true).fadeIn(200);
},
function () {
$(this).find('.secondaryNav').stop(true, true).fadeOut(200, function () {
// var youtubeVideos = $(this).find('.youtubeVideo');
if (youtubeVideos.length > 0) {
$.each(youtubeVideos, function(){
this.pauseVideo();
});
}
});
});
});
HTML
<ul id="mainNav">
<li>
Nav
<div class="secondaryNav">
<div class="subnavFeature"><img width="200" src="http://www.designcrowd.com/img/blog/google.png"></div>
<div class="left">
<p>Item 1</p>
<p>Item 2</p>
</div>
</div>
</li>
<li>
Nav
<div class="secondaryNav">
<div class="subnavFeature"><iframe id="youtubeVideo1" width="560" height="315" src="http://www.youtube.com/embed/sERJZ5KJHz0?enablejsapi=1" frameborder="0" allowfullscreen></iframe></div>
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
</div>
</li>
<li>
Nav
<div class="secondaryNav">
<div class="subnavFeature"><img width="200" src="http://www.designcrowd.com/img/blog/google.png"></div>
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
<p>Item 4</p>
<p>Item 5</p>
</div>
</li>
<li>
Nav
<div class="secondaryNav">
<div class="subnavFeature"><img width="200" src="http://www.designcrowd.com/img/blog/google.png"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, nesciunt, doloremque ratione officia voluptate placeat recusandae totam libero explicabo magnam labore a delectus commodi dolor iusto quae atque ipsum aliquid!</p>
</div>
</li>
<li>
Nav
<div class="secondaryNav">
<div class="subnavFeature"><iframe id="youtubeVideo2" class="youtubeVideo" width="560" height="315" src="http://www.youtube.com/embed/3f7l-Z4NF70?enablejsapi=1" frameborder="0" allowfullscreen></iframe></div>
<p>Item 1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, molestiae vel consequuntur tempora optio aut saepe eum perferendis. Atque, debitis, veniam iste vero voluptatibus amet omnis ducimus commodi labore reiciendis.</p>
</div>
</li>
<li>
Nav
<div class="secondaryNav">
<div class="subnavFeature"><iframe id="youtubeVideo3" class="youtubeVideo" width="560" height="315" src="http://www.youtube.com/embed/RmMojHCPMJ4?enablejsapi=1" frameborder="0" allowfullscreen></iframe></div>
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
</div>
</li>
</ul>
I'm counting on not having more than 6 videos in this navigation bar at any given time.
You do not use youtube js api in the right way. To make your job easy i recommend to you to include this small plugin and then you will load your videos like :
<div class="youtubeVideo" data-youtube-id="3f7l-Z4NF70"></div>
That if from your fiddle will look like :
if( videos.length > 0 ) {
$('.youtubeVideo', this).trigger('player-stop');
}
Note: You do not need to load something else from youtube. Everything is done here, you just have to call it like $('.youtubeVideo').ntzYoutubeEmbed();