I have a very dumb problem I am sure, but it's keeping me busy for too long know without being able to solve it.
I'm trying to make only one page with hidden divs that will appear on top of the main div when a button is clicked. I have no problem doing so. The problem appears when I try to implement a fade in and fade out effect at the same time on those two divs.
jquery:
$(document).ready(function() {
function goin() {
$("#container").fadeOut(1000, 0);
}
function goin1() {
$("#hidden").fadeIn(1500);
}
function goback() {
$("#hidden").fadeOut(1000, 0);
}
function goback1() {
$("#container").fadeIn(1000);
}
showNextQuote();
$("#playbtn").click(function(){
$.when(goin()).then(goin1());
});
$("#backbtn").click(function(){
$.when(goback()).then(goback1());
});
})();
html:
<div id="container">
<div id="particles-js">
</div>
<div class="mainhover">
<button id="playbtn"></button>
<footer id="footer">
<p>© 2016 whatapage.ch</p>
</footer>
</div>
</div>
<div id="hidden">
<p>Hello</p>
<button id="backbtn">press to fad in again</button>
</div>
the div #hidden just appears and disappears without the fade in fade out effect. Any clue on what is happening here?
Alright I got a working solution:
I placed #hidden in the #container div. All of a sudden everything worked out.
Related
I have one simple questions i want to keep longer to show but what i try not working. i making something wrong probably.
My part of html
<div id="preloader">
<div id="status">
<p class="center-text">
test <br>test <img src="images/myemail.gif">
<em>test</em>
</p>
</div>
</div>
Js my part
// JavaScript Document
(function ($) {
$(window).load(function() {
$("#status").fadeOut();
$("#preloader").delay(400).fadeOut("medium");
});
}(jQuery));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader">
<div id="status">
<p class="center-text">
test<br>test<img src="images/myemail.gif">
<em>test</em>
</p>
</div>
</div>
I want to keep more longer preloader and status after load. I was settimeout or add to hide and show ready functions but nothing change it
Thank you
You used fade out for div#status, the div#preloader still there but you didn't see any after div#status fade out.
I suggest you should
$(window).load(function() {
setTimeout(function() {
//$("#status").fadeOut();
$("#preloader").fadeOut("medium");
}, 400);
});
If you want the div#preloader to remain on screen for longer, then just remove the fade out of div#status:
$(window).load(function() {
$("#preloader").delay(400).fadeOut("medium");
});
I am not sure why but after looking at examples I thought were the same from previous questions I decided to post.. I have a button when clicked does the following things...
$('.fa-phone, .bg-darkPink').parent().on('click', function () {
$('#testimonials').fadeTo(0, 0);
$('.submenu-ctn').fadeTo(0, 0);
$("#colorscreen").remove();
$("body").append('<div id="colorscreen" class="animated"></div>');
$("#colorscreen").addClass("fadeInUpBigCS");
$(".musability-music-therapy-content-space").css({width: "720px",opacity:1}).load("contact-page.html #contact-form");
$(".submenu-ctn").load("contact-page.html .submenu-contact");
$.getScript("js/slider/slider-animations.js");
$(".submenu-ctn").load("contact-page.html .submenu-contact");
$('.nav-toggle').removeClass('active');
$(this).addClass('active');
$('#menu').multilevelpushmenu('collapse');
$('.submenu-ctn').fadeTo(3000, 1);
});
the problem is that this bit of the script is not getting executed.
$('#testimonials').fadeTo(0, 0);
where the css and html is as follows
<div id="testimonials">
<div class="box animated seven boxGreen testimonials1">
<p class="fg-white">"".<p class="text-small fg-white">- M
<span class="imagestars">
<img src="images/mthc/stars.png" alt="testimoinal rating 5 star">
</span>
</p>
</div>
<div class="box animated nine boxGreen testimonials2">
<p class="fg-white">" the long term"<p class="text-small fg-white">kool.
<span class="imagestars">
<img src="images/mthc/stars.png" alt="testimoinal rating 5 star">
</span>
</p>
</div>
</div>
#testimonials
{
display:block;
opacity:1;
z-index:1500;
}
Not really sure what's going on so investigating with debug but that isn't telling anything atm. works in all other browsers hmmmm ?
So basically I.E 10 doesn't like classes that have overflow:hidden within a div you are trying to fadeTo ... taking them out of the classes within the div sorted the problem out !
I'm looking to use jQuery to slide an element down, wait, then slide it back up.
When I use the following code, it slides down fine, but then when sliding back up it seems to slide up and down multiple times.
HTML:
<div id="area">
<div id="summary"><p>hello summary</p></div>
<div id="dropdown">
<div class="item"><p>hello item</p></div>
<div id="functions"><p>hello functions</p></div>
</div>
</div>
<p>TEST ADD</p>
jQuery:
$("document").ready( function () {
$("#test_add").bind("click", add_item_annimate)
})
function add_item_annimate() {
$("#dropdown").slideDown("fast").delay(1500).slideUp("fast");
}
Not really sure why this is happening.
That's probably because of animation queue, for clearing it you can use the stop method:
$("#dropdown").stop(true).slideDown("fast").delay(1500).slideUp("fast");
This code should do the trick!
$("document").ready( function () {
$("#test_add").click( function(){
$("#dropdown").slideUp("fast").delay(1500).slideDown("fast");
//SlideUp and slideDown can be switched.
});
});
Example:
http://jsfiddle.net/xcm8n1s3/
You didn't have anything preventing a user from clicking on "TEST ADD" multiple times before the animation completed.
if ($("#dropdown").is(':animated')) {
return false;
}
$("#dropdown").slideDown("fast").delay(1500).slideUp("fast");
Here is a jsfiddle of the working demo.
I have a page and I have little question mark images next to sections where if the question mark image is clicked, a div right below the section will appear sliding the rest of the page down. Essentially a slide down/slide up javascript function.
Ex:
Section Title (? IMG)
<div id="section">blah blah blah</div>
<br><br>
Section Title 2 (? IMG)
<div id="section2">Blah2 blah2 blah2</div>
In my example above, the content inside div section and div section2 is hidden at first, but when the ? IMG is clicked for that section, the content will reveal itself and the rest of the page will slide down at the same time to make room for the content inside the divs. And on reverse, if the question mark image is clicked while content is shown, it will slide up and hide itself and the page below will slide up as well filling the gap.
How would I write this? I need it expandable so I can add multiple div's which can be titled accordingly and expanded individually.
Thanks
With jQuery you can do this:
HTML:
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
Script:
$('#clickme').click(function() {
$('#book').slideDown('slow', function() {
// Animation complete.
});
});
Source: jQuery docs http://api.jquery.com/slideDown/
To include jQuery on a HTML page, you can use the following in the head:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
You could also download it yourself at place it on the server you want.
EDIT: Full answer with ready code then....
HTML:
<h1 id="id1" class="clickme">click1</h1>
<div id="section1">blah blah blah</div>
<br><br>
<h1 id="id2" class="clickme">click2</h1>
<div id="section2">Blah2 blah2 blah2</div>
SCRIPT
$('.clickme').click(function() {
$(this).next().slideToggle('slow', function() {
// Animation complete.
});
});
Try this for instance:-
<div class="wrapper">
<div class="btn">section Title (? IMG)</div>
<div class="section">blah blah blah</div>
</div>
<div class="wrapper">
<div class="btn">section Title (? IMG)</div>
<div class="section">Blah2 blah2 blah2</div>
</div>
<script>
$(function(){
$('.btn').click(function(e){
$(this).parent().toggleClass('slideOut');
});
});
</script>
.section{
display:none;
}
.slideOut .section{
display:block;
}
.btn
{
cursor:pointer;
}
Right,
I'm trying to use jQuery to show a paragraph when peoplel or hovering or clicking the image on top of the paragraph, Here is what I got so far:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"type="text/javascript"></script>
<script>
jQuery.noConflict;
jQuery(document).ready(function(){
//Hide the tooglebox when page load
jQuery(".toggle").hide();
//slide up and down when hover over img
jQuery("img").click(function(){
// slide toggle effect set to slow you can set it to fast too.
jQuery(this).next(".toggle").slideToggle("slow");
return true;
});
});
</script>
<p>Welcome!</p>
<h2>Choose your category</h2>
<div id="front-page">
<div id="front-page-row">
<div id="front-page-cell">
<p><img src="images/running.png" alt="Running" class="category"/></p>
<p class="toggle">List of events<br/>bldasfblda<br/>bdwfbwef</p>
</div>
<div id="front-page-cell">
<p><img src="images/mtb.png" alt="MountainBike" class="category"/></p>
<p class="toggle">List of events<br/>bldasfblda<br/>bdwfbwef</p>
</div>
<div id="front-page-cell">
<p><img src="images/music.png" alt="Music" class="category"/></p>
<p class="toggle">List of events<br/>bldasfblda<br/>bdwfbwef</p>
</div>
</div>
</div>
Nothing happens when I click the image
I would first hide the .toggle elements with CSS, so they're immediately made invisible. Secondly, I would avoid using #front-page-cell over and over as an ID, and instead convert it to a classname, and use it as a CSS selector.
<style>
.toggle { display: none }
</style>
<script>
jQuery.noConflict();
jQuery(function($){
$(".front-page-cell").on("click", "img.category", function(){
$(this).closest(".front-page-cell").find(".toggle").toggle("slow");
});
});
</script>
Demo: http://jsbin.com/evomay/edit#javascript,html
I think for your code part is suppose to be like below:
<script>
jQuery.noConflict;
jQuery(document).ready(function(){
//Hide the tooglebox when page load
jQuery(".toggle").hide();
//slide up and down when hover over img
jQuery("img").click(function(){
// slide toggle effect set to slow you can set it to fast too.
jQuery(this).parent().next(".toggle").slideToggle("slow");
return true;
});
});
</script>
Because next(selecetor) is looking for sibling. And .toggle is sibling of p that parent of img