Link to home
Start Free TrialLog in
Avatar of efz
efzFlag for United States of America

asked on

Hiding selected content when an asp page loads

Good Evening Experts,

Earlier this afternoon, Expert Shishir_sri provided me with a fabulous bit of code for dynamically changing the content of one of my asp pages. The code cycles through three weather widgets providing a weather report for three major cities every 5 seconds. The code works by placing all three widgets on the page and then hiding two of them at time, and looping through all three one at a time. It works great and I’m very happy with it, however, when the page is initially loaded, for about 5 seconds, the three widgets are all visible at the same time stacked vertically. The effect when one first views the page is a bit distracting and I was wondering whether two of the widgets could be hidden right at the get-go instead having to wait 5 seconds for the effect to kick in. This type of coding is a bit out of the scope of the type of programming that I do, so I was unable to figure out how to do this on my own. If you wanted to see the code provided by Expert Shishir_sri, you could take a look at the question titled “Dynamically changing the content of an asp.net page” which is ID28255692 I believe.

Thanks for the help.
Avatar of Brendan M
Brendan M
Flag of Australia image

You could have the <tag> which stores the dynamic widgets with "style visibility:hidden" and then update it programmically once the page has loaded

sorry unsure how to change it using asp
Avatar of efz

ASKER

Brendan,

Sincere thanks for your prompt feedback.

As you suggested, I attached “style=visibility:hidden” to the <div> tags that enclose two of the three widgets that I wanted to hide when the page loads. While this technique did effectively hide the widgets, when the page loaded, the space that would have been occupied by the hidden widgets pushed the rest of the page down, and it wasn’t until the rotation function kicked in (after the first 5 seconds) that the page snapped back into alignment – much the same effect I was trying to avoid when the widgets weren’t hidden. I suppose that trade off might not be so bad (since visitors would only see the first widget on pageload), but I was unable to figure out where to place the “unhide” code, so the question becomes how and where do I put the code to unhide them? Because when the rotation function subsequently “showed” either of the hidden widgets, they appeared as blank spaces.

Any ideas on this? And thanks again.
ASKER CERTIFIED SOLUTION
Avatar of Brendan M
Brendan M
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of efz

ASKER

Brendan,

I'll keep playing around along the lines of your suggestion, but I'm afraid my skill level in the area of jquery is about zero and your well-intentioned comments do not supply enough details for me to trudge my way to a solution. I'll spend another day on this and keep you posted.

Thanks for your help and don't hesitate to let me know if you come up with anything else.
Avatar of efz

ASKER

Brendan,

I appear to have got it. After each widget was defined, I placed the following code which was cobbled from that supplied earlier by Expert Shishir_sri in a related question. It had the effect of initially hiding the widget while the page was being loaded. Here's the code:

<script type="text/javascript">
  $('#weather1').stop().hide();
</script>

When the page finally loads, Shishir_sri's jQuery code unhides and loops through the weather widgets one at a time as it was designed to do. Very happy with the results. Not bad considering I know nothing about jQuery.

Thanks a million.
good to know you worked it out,
Avatar of efz

ASKER

I couldn't have don it without you. You focused me in the right direction and Shishir_sri provided the jQuery code snippet. Again, thanks much and have a great weekend.