I have this jquery code that adds a class to a div(#menu) after the user scrolled that far on a page. But I am searching for a way to change that code into adding that class when the div(#menu) is on top of another div with the class(.remove) and remove the class again when it's on a div with the class(.add). Here is my code:
jQuery(window).scroll(function(){
var fromTopPx = 400; // distance to trigger
var scrolledFromtop = jQuery(window).scrollTop();
if(scrolledFromtop > fromTopPx){
jQuery('#menu').addClass('scrolled');
}else{
jQuery('#menu').removeClass('scrolled');
}
});
You need to find the position of the div that you want to "be on top of".
To do that you can use
$('.remove').offset().top;
Hope this helps.
Related
I have a specific question about .scrollTop. I have a div with a specific height and a lot of p tags inside:
<div id="scroll">
<p>name1</p>
<p>name2</p>
<!-- till name50 -->
</div>
depending on the name you click it gets a class .active. What I then want to do is scroll the div so, that the name is at the top. So what I get is that I can use scrollTop in an animate function like this:
$('#scroll').animate({scrollTop: value });
but how can I get the var value. I tried it with
var value = $('#scroll p').hasClass('active').position().top;
But somehow it does not work.
Some help is much appreciated.
You need to check scrollTop() for the container #scroll and add that back to the position() arg.
var $scroll = $('#scroll');
$('p').click(function(e){
var $this = $(this);
$scroll.animate({
"scrollTop": $this.position().top + $scroll.scrollTop()
}, 1000);
});
http://jsfiddle.net/yCEap/1/
To just get the value:
var value = $('#scroll').scrollTop();
I know it sounds silly, but what I want to do is trigger click with some html element hovering over another element.
Lets say we got .cursor that is hovering anchor text. In this case click on .cursor should open a google page.
<div class="cursor"></div>
<div class="htmlPage">
Google
Faccebook
Stack
</div>
Any ideas how to do that?
and this don't count
$('.cursor').click(function(){
$('.htmlPage a').click();
})
Cursor should be movable and should be able to click on other links.
Cursor is that blue circle hovering Google button.
Here I have cursor on google, now on click this should link to google, If i were to click on stack then stack should have opened.
If you are not using IE you can use pointer-events:none in CSS. Then your element will be unresponsive to any mouse interaction (and acting like a ghost foreground element).
The workaround for IE is someting like that:
var x = event.pageX;
var y = event.pageY;
$('.cursor').hide();
var here = document.elementFromPoint(x, y);
$('.cursor').show();
// Do what you want with the element here
// Find the parent a element needed with here.parentNode and here.tagName === "A"
// And then fire the click function
I've never use jQuery but I think it should work.
Hope it could help
you can try to get the ".cursor" position on click and compare to each ".htmlPage a" positions and change the window.location.href with the one of the element that overlaps
$(".cursor").click(function(){
var cursor=$(this);
var cl = cursor.offset().left;
var cr = cl+cursor.width();
var ct = cursor.offset().top;
var cb = ct+cursor.height();
$(".htmlPage a").each(function(){
var page=$(this);
var pl = page.offset().left;
var pr = pl+page.width();
var pt = page.offset().top;
var pb = pt+page.height();
if(((cl>pl&&cl<pr)||(cr>pl&&cr<pr))&&((ct>pt&&ct<pb)||(cb>pt&&cb<pb))){
window.location.href=page.attr("href");
}
});
}).draggable();
http://jsfiddle.net/EUmeB/
$('.cursor').click(function(){
$('.htmlPage a').click();
})
Attach an event handler to the cursor class.
$('.cursor').on('click',function()
{
window.location.href = $(this).siblings('.htmlPage').attr('href');
}
This gets the sibling of the element and makes the location equal to that sibling
To be a little more explicit, this might be best.
$('.cursor').click(function(){
$(this).next().children('a').click();
});
Try this:
Demo
// Target link in the next div, following div.cursor
$("div.cursor").click(function() {
var link = $(this).next(".htmlPage").children("a").attr("href");
window.location.href = link;
});
I am trying to create a div that can be attached to an element whenever user hover to the link
I have many links and my codes look like the following.
for loops to create many links
codes....
link.href='#';
link.innerHTML = 'test'
link.onmouseover = OnHover;
codes....
function OnHover(){
var position;
var div = document.createElement('div');
div.className='testdiv';
div.innerHTML = 'test';
position=$(div).position();
div.style.top = position['top'] + 15 + 'px';
$(this).prepend(div);
}
link element1
link element2
----
| | //add new div when hover link element2
----
link element2
link element3
my css
.testdiv{
position:absolute;
}
I want to add a new div everytime the user hover to my link and position on the left top of the element.
My code would position all the div on top instead of every element.
Are there anyway to do this? Thanks so much!
Without seeing your other JavaScript/markup I can make the following observations:
You need to set position:absolute on your new div before top will do anything.
You need to make sure link is non-position:static.
Non-dynamic styles like the above should be in your CSS, not JS.
Positioning absolutely means you shouldn't need to use $(div).position()
You're using a mix of jQuery and pure JavaScript which looks a little odd :)
JS
function OnHover() {
var position;
var div = $('<div></div>');
div.addClass('testdiv');
div.html('test');
div.css('top', 15);
$(this).prepend(div);
}
CSS
.testdiv {
position:absolute;
}
a.testanchor {
position:relative;
}
I'm Ajaxing in elements. I want to decide where to put them based on their height (think box-packing type algorithm).
When I loop through my elements as such, I always get 0 for the outerHeight:
posts.each(function(i, e) {
var elementHeight = $(e).outerHeight();
// elementHeight is always 0
});
How can I get the display height of my element?
It appears I have to add the element to the page to get the height, which makes sense.
What's the best way of doing this while being invisible to the user as simply as possible?
Append the posts to a hidden (display: none) div element and then iterate over them to get their respective outerHeight values.
HTML
<div id="postContainer"></div>
CSS
#postContainer { display: none;}
JS
var cont = $('#postContainer'), postsLength = posts.length;
posts.each(function(i, e) {
cont.append(e);
if (!--postsLength) calcOuterHeight();
});
function calcOuterHeight(){
cont.find('.posts').each(function(i, e){
var oh = $(e).outerHeight();
})
}
You have to add the elements to the page so that they go through the layout process, then they will have a size.
You can add them to the body, get the height, and then remove them. As the browser is busy running your code while the elements are in the page, the elements will never show up:
var el = $('<div>test</div>');
$(document.body).append(el);
var h = el.height();
el.remove();
I'm trying to append a div to the bottom of a another div, by clicking a button in javascript, but once the height of the outer container is reached, it no longer scrolls the list to the bottom, after an insert.
Please see the fiddle here
If you click the red add button until you get to about 13 items in the list, it seems something goes wrong with the scrollTop function, and it it no longer functions correctly (hovers around the same spot in).
I'm pretty lost on this, and have tried a bunch of different combinations of css settings for both the container and side div. Please help me.
I've reformatted your code to be more jQuery-esque. The main change, however, was to change the list.scrollTop() function so that it just scrolls to the bottom of list:
$(document).ready(function() {
var list = $("#q-d-list");
$(document).on('click', '#add', function() {
$('.active', list).removeClass("active");
var count = list.children().length + 1;
var active = $('<div />', {
'data-qid': count,
'class': 'mli active'
}).text('q' + count).appendTo(list);
list.scrollTop(list[0].scrollHeight);
});
});
Demo: http://jsfiddle.net/MrvcB/19/
Use
list.scrollTop(list.get(0).scrollHeight);
rather than
list.scrollTop($(".active").offset().top);
Try:
$(document).ready(function () {
var count = 2;
$("#add").live("click", function () {
var list= $("#q-d-list");
// remove the active class from the old item
var $clone = $(list.find("div:last-child").removeClass("active").clone());
count+=1;
var str_count = "q"+count.toString();
$clone.addClass("active").attr("data-qid",str_count).text(str_count);
list.append($clone);
list.scrollTop(list.get(0).scrollHeight);
});
});
http://jsfiddle.net/H4Kb3/