I have got this html div
<div id="CropToolDiv"></div>
And this Jquery
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#CropToolDiv').draggable();
$('#CropToolDiv').resizable();
});
</script>
But it gives an error
$(...).draggable is not a function
What am i doing wrong?
Put your code
<script type="text/javascript">
$(document).ready(function() {
$('#CropToolDiv').draggable();
$('#CropToolDiv').resizable();
});
</script>
At the bottom of the page.. See -- It works here
FIDDLE
Related
I'm using jquery blockUI to trigger loading screens. I've used the same script on two other .aspx pages and it worked just fine. However, I added this to my current .aspx page and Firefox/Chrome Console is saying $.blockUI is not a function.
I've already tried changing it to $.fn.blockUI and received the same error. I know there are other similar topics, but I've tried some of those solutions with the same results.
Here is my current aspx page script:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css"
type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://malsup.github.io/jquery.blockUI.js"></script>
<script type="text/javascript">
$(function () {
$('#<%= Submit1.ClientID %>').click(function () {
$.blockUI({ message: $('#loader') });
});
});
</script>
Here is a different aspx page where it works:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css"
type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://malsup.github.io/jquery.blockUI.js"></script>
<script type="text/javascript">
$(function () {
$('#<%= generateView.ClientID %>').click(function () {
$.blockUI({ message: $('#loader') });
});
});
</script>
This is the #loader that is used by both scripts:
<div id="loader" style="display:none">
<img src="Icon/octo.gif"/><h1>Loading...</h1>
</div>
Both scripts are triggered by an asp:Button click, the only obvious differences I see are the Name.ClientID.
Thanks in advance.
Hi so I'm trying to like a javascript file to my web page, when it was in the HTML file it worked fine, but I won't to neaten it up a little by putting the JS in a different file
HTML:
<head>
<meta charset="utf-8" />
<title>Digital Canvas Web Designs</title>
<link rel="stylesheet" href="/CSS/Template.css"/>
<link rel="stylesheet" href="/CSS/news.css"/>
<link rel="shortcut icon" href="images/tablogo.ico" > <!-- tab logo generated at http://www.favicongenerator.com/ -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="Javascript/newshide.js" type="text/javascript"></script>
</head>
<body>
and Javascript:
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function() {
$("#hidden").show();
});
$("#hide").click(function() {
$("#hidden").hide();
});
});
</script>
And the part of HTML where the JS should work.
<span id="show">more>></span>
<p id="hidden" hidden>COOL STORY BRO
<span id="hide">less</span> </p>
wrap all into document.ready
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function() {
$("#hidden").show();
});
$("#hide").click(function() {
$("#hidden").hide();
});
});
</script>
Also: you have another bug, change the last script for:
<script src="Javascript/newshide.js" type="text/javascript"></script>
Docs
Change this
<script src=".\Javascript\newshide.js" type="text/javascript"></script>
To this
<script src="Javascript/newshide.js" type="text/javascript"></script>
I have a problem when I using slider and nivo lightbox together in one php file.
Ok, I have this code:
<script type="text/javascript" src="js/slider/jquerySlider.min.js"></script>
<script type="text/javascript" src="js/slider/jquery.mobile.customized.min.js"></script>
<script type="text/javascript" src="js/slider/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/slider/camera.min.js"></script>
<script>
jQuery(function(){
jQuery('#camera_wrap_1').camera({
thumbnails: false,
loader: 'bar',
pagination: false,
height: '300px',
});
});
</script>
<!--Nivo LightBox-->
<link rel="stylesheet" href="css/nivo-lightbox.css" type="text/css" />
<link rel="stylesheet" href="themes/default/default.css" type="text/css" />
<script type="text/javascript" src="js/nivoLightbox/jquery.min.js"></script>
<script type="text/javascript" src="js/nivoLightbox/nivo-lightbox.min.js"></script>
<script>
$(document).ready(function(){
$('a').nivoLightbox();
});
</script>
Now it's working only Nivo Lightbox, slider doesn't work. If I delete row with
src="js/nivoLightbox/jquery.min.js, slider now working and the lightbox doesn't.
I think that jQuerySlider.min.js is another version of jquery.min.js. In general, all two scripts are some versions of jQuery library. When I both delete and replaced it one, the newest, it still doesn't work.
Please can anyone rewrite this code to working solution?
you can find your solution below..
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/slider/jquery.mobile.customized.min.js"></script>
<script type="text/javascript" src="js/slider/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/slider/camera.min.js"></script>
<!--Nivo LightBox-->
<link rel="stylesheet" href="css/nivo-lightbox.css" type="text/css" />
<link rel="stylesheet" href="themes/default/default.css" type="text/css" />
<script type="text/javascript" src="js/nivoLightbox/nivo-lightbox.min.js"></script>
<script>
$(document).ready(function(){
$('#camera_wrap_1').camera({
thumbnails: false,
loader: 'bar',
pagination: false,
height: '300px',
});
$('a').nivoLightbox();
});
</script>
Please, I need some help with this.
This is the code piece that is failing
<!-- Begin Photofolio library -->
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery-photostack.js"></script>
<script type="text/javascript" src="scripts/jquery-coin-slider.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#portfolioslider').coinslider({
width: 480,
height: 280,
navigation: false,
links: false,
hoverPause: true
});
$("#tabcontainer").tabs({
event: "click"
});
});
</script>
<!-- End Photofolio -->
<!-- Begin REDX -->
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="themes/orman/orman.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
And when I load the page, it shows me this error:
TypeError: $(...).coinslider is not a function
I have tried to use "jQuery" identifier, but it didn't work. I don't know if I did ir right, since I just replaced all "$" with "jQuery" and didn't do more than that.
What is wrong in my code?
Regards
When you use two different versions of jquery (which is not recommended), you can use jQuery.noConflict api.jquery.com/jQuery.noConflict/
I would suggest to check your src="scripts/jquery-coin-slider.min.js" to check what function makes it work. Maybe .coinslider is not inside that js file.
I'm trying to add two different javascript functions to my header:
1) is for a lightbox (see code below) and the
2) is for a local scroll (code below). When I place them both in my header tag, as seen below, one or the other will not work at all--depending on the order in which I place them the tag-- when I go to view my page.
Q: how can I get all these js. files to work when I view my page?
<script type="text/javascript" src="/lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
\\\\and this one below////
<script type="text/javascript" src="/jquery-vertical-scroll/js/jquery.min.js"></script>
<script src="jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$.localScroll.defaults.axis = 'y';
$.localScroll();
});
</script>
You are using prototype w/ jQuery make sure you have jQuery.noConflict(); after your jquery framework script and prototype framework and before you run any main scripts. It is not recommended to use more than one JavaScript framework at the sametime.
<header>
<link rel="stylesheet" href="/lightbox2.04/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/jquery-vertical-scroll/js/jquery.min.js">
</script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src="jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery.localScroll.defaults.axis = 'y';
jQuery.localScroll();
});
</script>
</header>
give this a try