Positioning and showing hidden elements with jquery - javascript

Trying to implement something similar to qtip, but using a table that compares the features of different things instead, and am running into an issue positioning the hidden elements I want to show on mouseover. Any help would be much appreciated. http://jsfiddle.net/2HMjQ/

Instead of event.pageY, I tried to use $(this).position().top and an offset of 50 to position is right below the link. See below,
content.on('mouseenter',function(){ //Used .on instead of bind
var index=content.index(this);
if(index<0){
stop();
}
else{
content.eq(index).css("font-weight","bold");
display.stop(true,true);
display.eq(index).css("top",+ $(this).position().top + 50); //Changed
display.eq(index).fadeIn('slow');
}
}).on('mouseleave',function(){ //Used .on instead of bind
var index=content.index(this);
display.hide();
content.css("font-weight","normal");
});
DEMO: http://jsfiddle.net/2HMjQ/13/

display.eq(index).css("top",+event.PageY);
needs to be:
display.eq(index).css("top",+event.pageY); - notice the lowercase 'p'.

It looks like there's a simple problem with case. event.PageY should be event.pageY.
I've fixed this and made some minor CSS changes tinkering around with your code here: http://jsfiddle.net/2HMjQ/11/

Related

change of background color of outer div on mouse hover (button) using jquery

I have designed a pop up style window, which has a title bar & content section. Inside, the content section I have put a button too. I am trying to change the background color of title bar. I have made two classes (title_bar & title_bar_hover) which contain background: linear-gradient(); property only.
As per the solution given in this stackoverflow thread I have wrote the following jquery. I have added jquery-ui plugin as well.
$('#start').on('hover',function(){
var target = $('.title_bar');
target.addClass(".title_bar_hover");
},5);
But this code is unable to perform anything. However, here is the sample jsfiddle.
So please suggest some way(s) to achieve this functionality.
Thank you so much!
You need to:
1) Include jQuery in your jsFiddle demo
2) Use .hover() instead of .on('hover',...
3) Use .toggleClass() instead of .addClass()
4) Correct the class name as title_bar_hover in your CSS
$('#start').hover(function () {
var target = $('.title_bar');
target.toggleClass("title_bar_hover");
});
Updated Fiddle
you can do this way:
$('#start').on('mouseover',function(){
var target = $('.title_bar');
target.toggleClass("title_bar_hover");
});
$('#start').on('mouseout',function(){
var target = $('.title_bar');
target.toggleClass("title_bar_hover");
});
FIDDLE EXAMPLE
With this you can toggle the class easily on hover.
$('.title_bar').hover(function(){
$('.title_bar').toggleClass('title_bar_hover');
}, function(){
$('.title_bar').toggleClass('title_bar_hover');
});
Hope its useful to you :)
JSBIN demo

setting color of a link in javascript

I want to set the color of "val" in the link in below code.
var link = $('' + val + '<br><br>');//this is the link
link.style.color="red";//this is how iam trying to set the color of "val"
SO HOW TO EXACTLY DO IT.
You can do this:
link.css({ color: 'red' });
But the correct and nice way would be:
$(".parent_element").prepend(''+val+'<br><br>');
$(".parent_element > a:first").css({ color: 'red' });
Try this:
$(link[0]).css({ color: 'red'});
The reason for this is that link is not an <a> element - it's a set of elements: <a>, <br> and another <br>.
Another approach would be:
link.css({ color: 'red' });
but this will set this CSS to not only <a>, but both <br>'s as well (not a big deal though).
If you are using jQuery(which it does seem like) go ahead with this,
jQuery
link.css("color","red");
Otherwise,
JavaScript
link[0].style.color = "red";
What you did doesn't work because link is an array. Before applying a style to it, you have to first select the first element by link[0] and then operate on it.
You could use link.style.color="red" if link was an HTMLElementNode, but it isn't. It might be a jQuery object, but if you are using an older version of the library then it will return undefined.
First you need to fix your jQuery call. You can't create multiple elements at the top level. (You can skip this bit if you are using a sufficiently new version of jQuery).
Since there is no good reason to use a double <br> (it shouts "Use CSS to add a margin instead"), I've taken them out:
var link = $('' + val + '');
Now you have a jQuery object so you can either use the jQuery method of setting CSS:
link.css("color", "red");
or get the HTMLElementNode from the jQuery object and use that:
link.get(0).style.color="red";
link.css("color", "red")
However, I think it would be better to create a css class for that and set up the color there. In Javascript/jQuery I would just add the class to the tag when needed. It is more elegant.

