I have dynamical list
<div id="content" class="content" data-role="content" data-scroll="y">
<div id="myDiv">
<form>
<ul id="myList" data-role="listview">
</ul>
</form>
</div>
</div>
And I want to append another list to myList, when you scrolled it to the top;
How can I detect when user scrolled it to the top?
I tried some variants of scrollTop function, like:
$(window).bind('scrollstop', function(){
alert("1 "+$(window).scrollTop());
alert("2 "+$('#content').scrollTop());
alert("3 "+$('#myDiv').scrollTop());
alert("4 "+$('#myList').scrollTop());
alert("5 "+$('#myList li').scrollTop());
});
but all of them returned 0 :(
You need to attach the scroll event to the element being scrolled. Assuming you are scrolling the #content element this will work:
$('#content').on('scroll', function(){
if ($(this).scrollTop() == 0) {
alert('at the top');
}
});
Example fiddle
Related
I have the following HTML:
<div class="page">
<div class="somecontent_1">...</div>
<div class="somecontent_2">...</div>
<div class="somecontent_3">...</div>
<div class="somecontent_4">...</div>
</div>
Now I'd like to separate the content with a separate page so it looks something like this:
<div class="page">
<div class="somecontent">...</div>
<div class="somecontent">...</div>
</div>
<div class="newpage">
<div class="somecontent">...</div>
<div class="somecontent">...</div>
</div>
The function checks the height of each class somecontent and if it's larger than a certain amount, I need to move the content to a new page.
My guess is that I would need to create an empty div (newpage) and then fetch the elements after the height is exceeded and move them to the empty newpage and continue iterate like that.
My question would be how I would get all content that are after the last element that reached the height so I can move it to the new empty page that I would create. Other solutions are most welcome if there is a better way of doing it!
The code I came up with looks like this:
var page = $('.page');
var pageHeight = 0;
$.each(page.find('.somecontent'), function() {
if (pageHeight > 1000) {
page.next('<div class="newpage"></div>');
/* Somehow get all elements to add to the newly created page */
page.next('.newpage').append(<NEXT_ELEMENTS>);
pageHeight = 0;
}
pageHeight = pageHeight + $(this).height();
});
When you reach the page which answers the height criterion use the .nextAll function to get all the next siblings of it, then use .wrapAll to wrap them with your newpage div.
Here is the corresponding documentation of nextAll and wrapAll, it has everything you need to cover your scenario.
See comments in line below.
// Instead of the $.each() utiility function
// Just loop over each content area that needs
// examination
$('.somecontent').each(function(index, item) {
// Check if the height of the item is greater than the target (20px for this example)
if (parseInt(getComputedStyle(item).height,10) > 20) {
// Make a new div after the div that the item is currently in
// if one doesn't already exist
if($(".newpage").length === 0){
$(item.closest(".page")).after('<div class="newpage"></div>');
}
// Move the item into the new div
$(item.closest(".page")).next('.newpage').append(item);
}
});
//console.log(document.body.innerHTML); // shows resulting HTML
div.page {border:1px solid red; }
div.newpage {border:1px solid green; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page">
<div class="somecontent">This<br>is<br>some<br>content</div>
<div class="somecontent">This is some content</div>
<div class="somecontent">
<ul>
<li>This</li>
<li>is</li>
<li>some</li>
<li>content</li>
</ul>
</div>
<div class="somecontent">Other</div>
</div>
I have the following divs
<div id="item-1" >item 1 content get here </div>
<div id="item-2" >item 2 content get here </div>
I would like to execute a function when the scroll is between the div content and when the scroll goes beyond the div then execute a different function.
In my jQuery I have
$(window).on('scroll', function() {
var divs = ["item-1","item-2"]; //the above two divs
divs.forEach(function(item){
var current_div = $('#'+item).offset().top
if(current_div < window.pageYOffset) {
console.log("I have reached the div", item);
}
});
});
The above works when scrolling to the bottom, but doesn't work when scrolling to top. It also doesn't detect when I scroll beyond a certain div.
How can I detect when scroll is only with a certain div? The divs are dynamic, hence the need to use the array.
Your solution should work with the code below.
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256 QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
$(window).on('scroll', function() {
var divs = ["item-1","item-2"]; //the above two divs
divs.forEach(function(item){
var current_div = $('#'+item).offset().top
if(current_div < window.pageYOffset) {
console.log("I have reached the div", item);
}
});
});
And then your HTML
<div id="item-1" >item 1 content get here </div>
<div id="item-2" >item 2 content get here </div>
Note: The only change made is the JQuery inclusion.
Enjoy!
I have different sections of div on a single page with different ids. Example:
<section>
<div id="first"></div>
</section>
<section>
<div id="second"></div>
</section>
<section>
<div id="third"></div>
</section>
And I have a horizontal navigation say for example:
<div class="nav">
<ut>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>
What I want is:
When I scroll down to different sections the navigation text's color should change. For example, if I scroll down to <div id="second"></div> then the color of <li>Second</li> should change.
If I click on any of the navigation link I straightaway jump to that particular section. The color of the navigation text should change then also.
When I click on any of the navigation and jump to a particular section it suddenly appears without any effects. I want to add a slideUp type jquery effect on click.
Please help me devs.
I found the solution to my answer. The below code does it all. It changes the #id from the URL and according to it changes the color of the navigation font.
Code:
$(document).bind('scroll',function(e){
$('div').each(function(){
if ($(this).offset().top < window.pageYOffset + 10 && $(this).offset().top + $(this).height() > window.pageYOffset + 10){
window.location.hash = $(this).attr('id');
if($(this).attr('id') == "first"){
$("#navlist a").css('color', 'white');
$("#nav1").css('color', 'red');
}else if($(this).attr('id') == "second"){
$("#navlist a").css('color', 'white');
$("#nav2").css('color', 'red');
}else if($(this).attr('id') == "third"){
$("#navlist a").css('color', 'white');
$("#nav3").css('color', 'red');
}
}
});
});
I'm trying to make a dropdown very similar to dropbox dashboard, where if you click the username a flyout menu appears. Clicking the username again will close the flyout (toggling it every time you click).
The one caveat is that clicking anywhere except on the flyout itself will also close it.
So far, I have it working almost, but not 100%. If you click on the actual 'body' element directly, it will close the flyout as it should. By this I mean my website has a .wrapper element which doesn't take up the full height of the page. Theres a thin strip down at the bottom with no actual element covering it, only the <body> tag. Any place where .wrapper or some other element takes up space (even a 100% width invisible wrapper), it will not close the window if you click on anything where there is an element (besides body).
javascript:
// FLYOUT menu
$flyout = $('.flyout ul'),
flyoutDuration = 120;
$('.flyout h3 a').click(function(e) {
e.preventDefault();
$flyout.fadeToggle(flyoutDuration);
});
$(document).on('click',function(e) {
if ( $(e.target).parents($flyout).length === 0 ) {
$flyout.fadeOut(flyoutDuration);
}
});
HTML
<body>
<div class="blackbar">
<div class="container clearfix">
<div class="icon logo"></div>
<div class="flyout">
<h3>
Welcome back, username
</h3>
<div class="menu">
<ul>
<li><div class="users"></div>Users</li>
<li><div class="groups"></div>Groups</li>
<li><div class="configuration"></div>Configuration</li>
<li><div class="logout"></div>Logout</li>
</ul>
</div>
</div>
</div>
</div>
<div class="wrapper">
<! -- content here -->
</div>
</body>
The expected behavior should be any element you click on that isnt a descendent of .flyout should close the window (including .blackbar, the logo, etc)
To be honest - when I am doing something like this and I do not want clicks inside of the "box" to close the element - I prevent clicks from bubbling.
// FLYOUT menu
$flyout = $('.flyout ul'),
flyoutDuration = 120;
$('.flyout h3 a').click(function(e) {
e.preventDefault();
$flyout.fadeToggle(flyoutDuration);
});
$('.flyout').click(function(e) {
e.stopPropagation();
e.preventDefault();
});
$(document).on('click',function(e) {
if(flyout-open) {
$flyout.fadeOut(flyoutDuration);
}
});
Jquery Menu Click - on click anywhere on body will close the menu
In my case i wanted to close a drop down menu if its clicked primary link or outside the link i.e. anywhere on the html/body
http://jsfiddle.net/austinnoronha/k2Lwj/
var toggleClick = function(){
var divObj = $(this).next();
var nstyle = divObj.css("display");
if(nstyle == "none"){
divObj.slideDown(false,function(){
$("html").bind("click",function(){
divObj.slideUp();
$("html").unbind("click");
});
});
}
};
$(".clickme").click(toggleClick);
I want to make an animation of 2 div´s but I don´t succeed :(.
I want the DIV Tablou to move left and the DIV Frame1, Frame2, etc... to appear but every time I click on my links the Tablou DIV moves left.
So far I succeed with the frames to appear and the DIV Tablou move left.
The question is: how can I make the DIV Tablou move left and stay there and when I click on Close button to move right to his original position??
Many thanks
The HTML:
<div id="tablou" onclick="move_left()">
<div id="logo"></div>
<div id="menu">
<ul>
<li>Main</li>
<li>About Us</li>
</ul>
</div>
<div name="frames" id="frame1"> Frame 1 </div>
<div name="frames" id="frame2"> Frame 2 </div>
The script that I am using:
function show(currentframe) {
$('div[name|="frames"]').each(function(index) {
if ($(this).attr("id") == currentframe) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
function move_left() {
$('#tablou').animate({
'marginLeft' : "-=250px"
});
}
In the function show you have to stop the event from bubbling, bu you can't do that as long as you're attaching event listeners like that. Use something more modern, and since I see you're using jQuery try something like this:
HTML code:
<div id="menu">
<ul>
<li>Main</li>
<li>About Us</li>
</ul>
</div>
Javascript:
$("#main").click(function(e) {
// This prevents that the event bubbles up to #tablou
e.stopPropagation();
// This prevents that clicking on the link adds # to the url
e.preventDefault();
show("frame1");
});
$("#aboutus").click(function(e) {
e.stopPropagation();
e.preventDefault();
show("frame2");
});