Develop Reference

How to apply css to div which has no class?

I am creating some design part in HTML. I have two div. Both div element are generating through java script. First div has a class and second div has no any class or id. I want to apply style to second div.
<div class="class_name"></div>
<div style="display:block;"></div>
After applying style the second div style will be style="display:none;"
Please suggest.

You can have CSS only solution for this, there is no need to have a javscript for this you can try adjacent siblings selectors of CSS:
To target very next div you need this:
.FirstClassName + div{
/*your style goes here */
}
To target all divs in a parent after a given class name:
.FirstClassName ~ div{
/*your style goes here */
}
Demo

You can use :not selector for the second div:
div:not([class="classname_of_the_first_div_here"]){}
or even simpler :
div:not(.classname_of_the_first_div_here)

Assuming that there were no other div before the two div elements were created:
document.getElementsByTagName("div")[1].style.color = "blue";

use style attribute in the second div
<div id="div1" style="display:block;"></div>

if it has only two div's then use the last-child property.
yourparent div:last-child
{
your style
}

You basically have three options (maybe more, but then we need some code).
First one, use the element selector. but that means you're styling all elements of the same type on the page
div { background: red; }
Second option, style all divs that have no class attribute:
div:not([class]) { background: green; }
and last but not least, style a div that is a child of another element. If your document structure is build up properly this is most probably the way to go.
div.parent > div { background: blue; }
Checkout the Fiddle here

expand on click function to sidecaegorylist in bigcommerce

i am trying to come up with a way of displaying a lot of categories in side list.
The only way i can see as a usable way instead of those annoying fly out menus, is to expand categories upon clicking on parent category.
support have provided a js to display when hover over parent, but want it to expand and close on click, and to close upon another parent is clicked.
<style>
.SideCategoryListClassic ul li ul li {
display: none;
}
</style>
<script type="text/javascript">
$('.SideCategoryListClassic').children().children('li')
.hover(function(){$(this).children('ul').children().slideDown()},
function(){$(this).children('ul').children().slideUp()});
</script>
Hope someone can share some light on this.
Cheers

It's probably best to do this by just adding a class when a parent is clicked.
$('.SideCategoryListClassic li a').click(function(e) {
e.preventDefault(); //This prevents clicking causing the user to actually go to the link they clicked on
$('.SideCategoryListClassic li ul').removeClass('active'); //Removes active class from other submenus
$(this).find('ul').slideDown(); //Adds active class to the submenu of the parent you just clicked on
});
then your css
.SideCategoryListClassic li ul {display:none}
.SideCategoryListClassic li ul.active {display:block;}

How to make an underlaying element unclickable/deactive?

