Jquery - Windows Load how to keep longer - javascript

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");
});

Related

simple fade in fade out misfunction

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.

Running javascript on every element with css class not working

I am trying to run a javascript on every element on an asp.net page that has a certain CSS Class. I am not very proficient with javascript, so I don't know why it isn't working. I am dynamically creating controls and adding the CSS class to them, as well as the class is attached to a static control on the page.
I just want the controls to fade in after the page loads.
Here is my script:
<script type="text/javascript">
$(document).ready(function () {
$('.fadeInLoad').each(function (i, obj) {
$(this).fadeIn();
});
});
</script>
Here is my CSS:
.fadeInLoad
{
color:#0d0d0d;
}
Thank you for any help you can offer.
You have to set display to none on the class rule. Otherwise it is trying to fade in an element that is already visible.
Also, as #Blazemonger has pointed out, just call .fadeIn() directly on the jQuery selector call.
Here is an example
$(document).ready(function() {
$('.fadeInLoad').fadeIn(2000);
});
.fadeInLoad {
color: #0d0d0d;
display: none; /* This display needs to be here */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Does not fade in</div>
<div class="fadeInLoad">Fades In</div>
<div class="fadeInLoad">Fades In</div>
<div class="fadeInLoad">Fades In</div>
<div class="fadeInLoad">Fades In</div>
<div class="fadeInLoad">Fades In</div>
<div class="fadeInLoad">Fades In</div>
<div class="fadeInLoad">Fades In</div>
For me it's working. This nodes with that class dadeInLoad are in source of page or are loading with some Ajax?
There is working demo:
Demo
$(document).ready(function () {
$('.fadeInLoad').each(function (i, obj) {
$(this).fadeIn(3000);
});
});

.SlideDown not working on appended Html

I can't seem to get the slideDown effect to work when appending a div. The HTML and jQuery is below.
Any suggestions would be a great help. Thanks!
HTML
<div class="pin">
<div class="top-pin">
<img class="icon-pic" src="img/nautica.gif" />
<p class= "pin-title">Nautica</p>
</div>
<img class="pin-pic" src="img/shoes.jpg" />
<div class="pin-comment">
<img class="small-icon-pic" src="img/Calvin_pic.png" />
<p class="pin-comment-text">Can't go wrong with classic sperrys. #topsiders</p>
</div>
</div>
JS
var hiddenComments = "<div class='hidden-comment'><img class='small-icon-pic' src='img/Calvin_pic.png' /><p class='pin-comment-text'>Can't go wrong with classic sperrys. #topsiders</p></div>";
$(".comment-icon").click(function (event) {
$('.pin-comment:last').append(hiddenComments);
$('.pin-comment').find('.new-comment:last').slideDown('slow');
$(this).parent().find(".comment-hidden").slideDown();
$(this).parent().find(".comment-count").hide();
});
Maybe you need to include the animation as callback of the others, cause as I remember an animation will stop the others
Try this
$(".comment-icon").click(function (event) {
$('.pin-comment:last').append(hiddenComments);
$('.pin-comment').find('.new-comment:last').slideDown('slow', function(){
$(this).parent().find(".comment-hidden").slideDown( function(){
$(this).parent().find(".comment-count").hide();
);
);
});
maybe you need to rearrange the jquery this selectors

Javascript Loop for show/hide DIVs

I have 6 DIVs that show and hide, triggered by an onClick event. Currently if you click the 6 different pictures that trigger these divs, they all show up on top of eachother.
I would like only one DIV to show up at a time. So when you click a different image, it hides the currently displayed div and shows the new one.
I am guessing I need to loop through these somehow, can anyone point me in the right direction? My code:
<script type="text/javascript">
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function () {
$(".slidingDiv").slideToggle();
});
$(".slidingDiv2").hide();
$(".show_hide2").show();
$('.show_hide2').click(function () {
$(".slidingDiv2").slideToggle();
});
$(".slidingDiv3").hide();
$(".show_hide3").show();
$('.show_hide3').click(function () {
$(".slidingDiv3").slideToggle();
});
$(".slidingDiv4").hide();
$(".show_hide4").show();
$('.show_hide4').click(function () {
$(".slidingDiv4").slideToggle();
});
$(".slidingDiv5").hide();
$(".show_hide5").show();
$('.show_hide5').click(function () {
$(".slidingDiv5").slideToggle();
});
$(".slidingDiv6").hide();
$(".show_hide6").show();
$('.show_hide6').click(function () {
$(".slidingDiv6").slideToggle();
});
});
</script>
Not completely sure if this is what you're going for, but something like this might work:
HTML:
<img class="div1" src=...>
<img class="div2" src=...>
<img class="div3" src=...>
<!-- more images can go here -->
<div class="div1">text1</div>
<div class="div2">text2</div>
<div class="div3">text3</div>
<!-- more divs to display go here -->
JQuery:
$("img").click(function () {
$("div").slideUp(190); // hide divs previously shown
var divSelect = $(this).attr('class'); // get class of div to show
$("div."+divSelect).delay(200).slideDown(); // show div after other slides up
});
WORKING EXAMPLE
I am still working on simplifying it, but it works. You will have to repeat it to every div, giving different selector names. When I figure a loop out, I will let you know.
Good luck!
<!--HTML starts-->
<div class="med-wrap-video">
<div> <p class="body-text"> <iframe width="100%" height="100%" src="https://www.youtube.com/embed/6z9KMHt-Ta4" frameborder="1" allowfullscreen> </iframe>
<br>
Read More</p>
<br>
<span class="selector1">
<p class="body-text">
Title: <br>
Composer: <br>
Year: <br>
</p>
</span>
</div>
</div>
<!--JS begins-->
$(document).ready(function(){
$(".selector1").hide();
$(".a selector").click(function(event){
event.preventDefault(); //prevents page to reload
$(".selector1").slideToggle(600);
$(this).toggleClass(".selector1");
});

Different style of opening popup window

I display a popup window in a simple format. I want to apply different format of opening popup a window. How can I apply format or style so that it looks very good when pop window opens? The following is my source code:
<div onMouseOver="show('healing')" onMouseOut="hide('healing')">
<div id="healing" class="bgdiv" >
<div id ="title" class="Title" >Healing</div>
<img class="img" src="images/healing.bmp">
<div class="description" >Welcome Sir.</div>
</div>
</div>
javascript code
<script language="JavaScript">
function show(id)
{
document.getElementById(id).style.visibility = "visible";
}
</script>
You should take a look at JQuery (http://jquery.com/). JQuery is a Javascript framework and you can use effects for displaying elements like fade, slide, show/hide.
All you have to do is change your code a little bit (Jquery solution):
<div id="showhealing">
<div id="healing" class="bgdiv">
<div id ="title" class="Title" >Healing</div>
<img class="img" src="images/healing.bmp">
<div class="description" > Welcome Sir.</div>
</div>
</div>
<script>
$('#showhealing').hover(
function() { $('#healing').show(500) }, function() { $('#healing').hide(500) }
);
</script>
When you use JQuery UI, too (it's a extension for JQuery) you have much more effects. (Take a look here: http://jqueryui.com/demos/effect/).
To use the Effects of JQuery UI you need to update your script like this:
<script>
$('#showhealing').hover(
function() { $('#healing').show("explode", {}, 500); }, function() { $('#healing').hide("explode", {}, 500) }
);;
</script>

Categories

Resources