williamrouse

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

I found the synta I was looking for, an example is: weatherOutPut.data.list.weather[0].id Problem solved

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,]

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.

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.

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

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

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

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

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

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

I added magin 0, and padding 0 to each of the three DIVs and that worked.

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]

I found my error in this line: margin: auto 2px auto; Should be just: margin: 2px auto 0;

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>

I was looking at the canvas specification in HTML 5 and some libraries like Raphael and Gury. I don't see anyway to just light up 1 pixel with a given color. Is there someway to do this?WBR

Here is a link to where I left off. www.rouse.ws/jQueryMagicLineMultiLevelWork WBR

I'll put up what I have on my website and show you what I have so far and the limitation. I'll past the link later tonight. WBR

This is what I have working as I shut down for the night: http://www.rouse.ws/jQueryMagicLineMultiLevelWork/ Works in Chrome, Firefox and Safari, but not IE yet.

My problem was more profound than that. I was able to work several more hours on this issue today and have a functional, but crude version working now. The aesthesis are poor at the moment. I appreciate you taking a look at my note.WBR

I am trying to add a secondary level to Chris Coyer Magic Line menu. I have made some progress but it is not complete. Right now I am stuck on 3 spots to make it complete. The placement of the secondary menu, the overlay of the secondary menu and the hover on and off of the submenu. Here is a link to what I have done so far: http://www.rouse.ws/...cLineSecondary/ The HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- http://css-tricks.com/jquery-magicline-navigation/ --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> <title>Magic Line Navigation</title> <link rel='stylesheet' type='text/css' href='css/style.css' /> <script type='text/javascript' src='js/jquery.js'></script> <script type='text/javascript' src='js/jquery.color-RGBa-patch.js'></script> <script type='text/javascript' src='js/menu_2.js'></script> </head> <body> <div class="nav-wrap"> <ul class="group" id="example-one"> <li class="current_page_item"><a href="#">Home</a></li> <li><a href="#">Buy Tickets</a></li> <li><a href="#">Group Sales</a></li> <li> <a href="#">Reviews</a> <ul class="subnav"> <li><a href="#">3 . One</a></li> <li><a href="#">3 . Two</a></li> <li><a href="#">3 . Three</a></li> </ul> </li> <li><a href="#">The Show</a></li> <li><a href="#">Videos</a></li> <li><a href="#">Photos</a> <ul class="subnav"> <li><a href="#">6 . One</a></li> <li><a href="#">6 . Two</a></li> <li><a href="#">6 . Three</a></li> </ul> </li> <li><a href="#">Magic Shop</a></li> </ul> </div> <div class="nav-wrap"> <ul class="group" id="example-two"> <li class="current_page_item_two"><a rel="#fe4902" href="#">Home</a></li> <li><a rel="rgba(50,69,12,0.9)" href="#">Buy Tickets</a></li> <li><a rel="rgba(113,116,0,0.9)" href="#">Group Sales</a></li> <li><a rel="rgba(220,133,5,0.9)" href="#">Reviews</a></li> <li><a rel="rgba(236,85,25,0.9)" href="#">The Show</a></li> <li><a rel="rgba(190,40,5,0.9)" href="#">Videos</a></li> <li><a rel="rgba(123,91,230,0.9)" href="#">Photos</a></li> <li><a rel="rgba(255,255,255,0.4)" href="#">Magic Shop</a></li> </ul> </div> </body> </html> The CSS /* * http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html * place to look at to build code for css and js */ $(function() { var $el, leftPos, newWidth, $mainNav = $("#example-one"); $mainNav.append("<li id='magic-line'></li>"); var $magicLine = $("#magic-line"); $magicLine .width($(".current_page_item").width()) .css("left", $(".current_page_item a").position().left) .data("origLeft", $magicLine.position().left) .data("origWidth", $magicLine.width()); $("#example-one li a").hover(function() { $el = $(this); leftPos = $el.position().left; newWidth = $el.parent().width(); $magicLine.stop().animate({ left: leftPos, width: newWidth }); var marker = ( $('a').index($el) ); console.log( "Found anchor number " + marker ); if ($( $el.next('.subnav').length != 0)){ var secondaryMenu = $($el.next('ul .subnav')); secondaryMenu.position.left = $el.position().left; console.log('SecondaryMenu = ' + secondaryMenu ); $(secondaryMenu).slideDown(1000).show(); $(secondaryMenu).each(function(idx, el) { console.log( 'Element ' + idx + ' has the following html: ' + $(el).html() ); }); } }, function() { $magicLine.stop().animate({ left: $magicLine.data("origLeft"), width: $magicLine.data("origWidth") }); var secondaryMenu = $($el.next('ul .subnav')); secondaryMenu.position.left = $el.position().left; $(secondaryMenu).slideUp('fast').hide(); }); }); The js $(function() { var $el, leftPos, newWidth, $mainNav = $("#example-one"); $mainNav.append("<li id='magic-line'></li>"); var $magicLine = $("#magic-line"); $magicLine .width($(".current_page_item").width()) .css("left", $(".current_page_item a").position().left) .data("origLeft", $magicLine.position().left) .data("origWidth", $magicLine.width()); $("#example-one li a").hover(function() { $el = $(this); leftPos = $el.position().left; newWidth = $el.parent().width(); $magicLine.stop().animate({ left: leftPos, width: newWidth }); var marker = ( $('a').index($el) ); console.log( "Found anchor number " + marker ); if ($( $el.next('.subnav').length != 0)) { var secondaryMenu = $($el.next('ul .subnav')); secondaryMenu.position.left = $el.position().left; console.log('SecondaryMenu = ' + secondaryMenu ); $(secondaryMenu).slideDown(1000).show(); $(secondaryMenu).each(function(idx, el) { console.log( 'Element ' + idx + ' has the following html: ' + $(el).html() ); }); } }, function() { $magicLine.stop().animate({ left: $magicLine.data("origLeft"), width: $magicLine.data("origWidth") }); var secondaryMenu = $($el.next('ul .subnav')); secondaryMenu.position.left = $el.position().left; $(secondaryMenu).slideUp('fast').hide(); }); });

Thanks! I was making more difficult to myself than it is.

When I see CSS statements with "no-repeat" and then a position I am unclear. Is this suppose to say do not repeat this to the position specified but every where else? Examples I found in some code I was looking at Thanks! background: url(../images/nav_item_bullet_current.]png) no-repeat left; background: url(../images/nav_bottom.png) no-repeat top; background: url(../images/sendmessage.png) no-repeat bottom; background: url(../images/separator_line.png) repeat-x right 12px; background: #fff url(../images/separator_right.png) no-repeat right; background: url(../images/field_bg.png) no-repeat top left;

Thank you, and then the obvious, I have a lot to read and learn, but thanks again for all you help. WBR

Several months ago I downloaded a free template for a website, and then promptly forgot about it. I then remembered that it had a feature that I like and wondered how it was done. In the attached image you can see a menu on the left that stays fixed as the window scrolls. I would like to learn how to do this so I am asking for help to research this. Thanks! WBR