Fade in jquery div show - javascript

I am trying to get the below script to fade in and fade out with a delay in between. It shows the div correctly and fades out as it should, but it doesn't fade in?
<?php
if(isset($_GET['updated'])) { ?>
<div id='updated'><p>The product was successfully added to your Shopping Cart</p></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$('#updated').fadeIn(800).delay(3000).fadeOut(800)
</script>
<?php } ?>
Many thanks!

$('#updated').hide().fadeIn(800).delay(3000).fadeOut(800);
You could also set it in the css:
#updated{
display: none;
}
The problem is - it's already visible (by default).

its because its already showing
<div id='updated' style="display:none">
fixes it

You have to hide div before fadeIn(), you can use hide() method to hide the div.
<?php
if(isset($_GET['updated'])) { ?>
<div id='updated'><p>The product was successfully added to your Shopping Cart</p></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$('#updated').hide().fadeIn(800).delay(3000).fadeOut(800)
</script>
<?php } ?>

Related

button by default hide then show

it is showing the checkboxes, but by default i want it to hide but after click show
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#ElectronicsChk").toggle(1000);
$("#SoftwareChk").toggle(1000);
$("#Dontknow").toggle(1000);
$("p").toggle(1000);
});
});
</script>
<style>
div.electro{
background-color: red;
}
</style>
</head>
<body>
<button id="btn1">Electronics</button>
<button id="btn2">Homeapplainces</button>
<button id="btn3">Downloadable</button>
<div class="electro">
<input type="checkbox" id="ElectronicsChk">
<p>Hardware Problems</p></input>
<input type="checkbox" id="SoftwareChk">
<p>Software Problems</p></input>
<input type="checkbox" id="Dontknow">
<p>I dont Know</p></input>
</div>
</body>
</html>
plz help i am a newbie so plz do explain after submitting your code,... Sorry and i'll be very thankfull for the help... waiting for an early response thank you...
To hide the checkboxes and p initially, you can simply use CSS:
div.electro > * {
display:none;
}
That said, it seems you could simplify your code by hiding and showing the div container instead of each individual child element:
CSS:
div.electro {
display:none;
}
JavaScript:
$(document).ready(function(){
$("#btn1").click(function(){
$(".electro").toggle(1000);
});
});
This is much better because it follows the DRY principle and is more flexible, for example if you adding some new elements to the container like some helper text, you don't need to update the JavaScript logic.

Hide button and show hidden p-tag on button click

I want a button with two functions when clicked; the button should vanish and a hidden p-tag (display: none;) should reveal itself.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button.call-us").click(function(){
$(this).hide();
$("p.phonenumber").show();
});
});
</script>
</head>
<body>
<p class="phonenumber" style="display: none;">0271 12222</p><button class="call-us">Call us</button>
</body>
</html>
The code above works flawlessly with w3schools testing tool.
But when I try to do it live at my website, nothing happends.
My .js-file (button-phone.js) contains the following:
(function($)
{
$("button.call-us").click(function(){
$(this).hide();
$("p.phonenumber").show();
});
});
(jQuery);
It's included in the code, far down, just before the body tag closes
<script type='text/javascript' src='http://example.com/wp-content/plugins/button/js/button-phone.js?ver=1.0.4'></script>
I have imported the jQuery library in my head-tag
<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
HTML
<div class="wpb_wrapper">
<p class="phonenumber">555 000 000</p>
<p><button class="call-us">Call us</button></p>
</div>
CSS
.phonenumber {
display: none;
}
The p-tag is hidden, but nothing happends when I click the button.
Any suggestions?
Still a typo question... You have an extra closure, remove it and it will work:
Working example
(function($) {
$("button.call-us").click(function() {
$(this).hide();
$("p.phonenumber").show();
});
})(jQuery);
.phonenumber {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wpb_wrapper">
<p class="phonenumber">555 000 000</p>
<p>
<button class="call-us">Call us</button>
</p>
</div>
Try editing your button-phone.js to the below -
(function($)
{
$("button.call-us").click(function(){
$(this).hide();
$("p.phonenumber").show();
});
})(jQuery);
Change your jQuery to this and it will work
(function($){
$(".call-us").click(function(){
$(this).hide();
$(".phonenumber").show();
});
});
})(jQuery);
Working Fiddle
Suggestion, Try to bind jQuery with unique ids or class, don't use common class which you may use on other part of website
HTML
<div class="wpb_wrapper">
<p class="phonenumber" id="PhoneNo">555 000 000</p>
<p><button class="call-us" id="Call">Call us</button></p>
</div>
And jQuery
(function($){
$("#Call").click(function(){
$(this).hide();
$("#PhoneNo").show();
});
});
})(jQuery);
And CSS
#PhoneNo {
display: none;
}
Working Fiddle

