Change Font colour when you click on a element - javascript

I am trying to work out how, when I click on my "left" and "center" containers my "footertext" changes to Red and when I click on any of my containers (left right and center) it goes back to white
My current HTML is this:
<p class="footertext" style="color:red">Designed by Clarke Cribb<br></p>
<div class="container" id= "left" >
<h1 style="color:white"><a>HAIR</a></h1>
</div>
<div class= "container" id= "center">
<h1 style="color:white"><a>BEAUTY<a/></h1>
</div>
<div class="container" id= "right">
<h1 style="color:white"><a>BARBERS</a></h1>
</div>
</div>
My Javascript is this:
<script>
$(document).ready(function(){
$("#left").click(function(){
$("footertext").css("color","red");
});
});
</script>
If anyone can help I would appreciate it. Cheers. Clarke

Try the following
<script>
$(document).ready(function(){
$("#left,#center").click(function(){
if($(".footertext").css("color") == 'rgb(255, 0, 0)')
{
$(".footertext").css("color","white");
}
else
{
$(".footertext").css("color","red");
}
});
$("#right").click(function(){
$(".footertext").css("color","white");
});
});
</script>
Hope it helps!

You can toggle classes.
Use the following CSS:
.red {
color: red;
}
And change your js to:
$(function() {
$("#left,#center,#right").click(function(){
$(this).toggleClass('red');
});
});
And then remove the inline styles on the HTML.

Related

How to toggle <div> show and hide with JS

<div class="warnAA1">
<span onClick="document.getElementsByClassName('warnAA1')[0].style.display = 'none';">
<button>×</button>
</span>
<span onClick="document.getElementsByClassName('warnAA1')[0].style.display = 'content';">
<button> - </button>
</span>
</div>
I am making a website and I need a bit of assistance with toggling div being shown and not shown with
<span> and <button> the thing I am toggling is a div section with search and items underneath it, and it just shows the boxes with the content and I want the users to be able to toggle the visibility. Here's what I have tried:
<div class="warnAA1">
<span onClick="document.getElementsByClassName('warnAA1')[0].style.display = 'none';">
<button>×</button>
</span>
<span onClick="document.getElementsByClassName('warnAA1')[0].style.display = 'content';">
<button> - </button>
</span>
</div>
I am just stuck on how to toggle the content being displayed.
<div class="warnAA1">
<button onclick="showContent()">×</button></span>
<button onclick="removeContent()"> - </button></span>
<div class = "content">
Here is div content
</div>
</div>
<script>
const warnDiv = document.querySelector('.warnAA1');
const warnDivContent = warnDiv.querySelector('.content');
function showContent(){
warnDivContent.style.display = 'none';
}
function removeContent() {
warnDivContent.style.removeProperty('display');
}
</script>
You can use the slideToggle() method in jQuery to achieve your requirement easily.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").slideToggle();
});
});
</script>
</head>
<body>
<div>This is a paragraph.</div><br><br>
<button>Toggle slideUp() and slideDown()</button>
</body>
</html>
There are a couple of ways you can do this: I'd highly recommend you use ids to not have to worry about relative position querying multiple elements etc. I've also added a toggle button to show how that can work.
var show = document.getElementById("show");
var hide = document.getElementById("hide");
var warn = document.getElementById("warn");
var toggle = document.getElementById("toggle");
show.addEventListener("click", function() {
warn.classList.remove("hide");
});
hide.addEventListener("click", function() {
warn.classList.add("hide");
});
// Toggle logic
toggle.addEventListener("click", function() {
warn.classList.toggle("hide");
});
.warnAA1 {
background-color: #aaaaaa;
min-height: 200px;
transition: opacity .5s ease-in-out;
}
.warnAA1.hide {
opacity: 0;
}
.abs {
position: absolute;
top: 10px;
left: 10px;
}
<div id="warn" class="warnAA1">
</div>
<div class="abs">
<button id="show">Show</button>
<button id="hide">Hide</button>
<button id="toggle">Toggle</button>
</div>
As you have both your buttons inside the content you are trying to hide both the buttons hide along with the parent please try the following code snippet and let me know if it works. Placing the buttons outside should fix it.
function Hide(){
document.getElementsByClassName('warnAA1')[0].style.display = 'none';
}
function Show(){
document.getElementsByClassName('warnAA1')[0].style.display = 'block';
}
<span onClick="Hide()"><button>×</button></span>
<span onClick="Show()"><button> - </button></span>
<div class="warnAA1">
MY content
</div>

