<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/library/js/pixastic.custom.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".attachment-thumbnail").load();
$('.attachment-thumbnail').pixastic("desaturate");
});
</script>
</head>
<body>
<img class="attachment-thumbnail" src="image1.jpg"/>
</body>
</html>
I've been working on this for almost a day and can't even get close. You can see the thumbnail images that doesn't become desaturated here
Any help will be greatly appreciated.
You've got a JS error on line 40:
TypeError: Property '$' of object [object DOMWindow] is not a function
Line 40 is:
$(".attachment-thumbnail").load();
It seems that you have troubles with jQuery (jQuery functions don't work in Chrome debugger)
you dont have jquery core loaded dude :-)
you need to add
<script type="text/javascript" src="jquery.js ...
just before adding the pixastic
Related
This question already has answers here:
Uncaught ReferenceError: $ is not defined?
(40 answers)
How to fix '$' was used before it was defined in both jslint and jshint using coding?
(2 answers)
Closed 8 years ago.
This is my first time trying to use JQuery and I was trying to add an event when the document is ready, but every time it says:
"$ was used before defined".
I don't know how to solve it. I tried different solutions on the internet but couldn't find any. Don't really know what I am doing wrong.
I referenced the HTML file to the js file like this
<!DOCTYPE html>
<html>
<head>
<title>Experimenting with Javascript</title>
<script type="text/javascript" src="script.js"></script>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
and this is my script
$(document).ready(function () {
"use strict";
$('div').mouseenter(function () {
$(this).animate({
height: '+=10px'
});
});
});
Reference the JQuery library in your page, like this
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
Include this tag above the script tag of your js file
Add JQuery library (http://jquery.com/)
Adding a event on every div in your app - rethink this. Add a class or something, and add it to a single element container, or a body, but don't add it to most common element.
You should organize your HTML DOM like that :
<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Experimenting with Javascript</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
</body>
1.You should call Jquery library before calling your project JS file's.
The problem here is that you are using jQuery without actually including that library of code in your HTML file.
<!DOCTYPE html>
<html>
<head>
<title>Experimenting with Javascript</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
Just to clarify, jQuery is a library that acts on top of JavaScript so you would need to include that library above your own scripts that use it.
NOTE: It is best practice to include your scripts just before your closing body tags.
I am trying to build my personal website using express and want to put a datepicker on one of the page.
I tried to change the ejs file of this page, however, nothing works.
I am wondering if it is because that the layout.ejs file exists, and wondering how can I just load jquery-ui in only of the ejs.file? Because I cannot find any related npm to install . Many thanks for answering！XD
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
</head>
<body>
<script>
$(function() {
$( "#datepick" ).datepicker();
});
</script>
<aside class="widget">
<p>Date: <input type="text" id="datepick"></p>
</aside>
</body>
</html>
There is another similar question, but I think the answer does not works for me.
node.js - DatePicker jquery UI not workinng
When I just use Express and change the index.ejs like the following, it works , but when there are many pages, it seems that it cannot be loaded...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
$(function() {
$('#datepick').datepicker();
});
</script>
</head>
<body>
<aside class="widget">
<p>Date: <input type="text" id="datepick"></p>
</aside>
</body>
</html>
node.js - DatePicker jquery UI not workinng
For whom run into the same problem, this is the reference.
I finally found the answer by checking the code.I was unable to load JQuery for in the layout.ejs, I retyped the following in order to load the bootstrap, but actually by using https://npmjs.org/package/twitter-bootstrap-node twitter-bootstrap-node, there is no-need to load the javascripts again. This may be a common problems for beginners in Node.JS like me.Hope this answer can be helpful to people who run into the same problem and the code is in the answer of the related problem.
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/bootstrap.js"></script>
<script src="/vendor/twitter/less/bootstrap.less"></script>
Hi look at this jsfiddle link http://jsfiddle.net/w7PHj/
you need to use like this....
$('#datepick').datepicker();
Okay so I'm wrapping up a my website and I'm having issue with FireFox and Chrome. The issue is the same for both browsers so I'm guessing it's an easy fix and I'm just being dumb.
So I'm using bgStretcher from ajaxblender.com. Everything works wonderfully on IE9 but when I load the site on FireFox and Chrome, bgStretcher is either not loading or not loading correctly. The background does not function as the background and the divs are pushed to the bottom and moved all out of whack. The HTML code is as follows:
<script type="text/javascript">
$(document).ready(function(){
// Initialize Backgound Stretcher
$('body').bgStretcher({
images: ['images/gervais_street.jpg'],
imageWidth: 1024,
imageHeight: 720,
});
});
When I comment this section out, the divs function correctly but obviously there is no background. Can anyone see anything with this that is wrong?
Here is the code for the page:
<!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>gg web design</title>
<link rel="stylesheet" type="text/css" href="css/bgstretcher.css" />
<link rel="stylesheet" type="text/css" href="css/gg.css" />
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/bgstretcher.js"></script>
</head>
<body>
<!-- from ajaxblender.com -->
<script type="text/javascript">
$(document).ready(function(){
// Initialize Backgound Stretcher
$('body').bgStretcher({
images: ['images/gervais_street.jpg'],
imageWidth: 1024,
imageHeight: 720,
});
});
</script>
<!-- end ajaxblender.com script -->
<script src="js/create_menu.js"></script>
<script>
create_menu();
</script>
<div id="content">
<center>
welcome to G<span class="mirror">G</span> web design.
</center>
</div>
<div id="picture_credit">
gervais street bridge - photo by steve moore
</div>
<script src="js/create_footer.js"></script>
<script>
create_footer();
</script>
</body>
</html>
I know I'm probably doing something stupid so be gentle. Thanks everyone!
First thing I would try is swapping the order that you're loading the css. Put the bgstretcher.css call last instead of first.
Another thing to consider is using background-size:cover for modern browsers. You could put the bgstretcher calls(both js and css) in an IE conditional statement to handle the background for IE.
Here's a good link on the topic...
Try selecting document instead of body
$('document').bgStretcher({
images: ['images/gervais_street.jpg'],
imageWidth: 1024,
imageHeight: 720
});
I am getting no date picker in my web page but in fiddle it is coming, what i am missing?
http://jsfiddle.net/cBwEK/
It is coming fine in fiddle but i am getting nothing in my web page. I
have written below scripts
The whole source code is here: http://www.monkeyphysics.com/mootools/script/2/datepicker
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript" src="datepicker.js"></script>
<script type="text/javascript" src="mootools-yui-compressed.js"></script>
<script type="text/css" src="datepicker.css"></script>
<script type="text/javascript">
new DatePicker('.picker', {
pickerClass: 'datepicker ',
allowEmpty: true
});
</script>
</head>
<body>
<label>Datepicker starting at and allowing no value:</label>
<input name='date_allow_empty' type='text' value='' class='date picker' />
</body>
</html>
You need to run your JavaScript code after the relevant elements exist in the DOM. Just move the script to the end of the page. Also, if the date picker script relies on MooTools, you need to put the datepicker include after the MooTools include. E.g.:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<!-- FIRST CHANGE HERE, swapping the order of the script elements -->
<script type="text/javascript" src="mootools-yui-compressed.js"></script>
<script type="text/javascript" src="datepicker.js"></script>
<link type="text/css" rel="stylesheet" href="datepicker.css">
</head>
<body>
<label>Datepicker starting at and allowing no value:</label>
<input name='date_allow_empty' type='text' value='' class='date picker' />
<!-- SECOND CHANGE HERE, moving your script to *after* the elements it operates on -->
<script type="text/javascript">
new DatePicker('.picker', {
pickerClass: 'datepicker ',
allowEmpty: true
});
</script>
</body>
</html>
Live copy | source
There I've just moved your script, but you might move all the scripts down there as the YUI people suggest.
The reason it works in jsFiddle is that you have the fiddle set to load the JavaScript code from the onload event, which happens very late in the process; the DOM elements are there by then.
Try to load the the DatePicker Initialization after the page load.
A good programmer always use View Source
If you would have seen Fiddle you would see:
<script type='text/javascript'>
window.addEvent('load', function() {
new DatePicker('.picker', {
pickerClass: 'datepicker ',
allowEmpty: true
});
});
</script>
That's because the HTML elements are not loaded and your scripts don't see them.
I am trying to get a date picker working and I am really struggling with my limited javascript knowledge. I have been basing this on this tutorial.
I have the following code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/date.js"></script>
<script type="text/javascript" src="scripts/jquery.datePicker.js"></script>
<script type="text/javascript" charset="utf-8">
$(function()
{
$('.date-pick').datePicker().val(new Date().asString()).trigger('change');
});
</script>
...
<input name="oDate" id="oDate" class="date-pick" />
Any suggestions would be very much appreciated.
i would suggest you take a look at the regular jquery ui datepicker to get a standard out of the box datepicker working. Start by simply using the exact code you see here and then tweak (step by step) as necessary. There are tons of example for all different use cases and good documentation
I have tried below configuration and it's working fine on my local host -
Browser Tested - Mozilla Firefox version 3.6.10
I have xampp package installed.
I am including the html file that i have used for testing -
<!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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="date.js"></script>
<script type="text/javascript" src="jquery.datePicker.js"></script>
<LINK REL=StyleSheet HREF="datePicker.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript" charset="utf-8">
$(function()
{
$('.date-pick').datePicker().val(new Date().asString()).trigger('change');
//$('.date-pick').dpSetEndDate('01/01/2010');
});
</script>
</head>
<body>
<input name="oDate" id="oDate" class="date-pick" />
</body>
</html>
I hope you have an input tag like so in your HTML body:
<input name="date" id="date" class="date-pick" />
Please check if browser java script is turned off