Jump to content



Photo

resizable image/DIV with jQuery plus number

Answered Go to the full post

  • Please log in to reply
7 replies to this topic

#1 ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 21 February 2014 - 15:56

I'm looking for a which will most likely be in jQuery, that I can slide a maker and an image or DIV would get bigger. Also when you slide to the right it will should the inch size on the image too. Is there a link where I can find out how to do it. Not really good at jQuery. The image below is how it would look like. It's really simple.

 

 

 

Untitled_1.png

 

Untitled_1.png



Best Answer +Seahorsepip , 22 February 2014 - 17:20

You can use the html5 range element: http://developerdriv...ntrol/demo.html

And use jquery ui as fallback for IE.

 

Edit: since the tutorial link on the demo page has a mistake in it, here's the tutorial http://www.developer...l5-range-input/

Go to the full post



#2 +Kyle

Kyle

    Resident One Name Wonder

  • Tech Issues Solved: 2
  • Joined: 12-February 06

Posted 21 February 2014 - 19:13

http://jsfiddle.net/PrLv9/2/

 

something like that?

 

credit to john s at stack overflow for that, btw.



#3 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 27
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 21 February 2014 - 19:20

http://jsfiddle.net/PrLv9/2/

 

something like that?

 

credit to john s at stack overflow for that, btw.

Requires jquery ui and such which might be a bother :/



#4 OP ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 21 February 2014 - 19:46

As long as it can be simple for me to do then I'm okay.



#5 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 27
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 21 February 2014 - 20:44

As long as it can be simple for me to do then I'm okay.

Simplest thing is range element but it's sad thing is that it's html5 only :/



#6 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 27
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 22 February 2014 - 17:20   Best Answer

You can use the html5 range element: http://developerdriv...ntrol/demo.html

And use jquery ui as fallback for IE.

 

Edit: since the tutorial link on the demo page has a mistake in it, here's the tutorial http://www.developer...l5-range-input/



#7 OP ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 25 February 2014 - 17:25

Is there a way to change the % to inches?

You can use the html5 range element: http://developerdriv...ntrol/demo.html

And use jquery ui as fallback for IE.

 

Edit: since the tutorial link on the demo page has a mistake in it, here's the tutorial http://www.developer...l5-range-input/



#8 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 27
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 25 February 2014 - 18:50

Is there a way to change the % to inches?

Value is just a value so you can set max value to example 10 and put instead of the 5% and 200% text some other text like 0 inch and 10 inch.

So the range element doesn't actually depend on inch, it's just a numeric value from 0 to maxvalue with also a step (as example step 5 gives the following values on dragging: 0 5 10 15 20 25 etc).

 

The js itself to apply the range element value to the picture uses percentages but you could also use pixels if you'd rather use that or actual inches (see: http://www.w3schools...f/css_units.asp) as exampel for 7 inch you use "7in" ;)