I created a function in Jquery which is supposed to center elements vertically (I could not do it using css, got tired and just made it programically ^^). The problem now is that I initially created it using .each, and then, since it was already creator, I tried calling it using the selector ($('something').center), but it is behaving differently for some reason.
Using the selector, it seems to be doing just the same to every element. It does it with the first element, and then just applies all values to the remaining elements. So, for example, my function takes the element height and does some operations with it, but the selector just takes the first one and then applies its parameters to everyone..
I'll keep using each since it works best right now, but I still can't understand why they are doing that..
Centering Function:
$.fn.center = function (){
/*If this is the highest element, or
if this element has full use of the width,
then there's no need to align it.
*/
if(this.height() == this.parent().height() ||
this.width() == this.parent().width())
{
this.css({
position : "relative",
top : 0
});
}
else //Should be aligned.
{
this.css({
position : "relative",
top : (this.parent().height()/2)-(this.height()/2)
});
}
return this; //Used for chaining.
};
Here's an example of what I mean ^^
http://jsfiddle.net/lrojas94/pmbttrt2/1/
For simple things, like just changing the CSS in the same way for all elements with the same class, you can call it directly without using .each(). For example:
$('.elem').css('color', '#fff');
But if each of the divs needs to end up with an individual value, you should use .each(). For example (sorry it's a bit weird):
var border = 1;
$('.elem').each(function() {
$(this).css('border', border + 'px solid #000');
border += 1;
});
Basically, if you don't use .each(), it'll check what you want to change (just once!) and apply it to all elements with that class. If you do use .each(), it'll do it individually for each element.
Simply put, this within a jQuery plugin function is not a DOM node. It's the jQuery object that wraps around all the nodes that were matched by the selector.
Your function's body should rather look like:
return this.each(function () {
var $el = $(this);
//centering logic for $el goes here
});
Related
I have got a script which works fine. The script is :
var minimized_elements = $('.innovision-msg');
var minimize_character_count = 100;
minimized_elements.each(function(){
var t = $(this).text();
if(t.length < minimize_character_count ) return;
$(this).html(
t.slice(0,minimize_character_count)+
'<span>...</span>'+'Read more'+
'<span style="display:none;">'+ t.slice(minimize_character_count ,t.length)+ '<span>...</span>' +
'Read less</span>'
);
});
$('a.read_more', minimized_elements).click(function(event){
event.preventDefault();
$(this).hide().prev().hide();
$(this).next().show();
});
$('a.read_less', minimized_elements).click(function(event){
event.preventDefault();
$(this).parent().hide().prev().show().prev().show();
});
Here in this script i can not understand the meaning and use of code:
$(this).parent().hide().prev().show().prev().show();
Can any one explains what this line of code means ?
Moreover when it set var minimize_character_count = 250; Script does not works.
$(this).parent().hide().prev().show().prev().show();
This line is hiding the parent element of this element which is clicked (for minimization). After hiding the parent element, it goes to the previous sibling (of the parent element) and make it visible. It again goes to the previous sibling (of the previous sibling of the parent element) and make it visible.
Basically, jquery methods (after doing their job, whether to hide, show or traverse) returns the reference to the current element which allows you to chain the methods in this manner.
This is basically chaining which works on an returned object
$(this).parent().hide().prev().show().prev().show();
$(this) referring to either 'a.read_less', minimized_elements
On click on this element , it will find the parent dom and will hide it.
.prev() is use to select the previous element. So it will select the previous element and will show it. Again using prev() will select previous to previous element and will also show it
Method chaining is one of the nice features of jQuery. Most of the methods will return objects on which it is called, and hence you can call other methods in same chain.
Yet another one of the really cool aspects of jQuery is the fact that
most of the methods returns a jQuery object that you can then use to
call another method. This allows you to do command chaining, where you
can perform multiple methods on the same set of elements, which is
really neat because it saves you and the browser from having to find
the same elements more than once - source
I've bene bursting my head for the last few hours. Here's the situation:
I have a website that has many divs, but many of them share classes (they are equal) but have some different texts. Example:
<div class="summary-title">
I Am That Girl</div>
<div class="summary-title">
I Am That Girl</div>
What I want to do is select each one of these divs and add a span whenever another div is hovered.
I mean, this is what I want to do: hover a div that's before the sumary-title div, a span with a class is appended inside the sumary-title div or out of it, whatever works.
That's what I got so far:
$('summary-title').each(function(index) {
var content = $(index).next().text();
$(index).append("<span class='hover-text'>"+content+"</span>");
});
But I get an error that $ is not defined, probably because it is a closure?
I have no idea what to do. The code seems horrible too — i need to do this quickly and I just can't do. Would anyone help me at least know what to do?
Thanks
append() is already an implicit iteration ( that loops through the set of elements in the jQuery collection.) and it's unnecessary to call .each() .
$('.summary-title').append(function() {
return "<span class='hover-text'>" + $('a', this).text() + "</span>";
});
Outside of making sure you have jQuery on your page and properly referring it, your code should go like:
$('.summary-title').each(function() {
var content = $(this).children('a:first').text();
$(this).append("<span class='hover-text'>"+content+"</span>");
});
Notice:
dot in class selector - $('.summary-title')
this instead of index - $(this)
children selector instead of next
Check demo - Fiddle.
To append this to a preceding element on hover use:
$(document).ready( function() {
$('.summary-title').hover( function() {
var content = $(this).children('a:first').text();
$(this).prev().append("<span class='hover-text'>"+content+"</span>");
});
});
I was experimenting with jQuery and came across a question. Can I use an actual selector with existing element as a combined selector for jQuery?
So, suppose I've created a DIV element on-the-fly:
var $div = $('<div>')
.css('position', 'absolute')
.hide(); // Just to be short
$('body').append($div);
And I want to show it when user hovers over P elements / paragraphs (at the cursor position):
$('p').hover(function(e) {
// Change the position of $div with regards of cursor position
$div.show();
}, function(e) {
$div.hide();
});
BUT also I want to apply this hover handlers to $div itself. So instead of duplicating my code, I want to do something like this:
$('p', $div).hover(...)
which will select $div element along with all P elements.
I know I can write functions separately and pass the names as arguments to hover function.
Is there any solution to this kind of situation in jQuery? or is there a more accurate solution?
You could use the jQuery add method:
$('p').add($div).hover(function(e) { ...
If you have multiple elements to combine you don't wan to do
$('p').add($div1).add($div2).add($div3).add($div4).add($div5).add($div6) ...
Instead you want to convert a JavaScript array into a jQuery object
$( $.map([x,y,z], a => [...$.makeArray(a)]) )
Source: Merging jQuery objects
I was working on an issue in which I was looping through same controls placed on a single page and assigning a z-index to them.
I want to get a collection of all the elements which currently have the z index defined either directly in html or using css, and then iterate over them top to bottom and assign their z-index using JQuery.
What would the selector for this look like, and how performant would it be?
There is no specific selector to achieve this, so you would need to use filter() like this:
var zIndex = 5;
var $zElements = $('.selector').filter(function() {
return $(this).css('z-index') == zIndex;
});
$zElements.each(function() {
// loop through the elements with a matching z-index
});
What I'm really after is to detect when the cursor changes to type "text", that is, when I'm hover over a piece of text. I have tried looking at the element types I am hovering over, but this isn't too accurate because I don't know what they actually contain.
I understand that detecting the CSS cursor attribute is only possible if it has previously been assigned by me.
Is this possible at all? How would you go about doing this?
EDIT:
I do not want to check If I am currently over a specific element, I want to know if I am hover over any text within that element. A div could be 100% width of the browser, but with a shorter piece of text at the far left. I don't want to detect when hovering over just any part of an element.
No need to try to detect if the cursor changed.
You can simply detect if the mouse is hovering your text by using this kind of construct :
document.getElementById('myTextId').onmouseover = function() {
// do something like for example change the class of a div to change its color :
document.getElementById('myDivId').className = 'otherColor';
};
If you don't have an id but a class or a tag, you can replace getElementById by getElementsByClassName or getElementByTagName (which will return arrays on which you'll iterate).
If you want to restore the color when leaving the element, I suggest you bind the event onmouseout in the same way.
For example, if you want to do something on any paragraph, you may do that :
var paras = document.getElementByClassName('p');
for (var i=0; i<paras.length; i++) {
paras[i].onmouseover = function() {
// do something like for example change the class of a div to change its color :
document.getElementById('myDivId').className = 'otherColor';
};
}
I you plan to do a lot of things like this, I suggest you look at jquery and its tutorial.
One possible way is to find all the text nodes in your DOM and wrap them in a span with a certain class. Then you could select that class and do whatever you want with it:
// Wrap all text nodes in span tags with the class textNode
(function findTextNodes(current, callback) {
for(var i = current.childNodes.length; i--;){
var child = current.childNodes[i];
if(3 === child.nodeType)
callback(child);
findTextNodes(child, callback);
}
})(document.body, function(textNode){ // This callback musn't change the number of child nodes that the parent has. This one is safe:
$(textNode).replaceWith('<span class="textNode">' + textNode.nodeValue + '</span>');
});
// Do something on hover on those span tags
$('.textNode').hover(function(){
// Do whatever you want here
$(this).css('color', '#F00');
},function(){
// And here
$(this).css('color', '#000');
});
JSFiddle Demo
Obviously this will fill your DOM with a lot of span tags, and you only want to do this once on page load, because if you run it again it will double the number of spans. This could also do weird things if you have custom css applied to spans already.
If you're using jQuery (which you should, because jQuery is awesome), do this:
$("#myDiv").mouseover(function() {
$("#myDiv").css("background-color", "#FF0000");
});