Develop Reference

Is it possible to use one script to move mulitple hrefs to a class without having to use nth-child

Say I have a few divs that look like this:
<div class="Box">
<img src=../image.jpg>
<div class="mask">
<a href="link" class="Link">
</div>
</div>
<div class="Box">
<img src=../image.jpg>
<div class="mask">
<a href="link" class="Link">
</div>
</div>
<div class="Box">
<img src=../image.jpg>
<div class="mask">
<a href="link" class="Link">
</div>
</div>
is it possible to take the hrefs and move them to the Box class without having to use nth-child in the script?

I assume you like to make the whole outer div area clickable.
I solved this as follows.
$(document).ready(function () {
$('[data-clickable-area]').click(function (e) {
e.preventDefault();
e.stopPropagation();
$(this).find('a').first().trigger('click');
});
$('[data-clickable-area] a').click(function (e) {
// triggering the default handler of browser did not succeed
window.location = $(this).attr('href');
e.stopPropagation();
});
});
[data-clickable-area] {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="Box" data-clickable-area>
<img src=../image.jpg>
<div class="mask">
<a href="https://duckduckgo.com/" class="Link">
</div>
</div>
<div class="Box" data-clickable-area>
<img src=../image.jpg>
<div class="mask">
<a href="https://duckduckgo.com/" class="Link">
</div>
</div>
<div class="Box" data-clickable-area>
<img src=../image.jpg>
<div class="mask">
<a href="https://duckduckgo.com/" class="Link">
</div>
</div>
Only one link for every box is supported in my solution.

Based on your comment, in that case I would use a CSS only approach. Since your client wants it on Mobile anyways simple make the parent container position relative and make the link you want to be clickable position absolute with a higher z-index and make it fill the container like so:
/*Demo styling */
.Box {
height: 200px;
width: 200px;
background: #f0f0f0;
}
body > * + * {
margin-top: 10px;
}
/*Suggested styling */
#media screen and (max-width: 1024px) {
.Box {
position: relative;
}
.Box .Link {
position: absolute;
height: 100%;
width: 100%;
z-index: 2;
left: 0;
top: 0;
}
}
<div class="Box">
<img src=../image.jpg>
<div class="mask">
<a href="link" class="Link">
<a href="link2">
</div>
</div>
<div class="Box">
<img src=../image.jpg>
<div class="mask">
<a href="link" class="Link">
<a href="link2">
</div>
</div>
<div class="Box">
<img src=../image.jpg>
<div class="mask">
<a href="link" class="Link">
<a href="link2">
</div>
</div>

After clicking on ancor tag, jQuery mouseover won't work

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>

Toggle through divs with z-index

I'm looking to toggle the z-index of 3 divs using jquery but I don't know how I would go about doing that. The desired effect I'm looking for is just to click a button that corresponds to the respective div and have the z-index of that div become a larger number in order to show the content in that div. As of now I have each div layered on top of each other.
.toggle-content {
position: absolute;
float: left;
width: 50px;
height: 50px;
}
<div id="content">
<div id="toggle">
<a href="#">
<div class="button" data-content="#1">1</div>
</a>
<a href="#">
<div class="button" data-content="#2">2</div>
</a>
<a href="#">
<div class="button" data-content="#3">3</div>
</a>
</div>
<div id="togglecontent">
<div id="1" class="toggle-content" style="z-index:9;">1</div>
<div id="2" class="toggle-content" style="z-index:8;">2</div>
<div id="3" class="toggle-content" style="z-index:7;">3</div>
</div>
</div>
So then I'm looking for how I can just click a button to have the corresponding div change its z-index to the highest value.
Any help would be greatly appreciated!

You can do something like this:
$('#toggle').on('click', 'a', function(e) {
e.preventDefault();
$( $(this).children().data('content') ).css('zIndex', 5).siblings().css('zIndex', 4);
});
.toggle-content {
position: absolute;
float: left;
width: 50px;
height: 50px;
background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div id="toggle">
<a href="#">
<div class="button" data-content="#1">1</div>
</a>
<a href="#">
<div class="button" data-content="#2">2</div>
</a>
<a href="#">
<div class="button" data-content="#3">3</div>
</a>
</div>
<div id="togglecontent">
<div id="1" class="toggle-content" style="z-index:9;">1</div>
<div id="2" class="toggle-content" style="z-index:8;">2</div>
<div id="3" class="toggle-content" style="z-index:7;">3</div>
</div>
</div>

Make left menu fixed inside parent container

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)

Why does the page shift upwards?

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.