Jump to content

sepoto

Members
  • Posts

    254
  • Joined

  • Last visited

Everything posted by sepoto

  1. So essentially I had to do things with jQuery. I am just wondering if there are any thoughts on how CSS seems to handle these elements... What I ended up with I think is good so I may as well share the solution... <?phprequire_once('includes/i_rsslib.php');require_once('functions/f_lib.php');?><!DOCTYPE html><html><head><title>Daily Sports Guide</title><link type="text/css" rel="stylesheet" href="style/style.css"><link type="text/css" rel="stylesheet" href="style/suckerfish.css"><script type="text/javascript" src="jquery/jquery-1.8.0.js"></script><script type="text/javascript"> $(document).ready(function(){ if( $("#content-left").height() < $("#content-right").height() ){$("#content-left").css("height", $("#content-right").height() );}else{$("#content-right").css("height", $("#content-left").height() );} }); </script><style>#content { clear: both; margin: 0px; padding: 0px; border: 1px solid white; width: 798px; overflow: hidden; height: auto; }#content-left { float: left; margin: 0px; padding: 0px; width: 397px; border: 1px solid blue; }#content-right { float: left; margin: 0px; padding: 0px; width: 397px; border: 1px solid blue; }</style></head><body><div id="wrapper"><?php require_once('includes/i_header.php'); ?> <div id="content"><div id="content-left">Four score and seven years ago...</div><div id="content-right">Four score and seven years ago...Four score and seven years ago...Four score and seven years ago...Four score and seven years ago...</div></div> <div id="msgid"></div></div></body></html>
  2. <?phprequire_once('includes/i_rsslib.php');require_once('functions/f_lib.php');?><!DOCTYPE html><html><head><title>Daily Sports Guide</title><link type="text/css" rel="stylesheet" href="style/style.css"><link type="text/css" rel="stylesheet" href="style/suckerfish.css"></head><body><div id="wrapper"><?php require_once('includes/i_header.php'); ?> <div style='margin: 5px; padding: 5px; border: 1px solid white; height: auto; clear: both; overflow: hidden;'><div style='float: left; width: 48%; height: 100%; border: 1px solid blue; overflow: hidden;'>Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war.We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.But, in a larger sense, we can not dedicate -- we can not consecrate -- we can not hallow -- this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor powerto add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished workwhich they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us -- that from these honored dead we take increased devotion tothat cause for which they gave the last full measure of devotion -- that we here highly resolve that these dead shall not have died in vain -- that this nation, under God, shall have anew birth of freedom -- and that government of the people, by the people, for the people, shall not perish from the earth.</div><div style='float: left; width: 48%; height: 100%; border: 1px solid blue; overflow: hidden; margin: 0px 0px 0px 5px;'>Governor Stevenson, Senator Johnson, Mr. Butler, Senator Symington, Senator Humphrey, Speaker Rayburn, Fellow Democrats, I want to express my thanks to Governor Stevenson for his generous and heart-warming introduction.It was my great honor to place his name in nomination at the 1956 Democratic Convention, and I am delighted to have his support and his counsel and his advice in the coming months ahead.With a deep sense of duty and high resolve, I accept your nomination.I accept it with a full and grateful heart--without reservation-- and with only one obligation--the obligation to devote every effort of body, mind and spirit to lead our Party back to victory and our Nation back to greatness.I am grateful, too, that you have provided me with such an eloquent statement of our Party's platform. Pledges which are made so eloquently are made to be kept. "The Rights of Man"--the civil and economicrights essential to the human dignity of all men--are indeed our goal and our first principles. This is a Platform on which I can run with enthusiasm and conviction.</div></div> </div></body></html> So I have created this skeleton example of a two column layout. While the content of each column may vary I would like the borders of each column to match each other. I thought that I might be able to put the columns in a wrapper, float them and then use the 'height: 100%' CSS property on both columns. Unfortunately, solving the problem is not that simple. Does anyone know a way to do this? I had a layout before that was alright but if I could somehow get to the solution for this one it would look that much nicer. Is what I am trying to achieve with the layout possible? I uploaded a live copy to http://dailysportsguide.com/prototype/. Thanks again and in advance for any of your most useful comments and suggestions. P.S. I already have a plan to accomplish the same goal with some jQuery however if this can be done with CSS I would much prefer that method...
  3. As you say it: <div style='clear: both; margin: 5px; padding: 0px; border: 1px solid white;'><p style='color: white;'>Facebook comments area:</p></div> I greatly appreciate the patience. The clear property I am not very familiar with yet but I see how it can be very useful. Again thank you kindly. You did have the solution.
  4. So what I am really trying to understand is why I see the one pixel solid white border for the facebook comments div only on the left, right and bottom. The top border is blocked out for some reason. I have tried numerous times to apply a top margin to the facebook comments div. I tried also using a few <br>'s. Seemingly nothing will move the facebook comments div into position where I can see the border on all four sides. I've ruled out margins and paddings for the two container objects of columns one and two above and also for col1 and col2 themselves.
  5. <?phprequire_once('includes/i_rsslib.php');require_once('functions/f_lib.php');?><!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Daily Sports Guide</title><link type="text/css" rel="stylesheet" href="style/style.css"><link type="text/css" rel="stylesheet" href="style/suckerfish.css"></head><body> <div id="wrapper"> <?php require_once('includes/i_header.php'); ?> <!-- start columns left and right --><div id="container2"><div id="container1"> <div id="col1"><?php include("index_leftcolumn.html"); ?></div> <!-- column break --> <div id="col2"><div id="col2inner"><h4 id="latestFromDSG">Latest from DSG</h4><div style='margin: 5px; padding: 0px; color: white; background-color: black;'><?php require_once('index_twitterfeed.php'); ?></div></div></div> </div></div><!-- end columns left and right --> <div style='margin: 5px; padding: 0px; border: 1px solid white;'><p style='color: white;'>Facebook comments area:</p></div> </div></body></html> body { background-color: black; text-align: center; }img { border: none; margin: 0; padding: 0; }a:visited { color: white; } #wrapper { width: 800px; margin: 0px auto; color: white; background-color: black; border: 1px solid red; text-align: left; padding: 0px 0px 0px 0px; height: auto; overflow: hidden;} #header { margin: 0px; padding: 0px; width: 100%; height: 141px; }#hcolumnLeft { float: left; width: 300px; background-color: blue; margin: 0px; padding: 0px; color: white; height: 141px; }#hcolumnRight { float: right; margin: 0px; padding: 0px; color: white; background-color: black; width: 500px; height: 141px; text-align: right; } #container2 { clear:left; float:left; width:100%; overflow:hidden; background: black; }#container1 { float:left; width:100%; position:relative; right:30%; background: black; }#col1 { float:left; width:70%; position:relative; left:30%; overflow:hidden; }#col2 { float:left; width:30%; position:relative; left:30%; overflow:hidden; } #latestFromDSG { font-size: 16px; margin: 0px 0px 10px; padding: 5px; background: #0100FE; }#col2inner { margin: 5px; padding: 0px; border: 1px solid white; background-color: black; } For some reason when I look at the CSS in Firebug I see that the facebook comments area thinks that it starts all the way at the top of #wrapper. This is not my intent at all. In fact my intent is to have the facebook comments area starting below the two column layout but still inside #wrapper. As usual with CSS trying to figure this out is not at all logical to me and not at all easy to understand. I see what the problem is but I really feel clueless on how to fix it. I had it in mind to upload a live copy to my server but for some reason I can not determine yet my PHP includes which are working fine on my IIS, PHP server are not working at all when I upload the files to CentOS 6, PHP server. Really I have to get the CSS right before I can figure out what is wrong with Cent OS. Thanks in advance for any help, comments or suggestions...
  6. Indeed... Setting #wrapper { overflow: hidden; } and the border is behaving properly now. I will need to familiarize myself with this property and its workings. Thank you both for your prompt replies.
  7. http://dailysportsguide.com/prototype/index.php body { background-color: black; text-align: center; }img { border: none; margin: 0; padding: 0; }a:visited { color: white; } #wrapper { width: 800px; margin: 0px auto; color: white; background-color: red; border: 1px solid white; text-align: left; padding: 0px 0px 0px 0px; height: auto;} #header { margin: 0px; padding: 0px; width: 100%; height: 141px; }#hcolumnLeft { float: left; width: 300px; background-color: blue; margin: 0px; padding: 0px; color: white; height: 141px; }#hcolumnRight { float: right; margin: 0px; padding: 0px; color: white; background-color: green; width: 500px; height: 141px; text-align: right; } #container { width: 100%; padding: 0px; margin: 0px; color: red; background-color: blue; height: auto; }#columnLeft { width: 50%; float: left; color: red; margin: 0px; padding: 0px; background-color: yellow;}#columnRight { width: 50%; float: right; color: red; margin: 0px; padding: 0px; background-color: white; } index.php <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Daily Sports Guide</title><link type="text/css" rel="stylesheet" href="style/style.css"><link type="text/css" rel="stylesheet" href="style/suckerfish.css"></head><body><div id="wrapper"><?php require_once('includes/i_header.php'); ?> <div id="container"><div id="columnLeft"><p>Test p!</p></div><div id="columnRight"><p>Test p!</p></div></div> </div></body></html> So clearly I have written #columnLeft and #columnRight to be enclosed inside #wrapper. When I look at the page however the solid white border of #wrapper has not carried down below #columnLeft and #columnRight. In fact #columnLeft and #columnRight appear to be totally outside of #wrapper which is not my intent. Did I perhaps do something wrongly with #container? The height of wrapper should be auto so all the elements should then be contained inside of #wrapper. This is odd. There must be something wrong with my code! Thanks in advance!
  8. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Daily Sports Guide</title><link type="text/css" rel="stylesheet" href="style/style.css"><link type="text/css" rel="stylesheet" href="style/suckerfish.css"></head><body><div id="wrapper"><?php require_once('includes/i_header.php'); ?><p style='background-color: black; margin: 0px; padding: 0px;'>Daily Sports Guide</p></div></body></html> style.css body { background-color: black; text-align: center; }img { border: none; margin: 0; padding: 0; }a:visited { color: white; } #wrapper { width: 800px; margin: 0px auto; color: white; background-color: red; border: 1px solid white; text-align: left; padding: 0px 0px 0px 0px; height: auto;} #header { margin: 0px; padding: 0px; width: 100%; height: 150px; }#hcolumnLeft { float: left; width: 300px; background-color: blue; margin: 0px; padding: 0px; color: white; height: 141px; }#hcolumnRight { float: right; margin: 0px; padding: 0px; color: white; background-color: green; width: 500px; height: 141px; text-align: right; } suckerfish.css #nav, #nav ul { /* all lists */padding: 0;margin: 0;list-style: none;line-height: 1;}#nav a {color: white;text-decoration: none;background-color: black;text-align: center; display: block;width: 100px;}#nav a:hover {display: block;background: blue;width: 100px;}#nav li { /* all list items */float: left;width: 100px; /* width needed or else Opera goes nuts */} #nav li ul { /* second-level lists */position: absolute;border: 1px solid white;background: black;width: 100px;left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */} #nav li ul ul { /* third-and-above-level lists */margin: -1em 0 0 10em;} #nav li:hover ul ul, #nav li.sfhover ul ul {left: -999em;} #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */left: auto;} i_header.php <div id="header"><!-- The Header --> <div id="hcolumnLeft"><img src="img/logo.jpg"></div> <div id="hcolumnRight"><!-- Suckafish navigation menu --><ul id="nav"> <li><a href="#"> </a></li> <li><a href="index.php">Home</a></li> <li><a href="profile.php">My Profile</a> <ul> <li><a href="myguide.php">My Guide</a></li> <li><a href="bars.php">DSG Sports Bars</a></li> <?php if($_SESSION['logged_in']) {echo "<li><a href=\"logout.php\">Logout</a></li>"; } else {echo "<li><a href=\"login.php\">Login</a></li>"; } ?></ul> </li> <li><a href="aboutus.php">About Us</a></li> <li><a href="contactus.php">Contact Us</a></li> </ul><!-- End #nav --></div> </div><!-- End #header --> I just am not able to determine why for some reason there is that small red margin there. I know it is part of wrapper but I can't figure out why it is there. As far as my code goes it shouldn't be because #header, #hcolumnLeft and #hcolumnRight all have no padding or margin area. What could be causing this problem? The url of the page is http://dailysportsguide.com/prototype/index.php. Thanks in advance for any comments or suggestions on how to deal with this red margin area of #wrapper!
  9. A great suggestion. I have started to wonder myself why I should be bothering with the complexities of XML. Perhaps I will build a .CSV directly to JSON. XML would be more fun though.
  10. Thank you Birbal! Those are excellent resources!
  11. It looks very complicated! Could I see some code that would pertain to my data? I am seeing how to load and save the file that is easy. What looks much harder is how would be the best way to encode my data.
  12. Not yet!
  13. I have some data in a flat file. These are the fields: nameaddressziplatlng A row of data might look something like: fishing hole #1, Catalina Island U.S., 90704, 33.3, 118.4 There are fifty rows of data. I am trying with PHP to encode this data into an XML file. The ultimate goal is that the data will be stored on the disk in XML format and when requested PHP will read the XML file and retrieve the data and put it into an array so I can encode the data in JSON and send it back off to JavaScript (AJAX). I'm very familiar with working with flat files and SQL however XML is a bit unfamiliar to me as of yet. How would this be accomplished? Good Evening W3Schools!
  14. It looks like the best example I have found is located here and uses specifically the jQuery UI library. It looks like some good code. http://jqueryui.com/demos/droppable/ It also looks like the function can be modified like this: drop: function(event, ui) { alert($(ui).attr("id") + " was dropped");}
  15. I am now familiar with the existence of the ".draggable()" function of jQuery. I am mulling over how I would integrate the dragging and dropping of an element into an event listener like this one: google.maps.event.addListener(myMap, 'click', function(myEvent){var myClickLatLng=myEvent.latLng;// now process myClickLatLng}); First I am wondering if the dragging and dropping of an element would constitute a 'click' and second if the click event is fired how am I to know which element was dropped? Again I thank all of you for your time and wisdom. I am hoping my post is in the right forum as this is for JavaScript which is closely related. Thank You!
  16. I am trying to determine the meaning of "b.zipcode". I see a calculation is performed and it has something to do with "b.zipcode" but I don't know what all that fully means yet. In the last part of the code I see that "b.zipcode" is then referred to as just "b" which is slightly confusing to me although it looks like excellent code I need to understand it.
  17. <?php$dbh = new PDO('mysql:host=localhost;dbname=mydata', 'root', '**********'); $tLat = $_GET['tLat'];$tLng = $_GET['tLng']; foreach($dbh->query('select name, lat, lng from locations') as $row) { $main_arr[] = $row;} echo json_encode($main_arr); ?> So I have some code above which I am working on. I am thinking about what is the best way to handle this. I suppose I could develop a simple solution that just adds and subtracts from "$tLat" and "$tLng" and then use a "where" clause in the query but I am looking for a better way. I know that there are GIS functions built into MySQL that perhaps could be used. My goal is to find all rows where lat and lng are a specified radius from "tLat,tLng". ? Thanks! P.S. I have already existing code for PHP that implements Haversine's that I could use but that would require each row to be processed individually. Is there not a way to handle the distance calculation within the query directly?
  18. LOL!!!!!!!!!!!!!!!!!!!! Thanks! Today will be a good day!
  19. I put your line in (with a minor edit ). The code runs with no errors in the console however there is no marker yet. This is a very vexing problem.
  20. This: var myLatLng = new google.maps.LatLng(obj[0][1], obj[0][2]); For some reason does not show the marker either. Those values started as floating point values in my MySQL database. They get retrieved and converted to a JSON array which is decoded into the array obj. What happens from there I don't know all the details yet. I just know that the constructor is not accepting them.
  21. I don't know what to cast them to or how. I would be really stoked to get some help out with this!
  22. // // // // // // // // Ajax returns from PHPxmlhttp.onreadystatechange=function() {if (xmlhttp.readyState==4 && xmlhttp.status==200){var obj = $.parseJSON(xmlhttp.responseText); var tLat = getCookie("tLat");var tLng = getCookie("tLng"); var options = { zoom: 4, center: new google.maps.LatLng(40.7257, -74.0047), mapTypeId: google.maps.MapTypeId.ROADMAP}; // Creating the map var map = new google.maps.Map(document.getElementById('map'), options); alert(obj[0][1]+','+obj[0][2]); //var myLatLng = new google.maps.LatLng(40.7257, -74.0047);var myLatLng = new google.maps.LatLng(String(obj[0][1]), String(obj[0][2])); var marker = new google.maps.Marker({ position: myLatLng, map: map }); $('#map').show();}}// // // // // // // // My alert is showing "-84.3132324,34.0393598". Uncommenting "//var myLatLng = new google.maps.LatLng(40.7257, -74.0047);" shows the marker beautifully. The current "var myLatLng = new google.maps.LatLng(String(obj[0][1]), String(obj[0][2]));" will not show me the marker. I for the life of me can not figure out why yet. ????????????????????????????????? Thanks a bunch!
  23. sepoto

    AJAX w/ JSON

    Accessing the array like this: $('#preview').text(obj[0].name); is one of the key factors I see now.
  24. sepoto

    AJAX w/ JSON

    xmlhttp.onreadystatechange=function() {if (xmlhttp.readyState==4 && xmlhttp.status==200){var obj = $.parseJSON(xmlhttp.responseText);$('#preview').text(xmlhttp.responseText);}} Some things about this are still unclear to me. I see that when I print the contents of 'xmlhttpd.responseText' I have an array that looks like this: [{"idlocations":"1","lat":"-84.3132","lng":"34.0399","name":"Buffalo Wild Wings"},{"idlocations":"2","lat":"-84.313","lng":"34.0419","name":"The Cooler (Family Skate Center)"},{"idlocations":"3","lat":"-84.2996","lng":"34.0441","name":"Autoindulgence Car Wash"},{"idlocations":"4","lat":"-84.2881","lng":"34.0511","name":"Residence Inn Alpharetta"},{"idlocations":"5","lat":"-84.2285","lng":"34.0518","name":"Neighborhood Fitness"},{"idlocations":"6","lat":"-84.235","lng":"34.0591","name":"Pepperoni's Tavern"},{"idlocations":"7","lat":"-84.2419","lng":"34.0607","name":"Atlanta Bread Co"},{"idlocations":"8","lat":"-84.2253","lng":"34.0609","name":"Dilworth Coffeehouse"},{"idlocations":"9","lat":"-84.3146","lng":"34.0663","name":"Sky Car Wash"},{"idlocations":"10","lat":"-84.2611","lng":"34.0681","name":"Staybridge Suites"},{"idlocations":"11","lat":"-84.2636","lng":"34.0682","name":"Schlotzsky's Deli"},{"idlocations":"12","lat":"-84.3006","lng":"34.0708","name":"Sanford Rosser & Associates Real Estate"}] If I change the code to something like this: xmlhttp.onreadystatechange=function() {if (xmlhttp.readyState==4 && xmlhttp.status==200){var obj = $.parseJSON(xmlhttp.responseText);$('#preview').text(obj);}} Then what I end up with as output looks like this: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object], So then what is the proper way to access obj? Did I parse it improperly or am I accessing obj wrongly? I just don't know what I need to do with it yet. Thanks so much for helping! P.S. I am also wondering if there is some significance to the opening '[' and closing ']' that I am seeing in the original 'xmlhttp.onreadystatechange'. Are those brackets really supposed to be there? Error handling with parseJSON is also a source of questions for me at this point. I could use some guidance here.
×
×
  • Create New...