sweetysweety Posted April 22, 2013 Share Posted April 22, 2013 Hi i'm new in web programming and have a problem about my site developing with javascript.i'm trying to make a content slider.i wrote many codes about that but they did'n work.My site have a logo,after that a page section which should be sliden when user click buttons which appearing at the bottom side of my page.site logic is like this: <body><div id="mainpage" ><div class="container"> <div class="header"><img src="TERRAN SITE GIFFLER/anasayfa giffler/logo.gif" alt="Insert Logo Here" name="Insert_logo" width="20%" height="40%" id="Insert_logo" style="background-color: #f2f2f3; display:block; margin-left:40%" /> </div> <div class="Content"> <div class="overflow-img"> <ul class="slider" style="list-style:none;"> <li id="anasayfaContent" > <div id="anasayfaContent"> [/color][color=#464646] </div> </li> <li id="hakkimizdaContent" > <div id="icerik2"> </div> </li> <li id="islerimizContent"> <div id="icerik3" > </div> </li> <li id="icerikContent"> <div id="icerik4" > </div> </li> </ul> </div> </div> <div class="point" id="point" onMouseOver="onmouseover()" onMouseOut="onmouseout()"> <div id="greypoint" style="height:10px; width:10px; background-color:#999; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; position:absolute; margin-top:15px; visibility:visible"> </div> </div> <div class="upperline" id="upperline"> </div> <div class="menu" id="menuButtons" > <ul id="sayfalama" style="list-style:none;"> <li id="hakkimizda" ><a href="javascript:sayfakaydir(250,'')"><form method="post" ><input name="hakkimizdaButon" type="button" id="hakkimizdaButon" /></form></a></li> <li id="islerimiz"><a href="javascript:sayfakaydir('',-120)"><form method="post" ><input name="islerimizButon" type="button" id="islerimizButon" /></form></a></li> <li id="iletisim"><a href="javascript:sayfakaydir('',50)"><form method="post" ><input name="iletisimButon" type="button" id="iletisimButon"/></form></a></li> </ul> </div> <div class="bottomline" id="bottomline"> </div> <div class="footer"> <span class="copyright" style="margin-left:600px; font:Tahoma, Geneva, sans-serif 4px; color:#666;">©TerranArtworks</span> </div></div></div>[/color][color=#464646] i'm trying to slide the content of li's of slider ul when user click the menuButtons.the anasayfaContent will be the main page and appearing at the first load of page.the other li's moves according to buttons click event.the explanation was complicated,i know but my mind is toocan anyone help me to solve this problem.thank you... Link to comment Share on other sites More sharing options...
justsomeguy Posted April 22, 2013 Share Posted April 22, 2013 Do you have any Javascript? Making a sliding animation like that isn't very trivial. When one of the buttons is pressed then you'll need to determine which is the current element that is displaying, and which is the next element to display. You'll need to have a function that animates both of them to slide, which runs in a timeout. The animation function will need to get the current position of each element and its width or whatever else you want to use to determine how far to slide it, then it needs to just keep sliding it by a certain amount every few milliseconds until it reaches the position you want. If you want effects like it slows down before it stops then that's some additional calculation in the animation function. There are plenty of Javascript libraries that already support things like that if you don't want to build it yourself. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now