jCrop not working in Sharepoint webpart or app page
Question
Hello im having problems migrating my project i made in asp.net with jquery 1.4.3 and jcrop, into the sharepoint environment. It works perfectly even in IE.
This is my scriptcode:
<link href="Scripts/jquery.Jcrop.css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/jquery-1.4.3.js"></script>
<script type="text/javascript" src="Scripts/jquery.Jcrop.js"></script>
<script type="text/javascript" defer='defer'>
jQuery(window).load(function () {
var jcrop_obj;
jQuery('#imgCrop').Jcrop({
onSelect: storeCoords,
aspectRatio: 1 / 1
}, function () { jcrop_obj = this; });
});
function storeCoords(c) {
jQuery('#X').val(c.x);
jQuery('#Y').val(c.y);
jQuery('#W').val(c.w);
jQuery('#H').val(c.h);
};
</script>
This is the elements i use exactly the same as i use in my solution outside sharepoint that works.
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="pnlUpload" runat="server">
<asp:FileUpload ID="Upload" runat="server" />
<br />
<asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="Upload" />
<asp:Label ID="lblError" runat="server" Visible="false" />
</asp:Panel>
<asp:Panel ID="pnlCrop" runat="server" Visible="false" Width="956px">
<asp:Image ID="imgCrop" runat="server" />
<br />
<asp:HiddenField ID="X" runat="server" />
<asp:HiddenField ID="Y" runat="server" />
<asp:HiddenField ID="W" runat="server" />
<asp:HiddenField ID="H" runat="server" />
<asp:Button ID="btnCrop" runat="server" Text="Crop" OnClick="btnCrop_Click" />
</asp:Panel>
<asp:Panel ID="pnlCropped" runat="server" Visible="false">
<asp:Label ID="Label1" runat="server" Text="Here is your cropped picture:"></asp:Label>
<br />
<asp:Image ID="imgCropped" runat="server" />
</asp:Panel>
</div>
</form>
</body>
Of course i also have the right elements for it and so on, since it works when running it without sharepoint. When i debug my code, both the jquery and the jcrop is loaded properly, and when i run through the code and breakpoint where i call the .Jcrop method, it actually goes into the jcrop file and runs through it with no errors, however when it is done running there is no jcrop stuff on my picture. i tried in both firefox and internet explorer.
I don't see any reason to include any serverside code since thats not the problem whatsoever. My question is really, is there something i have to take into concern when running it through an application page in sharepoint.
Thanks in advance!
1 answers
solution1
0 2013-07-30 20:44:44
Well I'm assuming this is on an ASPX webpart page or in a webpart solution.
SP 2007 has 7K lines of CSS code, SP 2010 has 13K lines of CSS code.
Your CSS may be conflicting with SharePoint's. Try using strong names and see if it behaves correctly.
Also, wrap your HTML code in a table. This helps from not inheriting most core CSS styles.
<table><tr><td>
ASPX html here
</td></tr></table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.