Hi. I have the following code that can also be seen live here: http://designliving.tk/test.html When you click on "View 360" the <div> and Text changes as you can see.
When you click on "this is an image" it should reset it back to "View 360" which it does.
Now the only problem is that when you click on "this is an image" you have to click on "view 360" twice to get the DIV to change again.
It should change on the first click. I have tried rearranging my code with no success.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#toggleDiv').toggle(function() {
$('#imgThree').show();
$('#imgNorm').hide();
$(this).html('View Normal');
}, function() {
$('#imgThree').hide();
$('#imgNorm').show();
$(this).html('View 360');
});
$('#changeDiv').click(function() {
$('#imgThree').hide();
$('#imgNorm').show();
$('#toggleDiv').html('View 360');
});
});
</script>
<style type="text/css">
#imgThree {
display: none;
}
</style>
</head>
<body>
<div id="toggleDiv">View 360</div>
<br>
<br>
<div id="imgNorm">Normal Product Image Here</div>
<div id="imgThree">360 Spin Image Here</div>
<br>
<br>
<div id="changeDiv">
This is an image<br>
This is an image<br>
This is an image
</div>
</body>
</html>
Thank you all for helping.
$(document).ready(function(){
hide = function(){
$('#imgThree').hide();
$('#imgNorm').show();
$('#toggleDiv').html('View 360');
}
$('#toggleDiv').toggle(function() {
$('#imgThree').show();
$('#imgNorm').hide();
$(this).html('View Normal');
}, hide);
$('#changeDiv').click(function(){
if($('#imgThree:hidden').length > 0){
$('#toggleDiv').trigger('click');
}
});
});
http://jsfiddle.net/HV39C/
Related
This code use to display text and picture's in jquery language by slide and confirmation message. In this code I faced a problem that to hide the picture call by id by using fun that when we say ok then it hide the picture otherwise it did not hide the picture...
<!DOCTYPE html>
<html>
<head>
<title></title>
<!--we add jquery library file-->
<script src="test.js"></script>
<!--fun applied on text & images-->
<script>
//apply on text
$(document).ready(function() {
$('h1,h2').show('slow')
})
//apply on image that call by class
$(document).ready(function() {
$('.img').click(function()
{
alert("You did not hide this Picture!");
}
)
})
$(document).ready(function()
{
$('#img').click(function()
{
let shouldHide = confirm("Are You Sure To Hide This Picture?");
if (shouldHide)
{
$(this).hide('slow');
} else
{
return;
}
})
})
</script>
<!--apply to clean the screen-->
<style type="text/css">
h1,h2
{
display: none;
}
</style>
</head>
<body>
<!--display the image with class and id-->
<img src="images/1.jpg" width="400" height="500" id="img">
<img src="images/2.jpg" width="400" height="500" class="img">
<!--Display text by slide-->
<h1>How Are you?</h1>
<h2>I'm fine....</h2>
</body>
</html>
You can use the confirm method of JavaScript
$('#img').click(function () {
if(confirm("Are you sure?"))
{
$(this).hide('slow');
}
});
Also you can't use break when you're not in a loop.
Tell me if it worked for you!
You dont need to write two same functions make it as one.
//apply on text
$(document).ready(function() {
$('h1,h2').show('slow')
})
//apply on image that call by class
$(document).ready(function() {
$('.img').click(function()
{
alert("You did not hide this Picture!");
}
)
})
$(document).ready(function() {
$('#img').click(function () {
if(confirm("Are You Sure To Hide This Picture?"))
{
$(this).hide('slow');
}
})
})
confirm returns boolean value which you need to decide whether to hide or not and you cannot use break; inside the function, you should use return; instead.
<!DOCTYPE html>
<html>
<head>
<title></title>
<!--we add jquery library file-->
<script src="test.js"></script>
<!--fun applied on text & images-->
<script>
//apply on text
$(document).ready(function() {
$('h1,h2').show('slow')
})
//apply on image that call by class
$(document).ready(function() {
$('.img').click(function() {
alert("You did not hide this Picture!");
})
})
//apply on image that call by id
$(document).ready(function() {
$('#img').click(function() {
let shouldHide = confirm("Are You Sure To Hide This Picture?");
if (shouldHide) {
$(this).hide('slow');
} else {
return;
}
})
})
</script>
<!--apply to clean the screen-->
<style type="text/css">
h1,h2
{
display: none;
}
</style>
</head>
<body>
<!--display the image with class and id-->
<img src="images/1.jpg" width="400" height="500" id="img">
<img src="images/2.jpg" width="400" height="500" class="img">
<!--Display text by slide-->
<h1>How Are you?</h1>
<h2>I'm fine....</h2>
</body>
</html>
What I want to do is, when I click on button then one div should disappear and another should appear and if i click on the same button one more time, then first one should appear and second one should disappear. This would go until I click on the button.
What I tried:
JavaScript:
function change_image(){
var flag = true;
if(flag){
document.getElementById('speaker_main_div_with_rounded_image').style.display="none";
document.getElementById('speaker_main_div_with_square_image').style.display="block";
flag = false;
} else {
document.getElementById('speaker_main_div_with_rounded_image').style.display="block";
document.getElementById('speaker_main_div_with_square_image').style.display="none";
flag = true;
}
}
HTML:
<input type="button" value="Click Here to get another image" onClick="change_image(this)">
Any help would be grateful.
Thank You.
Your flag variable is local, and its value is always the same when function is called. Initialize it with:
var flag = document.getElementById('speaker_main_div_with_rounded_image').style.display !== 'none';
This is my solution using jQuery Library .
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#div1").toggle();
$("#div2").toggle();
});
});
</script>
<style>
.hide{
display:none;
}
</style>
</head>
<body>
<button type="button" id="btn1">Toggle</button>
<div id ="div1">
I am div 1
</div>
<div id ="div2" class="hide">
I am div 2
</div>
</body>
</html>
I have a div with id="mybutton" and a hidden div with id="mydiv" like in the code below :
<head>
<script>
$(document).ready(function(){
$("#mybutton").hover(function(){
$("#mydiv").fadeIn();
}, function(){
$("#mydiv").fadeOut();
});
});
</script>
</head>
<body>
<div id="mybutton">Show</div>
<div id="mydiv" style="display:none;">Hidden thing..</div>
</body>
I want "mydiv" to appear even if mouse is over "mydiv"(after hovering at mybutton).
Write CSS
#mydiv{
display:none;
/* visibility:hidden; */
}
#mybutton:hover + #mydiv,#mydiv:hover{
display:block;
/* visibility:visible; */
}
Demo
You can also use visibility:visible; and visibility:hidden; instead of display property
Give a common parent to them and connect the hover to it.
html:
<div id="parent">
<div id="mybutton">Show</div>
<div id="mydiv">Hidden thing..</div>
</div>
css:
#mydiv {
display: none;
}
Jq:
$(document).ready(function(){
$("#parent").hover(function(){
$("#mydiv").fadeIn();
}, function(){
$("#mydiv").fadeOut();
});
});
JSfiddle: http://jsfiddle.net/f2W9b/
$(document).ready(function(){
$("#mybutton").hover(function(){
$("#mydiv").fadeIn();
}, function(){
$("#mydiv").fadeOut();
});
});
Wrap it inside div:
<div id="container">
<div id="mybutton">Show</div>
<div id="mydiv">Hidden thing..</div>
</div>
And listen for mouseenter event on the container div.
Wrap your button in a container, like so:
<span id="hoverarea">
<div id="mybutton">Show</div>
<div id="mydiv" style="display: none;">Hidden thing..</div>
</span>
<script>
$(document).ready(function(){
$("#hoverarea").hover(function(){
$("#mydiv").fadeIn();
}, function(){
$("#mydiv").fadeOut();
});
});
</script>
http://jsfiddle.net/n4B5b/1/
In the fadeout() portion of your function, can you check if the mouse is currently hovering over the #mydiv div? If so (such as adding a class on hover to the #mydiv), check it and don't fadeout.
<head>
<script>
$(document).ready(function(){
$("#mybutton").hover(function(){
$("#mydiv").fadeIn();
}, function(){
if (!$("#mydiv").hasClass('hovering') {
$("#mydiv").fadeOut();
}
});
$("#mydiv").hover(function(){
$("#mydiv").addClass('hovering');
}, function (){
$("#mydiv").removeClass('hovering');
});
});
</script>
</head>
<body>
<div id="mybutton">Show</div>
<div id="mydiv" style="display:none;">Hidden thing..</div>
</body>
This is inside my CSS:
div.hide {
display:none;
}
div.show {
color: #66CCFF;
}
This is in my HTML:
16:10
<script language="JavaScript">
function showText(show,hide)
{
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
</script>
<a name="16:10" onclick="showText('text1')" href="javascript:void(0);"></a>
<div id="text1" class="hide">This is your monitors aspect ratio.</div>
I'm trying to make the first link display the "This is your monitors aspect ratio." text lower on the page.
Any help is much appreciated.
Pure CSS Answer
Ok, if you just want to append text after you have moved to a position in a page using an anchor tag, you could do it with nothing but CSS similar to the following:
a:target:after{
content: " Test";
background-color: #ccffcc;
}
What this does is appends the text "Test" after the active anchor and colors. Here is an example page with implementation:
<!DOCTYPE html>
<html>
<head>
<title>Link Printer 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
a:target:after{
content: " Test";
background-color: #ccffcc;
}
.bigSection{
height: 200px;
}
</style>
</head>
<body>
<div class="bigSection">
<div><a name="first">First</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
<div class="bigSection">
<div><a name="second">Second</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
<div class="bigSection">
<div><a name="third">Third</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
</body>
</html>
Answer using JavaScript
You need to bind an eventListener and prevent it from moving to the next page. Here is a way to do it with JavaScript or CSS. The JavaScript way will actually set the text to whatever you want. The CSS way will hide actually hide the element.
<!DOCTYPE html>
<html>
<head>
<title>Link Printer</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
.hide{
display: none;
}
</style>
<script>
function jsShowText(event) {
var divToManip = document.getElementById("text");
if (divToManip.innerHTML === "") {
divToManip.innerHTML = "Hello";
}
else {
divToManip.innerHTML = "";
}
event.preventDefault();
}
function cssShowText(event) {
var divToManip = document.getElementById("text");
if (divToManip.className === "") {
divToManip.className = "hide";
}
else {
divToManip.className = "";
}
event.preventDefault();
}
function setListeners() {
document.getElementById("jsPrinter").addEventListener("click", jsShowText, false);
document.getElementById("cssPrinter").addEventListener("click", cssShowText, false);
}
window.onload = setListeners;
</script>
</head>
<body>
<div><a id="jsPrinter" href="" onclick="showText();">Click With JavaScript</a></div>
<div><a id="cssPrinter" href="" onclick="showText();">Click With CSS</a></div>
<div id="text">I'm text</div>
</body>
</html>
"showText" must receive an id parameter to be used with the call to "document.getElementById"
Try this, just 1 link that will display the text below after click:
<a name="16:10" onclick="showText('text1')" href="javascript:void(0);">16:10</a>
<script language="JavaScript">
function showText(id)
{
document.getElementById(id).style.display = "block";
}
</script>
<div id="text1" style="display:none;">This is your monitors aspect ratio.</div>
I'm just using style display to hide/show the element. Hope it helps.
just change your css like this:
div.show {
display:block;
color: #66CCFF;
}
Here I am going to provide an example with something that I was working, thank you Alberto Montellano for the example, that gave me an idea, however what was required at the end was something a little different, with the option not to show the data and display it only when I click and make it disappear when click again. In this example I am going to give you two options; you can have a button or a link to trigger the JS function to display and hide the body text, you can choose if you want the button or link that is way I put a comment (optional), both behave as the same, it is up to you which one you want to use.
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<!-- text before the button or link -->
<p>Click the "PIN" button (or link) to display PIN options:</p>
<!-- The Pin button (optional) -->
<button type="button" onclick="myFunction()">PIN button:</button>
<!-- The Pin link (optional) -->
</br></br></br>
<a onclick="myFunction()" href="javascript:void(0);">PIN link:</a>
<!--Data will display or hide (toggle)-->
<div id="myDIV"style="display:none;">
These are the steps to get your PIN number: Bla bla bla.
</div>
<p><b>Note:</b> The text display when you click the button or link will take space, if you click again will be toggle.</p>
<!-- JS -->
<script>
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</body>
</html>
How do I make HTML button disappear on click, then reappear after 2 seconds? I found some ways of doing this but I need it to work with the code I already have. How can I accomplish this?
<script language="JavaScript">
function enableTorch(milliSeconds) {
ipwajax('enabletorch');
window.setTimeout("ipwajax('disabletorch');",milliSeconds);
}
</script>
<input type="button" style="font: bold 20px Arial" onclick="enableTorch(1500);" value="LED ON">
<!--
$("p").hide()
Demonstrates the jQuery hide() method, hiding all <p> elements.
-->
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("button").hide();
$("button").show(2000);/*2 sec time*/
});
});
</script>
</head>
<body>
<button>Click me</button>
</body>
</html>
this one will hide the button and reshow in 2 sec
$(document).ready(function(){
$("button").click(function(){
$(this).hide().show(2000);
});
});
Check this
function enableTorch(milliSeconds) {
ipwajax('enabletorch');
document.getElementById('torch').style.display="none";
setTimeout(function(){ipwajax('disabletorch');document.getElementById('torch').style.display='inline'}, milliSeconds);
}
<input type="button" id = "torch" style="font: bold 20px Arial" onclick="enableTorch(1500);" value="LED ON">
Here you go http://jsfiddle.net/4eCrQ/
$('.first').on('click', function() {
$('.second').hide();
setTimeout(function() {
$('.second').show();
}, 2000);
});