Div tag scroll bars

I'm not sure if any of you have run into this problem but when I was outputting my XML to my web site I was constantly overflowing the div window with results. At first I was trying to minimize the results by creating for loops that only printed a certain number of results. While this was effective it didn't allow me to have as much content as I wanted to display. However, there was a solution.

I did a search in Google for "Scroll bar DIV tag" I was surprised by the amount of results but I was more surprised at how simple it was. You can check out the results of the search here. Anyway the only thing I had to do was to put this simple bit of code into my style sheet.

overflow: auto;

That's it, not too complicated but oh so effective for presenting tons of results in a small window in order to fit into web site. This little gem allowed me to stuff 25 news stories into a small widow within the page. Here is the results.

7 Day Forcast WeatherBug

For my individual project I used a simple current conditions search to retrieve the current conditions for an area. However, for our group project I wanted to provide a 5 or 7 day forcast. While this wasn't much different for getting the data, parsing through the results was much different as I had to create loops to search through the iterations. See my previous posts to see the code behind in order to return the data but for this post I'm going to show you how to search through the data and parse the XML. First I used the following URL to get the data.

http://A6357896562.api.wxbug.net/getForecastRSS.aspx?ACode=A6357896562&OutputType=1&zipCode=48189.

This returns the following data:

After I get the data it is time for parsing. I use the SimpleXML Xpath function to get the data into a searchable variable.

$xml = new SimpleXMLElement($data);

Then I simply create a for loop to iterate through the data and diplay the results in HTML format. Since there are HTML tags I can't cut and paste the text into the blog as it tries to interpret the tags. However, I have put up a screenshot of the for loop and the methods used to optain the XML tag info HERE.

Here is the final output:

Google Map API

I was able to play around with the Google Maps API for my Iteration 2 Individual Project. What I found was that the API is very well documented and there are plenty of examples of code for you to choose from. I wanted the map to key off of two coordinates, longitude and latitude and then return the map to my DIV tag called "googlemap" the first thing I had to do was apply for a key from google in order to use the maps. I did that here. Next, once I received the key I had to put in two different script tag elements into the web page.



Once that was done I then had to create the javascript that was necessary in order to grab the coordinates and return the map to my div tag. I wanted a couple different options for users; to be able to zoom in and out of the map and to place a marker at the coordinates given to the api. I found that this was not too difficult to do.

function setupMap(lat, long) {

if (GBrowserIsCompatible()) {
var center = new GLatLng(lat, long);
map = new GMap2(document.getElementById("googlemap"));
map.addControl(new GLargeMapControl());
map.setCenter(center, 09);

var marker = new GMarker(center, {draggable: true});

GEvent.addListener(marker, "dragstart", function() {
map.closeInfoWindow();
});

GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml("Just bouncing along...");
});

map.addOverlay(marker);
}
}

You'll notice that I added a couple variables to pass to the program that were filled in another function based on my user input from the web page.

function getCoord(itemName){

var lat;

var long;

if (itemName == 'snowbird')

{

lat = '40.5768173605448';

long = '-111.651607579098';

}

if (itemName == 'alta')

{

lat = '40.58889';

long = '-111.63722';

}

if (itemName == 'solitude')

{

lat = '40.621159';

long = '-111.592499';

}

if (itemName == 'vail')

{

lat = '39.3944';

long = '-106.2150';

}

if (itemName == 'taos')

{

lat = '36.39';

long = '-105.58';

}

if (itemName == 'kill')

{

lat = '43.6775';

long = '-72.7803';

}

setupMap(lat, long);

}

At the bottom of this function is where I call the setupMap() function. It then returns the following data/picture:

Weatherbug Proxy Pass through

So I managed to get the proxy pass through working and returning data for iteration 2 of the individual project. Since it took me a while to figure it out I thought that I would pass on my experience in case others are running into the same difficulties. I used the WeatherBug API, and the documentation can be found at WeatherBug.

The first thing I did was to use the createRequest method that was provided to us in class.



Next I had to create the getWeather function to call the proxy. I handed it a zip as a parameter so it could find the weather for a location.

Next I created the proxy script. I did this a bit differently than professor Drake showed us but I was able to find quite a bit of documentation and sample code out there to choose from. This one first takes the zip code that I passed to it and puts it in the zip variable. It then takes the cll url and puts it into the $url vaiable. Then I append the zip to the end of the $url variable by concatenating the strings $fullUrl = $url.$zip. The reset is the call to the API and thn it puts the data into the $data variable.

