I am looking for javascript command that would do the following:
Click on image -> open spoiler
Click on image again -> hide spoiler
Here is what I got so far:
javascript in my html
<script>
function myFunction() {
document.getElementById("prvy").innerHTML = document.getElementById('spoiler_id').style.display='';}
</script>
Spoiler
<a id="show_id"
onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';"
class="link"></a><span id="spoiler_id"
style="display: none">[Show]<button onclick="document.getElementById('spoiler_id').style.display='none';
document.getElementById('show_id').style.display='';"
class="link">[Hide]</button>
<br><h1 id="bz">Heading</h1><br><br><p>text</p></span>
And my button:
<div id="prvy" onclick="myFunction()"></div>
What I managed to do, is to click on a image, wich will open spoiler. Hovewer, I've been unable to do the second part, onclick again it will close the spoiler.
I also did serach for solution alredy, nothing worked for me, not even this: Link
I also tired if{} else{} statement but didn't work for me either.
Help would be really appreciated, as I am getting desperate on this one.
You can use jQuery .toggle() to toggle show/hide
$("#prvy").click(function() {
$("#spoiler_id").toggle();
});
Note : You need to include jQuery in your document as
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Working snippet :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="show_id"
onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';"
class="link"></a><span id="spoiler_id"
style="display: none">[Show]<button onclick="document.getElementById('spoiler_id').style.display='none';
document.getElementById('show_id').style.display='';"
class="link">[Hide]</button>
<br><h1 id="bz">Heading</h1><br><br><p>text</p></span>
<div id="prvy" onclick="myFunction()">button</div>
<script>
$("#prvy").click(function() {
$("#spoiler_id").toggle();
});
</script>
In the JavaScript where you click the button use the simple jQuery function toggle.
$('#spoiler_id').toggle();
Toggle will hide the element selected if it is currently shown or display the element if it is currently hidden.
you would need some state that flips when the function is called.
like this.
<script>
var state = false;
function myFunction() {
state = !state;
if(state){
//do something
}else{
//do something else
}
}
</script>
Is that all of your code, it would be easier for you and less confusing too if you just gave the buttons an on click function and then called that function in your js.
Can I see all of your html
I am giving an example to concerned question using javascript.
HTML:
<script type="text/javascript">
var permit = 'true';
function showhide() {
var getcont = document.getElementsByClassName('hidshowcont');
if (permit === 'true') {
permit = 'false';
getcont[0].style.display = 'block';
}
else {
permit = 'true';
getcont[0].style.display = 'none';
}
}
</script>
<style type="text/css">
.hidshowcont{
height: 200px;
width: 300px;
border: 1px solid #333333;
display: none;
}
</style>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1cSDTn18ufwjuMihttTvCPJOnFY-4hxbPcaOVd87nSPaQakbP9IERaQ" />
<br />
<br />
<div class="hidshowcont">
This is an example of hide and show the container by clicking of an image.
</div>
This will help u much
Related
Onclick button "button1" , we are displaying pop up box and hiding "button1".
but now we want to display the "button1" once we click on "close" button of "pop up box"
pop up close button code
<a href="javascript:void(0)" class="close">
<input type="button" onclick="showDiv()" style="display:none;" />
</a>
function showDiv() {
document.getElementById('aitcg-control-panel').style.display = "block";
}
button1 code
<div id="aitcg-control-panel"><button>button1</button></div>
Edit
I tried this code : document.getElementById('aitcg-control-panel').style.display = "block"; but still it didt worked for me....
After looking into your website you've provided i found out that the elements you wanted to reappear were removed from the page.
Why don't you just keep the button instead? Because after saving the item it refreshes the page anyway.
There should be any javascript code in the module (aitcg) you've installed on your site that removes the elements aitcg-toolbox-{{somenumber}} and aitcg-control-pane from the page.
I hope this could be of any help.
Is this what you were looking for? I'm sure there is a cleaner way to do it, but your question wasn't super clear.
function showDiv() {
document.getElementById('aitcg-control-panel').style.display = "block";
document.getElementById('ShowDivButton').style.display = "none";
}
function hideDiv() {
document.getElementById('aitcg-control-panel').style.display = "none";
document.getElementById('ShowDivButton').style.display = "initial";
}
div{
width: 200px;
height: 200px;
background: red;
display: none;
}
<button id='ShowDivButton' onclick="showDiv()">Open Div</button>
<div id="aitcg-control-panel" >
<button id='ShowDivButton' onclick="hideDiv()">Close Div</button>
</div>
I've sincerely not fully understood your question. But from what you've said, I'm assuming this is what you want:
function display(a) {
//Hide the button
a.style.display = "none";
//You need setTimeout for the code to wait for the alert to show the button again
setTimeout(function() {
alert('ok');
a.style.display = "block";
}, 100);
}
<button onclick="display(this);">Click me</button>
Hope it helps in some way and if this is not what you wanted, please reply.
after giving link for you website. i can tell you the reason why its not working for you.
on click of save design you are removing code for aitcg-control-panel
that's why you are not able to show it back
proof: before clicking code for button div exists
After click on save design
proof:
code is not there. that's why you are not able to show.
i debugged your code i found one function
_getControlPanelHtml: function()
{
if (this.config.editorEnabled) {
var returnHtml = "";
returnHtml += '<div id="aitcg-control-panel" style="display:none">' +
'<button onclick="return setproductlogin(\'null\', event);" class="aitcg-button apply-but" id="submit-editorApply-{{rand}}" title="{{apply_text}}">{{apply_text}}</button>' +
'<button class="aitcg-button reset-but" id="submit-editorReset-{{rand}}" title="{{reset_text}}">{{reset_text}}</button>' +
'</div>';
return returnHtml;
}
return '';
},
in this function they are returning '';
please change this function or other function to give you the same code what you had before clicking.
I am trying to learn Javascript on my own. So I gave myself a task: Create a button and with that button I can change the background colour. This is what I have done so far. I assume I don't need to run it under localhost like how we usually do PHP? I only drag the file to Google Chrome. So far, after clicking, it doesnt change colour at all. I also wonder why. Would be grateful if someone could point out my error
exe1.html
<html>
<head>
<link rel="stylesheet" href="layout.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.button').click(function(){
$('body').css('background', '#' + changeColour());
});
});
function changeColour() {
return Math.floor(Math.random()*16777215).toString(16);
}
</script>
</head>
<body>
<div class="buttonClickMe">
<button type="button" onclick="changeColour">Click me</button>
</div>
</body>
layout.css
button
{
background-color: red;
width: 100px;
height: 100px;
}
body
{
text-align: center;
background-color: blue;
}
Looks like you are trying to implement the click event in two ways:
as a HTML attribute
<button type="button" onclick="changeColour">
In order for this way to work, you should use changeColour as a function:
<button type="button" onclick="changeColour()">
via JS
$('.button').click(function(){ ...
This is the wrong selector for button (the . looks for elements by class name). Instead, use button:
$('button').click(function(){ ...
Either method will work and you only need one.
This should work
$(document).ready(function () {
$('.button').click(function () {
changeColour();
});
});
function changeColour() {
var col = Math.floor(Math.random() * 16777215).toString(16);
$('body').css('background', '#' + col);
}
If you are learning javascript don't jump so fast to jQuery, first do it in plain javascript, like this.
Pure JS
var array = ['black','red','yellow']; //create an array with colors
function changes(){ //create the function
document.bgColor= array[Math.floor(Math.random()* array.length)]; //change the document. for example
}
HTML
<button type="button" onclick="change()">Click me</button>
The selector you're using for the click event does not exist. Add a class to the button for it t work.
Try this:
HTML
<button type="button" class="button">Click me</button>
CSS
$(document).ready(function(){
$('.button').on('click', function(){
$('body').css('background', '#' + changeColour());
});
});
function changeColour() {
return Math.floor(Math.random()*16777215).toString(16);
}
What you've done is fine,
You should move the button class .button onto the actual button element and remove the onclick and then should work.
Here:
http://jsfiddle.net/745ex5zc/
$('.button').click(function(){...
is referring to a click on a button with the CLASS button.
Simply add class=""button" to your button and it would work, though I'd recommend using id="myId" and using $('#myId').click(function(){ instead.
Give this a try...
JSFiddle https://jsfiddle.net/w6tjtaqy/
<script>
$(document).ready(function(){
$('.button').click(function(){
$('body').css('background', '#' + changeColour());
});
});
function changeColour() {
return Math.floor(Math.random()*16777215).toString(16);
}
</script>
<style>
button
{
background-color: red;
width: 100px;
height: 100px;
}
body
{
text-align: center;
background-color: blue;
}
</style>
<div class="buttonClickMe">
<button type="button" class="button">Click me</button>
</div>
The following script opens an image onmouseover, however I can't come up with a way to remove the image onmouseout. I know I am missing something extremely simple but can't seem to find something that works.
<script type="text/javascript">
function show(Id) {
document.getElementById(Id).style.display="inline";
}
</script>
<span onmouseover="show ('myImage')">- <u>LAZARETTE</u></span></b>
<img src="../images/MarkILineDrawingLazarette.jpg" id="myImage" border="0" style="display:none;"
You are very close! Just add the onmouseout event!
HTML
<b>
<span onmouseover="show('myImage',true)" onmouseout="show('myImage',false)">- <u>LAZARETTE</u></span></b>
JAVASCRIPT
function show(Id, show) {
document.getElementById(Id).style.display = show ? "inline" : "None";
}
function hide(Id) {
document.getElementById(Id).style.display="none";
}
then change the opening span tag to:
<span onmouseover="show('myImage')" onmouseout="hide('myImage')" >
Edit:
JSFiddle!
Okay, I think my head is being dense. But I cant seem to get this to work. I'm doing a website for a photographer, and he wants to be able to let a user change the frame that they would like from a choice of 3. Easiest way I thought to do this was to create a div, and then have it change class based on a button click. So it would change the background image. However I cant get it to do this. Any ideas would be well received, as I'm guessing theres probably a javascript version that does it quicker and easier.
<html>
<head>
<title>Untitled</title>
<style>
#pictureframe {
width:200px;
height:200px;
}
.wooden {
background-image:url(frame.png);
}
.plain {
background-image:url(clear.png);
}
.black {
background-image:url(black.png);
}
</style>
</head>
<body>
<div id="pictureframe">
</div>
<div style="height:20px;border:1px solid #617779;width:90px;text-align:center;background-color:white;" onclick = "pictureframe.style.className = 'wooden'">Make it wood</div>
<br>
<div style="height:20px;border:1px solid #617779;width:90px;text-align:center;background-color:white;" onclick = "pictureframe.style.className = 'clear'">Make it Frameless</div>
<br>
<div style="height:20px;border:1px solid #617779;width:90px;text-align:center;background-color:white;" onclick = "pictureframe.style.className = 'wooden'">Make it Black Bezel</div>
</body>
className is not part of the style object in the DOM element, but a direct property:
document.getElementById("pictureframe").className = 'wooden';
It's not
pictureframe.style.className = ...
but
pictureframe.className = ...
DEMO
Try this:
onclick ="pictureframe.className = 'wooden'"
If you want to use some other class for style, than you probably need to go with something like this:
function replaceClass(className) {
$('#pictureframe').removeClass('plain black wooden');
return $('#pictureframe').addClass(className);
}
This way you can keep class with styles http://jsfiddle.net/NjTea/5/
I have a a link that looks similar to this
Blog
As you can the link has an ID of 'blog' what I want to do is to create an div on the fly with the ID from the link that was clicked so if the 'blog' is clicked, then the markup would be
<div id="blog">
<!--some content here-->
</div>
Like wise if for instance the news link is clicked then I would like,
<div id="news">
<!--some content here-->
</div>
to be created in the markup if this possible? and how Im pretty new to jQuery.
Try this:
$("a").click(function(){
$("#wrapper").append("<div id=" + this.id + "></div>");
});
Not tested, should work ;)
where: #wrapper is parent element, work on all a as you see.
You will need to give the div a different ID. Perhaps you could give it a class instead:
$("#blog").click(function() {
$(this).after("<div class='blog'>...</div>");
return false;
});
That's just one of many ways to create a div. You probably also want to avoid duplicates however in which case, use something like this:
$("#blog").click(function() {
var content = $("#blog_content");
if (content.length == 0) {
content = $("<div></div>").attr("id", "blog_content");
$(this).after(content);
}
content.html("...");
return false;
});
As for how to handle multiple such links I would do something like this:
Blog
News
Weather
<div id="content"></div>
with:
$("a.content").click(function() {
$("#content").load('/content/' + this.id, function() {
$(this).fadeIn();
});
return false;
});
The point is this one event handler handles all the links. It's done cleanly with classes for the selector and IDs to identify them and it avoids too much DOOM manipulation. If you want each of these things in a separate <div> I would statically create each of them rather than creating them dynamically. Hide them if you don't need to see them.
Try This :
<a id="blog">Blog</a>
<a id="news">news</a>
<a id="test1">test1</a>
<a id="test2">test2</a>
$('a').click(function()
{
$('<div/>',{
id : this.id,
text : "you have clicked on : " + this.id
}).appendTo("#" + this.id);
});
First of all you should not make 2 elements with same ID. At your example a and div will both have id="blog". Not XHTML compliant, plus might mess up you JS code if u refernce them.
Here comes non-jquery solution (add this within script tags):
function addDiv (linkElement) {
var div = document.createElement('div');
div.id = linkElement.id;
div.innerHTML = '<!--some content here-->';
document.body.appendChild(div); // adds element to body
}
Then add to HTML element an "event handler":
Blog
This question describes how to create a div. However, you shouldn't have two elements with same IDs. Is there any reason why you can't give it an id like content_blog, or content_news?
Unfortunately if you click on a link the page you go to has no idea what the idea of the link you clicked was. The only information it knows is what's contained in the URL. A better way to do this would be to use the querystring:
Blog
Then using the jQuery querystring plugin you could create the div like:
$("wrapper").add("div").attr("id", $.query.get("id"));
You shouldn't have elements in your page with the same ID. Use a prefix if you like, or perhaps a class.
However, the answer is as follows. I am imagining that your clickable links are within a div with the ID "menu", and your on-the-fly divs are to be created within a div with the ID "content".
$('div#menu a').click(function(){
$('div#content').append('<div id="content_'+this.id+'"><!-- some content here --></div>');
});
Any problems, ask in the comments!
Also the following statement is available to create a div dynamically.
$("<div>Hello</div>").appendTo('.appendTo');
Working fiddle: https://jsfiddle.net/andreitodorut/xbym0bsu/
you can try this code
$('body').on('click', '#btn', function() {
$($('<div>').text('NewDive').appendTo("#old")).fadeOut(0).fadeIn(1000);
})
#old > div{
width: 100px;
background: gray;
color: white;
height: 20px;
font: 12px;
padding-left: 4px;
line-height: 20px;
margin: 3px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div>
<!-- Button trigger modal -->
<button type="button" id="btn">Create Div</button>
<div id="old">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>