Jump to content

williamrouse

Member
  • Posts

    150
  • Joined

  • Last visited

williamrouse's Achievements

Newbie

Newbie (1/14)

0

Reputation

  1. I am playing with LESS and Bootstrap again, and was having lots of fun making it work with the Netbeans 7.4 IDE. When I set about some practical work, like changeing the background color of the site I realize I could not do this even after some web research. So I hope some on here knows how to do this. WBR
  2. I found the synta I was looking for, an example is: weatherOutPut.data.list.weather[0].id Problem solved
  3. I am having problems accessing what for me is a complex JSON object.<br style="margin-top: 0px; color: rgb(67, 67, 67); font-family: helvetica, arial, verdana, 'ms sans serif', sans-serif; font-size: 14px; line-height: 22px;">I successfully interrogated the Open Weather API and received a good response.<br style="color: rgb(67, 67, 67); font-family: helvetica, arial, verdana, 'ms sans serif', sans-serif; font-size: 14px; line-height: 22px;">What I am not accessing, and don’t know how to, is the individual items of the weather portion of the list group while in a for loop.<br style="color: rgb(67, 67, 67); font-family: helvetica, arial, verdana, 'ms sans serif', sans-serif; font-size: 14px; line-height: 22px;">When printed the values are undefined.<br style="color: rgb(67, 67, 67); font-family: helvetica, arial, verdana, 'ms sans serif', sans-serif; font-size: 14px; line-height: 22px;">Thanks for any help! The [/font][/color] //Turn JSON string into a javaScript object weatherOutPut = JSON.parse(weather); [color=#434343][font=helvetica, arial, verdana,] [/font][/color] { "timestamp": 1369448773482, "data": { "cod": "200", "message": 0.0288, "city": { "id": 5037649, "name": "Minneapolis", "coord": { "lon": -93.26384, "lat": 44.979969 }, "country": "US", "population": 382578 }, "cnt": 10, "list": [ { "dt": 1369418400, "temp": { "day": 287.94, "min": 283.89, "max": 287.94, "night": 283.89, "eve": 287.94, "morn": 287.94 }, "pressure": 1004.17, "humidity": 50, "weather": [ { "id": 804, "main": "Clouds", "description": "overcast clouds", "icon": "04n" } ], "speed": 4.31, "deg": 168, "clouds": 88 }, { "dt": 1369504800, "temp": { "day": 283.34, "min": 281.45, "max": 285.03, "night": 284, "eve": 285.03, "morn": 281.45 }, "pressure": 1005.12, "humidity": 83, "weather": [ { "id": 500, "main": "Rain", "description": "light rain", "icon": "10d" } ], "speed": 6.81, "deg": 150, "clouds": 92, "rain": 2 }, { "dt": 1369591200, "temp": { "day": 282.23, "min": 281.6, "max": 285.02, "night": 285.02, "eve": 283.93, "morn": 283.42 }, "pressure": 1001.01, "humidity": 100, "weather": [ { "id": 502, "main": "Rain", "description": "heavy intensity rain", "icon": "10d" } ], "speed": 7.26, "deg": 121, "clouds": 100, "rain": 19 }, { "dt": 1369677600, "temp": { "day": 290.4, "min": 286.66, "max": 292.08, "night": 287.85, "eve": 291.5, "morn": 286.66 }, "pressure": 991.78, "humidity": 99, "weather": [ { "id": 501, "main": "Rain", "description": "moderate rain", "icon": "10d" } ], "speed": 5.32, "deg": 129, "clouds": 92, "rain": 4 }, { "dt": 1369764000, "temp": { "day": 293.63, "min": 287.74, "max": 294.66, "night": 287.74, "eve": 293.81, "morn": 289.49 }, "pressure": 977.27, "humidity": 98, "weather": [ { "id": 502, "main": "Rain", "description": "heavy intensity rain", "icon": "10d" } ], "speed": 7.15, "deg": 190, "clouds": 76, "rain": 13 }, [color=#434343][font=helvetica, arial, verdana,] Here is the code that does not work and prints undefined for the weather valuses: [/font][/color] $('#baker').append('weather.id = ' + weatherOutPut.data.list[i].weather.id + ' '); $('#baker').append('weather.main = ' + weatherOutPut.data.list[i].weather.main + ' '); $('#baker').append('weather.description = ' + weatherOutPut.data.list[i].weather.description + ' '); $('#baker').append('weather.icon = ' + weatherOutPut.data.list[i].weather.icon + ' '); [color=#434343][font=helvetica, arial, verdana,]
  4. grabenair: so far I have changed the as much as I understood of your suggestion and in the three lines that I want to resolve the display is more disorganized than I imagine. I uploaded the source so you can point to me what I am lacking in your suggestions. I would appreciate you take a look and let me know how far astray I am from your thoughts to organize the top 3 lines. I am not getting the "Shipping from production ..." under the "ABC Wire Sales". Will work on it some more after dinner.
  5. Crap! I just got a last request to place a line about shipping possibilities below the ABC Wire Sales in the upper right of the screen. So now I am doing that. The site owner wants me to place a sentence "Shipping from production points across the USA ..." directly under the ABC Wire that is in the upper right of the display. So I'll be doing that tonight.
  6. You folks have be really helpful and patient with me. Thanks! I don't think I have done everything you suggested, but I am trying to process all of this. Here are last changes that I completed. to add spaces on the un-ordered list that shows the phone numbers I added right margin to the <li> element like this: li{ padding-right: 10px; } Is there a better way to do this? I have altered the HTML code to place the conditional IE statements in the head. Now I'll go back and read your notes to me to see if I have addressed all of your observations. Grabenair: That was the Logo that the company uses and this will be a one page site. Once again thanks
  7. I now have every thing except the list looking as I expected. Would you try explaining to me one more time how I can distinguish the in line list and the non in line list. I appreciate your patience. WBR
  8. I think I understand. After dinner I will implement your suggestions and get back to you. Thanks for your help! Can you give me the CSS syntax for a class specific unordered list. WBR
  9. Grabenar, and Andrea: Thanks for your assistance. Things are getting better with this display after following most of youadvice and suggestions. I am now down totwo problems that I can’t explain or know how to solve. The first is why does the word “Galvanized” exceed the boundariesof the container box. I would expect itto wrap around and be on the next line. The second is at the bottom of the page that starts with “CallABC Wire Sales…” I would like this to be an unordered list in the traditionalfashion extending vertically. Howeversince I changed the styling of the list to accomidate the phone and faxlisting, to list “inline” the list is has now collapsed. Can you show me how to write a class or ID for this list. Once again I thank you for ;your assistance. WBR
  10. grabenair: I am following up on your advice and the page is getting closer to what I expect. Thanks for your observations. As I get closer to completion I will continue to follow your suggestions. In the first row the two images on the right seem to wrap around as oppose to be flush on the same row. Do you see anything in my script that causes this? Thanks for your help WBR
  11. In working with a page for a website, I don’t understand twobehaviors of the CSS HTML script. The site is located at http://rouse.ws/abcwiresales/index.html In the middle of the page I want to have two <div> s that I call picture boxleft and picture box right next to each other. One on the left and the other onthe right. In the display the two <div>s are stacked verticallywhich is one of the problems and the second issue is that I see red marks thatI don’t recognize in the script. Iwanted to see the boundaries of the two divisions. I would appreciate help in resolving these issues. Thanks! WBR
  12. I added magin 0, and padding 0 to each of the three DIVs and that worked.
  13. Below is the visual framework for a practice slide show I am tutoring my self with. In webkit browsers and Firefox I get the controls to line up correctly, but on IE8 the far right control drops out and goes lower than I would expect.I have attached the code and some images in hopes that some one can suggest what I am doing incorrectly.Thanks! [/size][/font][font="Arial"][size="2"]<!doctype html> <!-- Practice jQuery slider and gallery --> <html> <head> <title>Practice jQuery slider and gallery</title> <style> html, body{ width: 100%; height: 100%; margin: 0 auto; font-family: 'PT Sans Narrow', Arial, sans-serif; font-size:12px; background-color: #DEDEDE; color: red; } #header{ margin: 0 auto; width: 860px; height: 95px; background-color: #FAF6FA; background: #ffffff; } #container{ position: absolute; top: 0px; left: 80px; margin: 0 auto; width: 885px; height: 970px; background-color: #EFEFEF; border-style:solid; border-width:1px; border-color: silver; } #slideShowBox{ position: relative; width: 640px; height: 480px; margin: 150px auto 0; background-color: #F5F5F5; border:1px solid #FFFFFF; -moz-box-shadow:0 0 22px #111; -webkit-box-shadow:0 0 22px #111; box-shadow:0 0 22px #111; } #slideShowBoxControlls{ position: relative; width: 640px; height: 34px; margin: 1px auto 0; border: 1px solid red; } #descriptionBox{ width: 555px; height: 32px; padding-left: 5px; display: inline-block; color: black; border: 1px solid black; } #arrowLeft{ background: url('cssimages/arrowLeft.png') no-repeat; width: 32px; height: 32px; border: 1px solid green; display: inline-block; float: left; } #arrowRight{ background: url('cssimages/arrowRight.png') no-repeat; width: 32px; height: 32px; border: 1px solid green; display: inline-block; float: right; } h1{ font: 30px "Lucida Sans Unicode", Arial, Helvetica, sans-serif; text-align: center; padding-top: 10px; } </style> </head> <body> <div id="container"> <div id="header"> <h1>Practice jQuery Slider and Gallery</h1> </div> <div id="slideShowBox"> </div> <div id="slideShowBoxControlls"> <div id="arrowLeft"></div> <div id="descriptionBox"> </div> <div id="arrowRight"></div> </div> </div> </body> </html>[/size][/font][font="Arial"][size="2"][font="Arial"][size="2"] [font="Arial"][size="2"][font="Arial"][size="2"][/size][/font][/size][/font] [/size][/font]
  14. I found my error in this line: margin: auto 2px auto; Should be just: margin: 2px auto 0;
  15. In the code below, I don't know/understand why the <div> that has the id='slideShowBoxControlls' is not positioned under the <div> that has the id='slideShowBox', since they have the same basic CSS. Can someone explain this to me? <!DOCTYPE html> <html> <head> <title>Practice jQuery slider and gallery</title> <style> html, body{ width: 100%; height: 100%; margin: 0 auto; font-family: 'PT Sans Narrow', Arial, sans-serif; font-size:12px; background-color: #DEDEDE; color: red; } #header{ margin: 0 auto; width: 860px; height: 95px; background-color: #FAF6FA; background: #ffffff; } #container{ position: absolute; top: 0px; left: 80px; width: 885px; height: 970px; background-color: #EFEFEF; border-style:solid; border-width:1px; border-color: silver; } #slideShowBox{ position: relative; width: 640px; height: 500px; margin: 150px auto 0; background-color: #F5F5F5; border:1px solid #FFFFFF; -moz-box-shadow:0 0 22px #111; -webkit-box-shadow:0 0 22px #111; box-shadow:0 0 22px #111; } #slideShowBoxControlls{ position: relative; width: 640px; height: 34px; margin: auto 2px auto; border: 1px solid red; } #arrowLeft{ background: url('cssimages/arrowLeft.png') no-repeat; width: 32px; height: 32px; border: 1px solid green; display: inline-block; float: left; } #arrowRight{ background: url('cssimages/arrowRight.png') no-repeat; width: 32px; height: 32px; border: 1px solid green; display: inline-block; float: right; } h1{ font: 30px "Lucida Sans Unicode", Arial, Helvetica, sans-serif; text-align: center; padding-top: 10px; } </style> </head> <body> <div id="container"> <div id="header"> <h1>Practice jQuery Slider and Gallery</h1> </div> <div id="slideShowBox"> </div> <div id="slideShowBoxControlls"> <div id="arrowLeft"></div> <div id="arrowRight"></div> </div> </div> </body> </html>
×
×
  • Create New...