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");
});
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!
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,
Getting completely stuck here
Reply With Quote
Bookmarks