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

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

AJAX image resizing

Thread began 7/18/2014 10:07 am by Christopher West | Last modified 7/18/2014 10:42 am by Jason Byrnes | 512 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>
Sign in to reply to this post

Jason ByrnesWebAssist

Sorry, I Don't follow.

Please provide more details on what it is you want.

you say:
I just want to tweak it so that its clearer for my client when resizes images so they can judge better.

I Dont understand what that means, what specifically do you want to have tweaked?

Sign in to reply to this post

Christopher WestCommunity Expert

Jason, sorry I got it working just now....the bottom code I posted works...except in my inline css I used an = rather than a : lol

To clarify though what I initially meant (this was originally a jquery animated banner that has layers of either text or images that are on top of a background image). I wanted to give the client flexabilty on creating thier own banners so they upload images or add text to the banner), then I wanted to give them the flexability of resizing or changing the position of the image using AJAX (rather than the client having to enter in X,Y coordinates manually), So Ray helped me with some nice AJAX that uses JQuery.Draggable and JQuery.Resize to do this all successfully. However what I meant by tweaking it for the client so that its clearer, is that when resizing the image you dont see the image being resized in "realtime" you only see the before and after shot (when resizing you only see the resize dotted border...but because that dotted border disappears under the image...it then becomes a little messy for the client to judge resizing properly. (If you saw it in action you will understand what I meant). but anyway the latest code update I did fixed the issue and it now all works perfectly :)

Sign in to reply to this post

Jason ByrnesWebAssist

Ok, glad to hear you have it working.

Sign in to reply to this post

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...