I have an html page that contain multiple divs with same class name.
i-e
<div class='some-class'>
<div class='some-class'>
<div class='some-class'>
I have used jscroll pane for nice and fancy scrollbar.
it is working fine.
but scrollToBottom() function isn't working correctly.
the scroll of only first div is setting to bottom remaining divs scroll-bar are remain same to top.
here are my functions
var scrollPane = $('.some-class').jScrollPane().data('jsp');
scrollPane.scrollToBottom();
If you need that ALL of your divs with scroll go to down, iterate through them:
var scrollPanes = $('.some-class');
scrollPanes.each(function() {
var jsp = $(this).jScrollPane().data('jsp');
jsp.scrollToBottom();
});
If you need that only ONE of your divs with scroll go to down, you need to mark the divs with another class (or id, or custom attribute), and apply only to it:
<div class="some-class only-this"></div>
<div class="some-class only-that"></div>
<div class="some-class only-self"></div>
With JS:
var scrollPane = $('.some-class.only-this').jScrollPane().data('jsp');
scrollPane.scrollToBottom();
Related
So I have a div and in it i have several paragraphs. The div has some styling (e.g a background, a border) and the paragraphs live "inside" the div like list items.
<div id="box">
<p>'s in here
</div>
And I add paragraphs via this code:
$("box").append("<p>Some text</p>").hide().slideDown("slow");
But when I add a new paragraph the entire div "box" gets hidden and then slides down. How do I make it so that only the last paragraph slides down?
Alternatively, you can create your paragraph as a jQuery object then hide it, then append it to the target div and since you have created the object seperately you now have a reference to that object, so using that object you can easily animate it.
Here is the sample code:
var $paragraph = $("<p>Another paragraph</p>").hide();
$("div").append($paragraph);
$paragraph.slideDown();
Here is the full example on JS Bin
use last() : Reduce the set of matched elements to the final one in the set.
$("box").append("<p>Some text</p>").children().last().hide().slideDown("slow");
I currently have a grid of images and each image has a hover function that changes the opacity of a div. So the image is a background image, and the information is a div within grid-item.
<div class="grid">
<div class="grid-item">
<div class="image-rollover">
<div class="title">
Image title text
</div>
</div>
<div class="info">
Image information text
</div>
</div>
</div>
I've got a function that makes each grid item disappear apart from the one that is clicked:
$(".grid-item").click(function() {
var selected = this;
$(selected).children(".image-rollover").css("opacity", "1");
$(function() {
$('.grid div').not(selected).fadeOut(200);
});
});
I would like all the images apart from the clicked one to disappear and I want the rollover state of that clicked image to remain. I've got the first half, but the hover state disappears despite me setting the CSS to 1.
I think it's something to do with .not(), and it seems that .not() doesn't include all the child elements within that div??
Can anyone suggest something that selects all divs apart from the selected and ALL it's child elements?
.grid div matches all the divs, including those inside your grid-item.
If you match only on the direct children, it will work as intended.
$(".grid-item").click(function() {
var selected = this;
$('.grid>div').not(selected).fadeOut(200);
});
Note how I replaced .grid div by .grid > div.
See this JS Fiddle.
I have also removed the anonymous function inside your click handler, which is unnecessary given the context you have posted.
I would like you to help me make a Javascript code with autoscroll down in one particular div in one page, and while it scrolls down i want to make one procedure.
Im new in javascript but i know these things to help you out
<div class="uiScrollableAreaWrap scrollable" data-reactid=".c6.0">
This is the div of the box that is scrollable.
Could you give me an example of how can i make a javascript code
to take this class and scroll down until the end of the Wrap??
Update one.
http://screencast.com/t/8WNIFZB8rYG
Check out this photo to see all the divs of the box that i want to scroll down.
Relevant SO Link
Just for your case:
This will scroll down to bottom of the div
var objDiv = document.querySelector("._5tee .uiScrollableAreaWrap");
objDiv.scrollTop = objDiv.scrollHeight;
DEMO
Update:
based on your screenshot, Assuming that you want to scroll the ul list to the bottom.
var ulList= document.querySelector("._5tee .uiScrollableAreaWrap");
ulList.scrollTop = ulList.scrollHeight;
In case you want it for other div, use this pattern
.uiScrollableAreaWrap.scrollable yourdivselector
I am trying to make something where I have a div that scrolls. Inside the div there are "title" elements and as I scroll I want the title element of that section to stick to the top of the div and remain there like a header.
Sort of like what people see on webpages where the menu sticks to the stop of a page as you scroll. This example can clearly be seen on the Mac OS X calendar in the "Day" view.
I think I can deal with the making the element stick part, I saw an interesting solution that I think I can adapt. However I was wondering if someone can help me figure out how to know if a title element has reached the top of a scrollable div.
The use case is as follows:
<div class="container">
<div class="floatLeft">
<div class="scrollingDiv" style="height:100px; overflow-y:scroll; overflow-x:hidden;">
<ul>
<li>
<div>
<h4>Title</h4>
<div>Content</div>
</div>
</li>
<li>
<div>
<h4>Title</h4>
<div>Content</div>
</div>
</li>
</ul>
</div>
</div>
<div class="floatRight"></div>
</div>
How would I know when the second "Title" has hit the top of my "scrollingDiv", not the top of the page itself?
Thanks!
You can make an element sticky by setting it's top property to zero and making setting position:absolute; via css.
.stickyTop {
position:absolute;
top:0px;
}
This will ensure the element stays at the top of the page always.
To identify if an element has reached the top of window you can use offset() to identify the current position and check if it's neared the top.
$('div.scrollingDiv').scroll(function() {
var active = null;
$('.scrollingDiv h4').each(function(idx, val) {
var topOffset = $(val).offset().top;
if (topOffset < 20) // elem is 20 px from top
{
// Element nearest the top
active = $(val);
}
console.log(active); // Element closest to the top
});
});
The above simply loops though all the h4 properties searching for the element closest to the top of the page, and logs it.
You can combine these together to create something like a Funky jsFiddle.
I'm struggling with a jquery or javascript problem.
It already got annoying which tells me I might think too complicated on this one.
So my markup (simplyfied) looks like this:
<div class="container">
My Content
scroll down
</div>
<div class="container">
My Content
scroll down
</div>
<div class="container">
My Content
scroll down
</div>
<div class="container">
My Content
scroll down
</div>
Basically just some containers.
Each one contains different content and a button.
The Plan:
1) After a click on a button the window should scroll down to the next container.
2) The last button scrolls to the first container again. So I need a loop.
3) The numbers of containers may change from page to page.
EDIT: 4) The containers may not always be direct siblings to each other (see markup below)
The Problem:
I could get this to work by giving each container a unique ID as a target for the scroll effect.
The problem with that is that it gets too messy quickly.
Cant I just somehow target "the next object with the class: container", and scroll to that?
I'm not sure if js or jquery is the right approach. My knowledge in both is somewhat limited.
I would be really grateful for a push in the right direction.
EDIT: The containers may not always be direct siblings of each other.
<div class="row">
<div class="container">
My Content
scroll down
</div>
<div class="container">
My Content
scroll down
</div>
</div>
<div class="container">
My Content
scroll down
</div>
<div class="container">
My Content
scroll down
</div>
<div class="row">
<div class="container">
My Content
scroll down
</div>
<div class="container">
My Content
scroll down
</div>
</div>
Simple solution:
To get the next container, try using next().
Basically, the <div> containers are siblings of each other, so calling .next() on one div container will give you the next.
$(".button").on("click", function(e) {
$(document).scrollTop($(this).parent().next().offset().top);
// $(this).parent().next() // this is the next div container.
return false; // prevent anchor
});
http://jsfiddle.net/Pm3cj/1/
You just use $(this) to get the link object, .parent() to get the parent of the link, which is the <div>, then .next() to get the next sibling (note it will wrap automatically, so the sibling after the last <div> is the first <div>!),.offset()to get its position relative to the page,.top` to get it relative to the top border.
Then you just use $(document).scrollTop() to scroll to that location.
For a completely general solution, use:
$(".button").on("click", function(e) {
container = $(this).parent();
// if I am the last .container in my group...
while ( document != container[0] // not reached root
&& container.find('~.container, ~:has(.container)').length == 0)
container = container.parent(); // search siblings of parent instead
nextdiv = container.nextAll('.container, :has(.container)').first();
// no next .container found, go back to first container
if (nextdiv.length==0) nextdiv = $(document).find('.container:first');
$(document).scrollTop(nextdiv.offset().top);
// $(this).parent().next() // this is the next div container.
return false;
});
The code basically uses container.find('~.container, ~:has(.container)') to find any sibling that has or is a .container. If nothing, then go up the DOM tree 1 step.
After it finds something which is or has a .container, it grabs it with nextdiv = container.nextAll('.container, :has(.container)').first();.
Lastly, if nothing is found, checked by nextdiv.length==0, just grab the first .container in the whole page.
Then scroll to whatever .container was grabbed.
http://jsfiddle.net/Pm3cj/3/
To animate the scroll, place the scrollTop property in an animate function:
// $(document).scrollTop(nextdiv.offset().top); // snaps to new scroll position
$('body').animate({scrollTop:nextdiv.offset().top},300); // animates scrolling
http://jsfiddle.net/Pm3cj/4/
JavaScript is not required for this. You can use HTML anchors.
<div class="container" id="first">
My Content
scroll down
</div>
<div class="container" id="second">
My Content
scroll down
</div>
<div class="container" id="third">
My Content
scroll down
</div>
<div class="container" id="fourth">
My Content
scroll down
</div>
What you want can be easily achieved through parent() and child().
If the number of containers on each page is different, then you should start ID'ing (don't know if that's a term) containers serially. Something like, class="container-1"
The click event on the last button should do something like:
var num = $('div[class^="container-"]').filter(function() {
return((" " + this.className + " ").match(/\scontainer-\d+\s/) != null);
});
num++;
var last_container = $(this).parent('.container' + num);
last_container .scrollTo();
Am sure you can figure out what the next button should do ;)