By default image and text will fade in one after another once there are loaded, but is there a way to have a fading effect added on "each" element once there are loaded?
I can load the element using the code below:
$("#element,#element2,#element3,#element4").fadeIn("slow");
but the downsides are:
I have to specify all the elements in the page, #div1,#div3,#container2.....
Also the elements can only fade in once the page finish loading all together,but what I want is fade in the elements before all the html finishes loaded.
Is it possible?
I would give each element a specific class, then reference it with $(".whatever"). You also will probably check out $.each(), which iterates through objects. To fade in as the page loads, you would need to place the code, or call the function outside the document ready(), somewhere near the beginning of the html.
you should use class attribute for the elements. You can access and control all the elements which have a particular class, you need not specify the id of each and every element. Here is a demo JSFIDDLE for you :
HTML:
<input type="button" id="btn_fade_out" value="Fade Out">
<input type="button" id="btn_fade_in" value="Fade In">
<br>
<div class="my_class">Element 1</div>
<div class="my_class">Element 2</div>
<div class="my_class">Element 3</div>
<img src="abc.png" height="50px" width="50px" border="1" class="my_class"></img>
JS:
$('#btn_fade_out').click(function(){
$('.my_class').fadeOut(1000);
});
$('#btn_fade_in').click(function(){
$('.my_class').fadeIn(1000);
});
The best way to do this would be having a class in common for all the elements you want to fade on load
and then use
$('.class').fadeIn(1000);
$('.class').fadeOut(1000);
Related
So, I am trying to load picture from another page using Jquery .load(), now the element I am trying to load has multiple children element which also load on current page, now obviously I could hide those divs but first I want to know if there's way to only grab parent div and leave out children.
I have tried using parent() method but since .load() works differently, it didn't work as intended. (Unless I missed something)
$('#myNewDiv').load('/robots .heading-image');
Here's HTML code from the other page
<div class="heading-image" style="background-image:url(imagelinkhere.png)">
<div class="heading-image_cover">
<div class="left">
<div class="heading-image title">Heading Title</div>
<div class="heading-image desc">I am a desc</div>
</div>
<div class="right">
<div class="heading-image stat">Stat text</div>
</div>
</div>
</div>
That's the code I am using right now, but .heading-image has multiple child elements as mentioned above.
To sum up, I need to load only parent element and ignore all child elements of the div mentioned above without having to load those children on current page and hide them (If possible)
From what I understand, your goal seems to be to copy the empty div to a new page, while maintaining the background image associated with the <div> tag.
The simplest approach would be to add to a stylesheet in which both of the pages can reach. For example:
CSS
.heading-image{
background-image:url(imagelinkhere.png);
}
JavaScript
$('#myNewDiv').html("<div class="heading-image"></div>");
Then in the head of both HTML documents, have <link rel="stylesheet" href="style.css"> to point towards the correct stylesheet for both pages.
If you just want the empty <div class="heading-image"></div> you could use the load() complete callback to empty it:
$('#myNewDiv').load('/robots .heading-image', function(){
// new html exists in page now, 'this' is #myNewDiv element
$(this).find('.heading-image').empty();
});
If there are resources inside that element like images, videos etc that you don't want to load in page you could also parse the :
$.get('/robots').then(function(html){
var $hImage = $(html).find('.heading-image').empty();
$('#myNewDiv').html($hImage)
});
With all that said I don't see why you need to extract an empty element from another page and can't just do:
$('#myNewDiv').html('<div class="heading-image"></div>')
I know this is a simple thing to do but can't get my head around what I'm doing wrong. I have a h2 tag which will run a function on click, this will then locate a div with the class 'homeSlide' and then run the slideToggle method. However I can't seem to get the content to slide without making the two divs below with the same class name also slide.
Here is my HTML:
<h2>Header</h2>
<div id="home_newproducts_list">
<div class="category-products">
<ul class="products-grid">
<li>Hold fetured products so will be excluded from the slideToggle</li>
</ul>
<div class="homeSlide">
<!-- Content that needs to be displayed on slide -->
</div>
</div>
</div>
Jquery:
jQuery(document).ready(function(){
jQuery("#home_newproducts_list ul.products-grid").not(":first").wrapAll('<div class="homeSlide">');
jQuery(".home-spot h2").click(function(){
jQuery(this).next('.homeSlide').slideToggle(1000);
});
});
I hope i've explained it in enough detial.
So all I want to be able to do is run the slideToggle method on the homeSlide div, but only on the next one after the h2.
jQuery(".home-spot h2")
assuming you are selecting the <h2>Header</h2> element here
try with next() and find().
jQuery(this).next().find('.homeSlide').slideToggle(1000);
next() gets the immediately following sibling which is div#home_newproducts_list in your case
I have a div in a HTML file
"<div id="abc" hidden="hidden">
<div id="statIndicator">
<span id="imgInd" class="status-indicator-border">
<img src="../../LibSrc/SharedResources/IMG/loading-trace.gif" />
</span><span id="messageIndicator">Updating Plots...</span>
</div>
</div>"
I insert the statIndicator div in another div using append.
so that div becomes
<div id="parentDiv">
<div id="statIndicator">
<span id="imgInd" class="status-indicator-border">
<img src="../../LibSrc/SharedResources/IMG/loading-trace.gif" />
</span><span id="messageIndicator">Updating Plots...</span>
</div>
</div>
On refresh I write $('#parentDiv').empty() it deletes whatever is inside the 'parentDiv'.
But when I try to append statIndicator using $('#statIndicator'), it return "[]", though I have the 'statIndicator' div in Html.
Is there a way in which I can get the 'statIndicator' div?
No. $.empty() deletes the contents, so your "statIndicator" div no longer exists at all.
Just remove it from "parentDiv" before you call $.empty(). Either store it in a variable or put it back where it started, in "abc".
I think jquery.append() moves the selected elements without making a copy. So you can explicitly create a copy using the .clone() method and append it's result. Something like:
$('#abc #statIndicator').clone().appendTo('#parentDiv');
This is creating a copy and then appending it at the new location.
Once you do this there will be two divs with the same id, so it will be a good idea to always reference the statIndicator's parent container in your selectors.
You can use .detach() function if you want only parentDiv to be removed
let's say I have an HTML structure like this:
<div class="first">
<div class="sub-1">
<div class="first again"></div>
</div>
</div>
How do I select only the div that has the class "first" but which is NOT inside the div that has the class "sub-1". In order words, how do I get only the outer div but extract any div inside that outter div that have the same class than the outter div (I want to get just the div with class="first", not the one with class="first again").
Thank you
See jQuery documentation for .not(). This should work:
$('.first').not('.sub-1 .first');
I dont know if you mean a very generic way to handle this but in this particular case you can only write.
$(".first:first")
A more generic way would be
$('.first').not('.sub-1 .first').prepend("I was first");
http://jsfiddle.net/JYLVc/
I have a page with two divs in it, one inside the other like so:
<div id='one'>
<div id='two'></div>
</div>
I want div one to change class when it is clicked on, then change back when div two is selected.
I'm completely new to javascript, but I've managed to find a simple command that makes div one change when I click it.
<div id='one' class='a' onclick="this.className='b';">
<div id='two'></div>
</div>
Now I just need an equally simple way to change div one back when number two is clicked.
I've tried changing "this.className" to "one.classname," and for some reason that worked when I was working with images, but it doesn't work at all with divs
<div id='one' class='a' onclick="this.className='b';">
<div id='two' onclick="one.className='a';">
This does not work.
</div>
</div>
Essentially I'm wondering if there is a substitute for the javascript "this" that I can use to target other elements.
I've found several scripts that will perform the action I'm looking for, but I don't want to have to use a huge, long, complicated script if there is another simple one like the first I found.
You can use document.getElementById
<div id='two' onclick="document.getElementById('one').className='a'; return false;">
This does not work.
</div>
This would work:
document.getElementById('one').className = 'a';
you could get the element by id with:
document.getElementById("one")