Develop Reference

Hover on div triggers div that will stay if hovered on

I have this div that when it's hovered on, it will activate this other div. When the user moves his mouse on the activated div, I want that div to stay. Here is a snippet.
When you hover on the gold box, the purple box hides and the grey box is shown. Instead of disappearing, I want the grey box to stay when the mouse is over the grey box. And then when the mouse hovers over the gold box the second time, the grey box will hide itself, and the purple will return. How can I do this with smooth animations in Jquery?
$(function() {
$("#startMenu").hide();
var timeoutId;
$("#menuDesktop").hover(function() {
if (!timeoutId) {
timeoutId = window.setTimeout(function() {
timeoutId = null;
$("#topBarDesktop").slideUp('400');
$("#startMenu").slideDown('1000');
}, 400);
}
},
function() {
if (timeoutId) {
window.clearTimeout(timeoutId);
timeoutId = null;
} else {
$("#startMenu").slideUp('slow');
$("#topBarDesktop").slideDown('400');
}
});
});
#topBarDesktop {
position: fixed;
top: -.1em;
right: -1em;
padding: 20px 100%;
background: purple;
}
#menuDesktop {
width: 50px;
position: absolute;
height: 50px;
background: gold;
display: inline-block;
vertical-align: top;
float: left;
left: -15px;
top: -15px;
}
#menuDesktop:hover {
background: red;
}
#startMenu {
background: grey;
padding: 100% 100%;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="topBarDesktop">
</div>
<div id="menuDesktop">
</div>
<div id="startMenu">
</div>

You can change your else to and else if in order to check if #startMenu is hovered on or not. Then you'd also just want to make sure to call .hover() on both #menuDesktop and #startMenu, so that things slide back into place when you hover off of #startMenu as well.
$("#menuDesktop, #startMenu").hover(function() { //Added #startMenu to selector
if (!timeoutId) {
timeoutId = window.setTimeout(function() {
timeoutId = null;
$("#topBarDesktop").slideUp('400');
$("#startMenu").slideDown('1000');
}, 400);
}
}, function() {
if (timeoutId) {
window.clearTimeout(timeoutId);
timeoutId = null;
} else if ($("#startMenu:not(:hover)").length && $("#menuDesktop:not(:hover)").length) { //Checks that neither #startMenu or #menuDesktop is hovered on.
$("#startMenu").slideUp('slow');
$("#topBarDesktop").slideDown('400');
}
});
Check out this working fiddle

i have added few more lines to Kld script
$(function() {
$("#startMenu").hide();
var timeoutId;
$("#menuDesktop").hover(function() {
$("#menuDesktop").css("background", "red");
if (!timeoutId) {
timeoutId = window.setTimeout(function() {
timeoutId = null;
$("#topBarDesktop").stop(true, true).slideUp('400');
$("#startMenu").stop(true, true).slideDown('1000');
}, 400);
}
},
function() {
if (timeoutId) {
window.clearTimeout(timeoutId);
timeoutId = null;
} else {
$("#startMenu").stop(true, true).slideUp('slow');
$("#topBarDesktop").slideDown('400');
$("#menuDesktop").css("background", "gold");
}
});
$("#startMenu").hover(function(){
$( this).stop();
$("#topBarDesktop").stop(true, true);
$("#menuDesktop").css("background", "red");
}, function(){
$("#startMenu").stop(true, true).slideUp('slow');
$("#topBarDesktop").slideDown('400');
$("#menuDesktop").css("background", "gold");
})
});

jQuery detect if div is outside of view port vertically

