Develop Reference

mouseover fires multiple times over one span element

Here's a simple jsFiddle:
http://jsfiddle.net/cEDj6/
I have one span element that I bound mouseover to. When I move the mouse horizontally across different lines of text, mouseover happens only once. However, when I move between lines of text within the same span element, mouseover happens multiple times.
Is this expected?
Is there a standard way of preventing this (short of adding logic to consider the last visited element)?
Using Chromium, version 28.0.1500.71 Ubuntu 13.04 (28.0.1500.71-0ubuntu1.13.04.1).

This seems to stem from an inline elemnt <span> with multiple lines of text. In reality space between each line is not contained in element as far as mouse is concerned.
This can be seen by putting background color on element. Changing it to block elemnt in css with display:block alleviates the problem, or by using other native block elements other than span
Background demo

If you make it a div instead of a span it works as expected

This is odd usage of a span. Since the semantic element is a <p> tag, use that. This also will correct your issue.

Funny enough, it's because the span is an inline element and it's wrapping. Because a span is an inline item, and it's wrapping, you get individual lines, and there is space between the lines. I never picked up on this before, but, because you have a mouseout event, it makes it more obvious. To demonstrate this, check out this update on your fiddle.
Fiddle: http://jsfiddle.net/LSRvn/
The reason a DIV doesn't do this is because the DIV is a block element containing the items.

Dynamically hiding elements in a list without the hidden elements occupying empty space on the page

I need to hide elements based on what a user does. if he presses "a only", I can say something like
for(i=0;i<document.getElementsByClassName("b").length;i++){
document.getElementsByClassName("b")[i].style.visibility="hidden";
}
but this will leave empty spaces between elements in the list (the invisible elements still occupy space), which looks bad, is there a better way this can be done.

try style.display="none"
Using visibilty="hidden", the elements will still take up their calculated space on the page.
You may also consider using jQUery. It makes tasks like these incredibly simple.

Yep. You are setting the visibility CSS property to hidden. This stops the element from being displayed, but it still occupies space.
You want to set the display property to be none. This removes it from being displayed, and stops it occupying space - effectively removing it from the document, at least as far as displaying it is concerned.
for(i=0;i<document.getElementsByClassName("b").length;i++){
document.getElementsByClassName("b")[i].style.display = "none";
}

Use display: none instead of visiblity: hidden. The visibility property only hides the element; the display property actually removes the element from the layout.

For visibility:hidden, the javascript parser will parse the elements css properties and hides, it actually exist on dom, but user cannot see.
For display: none, when javascript parser finds the element with display, it just ignore the element and it move ahead. So you have to user display: none;

jQuery - Selecting a child div background image and amending it

Im looking for a way to change the background image of a div using jQuery BUT only amending it, not totally changing it.
Let me explain.
Im using http://jqueryui.com/demos/sortable/#portlets to show some div's that open and close. Now when you click the portlet header it opens and closes the content below.
Inside the portlet header i have a child div which shows an arrow (either up or down) depending on the current state of the content. I need a way of changing the background image on this child div by adding on "-visible" onto the end of the url for the background image.
I wouldnt even know where to start with doing this, but i have added some code below for you to look at.
http://jsfiddle.net/45jZU/
From the fiddle there, i need to alter the background image of the portlet-arrow div inside portlet header. I can not simply change the background image all together, but i have simplified it down to post on here.
I hope this isnt too narrow to not be of use to anyone else on stackoverflow.
Thanks

Maybe I'm missing something here, but can't you use the .css attribute modifier for the selected jQuery object? Something like:
var current_background = $("#my-div").css("background-image");
$("#my-div").css("background-image", current_background + "-visible");
If you're looking to modify the class names themselves, you can try mess around with the .toggleClass(), .hasClass(), .addClass() and .removeClass() methods in jQuery.
I hope this helps, but let me know if I've missed the mark here completely!

I would personnaly go for using css classes to change the background image. If you decide to change the image afterwards, you won't have to alter your javascript. It is a better solution to use javascript to code the behavior of the widget, not the visual aspect.
So you have the following css:
.portlet-header {
background-image: url(<an image>);
}
.portlet-header.collapsed {
background-image: url(<an other one>);
}
Add this line to your javascript to toggle the collapsed class:
$(".portlet-header").click(function() {
...
$(this).parent().toggleClass('collapsed');
});
If you widgets starts collapsed, initially add the class.
DEMO

setting visibility vs. hide/show

What is the difference between element.css('visibility', 'visible') and element.show(). Also, what is the difference between element.css('visibility', 'hidden') and element.hide()?
Update: In addition, what is the most proper way to hide an element and all its elements' subtree?
Update N2: Which is the proper way to know if an element (and its subtree) is visible: element.is(':visible') or element.css('visibility')?
Update N3: Is there a way to hide an element (completely), but it still will reserve the space/area on the browser page? (as far as I've got it - the proper way would be to call hide() but it might lead to the page visual restructuring.

Visibility will still reserve the space in your Browser.
A hidden element is set to display: none thus all space occupied by this element collapses.
If you only set the element to visibility: hidden the element will just go transparent but the space is occupied as if the element is still there.
.hide() is equal to .css('display', 'none')
.show() is equal to .css('display', 'block') - I'm pretty sure jQuery does some magic here to decide if it's really block that should go in there but it's somewhat equal.
#Update:
Once you hide an element with .hide() (or .css('display', 'none')) all elements down the dom-tree that are children of that element will be hidden too.
#Update 2:
If you are using .hide() and .show() it's .is(':visible')
If you are using the visibility css attribute then .css('visibility')
#Update 3:
That's exactly what .css('visibility', 'hidden') does, it hides the element without the page restructuring. .hide() will completely "remove" the element.

jquery.hide() is equivalent to calling .css('display', 'none') and and jquery.show is equivalent to calling .css('display', 'block')
The .css() method is just setting the visibility property.
From the css point of view difference :
visbility : hidden
The value hidden makes the generated boxes invisible without removing them from the layout. Descendant boxes can be made visible. See this
display : none
A value of none makes the element generate no box at all. Descendant boxes cannot generate boxes either, even if their display property is set to something other than none.See this
With hidden the element is still generated.

Taken from w3schools.com:
visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.
display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as the element is not there:

In addition to bardiir's explanation here is good demo of "display:none" and "visibility:hidden"
http://www.w3schools.com/css/css_display_visibility.asp
"remove" button sets "display:none" and "hide" button sets "visibility:hidden".

They are setting 2 different css properties: hide/show sets the display property to none, show removes this setting so that the default is used (e.g. 'block' for a div).
The difference as the other answers point out is that calling hide on an element means that it (and all its ancestors) will not take up any space. Where as setting visibility to hidden will effectively just make the elements completely transparent (but still take up space).
For answers to your edits:
Hide all ancestor (this is automatically done with both methods).
Use element.is(':visible') since this performs a check on both the visibility and display properties and to see if the height and width aren't 0, it also performs it recursively on the ancestors, whereas element.css('visibility') just tells you the visibility of the element.
Setting element.css('visibility', 'hidden') will do this - not calling element.hide().

How to prevent other elements changing, when changing style of element with same class

I am moving individual elements around using their style.top and style.left attributes. The issue is that when changing the style of one element it seems to change the style of others. What is an effective way to get round this?

I'm not sure why this happens, but I guess you selected the element by using a .class selector. Please make sure to select only one element. If you add / edit style-rules of that element, it does not change other elements sharing the element's classname.