I then just echo the $data variable and it then sends that data to the displayWeather() function in my javascript.

This function then takes the return data variable and then displays it in my web page in the div id=weather tag. While it took me a while to figure out how to get this to work, it was pretty easy to recreate for my other APIs. I literaly just needed to change all of the global variables and then just call the different URL. I was able to use this same code with 3 other APIs for the group project.

My Iteration 1

So I decided to talk a little bit about iteration 1 for the individual project. Suffice to say that I ran into quite a few challenges but the experience gave me a much better understanding of what AJAX is capable of. My theme is a ski conditions web site that will allow you to click on a ski resort icon, located on the left hand side and display information about the resort.

On the first iteration I wanted to accomplish getting the trail map of the resort to load in a separate div tag along with the description of the resort. For the most part this is my first experience with extensive css so it was a struggle to try and understand what i needed to do in order to accomplish my goal. I followed chapter one very closely as it was very similar to me objectives. Load a page and load some image files to speed up the process of clicking on them. I also wanted to have a description box that listed the details for the resort. While it took me nearly 10 hours to get it all working the site is going as planned.

For the second part I would like to integrate google maps api as well as a weather api that when a resort icon is clicked it displays the trail map, the map of the mountains location, as well as the current weather conditions. While I'm confident that I will be able to accomplish this I'm still very lost as to how these api's are integrated into the site. My hope is that as we progress through the class I will have a better understanding of the process. The one thing that I will say is that after spending weeks reading about AJAX without a whole lot of success understanding how it worked. I feel like rolling up my sleeves and writing the code was the best way for me to understand the concepts as well as the help of Google, when it came to searching things I wanted to accomplish. While i looked through many javascript sites like W3Schools.com, I had much better luck doing google searches for things like "loading images on startup javascript". When I did stuff like that I found excellent examples of how others had coded similar objectives.

A Cool Dynamic Link Trick

While programming my individual project I was tasked with trying to dynamically add an html link to the web page using javascript. I tried inserting the code in javascript as I would in html but found that javascript did not like the tags within the html code (even when you put it in quotes). I even tried breaking up the code in javascript by using many quoted parts with +'s to insert into my html dynamically and I was still unsuccessful. To fix this issue I decided to do something different.

Steps:
1. I first created a div inside my .html file that will house the .


2. I then created an anchor inside the div with only the "id" of the tag provisioned. href needs to be blank quotes and their should be no text that shows the link on the page.


By doing this, you are essentially creating a placeholder for your dynamic link on your page. If you were to post your updated .html file you will see that there is no link displayed on the page to click.

The second part of this is to use javascript to insert your desired link dynamically into the you have created. I have included code from my .js file to show you how I did this. Place this code inside a function inside your javascript.
1. The first line of code gets the id of the tag and inserts into the .innerHTML field the link the user would see on the web page to click on.

2. The second line of code sets the href of the tag to point to http: address. In my case I have it pulling dynamically from a yahoo api. You can easily put in a static link such as http://is449w.blogspot.com/ .

3. The third line of code sets the target of the tag to launch a new page when the link is click on.


When your javascript function runs, the link will dynamically show up on the web page. You can see this in action at http://people.emich.edu/jguest/IS449W/indiv2/default.html . Just click on a link on the left hand side and you will see my dynamic link to buy a book show up on the right hand side.

Hopefully this will help you in your endeavors with your dynamic websites. Although I found this trick out on my own, I did a quick google search and found sites like http://www.codelifter.com/main/tips/ that offer cool tips and code you can use to spice up your web page.

Enjoy!!

Individual Project

Well I made it through iteration 1 for our individual project. When I first started IS449 I didn't know anything about AJAX or how it worked. Now I'm begining to understand what this is all about.

For iteration 1 of our individual project we had to fetch a static file from our web server and integrate it into our web page. To do this we used xmlhttprequest, Javascript, and html. We also had to indicate what web service API's we plan to use for our project.

My site is just a simple application showing how I retrieved today's date and time from the server by clicking a button and bringing it back to display that information within the same page. I plan to form my project as a site for finding and discussing information about vitamins and health food stores. I may have to make some changes as I move forward but it seems to be a good start.