I was wondering how it may be possible to change the text color of my anchor multiple times, different colors each time said anchor is hovered over. I have scoured the internet and StackOverflow, and this has to be the closest thing I came to:
http://www.codecademy.com/es/donvomar/codebits/xIEpDx
That link bears the same general idea of hovering over something multiple times and it changing color each time.
I did take a look at the code, but thought of two things to fix: one, I am not familiar with jQuery, but minimally with JS; and two, that I want to specify my colors; I noticed his were random. To give you a picture, here's my code just for the (empty) link and its styling:
<!DOCTYPE html>
<html>
<body>
<div class = "menu">Text block for demonstration</div>
<style>
.menu {
font-family: Bebas Neue, Helvetica, Arial, sans-serif;
font-size: 1.5em;
color: white;
padding: 10px;
border: 1px solid black;
width: 300px;
clear: both;
background-color: black;
}
</style>
</body>
</html>
To sum it all up: Basically, I want the text to change color each time it is hovered over, be able to specify the colors, and loop them.
Try this:
HTML
hello world!
JS
var arr = ['#f00', '#0f0', '#00f']; // Just add more if you like
var i = 0;
var start_over = arr.length;
$("#test").mouseenter(function(){
i++;
if (i == start_over) {
i = 0;
}
$(this).css('color', arr[i]);
});
JSFiddle
http://jsfiddle.net/V7qGx/
onmouseover = function() {
this.style.color = colors[this.dataset.n++ % colors.length];
}
onmouseout = function() {
this.style.color = '';
}
Related
I am somewhat new to Javascript/HTML. Recently I've been given a project to align boxes of Avengers characters using CSS or HTML. Here is an image of what the website should look like:
Now I've gotten the CSS part of the code done: defining the boxes for the images, headings/titles of the characters, and their description (in the main body). For the javascript part, the box of the name of the character should change color when the mouse hovers over it, and change back to its original color once removed. For this matter, I will use a portion of my code for the heading, from Iron Man.
CSS:
.ironManHeading { <!-- iron man's heading (goes under image box) -->
left:0px;
width: 250px;
position: relative;
background-color: #999999;
padding: 10px;
text-align: center;
border: 1px solid black;
}
Javascript:
function mouseIM(){ //onmouseover event: heading changes to red background and white text
document.getElementsByClassName("ironManHeading").bgColor = 'red';
document.getElementsByClassName("ironManHeading").fontcolor = 'white';
} // MOUSE EVENTS FOR IRON MAN
function noMouseIM(){ //onmouseout event: heading changes back to normal colors
document.getElementsByClassName("ironManHeading").style.bgColor = '#999999';
document.getElementsByClassName("ironManHeading").style.fontcolor = 'black';
}
And here is the code from the body:
<h1 class = "ironManHeading" onmouseover = "mouseIM" onmouseout = "noMouseIM">IRON MAN</h1>
This is what I've tried, but the colors stay the same as from the image from above. Am I doing something wrong, or am I missing something? I haven't gotten the hang of declaring classes, so I'm not sure if it's something to do with document.getElementsByClassName.
You can achieve the desired behavior with css only like this:
.ironManHeading:hover {
background-color: red;
color: white;
}
If you still want to use Javascript with onmouseover and onmouseout events here's a similar example:
function onMouseOver(elem) {
elem.style.backgroundColor = "red";
elem.style.color = "white";
}
function onMouseOut(elem) {
elem.style.backgroundColor = "#999";
elem.style.color = "black";
}
div {
background-color: #999;
}
<div onmouseover="onMouseOver(this)" onmouseout="onMouseOut(this)">Here's a test</div>
Why your event handlers don't work?
It's simply because you call the methods like this:
onmouseover = "mouseIM"
but you have to call it like this:
onmouseover="mouseIM()"
that's the way to assign event handler function to a HTML event attribute.
Additionally, you can pass a reference to the object that invoked the function with:
onmouseover="mouseIM(this)"
This spares the need to use the selector of the calling element with document.getElementById(), getElementsByClassName() or querySelector() and gives you the flexibility to use the event handler for other elements too. So in your case you can call the same function for each avenger box by calling the event handler with this parameter. See how I used the elem parameter in my event handler functions above.
Consider using css pseudo-classes as #chrisbyte mentioned. In this case, you shouldn't need javascript to perform what you need, attached link below for you to learn more!
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
.ironManHeading :hover{
background-color: red;
color: white;
}
With css, you can declare a :hover event that does the same thing as mouseover and mouseout in javascript. Something like:
.ironManHeading { <!-- iron man's heading (goes under image box) -->
/* your original definition */
}
<!-- this is the hover event -->
.ironManHeading:hover {
background-color: red;
color: white;
}
Working example (does not require any javascript, everything is handled by css):
.Heading {
left:0px;
width: 250px;
position: relative;
background-color: #999999;
padding: 10px;
text-align: center;
border: 1px solid black;
}
.Heading:hover {
background-color: red;
color: white;
}
<h1 class = "Heading">IRON MAN</h1>
<h1 class = "Heading">CAPTAIN AMAERICA</h1>
<h1 class = "Heading">THOR</h1>
<h1 class = "Heading">BLACK WIDOW</h1>
I'm trying to override the background color present in vaadin-combo-box-overlay element.
Here is the css that I want to override, more specifically the background property, source taken from (https://github.com/vaadin/vaadin-combo-box/blob/master/vaadin-combo-box-overlay.html)
:host {
position: absolute;
#apply(--shadow-elevation-2dp);
background: #fff;
border-radius: 0 0 2px 2px;
top: 0;
left: 0;
.......
}
So I've tried something like:
:root ::content vaadin-combo-box-overlay.vaadin-combo-box-overlay {
background: red !important;
background-color: red !important;
}
Also I've tried with :host but I guess it should be used :root because I use this dropdown in a dialog, and the overlay component doesn't seem to be a child of the dialog. I've tried different combinatons as the one mentioned above without any success.
Also I'm wondering why the background is not parameterized as the text color is:
#selector .item {
cursor: pointer;
padding: 13px 16px;
color: var(--primary-text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Specifying a different value for --primary-text-color I'm able to change the text color..
Thanks.
you can do it with javascript like that.
ready: function() {
var domElem=Polymer.dom(this).node.$.YOUR-VAADIN-ELEMENT-ID.$.overlay.style.backgroundColor="red";
}
OR
ready: function() {
var css = '#selector .item { background-color:red; }';
var style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
Polymer.dom(this).node.$.tourSelector.$.overlay.$.selector.appendChild(style);
}
Would like to have a working CSS selector, but i cant set breakpoints in CSS to find out the right selectors!
You should use dom-module for styling vaading parts see example below:
<dom-module id="combo-box-overlay-styles" theme-for="vaadin-combo-box-overlay">
<template>
<style>
[part~="content"] {
background-color: red;
}
</style>
</template>
</dom-module>
Read more here https://github.com/vaadin/vaadin-themable-mixin/wiki
Thanks Patrick !!
I wasn't thinking about to do try it this way.
Here's what I did, a hacky solution though.
ready : function(){
var combo = this.$$('#comboid');
combo.addEventListener('vaadin-dropdown-opened'', function() {
var overlay = Polymer.dom(this.root).querySelector('#overlay');
overlay.style.backgroundColor = primaryBackground;
});
},
I only have access to the overlay when the combo is expanded, so in the value change listener the combo would be expanded.
I need to remove CSS hover functionality using JavaScript.
I have a button on a form which submits data to our db server. Using OnClientClick() of an ASP.NET Button control I would like to change the element's text to 'Submitting..' using getElementById(), change the background color of the button to Light Grey and more importantly disable the following .button:hover effect I have in my CSS.
.button:hover,
.content-form input.button:hover,
#comment-form #submit:hover
{
background-color: #333;
}
All I am really interested in is the Javascript to remove/disable the above CSS
e.g. OnClientClick="getElementByID('ButtonName').blahblahblah;"
Working fiddle: https://jsfiddle.net/bm576q6j/17/
var elms = document.getElementsByClassName("test");
var n = elms.length;
function changeColor(color) {
for(var i = 0; i < n; i ++) {
elms[i].style.backgroundColor = color;
}
}
for(var i = 0; i < n; i ++) {
elms[i].onmouseover = function() {
changeColor("gray");
};
}
Edit: Sorry for not noticing last part of your question before I answered :)
There are a lot of solutions for solving your problem.
For example:
1- Using HTML disabled attribute.
OnClientClick="getElementByID('ButtonName').disabled=true;
2- Add a class which overrides the previous style.
.button:hover,
.content-form input.button:hover,
#comment-form #submit:hover
{
background-color: #333;
}
.button.submitted:hover
{
background-color: gray;
}
Js:
OnClientClick="getElementByID('ButtonName').className = "submitted";
and etc
In this case it removes the class attribute eliminating all defined classes, but then adds that should not be removed.
On jsfiddle
function disableHover(elem) {
elem.removeAttribute('class');
elem.setAttribute('class', 'another');
}
.button:hover {
background-color: #333;
}
.another {
background-color: lightgray;
}
<button class="button" onclick="disableHover(this);">hover</button>
But the best way of doing this is so, simple and works well.
function disableHover(elem) {
elem.classList.remove('button');
elem.classList.add('another');
}
.button:hover {
background-color: #333;
}
.another {
background-color: lightgray;
}
<button class="button" onclick="disableHover(this);">hover</button>
On jsfiddle
First of all your css is wrong. It should be:
.button:hover, .content-form input.button:hover, #comment-form, #submit:hover {
background-color: #333;
}
and you are adding css with id and class. You should not do that. Just add with class and use document.getElementById('submit').removeAttribute('class')
Here is the code in which i am having the problem-
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
font-family: Tahoma;
line-height: 170%;
color: #000;
font-size: 15px;
padding: 5px 0px 5px 0px;
text-align: center;
}
#col1 {
//some propeties
}
#col1:hover ~ p {
color: #f00;
}
#col2 {
//some propeties
}
#col2:hover ~ p {
color: #ff0;
}
</style>
</head>
<body>
<div id="col1"><span>Hover to view and click to select this color.</span></div>
<div id="col2"><span>Hover to view and click to select this color.</span></div>
<p>This is some text.</p>
<script type="text/javascript">
var pElements = document.getElementsByTagName("p");
$('#col1').click(function(){
for(var i = 0; i < pElements.length; i++) {
pElements[i].style.color = "#f00";
}
});
$('#col2').click(function(){
for(var i = 0; i < pElements.length; i++) {
pElements[i].style.color = "#ff0";
}
});
</script>
</body>
</html>
What i actually want is that when i hover a color div, the color of text in p tag changes for only that time when the color div is hovered. When the color div is clicked the color of text should change permanently.
The problem with is that once i click on 1 of the color divs to finalize it for p tag, and then after that the other color is hovered the color change doesnt take place. The color permanently changes on click as it should happen.
When you set the p elements style with pElements[i].style.color = "#f00"; you are setting a more specific style then the one applied by your hover. In CSS, the most specific style get's applied to the element. The CSS hover class you've got defined will never be applied because it is not specific enough to overwrite the inline styles applied by your javascript code.
You could modify your CSS hover class to use the !important tag, this should allow you to apply the hover style even though it is not as specific as the inline style.
#col2:hover ~ p {
color: #ff0 !important;
}
If its not a problem using JQuery, I think is what you want: Live Example
HTML code snippet
<div id="col1"><span>Hover to view and click to select this color.</span></div>
<div id="col2"><span>Hover to view and click to select this color.</span></div>
<p>This is some text.</p>
CSS code snippet
p {
font-family: Tahoma;
line-height: 170%;
color: #000;
font-size: 15px;
padding: 5px 0px 5px 0px;
text-align: center;
}
#col1 {
//some propeties
}
#col1:hover ~ p {
color: #f00 !important;
}
#col2 {
//some propeties
}
#col2:hover ~ p {
color: #ff0 !important;
}
JS code snippet
$("#col1").click(function () {
$("p").css("color","#f00");
});
$("#col2").click(function () {
$("p").css("color","#ff0");
});
Hope it helps!
I have a label inside a div control.I want to align it to the top middle of the div control and draw a rectangle around that text.And also i want to display the characters of that label's text one by one from left to right .
How do i achieve this ?
Well to center the text to the middle of the div horizontal, you simply need to style it with
div#ctrl {
text-align: center
}
To have a rectangle around the text, you need to define a border, probably with padding and margin:
div#ctrl span {
border: 1px #333 solid;
padding: 5px;
}
You need to use javascript to animate the text, made easier with jQuery. Here a link to working example I whipped of what you were looking for:
http://jsfiddle.net/5QdPh/
In the future try to do a little more research and ask questions about specific problems that have not been answered before. All of this is basic, well documented stuff.
Here you go for the first part:
http://fiddle.jshell.net/VdmFV/
Fot the second part you'd need some fancy javascript / jQuery which you should attempt yourself first then come back here for pointers.
<style>
#control {
width:200px;
height:200px;
background:#ddd;
text-align: center
}
#label {
border:1px solid red;
}
</style>
<div id='control'>
<span id='label'></span>
</div>
<script>
var label = document.getElementById("label");
var msg = "Message";
var i = 0;
var interval = setInterval( function() {
label.innerHTML = msg.substr(0,i);
i++;
if ( i == msg.length ) {
clearInterval(interval);
}
}, 1000)
</script>