Opacity toggle doesnt work - javascript

so I have this code :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
$(document).ready(function()
{
$(".regcontainer").hide();
$(".registrateimg").click(function(){
$(".regcontainer").animate({
height:"toggle",
opacity:"toggle"}
,"slow");});
}
);
</script>
The problem is that when I load the page the registration form is there and it must be hidden until click on the image , which class is registrateimg . I think my code is okay . I saw another topic similar to this but there the problem is that it was not used $(document).ready ... and here it is . I dont know where is my mistake .

Use two script tags, one for loading jQuery, one for your own code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$(".regcontainer").hide();
$(".registrateimg").click(function(){
$(".regcontainer").animate({
height:"toggle",
opacity:"toggle"}
,"slow");});
}
);
</script>
(also, you don't need the type="text/javascript" bit)

you can use another way. The following methods will hide your element
$(".regcontainer").css("display","none");
or
$(".regcontainer").css('opacity', '0');

Related

How can I pass an html img element to a javascript included file?

This is a question from a noob in javascript. I tried to find something similar the last two days but I didn't find. I try to pass an html image element to an external javascript file which I include to the rest html code. The javascript fade in and fade out an image. Because I want to use different images everytime, thus I want to have a function in an external javascript file.
What I did so far:
PHP and HTML:
<?php
if ($success){
echo"<link rel='stylesheet' href='js/jquery-ui-1.11.4-smoothness.css'>
<script src='js/jquery-1.11.3.js'></script>
<script src='js/jquery-ui-1.11.4.js'></script>
<img id='tick' src='tick.png'>
<script type='text/javascript' src='js/success_failure_signs.js'>
success_failure(tick);
</script>";
}?>
Javascript file has this code:
function success_failure(tick){
var x = tick;
x.fadeIn();
x.fadeOut(1000);
}
The browser's console doesn't give any error.
It seems that the function success_failure doesn't get the image.
What is wrong on this code and how can I fix it?
Thank you in advance!
You haven't defined tick when you make your function call. Try this...
<script type="text/javascript" src="js/success_failure_signs.js">
</script>
<script type="text/javascript">
var tick = $("#tick");
success_failure(tick);
</script>
EDIT: I've also separated the inclusion of the script and your code to call it into two separate script tags.
maybe passing the image to the script is the wrong way of thinking here.
Most of the time with Javascript for web pages the JS gets the image from the HTML site itself.
You are already including jQuery so look into how to get an element from the page with jQuery.

(JS) calling external .js function with <script> tag

i'm looking to call a function cookiefix() which is located inside main.js and source is linked at the bottom of my html.
echo '<body>';
if(!isset($_COOKIE['clicked'])) {
if(!isset($_COOKIE['count'])) {
echo '<script type="text/javascript">cookiefix();</script>';
echo '<script type="text/javascript">'
, 'document.cookie="count=1";'
, '</script>' ; } }
I was using body onload="" and it worked fine, I know this probably sounds like an uber newby question but i've been searched for the last hour or so and nothing is working.
<script src="js/main.js" type="text/javascript">cookiefix();</script>
I've also tried linking to the source document, didn't work either..
huge thanks to anyone who has a moment
EDIT: If this isn't possible, is there an alternative to 'onload' for anything but ? I was having header issues with cookies and calling it from onload
Try to attach an onload event listener to the <script> tag.
Such as:
<script src="js/main.js" type="text/javascript" onload="cookiefix();"></script>
cookiefix() will be fired once the script has been successfully loaded.
Separate them, order is important:
<script src="js/main.js" type="text/javascript"></script>
<script type="text/javascript">cookiefix();</script>
Add to seperate JS file and include in page.
JS:
(function(){
window.onload = cookiefix;
})();

Works in jsfiddle but it wont work in dreamweaver

I have read that I have to put back in the event handler for it to work in dreamweaver from JS Fiddle, I have put it back in and I it still wont work? Here is the Demo: http://jsfiddle.net/EfLJJ/6/
Here is my JS Code:
$(document).ready(function() {
$(".list .fs1").bind({
mouseenter:function(){
$(".sublist").show();
},
mouseleave: function(){
$(".sublist").hide();
}
});
});
Add the jQuery library to your script.
Put this code inside the <head> tags of your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
In your html code inside head put this line of code in order to include the jQuery library:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
Otherwise will not be able to use it.
In jsfiddle this works in a different way.
Also, if you're using jQuery version 1.7 and above, I'd recommend you switch from using ".bind()" to ".on()" for as ".on()" is the preferred method according to the jquery website. Check out the difference between ".bind()", ".on()" and ".live()" for more info here, What's the difference between `on` and `live` or `bind`?
Problem solved! To get it running in Dreamweaver you have to use the Javascript Script Tags
Javascript:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* Your Code Here */
</script>

jquery show/hide not working on wordpress

I have a site i'm working on http://trueproperty.org/ and on the front page i have two divs, one is #excerpt and the other is #content. #content is filled using
<?php the_excerpt(); ?> <button id="readmore">Continue Reading...</button>
and #excerpt is filled using
<?php the_content(); ?> .
content is set to display:none. now i use this code to display #content and hide #excerpt when the user clicks continue reading, it works in jsbin, but not on the actual site, and i cant figure it out :/.
<script type="text/javascript">
$(document).ready(function(){
$("#readmore").click(function(){
$('#content').show('slow');
$('#excerpt').hide('fast');
});
});
</script>
It doesn't seem like you reference the Jquery library before you actually use the jQuery object. Try placing the code after the:
<script type='text/javascript' src='http://trueproperty.org/wp-includes/js/jquery/jquery.js?ver=1.7.1' />
You are loading two files that uses $ as alias ..
The following works:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#readmore").click(function(){
jQuery('#content').show('slow');
jQuery('#excerpt').hide('fast');
});
});
</script>
But it would be better to look for the conflict issue and use jQuery.noConflict
Place this code at the end of Head tag.
<script type="text/javascript">
$(document).ready(function(){
$("#readmore").click(function(){
$('#content').show('slow');
$('#excerpt').hide('fast');
});
});
</script>

I can't get the jQuery datepicker to show on my page after loading with AJAX

My main page is index.php. I'm loading a section of the page with AJAX and I would like to also load a datepicker in the same section I got all relevant JS:
<script type="text/javascript" src="javascripts/jquery/jquery.js"></script>
<script type="text/javascript" src="javascripts/datepicker/jquery.datePicker.js"></script>
<script type="text/javascript" src="javascripts/datepicker/date.js"></script>
I hope i'm not missing anything, the CSS is copied into my main css file.
and here's how the ajax looks like, at least the callback part:
xmlhttp12.onreadystatechange=function() {
if (xmlhttp12.readyState == 4) {
if(document.getElementById("corpcrm").innerHTML=raspuns[0]){
$(function()
{
$('#datepicker')
.datePicker({inline:true})
});
Now i know there aren't any problems with the the rest of the code as i've been using the very same thing for a while now, somehow I can't get the jQuery part right.
i tried adding a div directly to index.html and adding
<script type="text/javascript">
$(document).ready(function(){
$("#test").datepicker();
});
</script>
in the head. Firebug finds an error related to it that says
$('#test').datepicker() is not a function
The problem is now solved. I wasn't loading jquery-ui properly, was missing a > at the end of a script, thanks for the help guys.

Categories

Resources