I tried doing several tests. Here's the problem: The former div faded out easily, but the latter div supposed to be fading in without the need of a click. What happened to the latter one is that it blinked.
I want the "preloader" to play for 5s, then crossfade to the "isthis" div.
$(function(e) {
$('#preloader').fadeOut('1000', function() {
$('#preloader').replace('#isthis').fadeIn('2000');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader">
<section>
<div class="rainbow">
<div class="bow"></div>
<div class="bow"></div>
<div class="bow"></div>
<div class="bow"></div>
<div class="bow"></div>
<div class="bow"></div>
<div class="bow"></div>
<div class="bow"></div>
</div>
</section>
</div>
<div id="isthis">
Here's the other div.
</div>
Here's my JSFiddle, just in case.
Is this what you looking for.?
.replace will not get you what you want it will not replace the whole content it will only replace the first occurrence even if you use .replaceWith() it will not help.
It's better to go with .remove() and then fadeIn the other content.
I have also given style="display:none;" to #isthis for initial hide.
$(function(e) {
$('#preloader').fadeOut('1000', function() {
$(this).remove();
$('#isthis').fadeIn('2000');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader">
<section>
<div class="rainbow">
<div class="bow">Test</div>
<div class="bow">Test</div>
<div class="bow">Test</div>
<div class="bow">Test</div>
<div class="bow">Test</div>
<div class="bow">Test</div>
<div class="bow">Test</div>
<div class="bow">Test</div>
</div>
</section>
</div>
<div id="isthis" style="display:none;">
Here's the other div.
</div>
Related
I have my html like this:
<div id="d1" class="parent">
<div class="hello"></div>
<div class="hello"></div>
</div>
<div id="d2" class="parent">
<div class="ciao"></div>
<div class="hello"></div>
</div>
<div id="d3" class="parent">
<div class="hello"></div>
<div class="hello"></div>
</div>
<div id="d4" class="parent">
<div class="hello"></div>
<div class="ciao"></div>
</div>
And I need to select all the divs that have "hello" class, starting from the one included in d2.
if I use this code, ti doesn't hop the next div to find the other "hello"
$('#2 .hello').nextAll().doSomething();
how do i solve this? thanks!
With my limited knowledge of jQuery:
$('#d2').find('.hello').parent().nextAll().addBack().children('.hello').html('changed')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="d1" class="parent">
<div class="hello">1</div>
<div class="hello">2</div>
</div>
<div id="d2" class="parent">
<div class="ciao">3</div>
<div class="hello">4</div>
</div>
<div id="d3" class="parent">
<div class="hello">5</div>
<div class="hello">6</div>
</div>
<div id="d4" class="parent">
<div class="hello">7</div>
<div class="ciao">8</div>
</div>
Jquery Traversing Api Documentation
I think this link may be useful.
I do not know the answer you are looking for but i might be of help.
Regards.
I Hope this helps you out.
I'm trying to hide the outer div when a nested div is empty (including white-space node). I've found a solution that works if there is NO whitespace:
Hide parent DIV if <li> is Empty
I need it to work when there IS white space present, ie:
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 1</div>
<div class="content">
<div class="product"> </div>
</div>
</div>
</div>
Example fiddle
Working fiddle
You could use the both :empty and :contain() selector :
$("div.product:contains(' '), div.product:empty").closest('div.wrapper').hide();
Hope this helps.
$("div.product:contains(' '), div.product:empty").closest('div.wrapper').hide()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 1</div>
<div class="content">
<div class="product"> </div>
</div>
</div>
</div>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Visible if working 2</div>
<div class="content">
<div class="product">text</div>
</div>
</div>
</div>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 3</div>
<div class="content">
<div class="product"></div>
</div>
</div>
</div>
You can iterate over each div.product and trim the text to remove whitespace. If there's anything left, show it, otherwise, hide its wrapper.
$("div.product").each(function() {
if ($(this).text().trim() == '') {
$(this).closest('div.wrapper').hide()
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 1</div>
<div class="content">
<div class="product"></div>
</div>
</div>
</div>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Visible if working 2</div>
<div class="content">
<div class="product">text</div>
</div>
</div>
</div>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 3</div>
<div class="content">
<div class="product"></div>
</div>
</div>
</div>
//Try this using Jquery
<script>
//A perfect reference in Jquery...
var element=$('#target_child');
if($(element).html()==''){
$(element).parent().hide()
}else{
//do some work
}
</script>
In a web page, I have a grid of divs. In each div are 3 divs, the 2nd is hidden, I want it so that when the user hovers over the 3rd div, the 1st div becomes hidden and the 2nd is displayed.
I'm using jquery.
<div class="container">
<div class="hello">hello</div>
<div class="who">sailor
</div>
<div onmouseover="whoOn();" onmouseout="whoOff();" class="hover">hover me</div>
</div>
<div class="container">
<div class="hello">hello</div>
<div class="who">dolly
</div>
<div onmouseover="whoOn();" onmouseout="whoOff();" class="hover">hover me</div>
</div>
<div class="container">
<div class="hello">hello</div>
<div class="who">kitty
</div>
<div onmouseover="whoOn();" onmouseout="whoOff();" class="hover">hover me</div>
</div>
Here's a Codepen
Your whoOn and whoOff methods can be combined like this:
<div class="container">
<div class="hello">hello</div>
<div class="who">sailor
</div>
<div onmouseover="whoBoth(this);" onmouseout="whoBoth(this);" class="hover">hover me</div>
</div>
Javascript:
function whoBoth(target) {
$(target).siblings(".hello, .who").toggle();
}
Hi Apparently my toggle function does not work. I need to Hide a div "photography" when clicking the word "photography" that is located in another div. Please see my code below
HTML:
<div class="bar">
<div="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
Photography
Graphics
</div>
</div>
</div>
</div>
<section id="photograhpy" class="photograhpy">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<hr class="small">
<div class="row">
<div class="col-md-6">
<div class="photograhpy-item">
<a href="#">
<img class="img-photograhpy img-responsive" src="imgs/pics/car1.jpg">
</a>
</div>
</div>
JS:
$(document).ready(function(){
$("#hideshow").click(function(){
$("#photography").toggle(1000);
});
});
Looks like a spelling error:
<section id="photograhpy" class="photograhpy">
Should be:
<section id="photography" class="photography">
There is nothing else outstandingly wrong with your code.
Also, you may not reference elements with the same id exclusively via JavaScript. It is poor practice to give multiple elements the same id.
I have this html:
<div id="wrapper">
<div class="inner">Inner</div>
<div class="inner">Inner</div>
<div class="inner">Inner</div>
</div>
I want to append this line
<div id="first">first</div>
between the div#wrapper and the first div.inner - so it will always be the first element even if there are no elements.
so it will look like this:
<div id="wrapper">
<div id="first">first</div>
<div class="inner">Inner</div>
<div class="inner">Inner</div>
<div class="inner">Inner</div>
</div>
or in case I have no .inner div's it will look like this:
<div id="wrapper">
<div id="first">first</div>
</div>
How do I do that?
thanks,
Alon
Use prepend() (docs)
$('#wrapper').prepend('<div id="first">first</div>');