• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

resizable image/DIV with jQuery plus number

Question

ACTIONpack    491

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

Share this post


Link to post
Share on other sites

7 answers to this question

Recommended Posts

  • 0
Seahorsepip    610

You can use the html5 range element: http://developerdrive.com/demo/slider_control/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.developerdrive.com/2012/07/creating-a-slider-control-with-the-html5-range-input/

Share this post


Link to post
Share on other sites
  • 0
+Kyle    98

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

 

something like that?

 

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

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

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 :/

Share this post


Link to post
Share on other sites
  • 0
ACTIONpack    491

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

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

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 :/

Share this post


Link to post
Share on other sites
  • 0
ACTIONpack    491

Is there a way to change the % to inches?

You can use the html5 range element: http://developerdrive.com/demo/slider_control/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.developerdrive.com/2012/07/creating-a-slider-control-with-the-html5-range-input/

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

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.com/cssref/css_units.asp) as exampel for 7 inch you use "7in" ;)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.