jquery animation not showing up - javascript

$('#main-mission .fade').animate({opacity:1.0;filter:alpha(opacity=100);}, { queue:true, duration:2000 }).animate({opacity:1.0;filter:alpha(opacity=100);}, 1500).animate({opacity:0.0;filter:alpha(opacity=0);}, 800,'linear',function(){
$('#main-mission .fade').html("<font size='3'>... to organize and display the data that people need, to give them the ability to make smarter decisions and purchases that will help the environment, as well as reduce their monthly electricity costs.</font>"); }).animate({opacity:1.0;filter:alpha(opacity=100);}, 2000);
...thats my jquery,
<div id="main-mission">
<table><tr height="28"><td width="11"></td><td width="475" style="height: 75px;" class="boxed"><div class="fade" style="opacity:0.0;filter:alpha(opacity=0)"><font size="4"> The Spare Our Green Mission ...</font><br><br></div> </td></tr></table>
</div>
and that is the HTML. I'm not quite sure why it isn't, working... could someone please help?
Thanks.

You have used semi-colons where you should have used commas to separate the css attributes being animated. Also you don't need to try and add IE support with filter attribute. Try this code, tested in FF3.5 and IE8
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function()
{
$('#main-mission .fade')
.animate({opacity:1.0}, {queue:true,duration:2000})
.animate({opacity:1.0}, 1500)
.animate({opacity:0.0}, 800,'linear',function()
{
$('#main-mission .fade').html("<font size='3'>... to organize and display the data that people need, to give them the ability to make smarter decisions and purchases that will help the environment, as well as reduce their monthly electricity costs.</font>");
})
.animate({opacity:1.0}, 2000);
});
</script>
</head>
<body>
<div id="main-mission">
<table>
<tr height="28">
<td width="11"></td>
<td width="475" style="height: 75px;" class="boxed">
<div class="fade" style="opacity:0.0;filter:alpha(opacity=0)">
<font size="4"> The Spare Our Green Mission ...</font>
<br>
<br>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>

Have you tried removing parts of the chain down to the first element and then adding them back in one at a time to see what is broken? It's a long function call to try and read and parse.

I think that the non numerical values should be in quotes like filter:"alpha(opacity=0)";.
What error message are you getting (from firebug, i.e.)?
-- edit
Btw. IE8 is using -ms-filter for opacity now.

I agree with Paddy. You should write a simpler version of your code and then try it out. Make only one call to $.animate(). Once you get that working, then add in the callback. Once that works, then add the chaining.
Also note that you should not use the <font> tag. It is not valid HTML.

Related

window.print not working tried all methods in all major browsers

I am trying to print a page with window.print but it ain't working in all the browsers.
This is the code that i am using:
<div class="user_buttons">
<!--Test 1-->
<IMG SRC="images/print.png" BORDER="0"
<!--Test 2-->
<FORM>
<INPUT TYPE="button" onClick="window.print()">
</FORM>
<!--Test 3-->
<SCRIPT LANGUAGE="JavaScript">
if (window.print) {
document.write('<form><input type=button name=print value="Print" onClick="window.print()"></form>');
}
</script>
<!--Test 4-->
<img src="images/print.png" onclick="window.print()">
<div><img src="images/overzicht.png" title="Terug naar overzicht"></div>
</div>
As you can see i am trying multiple solutions given by the internet. What is frustrating is that those codes are working on the demo sites but they aren't on my page. I post my code in JSF. The JSF example will not be a working example but it will have the entire code in the javascript area. The link for the entire code is here: http://jsfiddle.net/7bRNu/
I finally got it. It was a very painfull process of searching errors in a huge mess of code. The next time you ask a question on stackoverflow, please make sure that you broke the problem down into smaller pieces and post only the code that you think is probably the cause of your problem.
In the very bottom of your entire code, there is a little script-section in which it says:
var print = document.getElementById("print").value;
You are in the global scope, meaning that every variable you declare will be a property of window. Therefore, by writing print = you actually redefine window.print. Change the name of this variable and you should be good. The following line is only an example. You can choose whatever variable name you like. Just don't use print.
var printValue = document.getElementById("print").value;
Here is one method isolated:
http://jsfiddle.net/5PumN/
<IMG SRC="images/print.png" BORDER="0"
It works just fine here.

Get onClick element to return to the main element?

