Dynamically changing the content of an asp.net page

Hello Experts,

I created an asp.net page that includes a weather widget script. It works fine, however, I'd like to have the page rotate through selected weather scripts once every 10 seconds. For example, when the page is first viewed the weather widget might show the weather for New York. In 10 seconds I'd like to substitute the widget for Houston. In 10 more seconds substitute the widget for Los Angeles, etc. Rotating through the three widgets continuously while the page is being viewed.

Microsoft Expression creates an associated VB code page for each asp page and I can write some very basic VB code, but I haven't figured out how to accomplish this task.

Any guidance would be greatly appreciated.
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.

shishir_sriCommented:
It'll be helpful if you can provide some relevant code or files.
0
efzAuthor Commented:
Hello shishir_sri,

Your answer to my last question was very enlightening. Thank you. Here's the code you requested. Essentially it is a single-cell table that contains a weather widget for Cleveland, Ohio.

I stripped away some of the irrelevant content, so there may be some style references in the code below that are orphaned, but otherwise this is it. My desire is to replace the weather widget every 10 seconds with that of a different city. As you can probably see, the widget is contained on lines 10 through 30.

I hope this is helpful.

<%@ Page Language="VB" ClientTarget="uplevel" masterpagefile="master/pss.master" title="Puritas Springs Software" CodeFile="index.aspx.vb" Inherits="index" %>
<asp:Content id="Content1" runat="server" contentplaceholderid="ContentPlaceHolder1">

	<table class="style8" style="width: 100%" cellspacing="16">
            <tr>
                <td style="width: 50%; height: 23%;" class="ctr">
                	<table style="width: 100%">
						<tr>
							<td id="somename">
<link rel="stylesheet" type="text/css" media="screen" href="http://img.weather.weatherbug.com/Style/stickers/v2/Stickers_125x125.css" /> 
<div class="wXbody">
	<div class="wXguts">
   		<iframe id="WeatherBugSticker_125x125_v2" src="http://weather.weatherbug.com/desktop-weather/web-widgets/getSticker.html?ZipCode=44111&ZCode=z5545&Size=125x125&StationID=CLMPZ&units=0&Version=2&lang_id=en-us" width="123" height="70" frameborder="0" scrolling="no" allowtransparency="yes"></iframe> 

		<div class="wXlinks">
			<span class="link"><a href="http://weather.weatherbug.com/weather-forecast.html" target="_blank" onclick="Javascript:this.href='http://weather.weatherbug.com/OH/Cleveland-weather/local-forecast/7-day-forecast.html?zcode=z5545&units=0'">
			Forecast</a></span>
			<span class="link"><a href="http://weather.weatherbug.com/doppler-radar.html" target="_blank" onclick="Javascript:this.href='http://weather.weatherbug.com/OH/Cleveland-weather/local-radar/doppler-radar.html?zcode=z5545&units=0'">
			Radar</a></span>
			<span class="link"><a href="http://weather.weatherbug.com/weather-cams.html" target="_blank" onclick="Javascript:this.href='http://weather.weatherbug.com/OH/Cleveland-weather/weather-cams/local-cams.html?zcode=z5545&units=0'">
			Cameras</a></span>
		</div>
		<div class="wXlogo">
			<a href="http://weather.weatherbug.com/default.html" target="_blank" onclick="Javascript:this.href='http://weather.weatherbug.com/OH/Cleveland-weather.html?zcode=z5545&units=0'"><img src="http://img.weather.weatherbug.com/images/stickers/v2/125x125/wxbug-logo.jpg" border="0" alt="WeatherBug"/></a>
		</div>
	</div>
</div>
				        
							                            </td>
							<td>&nbsp;</td>
						</tr>
					</table>
                </td>
            </tr>
        	</table>
		        			
</asp:Content>
<asp:Content id="Content2" runat="server" contentplaceholderid="head">

	<style type="text/css">
.style3 {
	text-align: left;
}
.style4 {
	text-align: left;
	background-color: #B6BEC5;
}
.style5 {
	font-weight: normal;
}
.style6 {
	margin-left: 2px;
}
.style7 {
	border-width: 0;
	text-align: center;
}
.style8 {
	border-style: solid;
	border-width: 1px;
}
.style9 {
	border-width: 0;
	text-align: left;
}
.style10 {
	border: 1px solid #000000;
	text-align: left;
	background-color: #B6BEC5;
}
.style11 {
	text-align: left;
	font-size: small;
}
.style14 {
	margin-left: 19px;
}
</style>

