Content overlapping banner on first load

Oct 12, 2011 at 12:08 PM

I've only noticed this in Google Chrome, but when first loading a page with the content slider module on, the other page contents overlap until you navigate away and come back. Subsequent page visits are ok.

I'm using the slider with the Dark Knight theme, placed in the content pane, with other modules in the left and right panes. These are the ones which 'jump up' and overlap the banner.

Coordinator
Oct 14, 2011 at 1:23 AM

I test and develop in Google Chrome before other browsers.  The only conflict I know of with the DarkKnight skin is that the other optional transitions will not load.  I cannot reproduce your specific page load formatting issue.

Oct 14, 2011 at 7:17 AM
Edited Oct 14, 2011 at 11:58 AM

Thanks. It is an odd one. Screenshot below. Is there anything you could suggest I check, code wise, or tools which might show what the browser is trying to do (other than inspect element)?

Edit: This is interesting and may point to the source of my problem? http://dnngallery.com/blog/id/291/addressing-positioning-and-z-index-issue-in-dotnetnuke-60

Coordinator
Oct 17, 2011 at 1:53 AM

Honestly, this is difficult to answer.  I generally begin with the inspection tools and compare the elements against what I said they should be an look like against what is actually happening.  Then, I compare the elements against the CSS and markup itself to see what is different.  Depending on what I find during those two tests, I will have any number of ways to proceed.

Nov 11, 2011 at 1:43 PM

dear hismightiness,

We're also noticing this problem in IE and Chrome, first page load the slider overlaps, then after a refresh it looks fine.

You can see issue here:

http://coolcoyotesnew1.coolcoyotesinc.com

We're using the Morpheus skin and first contacted Evan about the issue, he replied with the following:

...
Thank you for purchasing Morpheus and SkinLab. 
I have a feeling that this is caused because there is a link tag "<|a|>" that is absolutely positioned and its wrapper is not specifically relatively positioned. This is within the slider module you are using. 
The developer of the module should be able to help with this, I was able to render the page just fine after removing the absolute positioning on the A tag. 
.....

Thots?

Thanks!

alf

Nov 17, 2011 at 10:24 AM

How do you remove the A tag, do you know?

Coordinator
Dec 28, 2011 at 12:31 AM

You shouldn't have to remove the A tag.  In fact, it is there as an added layer for designers to play with when they choose to do something cool with this module.  ;)

All you should need to do is to override the CSS.  All visual aspects of this module are handled there.  Exactly which CSS changes you make are dependent upon what you intend to happen.  Just add the overriding CSS to your portal.css through your Admin > Site Settings.

An (untested) example of something you might want to try would be:

.wns-slideshow-wrapper a { position: relative !important; }

The absolute attribute is actually applied by the Cycle jQuery plugin that's wrapped by the module.

Jan 3, 2012 at 9:25 AM

Thanks. That particular example didn't work but I have an understanding of how to tweak things from this and will experiment.

Coordinator
Jan 5, 2012 at 7:59 AM

As an afterthought...  Since the jQuery plugin is adding the CSS, you might need to override with your own CSS in jQuery.  Using the previous suggestion as an example, you might have the following jQuery in the footer/header of the module (wrapped in a script tag).

jQuery('wns-slideshow-wrapper a').css('position', 'relative');

Feb 2, 2012 at 10:15 PM

I was experiencing this same issue.  Thank you for the fix.  Although a "newbie" at this I'm willing to give it a try.  However, I don't know what page to put it on.  You say footer/header of the module...all I see are ascx files. 

Coordinator
Feb 3, 2012 at 4:01 AM

Joe:  Go into the Module Settings for the content slider module.  In the Module Settings (first) tab, find the header and footer in the Advanced Settings section.

Feb 3, 2012 at 2:01 PM

Hi,  It looks like it only placed the text at the top of the module and did not hide it.  This is what I pasted in: jQuery('wns-slideshow-wrapper a').css('position', 'relative');

Feb 3, 2012 at 3:10 PM

For myself, this turned out to be an issue with the height of the wrapper container not being dynamically set as intended for some reason. I'm not sure why, maybe a javascript conflict with the skin/container I'm using. But anyway, I seem to have solved this by going to Admin, Site Settings, and going into the Stylesheet Editor tab, and I added this line: 

.wns-slideshow-wrapper {height: 250px;}

(change 250 to whatever the number of pixels is you will be using for your content slider images)

Feb 3, 2012 at 7:35 PM

This seemed to work.  I'll keep an eye out....  Thanks!

Coordinator
Feb 22, 2012 at 3:25 AM

