[jQuery] Re: Could REALLY use some help implementing a slider/carousel. I think I am really close!
you keep focusing effort on the DIV wrapping the slider, but the not
the UL which is the first block level parent of the slider images. I'm
not sure why overflow on div not working but I would attack the UL with
float, height, overflow etc. With those huge images and therefore very
slow load times whatever you do it will take a while for slider script
to run on load.
Alan wrote:
Tried that...still same result.
On Jul 19, 7:47pm, Glazz brunofgas...@live.com.pt wrote:
Hmm i tried to replicate that on my server but whithout success...
You can try what i've mentioned in my previous post, display: none;
like this:
HTML:
div id="slider" align="center" style="display: none;"
JS:
Add this
$('#slider').css({'display' : 'block'});
After
this.each(function() {
It will look like this:
this.each(function() {
$('#slider').css({'display' : 'block'});
Try it please...
On 20 Jul, 02:25, Alan alanblackf...@gmail.com wrote:
I can show css or slider code if it helps.
Slider CSS below
--
@charset "utf-8";
/* CSS Document */
#slidercontent{
position:relative;
}
#slidercontainer{
margin:0 auto;
position:relative;
text-align:left;
width:896px;
background:#fff;
margin-bottom:2em;
}
/* clearfix */
#slidercontent:after, ul:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#slidercontent, ul{
display:block;
}
/* \*/
#slidercontent, ul{
min-height:1%;
}
* html #slidercontent, * html ul{
height:1%;
}
/* // clearfix */
/* image replacement */
.graphic, #header h1, #prevBtn, #nextBtn{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
/* // image replacement */
/* Easy Slider */
#slider{}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided
here
*/
width:896px;
height:171px;
overflow:hidden;
}
#prevBtn, #nextBtn{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:41px;
}
#nextBtn{
left:896px;
}
#prevBtn a, #nextBtn a{
display:block;
width:30px;
height:77px;
background:url(/includes/sliders/images/btn_prev.gif) no-repeat 0
0;
}
#nextBtn a{
background:url(/includes/sliders/images/btn_next.gif) no-repeat 0
0;
}
/* // Easy Slider */
Actual Slider Code
-
(function($) {
$.fn.easySlider = function(options){
// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText:'',
nextId: 'nextBtn',
nextText:'',
controlsShow: true,
controlsBefore: '',
controlsAfter: '',
controlsFade: true,
firstId:'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText:'Last',
lastShow:false,
vertical:false,
speed: 800,
auto: false,
pause: 4000,
continuous: false
};
var options = $.extend(defaults, options);
this.each(function() {
var obj = $(this);
var s = $("li", obj).length;
var w = $("li", obj).width();
var h = $("li", obj).height();
obj.width(w);
obj.height(h);
obj.css("overflow","hidden");
var ts = s-1;
var t = 0;
$("ul", obj).css('width',s*w);
if(!options.vertical) $("li", obj).css('float','left');
if(options.controlsShow){
var html = options.controlsBefore;
if(options.firstShow) html += 'span id="'+ options.firstId +'"a
href="" class="moz-txt-link-rfc2396E" href="_javascript_:void(0);\">"_javascript_:void(0);\"'+ options.firstText +'/a/span';
html += ' span id="'+ options.prevId +'"a href="" class="moz-txt-link-rfc2396E"
[jQuery] Re: Could REALLY use some help implementing a slider/carousel. I think I am really close!
Hey, that took care of Problem #1 It no longer shows the content on page load. It still shows the content to the left and right of the screen, causing a browser scrollbar at the bottom in IE 7. But closer yet..lol Still can't figure out that issue though..ben playing with CSS, but not sure where to attack.
[jQuery] Re: Could REALLY use some help implementing a slider/carousel. I think I am really close!
fyi...so it works perfect in Firefox nowjust don't know how to fix the overflow issue in IE 7. On Jul 20, 6:21 am, Alan alanblackf...@gmail.com wrote: Hey, that took care of Problem #1 It no longer shows the content on page load. It still shows the content to the left and right of the screen, causing a browser scrollbar at the bottom in IE 7. But closer yet..lol Still can't figure out that issue though..ben playing with CSS, but not sure where to attack.
[jQuery] Re: Could REALLY use some help implementing a slider/carousel. I think I am really close!
for starters your images are huge ...sampled a couple .Judy Dench is 1728px 2304px (scaled to 449px 600px) and file size is 350kb! that's a huge amount of loading time for the number of images you have Alan wrote: OKgranted I am totally a rookie here...but I am S stuck! Could anyone look at this page: http://www.movieeye.com/index-new.jsp and help me with either of the two big problems I am having??? Problem #1: When the content is loading (3 content div's worth) it shows ALL of the content before it collapses into the slider. Problem #2: The previous content doesn't disappear when you click the button, but rather scrolls way off the page (either left or right). Both of these problems will be blatantly obvious when you go to the page Any ideas whatsoever that could fix this? If any code is needed, let me know, happy to share it! I'd greatly appreciate any help! Alan
[jQuery] Re: Could REALLY use some help implementing a slider/carousel. I think I am really close!
Yeah, I know. As part of the re-write we will deal with the image issue. The page load time on the actual site is aweful. On Jul 19, 10:11 am, Charlie charlie...@gmail.com wrote: for starters your images are huge ...sampled a couple .Judy Dench is 1728px × 2304px (scaled to 449px × 600px) and file size is 350kb! that's a huge amount of loading time for the number of images you have Alan wrote:OKgranted I am totally a rookie here...but I am S stuck! Could anyone look at this page:http://www.movieeye.com/index-new.jspand help me with either of the two big problems I am having??? Problem #1: When the content is loading (3 content div's worth) it shows ALL of the content before it collapses into the slider. Problem #2: The previous content doesn't disappear when you click the button, but rather scrolls way off the page (either left or right). Both of these problems will be blatantly obvious when you go to the page Any ideas whatsoever that could fix this? If any code is needed, let me know, happy to share it! I'd greatly appreciate any help! Alan
[jQuery] Re: Could REALLY use some help implementing a slider/carousel. I think I am really close!
Hi, I dunno how your plugin works, but here goes my 2 cents #Problem 1: Why don't place a display: none; style? Dunno if this works with your plugin but, you can do this and in inside your plugin just show the content you need to show... #Problem 2: Don't understand what you mean for scrolls way off the page (either left or right) On 19 Jul, 22:19, Alan alanblackf...@gmail.com wrote: Yeah, I know. As part of the re-write we will deal with the image issue. The page load time on the actual site is aweful. On Jul 19, 10:11 am, Charlie charlie...@gmail.com wrote: for starters your images are huge ...sampled a couple .Judy Dench is 1728px × 2304px (scaled to 449px × 600px) and file size is 350kb! that's a huge amount of loading time for the number of images you have Alan wrote:OKgranted I am totally a rookie here...but I am S stuck! Could anyone look at this page:http://www.movieeye.com/index-new.jspandhelp me with either of the two big problems I am having??? Problem #1: When the content is loading (3 content div's worth) it shows ALL of the content before it collapses into the slider. Problem #2: The previous content doesn't disappear when you click the button, but rather scrolls way off the page (either left or right). Both of these problems will be blatantly obvious when you go to the page Any ideas whatsoever that could fix this? If any code is needed, let me know, happy to share it! I'd greatly appreciate any help! Alan
[jQuery] Re: Could REALLY use some help implementing a slider/carousel. I think I am really close!
Problem #1: not sure where i would put that, but I will check it out. Problem #2: In IE 7, if you click on the arrow to scroll left or right, you can see the previous content off to the side of the slider. interesting you didn't see it, so I checked out Firefox, and sure enough, the problem is IE specific...joy, that will be fun to figure out! On Jul 19, 4:52 pm, Glazz brunofgas...@live.com.pt wrote: Hi, I dunno how your plugin works, but here goes my 2 cents #Problem 1: Why don't place a display: none; style? Dunno if this works with your plugin but, you can do this and in inside your plugin just show the content you need to show... #Problem 2: Don't understand what you mean for scrolls way off the page (either left or right) On 19 Jul, 22:19, Alan alanblackf...@gmail.com wrote: Yeah, I know. As part of the re-write we will deal with the image issue. The page load time on the actual site is aweful. On Jul 19, 10:11 am, Charlie charlie...@gmail.com wrote: for starters your images are huge ...sampled a couple .Judy Dench is 1728px × 2304px (scaled to 449px × 600px) and file size is 350kb! that's a huge amount of loading time for the number of images you have Alan wrote:OKgranted I am totally a rookie here...but I am S stuck! Could anyone look at this page:http://www.movieeye.com/index-new.jspandhelpme with either of the two big problems I am having??? Problem #1: When the content is loading (3 content div's worth) it shows ALL of the content before it collapses into the slider. Problem #2: The previous content doesn't disappear when you click the button, but rather scrolls way off the page (either left or right). Both of these problems will be blatantly obvious when you go to the page Any ideas whatsoever that could fix this? If any code is needed, let me know, happy to share it! I'd greatly appreciate any help! Alan- Hide quoted text - - Show quoted text -
[jQuery] Re: Could REALLY use some help implementing a slider/carousel. I think I am really close!
I can show css or slider code if it helps.
Slider CSS below
--
@charset utf-8;
/* CSS Document */
#slidercontent{
position:relative;
}
#slidercontainer{
margin:0 auto;
position:relative;
text-align:left;
width:896px;
background:#fff;
margin-bottom:2em;
}
/* clearfix */
#slidercontent:after, ul:after{
content:.;
display:block;
height:0;
clear:both;
visibility:hidden;
}
#slidercontent, ul{
display:block;
}
/* \*/
#slidercontent, ul{
min-height:1%;
}
* html #slidercontent, * html ul{
height:1%;
}
/* // clearfix */
/* image replacement */
.graphic, #header h1, #prevBtn, #nextBtn{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
/* // image replacement */
/* Easy Slider */
#slider{}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the
parameters provided
here
*/
width:896px;
height:171px;
overflow:hidden;
}
#prevBtn, #nextBtn{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:41px;
}
#nextBtn{
left:896px;
}
#prevBtn a, #nextBtn a{
display:block;
width:30px;
height:77px;
background:url(/includes/sliders/images/btn_prev.gif) no-repeat 0
0;
}
#nextBtn a{
background:url(/includes/sliders/images/btn_next.gif) no-repeat 0
0;
}
/* // Easy Slider */
Actual Slider Code
-
(function($) {
$.fn.easySlider = function(options){
// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: '',
nextId: 'nextBtn',
nextText: '',
controlsShow: true,
controlsBefore: '',
controlsAfter: '',
controlsFade: true,
firstId:'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: false,
speed: 800,
auto: false,
pause: 4000,
continuous: false
};
var options = $.extend(defaults, options);
this.each(function() {
var obj = $(this);
var s = $(li, obj).length;
var w = $(li, obj).width();
var h = $(li, obj).height();
obj.width(w);
obj.height(h);
obj.css(overflow,hidden);
var ts = s-1;
var t = 0;
$(ul, obj).css('width',s*w);
if(!options.vertical) $(li, obj).css('float','left');
if(options.controlsShow){
var html = options.controlsBefore;
if(options.firstShow) html += 'span id='+
options.firstId +'a
href=\javascript:void(0);\'+ options.firstText +'/a/span';
html += ' span id='+ options.prevId +'a
href=\javascript:void
(0);\'+ options.prevText +'/a/span';
html += ' span id='+ options.nextId +'a
href=\javascript:void
(0);\'+ options.nextText +'/a/span';
if(options.lastShow) html += ' span id='+
options.lastId +'a
[jQuery] Re: Could REALLY use some help implementing a slider/carousel. I think I am really close!
Hmm i tried to replicate that on my server but whithout success...
You can try what i've mentioned in my previous post, display: none;
like this:
HTML:
div id=slider align=center style=display: none;
JS:
Add this
$('#slider').css({'display' : 'block'});
After
this.each(function() {
It will look like this:
this.each(function() {
$('#slider').css({'display' : 'block'});
Try it please...
On 20 Jul, 02:25, Alan alanblackf...@gmail.com wrote:
I can show css or slider code if it helps.
Slider CSS below
--
@charset utf-8;
/* CSS Document */
#slidercontent{
position:relative;
}
#slidercontainer{
margin:0 auto;
position:relative;
text-align:left;
width:896px;
background:#fff;
margin-bottom:2em;
}
/* clearfix */
#slidercontent:after, ul:after{
content:.;
display:block;
height:0;
clear:both;
visibility:hidden;
}
#slidercontent, ul{
display:block;
}
/* \*/
#slidercontent, ul{
min-height:1%;
}
* html #slidercontent, * html ul{
height:1%;
}
/* // clearfix */
/* image replacement */
.graphic, #header h1, #prevBtn, #nextBtn{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
/* // image replacement */
/* Easy Slider */
#slider{}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the
parameters provided
here
*/
width:896px;
height:171px;
overflow:hidden;
}
#prevBtn, #nextBtn{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:41px;
}
#nextBtn{
left:896px;
}
#prevBtn a, #nextBtn a{
display:block;
width:30px;
height:77px;
background:url(/includes/sliders/images/btn_prev.gif)
no-repeat 0
0;
}
#nextBtn a{
background:url(/includes/sliders/images/btn_next.gif)
no-repeat 0
0;
}
/* // Easy Slider */
Actual Slider Code
-
(function($) {
$.fn.easySlider = function(options){
// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: '',
nextId: 'nextBtn',
nextText: '',
controlsShow: true,
controlsBefore: '',
controlsAfter: '',
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: false,
speed: 800,
auto: false,
pause: 4000,
continuous: false
};
var options = $.extend(defaults, options);
this.each(function() {
var obj = $(this);
var s = $(li, obj).length;
var w = $(li, obj).width();
var h = $(li, obj).height();
obj.width(w);
obj.height(h);
obj.css(overflow,hidden);
var ts = s-1;
var t = 0;
$(ul, obj).css('width',s*w);
if(!options.vertical) $(li,
obj).css('float','left');
[jQuery] Re: Could REALLY use some help implementing a slider/carousel. I think I am really close!
Tried that...still same result.
On Jul 19, 7:47 pm, Glazz brunofgas...@live.com.pt wrote:
Hmm i tried to replicate that on my server but whithout success...
You can try what i've mentioned in my previous post, display: none;
like this:
HTML:
div id=slider align=center style=display: none;
JS:
Add this
$('#slider').css({'display' : 'block'});
After
this.each(function() {
It will look like this:
this.each(function() {
$('#slider').css({'display' : 'block'});
Try it please...
On 20 Jul, 02:25, Alan alanblackf...@gmail.com wrote:
I can show css or slider code if it helps.
Slider CSS below
--
@charset utf-8;
/* CSS Document */
#slidercontent{
position:relative;
}
#slidercontainer{
margin:0 auto;
position:relative;
text-align:left;
width:896px;
background:#fff;
margin-bottom:2em;
}
/* clearfix */
#slidercontent:after, ul:after{
content:.;
display:block;
height:0;
clear:both;
visibility:hidden;
}
#slidercontent, ul{
display:block;
}
/* \*/
#slidercontent, ul{
min-height:1%;
}
* html #slidercontent, * html ul{
height:1%;
}
/* // clearfix */
/* image replacement */
.graphic, #header h1, #prevBtn, #nextBtn{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
/* // image replacement */
/* Easy Slider */
#slider{}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the
parameters provided
here
*/
width:896px;
height:171px;
overflow:hidden;
}
#prevBtn, #nextBtn{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:41px;
}
#nextBtn{
left:896px;
}
#prevBtn a, #nextBtn a{
display:block;
width:30px;
height:77px;
background:url(/includes/sliders/images/btn_prev.gif)
no-repeat 0
0;
}
#nextBtn a{
background:url(/includes/sliders/images/btn_next.gif)
no-repeat 0
0;
}
/* // Easy Slider */
Actual Slider Code
-
(function($) {
$.fn.easySlider = function(options){
// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: '',
nextId: 'nextBtn',
nextText: '',
controlsShow: true,
controlsBefore: '',
controlsAfter: '',
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: false,
speed: 800,
auto: false,
pause: 4000,
continuous: false
};
var options = $.extend(defaults, options);
this.each(function() {
var obj = $(this);
var s = $(li, obj).length;
var w = $(li, obj).width();
var h = $(li, obj).height();
obj.width(w);
obj.height(h);
obj.css(overflow,hidden);
