- This topic is empty.
-
AuthorPosts
-
November 15, 2009 at 3:51 pm #26771
Totoro
MemberHello,
I’ve been following a jquery image carousel tutorial and I can’t seem to get the carousel where I want it to be. I want it to be centered horizontally. It’s in the middle of the page in Firefox but in IE7 the image has moved to the right of the page. I have been fiddling with the code all afternoon but I don’t see what is wrong with it.
And I can’t figure out why the content beneath (Our location etc.) the image isn’t starting after the image. On the other pages eg. Information page the text area and the dividers are well positioned.Oh and if you run the page through the validator it will give you a bunch of errors but that’s because a pasted a googlemaps adres in it. The adress has alot of "&" in it, don’t know how to fix that.
Please forgive me if I have asked a question that’s been asked a million times before. I’m new to CSS and try to understand it as much as I can.Here’s how it look right now (in FF):
http://www.puppetbrain.com/temp/website/homeTest.htmlIt should look like this (in FF/Safari):
http://www.puppetbrain.com/temp/website/home.htmlThis is what I got in CSS (part of the code):
Code:/*—————— carousel ———————*/.infiniteCarousel .wrapper {
width: 940px; /* .infiniteCarousel width – (.wrapper margin-left + .wrapper margin-right) */
overflow: hidden;
height: 260px;
margin: 0;
padding:0;
position:absolute;
top: 0;
}.infiniteCarousel ul a img {
border: none;
}.infiniteCarousel .wrapper ul {
width: 9999px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
top: 0;
}.infiniteCarousel ul li {
display:block;
float:left;
padding: 0;
height: 260px;
width: 940px;
}.infiniteCarousel ul li a img {
display:block;
}.infiniteCarousel .arrow {
display: block;
height: 30px;
width: 19px;
background: url(img/btnArrowRight.jpg) no-repeat 0 0;
text-indent: -9999px;
position: absolute;
top: 112px;
right:0;
cursor: pointer;
}.infiniteCarousel .forward {
background-position: 0 0;
right: -40px;
}.infiniteCarousel .back {
background-position: 0 0;
left: -40px;
}.infiniteCarousel .forward:hover {
background-position: 0 -30px;
}.infiniteCarousel .back:hover {
background-position: 0 -30px;
}/*—————— carousel ———————*/
html:
Code:Orientouch $.fn.infiniteCarousel = function () {
function repeat(str, num) { return new Array( num + 1 ).join( str ); }
return this.each(function () { var $wrapper = $('> div', this).css('overflow', 'hidden'), $slider = $wrapper.find('> ul'), $items = $slider.find('> li'), $single = $items.filter(':first'),
singleWidth = $single.outerWidth(), visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border currentPage = 1, pages = Math.ceil($items.length / visible);
// 1. Pad so that 'visible' number will always be seen, otherwise create empty items if (($items.length % visible) != 0) { $slider.append(repeat('
', visible - ($items.length % visible))); $items = $slider.find('> li'); }
// 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned')); $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned')); $items = $slider.find('> li'); // reselect
// 3. Set the left position to the first 'real' item $wrapper.scrollLeft(singleWidth * visible);
// 4. paging function function gotoPage(page) { var dir = page < currentPage ? -1 : 1, n = Math.abs(currentPage - page), left = singleWidth * dir * visible * n; $wrapper.filter(':not(:animated)').animate({ scrollLeft : '+=' + left }, 500, function () { if (page == 0) { $wrapper.scrollLeft(singleWidth * visible * pages); page = pages; } else if (page > pages) { $wrapper.scrollLeft(singleWidth * visible); // reset back to start position page = 1; }
currentPage = page; });
return false; }
// 5. Bind to the forward and back buttons $('a.back', this).click(function () { return gotoPage(currentPage - 1); });
$('a.forward', this).click(function () { return gotoPage(currentPage + 1); });
// create a public interface to move to a specific page $(this).bind('goto', function (event, page) { gotoPage(page); }); }); };
$(document).ready(function () { $('.infiniteCarousel').infiniteCarousel(); });
Welcome to OrienTouch Entertainment. OrienTouch Entertainment is an independent and professional entertainment and events organization bureau which specializes in organizing both traditional and modern Chinese entertainment shows to cater to your explicit wishes.
November 15, 2009 at 4:41 pm #66625AshtonSanders
ParticipantHey, I would try absolute:positioning on the class.subhead. In IE7, it looks like that subhead is what is pushing the gallery to the right.
"Totoro" wrote:Oh and if you run the page through the validator it will give you a bunch of errors but that’s because a pasted a googlemaps adres in it. The adress has alot of "&" in it, don’t know how to fix that.Change all "&" to "&" That is the special character for &… everything will still work.
November 16, 2009 at 5:15 am #66637Totoro
MemberThanks. It’s positioned as I wanted in IE. Have to understand more about the positioning especially the absolute and relative part.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.