My CSS:
#a_x200{
visibility: hidden;
width: 200px;
height: 200px;
background-color: black;
}
My JS:
<script type="text/javascript">
function show(id) {
document.getElementById(id).style.display = 'block';
}
</script>
My Html
<div id="a_x200">asd</div>
<innput type="button" class="button_p_1" onclick="show('a_x200');"></input>
Not working I think I missed something!
try this:
document.getElementById('a_x200').style.visibility = 'visible';
You can try this code:
HTML Code:
<div id="a_x200" style="display:none;">asd</div>
<input type="button" class="button_p_1" onclick="showStuff('a_x200');"></input>
Java script:
<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = "block";
}
</script>
Try this code it will solve your problem.
You're using visibility: hidden to hide it, then attempting to use the display CSS property to make it visible. They're two completely separate properties, changing one won't magically change the other.
If you want to make it visible again, change the value of the visibility property to visible:
document.getElementById('a_x200').style.visibility = 'visible';
Here you can se one example i created in jquery Show/Hide using jquery .
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<style>
.slidingDiv {
height:300px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
}
.show_hide {
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
Show/hide
<div class="slidingDiv">
Fill this space with really interesting content. hide</div>
try this...
function showStuff(id) {
document.getElementById(id).style.display = 'block'; // OR
document.getElementById(id).style.visibility = 'visible';
}
edit
If you notice on your button click onclick="showStuff('a_x200');". you have already sent the id as a parameter to your function.. so i am taking the parameter and using it.
in your case have the parameter but not using it... though it does the samething...
OR u can do this
<input type="button" class="button_p_1" onclick="showStuff();"></input> // omitting double 'n'
function showStuff() {
document.getElementById('a_x200').style.display = 'block';
} // missing curly bracket
this both does the same thing
your input is miss spled
Should be like this:
My JS
<script type="text/javascript">
function showStuff(a_x200) {
document.getElementById(a_x200).style.display = 'block';
}
</script>
My Html
<div id="a_x200">asd</div>
<innput type="button" class="button_p_1" onclick="showStuff('a_x200');"></input>
Related
I made this code, but it wont work. Would be nice if some one can help me. :)
I've tried many things already, but it always didn't worked.
I want it to be so that you press the button and the background gets light, when you press it again it goes back to the origin.
<html>
<head>
<title>test</title>
<style>
.darkerBG {
background: #282828;
}
.lighterBG {
background: white;
}
</style>
</head>
<body class="darkerBG" id="bdbackground">
<script language="javascript" type="text/javascript">
function changeColor()
{
var bdBackground = document.getElementById('bdbackground').class;
if (document.getElementById('bdbackground').class == 'darkerBG')
{
document.getElementById('bdbackground').class == 'lighterBG';
} else if (document.getElementById('bdbackground').class == 'lighterBG')
{
document.getElementById('bdbackground').class = 'darkerBG';
}
}
</script>
<input type="button" class="button" value="test" onclick="changeColor()">
</body>
</html>
You must use className rather than class. class is not a property on a DOM element.
You need to modify the className property on the element rather than class.
For example:
document.getElementById('bdbackground').className = 'darkerBG';
In JavaScript, the correct property is .className instead of .class. You also have an erroneous == in your assignment of document.getElementById('bdbackground').class == 'lighterBG';
Alternatively, consider using .classList.contains(...).
<html>
<head>
<title>test</title>
<style>
.darkerBG {
background: #282828;
}
.lighterBG {
background: white;
}
</style>
</head>
<body class="darkerBG" id="bdbackground">
<script language="javascript" type="text/javascript">
function changeColor() {
var myElement = document.getElementById('bdbackground');
if (myElement.className == 'darkerBG') {
myElement.className = 'lighterBG';
} else if (myElement.className == 'lighterBG') {
myElement.className = 'darkerBG';
}
}
</script>
<input type="button" class="button" value="test" onclick="changeColor()">
</body>
</html>
I have created a working solution for what you are trying to achieve. I created a JSBin with the solution and improved your code slightly: http://jsbin.com/botasehoci/1/edit?html,css,js,output
(Edit, just noticed Quantastical answered with pretty much all the issues I brought up in the time it took me to to post this answer :/ )
The main issues were that:
You needed to include the ID bdbackground on the button element.
You needed to include the initial class name on the button element ("lighterBG")
The correct way to reference the value of the class attribute is using className not class
For the first condition in the if statement, you used an comparison instead of an assignment operator ( i.e. x == a instead of x = a )
This is the updated JS:
function changeColor() {
var button = document.getElementById('bdbackground');
var buttonClass = button.className;
if (buttonClass === 'darkerBG') {
button.className = 'lighterBG';
} else if (buttonClass === 'lighterBG') {
button.className = 'darkerBG';
}
}
This is the updated HTML for the button element:
<input id="bdbackground" type="button" class="lighterBG" value="test" onclick="changeColor()">
.classList()
Use .classList.add() and .classList.remove() to toggle classes. You could use .classList.toggle() but in certain circumstances the toggled states will get discombobulated if there is more than one toggler used at the same time.
Basic Flow
When the function changeColor() is called:
Get a reference to the body with getElementById()
Find out if the body has a class called .darkerBG by using .classList.contains()
If it does have .darkerBG as a class:
Remove the class and ...
add the class .lighterBG
Otherwise:
Remove the class .lighterBG and ...
add the class .darkerBG
SNIPPET
function changeColor() {
var bG = document.getElementById('bdbackground');
if (bG.classList.contains('darkerBG')) {
bG.classList.remove('darkerBG');
bG.classList.add('lighterBG');
} else {
bG.classList.add('darkerBG');
bG.classList.remove('lighterBG');
}
}
.darkerBG {
background: rgba(20, 10, 20, .6);
transition: all 2s;
}
.lighterBG {
background: rgba(200, 100, 200, .6);
transition: all 2s;
}
<html>
<head>
<title>test</title>
</head>
<body class="darkerBG" id="bdbackground">
<input type="button" class="button" value="test" onclick="changeColor()">
</body>
</html>
Instead of using class you can use className or classList with add()/ remove() or toggle().
To check if class exists or not, you can get element attribute (class) by getAttribute('class') , then search in it using indexOf() by your class string.
For best practice try to avoid inline events and use addEventListener instead.
https://jsfiddle.net/5m5ck1fk
//btn = document.querySelector('.button');
var btn = document.getElementsByClassName('button')[0],
bdBackground = document.getElementById('bdbackground');
btn.addEventListener('click', function () {
changeColor();
});
function changeColor() {
if (bdBackground.getAttribute('class').indexOf('darkerBG') != -1) {
bdBackground.classList.remove('darkerBG');
bdBackground.classList.add('lighterBG');
} else if (bdBackground.getAttribute('class').indexOf('lighterBG') != -1) {
bdBackground.classList.remove('lighterBG');
bdBackground.classList.add('darkerBG');
}
}
.darkerBG {
background: #282828;
}
.lighterBG {
background: white;
}
<body class="darkerBG" id="bdbackground">
<input type="button" class="button" value="test">
</body>
I want to put this slider in the slideDown() function so that when the text is hovered the slider should come down.
I have given the code snippet that i was trying to work on, it includes the javascript, css, body.
<script>
var $ = function (id) {
return document.getElementById(id);
}
var swapImage = function (){
if($("image1").title=="image1")
{
$("image1").src="/static/img/new_desserts/two.jpg";
$("image1").title="image2";
}
else if($("image1").title=="image2")
{
$("image1").src="/static/img/new_desserts/teen.jpg";
$("image1").title="image3";
}
else if($("image1").title=="image3")
{
$("image1").src="/static/img/new_desserts/some.jpg";
$("image1").title="image4";
}
else if($("image1").title=="image4")
{
$("image1").src="/static/img/new_desserts/set.jpg";
$("image1").title="image5";
}
else if($("image1").title=="image5")
{
$("image1").src="/static/img/new_desserts/cake.jpg";
$("image1").title="image1";
}
setTimeout(swapImage, 5000);
}
window.onload = function () {
/* $("calculate=").onclick = function(){calculate();} */
swapImage();
}
$(document).ready(function(){
$("#prj_1").mouseover(function(){
$("#image").stop().slideDown("slow");
});
});
</script>
<style>
#prj_1{
position:absolute;
top:1%;
left:50%;
width:1230px;
height:200px;
font-family:Andalus;
font-size:20px;
color:gold;
}
#image{
position:absolute;
top:3%;
left:25%;
width:700px;
height:300px;
display:none;
background-color:red;
}
</style>
<body>
<div id="prj_1">AAA Laundry</div>
<div id="image">
<img id="image1" src="/static/img/new_desserts/glass.jpg" title="image1" />
</div>
</div>
</body>
if i remove the code for slideDown its working but otherwise it not.
please help.
I modified your code a little and used JQuery instead of Javascript,
also you used window.onload and $(document).ready which have almost the same purpose.
plz check this demo and see if that's what you wanted:-
http://jsfiddle.net/d3rtcyxn/
I'm trying to make a button show an alert box. Basically you write something in an input form, then you click one button to show an alert box with what you wrote in it. You can see it here in jsfiddle.
My code looks like this:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='style.css' />
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div class="myblock">
<div id="left"></div>
<div id="center">
<form>
<input type="text" name="a" value="Type your word here!">
</form>
<button><strong>Alert!</strong>
</button>
</div>
<div id="right"></div>
</div>
</body>
</html>
CSS:
.myblock {
margin-top:60px;
height:20%;
width:100%;
}
#left {
height:100px;
width:33%;
top:50%;
margin-top:-50px;
float:left;
position:relative;
background-color:green
}
#center {
height:100px;
width:33%;
top:50%;
margin-top:-50px;
float:left;
position:relative;
background-color:red
}
#right {
height:100px;
width:33%;
top:50%;
margin-top:-50px;
float:left;
position:relative;
background-color:blue
}
form {
font-size: 12px;
font-family: Verdana, Arial, Sans-Serif;
display: inline-block;
margin-left:50px;
}
button {
height:35px;
width:70px;
margin-top: 25px;
border-radius:5px;
}
JavaScript:
This is the part I think I am getting wrong
$(document).ready(function () {
$("button").click(function () {
var word = $("input[name=a]").val();
alert(word);
});
})
So why is it not working? I don't know what I am doing wrong.
You have't include Jquery library:
$(document).ready(function () {
$("button").click(function () {
var word = $("input[name=a]").val();
alert(word);
});
}); //added
Updated DEMO: demo has included jquery library
Debugging JavaScript
I believe you should use Type your word here! as placeholder
<input type="text" name="a" value="" placeholder="Type your word here!">
Use JS fiddle reference
for your better understandings.
where I have given alert with the value present in the textbox.
and also I have used placeholder instead of typing string into textbox for default.
You might have been forgotten one of those.
Inlcude the jQuery library
close the $(document).ready() properly.
Check again.
$(document).ready(function () {
$("button").click(function () {
var word = $("input[name=a]").val();
alert(word);
});
});
DEMO
There are two things wrong here.
You have not loaded jQuery in your jsfiddle
You are missing a closing });
To load jquery in jsfiddle, there is a dropdown menu on the top left hand side of the screen that allows you to load libraries. Once you select jquery, you can click on Run button again.
But, you still need to fix your code ;)
$(document).ready(function () {
$("button").click(function () {
var word = $("input[name=a]").val();
alert(word);
});
}); // You missed this here
You missed closing simbols:
$(document).ready(function () {
$("button").click(function () {
var word = $("input[name=a]").val();
alert(word);
});
**});**
Here is jsfiddle
You did not close your ready function, it should be:
$(document).ready(function () {
$("button").click(function () {
var word = $("input[name=a]").val();
alert(word);
});
}); // Add this line here
Besides in your jsfiddle include or enable JQuery because you are using one.
Why not use javascript?
Add onclick="functionName()" to the button and then
functionName() {
var word = document.getElementsByName('a').value;
alert(word);
};
I'm making a collapsible treeView.
I made it all, I just need my + and - icons to toggle whenever they are clicked.
I did the part when I change an icon from + to -, on click, with jQuery with the following code:
$(this).attr('src','../images/expand.gif');
Problem is, I don't know how to make it go other way around, when i click on the node again :)
This should work:
<style>
.expand{
content:url("http://site.com/expand.gif");
}
.collapse{
content:url("http://site.com/collapse.gif");
}
</style>
<img class="expand">
<script>
//onclick code
$('img.expand').toggleClass('collapse');
</script>
Look for jquery function toggleClass :)
http://jsfiddle.net/Ceptu/
Html:
<div id="box">
Hello :D
</div>
Jquery:
$("#box").click(function () {
$(this).toggleClass("red");
});
Css:
#box {
width: 200px;
height: 200px;
background-color: blue;
}
.red {
background-color: red !important;
}
Remember that !important is realy important!!!
Lots of ways to do this :D
I wanted to do this without making classes. Inside your click event function, you could do something like this:
if($(this).attr('src') == '../images/collapse.gif')
$(this).attr('src', '../images/expand.gif');
else
$(this).attr('src', '../images/collapse.gif');
add plus as a default img src then define a minus-class to change the image source to minus image
$("selector_for_your_link").click(function () {
$(this).toggleClass("minus-class");
});
Basically, I'm trying to make a link that, when pressed, will hide the current body div tag and show another one in its place, unfortunately, when I click the link, the first body div tag still appears. Here is the HTML code:
<div id="body">
<h1>Numbers</h1>
</div>
<div id="body1">
Body 1
</div>
Here is the CSS code:
#body {
height: 500px;
width: 100%;
margin: auto auto;
border: solid medium thick;
}
#body1 {
height: 500px;
width: 100%;
margin: auto auto;
border: solid medium thick;
display: hidden;
}
Here is the JavaScript code:
function changeDiv() {
document.getElementById('body').style.display = "hidden"; // hide body div tag
document.getElementById('body1').style.display = "block"; // show body1 div tag
document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked
}
NB: CSS tags are declared in different files
Have you tried
document.getElementById('body').style.display = "none";
instead of
document.getElementById('body').style.display = "hidden";?
just use a jquery event listner , click event.
let the class of the link is lb... i am considering body as a div as you said...
$('.lb').click(function() {
$('#body1').show();
$('#body').hide();
});
Use the following code:
function hide {
document.getElementById('div').style.display = "none";
}
function show {
document.getElementById('div').style.display = "block";
}
You can Hide/Show Div using Js function. sample below
<script>
function showDivAttid(){
if(Your Condition)
{
document.getElementById("attid").style.display = 'inline';
}
else
{
document.getElementById("attid").style.display = 'none';
}
}
</script>
HTML -
Show/Hide this text
Set your HTML as
<div id="body" hidden="">
<h1>Numbers</h1>
</div>
<div id="body1" hidden="hidden">
Body 1
</div>
And now set the javascript as
function changeDiv()
{
document.getElementById('body').hidden = "hidden"; // hide body div tag
document.getElementById('body1').hidden = ""; // show body1 div tag
document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked";
// display text if JavaScript worked
}
Check, it works.
Consider using jQuery. Life is much easier with:
$('body').hide(); $('body1').show();
try yo write
document.getElementById('id').style.visibility="hidden";