close ad
WARNING PC USERS: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

AJAX image resizing

Thread began 7/18/2014 10:07 am by Christopher West | Last modified 7/18/2014 10:42 am by Christopher West | 486 views | 3 replies

Christopher WestCommunity Expert

AJAX image resizing

Hi I got an issue, Previously I got paid premiere support to get an AJAX image resizing to work, however its not quite working how I intended.

The resizing works (to he extent that it saves via the AJAX request etc. but for client usability, I need to it tweaked.

The image has an outer border so that the my client mouse-holds on the bottom right they can drag and resize, however because the outer border is associated with the outer DIV it means if the client resizes smaller than the actual image then the bottom side and the right side of the border disappears under the actual image..(even though the resize does work). I just want to tweak it so that its clearer for my client when resizes images so they can judge better. I understand why the bottom and right sides of the border disappear because they are associates with the outer div container. One solution I had would be to create width/height of 100% or the image class...however on page refresh the image is displayed at its native width and height (when doing the AJAX width/height resize its saving those values to the database and Im using those values on my main homepage - which is fine) but in the admin editor because im using 100% for width and height its obviously taking the values from the actual image file stored on my server. So I kinda got a catch 22 situation.

Heres my CSS code:

.assetwrap {
cursor: move;
border: 1px dashed #D3D3D3;


}
.asset-text {
cursor: move;
}
.editImg {


}



heres my html code:

html:
<div class="assetwrap">

<span class="asset-delete" style="display:none" ><a href="../../account.php?Access=asset-delete&AssetID=<?php echo $row_rsAssets['AssetID']; ?>"><img src="../../images/template/delete.png" width="16" height="16" alt="" /></a></span><span class="asset-edit" style="display:none"><a href="../../account.php?Access=asset-image-update&AssetID=<?php echo $row_rsAssets['AssetID']; ?>"><img src="../../images/template/pencil.png" width="16" height="16" alt="" /></a></span>
<img class="editImg" src="../../images/slides/<?php echo $row_rsAssets['Content']; ?>" width="<?php echo $row_rsAssets['img-width']; ?>" height="<?php echo $row_rsAssets['img-height']; ?>"/></div>




and heres the AJAX code:

$( ".assetwrap" ).resizable({
stop: function(event, ui) {
var endW = $(this).outerWidth();
var endH = $(this).outerHeight();

$(this).find(".editImg").prop("width",endW);
$(this).find(".editImg").prop("height",endH);

var links = $(this).find("a");
var href = (links[0].href);
var aid = href.substring(href.lastIndexOf("=")+1);
$.ajax({
url:"admin/slides/slide-update-size-asset.php?aid="+aid+"&img-width="+endW+"&img-height="+endH
});
}
});





I have tried a different approach.....but still now joy.......

.assetwrap {
cursor: move;
border: 1px dashed #D3D3D3;
position: absolute;
}
.asset-text {
cursor: move;
}
.editImg {
position: relative;
height: 100%;
width: 100%;
}






html:
<div class="assetwrap" style="width=<?php echo $row_rsAssets['img-width']; ?>px; height=<?php echo $row_rsAssets['img-height']; ?>px">

<span class="asset-delete" style="display:none" ><a href="../../account.php?Access=asset-delete&AssetID=<?php echo $row_rsAssets['AssetID']; ?>"><img src="../../images/template/delete.png" width="16" height="16" alt="" /></a></span><span class="asset-edit" style="display:none"><a href="../../account.php?Access=asset-image-update&AssetID=<?php echo $row_rsAssets['AssetID']; ?>"><img src="../../images/template/pencil.png" width="16" height="16" alt="" /></a></span>
<img class="editImg" src="../../images/slides/<?php echo $row_rsAssets['Content']; ?>" width="100%" height="100%"/></div>

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...