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>
Related
I'm having an issue transforming my horizontal scroll logic into positional one. To summarize my problem; I have a div which has overflowing elements, which need to be scrollable, but not with scrollbars/overflow, but position:left. I had OK solutions, but it all went downhill after resetting on click.
The following snippet is where I was left stranded, when you click and drag the child, it should act the same as if you were horizontally scrolling.
Also, please note, I must use mousedown/mousemove/mouseup events so that I can port the logic over to touch
Thanks in advance!
var $scrollWithin = $('#child');
var clicked = false, clickX;
$(document).on({
'mousemove': function(e) {
clicked && updateScrollPos(e);
},
'mousedown': function(e) {
clicked = true;
clickX = e.pageX;
},
'mouseup': function() {
clicked = false;
}
});
var lastLeft = 0;
var updateScrollPos = function(e) {
var left = lastLeft + (clickX - e.pageX);
$scrollWithin.css('left', left + 'px');
lastLeft = left;
}
#child {
height:200px;
width:4000px;
background: linear-gradient(to right, rgba(169,3,41,1) 0%,rgba(0,80,255,1) 100%);
position:relative;
}
#parent {
width:300px;
overflow:hidden;
border:solid 4px #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<div id="child"></div>
</div>
I have made a page (on Shopify) and I made there a fixed "go to top" arrow on the left bottom. It's okay, but when I scroll to the page bottom the arrow is will be in front of the footer, and I want it to stay above the footer.
Here is the code that I use:
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('.go-top').fadeIn(200);
} else {
$('.go-top').fadeOut(200);
}
});
$('.go-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 300);
})
});
.go-top {
position: fixed;
bottom: 2em;
right: 0.5em;
text-decoration: none;
font-size: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
↑
$(document).ready(function() {
$(window).scroll(function() {
//--------------------------- Lines added ------------------------//
var footertotop = ($('.footer').position().top);
var scrolltop = $(document).scrollTop() + window.innerHeight;
var difference = scrolltop-footertotop;
if (scrolltop > footertotop) {
$('.go-top').css({'bottom' : difference});
}else{
$('.go-top').css({'bottom' : 10});
};
//--------------------------- end ---------------------------------//
if ($(this).scrollTop() > 200) {
$('.go-top').fadeIn(200);
} else {
$('.go-top').fadeOut(200);
}
});
$('.go-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 300);
})
});
.container{height:2000px;position:relative}
.footer{height:200px;width:100%;position:absolute;bottom:0px;background:red}
.go-top {
position: fixed;
bottom: 20px;
display:none; // <---- Dont display on page load
right: 0.5em;
text-decoration: none;
font-size: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
↑
<div class="footer"></div>
</div>
add z-index to the css.
something like:
z-index: 100000
make the number as large as needed for it to be on top.
I would like to show a div when user scroll to a specific ID but I want that this div appears only after X seconds since the ID is reached by scrolling.
How could I edit this fiddle to do it?
$(document).ready(function() {
$("#dvid").hide(); //hide your div initially
var topOfOthDiv = $("#othdiv").offset().top;
$(window).scroll(function() {
if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
$("#dvid").show(200); //reached the desired point -- show div
}
});
});
http://jsfiddle.net/DnJ2z/11/
I did add only a setTimeout and more height of the body to your code and it seems to work. Play with the snippet and ask in comments if you have any questions.
If you want to do something after some delay you can use setTimeout and if you want to do something periodically you can use setInterval. These are both javascript functions and not jQuery.
If you want you can see the jQuery's .delay() method also
$(document).ready(function() {
$("#dvid").hide(); //hide your div initially
var topOfOthDiv = $("#othdiv").offset().top;
var delay = 500;
$(window).scroll(function() {
if ($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
setTimeout(function() {
$("#dvid").show(200); //reached the desired point -- show div
}, delay);
}
});
$('#update').on('click', function() {
delay = $('#delay').val();
});
$('#hide').on('click', function() {
$("#dvid").hide(200);
});
});
body {
height: 1200px;
font-family: 'Arial', Helvetica, Sans-Serif;
color: white;
font-weight: bold;
}
#othdiv {
height: 30px;
background-color: rgb(0, 140, 200);
/*just wanted this to be pretty :)*/
position: absolute;
top: 100px;
left: 0px;
}
#dvid {
background-color: rgb(34, 177, 76);
height: 50px;
position: absolute;
top: 140px;
left: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="delay" value="500">
<button id="update">Update Delay</button>
<button id="hide">Hide</button>
<div id="othdiv">
If you scroll past me, then you'll see the other div.
</div>
<div id="dvid">
Oh hello! :D
</div>
You just have to add setTimeout() method in your existing function. So just wrap your div.show inside of the setTimeout
$(document).ready(function() {
$("#dvid").hide(); //hide your div initially
var topOfOthDiv = $("#othdiv").offset().top;
$(window).scroll(function() {
if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
setTimeout(function(){$("#dvid").show(200); }, 1000);
}
});
});
This here will show your div 1 second after you scroll to it.
JSFiddle
You could just use a setTimeout
var millis = 2000;
setTimeout(function() {
$("#dvid").show(200); //reached the desired point -- show div
}, millis);
But keep in mind, that this will retrigger everytime you scroll by your "breakpoint". So you should adjust this and clear your timeout first if necessary or use a flag and don't try to show it again:
$(document).ready(function() {
var divIsShown = false;
var millis = 2000; // 2 seconds
$("#dvid").hide(); //hide your div initially
var topOfOthDiv = $("#othdiv").offset().top;
$(window).scroll(function() {
if(!divIsShown && $(window).scrollTop() > topOfOthDiv) { //scrolled past the other div
setTimeout(function() {
$("#dvid").show(200); //reached the desired point -- show div
divIsShown = true;
}, millis);
}
});
});
http://healthunit.com has a clean horizontal scrolling menu at the top of the screen once you view it from a mobile phone device. I'm trying to mimic that same exact functionality thanks to a site I'm redesigning with a huge level of navigation elements.
Requirements:
Left and right scroll click options
Centered list item option centered in the space
Only one list item visible at a time
Horizontal Scrolling & Responsive
Clicking the last or first option in the list will take you to either the first option or last option in the list
My current html for this section is:
<nav id="sub" class="clearfix">
<ul class="wrapper">
<li>Estimate</li>
<li>About</li>
<li>Customer Information</li>
<li>Financing</li>
<li>Careers</li>
<li>Locate Us</li>
<li>Inspiration</li>
</ul>
</nav>
The CSS currently attached to it is:
nav#sub {
background: #004173;
background: linear-gradient(to bottom, #004173 0%,#014f8d 100%);
background: -moz-linear-gradient(top, #004173 0%, #014f8d 100%);
background: -ms-linear-gradient(top, #004173 0%,#014f8d 100%);
background: -o-linear-gradient(top, #004173 0%,#014f8d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#004173), color-stop(100%,#014f8d));
background: -webkit-linear-gradient(top, #004173 0%,#014f8d 100%);
border-bottom: #00325a solid 3px;
box-shadow: 0 4px 6px 0 #BFBFBF;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004173', endColorstr='#014f8d',GradientType=0 );
webkit-box-shadow: 0 4px 6px 0 #BFBFBF;
}
#sub ul {
text-align: center;
}
#sub ul li {
padding: 10px 3.3%;
}
#sub a {
color: #fff;
font-size: 10pt;
font-weight: 400;
text-decoration: none;
}
#sub ul a:hover li {
background: #007FEB;
}
So, finally I think I have what you are looking for:
Fiddle: http://jsfiddle.net/fzXMg/2/
CSS and HTML is in the Fiddle...
JS:
$(function(){
var state = 0;
var maxState = 6;
var winWidth = $(window).width();
$(window).resize(function(){
winWidth = $(window).width();
$('.box,.container_element').width(winWidth-100);
}).trigger('resize');
$('#lefty').click(function(){
if (state==0) {
state = maxState;
} else {
state--;
}
$('.container_element').animate({scrollLeft:((winWidth-100)*state)+'px'}, 800);
});
$('#righty').click(function(){
if (state==maxState) {
state = 0;
} else {
state++;
}
$('.container_element').animate({scrollLeft:((winWidth-100)*state)+'px'}, 800);
});
});
This uses jQuery again.
Now that the healthunit site has changed the original question is not completely clear.
To make a nav menu that scrolls horizontally uses arrow buttons (instead of scrollbar) can be implemented with a little jQuery and easily converted to pure JavaScript.
var $bar = $('.nav');
var $container = $('#outer');
var widths = {};
var scrollOffset = 0;
var container = document.getElementById("outer");
var bar = document.getElementById("bar");
function setMetrics() {
metrics = {
bar: bar.scrollWidth||0,
container: container.clientWidth||0,
left: parseInt(bar.offsetLeft),
getHidden() {
return (this.bar+this.left)-this.container
}
}
updateArrows();
}
function doSlide(direction){
setMetrics();
var pos = metrics.left;
if (direction==="right") {
amountToScroll = -(Math.abs(pos) + Math.min(metrics.getHidden(), metrics.container));
}
else {
amountToScroll = Math.min(0, (metrics.container + pos));
}
$bar.css("left", amountToScroll);
setTimeout(function(){
setMetrics();
},400)
}
function updateArrows() {
if (metrics.getHidden() === 0) {
$(".toggleRight").addClass("text-light");
}
else {
$(".toggleRight").removeClass("text-light");
}
if (metrics.left === 0) {
$(".toggleLeft").addClass("text-light");
}
else {
$(".toggleLeft").removeClass("text-light");
}
}
function adjust(){
$bar.css("left", 0);
setMetrics();
}
$(".toggleRight").click(function(){
doSlide("right");
});
$(".toggleLeft").click(function(){
doSlide("left");
});
$(window).on("resize",function(){
// reset to left pos 0 on window resize
adjust();
});
setMetrics();
Demo: https://www.codeply.com/go/HgAVBVfQFY
Check out that fiddle: http://jsfiddle.net/zEPQ5/15/
It's not perfect in meaning of design, but it shows off the concept.
I used jQuery with that.
$(function(){
var state = 0;
$('#up').click(function(){
state += 1;
$('ul.wrapper').animate({marginTop:(15-state*35)+'px'},400);
});
$('#down').click(function(){
state -= 1;
$('ul.wrapper').animate({marginTop:(15-state*35)+'px'},400);
});
});
Check out this jsfiddle: http://jsfiddle.net/7vvdB/
Basically, create an outer container with a max-width of 100% and a overflow-x:scroll, then create an inner container with a fixed width large enough to fit all of your elements, then put all of your elements in the inner container.
.container_element
{ white-space:nowrap
min-width:100%;
overflow-x:scroll;
overflow-y:hide;
}
.inner_container
{
width:5000px;
}
}
I'm trying to make a background fade in when you mouse over a box.
Box1 is the box I mousesover, and hover1 is the new background that comes in. This actually works pretty well. However, it loads the acript, meaning, that if i go crazy with my mouse over the box, the fadeing will continue endless, even when my mouse is standing still. I need to add some kind of stop function..
Content is a text that changes in a contentbox when I mouseover. This works fine.
$("#box1").mouseover(function(){
$("#background").switchClass("nohover", "hover1", 500);
$("#content").html(box1);
});
$("#box1").mouseout(function(){
$("#background").switchClass("hover1", "nohover", 150);
$("#content").html(content);
});
I've also tried with var, but I still have the same problem. If I mouseover fast, the fading keeps running.
var goeft = 0;
$("#box1").mouseover(function(){
if(goeft == 0) {
$("#background").switchClass("nohover", "hover1", 500);
$("#content").html(box1);
goeft = 1;
}
});
$("#box1").mouseout(function(){
$("#background").switchClass("hover1", "nohover", 150);
$("#content").html(content);
goeft = 0;
});
Css code -v-
/* CSS Document */
body
{
background-color:#B1EB78;
}
#wrapper
{
border:5px white solid;
border-radius:15px;
background-image:url(../images/mill.jpg);
}
#header
{
height:120px;
background-image:url(../images/logo.png);
background-repeat:no-repeat;
}
#content
{
height:250px;
background-image:url(../images/trans_white.png);
border:1px black solid;
border-radius:5px;
}
#space
{
height:40px;
}
#space2
{
height: 10px;
}
#box1
{
height:250px;
background-image:url(../images/trans_green.png);
}
#background
{
width:100%;
height:100%;
border-radius:9px;
}
.hover1
{
background-color:red;
}
.nohover
{
}
var goeft = 0;
$("#box1").mouseenter(function(){
if(goeft == 0) {
$("#background").switchClass("nohover", "hover1", 500);
$("#content").html(box1);
goeft = 1;
}
});
$("#box1").mouseleave(function(){
$("#background").switchClass("hover1", "nohover", 150);
$("#content").html(content);
goeft = 0;
});
I have no idea about the classes but i think mouseenter and mouseleave are better alternative for mouseout and mouseover