Develop Reference

How to trigger bootstrap's mouseover effect programmatically

In twitter bootstrap, some elements get "greyed out" when the mouse hovers over them. This is true of buttons and linked list group items. Two examples are here: http://imgur.com/a/ABhkT#0
Can this effect be triggered programmatically? If so, how?

Yes, Using the 'onmouseover' attribute. It is quite similar to the 'onclick', except obviously for hovering instead.
Like the 'onclick', you will have to include a java script function that would change the css style for that element.
Depending on what you are trying to have this effect on, you could either put it right into the tag that is the object, or use <span></span>.
Ex:
<div onmouseover="fade()">
<p>text to fade</p>
</div>
Javascript:
function fade(){
code to change style
}
should be straight forward, this would fade everything inside the div (including the background)

Ok, I figured it out.
If the effect were being caused by a css class, one could simply apply the class to the element, like this:
$('<my_element>').addClass('bootstrapMouseoverGrey')
This doesn't work, though, because the effect isn't caused by a class. It's caused by a pseudoclass. Pseudoclasses can't be added programmatically.
One workaround is to create a new actual class with the exact same definition as the pseudoclass. In my case, the pseudoclass is a.list-group-item:hover, defined in bootstrap.css.
a.list-group-item:hover,
a.list-group-item:focus {
text-decoration: none;
background-color: #f5f5f5;
}
I edited bootstrap.css to make a new (actual) class, bootstrapMouseoverGrey, with the same definition as the pseudoclass.
a.list-group-item:hover,
a.list-group-item:focus,
.bootstrapMouseoverGrey {
text-decoration: none;
background-color: #f5f5f5;
}
Now, I can just add this class to an element using the line at the top of the answer. This gives me the result I want. Works like a charm!

Using jQuery:
var event = jQuery.Event('<event_name>');
event.stopPropagation();
$('<selector>').trigger(event);
Taken from the docs.

jQuery: Zebra striped table

I have two table on page and I am trying to give it zebra strip effect. It works fines but for second table tr taking count from first table. Due to this even tr become the first tr.
Example of my work
http://jsfiddle.net/A9wpe/1/
code I am using for this is below:
$('table tr:even:not(:first)').css('background-color','#ededed');

Could always iterate through each table, acting on each independently:
$('table').each(function(){$(this).find('tr:even').css('background-color','#ededed')});
Or, if your users have recent browsers, you'd do this in CSS:
table tr:nth-child(even) {background-color: #ededed;}

Don't use jQuery for this. Use CSS instead
DEMO
.subPro-data tr:nth-child(even){
background-color : #ededed;
}
DEMO
With jQuery for old IE
.subPro-data tr.even{
background-color : #ededed;
}
and
$('.subPro-data tr:even').addClass('even');
Point is you want to avoid selectors like this $('table#{tableID1} tr:even:not(:first), table#{tableID2} tr:even:not(:first)'). Its a nightmare of inefficiency, and ultimately its so complicated only because you are using the following command: .css('background-color','#ededed');
Using .css adds those styles to the inline style attribute on the dom element. http://www.w3schools.com/css/css_howto.asp inline styles override almost all css rules. What you should be doing is just adding a class instead. That way the background color lives in a css rule and will naturally be in the right location in the css cascade.
This also means you can use a simple and sane selector like this $('.subPro-data tr:even').

Give id for both table and use jQuery below:
$('table#{tableID1} tr:even:not(:first), table#{tableID2} tr:even:not(:first)').css('background-color','#ededed');
Replace table id with {tableID1} and {tableID2}. See JSFiddle example.

$('table').each(function(index, value) { $(value).find('tr:even:not(:first)').css('background-color','#ededed');});

You can filter rows using :not(:first) and then apply nth-child(odd) rule.
check DEMO here
$('table tr:not(:first):nth-child(odd)').css('background-color','#ededed');

not statement in CSS? Or way around? (superfish)

I have tried finding this on the net had no luck.
I'm using superfish dropdown and I need the top li to be rounded, but not li's with ul's inside, if you see here this is the test page where its demo'd:
jsfiddle: http://jsfiddle.net/UdvBC/
But i need to say sort of.. only apply the rounding on the top li not the ones in the dropdown, is this doable?
Thanks :)

You are looking to use the :first-child selector from what I gather...
http://www.w3schools.com/cssref/sel_firstchild.asp
It allows you to apply special CSS to the very first item. Just make sure to apply the first-child selector AFTER the styles applying to all items, so as to prevent overriding the first-child properties.
Example:
ul li { background: red; }
ul li:first-child { background: blue; }
Putting it in the opposite order would override the first-child CSS.
Edit: Thanks for the correction!

CSS cannot really accept not statements like that, so I'd suggest defining separate classes for the two types of li's.

Mixing jquery dropline and dropdown menu

How to achive that following menu act normaly like dropline, but last sublevel to be dropdown instead dropline?
Tnx

To make sure I understand the question, are you wanting the sub-drop-downs to display in a vertical list instead of horizontally? If so, try adding this to your CSS:
.droplinebar > ul > li > ul > li > ul > li
{
float: left;
clear: both;
}
ADDENDUM (to get the menus lined up properly):
I haven't tested this, but see if changing line 16 to the following does the trick:
$subul.css({left:$curobj.position().left, top:this._dimensions.h})
You may need to do something like the above on $targetul as well.
2nd ADDENDUM
It's a bit dirty, but you can always give the sub-ul's a unique id, and them use css to line then up manually.
http://jsfiddle.net/DxpMJ/11/
In that example, I gave a unique id to the JavaScript > Traveling 4 menu, and manually set the margin-left and overrode the width with the !important trick (which you should look up if you're not familiar with it - very useful when javascript plugins are setting CSS styles without your knowledge). If you don't mind manually adding css rules for all of the menus you need to be vertical, I think this would work.

onmouseover for element li doesn't work

i have the following simple code, but it doesn,t work
<ul>
<li id="one" onmouseover="this.style.background-color='white';">
home
</li>
</ul>
could you tell me why.
thanks
edit:
and how can i also change the color of a tag, onmouseover of li

Convert hyphens to camelCase when changing properties of the style object in JS.
backgroundColor
However, you are trying to solve this problem in the wrong way.
If you really wanted to style the list item on hover, then you probably should be using li:hover in your stylesheet. The only downside is that this won't work in IE 6 (although it is just a cosmetic effect on an ancient browser that is increasingly falling in the "Not supported" box).
That said, having a hover effect shouts "You can click now!" at the user — but only the link portion of the list item will do anything when clicked. This means that you should style the a element, not the li … but style it to fill the list item (and this will work in IE6).
Listamatic has many examples.

it'll be onmouseover="this.style.backgroundColor='white';"

Why not use pure CSS for this one?
li:hover {
background-color: #ffffff;
}
Otherwise use gX's and David Dorward's suggestion.

You can also use whatever:hover or a js framework (like jQuery). whatever:hover has only 3kb or so, so I guess is worth to load it :)
As a side note, I think you should take a look at this list to see how CSS styles are converted to JS.