How we apply condition on 'This' event in jquery? - javascript

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>

Related

Displaying text when link is clicked

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>

animate image with opicity in javascript doesnt work

This code is suppose to hide image and then show image in slow manner but it is directly show no image and full image
<script type="text/javascript">
var a=1.0;
function trans()
{
document.getElementById("img1").style.opacity=a;
if(a>0)
a=a-0.1;
else
a=1.0;
Window.setTimeout(trans(),1000);
}
</script>
<style>
</style>
</head>
<body onload="trans();">
<img id="img1" src="img/image1.jpg" width="225" height="225" />
</body>
</html>
Use window.setTimeout not Window ... notice the casing
Instead of invoking trans() in your setTimeout, you should pass only the function name trans.
window.setTimeout(trans,1000);
OR if you insist on invoking then wrap it with an anonymouns function.
window.setTimeout(function(){
trans();
}, 1000)
You can try this, "trans()" instead of trans(), the latter is a call.
<script type="text/javascript">
var a=1.0;
function trans()
{
document.getElementById("img1").style.opacity=a;
if(a>0)
a=a-0.1;
else
a=1.0;
window.setTimeout("trans()",1000);
}
</script>
<style>
</style>
</head>
<body onload="trans();">
<img id="img1" src="img/image1.jpg" width="225" height="225" />
</body>
</html>

Have to click twice on jQuery

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/

pass CSS .class as a parameter to javascript function

the goal here is onclick of 1.gif, everything with .panel1 class disappears(style.display.none), and everything with a .panel2 class becomes visable (style.display.inline)
I'm new at this..so I think its just a syntax issue with ' ' or maybe " "
<!DOCTYPE html>
<html>
<head>
<title>main</title>
<meta charset="utf-8">
<style type="text/css">
.panel1 {display:inline;}
.panel2 {display:none;}
</style>
<script type="text/javascript">
function panelTransition(panelOut,panelIn)
{
document.getElementByClass(panelIn).style.display="inline";
document.getElementByClass(panelOut).style.display="none";
}
</script>
</head>
<body>
<img class="panel1" src=1.gif onclick="panelTransition(panel1,panel2)" />
<img class="panel2" src=2.gif />
</body>
</html>
There is no getElementByClass. It's getElementsByClassName, and it returns an array of items, so you'll need to modify your code to loop through them.
function panelTransition(panelOut, panelIn) {
var inPanels = document.getElementsByClassName(panelIn);
for (var i = 0; i < inPanels.length; i++) {
inPanels[i].style.display = 'inline';
}
var outPanels = document.getElementsByClassName(panelOut);
for (var i = 0; i < outPanels.length; i++) {
outPanels[i].style.display = 'none';
}
}
If you were using a JavaScript library, like jQuery, this would be much easier to do. Also, as has been mentioned, you need quotes around your arguments to panelTransition.
<img class="panel1" src=1.gif onclick="panelTransition('panel1', 'panel2')" />
<img class="panel2" src=2.gif />
<img class="panel1" src=1.gif onclick="panelTransition('panel1','panel2')" />
I think you need quotes there
<html>
<head>
<title>main</title>
<meta charset="utf-8">
<style type="text/css">
.panel1 {display:inline;}
.panel2 {display:none;}
</style>
<script type="text/javascript">
function panelTransition(panelOut,panelIn)
{
// panelIn gets turned on
setDisplay(panelIn,"inline");
// panelOut gets turned off
setDisplay(panelOut,"none");
}
function setDisplay(className,displayState)
{
// retrieve a list of all the matching elements
var list = document.getElementsByClassName(className);
// step through the list
for(i=0; i<list.length; i++) {
// for each element, set the display property
list[i].style.display = displayState;
}
}
</script>
</head>
<body>
<img class="panel1" src="1.gif" onclick="panelTransition('panel1','panel2')" />
<img class="panel2" src="2.gif" onclick="panelTransition('panel2','panel1')" />
</body>
</html>
Or you can accomplish the same in jQuery
// fires when the page is up and running
$(document).ready(function(){
// find all the panel1 elements,
// attach an on click handler
$(".panel1").bind("click", function(){
// find all the panel1 elements
// set their css display property to inline
$(".panel1").css("display","inline");
// find all the panel2 elements
// set their css display property to none
$(".panel2").css("display","none");
});
$(".panel2").bind("click", function(){
$(".panel2").css("display","inline");
$(".panel1").css("display","none");
});
});
You can learn all about jQuery here : http://www.jquery.com/
You'll only be able to get your code to run once, as soon as you click a panel1 image all of the panel2 images will disappear, you won't be able to click them back on ever again.

How does jQuery's toggle function work, how to write it in javascript without jquery?

How would you write a toggle which toggles the display property of an element onmouseover/onmouseout from display:none to display:block;, or regardless, any css property which jquery's toggle can operate on- how exactly would you write a toggle function without jquery?
And why can't you take a javascript css property as a boolean in the following code?
<html>
<head>
<style type="text/css">
a {
display:none;
}
</style>
<script type="text/javascript">
function ab(a)
{
if(document.getElementById(a).style.display=='none')
{
document.getElementById(a).style.display="block";
}
else if(document.getElementById(a).style.display=="block")
{
document.getElementById(a).style.display="none";
}
}
</script>
</head>
<body>
<div class="fg">
<div style="width:100px;height:100px;border:2px solid blue;" onmouseover="ab('g');"
onmouseout="ab('g');">
<a id="g" href="http://www.dfadsafafa.com">lajflke</a></div></div>
</body>
</html>
The solution you mentioned seems fine, but can make it more concise.
function toggle(id){
var div1 = document.getElementById(id);
if (div1.style.display == 'none') {
div1.style.display = 'block'
} else {
div1.style.display = 'none'
}
}

Categories

Resources