Okay what I am simply looking for is a short/easy script that will allow me to replace the DIV name so that I can have multiple divs on a page fadein once loaded (including images within them).
Any ideas?
Thank you!
Give the divs a common class (e.g. "fade") and use code similar to this
$(document).ready(function(){
$(".fade").hide(0).delay(500).fadeIn(3000)
});
http://jsfiddle.net/5td73/
Put this code in your javascript file, for each element you want to fade it add the class="fadeOnLoad" code and make sure to add display: none to the css for any elements you want to have hidden on load:
$(document).ready(function() {
$('.fadeOnLoad').fadeIn('slow');
);
Related
I have this little script for add differents parts of code to the body in website
WincontentBody=jQuery("<div class='wd_"+idw+"'id='win_container'>OK</div>");
WincontentBody=jQuery("</div>");
jQuery(WincontentBody).fadeIn(3000).appendTo('body');
I try to add code from WincontentBody to body but it doesn't work, some kind of error i have in syntax, because never show div
I think this it's fine but I can't find the problem, the idea it's to add all contents from the variable WincontentBody to the body
Is it possible to do this? Because i can't make it to work
Thank´s in advanced
I went ahead and wrote your question properly for you. Take a look at SO in Spanish.
fadeIn and appendTo are jQuery methods. WincontentBody contains a string. You should first create a new jQuery object with your html.
$(WincontentBody).appendTo('body').fadeIn(3000); //first append, then fade in
If the fadeIn doesn't seem to work, it's probably because you will have to hide the elements (with some css) before inserting them into the page. Otherwise you'll be trying to fade in something that's already visible.
And I don't know if your code is actually formatted like that or it just got wrapped here, but you can't have multiline strings, unless you end each line with \.
Now (after your edit), you are creating two jQuery objects. One with the div and the other with nothing valid.
WincontentBody=jQuery("<div class='wd_"+idw+"'id='win_container'>OK</div>");
//WincontentBody now has the div
WincontentBody=jQuery("</div>");
//WincontentBody now has nothing. The </div> is not being appended to what was in WincontentBody before, you're assigning a new value to it
jQuery(WincontentBody).fadeIn(3000).appendTo('body');
//You're appending WincontentBody (which has nothing valid) to the body
//Also, WincontentBody is already a jQuery instance, no need to call jQuery() again
What you should do is to create your WincontentBody with the html code, as you had before, and then use $(WincontentBody)... or jQuery(WincontentBody).... Or put the whole html code in a single jQuery element like:
var WincontentBody=jQuery("----all the html code at once----");
WincontentBody.appendTo("body").fadeIn(3000);
Try this.
$(document).ready(function() {
WincontentBody = "<div class='wd_asdfas'id='win_container'>OK This is fine.</div>";
$('.displayHere').append(WincontentBody);
$('.displayHere').fadeIn(3000);
});
body { background: #eee }
.displayHere { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body>
<div class="displayHere">
Hello Buddy
</div>
</body>
Updated
I had made few changes.
I add the div named displayHere. I don't think it is good idea to
give the fade effect to body of the webpage.
In jquery I split the functions to two different functions. Firstly it will update the details and then it will fade in.
I need help understanding what I'm doing wrong. I'm loading a page and grabbing two divs using .load works great no issues. but then I want to find one of those divs and remove the bootstrap class and possibly add another class .addClass() howeve rI can't even get the removeClass to work. Am I doing this correctly?
$(document).ready(function() {
$("#siteloader").load( "/men/Maria-Brown #qvImage, #qvContent" );
$("#qvImage").removeClass(" .col-xs-12");
});
Awww yes I figured it out. because the main.js loads the popup and has it set to hidden until the popup is triggered. the
$("#qvImage").removeClass("col-xs-12");
needed to be added to the function inside the main.js now it works great.
thanks guys
I am not a really good understanding guy in all aspects of jquery, but I think I have one suggestion that you should check:
$(document).ready(function(){
$("#siteloader").load( "/men/Maria-Brown #qvImage, #qvContent", function(){
$("#qvImage").removeClass(" .col-xs-12");
} );
});
so this means that you run the "removeClass()" function AFTER the load is done. Try it.. I think this should help.
I can't write the comments yet, so I'm writing it as an Answer...
I have a large Joomla CMS Website I'm working on.
Problem: I need to hide a menu tab globally across the entire site. The menu item I need to have does not have a unique ID or class; but instead shares the same class as the other tabs I need to keep on the page. 70% of the tab I need to remove shows in 4th order so I started with the below.
.tabs:nth-of-type(4)
{
display:none !important;
}
But! Seeing as how the rest is in different order, this wont work. The tab in question I need to remove looks like the below across the mark-up.
Update: This is what I currently have via the suggestions below but it isn't working:
$(document).ready(function() {
$('.djaccTitle:contains("Location").css( "display: none;" )')
});
<span class="tabs">Location</span>
Is there a way to write an if statement or similar lightweight solution that can sniff out text content within the class, so if it says Location, then hide?
I would like to find a solution like this, as opposed to going through 1000 files of mark-up removing manually. Cheers for any pointers
Update: This is what I have via the current suggestions below but it isn't working!
$(document).ready(function() {
$('.tabs:contains("Location").css( "display: none;" )')
});
I do not believe what you are asking for exists with pure CSS at this time.
What I would do is use jQuery's :contains() selector:
$('span.tabs:contains("Location")')
or even better:
$('#idOfTabsContainer span.tabs:contains("Location")')
And of course, don't forget to put this in a document.ready to ensure that your DOM element has been loaded successfully:
$(document).ready(function() {
$('#idOfTabsContainer span.tabs:contains("Location")')
});
Jquery :contains() Selector should work. I think you have an error in .css() function syntax.
Please try with:
jQuery(document).ready(function(){
$( '.tabs:contains("Location")' ).css( 'display', 'none' );
});
Hope this helps
There used to be a :contains selector that they were going to add to CSS.
But alas, you may have to resort to some JS, as addressed already here
jQuery's got your back though:
$('.tabs:contains("Location")')
Problem: I need to hide a menu tab globally across the entire site.
Solution 1: Disable the menu item. Boom, it is gone from your menus, site wide.
Solution 2: Hide the menu item with css by adding a unique class to the menu item itself and then hiding it with css.
.hide-me-with-css {display: none;}
I am running a bg slider..."Supersized - Fullscreen Slideshow jQuery Plugin"
what i need is when a background changes some contents in a specific div must also change...
here i found a code line from script
if (options.slide_captions)
$('#slidecaption').html(options.slides[currentSlide].title);
this one pulls the image title to a specific div, but i want to load unique div for each background change...
or is there any other ways to do??
i have very little knowledge in jquery...
please help
advance thanks...
you can write this:
if (options.slide_captions) $('#slidecaption').html(options.slides[currentSlide].title, function(){
//write the code that load the unique div
});
tell me if it works
http://buildinternet.com/project/supersized/docs.html#theme-after
Check-out the theme.afterAnimation( ) documentation. You can set it to a function that changes the content after the slide changes.
I tried some plugins but they all come with their own styling which takes quite some time to get rid of. Is there any plugin with minimal styling (or a really simple way) to apply custom background to select element? I just need something very simple.
Thanks
I found this one. It even degrades automatically if JavaScript is disabled.
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
With jQuery am using lines like this in my dom ready function :
$(".overlay").css("top","300px");
Goes like this in the header:
<script type="text/javascript">
jQuery(document).ready(function(){
$(".overlay").css("backgroundColor": "#0f0");
});
</script>
.overlay is the class of the div i wanna change and then comes the css property and its value.
Hope this helps.