dcsimg
www.webdeveloper.com
Results 1 to 7 of 7

Thread: Getting completely stuck here

  1. #1
    Join Date
    Sep 2012
    Posts
    9

    Question Getting completely stuck here

    Hi
    New on here and relatively new to website too and first time using Javascript and Jquery however my client would like a personalised version of the site hunterandsand.com but I am having huge problems even getting it to look like it let alone different! My coding is awkward and all over the place as I have been editing it all day with little success. I would be hugely grateful for any help or advice and thank you in advance!

    Html:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8" />
    <meta name="description" content="Beauchampís Corporate offers a unique service for clients wishing to design a special product for their business. ">
    <title>Beauchamp's Corporate</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
    </script>
    <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
    <script type="text/javascript" src="js.js"></script>
    </head>
    <body>
    
            <h1><img src="images/logo1.jpg" alt="Beauchamp's Corporate"></h1>
    		
    
    <!-- "previous page" action -->
    <a class="prev browse left">Left</a>
     
    <!-- root element for scrollable -->
    <div  class="scrollable" id="autoscroll">
     
      <!-- root element for the items -->
      <div class="items">
    <div>
                <img src="images/boat1.jpg" alt="" />
    			        </div>
    					<div>
                <img src="images/car1.jpg" alt="" />
    			        </div>
    					<div>
                <img src="images/dock1.jpg" alt="" />
    			        </div>
    					<div>
                <img src="images/glass1.jpg" alt="" />
    			        </div>
    					<div>
                <img src="images/hotel1.jpg" alt="" />
    			        </div>
    					<div>   
                <img src="images/table1.jpg" alt="" />        
            </div>
      </div>
     
    </div>
     
    <!-- "next page" action -->
    <a class="next browse right">Right</a>
    
    				
    <div id="center">
                    
                    <ul class="menu">
                        <li><a href="#services">Our Product</a></li>
                        <li><a href="#contact">Contact Us</a></li>
                    </ul>
    </div>
                
                <div class="container">
                        
                        <div id="services" class="content">
    
                            <p>We offer a consultation meeting in which we discuss client requirements, design ideas, packaging options, budgets, lead times and more...
    							<br />
                            We have a number of designs already in production which we can edit & brand with the client logo or...
    							<br />
                            Following this initial meeting, we produce product drawings, quotes, source leather samples and materials specific to this product. Samples can be produced once drawings have been approved by the client.
    							<br />
                            Lead times, delivery schedules and product prices are unique to the client and indervidually calculated according to the specific client reqirements.
    							<br />
                            Where possible Beauchamp's aims to produce products in one of our UK factories however should it be required we will use factories further afield. </p>
                                                    
                        </div>
                        
                        <div id="contact" class="content">
                        
                            
                            <p>For further information:
    							<br />
    						Email: <a href="info@beauchampsoflondon.com">info@beauchampsoflondon.com</a>
    							<br />
    						Address: 35 Bruton Street, London, W1J 6QY 
    							<br />
    						Website: <a href="www.beauchampscorporate.com">www.beauchampscorporate.com</a>
    							<br />
    						Fashion Accessories Website: <a href="www.beauchampsoflondon.com">www.beauchampsoflondon.com</a></p>
                            
                        </div>
                
               
            </div>
    
    <script>
    $(document).ready(function() {
    // initialize scrollable together with the autoscroll plugin
    var root = $("#autoscroll").scrollable({circular: true}).autoscroll({ autoplay: false });
    
    // provide scrollable API for the action buttons
    window.api = root.data("scrollable");
    });
    
    </script>
    </body>
    </html>
    Css:
    HTML Code:
    html, body {
    height:100%;
    }
    h1 img{
        width:200px;
        margin:0 auto;
    }
    h1{
    width:200px;
        font-size:0;
        text-align:center;
    	  margin-left: auto ;
      margin-right: auto ;
      position:relative; 
      top:100px;
      width:850px; 
      margin:0 auto; 
      z-index:100;
    }
    li {
    	list-style: none;
    }
    
    /*
      root element for the scrollable.
      when scrolling occurs this element stays still.
      */
    .scrollable {
    
        /* required settings */
        position:relative;
        overflow:hidden;
        width: auto;
        height:800px;
    	position:relative; 
    	z-index:0; 
    	top:0; 
    	left:0;
    }
    
    /*
       root element for scrollable items. Must be absolutely positioned
       and it should have a extremely large width to accomodate scrollable
       items.  it's enough that you set the width and height for the root
       element and not for this element.
    */
    .scrollable .items {
        /* this cannot be too large */
        width:20000em;
        position:absolute;
        clear:both;
    }
    
    .items div {
        float:left;
        width:auto;
    }
    
    /* single scrollable item */
    .scrollable img {
        float:left;
        margin:0px;
        background-color:#000000;
        padding:0px;
    	    width: 100%;
        height: 100%;
        -moz-border-radius:0px;
        -webkit-border-radius:0px;
    }
    
    /* active item */
    .scrollable .active {
        position:relative;
        cursor:default;
    } 
    
      ul.menu {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px; /*--Set height of tabs--*/
    width: 100%;
    }
    
    ul.menu li {
    float: left;
    margin: 0;
    padding: 0;
    height: 31px; /*--Subtract 1px from the height of the unordered list--*/
    line-height: 31px; /*--Vertically aligns the text within the tab--*/
    margin-bottom: -1px; /*--Pull the list item down 1px--*/
    overflow: hidden;
    position: relative;
    background: #e0e0e0;
    }
    
    ul.menu li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    outline: none;
    }
    
    ul.menu li a:hover {
    background: #ccc;
    }
    
    #center{
      width: 265px ;
      margin-left: auto ;
      margin-right: auto ;
      position:relative;
      z-index:100;
    }
    .container {
    border-top: none;
    overflow: hidden;
    clear: both;
    float: left; 
    width: 100%;
    height:200px;
    background: #fff;
    opacity: 0.6%;
    }
    .content {
    padding: 20px;
    font-size: 1.2em;
    color:#333;
    text-align: center;
    }
    Js:
    HTML Code:
    // perform JavaScript after the document is scriptable.
    $(function() {
        // setup ul.tabs to work as tabs for each div directly under div.panes
        $("ul.menu").tabs("div.content > div");
    });
    $(function() {
      // initialize scrollable
      $(".scrollable").scrollable();
     });
     // initialize scrollable together with the autoscroll plugin
    var root = $("#autoscroll").scrollable({circular: true}).autoscroll({ autoplay: false });
    // provide scrollable API for the action buttons
    window.api = root.data("scrollable");
      });
    Please and suggestions?!

  2. #2
    Join Date
    Jul 2009
    Posts
    184
    Could you please post the code somewhere that we can see it running?

    It's hard to guess where you're getting stuck, when we don't know where you are at with the work.

  3. #3
    Join Date
    Sep 2012
    Posts
    9
    Thank you! You can see it running here :http://www.musidoraland.co.uk/

  4. #4
    Join Date
    Jul 2009
    Posts
    184
    Ok, to start I am just going to give you a couple of pointers that will hopefully make your work a little easier.

    - First off, you might find it easier to solve larger problems, if you break your work down into smaller, easier to approach pieces. For Example, you could just get the image slideshow to operate as you desire, without anything else on the page first. Then add in the logo, and then the buttons that hide and show content at the bottom of the page.
    - Don't be afraid to leverage other peoples work, if you don't know how to do something. If hunterandsand.com has a slideshow you like, use the same JQuery Cycle plugin they use. You can also leverage css styling if you don't know how to make each slide take up the full screen dimensions.

    If I was you, I would comment out the html for everything, except the image slideshow, get the jquery cycle plugin running, and then apply css styling that makes each individual slide cover the full screen to start. Let us know if you get stuck on anything particular along the way!
    Last edited by WestWeb; 09-04-2012 at 03:05 PM.

  5. #5
    Join Date
    Sep 2012
    Posts
    9
    Thank you - good suggestion, at the moment I can't see the wood for the trees.
    Off to break it all down one by one!

  6. #6
    Join Date
    Sep 2012
    Posts
    9
    I have had success in parts! I have managed to get the images full screen (will edit the pictures later to make them look better but these are stand ins) and scrolling - YAY! However I have added the next and previous buttons which work but i can't get them to show up. Not sure what I am doing wrong, have played around with z-index and positioning but nothing has worked. Does anyone have any suggestions? Thank you,

  7. #7
    Join Date
    Sep 2012
    Posts
    9
    Have managed to make it work.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles