I am new to jQuery and I have no idea about where to begin with this. On my webpage I have text and I want to put at the top four squares where the user can click on a square and this will change the colour of the text.
I am hoping to make the squares using CSS with the squares being red, yellow, green and black.
From this I need to create a colour picker using jQuery where the user will click a square and this will change the text into the appropriate colour.
http://jsbin.com/emical/1/edit
<div class="picker" data-color="red"></div>
<div class="picker" data-color="green"></div>
<div class="picker" data-color="blue"></div>
<div class="picker" data-color="black"></div>
<div id="test">TEST DIV THAT WILL CHANGE COLOR</div>
...where eg: instead of "red" you can also use HEX: "#f00" or "#ff0000" or "rgb()", "rgba()"... etc etc :)
CSS:
.picker{
cursor:pointer;
margin:3px;
width:30px;
height:30px;
float:left;
}
jQuery:
$('.picker').each(function(){
$(this).css({background: $(this).data('color')}); // set BG color for every element
}).click(function(){
$('#test').css({color: $(this).data('color')}); // change Target's text color on click
});
http://api.jquery.com/each/
http://api.jquery.com/css/
http://api.jquery.com/click/
or like this:
$('.picker').each(function(){
var myColor = $(this).data('color');
$(this).css({background: myColor }).click(function(){
$('#test').css({color: myColor});
});
});
Related
I am trying to make a chrome extension that finds the original background color of the pressed element.
I mean the background color that was before user hovered and the :hover selector (maybe) changed it.
I tried to use document.styleSheets but it gives me an error.
Example
window.addEventListener("click",function(e){
pressedElement = e.target;
console.log(window.getComputedStyle(pressedElement,null).backgroundColor);
//return blue but I want the background before hover changes (green,yellow,red in this case)
});
div{
height:100px;
width:100px;
}
div:hover{
background-color:blue !important;
}
<div style="background-color:green;">1</div>
<div style="background-color:yellow;">2</div>
<div style="background-color:red;">3</div>
window.getComputedStyle(pressedElement,null).backgroundColor return the current background color (blue in this case), but I want the background color before :hover changes (red, yellow or green in this case).
Just replace the element with itself, which forces the hover state to update, then calculate the style:
window.addEventListener("click",function(e){
const target = e.target;
target.parentNode.replaceChild(target, target)
const color = window.getComputedStyle(target,null).backgroundColor;
console.log(color);
return color;
});
div{
height:100px;
width:100px;
}
div:hover{
background-color:blue !important;
}
<div style="background-color:green;">1</div>
<div style="background-color:yellow;">2</div>
<div style="background-color:red;">3</div>
I'm a newbie. I had similar block with dynamic background color, so I haven't exact background color, because it can be changed whenever. But I have static color in data attribute.
I want to add its attribute to my div on mouseenter and remove on mouseleave.
How can I do it?
My HTML code:
<div class="block" data-hover-bg="#a30003">
<div>
My js:
$( ".block" ).mouseenter(function() {
this.style.backgroundColor = this.dataset.hoverBg;
});
So how can I remove this dataset on mouseleave? And it should work repeatedly.
Thanks.
Use another data-* attribute to remember the old background color:
$( ".block" ).on({
mouseenter() {
$(this).data('hover-bg-old', $(this).css('background-color')); // Remember it
$(this).css('background-color', $(this).data('hover-bg'));
},
mouseleave() {
$(this).css('background-color', $(this).data('hover-bg-old')); // Reset it
}
});
.block {
padding: 30px;
background: gold; /* Say this element already has a default background */
}
<div class="block" data-hover-bg="#a30003">test</div>
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
PS: in pure HTML className should be class
Here, you can dynamically add/remove background color on mouseover and mouseleave.
HTML CODE:
<div class="block" data-hover-bg="#a30003" style="background-color: #dddddd">Text</div>
JQUERY CODE:
$(".block").mouseover(function(){
$(this).data('leave-bg', $(this).css('background-color'));
$(this).css('background-color', $(this).data('hover-bg'));
}).mouseleave(function(){
$(this).css('background-color', $(this).data('leave-bg'));
$(this).removeData('leave-bg');
});
I've set up a method which when a button is clicked changes it's background colour and resets the colour of the other three buttons. The method for button1 looks like this
<script>
function changeBttn1() {
document.getElementById("bttn1").style.backgroundColor = '#add8e6';
document.getElementById("bttn2").style.backgroundColor = '#D3D3D3';
document.getElementById("bttn3").style.backgroundColor = '#D3D3D3';
document.getElementById("bttn4").style.backgroundColor = '#D3D3D3';
}...
Also I want to be able to make the Div that applies to each button appear and the others hidden with the same button press. The Div uses Class=Collapse which corresponds to Display:None in Bootstrap.css but I want to change it to run from the same method as the buttons. How can I do both events using Css?
Please do it like this very simple and easy
$('.my-btn').on('click',function(){
var colorval=$(this).attr('color');
$('.my-btn').css('background-color', 'grey');
$(this).css('background-color', colorval);
});
button{
background-color:grey;
padding:10px;
border:1px solid #000000;
color:#ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-wrapper">
<button class="my-btn" color="red">Red</button>
<button class="my-btn" color="green">Green</button>
<button class="my-btn" color="purple">Purple</button>
</div>
I want to hide the text First Text only, using (opacity:0) when I mouse over the topblock.
<div class="topblock">
First Text
<div class="block">
Inner Text
</div>
</div>
But I When i use following jQuery code i am getting child DIV text also First Text Inner Text
$(".topblock").on("mouseenter",function(){
console.log($(this).text());
$(this).css({"opacity":"0"})
}).on("mouseleave",function(){
});
To do what you require without amending the HTML structure will be exceptionally difficult as you would need to amend the textNode holding the First text value directly.
Instead it would be far simpler to just amend your HTML to wrap that text in another element, such as a span, and perform the operations on that element. Try this:
<div class="topblock">
<span>First Text</span>
<div class="block">
Inner Text
</div>
</div>
$(".topblock").on("hover",function(){
$(this).find('span').toggle();
});
You can't just hide a part of a block. You can put First text in a span and hide the span when your mouse enter the topblock block
Impossible to do using opacity, but you could accomplish it by setting the color to match the background color on hover.
Here's how to achieve the effect while hovering .topblock except when hovering its .block child. Note the use of CSS !important:
$('.topblock').hover(
function() {
$(this).addClass('white');
},
function() {
$(this).removeClass('white');
});
$('.block').hover(
function() {
$('.topblock').addClass('black');
},
function() {
$('.topblock').removeClass('black');
});
.topblock .block, .black {
color: black !important;
}
.white {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topblock">
First Text
<div class="block">
Inner Text
</div>
</div>
I have a parent DIV that contains three other small DIV's. I would like to change the background colors of the three child DIV's when I hover or mouseover the parent DIV. Is it possible to do this in javascript or jquery?
<div id="r1"> //Mousover
<div class="bx"></div> //Change background color
<div class="bx"></div> //Change background color
<div class="bx"></div> //Change background color
</div>
You don't need to do this with javascript, you can just use CSS
div#r1:hover div.bx{ background-color: red; }
You can do this in CSS as well,
but from what I understand you want to do, this is how you can achieve that in JQuery:
<div id="r1" onmouseover='changeBg(this);' onmouseout='revertBg(this);'> //Mousover
<div class="bx"></div> //Change background color
<div class="bx"></div> //Change background color
<div class="bx"></div> //Change background color
</div>
<script type='text/javascript'>
function changeBg(div){
$(div).children('.bx').attr('background-color', '#AAAAAA');
}
function revertBg(div){
$(div).children('.bx').attr('background-color', '#BBBBBB');
} <script>
Add this to your javascript:
$('#r1').hover(function(){ $(this).addClass('r1hovered'); });
And add that to your CSS:
.r1hovered .bx { background-color: red; }
Source : http://api.jquery.com/hover/