Jquery hover on div, add styles on grandparent

I have a big problem and I cant find the solution...
I must do the tooltip, for example we have this structure:
<body>
**<div class="tooltip">Long text ...</div>**
<div style="overflow:hidden">
<div class="box">
**<h1>Short text</h1>**
</div>
</div>
</body>
And if I am on h1 I want add to div with class tooltip visibility:visible, how can I do this?
I hope you find the solution to this problem.
You can use jquery .hover() for as h1 and .prepend() for adding div with class .tooltip and visibility: visible something like below
$('h1').hover(function() {
var tooltip = document.getElementsByClassName('tooltip');
if(!tooltip[0]) {
$('body')
.prepend('<div class="tooltip" style="visibility:visible;">Long text ...</div>');
}
});
.tooltip {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
****
<div style="overflow:hidden">
<div class="box">
**<h1>Short text</h1>**
</div>
</div>
</body>
Hope this will help you in some way(y).
Since your tooltip isn't a parent of the h1 you've to go up two levels then get the previous element with the class tooltip :
$('h1').parent().parent().prev('.tooltip').css({'visibility':'visible'});
You could use hover() method to toggle the visibility :
$('h1').hover(function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'visible'});
},function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'hidden'});
})
Hope this helps.
$('h1').hover(function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'visible'});
},function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'hidden'});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tooltip" style="visibility:hidden">Long text ...</div>
<div style="overflow:hidden">
<div class="box">
<h1>Short text</h1>
</div>
</div>
When you hover to H1 and you want to add tooltip to the grand parent this will be the answer.
$('.box h1').mouseenter(function() {
$(this.parentNode.parentNode.previousElementSibling).addClass('tooltip');
});
//2nd option
$('.box h1').mouseenter(function() {
$(this.parentNode.parentNode.previousElementSibling).css('visibility', 'visible');
});
Read this to know what target you want to use the event/script W3schools.com

JQuery FadeIn and FadeOut with button issue

