When I try to make <div id="test">this should go down</div> go down with:
<div onclick="(".test").slideDown(800);">close it</div>
I get this error everytime i click 'close it'
SyntaxError: Unexpected token }
Please let me know, what I'm doing wrong. Thanks :)
Try like this:
<div onclick="$('.test').slideDown(800);">close it</div>
or even better as it seems that you are using jquery:
<div id="close">close it</div>
and in a separate javascript file:
$('#close').click(function() {
$('.test').slideDown(800);
});
See how cleaner this is? You no longer need to mix markup with javascript and have problems as the one you are encountering currently.
Change on of the uses of double quotes (and I'm guessing you're using jQuery so you'll also need to add the $ shortcut (or full jQuery call):
onclick="$('.test').slideDown(800);"
// or
onclick='$(".test").slideDown(800);'
You are using an ID selector for the <div id="test"> but trying to use a class selector to animate the <div> with $(.test) which will never match. However your code is also has bad quotes which is causing the SyntaxError, so to fix everything one of the following should help :-)
HTML:
<div id="closeIt">close it</div>
JavaScript:
$('#closeIt').click(function() {
$('#test').slideDown(800);
});
or Complete example (with separate bound function):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#closeIt').click(function() {
$('#test').slideDown(800);
});
});
</script>
<style type="text/css">
#test {
display:none;
}
</style>
</head>
<body>
<div>
<div id="closeIt">close it</div>
<div id="test">this should go down</div>
</div>
</body>
</html>
or inline onclick (not recommended as this doesn't separate markup from behaviour but it still works)
<div onclick="$('#test').slideDown(800);">close it</div>
Related
I am using a JavaScript editor in www.sololearn.com/Codes/
when I put $ sign for a jQuery it says that $ is undefined.
How can I add a jQuery to my code so it will work but keep the code separated like in the editor: one slot for HTML, another slot for CSS, another for JavaScript.
HTML:
<!DOCTYPE html>
<html>
<head>
<Title>Sum To Coins - Dynamic Programming</Title>
</head>
<body>
<div id="mainScreen">
<p id="instructions">Insert a sum to turn it into coins</p>
<button class='Button' id="btn1">Button</button>
<button class='Button' id="btn2">Button</button>
<button class='Button' id="btn3">Button</button>
<br>
<p id="resultField">The coins are: </p>
<p id="matrixField"> </p>
</div>
<div id="pickCoinsScreen">
<script src="jquery-3.1.1.min.js"></script>
</div>
</body>
CSS:
.Button:active, .active {
background-color:red;
color: white;
}
JavaScript:
$('.Button').click(function(
$(this).toggleClass('active');
e.preventDefault();
});
Firstly, your Javascript code has few errors so i have solved that and also implemented some best practices of using jQuery's "DOMReady" function.
$(function(){
$('.Button').click(function(){
$(this).toggleClass('active');
});
});
within the <head> tag I have inserted the link to google hosted library of jQuery. Now your <head> element contains this code.
<head>
<Title>Sum To Coins - Dynamic Programming</Title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
Side note: I have removed e.preventdefault() because it's not necessary in this case.
I have tested it on solo-learn, it seems its working.
I wanted to animate a div on mouseover.
I just don't know how to make it fade in/appear slowly (I think we have to use the .animate function or something like that)
$("#logo").mouseover(function() { $("#nav").css('visibility','visible'); });
Will appreciate any help :)
$("#logo").mouseover(function() { $("#nav").fadeIn("slow"); });
Make sure your css has style for #nav as display:none;
Reference http://api.jquery.com/fadeIn/
SAMPLE DEMO
Try this:
$("#logo").mouseover(function() {
$("#nav").fadeIn('slow');
});
Refer Site http://api.jquery.com/fadeIn/
You can use the fadeIn/fadeOut methods or the fadeToggle method which automatically fades in or out. Every method allows a duration parameter to set the animation time, but there also many more parameters to modify the fading.
Look at the API for fadeToggle to see the whole functionality (and how to use) :) . (fadeIn API, fadeOut API).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample</title>
<script src="js/jquery-1.7.1.js"></script>
<script>
$(document).ready(function(){
$("#logo").mouseover(function() { $('div:hidden:first').fadeIn('slow', function() {
// Animation complete
alert("complete")
}); });
});
</script>
<style>
#nav{display:none}
</style>
</head>
<body>
<div id="logo">Click Me</div>
<div id="nav" style="background:#CCC">sample</div>
</body>
</html>
USe fadeIn()... try this.
$("#nav").hide();
$("#logo").mouseover(function() { $("#nav").fadeIn(600));
I think I just need a second pair of eyes on this one. The div's onclick event doesn't seem to be working. Any ideas?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title="My First Program"/>
<script type="text/javascript">
window.onload = function(){
window.alert("If you see me then the page has loaded");
click();
}
//we do programming here
/*because
it is
fun*/
window.alert("Helo World!");
function click(){
window.alert("CLICK!!!!");
}
</script>
</head>
<body>
<div>This web page will run my first program</div>
<!--this will be awesome-->
<br>
<br>
<br>
<div id="d1" onclick="click()">Click me</div>
</body>
Also, for the reccord, this is not my first program.
your html is malformed. the title tag needs to look like this:
<title>My First Program</title>
Also, you seem to have a naming conflict because you named your function the same thing as a built-in function. rename your 'click' function to 'myclick' or something else.
Once you fix that, everything else should be good.
When something is going weird, the first thing you should always do is validate your markup.
http://validator.w3.org/check
Here is the complete, working version of the markup.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My First Program</title>
<script type="text/javascript">
window.onload = function(){
window.alert("If you see me then the page has loaded");
click();
}
//we do programming here
/*because
it is
fun*/
window.alert("Helo World!");
function myclick(){
window.alert("CLICK!!!!");
}
</script>
</head>
<body>
<div>This web page will run my first program</div>
<!--this will be awesome-->
<br>
<br>
<br>
<div id="d1" onclick="myclick()">Click me</div>
</body>
Every time I see a question like this anywhere, the typical answer I give is "don't use the Netscape model for event handling".
Give this a read - http://www.quirksmode.org/js/introevents.html
Update: Looks like "click" isn't a very good name for a function, since it's already registered for events and such, which is likely why it didn't work. I should have caught that.
This is what i am trying to do,
<div id="table">
<div id="user"></div>
<div id="user1"></div>
</div>
When i click a button,this happens
$("#body").append("<div id=\"user-wrap\"></div>");
$('#user').appendTo($('#user-wrap'));
$('#user1').appendTo($('#user-wrap'));
$('#user-wrap').appendTo($('#table'));
Then I apply moz-transform on user-wrap. Before I apply another transform, I have to remove this userwrap div. when I append the children of user-wrap to body again and remove the user-wrap. My transforms are not preserved. I solved this problem by storing the value in a separate variable and applying it again after removing. But the problem is when I applied the scale transforms with user-wrap on the two divs actually looked more closer. Now since I removed the user-wrap the individual user divs are apart even though I applied the transforms again. The inter-distance between children are lost.How do I solve this problem?
I am rephrasing the entire thing again, I want to apply transforms to a group of children in div and then remove the div while preserving the scale/rotate and inter-distance value between the children?
I know it is a complex question, help will be appreciated. I am hoping all the javascript samurai's and CSS ninjas could help me out here ;)
Against all odds:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/javascript' src='jquery-1.5.1.min.js'></script>
<script type='text/javascript'>
function screwItUp() {
//EDIT: or if ($('#table div:first-child').attr('id') == 'user')
if ($('#table div:first-child').html() == 'USER') {
$('body').append('<div id=\'userWrap\'>USER-WRAP</div>');
$('#user').css('font-size',Math.floor(Math.random()*42)+'px').appendTo($('#userWrap'));
$('#user1').css('font-size',Math.floor(Math.random()*42)+'px').appendTo($('#userWrap'));
$('#userWrap').appendTo($('#table'));
} else {
$('#user').appendTo($('#table'));
$('#user1').appendTo($('#table'));
$('#userWrap').remove();
}
}
</script>
</head>
<body>
<div id="table">
TABLE
<div id="user">USER</div>
<div id="user1">USER1</div>
</div>
<button onClick='screwItUp(); ' >TOGGLE</button>
</body>
</html>
Sample: http://zequinha-bsb.int-domains.com/togglewrap.html
Assuming I have the following two JQuery functions -
The first, which works:
$("#myLink_931").click(function ()
{
$(".931").toggle();
});
and the second, which doesn't work:
$("#myLink_931").click(function ()
{
var class_name = $(this).attr("id").split('_')[1];
$("."+class_name).toggle();
});
I want to replace the first with the second, which is more generalizable, but can't find any obvious syntactical problem with the second which might be preventing it from working.
My guess is there's a problem with the syntax:
"."+class_name
Is this bad syntax?
They work the same.
Working Demo
This is what debuggers are for. Step through the code and make sure class_name is calculated as you expect. The debugger should let you view the result of "."+class_name as well.
I created a sample page and dropped your example code in and it worked as expected. Perhaps there is another issue on the page? Can you post a link to the actual site?
Here is the code I used:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="scripts/script.js" type="text/javascript"></script>
</head>
<body>
<div id="myLink_931">Click Me</div>
<div class="931">HI</div>
</body>
</html>
and the script file:
(function($) {
$(document).ready(function() {
$("#myLink_931").click(function() {
var class_name = $(this).attr("id").split('_')[1];
$("." + class_name).toggle();
});
});
})(jQuery);
Class names and IDs aren't allowed to start with numbers - doesn't explain why one works and the other doesn't though. Give us a bit more info as above.
Is it possible you're not wrapping your 2nd example in the ready syntax [i.e. $(function(){ })] which would mean that the elements haven't been created in the DOM yet?