I have two elements on top of each other. When I click a button on the first div, the second div opens on top of the first div, and what I want to do is to make the underlaying div non-interactive (That I can't click on anything on the underlaying-div as long as the overlaying-div is open).
Javascript code:
$('#button').live('click', function()
{
$('#underlaying-div).fadeTo("fast", 0.7);
$('#overlaying-div).css('display', 'block');
//Do something here to make the underlaying div unclickable
});
$("#overlaying-div").live("click", function() {
$(this).hide();
$('#underlaying-div).fadeTo("slow", 1.0);
//Do something here to make the underlaying div clickable again
});
CSS-code:
#overlay-div
{
position:absolute;
left:0;
top:0;
display:none;
z-index: 20000;
}
I know I can use event.preventDefault() to make sure nothing happens if you click on an element in the underlaying-div, but I'd rather want that nothing happens at all when you for instance hover over an button (with preventDefault(), hover and other stuff still happens).
Any other ways in CSS or javascript/JQuery that can fix this problem??

Not sure of your final product, but if the underlaying div get overlapped by the overlaying in a way that the underlaying div is not visible anymore you could just display:block; the underlaying div.

This is a very old question, but if someone happens upon it, you might find it useful to toggle the pointer-events CSS property of the object you want to disable. You won't need to manually remove click bindings or add any other wrappers. If an object has pointer-events set to 'none', no events will fire when it is clicked.
In jQuery:
$('#underlaying-div).css('pointerEvents', 'none'); // will disable
$('#underlaying-div).css('pointerEvents', 'auto'); // will reenable

You could use unbind to remove the click event handler like this:
$(this).unbind('click'):
My concern is if this works with a live bind but you should at least try it :)

Why don't you use jQuery .fadeIn() and .fadeOut() functions? You have two divs with id="div1" and id="div2" and you have a button in div1 with id="button1" and a button in div2 with id="button2".
CSS code:
#div1 {
//some CSS code without z-index
}
#div2 {
//some CSS code without z-index
visibility:hidden;
}
jQuery code:
$('#button1').click(function(){$('#div1').fadeOut('slow', function(){$('#div2').fadeIn()})})
$('#button2').click(function(){$('#div2').fadeOut('slow', function(){$('#div1').fadeIn()})})

jQuery 2 level hover navigation and mouseovers/mouseout

Here's a working example: http://jsfiddle.net/Y8Tvu/
I have 2 ULs, each filled with LIs. When I hover over .nav-dayselector ul li a, jQuery is being used to show the corresponding #hover-days ul li in the second UL (this is necessary because the actual code is used inside a carousel with overflow:hidden on , so we need to use 2 separate UL and show them this way.
This works fine - the issue is that when you hover over the span that pops up (#hover-days ul li span), the #hover-days ul li fades out. (see the jsFiddle example)
I need to stop this fadeOut while the mouse is over the span, so that you can use the menu and select items from the :hover span.
Any other way of doing this that works with the 2 separate ULs would be perfectly fine, though. Any simple fix on the jsfiddle that would work?

if you keep a reference to the element you can
tell it to stop fading out when its hovered over
but this requiers the user to reach it with the mousepointer before
its faded out
$(".nav-dayselector ul li a").each(function() {
IndexLI = $(this).parent().index();
var ele = $("#hover-days ul li:eq("+IndexLI+") span");
$(this).hover(function() {
ele.show();
}, function() {
ele.fadeOut();
});
ele.hover(function() {
$(ele).stop().fadeIn();
}, function() {
$(ele).fadeOut();
});
});
the html/css dosent seem to be working in my browser btw (IE 8)

Is it possible to trigger a jQuery click event on a background-image in a list?

I have an unordered list of items, something like this, shortened for brevity:
<div id="elementsContainer">
<ul>
<li><a>One</a></li>
<li><a>Two</a></li>
</ul>
</div>
I have the list styled up, but these 3 styles deal with background images for the list items:
#elementsContainer ul li {
list-style:none;
}
#elementsContainer a {
background: transparent url(/images/icons/bullet_delete.png) no-repeat 5px 50%;
}
#elementsContainer a:hover,
#elementsContainer a:focus,
#elementsContainer a:active {
background:#fff url(/images/icons/delete.png) no-repeat 5px 50%;
}
The list looks great - it puts a little delete icon to the left of the text for each list item. However, I am looking to use jQuery (1.3) to handle the click events for each item, and I would like separate functionality between the background image of the list item and the text of the list item. If I click the image, I want to delete the item. If I click the text, I want to edit the item.
I started using something like this:
$("a").live("click", function(event){
alert( $(this).text() );
});
But I do not see anything in $(this) or "event" that I can determine if I am clicking the text or the image.
Yes, I know I could just have a separate "img" tag and handle the click on that separately. I'll go that route if that is the only option. I just want to know if there is some way to make it work on the background-image.
Thanks in advance!

Go with the IMG tag. The best you could do it detect a click on the LI element itself, which would end up being messy. An IMG tag (and even an A tag around it for semantic goodness and nicely-degrading pages) would work best.
You shouldn't have much issues styling it to look the same using an IMG within the LI, I do something similar all the time within lists where I need delete/edit icons.

You can't differentiate a click on the background image, since as far as the DOM is concerned, it's not really there. All you have is the a element itself (which happens to be presented with your background image), and its onclick handler will fire as long as you click anywhere inside the tag, text or not.
It probably is best to use an img tag (or some other separate tag) and handle the click on that separately, as you concluded in your write-up.

what you could do for the desired effect is to put a span with some spaces in the area that the delete image will eventually appear, and then hook the event to the click of that span.

Put an element over it, and steal register the event with that.