Jquery slider and draggable dont work -

-

i'm making banner can resize , drag image. works fine in jsfiddle. reason dont work on webpage.

here example in jsfiddle:
http://jsfiddle.net/dennisbetman/tnaga/

and here how looks on webpage:
http://jewelbeast.com/posts/imgreplace.html

so if can see. slider dont work. , image draggable doing weird to.

i called script jquery , jquery ui in head.

he code used webpage.

<!doctype html> <html> <head>     <meta charset="utf-8" />     <title>jquery ui draggable - default functionality</title>     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>     <style>     div {         width:370px;         height:204px;         position:relative;         overflow:hidden;         border-top-left-radius: 7px;         border-top-right-radius: 7px;     }      #box{         background:black;         cursor: move;         border: 1px solid black;     }       #hidden-img{         display:none;     }     </style> </head>  <body>     <div id="box">         <img src="http://www.hdwallpapersarena.com/wp-content/uploads/2013/04/high-resolution-fantasy-woman.jpg" id="hidden-img" />         <img src="http://www.hdwallpapersarena.com/wp-content/uploads/2013/04/high-resolution-fantasy-woman.jpg" id="img" width="371" height="auto" style="top:-0px; left:-0px;" />     </div>     <!-- style="top:-262px; left:-425px;" -->     <div id="zoom"></div>      <input type="hidden" id="amount-width" style="border: 0; color: #f6931f; font-weight: bold;" />     <input type="hidden" id="amount-height" style="border: 0; color: #f6931f; font-weight: bold;" />      <div class="text"></div>      <p>         position x:         <input type="text" id="val-x" style="border:0; color:#f6931f; font-weight:bold;" />     </p>     <p>         position y:         <input type="text" id="val-y" style="border:0; color:#f6931f; font-weight:bold;" />     </p>      <p>         <input type="file" onchange="readurl(this);" />     </p>     <script>     var previousvalue = 0;     var hiddenimagewidth = $("#hidden-img").width() - 370;      jquery("#zoom").slider({             max: hiddenimagewidth,             slide: function(event, ui){              var slidervalue =  jquery("#zoom").slider("value");             jquery("#img").width(370 + slidervalue);              var pos = $("#img").position(); // returns object attribute top , left             var top = pos.top;  // top offset position             var left = pos.left; // left offset position              $("#val-x").val(left);             $("#val-y").val(top);              if (left > 0){                 $("#img").css("left",'0px');             }              if (top > 0){                 $("#img").css("top",'0px');             }              $("#amount-width").val(jquery("#img").css("width"));             $("#amount-height").val(jquery("#img").css("height"));              var width = $("#img").width();             var widthzoom = width + slidervalue;             var widthverschil = widthzoom - slidervalue;             var totalwidth = widthverschil - '370';              var height = $("#img").height();             var totalheight = height - '207';              if (slidervalue < previousvalue){               var t, l;               t = $('#img').position().top;               l = $('#img').position().left;               if(t < 0)                   t = t + (previousvalue - slidervalue);               if(l < 0)                   l = l + (previousvalue - slidervalue);               $('#img').offset({top: t, left: l});             }             previousvalue = slidervalue;              $("#img").draggable({                 containment: [-totalwidth, -totalheight, 0, 0],                 scroll: false,                 iframefix: true,             });              $('.text').html('<br/>the file size = ' + height + ' x ' + widthverschil);            }      });      var height = $("#img").height();     var totalheight = height - '207';      $("#img").draggable     ({         containment: [0, -totalheight, 0, 0],         snap: false,         drag: function(event, ui)         {             $("#val-x").val(ui.position.left);             $("#val-y").val(ui.position.top);          }         });      $("#img").offset({left: $(this).attr('position')});       function readurl(input) {         if (input.files && input.files[0]) {             var reader = new filereader();              reader.onload = function (e) {                 $('#img')                     .attr('src', e.target.result)              };             reader.readasdataurl(input.files[0]);         }     }  </script> </body> </html>

you can see script making al happening on end of body. tried put in head nothing work, wont see slider. ect.

i tried place scripts 

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

under script function. wont work either.

i hope see problem.

thanks.

