jQuery Function placement - javascript

Ok, so I recently started learning jQuery, but I'm having trouble with a little animation program I got off of the jQuery website.
So here is the problem. This program works:
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jQuery-1.7.1.min.js"></script>
<STYLE type="text/css">
#content {
background-color:#6688ff;
position:absolute;
width:100px;
height:100px;
padding:3px;
margin-top:5px;
left: 100px;
}
</STYLE>
</HEAD>
<BODY>
<input type="button" id="left" value="Left"/>
<input type="button" id="right" value="Right"/>
<div id="content">Move</div>
<script type="text/javascript">
$("#right").click(function() {
$("#content").animate(
{"left": "+=50px"},
"slow");
});
$("#left").click(function() {
$("#content").animate(
{"left": "-=50px"},
"slow");
});
</script>
</BODY>
</HTML>
But this program doesn't:
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jQuery-1.7.1.min.js"></script>
<script type="text/javascript">
$("#right").click(function() {
$("#content").animate(
{"left": "+=50px"},
"slow");
});
$("#left").click(function() {
$("#content").animate(
{"left": "-=50px"},
"slow");
});
</script>
<STYLE type="text/css">
#content {
background-color:#6688ff;
position:absolute;
width:100px;
height:100px;
padding:3px;
margin-top:5px;
left: 100px;
}
</STYLE>
</HEAD>
<BODY>
<input type="button" id="left" value="Left"/>
<input type="button" id="right" value="Right"/>
<div id="content">Move</div>
</BODY>
</HTML>
The only difference between the two programs is where I put the javscript, so could anyone explain me why that makes a difference? Thanks, cause that is confusing me.

The document isn't ready when the second jQuery code chunk runs, so it doesn't work.
Always wrap your jQuery code in a $(document).ready() statement:
$(document).ready() {
$("#right").click(function() {
$("#content").animate({"left": "+=50px"}, "slow");
});
$("#left").click(function() {
$("#content").animate({"left": "-=50px"}, "slow");
});
});
Your second code chunk is correct.

The browser load/parse/render html and javascript from top to bottom, the one doesn't work as you put it before those html elements and when it runs it can't found those html tags, use jQuery ready can avoid this: http://api.jquery.com/ready/

the css should come before any javascript so that the document has all the elements preloaded.

The second code block refers to #right before right is even declared.

Related

Using JFiddle to create web page

I'm trying to understand how to convert the following JFiddle example into a single html web page: http://jsfiddle.net/zqa511e9/
What am doing wrong? Both the style and javascript code are not being reflected in the form. Any help will be appreciated.
<!DOCTYPE html>
<html>
<head>
<title>Expandable Text Area</title>
<style>
textarea {
width: 200px;
height:15px;
line-height:15px;
min-width: 200px;
max-width: 300px;
transition: width 0.25s;
resize:none;
overflow:hidden;
}
</style>
<script>
$('textarea').on('keydown', function(e){
if(e.which == 13) {e.preventDefault();}
}).on('input', function(){
$(this).height(1);
var totalHeight = $(this).prop('scrollHeight') -
parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom'));
$(this).height(totalHeight);
});
</script>
</head>
<body>
<textarea placeholder="Autosize" data-autosize-input='{ "space": 40 }'>
</textarea>
</body>
</html>
Updated Code.
You Need to do two things.
1. SImport Jquery Library.
2. Write on load in javascript block.
Try This
<title>Expandable Text Area</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<style>
textarea {
width: 200px;
height:15px;
line-height:15px;
min-width: 200px;
max-width: 300px;
transition: width 0.25s;
resize:none;
overflow:hidden;
}
</style>
<script>
$(document).ready(function() {
$('textarea').on('keydown', function(e){
if(e.which == 13) {e.preventDefault();}
}).on('input', function(){
$(this).height(1);
var totalHeight = $(this).prop('scrollHeight') -
parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom'));
$(this).height(totalHeight);
});
});
</script>
</head>
<body>
<textarea placeholder="Autosize" data-autosize-input='{ "space": 40 }'>
</textarea>
</body>
</html>
For one you are using jQuery, but there is no link to jQuery in your html. Jfiddle has it automatically applied I think.
Grab a jQuery CDN and place it in the head tag like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
You need external resources: jquery and jquery.autosize.input.js
In your html put this code between the head tag
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.20/autosize.min.js"></script>
</head>

