Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

html5 mobile page sliding to the next

html

Best Answer lespauled, 13 November 2014 - 11:26 AM

I did some renaming of variables to wrap my head around it a little better, like previous and next, vs left and right.

 

I made it a little more generic.   It shows the previous and next buttons based on item shown, etc.  Will work with any number of items.

 

But here is the html:

 

<div class="Header">
  absolutely positioned header
</div>


<div class="SlideContainer">
  <div class="Slides">


    <div class="Slide">
      <div class="Content">
        <h1>Slide 1.html</h1>
        <a href="#" class="Prev">prev</a>
        <a href="#" class="Next">next</a>
      </div>
    </div>


    <div class="Slide">
      <div class="Content">
        <h1>Slide 2.html</h1>
        <a href="#" class="Prev">prev</a>
        <a href="#" class="Next">next</a>
      </div>
    </div>


    <div class="Slide">
      <div class="Content">
        <h1>Slide 3.html</h1>
        <a href="#" class="Prev">prev</a>
        <a href="#" class="Next">next</a>
      </div>
    </div>
    


  </div>
</div>


<div class="Footer">
  absolutely positioned footer
</div>

Here is the jquery:

 

$(function(){
  var w = $(window).width();
  var h = $(window).height();
  var slides = $('.Slides > div');
  $('.SlideContainer').css({ height: (h-60) + 'px' });
  $('.Slides').css({ width: slides.length + '00%' });
  slides.css({ width: w + 'px' });


  var numItems = $('.Content').length;
  var itemNum = 1;
    
    ShowSlide(itemNum);


  $('.Prev').click(function(){
      ShowSlide(--itemNum);
  });
  $('.Next').click(function(){
      ShowSlide(++itemNum);
  });


function ShowSlide(positionNum)
{
    var animatePixels = (((positionNum-1 )* -1 ) * w);
    
    $('.Slides').animate({ left:  animatePixels + 'px' });

    var prev = $('.Prev');
    var next = $('.Next');
    
    if(positionNum == ( numItems))
        next.hide();
    else
        next.show();
    
    if(positionNum === 1)
        prev.hide();
    else
        prev.show();
}
});
Go to the full post


This topic has been archived. This means that you cannot reply to this topic.
7 replies to this topic

#1 mutago

mutago

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 478 posts

Posted 13 November 2014 - 08:32 AM

This code below works by sliding the content of DIV but what i want is

 when a user clicks on a link of FIrst.html, the complete page will be moved to the left side of the window and the other one will come from right eg. next.html.

Any help will be appreciated.

 

 

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Page Slide</title>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 
<script type="text/javascript">
 
$(function(){
  var w = $(window).width();
  var h = $(window).height();
  var slides = $('.Slides > div');
  $('.SlideContainer').css({ height: (h-60) + 'px' });
  $('.Slides').css({ width: slides.length + '00%' });
  slides.css({ width: w + 'px' });
 
  var pos = 0;
 
  $('.Left').click(function(){
    pos--;
    $('.Slides').animate({ left: (pos * w) + 'px' });
  });
  $('.Right').click(function(){
    pos++;
    $('.Slides').animate({ left: (pos * w) + 'px' });
  });
 
});
 
</script>
 
<style type="text/css">
 
body { margin: 0; padding: 0; }
 
.Header { position: absolute; left: 0; top: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }
.Footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }
 
.SlideContainer { position: absolute; left: 0; top: 30px; width: 100%; overflow: hidden; }
.Slides { position: absolute; left: 0; top: 0; height: 100%; }
.Slides > div { float: left; height: 100%; overflow: scroll; }
 
.Slides .Content { margin-top: 100px; text-align: center; }
.Slides .Content a { font-size: 30px; }
 
</style>
 
</head>
<body>
 
<div class="Header">
  absolutely positioned header
</div>
 
<div class="SlideContainer">
  <div class="Slides">
 
    <div class="Slide">
      <div class="Content">
        <h1>Slide first.html</h1>
        <a href="#" class="Left">&laquo;</a>
      </div>
    </div>
 
    <div class="Slide">
      <div class="Content">
        <h1>Slide next.html</h1>
        <a href="#" class="Left">&laquo;</a>
        <a href="#" class="Right">&raquo;</a>
      </div>
    </div>
 
    
 
  </div>
</div>
 
<div class="Footer">
  absolutely positioned footer
</div>
 
</body>
 
</html>
 


#2 lespauled

lespauled

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1360 posts

Posted 13 November 2014 - 11:26 AM   Best Answer

