I have an image within a popup that I would like to be swapped out with another image when clicked. I check localStorage to know whether the "on" or "off" button should be displayed.
popup.html:
<body>
<div>
<img id="onOffButton" src="img/on_button.png" onclick="onOff()" />
</div>
</body>
popup.js:
function onOff() {
var onOffButton = document.getElementById("onOffButton");
if (localStorage.ToneSet === "off") {
onOffButton.src="img/on_button.png";
} else {
onOffButton.src="img/off_button.png";
}
}
Currently my localStorage.ToneSet is set to "on" so my image should flip from "on_button.png" to "off_button.png", but it continues to display on_button.png. Any idea what I'm doing wrong? Thanks.
Maybe something like this http://jsfiddle.net/EX2hj/1/
I dunno this worked for me when I created a random test.html
<div id="onOffButton" style='width:200px;height:200px;border:1px solid' onclick='toggle()'> </div>
<script>
function toggle(){
alert("a");
var onOffButton = document.getElementById("onOffButton");
if (localStorage.ToneSet == "off") {
onOffButton.style.background = "red";
localStorage.ToneSet = "on";
} else {
onOffButton.style.background = "green";
localStorage.ToneSet = "off";
}
}
toggle();
</script>
Related
I'm trying to make a code that allows me to make click on any part of the screen and when I click the screen should display the message "click!"
By far I got the next code
html:
<html>
<head>
<title>Sense events anywhere</title>
<script type="text/javascript" src="anywhere.js"></script>
<link type="text/css" rel="stylesheet" href="anywhere.css" />
</head>
<body id="body" onload="init();">
<div id="message"> Click! </div>
</body></html>
JavaScript:
var e;
function init(){
e = document.getElementById("message");
document.getElementById("message").style.visibility = "hidden";
e.onmousedown = displayIt(e);
e.onmouseup = hideIt;
}
function displayIt(e) {
e.style.visibility = "visible";
}
function hideIt() {
e.style.visibility = "hidden";
}
CSS:
body {
}
div#message{
}
By far I only tried to turn the message visible and "invisible" when clicked but it doesn't work
Sorry for my English, I'm not a native speaker. If anyone could help me, that will be great.
Thanks.
var visible = true,
body = document.getElementById("body"),
mess = document.getElementById("message");
body.onclick = function() {
if (visible === true) {
mess.style.visibility = "hidden";
visible = false;
} else {
mess.style.visibility = "visible";
visible = true;
}
}
Edit Replaced body in selector as i didnt notice you wanted any part of the screen clicked
I'd suggest:
function toggleMessage(targetID){
var target = document.getElementById(targetID),
display = target.style.display;
target.style.display = display && display == 'block' ? 'none' : 'block';
}
document.body.addEventListener('click', function(){
toggleMessage('message');
});
Simple JS Fiddle demo.
Amended the above to use visibility (rather than display):
function toggleMessage(targetID){
var target = document.getElementById(targetID),
visibility = target.style.visibility;
target.style.visibility = visibility && visibility == 'visible' ? 'hidden' : 'visible';
}
document.body.addEventListener('click', function(){
toggleMessage('message');
});
Simple JS Fiddle demo.
References:
EventTarget.addEventListener().
Solution with jQuery (I recommend you to use display property. Because, if you use visibility, element will keep its space even it is hidden. With display: none; element is "removed".):
HTML
<div id="message"> Click! </div>
CSS
#message {
display: none;
}
jQuery
$(document).ready(function(){
$(window).click(function(){
$('#message').toggle();
});
});
DEMO: http://jsfiddle.net/j3KVT/2/
If you want to use visibility property then this is (one of many) solution with jQuery:
HTML
<div id="message">Click!</div>
jQuery
$(document).ready(function () {
$('#message').css('visibility', 'hidden');
$(window).click(function () {
if ($('#message').css('visibility') == 'hidden')
$('#message').css('visibility', 'visible');
else $('#message').css('visibility', 'hidden');
});
});
DEMO: http://jsfiddle.net/j3KVT/3/
I am using a simple javascript code to toggle div onclick. You can see it in action on this link: k-prim.biz/Untitled-2.html - it is a quite simple demo page. What I want to make is to hide div not only when click on the "link" but also when click outside the div. Also how can I change the css style of the "link" when the div is displayed? Thank you in advance!
<script type="text/javascript" language="javascript">
function showHide() {
var ele = document.getElementById("showHideDiv");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block"; }
}
</script>
<a href="#" onClick="return showHide();" >link</a>
<div id="showHideDiv" style="display:none;">hello!</div>
You've not given me any code to work with, so you'll have to modify this to suit your needs:
$(document).click(function() {
if(this != $("#the_div")[0]) {
$("#the_div").hide();
}
});
That will hide the div if a user clicks anywhere on the page that isn't that div.
HTML:
<div id="settings">
<input/><select></select><span>text</span>
</div>
Javascript:
var settings = document.getElementById('settings');
document.onclick = function(e){
var target = (e && e.target) || (event && event.srcElement);
var display = 'none';
while (target.parentNode) {
if (target == settings) {
display ='block';
break;
}
target = target.parentNode;
}
settings.style.display = display;
}
This is a quick hack I wrote. I am not sure why you want to do the same activity by clicking anywhere on the document. If you want to do that, replace jQuery('#link') with jQuery(document).
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
jQuery('#link').click(function(){
if(jQuery('#showHideDiv').hasClass('hide')) {
jQuery('#showHideDiv').removeClass('hide');
jQuery('#link').css('color', 'red');
} else {
jQuery('#showHideDiv').addClass('hide');
jQuery('#link').css('color', 'blue');
}
});
});
</script>
</head>
<body>
<a href="#" id="link" >link</a>
<div id="showHideDiv" class="hide">hello!</div>
</body>
</html>
This is the link to the jsfiddle
http://jsfiddle.net/EUScV/9/
and also add css rule
.hide {
display:none;
}
The code below is a link which when clicked will open and close an initially hidden div. It works fine other than having to click the link twice in the first instance to open it. It's not a major problem but if it can be made so that the div opens on the first click that would be great.
toggleDiv.js
function toggleDiv(elem, eventType, handler) {
if (elem.addEventListener) {
elem.addEventListener(eventType, handler, false);
} else {
elem.attachEvent('on' + eventType, handler);
}
}
toggleDiv(window, 'load', function() {
var link = document.getElementById('myMagicLink'),
div = document.getElementById('foo');
toggleDiv(link, 'click', function() {
if (!link) return true;
if (div.style.display == "none") {
div.style.display = "block"
} else {
div.style.display = "none"
}
return true;
});
});
index.html
<body>
<a id="myMagicLink" href="http://www.google.com/">My Magic Link</a>
<div id="foo">Opens a div</div>
<br>
End of page
<br>
<script language="JavaScript" type="text/javascript" src="toggleDiv.js"></script>
</body>
I had the same problem for toggling the display value of an ASIDE tag. Switching from "none" to "inline" and back again would not work on the first click. Display was set to "none" in my CSS file.
In my script I changed "none" to "" (which seems to mean "default" as far as I understand). The following code works fine for me now.
var x = document.getElementsByTagName("aside")[0];
if (x.style.display == "")
{
x.style.display = "inline";
}
else
{
x.style.display = "";
}
I understood this when I saw the CSS/actual values in Firefox developer tools: "aside" is shown with CSS attributes, but an "element" is first shown with no attribute. On first click, "element" was assigned a "display" attribute set to "none".
Not sure what the trouble you are having this... this works flawlessly for me in Chrome.
I did change the url of your link to reflect back to the same document, but the div foo is hiding and reappearing as it should.
Couple of style notes: Rather than setting display = "block" it is better to say display = "" so it can return to its default value.
In addition, I also included a preventDefault function. Your use of return true would work for DOM0 style event handling, but it did not work with the attachEvent/addEventHandler code. This properly keeps the link from being followed.
<html>
<head>
<title>Test</title>
<script>
function toggleDiv(elem, eventType, handler) {
if (elem.addEventListener) {
elem.addEventListener(eventType, handler, false);
} else {
elem.attachEvent('on' + eventType, handler);
}
}
toggleDiv(window, 'load', function() {
var link = document.getElementById('myMagicLink'),
div = document.getElementById('foo');
toggleDiv(link, 'click', function(e) {
if (!link) return cancelDefaultAction(e);
if (div.style.display == "none") {
div.style.display = "block"
} else {
div.style.display = "none"
}
return cancelDefaultAction(e);
});
});
function cancelDefaultAction(e) {
var evt = e ? e:window.event;
if (evt.preventDefault) evt.preventDefault();
evt.returnValue = false;
return false;
}
</script>
<body>
<a id="myMagicLink" href="#">My Magic Link</a>
<div id="foo">Opens a div</div>
<br>
End of page
<br>
</body>
</html>
Sorry it seems a bit complicated for something pretty simple, unless you have a specific design in mind; but this should work equally well:
The Fiddle
<html>
<head>
<script language="JavaScript" type="text/javascript">
var toggled = false;
function toggleDiv()
{
if(toggled)
{
document.getElementById('foo').style.display = '';
toggled = false;
}
else
{
document.getElementById('foo').style.display = 'none';
toggled = true;
}
}
</script>
</head>
<body>
<a id="myMagicLink" href="http://www.google.com/" onClick='toggleDiv()'>My Magic Link</a>
<div id="foo">Opens a div</div>
<br>
End of page
<br>
</body>
</html>
I want to show and hide a button by using java script.
My problem is that the button should be hide on page load and when I changed the text in text box then button should be show.
thanks.....
pls, Check this page and tell if this is what you wanted.
Basically, you need to use onchange event to do whatever you want to do.
<html>
<head>
<script>
window.onload=function(){
document.getElementById("button").style.display='none';
}
function showButton(){
document.getElementById("button").style.display='block';
}
</script>
</head>
<body>
<input type="button" id="button" value="New Button"/>
Change the text in Input Box. Then Button will be show<br/><br/>
<input type="text" id="userText" value="Change the text" onchange="showButton()"/>
</body>
</html>
Try with jQuery:
$("#yourInput").bind("change", function() {
var value = $(this).val();
if (value && value.length > 0) {
// Exist text in your input
$("#yourButton").show();
} else {
$("#yourButton").hide();
}
});
For non-jQuery:
function onchangeInput() {
var value = this.value;
if (value && value.length > 0) {
// Exist text in your input
document.getElementById("yourButton").style.visibility = "visible";
} else {
document.getElementById("yourButton").style.visibility = "hidden";
}
}
window.onload = function() {
document.getElementById("yourButton").style.visibility = "hidden";
var el = document.getElementById("yourInput");
if (el.addEventListener) {
el.addEventListener("change", onchangeInput, false);
} else {
el.attachEvent('onchange', onchangeInput);
}
}
Again, don't show/hide a button, just disable it, that make the best user experience.
You could style the css to visibilty:hidden then in javascript add an event listner like this:
<script type="text/javascript">
var box = document.getElementById('box');
var textbox = document.getElementById('textbox');
textbox.addEventListener("focus",showbox,false);
function showbox() {
box.style.visibility = 'visible';
}
That would make it appear on focus but if you wanted to take it a step further you could add another event listener for a keystroke when the textbox is focused on. That would probably work.
This is to hide/show a div based on text changed in text box.
With JQuery
<script type="text/javascript">
window.onload = function () {
document.getElementById("submitdiv").style.display = 'none';
}
$(function () {
$('.Name').on('keyup change', function () {
if (this.value.length > 0) {
$('#submitdiv').show();
} else {
$('#submitdiv').hide();
}
});
});
</script>
HTML
<%:Html.TextBoxFor(m => m.FirstName, new { #class ="Name"}) %>
<div id="submitdiv">
<button type="submit" value="Submit" class="btn btn-primary pull-right value-set" id="btnLogin">Submit</button>
</div>
Try this:
<script>
function
changeButton() {
document.getElementById("changeButton").innerHTML = "Insert text for button";
document.getElementById("changeButton").removeAttribute("hidden");
}
</script>
<button hidden id="changeButton"></button>
I am trying to make a simple toggle button in javascript. However, the button will only turn "OFF" and will not turn back "ON"
<html><head></head>
<script type="text/javascript">
function toggle(button)
{
if(document.getElementById("1").value=="OFF"){
document.getElementById("1").value="ON";}
if(document.getElementById("1").value=="ON"){
document.getElementById("1").value="OFF";}
}
</script>
<body>
<form action="">
<input type="button" id="1" value="ON" style="color:blue"
onclick="toggle(this);">
</form></body></html>
I am running:HP Netbook : Ubuntu Linux 10.04 : Firefox for Ubuntu 1.0.
Why are you passing the button if you're going to look it up?
Also, since you know the possible values, you only need to check if it's OFF, otherwise, you know it's ON.
// Toggles the passed button from OFF to ON and vice-versa.
function toggle(button) {
if (button.value == "OFF") {
button.value = "ON";
} else {
button.value = "OFF";
}
}
If you wanna get fancy and save a couple of bytes you can use the ternary operator:
function toggle(b){b.value=(b.value=="ON")?"OFF":"ON";}
Both of your if statements are getting executed one after each other, as you change the value and then immediately read it again and change it back:
function toggle(button)
{
if(document.getElementById("1").value=="OFF"){
document.getElementById("1").value="ON";}
else if(document.getElementById("1").value=="ON"){
document.getElementById("1").value="OFF";}
}
Adding the else in there should stop this happening.
Another method to do this is:
var button = document.querySelector("button");
var body = document.querySelector("body");
var isOrange = true;
button.addEventListener("click", function() {
if(isOrange) {
body.style.background = "orange";
}else {
body.style.background = "none";
}
isOrange = !isOrange;
});
In the JavaScript file.
/*****
NOTE!
Another way is applying a class to the element that we want to change.
The CSS file must have the class with the format we want:
.orange {
background: orange;
}
By last in our js file we only need to make the application of the class:
var button = document.querySelector("button");
button.addEventListener("click", function() {
document.body.classList.toggle("orange");
});
Regards :)
Why not use a switch?
function toggle(button)
{
switch(button.value)
{
case "ON":
button.value = "OFF";
break;
case "OFF":
button.value = "ON";
break;
}
}
<html>
<head>
<script type="text/javascript">
function toggle(button)
{
if(document.getElementById("1").value=="OFF")
{
document.getElementById("1").value="ON";
}
else
{
document.getElementById("1").value="OFF";
}
}
</script>
</head>
<body>
<form action="">
<input type="button" id="1" value="ON" style="color:blue" onclick="toggle(this);">
</form>
</body>
</html>
This will resolve your issue.
let isOn = true;
function toggle(button) {
isOn = !isOn;
if (isOn) {
document.getElementById("1").value = "ON";
} else {
document.getElementById("1").value = "OFF";
}
}