Hi all.

I have searched this issue for a long time now, and I am not seeing anything related to my issue, so I have a feeling it may be related to JQuery when used in DNN.

I am using an innerfade plugin to fade in and out of 15 small pictures.  The problem I am having is this.  When the page first loads, I see all 15 pictures for a split second before the jquery innerfade script runs.  Its almost like all the pictures load and display before the innerfade script has a change to take over.

This may be a stretch posting this issue here, but I am hoping there are some people with jquery experience that may be able to shed some light on how to stop this from happening.

Thanks,

John

Hi John, that sort of thing usually happens because jQuery plugins don't run until the page has loaded. So during the page load you see all the images briefly until the plugin has had a chance to hide them all. What I do in that sort of situation is to hide the relevant area of the page using CSS and use jQuery to show it again after the page has loaded. You can even use some plain JavaScript to document.write() the hiding CSS - this will mean it will still render even with JavaScript disabled.

I don't think that you can do much better than getting a reply from Mark Allan!

Thanks for the input Mark. Are you able to point me to an example on how to use Jquery to do this?

I don't want the items to be rendered if javascript is disabled because it will display images all down the page. I would prefer either having nothing show up if javascript is disabled, or possibly just the first

Hi John, The simplest way is to wrap all the content you want hidden in one or more DIVs, e.g. div clas s="hideMe". Then add a rule to your CSS to hide them: .hideMe { display:none }. Finally, add a bit of jQuery to show all the hidden content after the page has loaded: jQuery(function($) { $(".hideMe").show(); }); That should do it I think.

Thanks Mark. I had to do a little modification to what you wrote above, but I got it to work. Thanks for pointing me in the right direction. You saved me a LOT of frustration. I am posting the details for your FYI and in case someone else has a similar problem.

Here is what I ended up doing to get it to work. I already had a div element with a .testimonialholder clas s wrapped around all my individual testimonial div elements. This is what faded my testimonials in and out. Then, per your suggestion, I wrapped that with a div that had a new clas s   I created called .hideshow (with the CSS code display: none). I then added a modified version of the code you gave me above, and added it under the innerfade function. Below is a copy of the final JQuery code I am using both for innerfade and to unhide the content. It works great...Thanks again!

$(document).ready(
function(){
$('.testimonialholder').innerfade({
animationtype: 'fade',
speed: 2000,
timeout: 15000,
type: 'random_start',
containerheight: '1.5em'
});

$('.hideshow').show();
});

I'm trying to use that same innerfade jquery script but have no luck in getting it working. Would love to know where you added your jquery script for that to work as I've got one slideshow version working on a page but can't get this testimonials innerfade to work on that same page? Thanks, Andrew

I'm having a similar issue with images in my carousel/scrollable displaying for a split second before the page finishes loading. However, this *only* happens when I add additional jquery code AFTER the carousel.js script. When the additional code is not present, the page loads fine without showing all the images in

form.

I've successfully added the hideshow class, but since I know that the addition of the jquery code is what "breaks" the carousel for a split second, is there anything I can do to the additional jquery code to unbreak it?

Thanks in advance... I'm new to jquery so this is all a learning experience for me.

Are you using document.ready to prevent jQuery from working until the page is completely loaded?

Possibly, you may need to add some jQuery code to the pre-render event.  This is well beyond my level of knowledge ... other than to mention it.

Ask over on the DotNetNuke forums.  There are probably a lot more jQuery experts over there.

hey Mark, I saw your post and I need your help on the jQuery displaying my menu tabs.
First of all, I need my tabs to be displayed so that user can click on the "Login" button to login to the page.
However, after login, I need to temporary hide the menu so that he cant access any page until he has logged in by entering the one time password I have sent to him. After successfully logged in (password matched) then the menu tabs will be displayed.

I have tried to do this
a.menu
{
display: none:
}

this will disable the entire menu but I'm not sure at which part of the code should like put in my codes? like after page has loaded, where do I insert in my codes?

Use security roles to do that.

Hi Joe, erm nope, what I meant was that after the user has successfully logged in to the DNN database. I'll send them a random password for them to enter, at this point, they should not see the tabs on top of the menu bar. That's why I am using JQuery to temporary hide the menu bar.

Because each menu entry does have a separate name, you should be able to pick out the one(s) that you want to hide with jQuery.  You may find it helpful to use a menu format that will render as an unordered list so that you can do all of your manipulation with CSS and jQuery.

The DDR menu generates an XML document that contains lots of menu information and that is converted to HTML with an XLT stylesheet.  From there, you can use CSS and jQuery.  The combination is VERY powerful.  You have the option of looking at the XML, too.