</asp:Content>

Open in new window

0
shishir_sriCommented:
Hey efz,

Please take a look at this code:

<td id="somename">

<link rel="stylesheet" type="text/css" media="screen" href="http://img.weather.weatherbug.com/Style/stickers/v2/Stickers_125x125.css" />

<div class="wXbody" id="weather1">
  <div class="wXguts">
    <iframe id="WeatherBugSticker_125x125_v2" src="http://weather.weatherbug.com/desktop-weather/web-widgets/getSticker.html?ZipCode=44111&ZCode=z5545&Size=125x125&StationID=CLMPZ&units=0&Version=2&lang_id=en-us" width="123" height="70" frameborder="0" scrolling="no" allowtransparency="yes"></iframe> 
    <div class="wXlinks">
      <span class="link">
        <a href="http://weather.weatherbug.com/weather-forecast.html" target="_blank" onclick="Javascript:this.href='http://weather.weatherbug.com/OH/Cleveland-weather/local-forecast/7-day-forecast.html?zcode=z5545&units=0'">Forecast</a>
      </span>
      <span class="link">
        <a href="http://weather.weatherbug.com/doppler-radar.html" target="_blank" onclick="Javascript:this.href='http://weather.weatherbug.com/OH/Cleveland-weather/local-radar/doppler-radar.html?zcode=z5545&units=0'">Radar</a>
      </span>
      <span class="link">
        <a href="http://weather.weatherbug.com/weather-cams.html" target="_blank" onclick="Javascript:this.href='http://weather.weatherbug.com/OH/Cleveland-weather/weather-cams/local-cams.html?zcode=z5545&units=0'">Cameras</a>
      </span>
    </div>
    <div class="wXlogo">
      <a href="http://weather.weatherbug.com/default.html" target="_blank" onclick="Javascript:this.href='http://weather.weatherbug.com/OH/Cleveland-weather.html?zcode=z5545&units=0'">
        <img src="http://img.weather.weatherbug.com/images/stickers/v2/125x125/wxbug-logo.jpg" border="0" alt="WeatherBug"/>
      </a>
    </div>
  </div>
</div>

<div class="wXbody" id="weather2">
  <div class="wXguts">
    <iframe id="WeatherBugSticker_125x125_v2" src="http://weather.weatherbug.com/desktop-weather/web-widgets/getSticker.html?ZipCode=44111&ZCode=z5545&Size=125x125&StationID=CLMPZ&units=0&Version=2&lang_id=en-us" width="123" height="70" frameborder="0" scrolling="no" allowtransparency="yes"></iframe> 
    <div class="wXlinks">
      <span class="link">
        <a href="http://weather.weatherbug.com/weather-forecast.html" target="_blank" onclick="Javascript:this.href='http://weather.weatherbug.com/OH/Cleveland-weather/local-forecast/7-day-forecast.html?zcode=z5545&units=0'">Forecast</a>
      </span>
      <span class="link">
        <a href="http://weather.weatherbug.com/doppler-radar.html" target="_blank" onclick="Javascript:this.href='http://weather.weatherbug.com/OH/Cleveland-weather/local-radar/doppler-radar.html?zcode=z5545&units=0'">Radar</a>
      </span>
      <span class="link">
        <a href="http://weather.weatherbug.com/weather-cams.html" target="_blank" onclick="Javascript:this.href='http://weather.weatherbug.com/OH/Cleveland-weather/weather-cams/local-cams.html?zcode=z5545&units=0'">Cameras</a>
      </span>
    </div>
    <div class="wXlogo">
      <a href="http://weather.weatherbug.com/default.html" target="_blank" onclick="Javascript:this.href='http://weather.weatherbug.com/OH/Cleveland-weather.html?zcode=z5545&units=0'">
        <img src="http://img.weather.weatherbug.com/images/stickers/v2/125x125/wxbug-logo.jpg" border="0" alt="WeatherBug"/>
      </a>
    </div>
  </div>
</div>

