css - HTML disable 'id' page move behaviours -
with resources web have created slide show using purely css , html. clicking linkd on image map changes content of div aligned next it.
to achieve have linked 'href="#"' 'id=""'. results in 'bookmark' effect on page autmoatically scrolls page down top of div in 'id's reside.
i have managed working well, however, possible disable behaviour of page scrolling down keeping same functionality?
thanks!
code:
html
<div class="wheelcontainer" id="content-slider"> <ul id="content-slider-inside"> <li id="middle"></li> <li id="customer"></li> <li id="people"></li> <li id="operations"></li> <li id="finance"></li> <li id="community"></li> </ul> </div> <img src="/teams/group-itservice/businesssupport/images/wheel.png" usemap="#map" border="0" /> <map name="map" id="map"><area shape="poly" coords="392,446,295,310,322,276,320,234,478,179,477,332" href="#operations" alt="operations" /> <area shape="poly" coords="127,446,222,312,260,324,297,311,391,449,252,495" href="#finance" alt="finance" /> <area shape="poly" coords="218,310,121,446,40,342,40,178,196,235,194,276" href="#community" alt="community" /> <area shape="poly" coords="259,193,259,27,126,67,41,179,197,234,219,204" href="#customer" alt="customer" /> <area shape="poly" coords="258,26,259,193,297,207,321,237,475,179,393,70" href="#people" alt="people" /> <area shape="circle" coords="258,258,62" href="#middle" alt="middle" /> </map>
css
#content-slider { width: 480px; overflow: hidden; height: 515px; } #content-slider-inside { list-style: none; height: 515px; // these 3 lines overflow: scroll; // opera overflow-y: hidden; // behave } #content-slider-inside li { width: 350px; height: 515px; padding-top:50px; padding-left:20px; }
to keep id references can have onclick return false. should stop page scrolling, break other actions?
<area shape="poly" coords="127,446,222,312,260,324,297,311,391,449,252,495" href="#finance" alt="finance" onclick="return false;" />
Comments
Post a Comment