Can't see animation when using jQuery animate - javascript

so I know this question has been asked many times, but I could not find any answer that works for me. I've already included the jQuery Google API line before my script, and I'm pretty sure my syntax is correct as far as I know (since I'm following a tutorial video for this). I've also added a few lines of console.log() in some places and I know for sure that it is going pass the animate function and reaching the end of the code. Here is my code:
index.html (Not all, just a small part to show that I have the API included)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="js/javascript.js"></script>
javascript.js (Also not all, just the part I'm having problem with)
prepareToAttack = function () {
$("#pikachu-img").animate({
top: "-=25px"
}, 200, function () {
$("#pikachu-img").animate({
top: "+=25px"
}, 200);
});
};
Back to index.html (This is where the pikachu image is set up)
<img id="pikachu-img "src="img/pikachu.png" class="absolute" style="height: 115px; top: 40px; right: 46px">
Does anyone have any idea why I'm not seeing the animation?

Maybe the problem caused by img tag, your double quote of id stick with src.
No other problem found in my test:
NOTE: Using the style attribute in HTML is bad practice. Use plain CSS instead! Remember when an elements CSS in dynamically manipulated say whatever.style.color = "red" it will add the style attribute, then and only then it should be used.
Also thanks to HTML5 you can scrap the type="text/javascript" on your script tag.
HTML:
<img id="pikachu-img" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQtDxj0kmEFUVNCUDF4G6553Hm-1w_ADcyYKhpkQf7pfsusCpHsbYpS3bQm">
CSS:
.pikachu-img {
position: absolute;
height: 115px;
top: 40px;
right: 46px;
}
JS:
$(function() {
$("#pikachu-img").animate({
top: "-=25px"
}, 2000, function() {
$("#pikachu-img").animate({
top: "+=25px"
}, 2000);
});
});

Related

Where to add a script that acts on the scrolling action?

I am trying to make a div visibe only after a certain scroll length.
There are already some threads here on Stackoverflow about it and so I have tried to use the suggested scripts listed in the answers, but no one of them seems to work.
So, I suppose that I don't know how to use them.
I have put this block into the head, surrounded by the two script tags:
function scroll_bar() {
if (document.body.scrollTop > 700) {
document.getElementById("navigation_bar").show();
}
else
{
document.getElementById("navigation_bar").hide();
}
}
And in the body, I have a div (the one that I want to make visible/hidden) with these attributes:
<div onload="scroll_bar();" class="container" id="navigation_bar" style="position: fixed; z-index: 1; background-color: white; height: 50px; width: 100%;"></div>
What is wrong over here?
(I am using Bootstrap anyway, that "container" class comes from it.)
You have to add an event listener to the 'scroll' event: window.addEventListener('scroll', scroll_bar). Also in your handler I would use window.pageYOffset instead of document.body.scrollTop.
Instead of putting your <script> in your <head>, put in just before your closing body tag (</body>). This will make sure that content is loaded before the script and therefore your script should run correctly.
<p>I'm some content!</p>
<script>console.log('JavaScript!');</script>
</body>
Also, you need to make sure that your script function fires on the body scroll event.
Are U sure it's good??
document.getElementById("navigation_bar").show();
"document.getElementById("navigation_bar")." is javascript.
"show()" is jquery.
try:
document.getElementById("navigation_bar").style.display = 'block'/'none'
or
$("#navigation_bar").show();
You misplaced your event to div.
please move your event BODY
code
<body onload="scroll_bar();" >
<div class="container" id="navigation_bar" style="position: fixed; z-index: 1; background-color: white; height: 50px; width: 100%;"></div>
</body>

In getorgchart jquery plugin how to remove the getorgchart hyperlink present at the bottom of the screen

I am trying to use getorgchart jquery plugin. And I want to remove the 'GetOrgChart' hyprlink which is showing in the bottom of the screen. I have tried removing it from getorgchart.js file but it is still showing up. Is it part of the theme? How Can I stop showig it on my webpage???
Please help..
Try this, It worked for me.
Add following code in your html page.
$(document).ready(function(e) {
setInterval(function(){ $('a[title="GetOrgChart jquery plugin"]').hide(); }, 10);
});
Open file getorgchart.js and find eval(eval("String.fromCharCode(blah3x...)"))
and delete it or comment.
Try This,
In your orgchart.html page, paste this snippet
<div style="display: block; position: absolute; bottom: 15px; right: 0;z-index: 214748336480 !important; height: 25px; width: 100px; background: #333;"></div>
Change width, height and background to your liking. But make sure z-index is higher than what I have mentioned, this is the important point here. Hope this helps. Thank you.
In order to remove the getorgchart logo you need to buy a license http://www.getorgchart.com/Buy
I use the following to temporarily disable eval(), which GetOrgChart uses to keep the logo on display:
<script>__eval__ = eval; eval = function () { };</script>
<script src="getorgchart.js"></script>
<script>eval = __eval__;</script>

Fade Out Splash Page

I'm trying to create a fade out on the splash page I've created which blends into the main page of my site. My site is: http://www.simonsamuel.com/
The jQuery code I'm using is:
<script type="text/javascript">
$("#splash").click(function() {
$("#splash").fadeOut("slow");
});
</script>
And here is the CSS code:
#splash {
background-color: #ffffff;
background-image: url(http://i.imgbox.com/Al4c3tZ5.png);
background-position: center;
background-repeat: no-repeat;
position: fixed;
top: -60px;
right: 0;
bottom: 0;
left: 0;
z-index: 99999;
}
I've tried a number of different codes but I can't find the one that works with my site. And just out of curiosity, I'd like to know if it's possible to alter the webpage title with jQuery? I want to make the title bar uppercase font.
Help would be much appreciated, thanks!
When i look at your source code i see this:
<br />
$(document).ready(function() {<br />
$('#splash').click(function() {<br />
$('#splash').fadeOut(2000);<br />
});<br />
why is there linebreaks in that code?
that's html code.
besides that your code is incomplete
$(document).ready(function() {
$('#splash').click(function() {
$('#splash').fadeOut(2000);
}); // forgot these
}); // or these
I set up a fiddle to demonstrate the basics - http://jsfiddle.net/jayblanchard/nBdkU/
$(document).ready(function () {
$('#splash').css('opacity', '0.5'); // doing this with jQuery for ease
// here are the basics, just like your existing code
$("#splash").click(function () {
$("#splash").fadeOut("slow"); // you could also use $(this).fadeOut('slow');
});
});
Watching the console when loading your page I get a syntax error that points to the same problems that #Puzzle84 points out -
<script type="text/javascript"><br />
$(document).ready(function() {<br />
$('#splash').click(function() {<br />
$('#splash').fadeOut(2000);<br />
});<br />
</script>
All of these lines breaks need to be removed. Then, as he pointed out, you need another set of closing brackets ( }); ) before the closing script tag. When I then click on the splash element it disappears and your site is shown. If you have things that you're trying to show in the splash element you'll just have to get the CSS positioning right for those.
There are also other errors pointed out in the console (Cargo.View.Main is not defined)
For the title bit you can either do some pure JavaScript or a little jQuery -
document.title = 'the page title'; // changes the title
document.title.toUpperCase(); // sets title to upper case
$(document).attr('title', 'the page title'); // changes the title
$(document).attr('title').toUpperCase(); // sets to upper case

Running function before window has loaded

I wasn't sure how to correctly word the title, but here's what I have going on. I have two images in the body of the html.
<img src="http://www.narm.org.uk/home/images/Daylight%20design.jpg" id="b1" alt="day" />
<img src="http://www.aphoenix.ca/photoblog/photos/NighttimeColours.jpg" id="b2" alt="night" />
The corresponding css is as follow (basically makes one of them the background):
#b1, #b2 {
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
}
Here is the javascript:
window.onload = function() {
setBackground();
}
function setBackground() {
var back1 = $('#b1').hide();
var back2 = $('#b2').hide();
//setTimeout(function() {setBackground()}, 1000);
}
What currently happens now is that one image will display briefly because I"m waiting until the page has loaded to hide both the backgrounds. How would I go about hiding the backgrounds before the page has completely loaded?
Maybe with css on your images:
display: none;
So, styles will be like:
#b1, #b2 {
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
display: none;
}
I think you want to use jQuery.ready:
jQuery(function($) {
var back1 = $('#b1').hide();
var back2 = $('#b2').hide();
});
The window.onload function is fired when all external sources is loaded (styles, scripts, images, etc..)
jQuery's ready method is fired when the DOM is ready.
A little article about the difference
Take the function out of the window.onload call, and move it to between two script tags at the top of the page. The browser reads from top to bottom, so it will execute the code as soon as it sees it.
so make your code look something like this:
<head>...
<script>
setBackground();
</script>
...</head>
i think you have to create a custom functions for this, you can have all your content hidden, once the page is ready .load() you hide you background then show the new background and the content
If I understand correctly, you want to preload the images and keep them hidden until you need them.
Rather than JavaScript, css seems to be the way to go here. However if you use display:none; some browsers might decide to delay the image load. My suggestion is to move the images offscreen:
#b1, #b2 {
left: -9999px;
top: -9999px;
z-index: -1;
position: absolute;
}
[Update] Here is a test page for display:none:
http://www.quirksmode.org/css/displayimg.html
It mentions that Opera will not load the images.

Click link, div slides out, linked div slides in, click to close and reload first div

I wish I knew how to write this myself.
http://www.cubancouncil.com/work/project/coppola-winery/
The linked page has the exact function I would like to use. How I believe their script works. Click an image which hides the container div for that image by sliding it off to the right and loads/slides in a larger image from the right to left which is in a fixed position.
If someone here is nice enough to answer this question with a solution would you mind taking it a step further and commenting on portions of your code so I can link it to the proper html?
I think understanding this one script would set me on a path to nailing down more advanced Javascript & Jquery. Thanks.
EDIT: I found a better example with some code provided. Go to the section where it talks about how to slide your element left. If you have questions, just let us know.
I've also taken the liberty to give you a full working example (exact same as the one in the article) so you can just run it in your browser
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<style>
.slide {
position: relative;
background-color: gray;
height: 100px;
width: 500px;
overflow: hidden;
}
.slide .inner {
position: absolute;
left: -500px;
bottom: 0;
background-color:#e3e3e3;
height: 30px;
width: 500px;
}
</style>
<script>
$(document).ready(function() {
$('#slideleft button').click(function() {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() :
0
});
});
});
</script>
</head>
<body style>
<div id="slideleft" class="slide">
<button>slide it</button>
<div class="inner">Slide to the left</div>
</div>
</body>
</html>
The article explains most of it but I'll give you a quick run-down. In essence what we're doing is we're making it so that whatever you're trying to slide, we are altering the left position so that it comes out. Initially, I set the CSS to be -500px so it is outside the screen. The javascript then listens for the button click and moves the div by changing the left position. Jquery's animate() function does most of the work though.
The confusing bit about this is the ternary operator. You can find more info on that here. Essentially it just checks the left property to see if it's 0. If it is, we want to move it back outside to -500px. If the left isn't 0px, we know it must be outside the screen, so we move it back to 0px.
If there is anything else you're confused about let us know.
Created simple fiddle for you (notice it WORKS ON HOVER!!) but it should get you going, it's kinda late in my country so my brain doesn't work properly:)
Fiddle here
$(document).ready(function(){
var innerHeigth = $(".inner").outerHeight();
$(".wrapper").hover(function(){
$(".inner").stop().animate({top:-innerHeigth},1000);
//alert(innerHeigth)
},function(){
$(".inner").stop().animate({top:0},1000);
});
});

Categories