jQuery cycle slideshow resize problem

Question

On this page I have a splash screen in the middle which is 100% width and it rotates graphical images every 8 sec.

I have 3 div inside this slideshow. Main div contains the slideshow , internal div has repeater background image and internal div inside that has gradient image.

Problem 1. When you try to make the browser smaller ....website content adjust themselves and shifts on the left side.....however my slideshow content does not...currently I do not have content in it but you can see this by the black border. Slideshow stays in the middle.

How do I solve this ?

Problem 2. Once the browser is smaller in width and you load this page....slideshow renders in the center. Now maximize the browser ,you will see the because slideshow was rendered in the smaller screen....it will leave white space on the sides and div wont resize with the browser.

I have banged my head against this so any help and suggestion is welcome.

Answer 1

I've never used jquery.cycle before, but its adjusting your width based on the initial browser width when it renders. Upon resizing the browser, these widths are not being adjusted either, which is causing your ultimate problem.

Viewing your CSS, it appears you're trying to set a width of 100% directly to these divs (which is not taking affect since jquery.cycle is applying a width directly to the element overriding it). An immediate solution is specifying !important immediately following your widths on the div elements in your CSS (enforcing that the elements use your CSS directly).

For example (lets take the first blue div):

.fadein {
   width: 100% !important
}

.hd_splash_container_blue {
   width: 100% !important
   poisition: relative;
}

.main_blue {
   margin-left:70px;
   margin-right:70px;
   position: relative;
} 

This should allow you to re-size the browser successfully keeping the contents centered as desired.

I might suggest applying your CSS at a higher level, since the only changes between each high level is the image (which can be done as it is now). Take the rest of the CSS out and apply it at a high level:

.hd_splash_container {
   width: 100% !important
   poisition: relative;
}

.main_color {
   margin-left:70px;
   margin-right:70px;
   position: relative;
} 

Answer 2

I believe the very same affect can actually be achieved using the native options of the Cycle plugin. Try adding these rules like so:

$('#slides').cycle({ 
  resizeContainer: false,
  slideResize: false
});