I am using a JavaScript dropdown for my FAQ, and what I can't figure out is how to have the color of the question change when clicked, and then change back when clicked again.
Here's the JavaScript:
<script type="text/javascript">
function toggle(Info) {
var CState = document.getElementById(Info);
CState.style.display = (CState.style.display != 'block')
? 'block' : 'none';}
</script>
I know using :action will work just for when the question is clicked, but I'm trying to style it so that each click either turns the color on or off, as that's what happens with the answer dropping down and I'd like both to be coordinated.
If I understand correctly you toggle function shows/hides the answer. Then all you have to do is to get the question container and toggle a css class which contains the text color
For example:
document.getElementById(your question).classList.toggle(your-class);
and in a css file
.your-class {
color: selected color;
}
<style>
.classStyle1 {background-color:white}
.classStyle2 {background-color:green}
</style>
<script type="text/javascript">
function toggle(Info) {
var CState = document.getElementById(Info);
if(CStage.className == "classStyle1"){
CStage.className = classStyle2;
}else{
CStage.className = classStyle1;
}
// or else
// create style attribute for select element and put style='background-color:white' like this
if(CStage.style.backgroundColor == "white"){
CStage.style.backgroundColor = 'green';
}else{
CStage.style.backgroundColor = 'white';
}
</script>
If I understand correctly - try this
CState=document.getElementById("myColor");
CState.onmouseover=function(){this.style.color='red';};
CState.onmouseout=function(){this.style.color='blue';};
Related
function btnclick() {
var btn = document.getElementById('M_menucol').style.display;
if (btn == 'none')
{
document.getElementById('M_menucol').style.display = 'block';
document.getElementById('M_menubtn').style.backgroundImage = "url(.../image/cancel.png)";
}
else {
document.getElementById('M_menucol').style.display = 'none';
document.getElementById('M_menubtn').style.backgroundImage = "url(.../image/menubtn.png)";
}
};
i want change display none to block and reverse + backgroundimage url
display change is working but background image change dont working
plz give me solution...
sorry for my bad english
I'm sorry my meaning was that when I click the button it opens a menu, and the button's image changes. Clicking the button again closes the menu and returns the image to its original state.
And I will study hard ;)
https://jsfiddle.net/phnzb10m/12/
Here is how I would do this:
function btnclick() {
var btn = document.getElementById('M_menucol');
if(btn != null) {
btn.classList.toggle("cancel")
}
};
The style.css file would contain something like this:
#M_menucol{
display: none;
background-image: url(.../image/menubtn.png);
}
.cancel{
display: block;
background-image: url(.../image/cancel.png);
}
In your fiddle why do you separated col, btn with comma when you setting the style of them ? i think you mean semicolon instead
In your fiddle the element id is Mmenubtn while you write it M_menubtn in the script
you should know that style is an object of elements so it's cannot output the style sets by style or link tags it's just output inline style or style sets to it by js
if you want to get style sets by style or link tags you will be need to use getComputedStyle() method
by default when there's no any inline style the values of style object properties is empty string so you can check if it's return empty string or none then execute you script
By Display Property
function btnclick() {
var col = document.getElementById('M_menucol');
var btn = document.getElementById('M_menubtn');
if (col.style.display === "" || col.style.display == 'none') {
col.style.display = 'block'
btn.style.backgroundImage = "url(https://postimg.cc/68V0PW0t)";
} else {
col.style.display = 'none'
btn.style.backgroundImage = "url(https://i.postimg.cc/vBVMcpmM/menubtn.png)";
}
}
By getComputedStyle() Method
function btnclick() {
var col = document.getElementById('M_menucol');
var btn = document.getElementById('M_menubtn');
if (getComputedStyle(col, null).display == 'none') {
col.style.display = 'block';
btn.style.backgroundImage = "url(https://postimg.cc/68V0PW0t)";
} else {
col.style.display = 'none';
btn.style.backgroundImage = "url(https://i.postimg.cc/vBVMcpmM/menubtn.png)";
}
}
There are two divs with class of .egg. The user is supposed to click on the div they want to change the background color of and then click the color for the div's new background. Two steps total. I've written a jQuery function to capture the id of the div chosen for the background change and then the id for the color to change to background. Works great, except that when the new div is selected, to change the background color, the previously selected div id is still stored in the variable called clickedId.
To try to fix this problem, I have set clickedId = ''; after the background has been changed for the selected div. However when a new div is selected, it doesn't work anymore. The console says Cannot read property 'style' of null. It looks like the first part of the code, $(".egg").click(function() {... isn't be executed for new div selections.
Does anyone have any suggestions or advice for this? Thanks in advance!
jQuery Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//Select the div to change the background color
$(".egg").click(function() {
var clickedId = $(this).attr("id");
//Updating the background color for selected div
$(".color").click(function() {
var clickedColor = $(this).attr("id");
if(clickedColor == 'red'){
document.getElementById(clickedId).style.backgroundColor = "red";
clickedId = '';
return;
}else if(clickedColor == 'blue'){
document.getElementById(clickedId).style.backgroundColor = "blue";
clickedId = '';
return;
}else if (clickedColor == 'yellow') {
document.getElementById(clickedId).style.backgroundColor = "yellow";
clickedId = '';
return;
}else{
document.getElementById(clickedId).style.backgroundColor = "white";
clickedId = '';
return;
}
});
});
});
</script>
HTML Code:
<body>
<div id="egg-main">
<div id="left-egg"></div>
<div id="center-egg1" class="egg" onclick="semi_left()"></div>
<div id="center-egg2" class="egg" onclick="semi_right()"></div>
<div id="right-egg"></div>
<div id="bottom">
<div id="red" class="color"></div>
<div id="blue" class="color"></div>
<div id="yellow" class="color"></div>
<div id="white" class="color"></div>
</div>
</div>
<script src="demo.js"></script>
</body>
Why it's not working
It looks like the problem is that the event listener for .color is declared inside the event listener for .egg. This means that every time you click .egg a new event handler is being created for .color.
The second time you click on a .color it is still running the event from the first time you clicked it. And, since you have changed the id to '', a getElementById('') is indeed null.
Possible Solution
Move the .color event listener outside the .egg event listener. You'll also have to change the scope of the clickedID variable.
$(document).ready(function(){
var clickedId = '';
//Select the div to change the background color
$(".egg").click(function() {
clickedId = $(this).attr("id");
alert(clickedId);
});
//Updating the background color for selected div
$(".color").click(function() {
var clickedColor = $(this).attr("id");
if(clickedId != '') document.getElementById(clickedId).style.backgroundColor = clickedColor;
});
});
I have the following piece of code i'm working on, I want to find an easy way to hide all the labels after (and including) Text2 whenever Option1 or Option2 are selected on the drop menu. I tried working around with class elements but they seem to break my script, right now I am only able to hide one label only (text5). Would you mind helping me?
<p><label>Text1</label> [select* id:mobileProvider "Option1" "Option2"</p>
<p><label>Text2</label></p>
<p><label>Text3</label></p>
<p><label>Text4</label></p>
<p><label id="sub">Text5</label></p>
<script language="javascript" type="text/javascript">
document.getElementById("mobileProvider").addEventListener("change", displayTextField);
function displayTextField() {
var dropDownText = document.getElementById("mobileProvider").value;
if (dropDownText == "Option1") {
document.getElementById("sub").style.display = 'none';
} else if (dropDownText == "Option2") {
document.getElementById("sub").style.display = 'none';
} else {
document.getElementById("sub").style.display = 'inline';
}
}
</script>
I changed the 'class' tag in every paragraph to 'hid' and added the next row in my script, and it did the trick.
var hide = document.getElementsByClassName('hid'),i = hide.length;
while(i--) {
hide[i].style.display= 'none'; }
Im trying to have a href link expand/display extra text when clicked however when I click it nothing happens.
When I run the html code I can click on the link but it does not show the text for some reason.
Any idea why?
Heres the code:
<html>
click to expand
<div id="divID" style="display: none;">this is expanded</div>
</html>
I'm trying to keep the code as short as possible as the above code will have to be repeated hundreds of times for each link.
Assuming you're using jQuery, you are using the CSS selector incorrectly. Your line should be this:
click to expand
The # in #divID represents any element with an id of divID, whereas just using divID will search for divID tags (something like <divID></divID>)
See here for more documentation on the ID Selector and here's a list of all the CSS selectors you can use, including the Element Selector for you to understand why your previous code didn't work.
You can also combine CSS selectors to narrow your selection in the future, although it's not much necessary with an ID selector:
click to expand
And if you absolutely insist on not using jQuery:
click to expand
or breaking it out into its own function:
<script>
function toggleElementById(id) {
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
}
</script>
click to expand
Add this to your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Then:
$('#divID').toggle();
I see you're using jQuery, right? So I wrote your answer in jQuery..
$('.toggle').click(function () {
var selected = $(this).attr('href');
$('.expandable'+selected).toggle();
});
Check out the jsfiddle
If you're not using jQuery than here is the javascript version (html changed).
var expandable = document.getElementsByClassName("expandable");
for (i = 0; i < expandable.length; ++i) {
expandable[i].setAttribute('style','display: none;');
}
var toggle = document.getElementsByClassName("toggle");
for (i = 0; i < toggle.length; ++i) {
toggle[i].setAttribute('onclick','toggler(this)');
}
function toggler(obj) {
var id = obj.dataset.toggle,
el = document.getElementById(id);
el.style.display = (el.style.display != 'none' ? 'none' : '');
}
Check out the jsfiddle
Hi I was wondering is there a way to hide a fixed footer with a button, so it can be closed by the user if they want to see more of the screen and vise versa. Is there a way to do this with css or will it require javascript?
cheers.
JavaScript
<input type="button" id="myButton" onclick="HideFooter()" />
function HideFooter()
{
var display = document.getElementById("myFooter").style.display;
if(display=="none")
document.getElementById("myFooter").style.display="block";
else
document.getElementById("myFooter").style.display="none";
}
JQuery
$("#myButton").click(function(){
if($("#myFooter").is(":visible"))
$("#myFooter").hide();
else
$("#myFooter").show();
});
If you want some other nice effects
$("#myFooter").fadeOut(500);
$("#myFooter").slideUp(500);
$("#myFooter").slideToggle(500); //Hide and Show
Another method, as Bram Vanroy Suggested:
$("#myButton").click(function(){
$("#myFooter").toggle();
});
It will require JavaScript. Your button click event handler needs to change the display property of the footer to none.
Here's a javascript only version, with the button having and id of "button" and footer id of "footer". This method will allow you to show the footer again after hiding it, if the user wants to see it again.
var button = document.getElementById('button');
button.onclick = function() {
var div = document.getElementById('footer');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
Or with jQuery:
$("#button").click(function() {
$("#footer").toggle();
});
A nice tutsplus video tutorial for exactly what you need. It's a simple bit of jQuery.