Placement of absolutely positioned elements incorrect when printing

I am currently facing a strange problem (well, most probably I am simply not aware of something important here).
I have the following html snippet
<div id="test">
Hallo Welt
</div>
And the following javascript snippet:
<script type="text/javascript">
$(function () {
$('#test').offset({
position: 'absolute',
width: '100px',
left: ($('body').width() - $('#test').width()) / 2.0
})
});
</script>
This should render the test div horizontally centered which works perfectly fine within the browser. When I try to print this page however, the element shows up on the right corner of the printed page and not in the middle.
I thought maybe theres something wrong about using pixels for positioning elements for printing so I tried other measures like em:
<script type="text/javascript">
$(function () {
$('body, #test').css({ 'font-size': '12px' });
$('#test').css({
left: (($('body').width() - $('#test').width() ) / 24.0) + 'em'
})
});
</script>
But unfortunately the result is all the same, no matter what browser I try...
What am I missing here?
#
In response to Adrian I made a sample as simple as possible to extract the problem reproducable for everyone.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function () {
$('#test').css({
background:'red',
position: 'absolute',
width: '100px',
left: ($('body').width() - 100) / 2.0
});
});
</script>
</head>
<body>
<div id="test">
Lord
</div>
</body>
</html>
I also observed that the position of #test within the printed document is dependant on the size of the browser window at the time of printing.
I am actually working with media queries as well in my real project. I was trying to convey an extremely simply sample as a showcase for the problem.
This is also interesting and the root of the evil in my opinion. Even though the printer uses its 100px from the print media query, its executed javascript returns that the test div ist still 100% which is just wrong in my opinion!!!
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function () {
$('#test').text($('#test').width());
});
</script>
<style type="text/css">
#test {
width: 100%;
border: 1px solid black;
}
#media print {
#test {
width: 100px;
}
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
EDIT: Newer Solution with js only...
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function () {
$('#test').css({
background:'red',
position: 'absolute',
width: '100px',
left: '50%',
marginLeft: '-50px'
});
});
</script>
</head>
<body>
<div id="test">
Lord
</div>
</body>
</html>
CSS solution
In this situation I would use CSS #media print {} to target printing.
Im assuming you have a reason for using javascript to build your CSS but if not I would recommend coding this in a totally different way. This shouldnt require javascript, nor should it require an absolute position.
Anyway , solution below...
<html>
<head>
<style>
#media print {
#test {
left:50% !important;
margin-left:-50px;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function () {
$('#test').css({
background:'red',
position: 'absolute',
width: '100px',
left: ($('body').width() - 100) / 2.0
});
});
</script>
</head>
<body>
<div id="test">
Lord
</div>
</body>
</html>

jQuery increase and decrease value on scrolling

I just want the value to increase when scrolling down and decrease when scrolling up.
This is the HTML:
<html>
<head>
<script src="/jquery.min.js"></script>
<script src="9.js"></script>
<style>
#addit
{
position:fixed;
top:0px;
left:0px;
}
</style>
</head>
<body>
<div id="addit">
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br>
</body>
</html>
Here is the jQuery code:
$(window).scroll(function(){
var x=1;
x=x+1;
$("#addit").html(x);
});
As I am new to jQuery, I can't find a way for it!
Can anyone help?
You don't need a variable, just:
$(window).scroll(function(){
$("#addit").html($(window).scrollTop());
});
DEMO
Please try this:
$(window).scroll(function() {
$("#addit").html($(window).scrollTop());
});

show div on click with Jquery