Dynamically changing <DIV> using jquery fails

I have created two simple pages as a test.
The first, PIG_TEST.htm, outputs a simple page containing 3 <DIV> sections; Header, Menu and Main.
The Menu section contains a link which, when selected should load the second page, PIG_TEST_1-php, into the <DIV> with the id of 'mainx', on the main page via a jquery click function.
However, when selected it just replaces the original page.
Seems like it is not finding or seeing the "mainx" div.
<!DOCTYPE html>
<html lang='en'><head>
</head>
<body style='background-color:#eeeecc'>
<div style='background-color:#6495ed; height: 110px;'>
<div class='col-md-12 text-center'>Header TEST PAGE
</div>
</div>
<div style='background-color:#ffaaaa; height: 150px;'>
<div class='col-md-12 text-center'>Menu TEST PAGE
<ul>
<li><a href='PIG_TEST_1.php' id='but1'>Item 1</a></li>
</ul>
</div>
</div>
<div id='mainx' style='background-color:#cccccc; height: 300px;'>
Main TEST PAGE
</div>
<script type='text/javascript' charset='utf-8'>
(document).ready(function(){
$('#but1').click(function(e){
e.preventDefault();
$('#mainx').load(this.href);
});
});
</script>
<script src='js/jquery-1.8.0.min.js'></script>
</body></html>
The PIG_TEST_1.php is:
<?php
echo "<body>";
echo " THIS IS A DUMMY PAGE <br></p>";
echo "</body>";
?>
I've tried putting the call to "jquery-1.8.0.min.js" just after the <body> but it stll fails.
Sorry, I'm new to jquery, any help would be appreciated.
You should move the jquery <script> tag outside of the other one (you have it nested), and you also need a $ symbol before (document).ready:
<script src='js/jquery-1.8.0.min.js'></script>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('#but1').click(function(e){
e.preventDefault();
$('#mainx').load(this.href);
});
});
</script>
There are lot of problems with your code!
<script> cannot be contained inside another <script> tag.
Load jQuery before calling the function.
Add $ before (document).
So your code should be:
<script src='js/jquery-1.8.0.min.js'></script>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('#but1').click(function(e){
e.preventDefault();
$('#mainx').load(this.href);
});
});
</script>

automatically load as fadein popup

I would like the popup to automatically set on and not have to click to make the event. Can you help?
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#open').click(function(){
// enter code here
$('.popup-overlay').fadeIn('slow');
$('.popup-overlay').height($(window).height());
return false;
});
$('#close').click(function(){
$('#popup').fadeOut('slow');
$('.popup-overlay').fadeOut('slow');
return false;
});
});
</script>
</head>
<body>
<div id="content">
<div id="column-right">click aqui</div>
</div>
<div id="popup" style="display: none;">
<div class="content-popup">
<div class="close"><img src="images/close.png"/></div>
<div> enter code here
<h2>Contenido POPUP</h2>
</div>
</div>
Means whenever the page is loaded the pop up automatically opens without any client side event.
Just take the code out of the click() event:
And remove the div with .popup-overlay class. It's useless
$(document).ready(function(){
$('#popup').fadeIn('slow');
$('#popup').height($(window).height());
});
You may need to fade the #popup also.
$(document).ready(function(){
$('#popup').fadeIn('slow');
$('.popup-overlay').fadeIn('slow');
$('.popup-overlay').height($(window).height());
});

loading div before finishing all result data

I'm going sending data the Info page with ..$_get.. but I want when click ..a href=new.php?data=1.. to activate loading and Not all received data loading be enabled and after the completion information inside page new.php , loading deletion and .div id=result. is displayed or show information
new.php
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(){
$('#result').hide();
$('#main').html('<strong>loading...!</strong>;');
success:function(){
$('#main').html('');
$('#result').show();
}
});
});
</script>
<body>
<div id="main"></div>
test
<div id="result">
<?php
if(isset($_GET['data'])){
echo $_GET['data'];
}
?>
</div>
when click a href= Enable loading then when Information was received, remove loading and put the information in div result displayed
You made a mistake, click() isn't an ajax call so I don't understand why you put a success callback, try to remove it because it made a syntax JS error for sure.
There is the solution :
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(event){
$('#result').hide();
$('#main').html('<strong>loading...!</strong>;');
});
});
</script>
<body>
<div id="main"></div>
<div id="result">
<?php
if(isset($_GET['data'])){
echo $_GET['data'];
}
?>
</div>
</body>

Categories