Jquery div fadeIn on load not working - javascript

I just have a Div ".text" that i want to fade in on a subdomain page… I googled on stackoverflow and came up with this:
<script type='text/javascript'>
$(function(){ // $(document).ready shorthand
$('.text').hide().fadeIn('400');
});
</script>
The CSS is just font styling… I even tried it before with a display:none; and without the .hide() but somehow it does not work… I load this jQuery:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
Do I need another one? Or do I need to name the subdomain in the script? I wanted to put the script in my index.php file… I just can not explain it to myself…

Load the script file next to including the Jquery plugin.
Since there is no fault in your code.
This may be the problem.

I think because you are feeding in fadeIn('400') 400 is an int value not a string. Try using
fadeIn(1600)
and you might see a more noticeable fade effect.

Related

Javascript not fading element

I have been trying to fade in an object when the page loads. However, the object does not fade in or out (I have tried both). What can be causing my javascript program to not execute this code? Thanks for your help.
Javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeIn1").fadeIn(3000);
});
</script>
Html(simplified):
<p id="fadeIn1" style="display:none">Hello</p>
Solution:
I removed unnecessary script tags and the problem was fixed.
When you are fading it out then you cannot use style="display:none". Otherwise it is perfectly working

$(document.body).css not working

I have been trying to change the background image of my HTML body with a .js but nothing happens. Do I need to put the Javascript code inside my HTML?
function plano1() {
alert('you');
$(document.body).css('background-image', 'url(img/planoSelected.png)');
}
This is the complete function I have been trying to do. Google Chrome shows the alert, but doesn't do the $(document.body). What am I supposed to do?
Notes: I use the function with a "onmouseover". I have already tried to use:
$('body').css('background-image', 'url(img/planoSelected_2.png)');
$("body").css('background-image', 'url(img/planoSelected_2.png)');
The jQuery code should be called at the bottom of the page, above the closing body tag.
Load jQuery first:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body').css('background-image', 'url(img/planoSelected_2.png)');
});
</script>
The code is fine, but there are a few reasons why this might not work.
Make sure the image paths are correct, relative to the script's location
Is plano1 called?
Make sure jQuery is actually loaded
Make sure the DOM is ready when calling the function (use $(document).ready if not sure)
Make sure there are no errors in the code before plano1 is called
If these things are all right, and it still doesn't work, check if your onmouseover is working at all. Simply alert or log something in the console.

Javascript Lightbox 2 Issue

I'm quite new at this, so please be thorough with the explanation.
I'm using the Lightbox 2 jQuery file, along with another jQuery file to execute a menu slide animation and a fade animation on my images.
I'm assuming that there is conflict between the two jQuery files, but I'm not sure how to resolve it.
Any advice? I read something about jQuery.noConflict(), but I'm not sure how to implement it, or it if will work.
<script src="../Scripts/jquery-2.0.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div#ScrollBox img').animate({
opacity:.5
});
$('div#ScrollBox img').hover(function(){
$(this).stop().animate({opacity:1}, 'fast');
}, function(){
$(this).stop().animate({opacity:.5}, 'slow');
});
});
</script>
<!--LIGHTBOX-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
It looks like you are loading two different jQuery versions (1.10.2 and 2.0.2), which is, I believe, causing the problem. I would recommend removing the 1.10.2 jQuery script, and one of the following (in order of effort, in case you want to try all 3):
-see if your lightbox plugin still works
-find a newer version of the same lightbox
-use a different lightbox, for example fancybox
In any case, make sure that your end result only has one version of jQuery being loaded.
Is there a reason you need both? They should have pretty much the same code so you only need to include one. I would use whichever is the latest.
It would help if you included in your post the lines of code where you explicitly add them so we can see what you are doing.

Loads style and/or animation before show the page

I need some advice about my problem.
I'm using a JQ Multiselect and JQ Uniform to make more of the pages hotties.
The problem is.... The JQ are applied after the page has already loaded and it happens that you see the page without the "effects" (for about 1 second) and then start the effects / styles.
And this thing is horrible and frustrating.
Before writing here I took a tour on StackOverflow and on the internet but I can not find the solution to my problem.
Note: obviously, in the head tag I have the src of single js and othe tags before and after my "Javascript problem".
I tried with
<head>
<script>
$(document).ready(function(){
$(window).load(function(){
$('#SomeID').multiselect({});
});
});
</script>
</head>
and with
<head>
<script>
$(window).load(function(){
$('#SomeID').multiselect({});
});
</script>
</head>
but is the same thing!!!
You think there's a solution?
Do CSS display: none on the body or all the main sections of your page, so that when the entire page is loaded all the contents of it are hidden. You can then use whatever JavaScript effects you want to change the display property.

Problems with jQuery animations when using auto-pager

I have an auto-pager set up on my page to allow for infinite scrolling. I also used jQuery to change the opacity of images when they're hovered over. however, the animation only works on the first page, not the consecutive pages that are automatically loaded. any idea why this happens? or are there any methods of fixing this? thanks.
this is the code i'm using for the images and the auto-pager:
<script type="text/javascript">
$(document).ready(function(){
$(".post").animate({opacity:.8});
$(".post").hover(function(){$(this).stop().animate({opacity:1}, "fast");}, function(){
$(this).stop().animate({opacity:.8}, "slow");
});
});
</script>
<script type="text/javascript" src="http://static.tumblr.com/q0etgkr/J5bl3lkz1/tumblrautopagernopage.js"></script>
Where are your codes? We're not magicians...
To the extent of trying to figure out what you're saying here, I think there's a huge possibility that your code is not applying to the newer, auto-paged ones. See if you could put a more dynamic code into your system, and apply that AFTER the auto-pager has loaded the images.

Categories