I am trying to find a script that would let me do what YP.com does. If you look at the business search input it says Business Name or Category. Then if you click on it, the text fades a little, and when you type words, it fades completely. How would I do this? Any help would be greatly appreciated.
You can have a look at this jQuery example :
http://www.benwatts.ca/2008/07/19/jquery-input-text-replacement/
Declare 2 CSS classes :
.black{
color:black;
}
.grey{
color:grey;
}
The default CSS class for your input can be the black class.
Like in the link above :
Use the focus event for changing the CSS to the grey class
Use the blur event for changing the CSS to the black class
Add the onKeyDown event to delete the original value and change the CSS to the black class.
You could use onfocus to do the first fade. Then onkeydown and fade completely.
Related
I am setting up my own website, and before I do that, I am working on understanding what I want to do following along with a W3 Schools tutorial.
When you click open, it brings up the overlay properly, and when you hover over the text in the overlay, the text changes color, but I want to make it so that when you hover over text, the background of the overlay changes to an image. As it stands the overlay color is gray, but when I hover over something say "dogs" I want the background to be replaced by a picture of a dog.
I have tried to use the CSS :hover function but was only able to have it change the background-color of the individual navbar element, not the whole overlay.
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
background-color: red;
}
This only changes the background color of the navbar element.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_push
Here is the link to the w3 schools tryIt site, to see the rest of the code.
In CSS you can not change the style of a parent element by Hovering a children element.
You will need Javascript.
I was able to figure it out, by using JQuery, and this is the code that ended up working for me.
<script>
$(".about").hover(function(){
$(this).parent().parent().css("background","red");
});
$(".about").mouseleave(function(){
$(this).parent().parent().css("background","blue");
});
</script>
So basicaly what is happening here is that I have a navbar, which has different links in it each with there own class (for example as you can see here "about" is one). And what I have JQuery do is when you hover over a specific element, it changes the background of the parent attribute.
Note I had to do .parent().parent() because of the way I have it setup, it may be possible to do it with just one .parent().
And then what happensis when you hover over the element in the class it will changed the css of the parent attribute, and then when you the mouse exits the element, the background will go back to what it was originally, so in this case blue.
I hope this helps anyone if they ever have a similar question!
For my app, I use the Webix with the 'web' skin. I'm trying to customize the button's background when the button is:
hovered
clicked (when the mouse button still pressed)
just focused
I use the corresponding CSS-slectors:
.mouseover button:active {
background:#d7dff7;
border-color:#d7dff7;
}
.mouseover button:focus{
background:#e2d7f7;
border-color:#e2d7f7;
}
.mouseover button:hover{
background:#c2cae0;
border-color:#c2cae0;
}
The only thing I cannot reach is the active selector. In the below sample, try to click on any button and you'll see the default gray background:
http://webix.com/snippet/a5687eff
I thought it should be the class of the clicked button, but it's not working and I'm stuck with this. Any help is appreciated.
The css selector ".webixtype_base:active" has "background: #dedede!important;" in webix.css. That is why your background style for ".mouseover button:active" is being overridden.
You simply have to add "!important" so that your background style can take precedence.
See here: http://webix.com/snippet/1ee67de2
I have a div:
<div class="badger-left"></div>
This CSS:
/* Change style dynamically according to the bg-color attribute added to the div from jQuery */
.badger-change:after {
background-color: attr(bg-color);
}
This jQuery to add an attribute and a class:
$('.badger-left').addClass('badger-change').attr('bg-color','red');
Since jQuery can't do :after like in CSS, I thought of this way, but it's failing. What should I try?
Thanks
Edit: The color would change dynamically from jQuery, it won't always be red.
So, you can't pass it in to a color value because it will be interpreted as a string instead of a reference. You can pass in the content value to prove this point. On that note, you'll need to give your :after some layout, either with content or with some display or dimensions.
Here is a hacky workaround. I would personally refactor this to not use the pseudo style, but this will work with your current implementation:
function addStyle(color) {
$('<style>.badger-left:after { background-color: ' + color + ';</style>').appendTo('head');
}
// example addStyle('red');
Working Demo: http://jsfiddle.net/3qK2G/
How about just changing the class of .badger-left? So do something like this:
$('.badger-left').addClass('badger-red')
$('.badger-left').addClass('badger-blue')
with css like this:
.badger-red:after {
background-color: red;
}
.badger-blue:after {
background-color: blue;
}
what you can do is to set background-color in .badger-change and have .badger-change:after inherit this value.
In .badger-change you need to set a background-color and hide it width a gradient over it.
DEMO (hover the div to see it in action)
DEMO 2 only change background-color without switching classes.
You can think of other method with inherit , like a background image of 1 pixel set hundreds of pixel away from screen in parent container and setted as repeat in pseudo-element.
Establishing a color in your CSS prior to it being added would do the trick. Then changing that classes color later would change the badger-left with the new class badger-change
CSS
/* Change style dynamically according to the bg-color attribute added to the div from jQuery */
.badger-change {
background-color: red;
}
jQuery
$('.badger-left').addClass('badger-change'); // As soon as we're loaded add badger-change class
$('#button').click(function(){ // When example button is clicked
$('.badger-change').css('backgroundColor', 'blue'); // change badger-change background to blue
});
Here we are using a button for an example of changing the color.
HTML
<div class="badger-left">Hello World</div>
<input type="button" id="button" value="Change it" />
Some example content for badger-left for example.
When the page loads badger-left is given the new class badger-change with the BG being red. Then the button fires the jQuery to change that classes BG color to blue.
JSFiddle Example
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.
I see that the form elements on Facebook are not highlighted when in focus.
how can I do that?
With chrome for example if I click on this textarea it becomes orange or yellow.
input:focus{outline:0;}
Simply change some styles for your form elements and the browser's defaults will not take effect.
.textArea:focus
{
background-color:#FFF;
}
Apply this class to your textareas. Or apply them to all your areas at once:
input:focus
{
background-color:#FFF;
}