I did some renaming of variables to wrap my head around it a little better, like previous and next, vs left and right.

 

I made it a little more generic.   It shows the previous and next buttons based on item shown, etc.  Will work with any number of items.

 

But here is the html:

 

<div class="Header">
  absolutely positioned header
</div>


<div class="SlideContainer">
  <div class="Slides">


    <div class="Slide">
      <div class="Content">
        <h1>Slide 1.html</h1>
        <a href="#" class="Prev">prev</a>
        <a href="#" class="Next">next</a>
      </div>
    </div>


    <div class="Slide">
      <div class="Content">
        <h1>Slide 2.html</h1>
        <a href="#" class="Prev">prev</a>
        <a href="#" class="Next">next</a>
      </div>
    </div>


    <div class="Slide">
      <div class="Content">
        <h1>Slide 3.html</h1>
        <a href="#" class="Prev">prev</a>
        <a href="#" class="Next">next</a>
      </div>
    </div>
    


  </div>
</div>


<div class="Footer">
  absolutely positioned footer
</div>

Here is the jquery:

 

$(function(){
  var w = $(window).width();
  var h = $(window).height();
  var slides = $('.Slides > div');
  $('.SlideContainer').css({ height: (h-60) + 'px' });
  $('.Slides').css({ width: slides.length + '00%' });
  slides.css({ width: w + 'px' });


  var numItems = $('.Content').length;
  var itemNum = 1;
    
    ShowSlide(itemNum);


  $('.Prev').click(function(){
      ShowSlide(--itemNum);
  });
  $('.Next').click(function(){
      ShowSlide(++itemNum);
  });


function ShowSlide(positionNum)
{
    var animatePixels = (((positionNum-1 )* -1 ) * w);
    
    $('.Slides').animate({ left:  animatePixels + 'px' });

    var prev = $('.Prev');
    var next = $('.Next');
    
    if(positionNum == ( numItems))
        next.hide();
    else
        next.show();
    
    if(positionNum === 1)
        prev.hide();
    else
        prev.show();
}
});

My Blog: http://forum.codecal...699-blog-77241/
"Women and Music: I'm always amazed by other people's choices." - David Lee Roth

#3 lespauled

lespauled

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1360 posts

Posted 13 November 2014 - 12:21 PM

BTW, I used the jQuery CDN for 2.1.1 link

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.js"></script>

Also works with 1.11  Didn't go any earlier than that.


Edited by lespauled, 13 November 2014 - 12:21 PM.

My Blog: http://forum.codecal...699-blog-77241/
"Women and Music: I'm always amazed by other people's choices." - David Lee Roth

#4 mutago

mutago

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 478 posts

Posted 13 November 2014 - 12:31 PM

Thanks so much but am still having issues, when i try to slide to next page let say from firstpage.html to second.html, it shows no slide effect but load the next page inside the first one. if am on the first page and click on the links, let it take me to the second page in full.

 

Thanks

 
 
    <div class="Slide">
      <div class="Content">
        <h1>Slide 1</h1>
        <a href="secondpage.html" class="Next">Slide me to Page 2</a>
      
      </div>
    </div>
 
 
    <div class="Slide">
      <div class="Content">
        <h1>Slide 2.html</h1>
      
        <a href="firstpage.html" class="Next">slideme back to page 1</a>
      </div>
    </div>


#5 lespauled

lespauled

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1360 posts

Posted 13 November 2014 - 12:47 PM

Change the class of slide 2 navigation to prev


If you want to be able to go from the last item to the first and visa versa, add the following to ShowSlideShow, and comment out the checks for showing and hiding the links

 

 
        if(positionNum > numItems )
        {
            positionNum = 1;
            itemNum = 1;
        }
        if(positionNum < 1)
        {
            positionNum = numItems;
            itemNum = numItems;
        }

My Blog: http://forum.codecal...699-blog-77241/
"Women and Music: I'm always amazed by other people's choices." - David Lee Roth

#6 mutago

mutago

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 478 posts

Posted 13 November 2014 - 01:23 PM

Thanks but i cannot get it to work


I have also change all the positioning from absolute to relative, yet no improvement



#7 lespauled

lespauled

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1360 posts

Posted 13 November 2014 - 01:31 PM

Here is a fiddle that shows it's working

http://jsfiddle.net/...auled/qk4ubovg/
My Blog: http://forum.codecal...699-blog-77241/
"Women and Music: I'm always amazed by other people's choices." - David Lee Roth

#8 mutago

mutago

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 478 posts

Posted 13 November 2014 - 02:11 PM

Thanks its working Now. God Bless you






Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download