Scrolling 2 different elements in same time

If i have a textarea element and a div element how can i scroll them both in one time? ( when i scroll textarea i want the div to do the same )
I want to use pure javascript, as simple code as it is possible.
Ty.
As answered here: synchronize two scrolling bars in multiple selection box
var s1 = document.getElementById('Select1');
var s2 = document.getElementById('Select2');
function select_scroll_1(e) { s2.scrollTop = s1.scrollTop; }
function select_scroll_2(e) { s1.scrollTop = s2.scrollTop; }
s1.addEventListener('scroll', select_scroll_1, false);
s2.addEventListener('scroll', select_scroll_2, false);
While the question asked about doing it in pure JavaScript, if you want to do this with jQuery, all you need to do is tie the scrollTop property of one element to the scrollTop of the other, using a function tied to the scroll event.
Something along the lines of:
$('.linked').scroll(function(){
$('.linked').scrollTop($(this).scrollTop());
})
With that function, all elements with a class of linked will scroll whenever you use the scrollbars of one of them. (I assumed vertical scrolling, if you wanted horizontal, do the same but with scrollLeft.)
See http://jsfiddle.net/g8Krz/ for a working example of the above.

How to get right position of Element?

I wish to get the right position of an element. I have tried attr('right') and I have read the API document regarding .position().right which is non existent (I believe).
http://jsfiddle.net/xavi3r/vcuq7/
Is an example I wish to alert the right value for.
You want to find the value of the CSS right property?
$('#foo').css('right');
In plain Javascript:
document.getElementById('foo').style.right;
But, if you want to find the calculated distance from the right edge of an element to the right edge of another one, then you'll have to do that yourself, combining .position().left and .offsetWidth
It looks to me that this works:
jQuery('#elem').offset().left + jQuery('#elem').width()
Fiddle:
http://jsfiddle.net/adamovic/fcyL5sg0/
$(document).width() - ($('#elem').offset().left + $('#elem').width());
should get you the space on the right side of the element which you can then set as the value for the 'right' property of the element's position;
The CSS value is only valid if it's set via style or $.css().
But if you need to get the right position of an object, you should do it using javascript / jquery.
Although there are some valid solutions, it's important to note that $.fn.width() doesn't take padding and borders in account. So it's better to use outerWidth().
Example:
$(document).width() - ($('#elem').offset().left + $('#elem').outerWidth());
You can even create a $.fn function to get the value:
$.fn.right = function() {
return $(document).width() - (this.offset().left + this.outerWidth());
}
And then use it:
$('#elem').right();
you can try .css
.css("right");
As noted by #avernet in comments, the equivalent of an hypothetical .position().right would be expression like this:
$('#foo').offsetParent().width() - ($('#foo').position().left + $('#foo').width());
for pure js you can use
document.querySelector('.your-class').getBoundingClientRect().left

JQuery's .append() executes 6 times instead of 1

Basically, what I'm trying to do is create a marquee type thing by scrolling vertically through the banners and then moving each to the bottom after it is out of view. I can't figure out why the banner is being appended six times. I realize that it's not quite complete so don't make a remark about that please. If you have a better suggestion, let me know. http://jsfiddle.net/vCuHc/2/
EDIT: How can I append the top element to the bottom and then remove the top element also?
You have six elements with the same class. This script runs once for each of the those elements.
Change the code that it runs once by appending to the parent div after the animations complete and not at the end of every animation.
It's being called against every element in the result of $('.tornado_banner').
Instead of
function(){
...
$("#banner_container").append(
'<a class="tornado_banner" id="banner_alberta" href="#" style="top:' + elementNum * -130 + 'px"> </a>'
);
Try
function(){
$(this).detach().appendTo("#banner_container");
}
If I understand your edit correctly,
var first = jQuery("#banner_container a:first");
jQuery("#banner_container").append(first);
That will remove the first element while appending it to the end of the list.

Categories