News:

Join the Facebook Fan Page.

Main Menu

Weather app?

Started by mrpike, July 11, 2011, 09:13:05 PM

Previous topic - Next topic

mrpike

I would like some help placing a widget or application at the top of my forum so that users can see the weather in their area. How would I go about doing this?

www.hooksandfins.com/forum

Sir Osis of Liver

#1
You can make a little popup with a search input for "City/State or zip code" that will take your users to the NWS website 7-day local forecast.  Basic code in a demo html file is attached.  Run it locally in your browser to see how it works.

Better, you can just make a search widget and place it in your header or at the top of your board index.  Something like this -





Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

mrpike

I like the NWS demo, but how do I put it in my site?

Thanks for the help!

Sir Osis of Liver


I'll install the theme and add the widget soon as I get a chance.

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

mrpike

Cool, sounds great. Thanks for the help.

Sir Osis of Liver

Ok, in index.template.php find this:



// Show a linktree. This is that thing that shows "My Community | General Category | General Discussion"..
function theme_linktree($force_show = false)
{
global $context, $settings, $options, $shown_linktree, $link_num;

// If linktree is empty, just return - also allow an override.
if (empty($context['linktree']) || (!empty($context['dont_default_linktree']) && !$force_show))
return;

echo '
<div class="clear" style="padding: 15px 0;">
<div class="navigate_section" ', ($link_num == count($context['linktree']) - 1) ? '' : 'style="padding:10px 4px;"', '>
<ul>';

// Each tree item has a URL and name. Some may have extra_before and extra_after.




Change to this:



// Show a linktree. This is that thing that shows "My Community | General Category | General Discussion"..
function theme_linktree($force_show = false)
{
global $context, $settings, $options, $shown_linktree, $link_num;

// If linktree is empty, just return - also allow an override.
if (empty($context['linktree']) || (!empty($context['dont_default_linktree']) && !$force_show))
return;

echo '
<div class="clear" style="padding: 15px 0;">
<div class="navigate_section" ', ($link_num == count($context['linktree']) - 1) ? '' : 'style="padding:10px 4px;"', '>
<ul>';


/// weather widget

echo '

<form method="POST" action="http://forecast.weather.gov/zipcity.php" style="display:inline; position: absolute; top: 245px; left: 675px;">
<span style="font-family: verdana; font-size: 11px; font-weight: bold; color: #006699; vertical-align: middle;">7-day Forecast </span>
<input type="text" name="inputstring" size="21" value=" City,ST or zip code"  onfocus="this.value = \' \';" onblur="if(this.value==\' \') this.value=\' City,ST or zip code\';" style="font-size: 10px; vertical-align: middle; margin-top: 0px;" class="textarea">
<input type="submit" name="Go2" value="Go" class="button_submit" style="height: 20px; font-size: 11px; vertical-align: middle;"></form>';


// Each tree item has a URL and name. Some may have extra_before and extra_after.




Should look like this:



Checked it in IE8 and FF3.5.  Back up the template before you change it.

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

mrpike

Works, but for me it's a little far to the left. Is there a simple way to move it? If not it's not that big of a deal. Thanks for the help man, works great!

www.hooksandfins.com/forum

Sir Osis of Liver

Find this:



<form method="POST" action="http://forecast.weather.gov/zipcity.php" style="display:inline; position: absolute; top: 245px; left: 675px;">



You can adjust the position with the top and left parameters.  30-40 px off left should do it, and I'd bring it up a couple of px.

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

mrpike

Alright, thank you for all your help man!

mrpike

And it works perfectly! Come check it out www.hooksandfins.com/forum

Sir Osis of Liver

#10
  It's way too far right.



Ok, matched your forum width and the new text.  Try this:



<form method="POST" action="http://forecast.weather.gov/zipcity.php" style="display:inline; position: absolute; top: 245px; left: 580px;">



Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

mrpike

It looks like this for me without changing anything:o

Sir Osis of Liver

Which browser/version are you using?  In your screenshot, the Login and Search links are too far right, and your header banner doesn't line up with the right side of the board index.  Everything lines up fine in IE8 and FF3.5 except the weather widget.  Looks like this (running ad blocker in IE):





Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

mrpike

I'm running firefox, the newest version (whatever that one may be).

Sir Osis of Liver


See what it looks like in IE. 

Maybe some other members could take a look and post what they see in various browsers?

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

mrpike

How could I correct the problem if it is different on each browser?

Sir Osis of Liver

Css formatting is pretty consistent across browsers; that's one of the big improvements over html, which varied quite a bit.  Your board looks the same in IE8 and FF3.5, and that's usually a good test of consistency.  I'm not aware of any major differences in FF4.0, but it seems to be making a hash of your forum.  If I have time tomorrow, I'll d/l and install 4.0 and see how it works. 

You might try to contact the mod author, or post the 2 screenshots on the mod board and see if anyone else has had similar problems.

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Sir Osis of Liver

Firefox 5.0.1 -




Same as IE8 and FF3.5.  What does it look like when you logout?

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

mrpike

It looks the same when I log out....

Sir Osis of Liver


Don't know what to suggest - looks the same to me any way I view it, so that's how it probably looks to your users.  Everything lines up, except the weather widget is too far right and wraps.  Can you post the line of code with the position parameters that you're using?

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Advertisement: