Edit:
tl;dr What I have is a .png file of a horizontal bar and a .png file of a square button. I want to be able to add both images to a webpage and be able to slide the button along the rectangle. I know that it is possible to make range sliders in better ways but using the .png files is a hard requirement.
I have been tasked with taking an image of a range slider, adding it to a webpage, and make the slider interactive/draggable. I know that jQuery has its own sliders (https://jqueryui.com/slider/#multiple-vertical) but this does not seem to apply if you want to use an image of the range slider instead.
Example Image:
(source: dcrazed.com)
How can this be implemented? All the tutorials I see make the slider out of HTML/CSS/JS elements while I have separate images of the slider and draggable button.
FYI, the reason we're using an image is that it looks better than the standard sliders jQuery provides.
It may help if you search for "Form Range Input" or "RangeSlider JS" instead of slider to find a tutorial.
However I don't see any reason why this can't be accomplished more easily and more cleanly strictly through JS and CSS.
If you're having trouble visualising, try breaking your design into parts like so and save yourself the hassle of trying to make an image based design responsive. (Like we all have struggled with previously)
The slider knob itself is a rounded square with three squares inside it.
The slider bar is a rounded rectangle with another three squares placed inside it.
The information box is a div with text and a CSS triangle affixed to it.
The ticks themselves are trickier and will need to be added and removed dynamically with JS depending on their resolution, but their visual details only really need basic styling
If you still feel the need to use images and break the responsiveness of your website then have a look through some Codepens and see what others have done with similar requirements.
I am trying to build an example to highlight multiple image map areas on an html page for the iPad. The idea is similar to the magnifier feature that you notice when you tap and hold the mobile safari address bar. You can pan the magnifier around to go to a particular character. I am trying to leverage the same user experience to highlight image map "poly" areas. When I pan the magnifying glass, I want to scroll through the areas by highlighting them and making them active.
I am thinking of using the Jquery Maphighlight plugin alongwith a CSS/JS magnifier sample
http://persistent.info/files/20040508.magnifier/
http://davidlynch.org/projects/maphilight/docs/
The place I'm stuck is the actual scrolling between the areas and highlighting them automatically.
I was wondering if anyone has done something similar to what I'm trying to achieve.
Cheers!
Sameer
I couldn't quite conceptualise what you were wanting, but this may help in any case.
use the pseudo class :active in your css and in the tag add
In this demo I've simply used CSS transform to simulate the zooming, but it could be replaced with whatever you want. I think you will find a pure css option faster then any javascript.
http://jsfiddle.net/thurstanh/QEudm/5/
<body ontouchstart="">
css
img:active {
-webkit-transform:scale(2,2);
}
If you take a quick look at the two links below, you'll see most people want to get rid of the outline around the area of a map on an image. I see this occurs on the MAC OS X platform, exclusively.
Removing outline on image map area
How do I get rid of this border outline for my image map areas when clicked (OS X Chrome Only)
However, what I want to do is show the outline in multiple browsers and change it's color and width. I tried but to avail. I created a style for an id. Didn't work. I tried using a class and that didn't work. I set an inline style and that didn't work, either. And I attempted it on both the map and area tags, by the way.
As of now, I use a gif to "border" the area when clicked. But it would make things so much easier if I could take advantage of the built-in shape attribute to highlight the area clicked.
Thank you very much for any help.
This answer looks interesting:
Changing the colour/transparency of a div on rollover or using an imagemap
Links to here: http://davidlynch.org/js/maphilight/docs/demo_simple.html
Older versions of Internet Explorer do not respect CSS for the area outlines. You can solve this by blocking the default handing of the mousedown event. If using jquery, something like
$('area').bind('mousedown',function(e) {
e.preventDefault();
});
would take care of it for all image maps on the page.
Also take a look at my plugin: http://www.outsharked.com/imagemapster which will let you easily handle outline (and other) effects on mouseover and click events.
I've been searching for how to write a bookmarklet which overlays the full screen with a layer filled with a color. Ie. Click the bookmarklet and a layer sits on top of the content.
The other trick I.am trying to solve is to.have a 'hole' aka a transparent part of the layer, eg 200px square in the middle of the overlay layer where you can see through to the original web page content underneath.
Are there any css wizards out there who could help me? Much appreciated... I'm a bit of a css newbie.
Cheers and thanks!!
I've been searching for how to write a bookmarklet which overlays the full screen with a layer filled with a color. Ie. Click the bookmarklet and a layer sits on top of the content.
How about this? The following works for me:
javascript:(function(a){a=document.createElement('div');a.style.position=
'fixed';a.style.left=a.style.right=a.style.top=a.style.bottom='0%';
a.style.zIndex='100000';a.style.background='white';a.innerHTML=
'overlay content goes here';document.body.appendChild(a);})();
I'm not sure about the hole though; sorry. You may have to create separate elements that form the shape, but that of course is an ugly solution.
Here is an example that only uses CSS
http://jsfiddle.net/QZV4D/
you can modify the hole by adjusting the % of the left and right overlays
Google has the coolest effects - once it was a Pac-man game, today is apparently the 160th anniversary of the first World Fair, and Google's logo has an image of it. They also turn the mouse into a magnifying glass that can sweep over the picture (the gold ring).
I'm wondering how they do that. It's obviously Javascript, and I looked at the page source, but it's not especially readable (no surprise).
Looking at their source code, it seems they are using rather basic techniques to achieve this.
Ignoring all the embedded nifty animated gif's, there are basically two images - large, and small of the entire scene. The larger image is repeated thrice in the document. Look at the annotated image below to get a better idea of how the zoom works.
The portion inside the magnifying circle is split up in three div's - top, mid, and bottom. The overflow for each div should be hidden. Each div is relatively positioned inside the zoom circle. On mouse move, change the absolute position of the zoom circle to the mouse coordinates. Their example also uses CSS3 for the scaling and adding some animation delays.
Here's a sorta minimal reconstructed example.
Another example where we don't hide the div overflow to reveal the entire thing as a square.
Well, firstly, for anyone who wants to use such an effect, there are loads of jQuery plugins. Here are just a few:
Power Zoomer
Featured Image
Zoomer
Cloud Zoom
Secondly, it's quite easy to achieve. Just load the full-size image, but give it a width smaller than it's actual width, so it is scaled by CSS. Then, use JavaScript+CSS to create a Div (the magnifying glass) with the same image as background, but change the background-position property to the corresponding scaled x,y coordinate that the user's mouse is currently on.
There are other ways of doing it I suppose, and Google might be doing it differently, but this is the most obvious way for me that comes to mind.
Visit http://codeblab.com/glass/ for an real life example and in depth explanation of this technique. Flash and CSS v3 have ample functionality to construct a round magnifying glass.
However, simulate-a-circle-with-overlapping-rectangles works on (many) more platforms.
(DISCLOSURE: codeblab.com is my personal hobby blog with some weak links to my work in The Netherlands.)
There is a full example of magnifying any sort of HTML, including HTML5 at http://www.aplweb.co.uk/blog/js/magnifying-glass/. Works cross-browser too - although rounded corners are a bit iffy on most browsers - so you are going to have to use a box rather than circle.
Here is how to works:
Duplicate the content you want to zoom
Place the duplicated content into another element and set the visible width/height and overflow hidden
Use JavaScript to move the duplicated content so that it moves by the zoom amount * mouse movement. Also move the visible div by the mouse movement.
That is pretty much it too it. There are lots of little things to look out for though to make it work on all browsers.
I don't know how Google does it, since the logo is no longer showing in my area; but this effect can be achieved by clipping the enlarged animated GIF over the regular image using canvas. Alternatively, it is also possible to create create a circular clipping using CSS border-radius (commonly used to implement rounded corners).
EDIT: I've hacked this up together to show the basic technique that you need if you used CSS border-radius: http://jsfiddle.net/yjBuS/
Looks like they're using two images, one for the logo and one for the zoom (the zoomed one is actually sliced, to run the animations separately...?) They probably detect if the mouse is over the normal logo, then show the yellow circle and attach it to the mouse position. Then showing the other image, shifting it opposite of the mouse. Or something similar.