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.
efzAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

brendanmeyerCommented:
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
0
efzAuthor Commented:
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.
0
brendanmeyerCommented:
you can put the unhide code after the part where it downloads the dynamic code for the widgets, so it should unhide after that

you could setup another <div> that has the size of the widgets and have that as visible, and in the unhide code, hide this area as you unhide the widget code

sorry if it doesn't make sense
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

efzAuthor Commented:
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.
0
efzAuthor Commented:
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.
0
brendanmeyerCommented:
good to know you worked it out,
0
efzAuthor Commented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.