Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added the image resize slider, works cool

  • Loading branch information...
commit 8324314e900b8db9c552078f6b8282b3dc6b1439 1 parent e5560ae
@brendon authored
Showing with 37 additions and 21 deletions.
  1. +23 −19 image_resize_test/index.html
  2. +14 −2 spike_edit.js
View
42 image_resize_test/index.html
@@ -11,31 +11,35 @@
outline: solid 3px gray;
}
</style>
+<script src="../jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
+<script>
+jQuery(function($) {
+
+ var positionX;
+ var startWidth;
+ $("#image").mousedown(function(e) {
+ alert(e.pageX - $(this).offset().left);
+ positionX = (e.clientX);
+ startWidth = $(this).attr("width");
+ $(document).mousemove(function(e) {
+ $("#image").attr("width", (startWidth + (e.clientX - positionX)));
+ });
+ });
+ $(document).mouseup(function() {
+ $(document).unbind("mousemove");
+ positionX = null;
+ startWidth = null;
+ });
+
+});
+</script>
</head>
<body>
<img id="image" src="../demo/spiketall.gif" />
-<script>
-var positionX;
-var startWidth;
-var image = document.getElementById('image');
-document.onmousedown = function(e) {
- if(!e) e = window.event;
- positionX = (e.clientX);
- startWidth = image.width;
- document.onmousemove = function(e) {
- if(!e) e = window.event;
- image.style.width = (startWidth + (e.clientX - positionX)) + 'px';
- }
-}
-document.onmouseup = function() {
- document.onmousemove = null;
- positionX = null;
- startWidth = null;
-}
-</script>
+
</body>
</html>
View
16 spike_edit.js
@@ -4,6 +4,8 @@ jQuery(function($) {
// Loop through all elements with the class .editable and make them editable
// TODO: We might want to limit these elements to div's only
$(".editable").each(function() {
+ var editable_area = $(this);
+
this.contentEditable = true;
$(this).addClass("spikeEditable");
$(this).focus(function() {
@@ -23,12 +25,22 @@ jQuery(function($) {
// Just concentrating on images for now
if ($(this).attr("src"))
{
+ var image = $(this);
+ var image_ratio = image.width() / image.height();
// Updates the property inspector with inputs for this element
$("#spikePropertyInspector").html(
"Source: <input name='src' value='" + $(this).attr("src") + "'>" + "<br>" +
- "Width: <input name='width' value='" + $(this).attr("width") + "'>" + " " +
- "Height: <input name='height' value='" + $(this).attr("height") + "'>"
+ "Width: <input name='width' value='" + $(this).width() + "'>" + " " +
+ "Height: <input name='height' value='" + $(this).height() + "'>" + "<br>" +
+ "Resize: <div id='resize' style='width: 400px;'></div>"
);
+ $("#resize").slider({ max: editable_area.width(), min: 1,
+ value: $(this).width(),
+ slide: function(event, ui) {
+ image.width(ui.value);
+ image.height(ui.value / image_ratio);
+ }
+ });
// Sets a change event for each input that will update the relevant attribute
// on the clicked upon element
$("*", $("#spikePropertyInspector")).each(function() {
Please sign in to comment.
Something went wrong with that request. Please try again.