• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 230
  • Last Modified:

Disappearing slide show

I have a slide show at www.mauitradewinds.com/Cycle/vanishing.htm    It is supposed to resize with the browser window.  Sometimes it does that, but much of the time is just vanishes when the window is resized.  Can this be fixed?
0
ddantes
Asked:
ddantes
  • 5
  • 4
1 Solution
 
COBOLdinosaurCommented:
I may be that the slide show requires minimum dimension and falls out when the window is resize less than that.  you could try setting min-width on the body of the page and see if that solves it.
0
 
ddantesAuthor Commented:
Thank you for your comment.  Could you please provide a code snippet which I can insert on my page?  And please let me know where to insert that.
0
 
COBOLdinosaurCommented:
in the styleheet:

body {min-width:600px}

or you can do it right in the body tag:

<body style="min-width:600px">

The second method is not good practice.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
ddantesAuthor Commented:
Thank you for that specification.  In a stylesheet which is linked to the page I added:

#body {min-width:600px;}

but the slide show still vanishes when the window is resized.  I tried the css code with and without a ";"  and also inserted that code within a style portion of the page itself.
0
 
COBOLdinosaurCommented:
The problem is not the CSS or the actual dimensions it is the actions fired in the resize function.

It does not matter what the size of the window is if you reload.  Even at a very small level it comes up. If you enlarge the window then it does the same thing as when you make it smaller.  Therefore the problem is here:

$(window).resize(function() {
	var slideShowWidth = $(window).width() / divis;
	var aspect = $(".slideshow").height() / $(".slideshow").width();
	$(".slideshow").height(aspect * slideShowWidth).width(slideShowWidth);
	$(".slideshow img").height(aspect * slideShowWidth).width(slideShowWidth);

Open in new window


The slide show goes away whenever that code is executed. I am not familar with the plugin you are using but I suspect that redefining the slideshow requires you to re-start it.  I am far from being a jscript expert and I use it very little, but that is what it looks like to me.  Most definitely my initial guess was wrong.  Sorry about that.
0
 
ddantesAuthor Commented:
Thank you for your comment.  However, I'm using the same code to resize the slide show at www.mauitradewinds.com/Cycle  and it does not disappear when the window is resized.  The problem developed when I tried to use a %width as a starting point for the slide show, instead of a fixed pixel width.  For that reason, I thought it was a styling issue.  Can you advise me how to substitute a % width instead of a fixed pixel width without making the show disappear?
0
 
COBOLdinosaurCommented:
I would not use a percentage directly.  In the resize function I would calculate as a fraction of the body width and apply it in pixels to the slideshow. I'm not sure what you are getting with the calculations you are doing there now.  If I want something; say 60% I  just do:

document.getElementById('someid').style.width=(parseInt(document.body.offsetWidth *.6)) + "px";

That retains the relationship with the body, but expresses the style in pixels.  So if the problem is going from pixels to percentage, this might be a way around the problem.
0
 
ddantesAuthor Commented:
Thank you.  I would like to test that approach.  Would you mind showing me where it belongs in the code for my page?
0
 
COBOLdinosaurCommented:
It needs to be in the resize function.  I'm not clear what the Jscript is doing there, but it looks like some kind of adjustment to the dimensions.  As I said before, I am not a Jscript expert so I am not sure of how to express the calculation in Jscript.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now