Sign in to follow this  

resizable image/DIV with jQuery plus number

Recommended Posts

ACTIONpack    370

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
+Kyle    97

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
Seahorsepip    539

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
ACTIONpack    370

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
Seahorsepip    539

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
Seahorsepip    539

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
ACTIONpack    370

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
Seahorsepip    539

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.