The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page.
If above is true, then why i am facing issues to get the paragraph back?
$("button").click(function() {
if ($("#paragraph").css("display") == "none") {
$("#paragraph").css("display") = "block";
$("#paragraph").css("opacity") = 1;
} else {
$("#paragraph").fadeOut();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="paragraph">This is a paragraph</p>
<button>Click me</button>
The reason is your are using your css assignment syntax wrong. The console would have alerted you to this. Make your changes as follows.
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<body>
<p id="paragraph">This is a paragraph</p>
<button>Click me</button>
<script type="text/Javascript">
$("button").click(function(){
if ($("#paragraph").css("display") =="none"){
$("#paragraph").css("display", "block");
$("#paragraph").css("opacity", '1');
}
else{
$("#paragraph").fadeOut();
}
});
</script>
</body>
You can ignore how i included jquery. I only did that so to ensure its all runnable here.
Use the shortcut method show() instead of css() to make it simple
$("button").click(function() {
const $p = $("#paragraph");// cache element reference once for efficiency
if ($p.is(':hidden')) {
$p.show();
} else {
$p.fadeOut();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="paragraph">This is a paragraph</p>
<button>Click me</button>
Related
I have this code:
<script>
radius.style.setproperty('display');
</script>
<style>
.radius{
display: none;
}
</style>
<body>
<p id="radius"> Enter the radius</p>
</body>
What I intend to do here is that, by default, the paragraph has display=none. I want to display this paragraph through JS when some specific condition is met. But the problem is that using above code, I am not able to accomplish what I want. Please suggest what should have been done instead?
at the first you should get dom, after that change style attr. like this
for example:
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
</body>
</html>
Try
<html>
<body>
<p id="radius"> Enter the radius</p>
<script>
let radius = document.getElementById("radius");
if(condition == true){
radius.style.display = "block";
}else{
radius.style.display = "none";
}
</script>
</body>
</html>
You can set element style in javascript
element.style.cssPropertyInCamelCase = 'value'
Example
const element = document.getElementById('id')
element.style.display = 'none'
This question already has answers here:
addEventListener vs onclick
(21 answers)
Closed 4 years ago.
Both codes below do the same thing, first using Vanilla JS and second using JQuery. JQuery code do not have to insert anything inside html tags, while JS have to insert the caller "onclick="myFunction()"".
How could I modify the JS code so that I have no need to insert anything inside html tags, exactly like JQuery code does?
Vanilla JS Code:
<!DOCTYPE html>
<html>
<body>
<p onclick="myFunction()">Click on this paragraph</button>
<script>
function myFunction() {
alert("The paragraph was clicked.");
}
</script>
</body>
</html>
JQuery Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
alert("The paragraph was clicked.");
});
});
</script>
</head>
<body>
<p>Click on this paragraph.</p>
</body>
</html>
You can use addEventListener on your p tag.
getElementsByTagName('p')[0] will return array of p tags, in your case you need add listener to single paragraph (its index 0, thats why we have [0])
<!DOCTYPE html>
<html>
<body>
<p>Click on this paragraph</p>
<script>
document.getElementsByTagName("p")[0].addEventListener("click", function() {
alert('The paragraph was clicked.')
});
</script>
</body>
</html>
You just need to select the element and assign it to a variable. Then you can use an onclick function or addEventListener.
var pElem = document.querySelector('p');
pElem.onclick = function() {
alert("The paragraph was clicked.");
}
<p>Click on this paragraph</p>
Or if you want to apply it to all paragraph tags you can loop through the elements and assign a click function:
var pElems = document.querySelectorAll('p');
Array.prototype.forEach.call(pElems, function(el, i){
el.onclick = function() {
alert("The paragraph was clicked.");
}
});
<p>Click on this paragraph</p>
<p>Click on this paragraph</p>
<p>Click on this paragraph</p>
I think this might be what you are looking for?
document.getElementById("buttonID").onclick = function() {
alert('Button Clicked'); }
Basically this adds the onclick event to the button with buttonID id.
addEventListener will help you out:
var p = document.getElementsByTagName('p')[0];
p.addEventListener('click', function myFunction() {
alert("The paragraph was clicked.");
});
<p>Click on this paragraph</p>
The thing is that jQuery internally adds the event listener to the selector with the addEventListener. Thats basically what the onclick attribute does in HTML.
const run = () => console.log('Button 3 clicked');
// js
document.getElementById('b1').addEventListener('click', () => {
console.log('Button 1 clicked');
})
//jquery
$('#b2').on('click', () => {
console.log('Button 2 clicked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b1">Click 1</button>
<button id="b2">Click 2</button>
<button onclick="run()">Click 3</button>
First, target your specific HTML element with for instance document.querySelector(). So you can access one specific element by its class for example, just like jQuery does.
Second, add an event listener with .addEventListener() and specify it with the event click.
document.querySelector('.mybutton').addEventListener('click', function(){
alert('Ouch, that hurts!');
});
<button class="mybutton">Click me</button>
Hey I can hide my divs but my problem is if I reload my page I always see the hidden div for one second.
Do someone know how to fix that?
To tackle this kind of issue, you need to have the <div> with an attribute hidden or something in the inline. Then you need to hide it with JS and the remove the inline thing.
$(function () {
$(".hide").hide().removeClass("hide");
});
.hide {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hide">I am not shown</div>
Method 2: Using hidden attribute.
$(function () {
$(".hide").hide().removeAttr("hidden");
});
.hide {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div hidden>I am not shown</div>
Method 3: Using hidden attribute and .prop().
$(function () {
$(".hide").hide().prop("hidden", false);
});
.hide {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div hidden>I am not shown</div>
In the CSS that you apply to your div, add:
display:none;
So the div will be loaded but invisible. When you need to you it, you can do as you are doing now
Just add hidden attribute to your div and it should fix your problem then remove it by javascript when you want to show it
$(document).ready(function() {
$('#myDiv').hide();
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="myDiv"><p>hello</p></div>
</body>
Yes you can create the div by javascript.
var div = document.createElement("Div");
var text = document.createTextNode("this is my Div")
div.appendChild(text);
document.body.appendChild(div);
<body>
</body>
I'm trying to achieved something that when I click the paragraph my 1st function will run then click the paragraph again and the 2nd function will run, then click the paragraph again and the 3rd function will run and so on.. Not when I click the paragraph all of the functions will run, I have achieved only up to the 2nd function and now I'm stuck.
Here's the code..
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jQuery/1.12.2/jquery.min.js"></script>
<script>
$().ready(function(){
$("h1").hide();
$("h2").hide();
$("h3").hide();
function func1(){
$("h1").show();
}
function func2(){
$("h2").show();
}
function func3(){
$("h3").show();
}
function funcme(){
if($("p").click(func1)){
$("h1").show();
$(this).click(func2);
}
}
$(this).click(func3);
$("p").click(funcme);
});
</script>
</head>
<body>
<p>CLICK ME</p>
<h1>FUNC 1</h1>
<h2>FUNC 2</h1>
<h3>FUNC 3</h1>
</body>
</html>
This might be a more elegant solution?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$().ready(function(){
var counter = 0;
$('.section').hide();
$(".func-me").on('click', function (event){
$('.section').eq(counter).show();
counter++;
});
});
</script>
</head>
<body>
<button class="func-me">CLICK ME</button>
<p class="section">FUNC 1</p>
<p class="section">FUNC 2</p>
<p class="section">FUNC 3</p>
</body>
</html>
https://jsfiddle.net/vnavv1v7/
Have you try to create a flag? For example, your flag is set in zero. Then you make your first click, change your flag to 1. Then you make the second click, change your flag to 2... and so on...
I don't understand what you need to do in each click.. But I think something like this...
<script>
$(document).ready(function(){
$("h1").hide();
$("h2").hide();
$("h3").hide();
var flag = 0;
$("p").click(funcme(flag));
function funcme (flag){
if (flag == 0)
func1();
if (flag == 1)
func2();
if (flag == 2)
func3();
flag++;
}
function func1(){
$("h1").show();
}
function func2(){
$("h2").show();
}
function func3(){
$("h3").show();
}
}
</script>
I have a small hover script and it works like that:
When i hover on a link it is fade the relevant div.
Now, i tried to create a second link and configure it to display the second div and i have succeeded, but, when i hover them fast one-after-one it display BOTH faded Divs and stay stuck a while (with 2 divs display instead of 1) until the first div returns.
I want to display only one div at a time when i hover even if i hover fast between links.
Here is the code:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script>
<style>
#bank {display:none;}
</style>
<div>Show bank div and hide fancy div</div>
<div>Show back and hid fancy div</div><br>
<div id="bank">Bank Div</div>
<div id="fancy">Fancy Div</div>
<script type="text/javascript">
//<![CDATA[
$(window).load(function(){
$('#btn').hover(function(e){
$('#fancy').fadeOut('slow', function(){
$('#bank').fadeIn('slow');
});
});
$('#btn-bk').hover(function(e){
$('#bank').fadeOut('slow', function(){
$('#fancy').fadeIn('slow');
});
});
/]]>
</script>
See it in action: https://jsfiddle.net/rami7250/1jLtxdr7/
$('#btn').hover(function(e){
$('#fancy').stop(true, true).fadeOut('slow', function(){
//--------^ Add 'stop(true, true)'
$('#bank').fadeIn('slow');
});
});
$('#btn-bk').hover(function(e){
$('#bank').stop(true, true).fadeOut('slow', function(){
$('#fancy').fadeIn('slow');
});
});
By adding stop(true, true) you can start current animation immediately and your previous animations will be removed from queue. Read More
Example Fiddle
this prevent 2 div shown at the same time
$('#btn').hover(function(e){
$('#fancy').stop().hide();
$('#bank').fadeIn('slow');
});
$('#btn-bk').hover(function(e){
$('#bank').stop().hide();
$('#fancy').fadeIn('slow');
});
#bank {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Show bank div and hide fancy div</div>
<div>Show back and hid fancy div</div><br>
<div id="bank">Bank Div</div>
<div id="fancy">Fancy Div</div>
you can use a flag to return function if it's already running:
var flag;
$('#btn').hover(function(e){
if (flag)return;
flag = true;
$('#fancy').fadeOut('slow', function(){
$('#bank').fadeIn('slow');
flag = false;
});
});
$('#btn-bk').hover(function(e){
if (flag)return;
flag = true;
$('#bank').fadeOut('slow', function(){
$('#fancy').fadeIn('slow');
flag = false;
});
});
fiddle
This is because if you hover over an animation while another is in progress it doesn't stop the current animation. You can force this to happen by using the stop() function for each call.
$('#btn').hover(function(e){
$('#fancy').stop().fadeOut('slow', function(){
$('#bank').fadeIn('slow');
});
});
$('#btn-bk').hover(function(e){
$('#bank').stop().fadeOut('slow', function(){
$('#fancy').fadeIn('slow');
});
});
See my fiddle: https://jsfiddle.net/1jLtxdr7/2/
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script>
<style>
#bank {display:none;}
</style>
</head>
<body>
<div>Show bank div and hide fancy div</div>
<BR>
<BR>
<div>Show back and hid fancy div</div><br>
<div id="bank">Bank Div</div>
<div id="fancy">Fancy Div</div>
<script type="text/javascript">
$(window).load(function(){
$('#btn').hover(function(e){
$('#fancy').fadeOut(40, function(){
$('#bank').fadeIn('slow');
});
});
$('#btn-bk').hover(function(e){
$('#bank').fadeOut(40, function(){
$('#fancy').fadeIn('slow');
});
});
});
</script>
<body>
</html>
Try is one . you can give decimal numbers to fix speed of fadeIn function
Try This one
$('#btn').hover(
function(e){
$('#bank').show();
},
function(e){
$('#fancy, #bank').hide();
}
);
$('#btn-bk').hover(
function(e){
$('#fancy').show();
},
function(e){
$('#fancy, #bank').hide()
}
);
Try this:
$('.toggle_text').hover(function(e){
var text = $(this).attr("data-info");
var text_to_show = $("#"+text).html();
$('#show_div').fadeOut('slow', function(){
$('#show_div').html(text_to_show).fadeIn('slow');
});
});
#bank {display:none;}
.hide {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div>Show bank div and hide fancy div</div>
<div>Show back and hid fancy div</div><br>
<div id="show_bank" class="hide">Bank Div</div>
<div id="show_fancy" class="hide">Fancy Div</div>
<div id="show_div"></div>
Fiddle Link
Hope this helps.