<div class="wrapper"> <section id="myScrollbox" class="horizontal-scroll"> <div class="item" id="item1" runat="server"> <asp:HyperLink ID="hyp1" runat="server" > <asp:Image ID="img1" width="300px" ImageUrl="~/files/images/car1.gif" runat="server" /> </asp:HyperLink> </div> <div class="item" id="item2" runat="server"> <asp:HyperLink ID="hyp2" runat="server" > <asp:Image ID="img2" width="300px" ImageUrl="~/files/images/car2.gif" runat="server" /> </asp:HyperLink> </div> <div class="item" id="item3" runat="server"> <asp:HyperLink ID="hyp3" runat="server" > <asp:Image ID="img3" width="300px" ImageUrl="~/files/images/car3.gif" runat="server" /> </asp:HyperLink> </div> <%-- ANOTHER 5 ITEMS SIMILAR TO ABOVE HERE --%> </section> </div>
.wrapper { width: 100%; margin: auto; border: 1px solid #333; background-image:url(images/field.jpg); background-repeat:no-repeat; } .horizontal-scroll { overflow: hidden; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; padding: 0px 0; height:380px; } .item { border: 0px solid #333; display: inline-block; width: 260px; text-align: center; padding: 20px 0px; font-size: 16px; margin-left: 50px; margin-bottom: 60px; }
function scrollDivIntoView(_posNo) { var _posNo = '<%= _posNo %>'; var containerWidth = $('myScrollbox').width(); var elOffset = 300 * _posNo; var elWidth = 300; var containerWidth = $('myScrollbox').width(); var offset = elOffset - ((containerWidth - elWidth) / 2); document.getElementById('myScrollbox').scrollLeft = offset; }
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)