Alright, I want to edit this code so if I for example press button 1 it first shows an image and then if I press button 1 again it should hide the image. Same goes for all buttons. I wonder if someone can rewrite my script so that becomes possible.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='/js/lib/dummy.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.hidden {
display: none;
}
</style>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
window.show = function(elementId) {
var elements = document.getElementsByTagName("div");
for (var i = 0; i < elements.length; i++)
elements[i].className = "hidden";
document.getElementById(elementId).className = "";
}
}//]]>
</script>
</head>
<body>
<button type="button" onclick="show('id1');" >Button 1</button>
<button type="button" onclick="show('id2');" >Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>
<button type="button" onclick="show('id4');">Button 4</button>
<div id="id1" class="hidden"><img src="alfagel.gif" height="280" width="120"/></div>
<div id="id2" class="hidden"><img src="alfagel.gif" height="280" width="120"/></div>
<div id="id3" class="hidden"><img src="bjorktrast.gif" height="280" width="120"/></div>
<div id="id4" class="hidden">text 4</div>
</body>
</html>
Import jQuery
Use $.fn.toggleClass
$('div').toggleClass('hidden');
Full example: http://jsfiddle.net/sLLL7/
jQuery has a hide and show method that should work. Example:
$('id1').hide()
The quickest way to do this would be to use jQuery and look into it's toggle() function. Otherwise..perhaps store the states of the buttons as boo leans and hide/show conditionally based on the value.
Related
is it possible to make this show/hide script work with multiple hide buttons or something similar? id="cv_cont should stay visible by default.
HTML
<button id="show_cv">Show</button>
<button id="hide_cv">Hide 1</button>
<button id="hide_cv">Hide 2</button>
<button id="hide_cv">Hide 3</button>
<button id="hide_cv">Hide 4</button>
<div id="cv_cont">Content Visible</div>
JavaScript
$("#hide_cv").click(function() {
$("#cv_cont").hide();
});
$("#show_cv").click(function() {
$("#cv_cont").show();
});
Original Location of the script.
jQuery - failed show/hide buttons
The first problem here is all the hide buttons have the same ID's value, you can fix that by give them the same class's value and call it on the JavaScript code.
The correct code will like this :
<!DOCTYPE html>
<html lang="fr">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<button class="show_cv">Show</button>
<button class="hide_cv">Hide 1</button>
<button class="hide_cv">Hide 2</button>
<button class="hide_cv">Hide 3</button>
<button class="hide_cv">Hide 4</button>
<div id="cv_cont">Content Visible</div>
<script>
$(".hide_cv").click(function() {
$("#cv_cont").hide();
});
$(".show_cv").click(function() {
$("#cv_cont").show();
});
</script>
</body>
</html>
The onclick-function of the <button> in the following code is not working.
I want to show a SAVE button when the editable area is clicked. Then the button's onclick function should display an alert but this is not working.
.views-submit-button {
visibility: hidden;
}
.views-exposed-widget:focus-within+.views-submit-button {
visibility: visible;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<title></title>
</head>
<body>
<div class="container">
<div class="views-exposed-widget">
<div contenteditable id="editable-text-name">
Editable text here.
</div>
</div>
<div class="views-submit-button">
<button id="save-button" type="button" onclick="alert('button clicked.')" class="btn btn-outline-dark">Save</button>
</div>
</div>
</body>
</html>
in your implementation css hides the button before the actual click happens
here's JS solution that hides button after alert triggered or by timeout when your contenteditable loses its focus
alternatively you can use opacity instead of visibility in css so it will remain clickable but this feels hacky, someone could click that accidentally so I would not recommend
.views-submit-button {
visibility: hidden;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="container">
<div class="views-exposed-widget">
<div tabindex="1" contenteditable id="editable-text-name" onfocusin="document.getElementById('save-button').style.visibility = 'visible'" onfocusout="setTimeout(function(){document.getElementById('save-button').style.visibility = 'hidden'}, 100)">
Editable text here.
</div>
</div>
<div class="views-submit-button">
<button id="save-button" type="button" onclick="alert('button clicked.');this.style.visibility = 'hidden';" class="btn btn-outline-dark">Save</button>
</div>
</div>
Try using the below code and add input event to your contenteditable element
$(document).ready(function() {
var isEditClicked = false;
document.getElementById("editable-text-name").addEventListener("input", function() {
$(".views-submit-button").css("visibility", "visible");
}, false);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<title></title>
<style>
.views-submit-button {
visibility: hidden;
}
.views-exposed-widget:focus-within+.views-submit-button {
visibility: visible;
}
</style>
</head>
<body>
<div class="container">
<div class="views-exposed-widget">
<div contenteditable id="editable-text-name">
Editable text here.
</div>
</div>
<div class="views-submit-button">
<button id="save-button" type="button" onclick="alert('button clicked.')" class="btn btn-outline-dark">Save</button>
</div>
</div>
</body>
</html>
I have changed the CSS. You need to change the CSS as per your requirements. But this is the way which you can follow to meet your needs.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<title></title>
<style>
.button {
display: none;
}
input:hover + .button, .button:hover {
display: inline-block;
}
</style>
</head>
<body>
<div class="small-4 columns">
<input type="text" value="Hi" />
<button class="button" onclick="alert('Hello');">Click Me</button>
</div>
</body>
</html>
The button is hidden that's why you don't see him. In your style change .views-submit-button to visible and button appears. In your wrapper div class name is .views-submit-button so that's why button is hidden by default.
.views-submit-button {
visibility: hidden;
}
You can use toggle method to manipulate button's visibility after click
The css execute first. you may use javascript to control it
<!DOCTYPE html>
<html lang="en">
<head>
<title>
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
</head>
<body>
<button value="">Button 1</button>
<button value="">Button 2</button>
<button value="">Button 3</button>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/custom.js" ></script>
</body>
</html>
Below is code in custom.js
$(':button').on('click',function(){
alert('Hello');
});
and when I changed the code in custom.js to
$('button').on('click',function(){
alert('Hello');
});
They do the same work that is display alert on click,But I want to know the difference between 'button' and ':button'
Using only button will select only <button></button> elements, while :button will select <button></button> and <input type="button" />
See https://api.jquery.com/button-selector/ for more information.
button only selects the button elements, whereas :button also selects the input type="button"
$(':button') selects <button> tags or <input /> tags with type="button"
$('button') selects only <button> tags
$(':button').on('click',function(){
alert('You clicked a tag of type: ' + $(this).prop('tagName'));
});
$('button').on('click',function(){
alert('Hello from ' + ($(this).html() || $(this).val()));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button value="">Button 1</button>
<button value="">Button 2</button>
<button value="">Button 3</button>
<input type="button" value="Input Button" />
$(":button") : selects both "button" tag and "input type=button" as well
while $("button") : only selects
I'm building a webpag in html. The image must change when I mouse over a div, but it does nothing. Anyone any idea?
<!doctype html>
<html>
<head>
<meta charset ="UTF-8"/>
<title>Oef 19.5</title>
<link href="19_5.css" rel="stylesheet"/>
<script>
function kleuren(veld)
{
var tshirt = document.getElementsByClassName("shirt");
tshirt.src=veld.id+".jpg";
}
</script>
</head>
<body>
<h1>Pick a color</h1>
<p><img class="shirt" src="gray.jpg"></p>
<div id="pink" class="roze" onmouseover="kleuren(this)"></div>
<div id="blue" class="blauw" onmouseover="kleuren(this)"></div>
<div id="brown" class="bruin" onmouseover="kleuren(this)"></div>
</body>
</html>
var tshirt = document.getElementsByClassName("shirt"); returns a collection of elements so access it like
tshirt[0].src=veld.id+".jpg"; //Since you have only one element with that class. If you have more, iterate over them
So, as you can see I amusing javascript to show/hide elements, however when you click the .png it shows the text but does not hide the other element's text. I have been going over and over this script and Google searching the hell out of it and I cannot come up with an answer. I think I need another pair of eyes, so if anyone takes a look at this let me know if there are errors or if I'm missing some code.
<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="NKit.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
function hideStuff(id) {
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body>
<div class="content">
<section class="left">
<p>
<img src="character1.png" id="char1" />
</p>
<p>
<img src="character2.png" id="char2" />
</p>
</section>
<section class="right">
<span id="character1" style="display: none;">Show character1 information</span>
<span id="character2" style="display: none;">Character 2 information</span>
</section>
</div>
</body>
</html>
<a href="#" onclick="showStuff('character1');" onclick="hideStuff('character2');">
On this line, you first set the property onclick to showStuff('character1'), then you reassign it to hideStuff('character2').
So, you should wrap these two function calls into one function and then assign that function to onclick.
onclick="function() { showStuff('character1'); hideStuff('character2'); }