I have two div elements side by side with scroll.
If i scroll left div automatically right div also should scroll.(Like beyond compare scroll)
<div id="leftdiv" style="overflow-y: scroll;"> Left Content</div>
<div id="rightdiv" style="overflow-y: scroll;">Right Content</div>
$("#leftdiv").on('scroll', function(evt) {
$("#rightdiv").scrollTop($(this).scrollTop());
})
https://jsfiddle.net/qyvezhvq/10/
see, I hope this is helpful
<script type="text/javascript">
$(function(){
$( "#leftdiv" ).scroll(function() {
if($( "#leftdiv" ).scrollTop() > 0)
{
$("#rightdiv").scrollTop($( "#leftdiv" ).scrollTop());
}
});
$( "#rightdiv" ).scroll(function() {
if($( "#rightdiv" ).scrollTop() > 0)
{
$("#leftdiv").scrollTop($( "#rightdiv" ).scrollTop());
}
});
});
</script>
Thanks.
Related
I want to close a Div when i click on the Background div(SearchBlur).
My problem is if i click on the shown div it closes also.
here is my javascrip code
SearchBlur.addEventListener('click', closePopup);
function closePopup(){
if(counter == 1){
$( "#search_input" ).animate({ "left": "-=300px"}, "normal" );
$('.SearchBlur').fadeOut("normal");
counter = 0;
}
}
here my html
<div class="SearchBlur" id="SB_Back">
<div class="div_container" id="container">
<div class="grid_div">
<div id="gridwrapper">
</div>
</div>
</div>
</div>
the Programm looks like this
i want to close the popup wehn i click on the dark background
sorry for my bad english :D
Use event.stopPropagation(); onclick the child you want
var counter = 1;
$( ".SearchBlur" ).on( "click", function() {
if(counter == 1){
$( "#search_input" ).animate({ "left": "-300px"}, "normal" );
$('.SearchBlur').fadeOut("normal");
counter = 0;
}
});
$( ".div_container" ).on( "click", function() {
event.stopPropagation();
});
.SearchBlur{
background:blue;
}
.div_container{
width:100px;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="SearchBlur" id="SB_Back">
<div class="div_container" id="container">
<div class="grid_div">
<div id="gridwrapper">div_container
</div>
</div>
</div>
</div>
Try add a listener to the child div with following code
event.stopPropagation();
Which div are you trying to close?
From what I can see, you're fading out the highest level div, so all markup nested within SearchBlur will also be hidden. I assume you want to target a deeper nested div, for example:
function closePopup(){
if(counter == 1){
$( "#search_input" ).animate({ "left": "-=300px"}, "normal" );
$('.div_container').fadeOut("normal");
counter = 0;
}
}
In a simple way your html looks like:
<div class="blur">
<div class="popup"></div>
</div>
Your JS is just like this:
$('.blur').on('click', function (e){
if (e.target === this)
$(this).fadeOut();
});
Here is codepen: https://codepen.io/alexmoronto/pen/xaKvxg
I'm trying to scroll to the next div when the current div almost came to its lower limit.
I'm using the jQuery plugin MouseWheel. The following code that I have, run the animation scrollTop when I scroll. But not when it reaches a certain desired point that would be its lower limit. Because, some div contain a lot of text with images.
This is the structure HTML
<html>
[...]
<body>
<div id="main">
<div class="item">
[Only a Image]
<!-- Only a Img? I'm 2px distance to the next div OK, ScrollTop When Scroll1 -->
</div>
<div class="item">
[Some Text]
<!-- mmmm Some text. Ok, I let you read this.. Scroll 1.. Scroll 2.. Scroll 3..
Wait! I'm 40px distance to the next div ... scrollTop -->
</div>
<div class="item">
[Some text with Image]
<!-- mmmm Some text with Image. Ok, I let you read this.. Scroll 1.. Scroll 2.. Scroll 3.. Scroll 4... Scroll 5.. Scroll 6..
Wait! I'm 40px distance to the next div ... scrollTop -->
</div>
<div class="item">
[....]
</div>
</div>
</body>
</html>
This is the JS:
$('#main').on('mousewheel', '.item', function(e) {
if (e.deltaY < 0) {
$('html, body').animate({
scrollTop: $(e.currentTarget).next().offset().top
}, 1000);
} else {
$('html, body').animate({
scrollTop: $(e.currentTarget).prev().offset().top
}, 1000);
}
e.preventDefault();
});
Add the hight of the element to the offset
$('#main').on('mousewheel', '.item', function(e) {
if ($(document).scrollTop() >= $(e.currentTarget).offset().top+$(e.currentTarget).height();) {
$('html, body').animate({
scrollTop: $(e.currentTarget).next().offset().top;
}, 1000);
}
e.preventDefault();
});
I want to create a sticky div as smooth as in this example: http://www.nytimes.com/interactive/2010/11/13/weekinreview/deficits-graphic.html?src=tp&_r=0
Right now, my example isnt smooth at all, but really jumpy. I have this JS-code:
$(window).scroll(function () {
var scroll_top = $(this).scrollTop();
if (scroll_top > 66) {//height of header
$('.wrapper').addClass('sticky');
} else {
$('.wrapper').removeClass('sticky');
}
});
And the HTML:
<div class="wrapper">
<h4>Ausgaben in Millionen Franken</h4>
<div class="background">
<div id="kunstmuseum"></div><div id="historisch"></div><div id="naturhist"></div><div id="kulturen"></div><div id="antik"></div><div id="beyeler"></div><div id="weitereMuseen"></div><div id="theaterBasel"></div><div id="kaserne"></div><div id="weitereTheater"></div><div id="sinfonie"></div><div id="jazz"></div><div id="rock"></div><div id="literatur"></div><div id="erbe"></div><div id="wettbewerb"></div><div id="weiteres"></div><div id="zoo"></div>
</div>
<div id="eins">0</div>
<div id="zwei">30</div>
<div id="drei">60</div>
<div id="vier">90</div>
<div id="fuenf">120</div>
<div id="eingespart"><h4>Total eingespart: <div id="totalSum">0 CHF</div></h4></div>
</div>
Here is the jsfiddle: http://jsfiddle.net/w640ftLf/3/
It's not really how I would do it, but your function works fine.
The easiest way to fix your problem is to add padding-top: 66px; (66 being the header height) to the body element at the same time you add the class 'sticky'.
Let me know if this works for you.
It looks like you're attaching the sticky class to the wrong element. Try this, instead:
$(window).scroll(function () {
var scroll_top = $(document).scrollTop();
if (scroll_top > 66) {//height of header
$('.background').addClass('sticky');
} else {
$('.background').removeClass('sticky');
}
});
Also, for education, you can take a look at how your example is doing it.
I have the following html:
<div class="container" id="1"></div>
<div class="container" id="2"></div>
<div class="container" id="3"></div>
<div class="details" id="1"></div>
<div class="details" id="2"></div>
<div class="details" id="3"></div>
and jQuery:
$(document).ready(function () {
$('.container').each(function () {
$(this).click(function () {
var elem = $(this),
containerId = elem.attr('id'),
activeId = $(containerId + '.active');
$(this).toggleClass('active').siblings().removeClass('active');
$('#details-' + containerId).toggleClass('visible').siblings().removeClass('visible');
});
});
});
What I'm trying to do is see if any other .container div has the same position top as the active container (the one I just clicked). If they don't have the same top position, then I'll slide them down and display the details in full width.
So I'm thinking that something like this should work - $(this) meaning the active .container div :
if($(this).siblings().position().top == $(this).position().top) {
// add some class to EACH sibling that has equal top position
}
but I'm not entirely sure how to do it. Any help would be greatly appreciated!
You need to something like
var top = $(this).position().top;
var $sibs = $(this).siblings().filter(function(){
return $(this).position().top == top
})
//do something with the matching siblings refferred by $sibs
$(this).siblings().position().top will return the top value of the first sibling elements, it will not check the value of rest of the siblings.
$(window).resize is not working, what am I missing?
So I have this page with a single vertical menu of 350px width, centered horizontally. The links open iframe's that show different content. The iframe that shows an external site gets his width through: $("#iframeweb").width($(document).width() - $('#menu').width()) so that it fills up the screen, pushing the menu to the side.
That part works, but it also needs to change the width on resize of the window, but it does nothing...
the code:
<div id="wrapper">
<div id="outer">
<div id="inner">
<iframe name="iframeweb" id="iframeweb"></iframe>
<div id="menu">
</div>
<iframe name="iframeA4" id="iframeA4"></iframe>
</div>
</div>
</div>
<script type="text/javascript">
$(window).resize(function() {
$("#iframeweb").width($(document).width() - $('#menu').width());
};
</script>
<script type="text/javascript">
$("#linkA4").click(function(){
$("#iframeA4")
.hide('fast')
.animate({"width": "0px"}, 'fast')
.animate({"width": "210mm"}, 'fast')
.show('fast');
$("#iframeweb").hide('fast');
});
$("#linkweb").click(function(){
$("#iframeA4")
.animate({"width": "0px"}, 'fast')
.hide('fast');
$("#iframeweb")
.hide('fast')
.width($(document).width() - $('#menu').width())
.show('fast');
});
</script>
You have a simple syntax error, closing the parenthesis
$(window).resize(function() {
$("#iframeweb").width($(document).width() - $('#menu').width());
}); // <--