you have wrap jquery's code inside document ready function:

   var previousvalue = 0;  var hiddenimagewidth = $("#hidden-img").width() - 370;    $(document).ready(function () {      jquery("#zoom").slider({          max: hiddenimagewidth,          slide: function (event, ui) {               var slidervalue = jquery("#zoom").slider("value");              jquery("#img").width(370 + slidervalue);               var pos = $("#img").position(); // returns object attribute top , left              var top = pos.top; // top offset position              var left = pos.left; // left offset position               $("#val-x").val(left);              $("#val-y").val(top);               if (left > 0) {                  $("#img").css("left", '0px');              }               if (top > 0) {                  $("#img").css("top", '0px');              }               $("#amount-width").val(jquery("#img").css("width"));              $("#amount-height").val(jquery("#img").css("height"));               var width = $("#img").width();              var widthzoom = width + slidervalue;              var widthverschil = widthzoom - slidervalue;              var totalwidth = widthverschil - '370';               var height = $("#img").height();              var totalheight = height - '207';               if (slidervalue < previousvalue) {                  var t, l;                  t = $('#img').position().top;                  l = $('#img').position().left;                  if (t < 0) t = t + (previousvalue - slidervalue);                  if (l < 0) l = l + (previousvalue - slidervalue);                  $('#img').offset({                      top: t,                      left: l                  });              }              previousvalue = slidervalue;               $("#img").draggable({                  containment: [-totalwidth, -totalheight, 0, 0],                  scroll: false,                  iframefix: true,              });              $('.text').html('<br/>the file size = ' + height + ' x ' + widthverschil);           }       });       var height = $("#img").height();      var totalheight = height - '207';       $("#img").draggable({          containment: [0, -totalheight, 0, 0],          snap: false,          drag: function (event, ui) {              $("#val-x").val(ui.position.left);              $("#val-y").val(ui.position.top);           }       });       $("#img").offset({          left: $(this).attr('position')      });  });   function readurl(input) {      if (input.files && input.files[0]) {          var reader = new filereader();           reader.onload = function (e) {              $('#img')                  .attr('src', e.target.result)           };          reader.readasdataurl(input.files[0]);      }  }

Comments

Post a Comment

Popular posts from this blog

Perl - how to grep a block of text from a file -

-
it can in xml or text format. how in general grep block of text in perl? <track type="ws"> <range> <rangestart>0</rangestart> <rangeend>146.912</rangeend> <locationindex>0</locationindex> <propertyindex>0</propertyindex> </range> </track> <track type="ps" id="1"> <range> <rangestart>0</rangestart> <rangeend>146.912</rangeend> <locationindex>1</locationindex> <propertyindex>1</propertyindex> </range> </track> i want grep type="ps" , till </range> . one solution open file, read line line , match block. open(fh, "file.txt"); foreach $line (<fh>) { if ($line =~ m/type="cc"(.*?)<\/range>/) { print $1; } } but there more optimal solution without reading file line l
Read more

delphi - How to remove all the grips on a coolbar if I have several coolbands? -

-
Image
if set mycoolbar.fixedorder true,only grip on first band hidden. well,if use delphi 7 create vcl forms application,then put coolbar on , create 3 coolbans hold other controls,only grip , top coolbands can hidden setting mycoolbar.fixedorder:=true. i've uploaded picture make things clear. you got fixedorder property wrong. fixed property not allow bands rearranged if set true . setting property of coolbar true keep user changing bands order @ runtime, user can still move , resize bands. can give advice can do, actual solution problem, well, have wait answer. my advice use 3 coolbars in row , setting "fixedorder" property true , bandborderstyle bsnone . way grip hidden on of them. about property, it's not bug of ide, actual preference of property.
Read more

javascript - Animating array of divs; only the final element is modified -

-
this baffling me @ moment. i'm experienced programmer looking throw bit of surprise fiancee on countdown page our wedding. desired effect simulated confetti falling behind main page. setup follows: i have array of divs in javascript. each div absolutely positioned on page. have interval set updates every 50 or milliseconds. on each tick, run loop on array of divs, , calculations , update positions. problem problem having, however, though can see divs created, stored array, , modified (in case, each has slight randomized rotation) during initialization phase, once tick update position starts, div stored in whatever last slot of array gets position updated. tried hard-coding each div index testing purposes, strictly last element update position. upon printing current "left" , "top" style values each div before , after calculations shows value has been changed, no visible change noticeable. here's basic code: javascript var container;
Read more