Hi
My script can be seen on www.musidoraland.co.uk. I have become stuck after applying aspect ratio to my sliding images, there was a problem as the wider the screen the more the images slipped below the page. So I fixed a maximum height and now completely stuck as the images aren't centering - it looks good on my full screen - 17.5 inches but if I minimise it the image doesn't center and is off to the right. I have tried adjusting the margin and padding and also trying with javascript to sort something out thinking maybe it was the aspect ratio making things awkward but I have failed. In my clients window it goes off to the left slightly in full screen so it just isn't centering. Any help would be hugely appreciated, I have spent the last four days trying everything I can think of. Any suggestions would be amazing!
HTML:
HTML Code:
<!DOCTYPE html><html lang="en"><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="css/style.css" type="text/css" /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script><script type="text/javascript" src="transify.js"></script><script type="text/javascript">
$(document).ready(function() {
if ($(window).width() * .66625 < $(window).height()) {
$('#maximage').cycle({
fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 1000,
timeout: 7000,
width: $('#maximage').width(),
height: $('#maximage').width() * .66625,
fit: 1,
prev: '#arrow_left',
next: '#arrow_right'
});
} else {
$('#maximage').cycle({
fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 1000,
timeout: 7000,
width: $('#maximage').height() / .66625,
height: $('#maximage').height(),
fit: 1,
prev: '#arrow_left',
next: '#arrow_right'
});
}
if ($(window).width() > $('#maximage').width()) {
$('#maximage').css({'left': (($(window).width() - $('#maximage').width()) / 2) + 'px'});
}
$('#content').transify({opacityOrig:.7});
$('#menu li').transify({opacityOrig:.7});
});
function resizeBg() {
$('#maximage').cycle('destroy');
if ($(window).width() * .66625 < $(window).height()) {
$('#maximage').cycle({
fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 1000,
timeout: 7000,
width: $(window).width(),
height: $(window).width() * .66625,
fit: 1,
prev: '#arrow_left',
next: '#arrow_right'
});
} else {
$('#maximage').cycle({
fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 1000,
timeout: 7000,
width: $(window).height() / .66625,
height: $(window).height(),
fit: 1,
prev: '#arrow_left',
next: '#arrow_right'
});
}
if ($(window).width() > $('#maximage').width()) {
$('#maximage').css({'left': (($(window).width() - $('#maximage').width()) / 2) + 'px'});
}
}
$(window).resize(function() {
resizeBg();
}).trigger("resize");
$.extend(jQuery.easing,
{
easeInOutQuart: function(x, t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
return - c / 2 * ((t -= 2) * t * t * t - 2) + b;
}
});
$(function() {
$('.page').hide();
$('#menu li').click(
function() {
var content_id = $(this).attr('id');
$('#menu li').addClass('off');
$(this).removeClass('off');
if ($('.page').is(':visible'))
{
$('.page').hide();
$('.'+content_id).show();
}
else
{
$('#pages').animate({ height: '300px', easing: 'easeInOutQuart' });
console.log($(this).attr('id'));
$('.'+content_id).show();
}
});
});
$(function() {
var open = false;
$('#maximage').click(
function() {
$('#pages').animate({
height: '40px',
easing: 'easeInOutQuart'
},
function(){
$('.page').hide();
$('#menu li').removeClass('off');
});
});
});
</script><body><div id="logo"><img src="images/logo8.png" alt="Beauchamp's Corporate" width="300px" /></div><div id="cycle-loader"></div><div id="maximage"><img src="images/luggagelabel5.jpg" alt="" /><img src="images/wallet2.jpg" alt="" /><img src="images/luggagelabel4.jpg" alt="" /><img src="images/coasters2.jpg" alt="" /></div><a href="" id="arrow_left" class="button trans" title="Previous Photo"></a><a href="" id="arrow_right" class="button trans" title="Next Photo"></a><div id="pages"><div id="nav"><ul id="menu"><li id="product">Our Product</li><li id="contact">Contact Us</li></ul></div><div id="content"><div id="copy"><div class="page product"><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 class="page contact"><p>For further information:
<br /><em>Email:</em><a href="info@beauchampsoflondon.com">info@beauchampsoflondon.com</a><br /><em>Address:</em> 35 Bruton Street, London, W1J 6QY
<br /><em>Website:</em><a href="www.beauchampscorporate.com">www.beauchampscorporate.com</a><br /><em>Fashion Accessories Website:</em><a href="www.beauchampsoflondon.com">www.beauchampsoflondon.com</a></p></div></div></div></div></body></html>
Reply With Quote
Bookmarks