Crop rectangle not visible - javascript

I am using the following code to crop: http://www.mikesdotnetting.com/Article/95/Upload-and-Crop-Images-with-jQuery-JCrop-and-ASP.NET
The first part works alright. However, before doing the actual crop, I am unable to see the select rectangle.
Here are the script tags:
<script src="jquery-1-7.js" type="text/javascript"></script>
<script src="jquery.Jcrop.min.js" type="text/javascript"></script>
<script src="jquery.color.js" type="text/javascript"></script>
<script src="jcrop_main.js" type="text/javascript"></script>
<script src="jquery.Jcrop.js" type="text/javascript"></script>
<script src="jquery.min.js" type="text/javascript"></script>
<link href="jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#imgCrop').Jcrop({
onSelect: storeCoords
});
});
function storeCoords(c) {
jQuery('#X').val(c.x);
jQuery('#Y').val(c.y);
jQuery('#W').val(c.w);
jQuery('#H').val(c.h);
};
</script>

You seem to be loading multiple versions of JQuery itself, and the plugin, which is possibly causing problems. Does the browser show any javascript errors?

Related

BlockUI - TypeError: $.blockUI is not a function

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.

Jquery conflict issue

I am using many js file in my header file as shown below
<script src="{$BASE_URL}js/jquery.form.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/cmxforms.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery.metadata.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery.validate.min.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/functions.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery-1.10.1.min.js" type="text/javascript"> </script>
<script type="text/javascript" src="{$BASE_URL}js/jquery-ui.min.js" > </script>
<script type="text/javascript" src="{$BASE_URL}js/timepicker/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="{$BASE_URL}js/jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="{$BASE_URL}js/jspatch.js"></script>
<script src="{$BASE_URL}js/script.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript">
I am getting error as below.
$(...).live is not a function in
$("#reset").live('click',function(){
findproject (line 925)
SyntaxError: syntax error
<script type="text/javascript">//<![CDATA
$(...).validate is not a function
So, what the issue. I am not getting exact way. validation functality is not working
You need to put core jquery lib at the top as this is required to resolve dependencies of other jquery library-
<!-- This must be first library to inlcude-->
<script src="{$BASE_URL}js/jquery-1.10.1.min.js" type="text/javascript"> </script>
<script src="{$BASE_URL}js/jquery.form.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/cmxforms.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery.metadata.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery.validate.min.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/functions.js" type="text/javascript"></script>
<script type="text/javascript" src="{$BASE_URL}js/jquery-ui.min.js" > </script>
<script type="text/javascript" src="{$BASE_URL}js/timepicker/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="{$BASE_URL}js/jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="{$BASE_URL}js/jspatch.js"></script>
<script src="{$BASE_URL}js/script.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript">
Also .live() is not available with this version, you should use .on()
Instead of using .live() use .on() because .live() is deprecated since Jquery 1.7 and removed after Jquery 1.9+ versions and try reordering your Jquery file as shown :-
<!-- This must be first library to inlcude-->
<script src="{$BASE_URL}js/jquery-1.10.1.min.js" type="text/javascript"> </script>
<script src="{$BASE_URL}js/jquery.form.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/cmxforms.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery.metadata.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery.validate.min.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/functions.js" type="text/javascript"></script>
<script type="text/javascript" src="{$BASE_URL}js/jquery-ui.min.js" > </script>
<script type="text/javascript" src="{$BASE_URL}js/timepicker/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="{$BASE_URL}js/jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="{$BASE_URL}js/jspatch.js"></script>
<script src="{$BASE_URL}js/script.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
Use on instead of live:
$("#reset").on('click', function () {
// ...
});
Firstly, you need to include jquery.js first in the page, as other script will rely on it:
<script src="{$BASE_URL}js/jquery-1.10.1.min.js" type="text/javascript"></script> <!-- < First -->
<script src="{$BASE_URL}js/jquery.form.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/cmxforms.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery.metadata.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/jquery.validate.min.js" type="text/javascript"></script>
<script src="{$BASE_URL}js/functions.js" type="text/javascript"></script>
Secondly, live has been removed from the latest versions of jQuery. You need to use the delegated version of on() instead.

Datepicker and Image Slider conflict

Could you please help me sort the issue out.
After inserting datepicker code, now my imageslider does not appear. All i see is a white space.
I think some javascripts are conflicting ?
But cannot find out which one.
Please help me.
<script type="text/javascript" src="js/jquery.min.js" ></script>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" />
<script type="text/javascript" src="jquery.1.4.2.js"></script>
<script type="text/javascript" src="jsDatePick.jquery.min.1.3.js"></script>
<script type="text/javascript">
window.onload = function(){
new JsDatePick({
useMode:2,
target:"inputField",
dateFormat:"%d-%M-%Y"
});
new JsDatePick({
useMode:2,
target:"inputField2",
dateFormat:"%d-%M-%Y"
});
};
</script>
<script src="js/jquery.jcarousel.min.js"></script>
<script src="layerslider/jQuery/jquery-easing-1.3.js" type="text/javascript"></script>
<script src="layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#layerslider').layerSlider({
skinsPath : 'layerslider/skins/',
skin : 'florida',
navStartStop : false,
thumbnailNavigation : 'hover',
hoverPrevNext : true,
responsive : true,
responsiveUnder : 1200,
thumbnailNavigation : false,
sublayerContainer : 1200
});
});
</script>
<script type="text/javascript" src="js/doubletaptogo.js" ></script>
<script defer src="js/jquery.flexslider-min.js"></script>
First of all, write some neat code and check it.
script type="text/javascript" src="js/doubletaptogo.js" ></script>
Should be:
<script type="text/javascript" src="js/doubletaptogo.js" ></script>
Then, when i look at your HTML, it looks like you are loading jQuery twice? And always load your stylesheets first, you can read this topic why: Is the recommendation to include CSS before JavaScript invalid?
Also, check if the plugins you are using, are compatible with jQuery 1.4.2 it is possible they are using some things that jQuery 1.4.2 doesn't offer.

Jquery TypeError - "$(...).whatever is not a function" when loading two libraries

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.

Adding multiple js files in the header

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

Categories