<div class="wXbody" id="weather3">
  <div class="wXguts">
    <iframe id="WeatherBugSticker_125x125_v2" src="http://weather.weatherbug.com/desktop-weather/web-widgets/getSticker.html?ZipCode=44111&ZCode=z5545&Size=125x125&StationID=CLMPZ&units=0&Version=2&lang_id=en-us" width="123" height="70" frameborder="0" scrolling="no" allowtransparency="yes"></iframe> 
    <div class="wXlinks">
      <span class="link">
        <a href="http://weather.weatherbug.com/weather-forecast.html" target="_blank" onclick="Javascript:this.href='http://weather.weatherbug.com/OH/Cleveland-weather/local-forecast/7-day-forecast.html?zcode=z5545&units=0'">Forecast</a>
      </span>
      <span class="link">
        <a href="http://weather.weatherbug.com/doppler-radar.html" target="_blank" onclick="Javascript:this.href='http://weather.weatherbug.com/OH/Cleveland-weather/local-radar/doppler-radar.html?zcode=z5545&units=0'">Radar</a>
      </span>
      <span class="link">
        <a href="http://weather.weatherbug.com/weather-cams.html" target="_blank" onclick="Javascript:this.href='http://weather.weatherbug.com/OH/Cleveland-weather/weather-cams/local-cams.html?zcode=z5545&units=0'">Cameras</a>
      </span>
    </div>
    <div class="wXlogo">
      <a href="http://weather.weatherbug.com/default.html" target="_blank" onclick="Javascript:this.href='http://weather.weatherbug.com/OH/Cleveland-weather.html?zcode=z5545&units=0'">
        <img src="http://img.weather.weatherbug.com/images/stickers/v2/125x125/wxbug-logo.jpg" border="0" alt="WeatherBug"/>
      </a>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function() {
    var weatherCounter = 1;
    setInterval(function() {
      $('.wXbody').stop().hide();
      $('#weather' + weatherCounter).show('fast');
      weatherCounter++;
      if(weatherCounter > 3) {
        weatherCounter = 1;
      }
    }, 5000);
  });
</script>

</td>

Open in new window


I've used jQuery to show/hide the weather widgets. If you do not wish to use jQuery, let me know.

This code will basically replace your table cell.

As you can see, I've triplicated the weather widget, and each widget has a unique ID (weather1, weather2, weather 3) - Line numbers 5, 27, 49

The CSS only needs to be linked to, once. - Line number 3

Now, the script at the bottom of the code (Line numbers 71 to 83) cycles through the 3 widgets every 5 seconds. It hides all of them, and displays the one that needs to be displayed.

Let me know if you have any questions.
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
Exploring SQL Server 2016: Fundamentals

Learn the fundamentals of Microsoft SQL Server, a relational database management system that stores and retrieves data when requested by other software applications.

efzAuthor Commented:
Good morning shishir_sri,

Excellent work on your part, as usual I suspect. Thank you very much. Unfortunately, I'm not familiar with jQuery as my web programming skills are very basic, but if it works, that's all that's important.

The question or problem that I still have is that when you requested some code, I stripped my page of all other parts which were not related to the weather widget, so that it would help to focus on the part that which was the subject of my question. In reality, the table itself is larger than just one cell and contains additional content in the other cells.

If I understand your solution, you'd have me abandon the table in favor of CSS and I'm not eager to rewrite the entire page. Also, while I can work with tables quite easily, I'm not at all knowledgeable regarding CSS. Can your solution be implemented in the context of the existing table or is that not possible?
0
efzAuthor Commented:
FOLLOW UP TO MY EARLIER COMMENT:

When I looked at your solution closer, I noted that it was enclosed in <td> </td> tags, so I may have misunderstood your comment about replacing the table cell. Perhaps you meant replacing the contents of the cell?

Following that tack, I copied your cell's contents and pasted it in my page's cell. However, when I previewed it in my browser, it showed all three weather widgets stacked and failed to hide two of them. Are you able to explain what I'm doing wrong?
0
shishir_sriCommented:
Hey efz,

As you mentioned, you're not familiar with jQuery, so I'm assuming that the problem you're having is due to not having the base jQuery library embedded in your page.

Please place the following line in your 'head' section of the page, and let me know if this solves the problem.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Open in new window


To address your concern about CSS replacing your table based design, you implemented it correctly. I haven't added any CSS to the code I gave you. The CSS file on line number 3 is a part of the weather widget, I think.

So, yes, you need to replace the table cell with the code above.

Please let me know if adding the jQuery library to your page fixes your problem.
0
efzAuthor Commented:
O Wise & Knowing Shishir_sri,

That worked like a charm. The web page is working exactly as I had hoped and I certainly could not have done it without your thoughtful direction. I hope EE appreciates your stellar work as much as I. Kindly accept my sincere thanks.

efz
0
shishir_sriCommented:
Lol. :)

You're welcome. I'm glad it worked.

Take care,
Shishir
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.