Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    69
    Thanks
    11
    Thanked 2 Times in 2 Posts

    Windows 8 Metro interface Scoll on arrow click

    I was wondering if anyone could point me in the right direction with the name of the script i need. I have made my own html/css boxes and would like to scroll the page with the arrow like on this page. The name of the script/code or examples would be great - i am happy to do my own research.
    I can use jquery to replace the content of a div with another but when the secon div/panel/group is visible how is that done?

    Cheers guys, i know i can rely ont his forum to help

    Windows 8 Metro interface Scoll on arrow click-win8.jpg

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,285
    Thanks
    23
    Thanked 611 Times in 610 Posts
    Doing this in HTML is simple by using the tabindex attribute. To do this with the arrow keys will take JS onevent functions for all four keys. A little more complicated.

    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8" />
    <title>Title of the document</title>
    <style type="text/css">
    div{
    	height:40px;
    	width: 40px;
    	background-color: blue;
    	border: 2px solid red;
    	margin-bottom: 5px;
    }
    div:focus{
    	background-color: green;
    }
    </style>
    </head>
    
    <body>
    <div class="tab" tabindex="1" id="start">Tab 1</div>
    <div class="tab" tabindex="2">Tab 2</div>
    <div class="tab" tabindex="3">Tab 3</div>
    <div class="tab" tabindex="4">Tab 4</div>
    <div class="tab" tabindex="5">Tab 5</div>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Feb 2011
    Posts
    69
    Thanks
    11
    Thanked 2 Times in 2 Posts

    I think its jQuery carousel..?

    Hi Thanks for that. It wasnt what I was after so i guess I was waffling.

    I am basically after clicking on an arrow and a panel will move horizontally. I can get the look but it doesnt work - bashing my head here. Any help is greatly appreciated.

    <!DOCTYPE html>

    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 1</title>

    <script src="jquery-1.9.1.js"></script>
    <script src="jq.carousel.js"></script>

    <script>

    (function() {
    var $carousel = $('#carousel_1').carousel();

    $('#carousel_1_prev').on('click', function(ev) {
    ev.preventDefault();
    $carousel.carousel('prev');
    });
    $('#carousel_1_next').on('click', function(ev) {
    ev.preventDefault();
    $carousel.carousel('next');
    });
    }());

    </script>


    <style type="text/css">

    #carousel {
    margin: 0 auto;
    width: 600px;
    height: 150px;
    background: #efefef;
    overflow: hidden;
    }
    #carousel .carousel_box {
    float: left;
    border: solid #fff 5px;
    width: 140px;
    height: 140px;
    color: #fff;
    background: #252525;
    line-height: 140px;
    text-align: center;
    font-size: 123%;
    }

    </style>


    </head>

    <body>


    <div class="carousel">
    <div id="carousel" class="carousel_inner">
    <div class="carousel_box">1</div>
    <div class="carousel_box">2</div>
    <div class="carousel_box">3</div>
    <div class="carousel_box">4</div>
    <div class="carousel_box">5</div>
    <div class="carousel_box">6</div>
    <div class="carousel_box">7</div>
    <div class="carousel_box">8</div>
    </div>
    <p class="btns">
    <input type="button" id="carousel_prev" value="prev">
    <input type="button" id="carousel_next" value="next">
    </p>
    </div>



    </body>

    </html>

  • #4
    New Coder
    Join Date
    Jun 2005
    Location
    Blackpool. UK
    Posts
    98
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Chris

    Indifference will be the downfall of mankind, but who cares?

  • #5
    New Coder
    Join Date
    Feb 2011
    Posts
    69
    Thanks
    11
    Thanked 2 Times in 2 Posts

    No help

    Hi thanks for that but it didnt help as its different to what i am doing by far and overly complicated.

    I just need to get the code above working which apparently it shoudl be as i copied directly off their site. Cant figure out whats wrong.

    Thanks

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,285
    Thanks
    23
    Thanked 611 Times in 610 Posts
    Are you sure you have these and that they are in the same folder as this script?
    <script src="jquery-1.9.1.js"></script>
    <script src="jq.carousel.js"></script>

    OK got off my big fat chair and downloaded carousel.js.
    The JS code your using has
    Code:
    $('#carousel_1_prev').on('click', function(ev) {
    But you do not have anything with this ID. You have
    Code:
    <div id="carousel" class="carousel_inner">
    So you need to use this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 1</title>
    
    <style type="text/css">
    #carousel {
      margin: 0 auto;
      width: 600px;
      height: 150px;
      background: #efefef;
      overflow: hidden;
    }
    #carousel .carousel_box {
      float: left;
      border: solid #fff 5px;
      width: 140px;
      height: 140px;
      color: #fff;
      background: #252525;
      line-height: 140px;
      text-align: center;
      font-size: 123%;
    }
    </style>
    </head>
    
    <body>
    <div class="carousel">
      <div id="carousel" class="carousel_inner">
        <div class="carousel_box">1</div>
        <div class="carousel_box">2</div>
        <div class="carousel_box">3</div>
        <div class="carousel_box">4</div>
        <div class="carousel_box">5</div>
        <div class="carousel_box">6</div>
        <div class="carousel_box">7</div>
        <div class="carousel_box">8</div>
      </div>
      <p class="btns">
        <input type="button" id="carousel_prev" value="prev">
        <input type="button" id="carousel_next" value="next">
      </p>
    </div>
    
    <!--    IF THE JS YOUR USING IS IN THE SAME FOLDER AS THIS   -->
    
    <script type='text/javascript' src='jquery.js'></script>
    <script src="jq.carousel.js"></script>
    <script type="text/javascript">
    var $carousel = $('#carousel').carousel();
    
    $('#carousel_prev').on('click', function(ev) {
    	ev.preventDefault();
    	$carousel.carousel('prev');
    });
    $('#carousel_next').on('click', function(ev) {
    	ev.preventDefault();
    	$carousel.carousel('next');
    });
    </script>
    
    </body>
    </html>
    Last edited by sunfighter; 06-05-2014 at 09:09 PM.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #7
    New Coder
    Join Date
    Feb 2011
    Posts
    69
    Thanks
    11
    Thanked 2 Times in 2 Posts
    Yep mate - it was the first thing i checked. Says function undefined when ran.

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,285
    Thanks
    23
    Thanked 611 Times in 610 Posts
    See my last post
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #9
    New Coder
    Join Date
    Feb 2011
    Posts
    69
    Thanks
    11
    Thanked 2 Times in 2 Posts

    Thanks

    Thank you - your my hero


  •  

    LinkBacks (?)


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •