Html5 scrollbar using images

Question

I am going to create a html5 javascript app and in that I want a floating scroll of images looks like in the image below.


  

in that i want to scroll a,b,c and i want to scroll just by mouse dragging and no scroll bar to be used. can any one light on this

---

N.P.SARAVANA KUMAR

Answer 1

Hi NPSARAVANAKUMAR,

Thanks for posting!

From your description, I think you want to achieve the scroll in ABCDEFG ……

So I think we can use div tag but we need to change the div scroll style.

We can see this picture:

I think you can set the every style is transparent and try it.

Thanks!

Answer 2

Just use a div for the pannable region with the following styles:

overflow-x: auto;
-ms-overflow-style: none;

The latter style prevents any scrollbar from appearing while not interfering with the panning capability of the

element itself. Panning works with touch, mouse wheel, and page up/down keys.

If you want the region pannable with mouse drag, on the other hand, you'll need to handle MSPointerDown/Up events yourself as that's not a feature of panning regions to begin with.

Kraig

Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press

Also see second edition preview

Answer 3

Thanks Kraig,

I want an additional help

Now I want to have a image button (like abc in the image )that I have given already now I want to change the image to another image on clicking current image.

When i click again I want to get back the old image please any one help me by giving a coding example pls..

---

N.P.SARAVANA KUMAR

Answer 4

You'd do something like this:

var showABC = true;  //Flag to indicate which image to show

vat btn = document.getElementById("buttonABC");
btn.addEventListener("click", swapImage);

function swapImage (e) {
    showABC = !showABC; //Toggle flag
    var img = showABC ? "/images/abc.png" : "/images/123.png";
    e.target.src = img;
}

That is, just change the img element's src attribute in the click handler. The e.target object will be the button for which the event was invoked, but btn.src would also work there if the btn variable is in scope.