I have a PRE tag with a bunch of code in it and several lines. I want to apply a :hover style when a user hovers over a line.
Is there a way I could do this using CSS or Javascript? I looked at :first-line and couldn't find anything.
Any idea?
You have to use the <span class="changeonhover"> tag around each line and then you can have that effect.
pre tags are good way of dumping an array. Its not the best way to display the actual array or data.
If you want to do it in CSS:
wrap it around a div
.prediv a:hover{
background-color:blue;
}
And use:
<div class="prediv"><pre>CONTENT</pre></div>
This would hover the whole content not line by line.
My suggestion is use ul li tags and do a for loop in JavaScript and dump lines into li.
Hope this helps.
Related
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.
Well Im stucked at this point.please take a look at this http://jsfiddle.net/karthik64/5jhgF/3/
Okay first enter some input into the input box and hit enter you would see a span element added to the div and try to input some more values and
I guess you got what the problem is.Could anyone tell me how do i fit those <span> tags in <div> tag in a nice manner.
I have set my div tag width and using javscript I add some elements to div tag and I get some kind of wierd bugs something like for example . if user enters dennis ritchie , steve jobs and bill gates my code works likes this
..dennis ritchie.. ..steve jobs.. ..bil
l gates..
Instead it should be like this
..dennis ritchie.. ..steve jobs..
..bill gates..
if it cannot fit the span tag in that remaining space, I want the whole span tag element jump to next line instead of breaking the span tag value how do i do that .please help me with this.any help is greatly appreciated.Thanks
<span>s are not block-level elements and are not rendered like you describe by default (they wrap with text). Apply the CSS display: inline-block; to your spans to stop them from wrapping.
On newer browsers, add display: inline-block; to the .music_elements style rule.
On older browsers, float: left; might work.
Hello I am using this jquery code
onclick="jQuery('.hidden').show()"
to show the class labeled .hidden
this is what the class looks like :
.hidden { display:none}
the issue is when it displays the class its a display:block;
I would like it to display it as display:inline;
that way its on the same line as the text that comes before.
any help would be appreciated been going crazy I googled almost everything related to it but nothing guided me to the right path.
you could append an explicit css attribute to the element:
onclick="jQuery('.hidden').css('display','inline');"
try this, i hope this helps :)
You probably want to add/remove the class .hidden from the element, if you want it to display inline, create a css class .inline with the appropriate css and toggle this on / off when needed. Or the other option is use an html element that is inline rather than block if possible.
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.
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.