I'm awful with javascript and I'm having a problem with this one.
I'm using this code
<script>
function changeNavigation(id){
document.getElementById('members')
.innerHTML=document.getElementById(id).innerHTML
}
</script>
and HTML
`<span onClick="changeNavigation('members')" >MEMBERS</span>
<span onClick="changeNavigation('help')" >HELP</span>`
<div id="members>...</div>
<div id="help" style="display: none;>...</div>
But I can't get <span onClick="changeNavigation('members')" >MEMBERS</span> to actually go to an element "members" without duplicating everything inside of it in another id.
Is there a way to do this?
This can be done using only standard javascript, but personally I'd recommend going ahead and getting used to using jQuery. Here's an example jsfiddle using jQuery: http://jsfiddle.net/JnvCR/2/
Don't forget to include jQuery in your website:
<script src="http://code.jquery.com/jquery.js"></script>
You need to correct your syntax errors. Use onclick instead of onClick (pedantic). Make sure you close your attributes properly, you are missing a few closing " marks.
updated html
<span onclick="changeNavigation('members')" >MEMBERS</span>
<span onclick="changeNavigation('help')" >HELP</span>`
<div id="members">...</div>
<div id="help" style="display: none;">...</div>
There is also an error with your logic as you are simply replacing the contents of div#members with itself.
Updated JS without syntax errors, but still with dodgy logic
function changeNavigation(id){
document.getElementById('members').innerHTML=document.getElementById(id).innerHTML;
}
Demo fiddle
http://jsfiddle.net/ADGCV/
As far as your actual question goes, can you explain what you would like to happen a bit better??
Here's a possible solution http://jsfiddle.net/ADGCV/1/

Get all tags inside a div using javascript

Newbie in javascript.
Suppose I have this html
<html>
<div id = "div1">
<table>
<tr><td>Name</td></tr>
<tr><td>Password</td></tr>
</table>
</div>
<div id = "div2">
<input name="place" value=""/>
<input name="place" value=""/>
</div>
</html>
But I want to retrieve all the tags and elements of a div in "div1".
So elements that will be retrieved will be
<table>
<tr><td>Name</td></tr>
<tr><td>Password</td></tr>
</table>
Not only the data.
if you use this in your code you will be able to get the table which your saying
document.getElementById('div1').innerHTML;
First and foremost, congratulation on getting started on JS. It's a beautiful scripting language. Next, I would advise you, to make your life simpler while you should play around with a pure Javascript syntax, it will make your life a whole lot easier if you get started on a library, like jQuery or Mootools. JQuery is my preference, mootools is more of a framework.
document.getElementById('div1').innerHTML;
in jquery is as elemental as $(#div1) or $(#div1).html(). Have fun learning!

My div show/ hide code works fine on a static HTML page but doesn't work on a Wordpress 3.5.1 page

This is sort of a condensed version of the code, the real version is too long to post but this is enough to represent the concept. I am using this to switch guitar diagrams based on several choices represented by anchors with the corresponding id in the href="". After spending several days getting it to work just right on a static html page, the script won't work in a Wordpress page which is where I intend to use it. I have tried it with the script in the head or inline (which shouldn't matter) - but either way it will not function. I know that Wordpress and certain plugins use Jquery so there may be a version mismatch causing conflicts. I am not (yet) an expert in javascript but I know there are several ways to skin a cat as the saying goes, I just need to find one that plays nice with Wordpress. Any help would be greatly appreciated...
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var divswitch = $('div.diagram_container a');
divswitch.bind('click',function(event){
var $anchor = $(this);
var ids = divswitch.each(function(){
$($(this).attr('href')).hide();
});
$($anchor.attr('href')).show();
event.preventDefault();
});
});
</script>
<style>
.diagram {
margin: 0;
width: 100%;
}
.diagram_container {
width: 100%;
}
</style>
<div id="RH_RW_Div" class="diagram_container" style="float:left; display:block;">
<div class="diagram_menu">
<a class="checked" href="#RH_RW_Div"><span class="checkbox_label">Right Handed</span></a>
<a class="unchecked" href="#LH_RW_Div"><span class="checkbox_label">Left Handed</span></a>
</div>
<img class="diagram" src='images/RH_RW.gif' /><br />
</div>
<div id="LH_RW_Div" class="diagram_container" style="float:left; display:none;">
<div class="diagram_menu">
<a class="unchecked" href="#RH_RW_Div"><span class="checkbox_label">Right Handed</span></a>
<a class="checked" href="#LH_RW_Div"><span class="checkbox_label">Left Handed</span></a>
</div>
<img class="diagram" src='images/LH_RW.gif' /><br />
</div>
Wordpress uses by default jQuery.noConflict(). This is to assure that there is no conflict by other libraries using the $ variable. That's why your console says it's not a function.
However, obviously, the jQuery variable still works, and you should use that, and passing to your function the $ variable yourself to enable the shorthand version of jQuery.
So your code should look like this:
jQuery(document).ready(function($){
// Your functions go here
});
My guess is that your Wordpress install or a plugin is already loading up jQuery in the head. Check to see if it exists there, and if it does, don't call it again.
If that doesn't do it and you have this site online, send me the link and I'll take a look.
Calling jQuery twice will often lead to problems. There is also a proper way to load jQuery and override the Wordpress version if you specifically need 1.8.3 (wp_register_script and wp_enqueue_script), but I don't think you need to go down that route yet.

JavaScript simple echo/print query

I know this is basic stuff, but after hours of research on google, this site and others I simply cannot come up with an explanation of why this code wouldnt work. And it doesnt. Can someone please spot the mistake? many thanks in advance:
The JavaScript bit:
<script language="text/JavaScript">
function myFunction() {
var date1;
date1=getElementByID("date1").value;
document.getElementByID("calculate").innerHTML=date1;
}
</script>
The HTML bit (that definitely works and its a rather large file with loads of forms, tables)
<html>
<head></head>
<body>
<div id="wrap">
<h2>JavaScript</h2>
<form>
<table>
<tr>
<th><input type=text id="date1" value="09:00" size=15></td></th></tr></table></form>
<table>
<tr>
<th bgcolor="#eeaaaa" align=center><em></em> <input type=button id=pay id="calculate" size=15 value="Click"></th></tr></table>
<table>
<tr>
<th><p id="calculate" size=15> </p></td></th></tr></table>
</div>
</body>
</html>
​
​
I tried different things already, changing the syntax, clearing the clutter out, but nothing seems to work.
I appreciate any constructive comments/criticism. Thanks
You have two ids id=pay id="calculate" for your second input ..id needs to be unique
<script language="text/javascript">
function myFunction() {
var date1;
date1=document.getElementById("date1").value;
document.getElementById("calculate").innerHTML=date1;
}
</script>
and most importantly ..you are not calling myFunction
#calculate (the element with id="calculate" ) is an input element. You don't set its value using innerHTML but value (like you did when reading the value in #date1.)
You may want to use an online HTML validator or at least a more powerful HTML editor to help you out with the code.

Categories