I want to show the div with id #flower when clicking on the link with id #button but it doesnt work. Heres is the code i wrote.. i made also a jsbin page to show you
any suggestions?
http://jsbin.com/xefanaji/3/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="front">
<div><p>Button</p></div>
</div>
<div id="flower">
<img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});
});
</script>
</body>
</html>
css
#button{
position:relative;
height:30px;
width:60px;
background-color:lightyellow;
left:40px;
top:40px;
}
#flower{
display:none;
position:relative;
top:-600px;
left:50px;
z-index:0;
}
#front {
z-index:1;
position:relative;
top:100px;
height:600px;
width:100%;
background-color:lightblue;
}
if i am not wrong.. you need to add id to your button ,if (<a ..>Button</a>) is the element you are talking about.
<div><p>Button</p></div>
//-^^^^^^^^^^----here
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
with CSS you have, i am sure you forget to add id to that a link
well few more thing,
always load script in your <head> section, and you don't need to add src in script tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
..
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
....
....
<script>
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});
});
</script>
Try this
<div id="front">
<div><p><a id="button" href="">Button</a></p></div>
</div>
<div id="flower">
<img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(
function(){
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
});
</script>
DEMO
Put the jQuery library in the head section of your document like below
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
If you need button you can use span instead of anchor e.g.
<span class="button">Button</span>
then add a little styling
.button {
font-size: 12px;
color: #333;
}
.button:hover {
color: #ddd;
}
and then put this script just before </body> tag
<script>
$(function() {
$(".button").click(function () {
$("#flower").show("slow");
});
});
</script>
You could use the revised jQuery below to accomplish this, the reason your code isnt working is because your link doesnt have the id button set.
$('#front a:first').on('click',function(e){
e.preventDefault();
$('#flower').show();
})
You are missing id #button for that link.
<a id="button" href="">Button</a>

Problems with jquery click listener

I'm new to JQuery, and despite reading through the guide several times, I can't find the problem.
The following functions are not getting fired when I click on the button:
function enable(){
alert("Enable Working!");
}
function disable(){
alert("Disable Working!");
}
$("#enable").click(function(){
$("#enable").hide();
});
$("#disable").click(function(){
disable();
});
And the html page. I don't see any mistakes here either
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>popup</title>
<style>
#enable{
color:green;
position:relative;
top:20px;
}
#disable{
color:red;
position:relative;
top:25px;
}
body{
height: 100px;
}
</style>
</head>
<body id="popup">
<input id="enable" type="button" value="Enable">
<br />
<input id="disable" type="button" value="Disable">
<script src="popup.js"></script>
<script src="jquery.js"></script>
</body>
<html>
What I'd like is for the the enable function to run when I click the enable button. I'd like the disable function to run when I click the disable button. The alerts are there to test if it's working.
Load the jQuery file first, change the order of your files:
<script src="jquery.js"></script>
<script src="popup.js"></script>
Maybe something like this:
function enable(){
alert("Enable Working!");
}
function disable(){
alert("Disable Working!");
}
$("#enable").click(enable);
$("#disable").click(disable);
And as someone else mentioned, reverse the script includement:
<script src="jquery.js"></script>
<script src="popup.js"></script>
Your code looks good, just change the code inside the #enable click to run the function:
Demo
$("#enable").click(function(){
enable();
});
$("#disable").click(function(){
disable();
});
If you want to hide the button, putt it inside the function:
function enable(){
alert("Enable Working!");
$("#enable").hide();
}
Add this to load your code when the page loads:
$(document).ready(function(){
//your code
});
The jQuery script file can be loaded from an online source. If you want that the code is <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>. Load it before your other .js files. If the need jQuery.
Change it to this:
function enable(){
alert("Enable Working!");
}
function disable(){
alert("Disable Working!");
}
$(document).ready(function() {
$("#enable").click(function(){
enable();
});
$("#disable").click(function(){
disable();
});
});
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>popup</title>
<style>
#enable{
color:green;
position:relative;
top:20px;
}
#disable{
color:red;
position:relative;
top:25px;
}
body{
height: 100px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
});
function enable(){
alert("Enable Working!");
}
function disable(){
alert("Disable Working!");
}
$("#enable").click(function(){
enable();
});
$("#disable").click(function(){
disable();
});
});
</script>
</head>
<body>
<input id="enable" type="button" value="Enable">
<br />
<input id="disable" type="button" value="Disable">
</body>
</html>

Categories