I'm trying to detect when my div gets opened is the top of it outside of the view-port & if it is add a class to adjust the css.
So basically in this example on hover half of the div is missing so that should then add the class that would turn the div green. Because the code is meant to detect that the div is outside the viewport.
But I just cant get it to sync. I'm obviously doing something wrong here.
UPDATE
I have just noticed that it technically is working what is happening if both the top and bottom of the div goes outside of both the bottom and top of the view port then it triggers. I need it to only trigger when it goes out of the top.
JSfiddle
$(document).on("mouseenter", ":has('.infotip')", function() {
$(this).children(".infotip").addClass("active");
});
$(document).on("mouseleave", ":has('.infotip')", function() {
$(this).children(".infotip").removeClass("active");
});
// Infotip on screen
$(document).on("mouseenter", ":has('.infotip.onscreen')", function() {
var $target = $(this).children(".infotip");
if ($target.length) {
var $bounce = $target.offset().top + $target.height();
if ($bounce > $(window).height()) {
$target.addClass("test");
} else {
$target.addClass("top");
}
}
});
.infotip {
display: none;
height:500px;
width:100px;
position:absolute;
left:50px;
top:-250px;
}
.infotip.active {
display: block;
}
/* goes red when past top of viewport (which it will not do in this example) */
.infotip.top {
background-color: rgba(249, 14, 18, 1.00)
}
/* goes green if visible (which it should do when hovering) */
.infotip.test {
background-color: rgba(35, 223, 51, 1.00)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="team-card align">
hover me
<div class="infotip onscreen">
Iam infotip
</div>
</div>

Here was the issue, on-hover it detect div height and if it overflows then changes the div to green.
$(document).on("mouseenter", function() {
var $target = $(".team-card").children(".infotip");
if ($target.length) {
var $bounce = $target.offset().top + $target.height();
if ($bounce > $(window).height()) {
$target.addClass("test");
} else {
$target.addClass("top");
}
}
});

So I figured this out myself. Finally had a brain storm after realising what the height was down as mentioned on my update.
What I should have been doing is calculating the distance from the top and then detecting if that distance is less than one e.g. 0, -5, -250 etc. Then kick my statement in.
Just wasn't thinking about this one in the right manner for a bit.
JSFiddle
$(document).on("mouseenter", ":has('.infotip')", function() {
$(this).children(".infotip").addClass("active");
});
$(document).on("mouseleave", ":has('.infotip')", function() {
$(this).children(".infotip").removeClass("active");
});
// Infotip on screen
$(document).on("mouseenter", ":has('.infotip.onscreen')", function() {
var $target = $(this).children(".infotip");
if ($target.length) {
var scrollTop = $(window).scrollTop(),
elementOffset = $target.offset().top,
bounce = (elementOffset - scrollTop);
if (bounce < 1 ) {
$target.addClass("test");
} else {
$target.addClass("top");
}
}
});
.infotip {
display: none;
height:500px;
width:100px;
position:absolute;
left:50px;
top:-250px;
}
.infotip.active {
display: block;
}
/* goes red when past top of viewport (which it will not do in this example) */
.infotip.top {
background-color: rgba(249, 14, 18, 1.00)
}
/* goes green if visible (which it should do when hovering) */
.infotip.test {
background-color: rgba(35, 223, 51, 1.00)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="team-card align">
hover me
<div class="infotip onscreen">
Iam infotip
</div>
</div>

If (or maybe hasClass) is being ignored - javascript

You may understand this better by checking the CodePen version.
Going straight to the point, the issue is: when you go to the second or third "slide" (the reddish or bluish colors), and then attempt to resize your window, its interior will become grayish~black. That's not supposed to happen.
The black~gray content must stay within the black~gray "slide", the red in the red one, the blue in the blue one.
I'm making a site which follows this logic, but with images. I made this codepen to simplify since my code is awfully complicated and there's tons of unnecessary code.
I believe the problem is in the if($('body').hasClass('first')){if$(window).resize(function... etc; because the if seems to be ignored since the #glasses div is always gray/black if you resize your window.
Since I'm a beginner in Javascript I don't see anything wrong, in fact I just can't understand why something as simple as a if wouldn't work.
Any help is appreciated. Thanks!
var nums = ['first', 'second', 'third'];
var curr = 0;
$('.next, .prev').on('click', function(e) {
var offset = $(this).hasClass('prev') ? nums.length - 1 : 1;
curr = (curr + offset) % nums.length;
$('body').removeClass();
$('body').addClass(nums[curr]);
if ($('body').hasClass('first')) {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#000");
} else {
$("#glasses").css("background", "#666");
}
event.preventDefault();
} else if ($('body').hasClass('second')) {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#00f");
} else {
$("#glasses").css("background", "#66f");
}
event.preventDefault();
} else {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#f00");
} else {
$("#glasses").css("background", "#6ff");
}
event.preventDefault();
};
})
if ($('body').hasClass('first')) {
$(window).resize(function() {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#000");
} else {
$("#glasses").css("background", "#666");
}
})
} else if ($('body').hasClass('second')) {
$(window).resize(function() {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#00f");
} else {
$("#glasses").css("background", "#66f");
}
})
} else if ($('body').hasClass('third')) {
$(window).resize(function() {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "f00");
} else {
$("#glasses").css("background", "6ff");
}
})
}
.slides-navigation a{
top: 50%;
position: fixed;
}
.prev{
left:30px;
position:absolute;
}
.next{
right: 45px;
position:absolute;
}
#glasses{
width: 50%;
height: 450px;
margin: 0 auto;
background: #000;
background-repeat: no-repeat;
background-position: 42% 86%;
}
.first{
border: #000 16px solid;
}
.second{
border: #00f 16px solid;
}
.third{
border: #f00 16px solid;
}
#media screen and (max-width:1367px){
.first{
border: #666 16px solid;
}
.second{
border: #66f 16px solid;
}
.third{
border: #6ff 16px solid;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<body class="first">
<div id="glasses"></div>
<nav class="slides-navigation desktop">
Prev>
Next
</nav>
</body>

If I understand the question correctly, the problem revolves around the $(window).resize functions being inside of the if statements, rather than the other way around.
It should look more like this:
$(window).resize(function() {
if ($('body').hasClass('first')) {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#000");
} else {
$("#glasses").css("background", "#666");
}
} else if ($('body').hasClass('second')) {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#00f");
} else {
$("#glasses").css("background", "#66f");
}
} else if ($('body').hasClass('third')) {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "f00");
} else {
$("#glasses").css("background", "6ff");
}
}
});
Otherwise your code checks for for the body's class once, applies the resize function for only that class, and never knows to check again.