@ecwebmaster:  Does this fix appear to work consistently across instances, or dynamic per the instance and its specific content?

Feb 22, 2012 at 1:21 PM

I'm pretty new to dnn, and right now I only have a very basic configuration with one website running. So I haven't tested across multiple instances/websites. My vague understanding of where I added the CSS is that it would hard code a height value for any wns-slideshow-wrapper element, so I'm guessing that any instance including the content slider module would be affected. So if you had multiple sliders with different height images, this probably wouldn't be a good fix. A better fix would have been to solve this at the javascript level, but I couldn't figure out where the conflict was preventing the height from being dynamically set on initial load.

Oct 11, 2012 at 2:25 AM
Edited Oct 11, 2012 at 2:44 AM
ecwebmaster wrote:

For myself, this turned out to be an issue with the height of the wrapper container not being dynamically set as intended for some reason. I'm not sure why, maybe a javascript conflict with the skin/container I'm using. But anyway, I seem to have solved this by going to Admin, Site Settings, and going into the Stylesheet Editor tab, and I added this line: 

.wns-slideshow-wrapper {height: 250px;}

(change 250 to whatever the number of pixels is you will be using for your content slider images)

Hi, thank you for posting this. It solved my problem too.

In my case, the initial page load wouldn't show the images in the sliders, or show only about the top 30 pixels of it. When I did a page refresh or navigate back to the page, it would show the full images. I tested this in Chrome and Safari on my Mac, and Chrome and Firefox on my pc. After I applied your suggestion, the images seem to load fine on initial load www.chuckhan.com.

Thanks.

Han

Oct 11, 2012 at 12:37 PM
In my case, the initial page load wouldn't show the images in the sliders, or show only about the top 30 pixels of it. When I did a page refresh or navigate back to the page, it would show the full images. 


If I remember correctly, that is what happened for me too. Glad my suggestion worked. I think the issue is probably javascript and/or jquery related, and I suspect the conflict is with the skin I'm using. But I'm not strong enough with jquery to figure out exactly where the problem is. Out of curiosity, what skin are you using? I'm using an EasyMod skin by DrNuke.

Oct 11, 2012 at 1:28 PM
ecwebmaster wrote:
In my case, the initial page load wouldn't show the images in the sliders, or show only about the top 30 pixels of it. When I did a page refresh or navigate back to the page, it would show the full images. 


If I remember correctly, that is what happened for me too. Glad my suggestion worked. I think the issue is probably javascript and/or jquery related, and I suspect the conflict is with the skin I'm using. But I'm not strong enough with jquery to figure out exactly where the problem is. Out of curiosity, what skin are you using? I'm using an EasyMod skin by DrNuke.

Please visit my site www.chuckhan.com. It's using a free skin called Metropolis. 

Thanks again. 

Han

Nov 27, 2012 at 3:33 PM
Edited Nov 27, 2012 at 3:34 PM

I altered the skin itself. The above suggestion worked but it needed to be contained within itself. 

So I added individual id's to the skin then recalled them in the header part of the module skin. so this is how it goes- this is the skin code.

 

<!--I placed two divs to see if it will contain the content slider such as tryThis or orThis, hard setting the height of these containers-->
<div id="tryThis"><div id="TopPane" visible="false" runat="server"></div></div>

I made sure the div was outside the containing div so that the container I was using would be modified

Then the CSS

In the settings of the module you are able to set individual css so it would go something like this.

<style>
#tryThis{
height: 400px;
}
#orThis{
height:50px;
}
</style>

I had two of these content sliders interacting with each-other and needed them to work together without stacking.

Dec 8, 2013 at 9:52 PM
I realize this is an old thread, but I have a slightly different solution that I came up with after reading all your suggestions.
In the current version of browsers (IE 10, FF 25, Safari 5.1, Chrome 31), only Safari would not correctly set the container for the Cycle'd images.

In the header/footer of the jQuery Cycle HTML container, I placed the following:

Header:
<div id="jprinnerdiv">
<script  type="text/javascript"> 
$(document).ready(function() {
//  alert($('img.wns-slideshow-image-1').height());
  $('jprinnerdiv').css('height', $('img.wns-slideshow-image-1').height());
}); // set height for bug in Safari
</script>
Footer:
</div>
This creates a div (id=jprinnerdiv) and then uses the height of the first Cycle image (img.wns-slideshow-image-1) to expand the height of the container.
This is a little more responsive, as it gets the current height of the image in the viewport, not the original image size. So this works adequately when viewing on a smaller platform (ie iPhone).

Hope someone finds this helpful!

Thx!
Joe