I want to make left menu sticky, but when i give it position:fixed then the right container which is also inside parent div comes down in the left side. Please help. Thanks... This is my html structure:
<div class="midwrapper_inner">
<ul>
<li class="leftbox">
<div class="left_div content">
</div>
</li>
<li class="middlewhitebox">
<div class="right_div_content">
</div>
</li>
</ul>
</div>
<div class="midwrapper_inner">
<ul>
<li class="leftbox">
<div class="left_div content">
</div>
</li>
<li class="middlewhitebox" style="margin-left: XXXpx" >
<div class="right_div_content">
</div>
</li>
</ul>
where xxx is the width of leftbox.
To be honest though I would remove the ul completely and use divs
<div style="height: 1000px;">
<div style="width: 200px; height:200px; position: fixed; background: red;" ></div>
<div style="margin-left: 200px; width: 200px; height:200px; background: green;" ></div>
</div>
http://jsfiddle.net/wyxop52k/
Css
.leftbox{position:relative; float:left; margin-right:15px; }
Try This ...(Y)
Related
I wrote some jQuery so that when the mouse enters an area jQuery removes a display: hide; property.
It works when the page is first loaded, however, when one of the anchor tags is clicked, it in the element that was unhidden, the mouse opens the menu, but doesn't stay open once the mouse is moved over the menu.
How do I fix this?
$(document).ready(function() {
$('#kDropdown, .hidden-dropdown .row .columns').bind('mouseenter', function(e) {
$(".hidden-dropdown").removeClass("hide");
});
$('#kDropdown, .hidden-dropdown .row .columns').bind('mouseleave', function(e) {
$('.hidden-dropdown').addClass("hide");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hidden-dropdown hide">
<div class="row">
<div class="small-6 large-6 columns">
<ul style="position: relative; float: left;">
<li>Motion Sensor</li>
<li>Water Detector</li>
<li>Smart Plug</li>
<li>Door Sensor</li>
<li>Door Sensor Pro</li>
</ul>
<ul style="position: relative; float: right;">
<li>Z-Wave Extender</li>
<li>Siren</li>
<li>Mouser</li>
<li>Water Valve</li>
</ul>
</div>
<!-- Trigger to open-->
<div class="hidden-dropdown hide">
<div class="row">
<div class="small-6 large-6 columns">
<ul style="position: relative; float: left;">
<li>Motion Sensor</li>
<li>Water Detector</li>
<li>Smart Plug</li>
<li>Door Sensor</li>
<li>Door Sensor Pro</li>
</ul>
<ul style="position: relative; float: right;">
<li>Z-Wave Extender</li>
<li>Siren</li>
<li>Mouser</li>
<li>Water Valve</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Make the dropdown menu a child of the navigation link.
Assuming you want the navigation/dropdowns to be like this site, I always use something similar to the following structure (XML):
<navigation>
<link position="relative" height="30px">
<text>About Us</text>
<dropdown position="absolute" top="30px">
<dropdowncontent></dropdowncontent>
</dropdown>
</link>
... more links ...
</navigation>
See how the dropdown is a child of the link? This means that when you attach a mouseenter event to your link, hovering over the dropdown actually counts as hovering over the link. To edit your code (and take out some unnecessary bits):
$(document).ready(function() {
$('.hidden-dropdown').hide();
$('.link').mouseenter(function(){
$(this).children('.hidden-dropdown').show();
});
$('.link').mouseleave(function(){
$(this).children('.hidden-dropdown').hide();
});
});
.link {
position: relative;
height: 20px;
background-color: #ccc;
}
.hidden-dropdown {
position: absolute;
top: 20px;
background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="link">
<p>Product</p>
<div class="hidden-dropdown">
<div class="row">
<div class="small-6 large-6 columns">
<ul style="position: relative; float: left;">
<li>Motion Sensor</li>
<li>Water Detector</li>
<li>Smart Plug</li>
<li>Door Sensor</li>
<li>Door Sensor Pro</li>
</ul>
<ul style="position: relative; float: right;">
<li>Z-Wave Extender</li>
<li>Siren</li>
<li>Mouser</li>
<li>Water Valve</li>
</ul>
</div>
</div>
</div>
</div>
I have a vertically divided page, down the middle. On one side I have a list of restaurants, I would like when/if a name of a restaurant is clicked on, an image of the restaurant and a description appears inside a div that is on the other side of the divided page.
I am trying to do this with jQuery and have it so when there is a click event the id of the name clicked is stored in a variable and then that variable corresponds to a picture which will then be displayed in the div.
I am sure there is simpler way to do this, and I am drawing a blank on this, or if someone could help me in doing it in the way I am trying, it would be greatly appreciated. All insight is welcomed and thank you.
This is new to me. I know i could do it by going through each id and having its own function call but I am trying to be less repetitive and have a function that works for all. thanks
JS CODE :
$('.hover').click( function(){
var iD = $(this).attr(id);
$('.pictureofeats').removeAttr("id");
$('.pictureofeats').attr('id', iD);
});
HTML CODE :
<div class="row drinks brunchpic">
<img src="pics/buffalofood.png" width="200px"/>
<div class="row">
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="coles">Coles</li>
<br>
<li class="hover" id="716">716 (Food and Sports)</li>
<br>
<li class="hover" id="bdb">Big Ditch Brewing</li>
<br>
</ul>
</div>
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="barbill">Bar Bill</li>
<br>
<li class="hover" id="lloyds">Lloyds</li>
<br>
<li class="hover" id="abv">Allen Burger Venture</li>
<br>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6" id="foodInfo">
<div class="row">
<div class="pictureofeats" id="foodImg"></div>
</div>
</div>
Store the required classname in the data-id attribute for the restaurant name
and toggle the display for the images keeping the positioned as absolute
JS Fiddle
Structure your HTML as following:
<div class="parent">
<div class="a">
<div class="img1 active">
1
</div>
<div class="img2">
2
</div>
<div class="img3">
3
</div>
</div>
<div class="b">
<div data-id="img1">abc</div>
<div data-id="img2">def</div>
<div data-id="img3">ghi</div>
</div>
</div>
CSS:
.parent {
width: 100%;
}
.a,.b {
display: inline-block;
min-width: 48%;
}
.img1,.img2,.img3 {
position: absolute;
display: none;
}
.active {
display: block;
}
JS:
$('.b div').click(function() {
var x = $(this).data('id');
$('.a div').removeClass('active');
$('div.' + x).addClass('active');
})
try something like this:
<div id="restId" class="row drinks brunchpic"><img src="pics/buffalofood.png" width="200px"/>
<div class="row">
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="coles">Coles</li><br>
<li class="hover" id="716">716 (Food and Sports)</li><br>
<li class="hover" id="bdb">Big Ditch Brewing</li><br>
</ul>
</div>
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="barbill">Bar Bill</li><br>
<li class="hover" id="lloyds">Lloyds</li><br>
<li class="hover" id="abv">Allen Burger Venture</li><br>
</ul>
</div>
</div>
</div>
and in javascript:
$('#restId').click( function(){
$('#restId img').attr('src', newSource);
});
I think this is the logic
Do you have any idea why the page shifts upward when I click the arrows (the slideshow navigators arrows) down at the bottom?
It's been bugging me for a while now.
HTML
<div class="slideshow ">
<div class="slides">
<img class ="slide active-slide" src="http://gearnuke.com/wp-content/uploads/2015/06/GTA-5.jpg">
<img class ="slide" src="http://cdn.wegotthiscovered.com/wp-content/uploads/gta5.jpg">
<img class ="slide" src="http://www.igta5.com/images/official-artwork-trevor-yellow-jack-inn.jpg">
<img class ="slide" src="http://cdn2.knowyourmobile.com/sites/knowyourmobilecom/files/styles/gallery_wide/public/0/67/GTAV-GTA5-Michael-Sweatshop-1280-2277432.jpg?itok=nKEHENTW">
</div>
<div class="dots-container">
<ul class="slider-dots">
<a href="javascript:void(0);" class="arrow-prev" ><<</a>
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<a href="javascript:void(0);" class="arrow-next" >>></a>
</ul>
</div>
CSS
.slideshow{
background-color:#000;
text-align:center;
width:100%;
position:relative;
}
/*image slides*/
.slides{
height:100%;
max-width:100%;
}
.slide{
display:none;
margin:2em;
max-width:70%;
max-height:100%;
}
.active-slide {
display:inline;
max-width:70%;
max-height:100%;
}
/*dots*/
.slider-dots{
text-align:center;
width:100%;
font-size:1.5em;
padding:1%;
}
.dots-container{
padding:1em;
}
.slider-dots li{
display:inline;
}
.arrow-prev, .arrow-next{
font-size:16px;
color:rgb(77, 151, 201);
margin-left:1.8em;
margin-right:1.8em;
font-weight:bold;
}
a.arrow-prev:hover, a.arrow-next:hover,a.arrow-prev:active, a.arrow-next:active
{
color:#fff;
text-decoration:none;}
.active-dot{
color:#fff;
}
I have read multiple threads, but it seems there's no concrete solution to this.
Here is the jsFiddle
For these two lines:
nextSlide.fadeIn(2300).addClass('active-slide').show();
currentSlide.fadeOut(2300).removeClass('active-slide').hide();
What's happening is you remove the tile, so the page shrinks... then you add one back in so it extends. However, when it shrinks, everything moves up to accommodate it. The experience you are getting is because it's happening faster then you can perceive.
Try either reversing the order:
currentSlide.fadeOut(2300).removeClass('active-slide').hide();
nextSlide.fadeIn(2300).addClass('active-slide').show();
Or if that causes flickering, giving the parent container an absolute height.
Just change the order and then force it to scroll to the bottom of the page in this way it will stay at the bottom
nextSlide.fadeIn(2300).addClass('active-slide').show();
currentSlide.fadeOut(2300).removeClass('active-slide').hide();
$(window).scrollTop($(document).height());
You can take a look at here http://jsfiddle.net/wvgqnzf9/
You have some errors in your jsfiddle, so if you fix it, you have working app. Fix it just add jquery and bootstrap.css in resource section
I've attached working fiddle
So html should be just:
<body>
<div class="nav navbar-fixed-top">
<div class="container">
<ul class="pull-left"> <li>Team</li>
<li>Learn more</li>
<li>Contact</li>
</ul>
<ul class="pull-right"> <li>Learn more</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h3>WELCOME TO SAN ANDREAS</h3>
<p>Prepare to make your dreams come true...
<p>
</div>
</div>
<div class="actors">
<span>TEAM</span>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="http://cdn2-b.examiner.com/sites/default/files/styles/image_content_width/hash/92/f5/92f51c2146c471daad1002221888f4d3.jpg?itok=MExy-qsb"> <span>MICHAEL</span>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="http://cdn2-b.examiner.com/sites/default/files/styles/image_content_width/hash/71/92/7192e2b9c8b6a24e3c9d824942799228.jpg?itok=LVyYEoB4"> <span>TREVOR</span>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_franklin_256x256.jpg"> <span>FRANKLIN</span>
</div>
</div>
</div>
</div>
</div>
<div class="slideshow ">
<div class="slides">
<img class="slide active-slide" src="http://gearnuke.com/wp-content/uploads/2015/06/GTA-5.jpg">
<img class="slide" src="http://cdn.wegotthiscovered.com/wp-content/uploads/gta5.jpg">
<img class="slide" src="http://www.igta5.com/images/official-artwork-trevor-yellow-jack-inn.jpg">
<img class="slide" src="http://cdn2.knowyourmobile.com/sites/knowyourmobilecom/files/styles/gallery_wide/public/0/67/GTAV-GTA5-Michael-Sweatshop-1280-2277432.jpg?itok=nKEHENTW">
</div>
<div class="dots-container">
<ul class="slider-dots"> <<
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li> >>
Simple fix. set min-height of slides container.
.slides {
height: 100%;
max-width: 100%;
min-height: 500px; // set as per your requirement
}
Your slides are fadeing out meaning they are going out of DOM so causing a hole and reducing height of document and thats why its scrolling up and then next slide fadeing in. so you need to keep the container intact meanwhile, so have some fixed min height to it.
I am having an issue with my sticky nav. The problem seems to be that my JS is not applying the class I have told it to. you can view it live here http://test.makx.ca
Here is my code.
<script>
$(window).scroll(function() {
var scroll = $(window).scrollTop();
nav = $('.nav-bar').offset();
if (nav.top <= scroll) {
$('.nav-bar').toggleClass('sticky-nav');
} else {}
});
</script>
the HTML
<div class="row nav-row">
<div id="nav-bar" class="medium-12 column nav-bar">
<ul class="links">
<li>home</li>
<li>about us</li>
<li>pricing</li>
<li>contact</li>
</ul>
<ul class="links-right">
<li class="has-form">
<div class="row collapse">
<div class="large-7 small-7 columns">
<input type="text" placeholder="enter text">
</div>
<div class="large-3 small-4 pull-2 columns">
<a href="#" class="search button expand" style="padding-top: 0.6rem;
padding-bottom: 0.6rem;">Search</a>
</div>
</div>
</li>
</ul>
</div>
</div>
the CSS
.sticky-nav {
position: fixed;
top:0;
width: 100%;
display: block;
}
any feedback would be most welcoming. This has me and a friend completely stumped.
You're using the wrong selector. .nav-bar is a class selector, but you want to select the element with the id nav-bar, not the class nav-bar. Use #nav-bar as the selector instead.
Unrelated to your question, but FYI: Your use of toggleClass is going to have some odd results; it will constantly be toggling the class on and off while the user scrolls.
I tried to simulate a click on the first <li> in the <ul>. Here's the html.
<ul class="product-thumbs clearfix mCustomScrollbar _mCS_1">
<div class="mCustomScrollBox mCSB_horizontal" id="mCSB_1" style="position:relative; height:100%; overflow:hidden; max-width:100%;">
<div class="mCSB_container mCS_no_scrollbar" style="position: relative; left: 0px; width: 195px;">
<li data-full-image="/images/store_logos/e49c796f8740723601503849db95893f6592526a.jpeg" data-large-image="/images/store_logos/e49c796f8740723601503849db95893f6592526a.jpeg" class="active">
<img src="/images/store_logos/e49c796f8740723601503849db95893f6592526a.jpeg" alt="">
</li>
<li data-full-image="/images/store_logos/05838eeaff6014af6206de1cc7a60d7335e61dc1.jpeg" data-large-image="/images/store_logos/05838eeaff6014af6206de1cc7a60d7335e61dc1.jpeg" class="">
<img src="/images/store_logos/05838eeaff6014af6206de1cc7a60d7335e61dc1.jpeg" alt="">
</li>
</div>
<div class="mCSB_scrollTools" style="position: absolute; display: none;">
<div class="mCSB_draggerContainer" style="position:relative;">
<div class="mCSB_dragger" style="position: absolute; left: 0px;">
<div class="mCSB_dragger_bar" style="position:relative;"></div>
</div>
<div class="mCSB_draggerRail"></div>
</div>
</div>
</div>
</ul>
Here's my jQuery:
$(".product-thumbs > li:first").trigger('click');
Why is this not working?
try changing
$(".product_thumbs > li:first")
with
$(".product_thumbs li:first")
Because li is not direct child of ul
Here, You cannot use
$(".product-thumbs > li:first")
> is used to filter immediate children. But in your DOM structure, you have
<ul>
<div>
<li>
...
Hence the issue.
Change it to
$(".product-thumbs li:first").trigger('click')
and it should work.
Because you have written product_thumbs instead of product-thumbs ?