Your if statement
if ($('body').hasClass
Is only being run once, when the page loads.
You should move this into the next/prev event handler, so it re-calculates the resize event every time.

Background image transition using jQuery

I made a little jQuery code that changes the background image in the box.
HTML
<div class="content-wrapper" id="box">
<div class="content">
CONTENT
</div>
</div>
jQUERY
slide=Math.floor((Math.random() * 6) + 1); slide=(slide==0?1:slide);
$("#box").attr("style", "background-image:url(images/slider/"+(slide)+".jpg);");
setInterval(function() {
$("#box").attr("style", "background-image:url(images/slider/"+(slide)+".jpg);");
slide++; if(slide>6) slide=1;
}, 6000
);
CSS
.content-wrapper{
display:table;
width:100%;
color:black;
text-align:center;
margin:0 0 0 0 !important;
padding:0px !important;
height:600px;
}
.content-wrapper > .content{
width:100%;
display: table-cell;
vertical-align:middle;
text-align:center;
font-size:36px;
font-weight:bold;
}
#box {
background-repeat: no-repeat;
background-position:center top;
background-attachment:fixed;
background-size:cover;
}
#box > .content{
background:rgba(0,0,0,0.5);
color:#FFF;
}
DEMO
My idea is when page is loaded each time show random pictures and start slide that changes image every 6 seconds. All this works nicely, but I do not know how to make a nice transition. fadeIn() or fadeOut() is out of the question because over the images I have fixed text content. I do not want to use too large libraries for background slider, so I'm interested in the simplest solution. Thank you very much.

so if you want to slide left and right Fiddle:Demo:
$(document).ready(function () {
var delay = 3000,
fade = 1000;
var banners = $('.banner');
var len = banners.length;
var i = 0;
setTimeout(cycle, delay);
function cycle() {
$(banners[i % len]).hide("slide", function(){
$(banners[++i % len]).show("slide", {
direction: "left"
});
setTimeout(cycle, delay);
});
}
});
if you want to slide up and down : Fiddle
$(document).ready(function() {
var delay = 3000, fade = 1000;
var banners = $('.banner');
var len = banners.length;
var i = 0;
setTimeout(cycle, delay);
function cycle() {
$(banners[i%len]).slideUp(fade, function() {
$(banners[++i%len]).slideDown(fade, function() {
setTimeout(cycle, delay);
});
});
}
});
you can try to combine those to come up with a nice transition.

How to make this slider control to work in both directions?

I'm trying to make a range slider but it's working in single direction(to right) only and dragging out of parent container(#volume). How can I fix this?
I've attached a demo fiddle link.
Markup
<div id="volume">
<div class="progress">
<div class="volumeslider"></div>
</div>
</div>
CSS
#volume{
width:300px;
background: #ddd;
cursor:pointer;
}
.progress{
height:10px;
background:#999;
position:relative;
width:0;
}
.volumeslider {
background: #808080;
position: absolute;
width: 20px;
height: 20px;
border-radius: 15px;
right: -10px;
top: -5px;
}
JS
$('.volumeslider').bind('mousedown', function(e){
$('.volumeslider').bind('mousemove', function(e){
$('.progress').width(e.pageX - $('.progress').offset().left + 'px');
$(this).css('left', e.pageX - ($(this).width()/2) );
});
$('.volumeslider').bind('mouseup',function(){
$('.volumeslider').unbind('mousemove');
});
});
JS Fiddle:
http://jsfiddle.net/2mYm7/

You have not taken into consideration the padding you have given to the body element.
I have made some changes to the code.
$('.volumeslider').bind('mousedown', function (e) {
console.log('binded');
$('.volumeslider').bind('mouseup', function (e) {
console.log('unbinded');
$('.volumeslider').unbind('mousemove');
});
$('.volumeslider').bind('mousemove', function (e) {
console.log('mousemove');
$('.progress').width(e.pageX - $('.progress').offset().left + 'px');
$(this).css('left', e.pageX - 25- $(this).width());
});
});
Check this jsFiddle http://jsfiddle.net/2mYm7/1/

Here's an example of how to make it work always and everywhere. Right now it will stay dragging forever if you leave the element.
It includes border checks and makes sure the body is large enough so it stops dragging wherever on the page.
http://jsfiddle.net/2mYm7/5/
var dragging = null;
function startDrag(){
console.log('started dragging', this);
var $this = $(this);
dragging = $this;
$(document.body).bind('mouseup', stopDrag);
$(document.body).bind('mousemove', drag);
}
function stopDrag(){
console.log('stopped dragging', dragging[0]);
$(document.body).unbind('mouseup', stopDrag);
$(document.body).unbind('mousemove', drag);
dragging = null;
}
function drag(e){
var slider = dragging;
var progress = slider.parent();
var container = progress.parent();
var maxOffset = container.width();
progress.width(Math.min(e.pageX - progress.offset().left, maxOffset) + 'px');
}
$('.volumeslider').bind('mousedown', startDrag);