I am trying to create a button to show all content. I want a fadein on mouse enter, fadeout on mouseleave. when you click the button it disables the fade out, until clicked again and that re-enables it
Here is the Jsfiddle: https://jsfiddle.net/uv4bxdxs/16/
<script>
function Show() {
$('#div1h1').fadeIn();
$('#div2h2').fadeIn();
$('#div3h3').fadeIn();
}
</script>
<body>
<button onclick="Show()">Show all</button>
<div id="div1">
<h1 id="div1h1">TEKST</h1>
</div>
<div id="div2">
<h1 id="div2h2">TEKST</h1>
</div>
<div id="div3">
<h1 id="div3h3">TEKST</h1>
</div>
</body>
One possible solution would be to add a class to displayed elements on the button click event. The class purpose is to disable the fade-in-out functionality. When the button is clicked again that class is removed to re-enable fade-in-out effect.
var flag = true;
$('button').click( function() {
if (flag) {
$('#div1h1').fadeIn().addClass('shown');
flag = false;
}
else {
$('#div1h1').fadeOut().removeClass('shown');
flag = true;
}
});
See DEMO
Please use this code:
$(function() {
var showAllFlag = false;
var btnShowAll = $('#show-all');
$('body').on('mouseenter', 'div.info-box', function() {
showTitle($(this))
}).on('mouseleave', 'div.info-box', function() {
hideTitle($(this))
});
function showTitle(target) {
target.find('h1').stop().fadeIn();
}
function hideTitle(target) {
if (!showAllFlag) {
target.find('h1').stop().fadeOut();
}
}
function showAllTitles() {
$('.info-box h1').show();
showAllFlag = true;
}
btnShowAll.on('click', showAllTitles);
});
Or follow by this link: enter link description here
Change your function to this:
$(function() {
$('#div1').hover(function() {
$('#div1h1').fadeIn();
});
});
$(function() {
$('#div2').hover(function() {
$('#div2h2').fadeIn();
});
});
$(function() {
$('#div3').hover(function() {
$('#div3h3').fadeIn();
});
});
Assuming that you just want the H1 to fade in and for them to stay visible on hover, just have the following code:
<script>
function Show() {
$('#div1h1').fadeIn();
$('#div2h2').fadeIn();
$('#div3h3').fadeIn();
}
</script>
<body>
<button onclick="Show()">Show all</button>
<div id="div1">
<h1 id="div1h1">TEKST</h1>
</div>
<div id="div2">
<h1 id="div2h2">TEKST</h1>
</div>
<div id="div3">
<h1 id="div3h3">TEKST</h1>
</div>
</body>
The JSFiddle link you provided has an extra JavaScript section which is causing the H1 to fade out on hover.
Just don't trigger the fadein if its already visible?
$('#div1').not(":visible").hover(function() {
$('#div1h1').fadeIn();
},
edit - My bad i didn't see that comma :), gimme a second

Display div on mouse hover

I have a link id="show" in header and a div id="display" in footer. I want to display div id="display" when mouse hover on id="show" that is in header area and div is in footer area.
HTML CODE:
<header>
<span> Show Div </span>
</header>
<---- Other Content -->
<footer>
<div id="display"> --- Content --- </div>
</footer>
Try this : You can use .hover() function as shown below. Pass comma seprated functions to it. First function to call when mouseover and second for mouseleave event.
$(function(){
$('#show').hover(function(){
$('#display').show();
},function(){
$('#display').hide();
});
}):
Without JQuery:
document.getElementById('show').onmouseover = function(evt) {
document.getElementById('display').style.display = "inline";
}
Hope this is what you are looking for.
http://jsfiddle.net/rxffwyux/
HTML
<header>
<span> Show Div </span>
</header>
<---- Other Content -->
<footer>
<div id="display"> --- Content --- </div>
</footer>
CSS
#display {
display: none;
}
Js
(function() {
$(function() {
//On Dom Ready
$('body').on({
mouseenter: function() {
$('#display').show();
},
mouseleave: function() {
$('#display').hide();
}
}, '#show');
});
}());

Toggle a div to be closed on load?

The following function toggles a div when clicked on the relative id. Any way to set it up so that when the page loads, the div being toggled starts out closed?
I dont want them to be seen until clicked on.
Best,
Joey
<script type="text/javascript">
$(document).ready(function() {
$("#architects").click(function() {
$(".exclusive-architects").toggle();
});
$("#international").click(function() {
$(".exclusive-international").toggle();
});
$("#designers").click(function() {
$(".exclusive-designers").toggle();
});
$("#historical").click(function() {
$(".exclusive-historical").toggle();
});
});
</script>
Just hide them on dom ready, like this:
<script type="text/javascript">
$(document).ready(function() {
$(".exclusive-architects, .exclusive-international,
.exclusive-designers, .exclusive-historical").hide();
$("#architects").click(function() {
$(".exclusive-architects").toggle();
});
$("#international").click(function() {
$(".exclusive-international").toggle();
});
$("#designers").click(function() {
$(".exclusive-designers").toggle();
});
$("#historical").click(function() {
$(".exclusive-historical").toggle();
});
});
</script>
You should just need to add a display:none to your starting CSS
DEMO
if your HTML looks like this:
<div id="buttons">
<div>toggle architects</div>
<div>toggle international</div>
<div>toggle designers</div>
<div>toggle historical</div>
</div>
<div class="cont"> architects content </div>
<div class="cont"> international content </div>
<div class="cont"> designers content </div>
<div class="cont"> historical content </div>
Than all you need is:
$('.cont').hide(); // HIDE ALL INITIALLY
$('#buttons div').click(function(){
$('.cont').eq( $(this).index() ).toggle();
});
$(function(){ // DOM ready
$(".exclusive-architects").hide();
$(".exclusive-international").hide();
$(".exclusive-designers").hide();
$(".exclusive-historical").hide();
});
it should work :)

Categories

Resources