Comments on: Recreating the MLB.com Content Switcher with jQuery and CSS3 http://www.impressivewebs.com/mlb-switcher/ Web Design Articles & Tutorials. To make the web impressive. Sat, 04 Feb 2012 01:11:21 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: Louis Lazaris http://www.impressivewebs.com/mlb-switcher/#comment-9846 Louis Lazaris Thu, 08 Sep 2011 05:22:49 +0000 http://www.impressivewebs.com/?p=1841#comment-9846 Hey, Justin. Most likely, the problem is occurring because of the following section of CSS in the stylesheet: <pre><code> #photo ul { margin-left: 0; width: 2880px; } </code></pre> You'll notice that the unordered list element is given a width of "2880px". You need to change that to be a number larger than the sum of all the image widths. That's something that I need to correct in the code, to make it more flexible. Really, that should not be set in the CSS. I should be calculating the width of all the images, then setting the width of that element in JavaScript, once the browser knows how many images there are, and how wide they are. So in your case, you can change that to 1250 multplied by the number of images you're including. If it's 6 images, then it would be <code>width: 7500px</code>. To be on the safe side, you should probably make it even bigger than that, maybe 8000. That should fix it, assuming I'm understanding your problem correctly. Hey, Justin. Most likely, the problem is occurring because of the following section of CSS in the stylesheet:


#photo ul {
	margin-left: 0;
	width: 2880px;
}

You’ll notice that the unordered list element is given a width of “2880px”. You need to change that to be a number larger than the sum of all the image widths. That’s something that I need to correct in the code, to make it more flexible.

Really, that should not be set in the CSS. I should be calculating the width of all the images, then setting the width of that element in JavaScript, once the browser knows how many images there are, and how wide they are.

So in your case, you can change that to 1250 multplied by the number of images you’re including. If it’s 6 images, then it would be width: 7500px. To be on the safe side, you should probably make it even bigger than that, maybe 8000.

That should fix it, assuming I’m understanding your problem correctly.

]]> By: Justin Clapper http://www.impressivewebs.com/mlb-switcher/#comment-9840 Justin Clapper Wed, 07 Sep 2011 17:07:10 +0000 http://www.impressivewebs.com/?p=1841#comment-9840 I'm trying to find a nice image carousel like yours for a business site I'm building, and I re-purposed it for 1250 x 600px images. Everything fine except I found that the images line up in a vertical stack instead of horizontally, thus after the first image cycles, you cant see the rest of them. Tried everything. Any ideas how to keep them horizontally aligned? I’m trying to find a nice image carousel like yours for a business site I’m building, and I re-purposed it for 1250 x 600px images. Everything fine except I found that the images line up in a vertical stack instead of horizontally, thus after the first image cycles, you cant see the rest of them. Tried everything. Any ideas how to keep them horizontally aligned?

]]> By: 网页前端设计爱好者 » Blog Archive » 很酷的 jQuery 幻灯片演示和下载-60款 http://www.impressivewebs.com/mlb-switcher/#comment-9793 网页前端设计爱好者 » Blog Archive » 很酷的 jQuery 幻灯片演示和下载-60款 Fri, 02 Sep 2011 09:11:22 +0000 http://www.impressivewebs.com/?p=1841#comment-9793 [...] MLB.com Content Switcher with jQuery and CSS3 (演示 | 下载) [...] [...] MLB.com Content Switcher with jQuery and CSS3 (演示 | 下载) [...]

]]> By: Louis Lazaris http://www.impressivewebs.com/mlb-switcher/#comment-9767 Louis Lazaris Tue, 30 Aug 2011 22:45:05 +0000 http://www.impressivewebs.com/?p=1841#comment-9767 Cool! Glad it worked out for you. Cool! Glad it worked out for you.

]]> By: Selene Lasasso http://www.impressivewebs.com/mlb-switcher/#comment-9697 Selene Lasasso Fri, 26 Aug 2011 11:22:30 +0000 http://www.impressivewebs.com/?p=1841#comment-9697 What a great blog post, is there any way I can receive an email when you write a new update? What a great blog post, is there any way I can receive an email when you write a new update?

]]> By: James Phillips http://www.impressivewebs.com/mlb-switcher/#comment-9667 James Phillips Mon, 22 Aug 2011 21:34:38 +0000 http://www.impressivewebs.com/?p=1841#comment-9667 Hey Louis: I thought you might want to see your code in action! I have provided you with a link to my latest web project. www.honeyvillegrain.com Hey Louis:

I thought you might want to see your code in action! I have provided you with a link to my latest web project.

http://www.honeyvillegrain.com

]]> By: Ergonomie web http://www.impressivewebs.com/mlb-switcher/#comment-9474 Ergonomie web Wed, 03 Aug 2011 08:10:50 +0000 http://www.impressivewebs.com/?p=1841#comment-9474 Nice use of CSS 3 I'll definitely use it Nice use of CSS 3 I’ll definitely use it

]]> By: James Phillips http://www.impressivewebs.com/mlb-switcher/#comment-9392 James Phillips Mon, 18 Jul 2011 22:23:39 +0000 http://www.impressivewebs.com/?p=1841#comment-9392 Cool, I guess I would have found that out sooner if I had some other browsers to test with at work. lol. I just started working for a company that has never had a real inhouse web dev and The IT department is lagging on giving me admin privileges, so I cant install any browser and have been testing in just IE8. Cool, I guess I would have found that out sooner if I had some other browsers to test with at work. lol. I just started working for a company that has never had a real inhouse web dev and The IT department is lagging on giving me admin privileges, so I cant install any browser and have been testing in just IE8.

]]> By: Louis Lazaris http://www.impressivewebs.com/mlb-switcher/#comment-9391 Louis Lazaris Mon, 18 Jul 2011 18:51:17 +0000 http://www.impressivewebs.com/?p=1841#comment-9391 I see the problem now. The problem you're describing is an IE-only issue. If you test in Chrome, Firefox, Safari, or Opera, it will do exactly what you want. I'm guessing the problem occurs in IE8 and below. I don't currently have IE9 installed, but I've tested in IE10, and it works fine in that. I'll have to check out the code when I get a chance, it might be a z-index thing or another problem. I see the problem now. The problem you’re describing is an IE-only issue. If you test in Chrome, Firefox, Safari, or Opera, it will do exactly what you want.

I’m guessing the problem occurs in IE8 and below. I don’t currently have IE9 installed, but I’ve tested in IE10, and it works fine in that. I’ll have to check out the code when I get a chance, it might be a z-index thing or another problem.

]]> By: James Phillips http://www.impressivewebs.com/mlb-switcher/#comment-9390 James Phillips Mon, 18 Jul 2011 18:41:52 +0000 http://www.impressivewebs.com/?p=1841#comment-9390 ok, here is the screen shot of this: http://i1089.photobucket.com/albums/i351/honeyville-graphics/help-me.jpg Hopefuly it makes sense. ok, here is the screen shot of this: http://i1089.photobucket.com/albums/i351/honeyville-graphics/help-me.jpg

Hopefuly it makes sense.

]]>