Search Results

Search found 1654 results on 67 pages for 'hack'.

Page 67/67 | < Previous Page | 63 64 65 66 67 

  • c# Truncate HTML safely for article summary

    - by WickedW
    Hi All, Does anyone have a c# variation of this? This is so I can take some html and display it without breaking as a summary lead in to an article? http://stackoverflow.com/questions/1193500/php-truncate-html-ignoring-tags Save me from reinventing the wheel! Thank you very much ---------- edit ------------------ Sorry, new here, and your right, should have phrased the question better, heres a bit more info I wish to take a html string and truncate it to a set number of words (or even char length) so I can then show the start of it as a summary (which then leads to the main article). I wish to preserve the html so I can show the links etc in preview. The main issue I have to solve is the fact that we may well end up with unclosed html tags if we truncate in the middle of 1 or more tags! The idea I have for solution is to a) truncate the html to N words (words better but chars ok) first (be sure not to stop in the middle of a tag and truncate a require attribute) b) work through the opened html tags in this truncated string (maybe stick them on stack as I go?) c) then work through the closing tags and ensure they match the ones on stack as I pop them off? d) if any open tags left on stack after this, then write them to end of truncated string and html should be good to go!!!! -- edit 12112009 Here is what I have bumbled together so far as a unittest file in VS2008, this 'may' help someone in future My hack attempts based on Jan code are at top for char version + word version (DISCLAIMER: this is dirty rough code!! on my part) I assume working with 'well-formed' HTML in all cases (but not necessarily a full document with a root node as per XML version) Abels XML version is at bottom, but not yet got round to fully getting tests to run on this yet (plus need to understand the code) ... I will update when I get chance to refine having trouble with posting code? is there no upload facility on stack? Thanks for all comments :) using System; using System.Collections.Generic; using System.Text.RegularExpressions; using System.Xml; using System.Xml.XPath; using Microsoft.VisualStudio.TestTools.UnitTesting; namespace PINET40TestProject { [TestClass] public class UtilityUnitTest { public static string TruncateHTMLSafeishChar(string text, int charCount) { bool inTag = false; int cntr = 0; int cntrContent = 0; // loop through html, counting only viewable content foreach (Char c in text) { if (cntrContent == charCount) break; cntr++; if (c == '<') { inTag = true; continue; } if (c == '>') { inTag = false; continue; } if (!inTag) cntrContent++; } string substr = text.Substring(0, cntr); //search for nonclosed tags MatchCollection openedTags = new Regex("<[^/](.|\n)*?>").Matches(substr); MatchCollection closedTags = new Regex("<[/](.|\n)*?>").Matches(substr); // create stack Stack<string> opentagsStack = new Stack<string>(); Stack<string> closedtagsStack = new Stack<string>(); // to be honest, this seemed like a good idea then I got lost along the way // so logic is probably hanging by a thread!! foreach (Match tag in openedTags) { string openedtag = tag.Value.Substring(1, tag.Value.Length - 2); // strip any attributes, sure we can use regex for this! if (openedtag.IndexOf(" ") >= 0) { openedtag = openedtag.Substring(0, openedtag.IndexOf(" ")); } // ignore brs as self-closed if (openedtag.Trim() != "br") { opentagsStack.Push(openedtag); } } foreach (Match tag in closedTags) { string closedtag = tag.Value.Substring(2, tag.Value.Length - 3); closedtagsStack.Push(closedtag); } if (closedtagsStack.Count < opentagsStack.Count) { while (opentagsStack.Count > 0) { string tagstr = opentagsStack.Pop(); if (closedtagsStack.Count == 0 || tagstr != closedtagsStack.Peek()) { substr += "</" + tagstr + ">"; } else { closedtagsStack.Pop(); } } } return substr; } public static string TruncateHTMLSafeishWord(string text, int wordCount) { bool inTag = false; int cntr = 0; int cntrWords = 0; Char lastc = ' '; // loop through html, counting only viewable content foreach (Char c in text) { if (cntrWords == wordCount) break; cntr++; if (c == '<') { inTag = true; continue; } if (c == '>') { inTag = false; continue; } if (!inTag) { // do not count double spaces, and a space not in a tag counts as a word if (c == 32 && lastc != 32) cntrWords++; } } string substr = text.Substring(0, cntr) + " ..."; //search for nonclosed tags MatchCollection openedTags = new Regex("<[^/](.|\n)*?>").Matches(substr); MatchCollection closedTags = new Regex("<[/](.|\n)*?>").Matches(substr); // create stack Stack<string> opentagsStack = new Stack<string>(); Stack<string> closedtagsStack = new Stack<string>(); foreach (Match tag in openedTags) { string openedtag = tag.Value.Substring(1, tag.Value.Length - 2); // strip any attributes, sure we can use regex for this! if (openedtag.IndexOf(" ") >= 0) { openedtag = openedtag.Substring(0, openedtag.IndexOf(" ")); } // ignore brs as self-closed if (openedtag.Trim() != "br") { opentagsStack.Push(openedtag); } } foreach (Match tag in closedTags) { string closedtag = tag.Value.Substring(2, tag.Value.Length - 3); closedtagsStack.Push(closedtag); } if (closedtagsStack.Count < opentagsStack.Count) { while (opentagsStack.Count > 0) { string tagstr = opentagsStack.Pop(); if (closedtagsStack.Count == 0 || tagstr != closedtagsStack.Peek()) { substr += "</" + tagstr + ">"; } else { closedtagsStack.Pop(); } } } return substr; } public static string TruncateHTMLSafeishCharXML(string text, int charCount) { // your data, probably comes from somewhere, or as params to a methodint XmlDocument xml = new XmlDocument(); xml.LoadXml(text); // create a navigator, this is our primary tool XPathNavigator navigator = xml.CreateNavigator(); XPathNavigator breakPoint = null; // find the text node we need: while (navigator.MoveToFollowing(XPathNodeType.Text)) { string lastText = navigator.Value.Substring(0, Math.Min(charCount, navigator.Value.Length)); charCount -= navigator.Value.Length; if (charCount <= 0) { // truncate the last text. Here goes your "search word boundary" code: navigator.SetValue(lastText); breakPoint = navigator.Clone(); break; } } // first remove text nodes, because Microsoft unfortunately merges them without asking while (navigator.MoveToFollowing(XPathNodeType.Text)) { if (navigator.ComparePosition(breakPoint) == XmlNodeOrder.After) { navigator.DeleteSelf(); } } // moves to parent, then move the rest navigator.MoveTo(breakPoint); while (navigator.MoveToFollowing(XPathNodeType.Element)) { if (navigator.ComparePosition(breakPoint) == XmlNodeOrder.After) { navigator.DeleteSelf(); } } // moves to parent // then remove *all* empty nodes to clean up (not necessary): // TODO, add empty elements like <br />, <img /> as exclusion navigator.MoveToRoot(); while (navigator.MoveToFollowing(XPathNodeType.Element)) { while (!navigator.HasChildren && (navigator.Value ?? "").Trim() == "") { navigator.DeleteSelf(); } } // moves to parent navigator.MoveToRoot(); return navigator.InnerXml; } [TestMethod] public void TestTruncateHTMLSafeish() { // Case where we just make it to start of HREF (so effectively an empty link) // 'simple' nested none attributed tags Assert.AreEqual(@"<h1>1234</h1><b><i>56789</i>012</b>", TruncateHTMLSafeishChar( @"<h1>1234</h1><b><i>56789</i>012345</b>", 12)); // In middle of a! Assert.AreEqual(@"<h1>1234</h1><a href=""testurl""><b>567</b></a>", TruncateHTMLSafeishChar( @"<h1>1234</h1><a href=""testurl""><b>5678</b></a><i><strong>some italic nested in string</strong></i>", 7)); // more Assert.AreEqual(@"<div><b><i><strong>1</strong></i></b></div>", TruncateHTMLSafeishChar( @"<div><b><i><strong>12</strong></i></b></div>", 1)); // br Assert.AreEqual(@"<h1>1 3 5</h1><br />6", TruncateHTMLSafeishChar( @"<h1>1 3 5</h1><br />678<br />", 6)); } [TestMethod] public void TestTruncateHTMLSafeishWord() { // zero case Assert.AreEqual(@" ...", TruncateHTMLSafeishWord( @"", 5)); // 'simple' nested none attributed tags Assert.AreEqual(@"<h1>one two <br /></h1><b><i>three ...</i></b>", TruncateHTMLSafeishWord( @"<h1>one two <br /></h1><b><i>three </i>four</b>", 3), "we have added ' ...' to end of summary"); // In middle of a! Assert.AreEqual(@"<h1>one two three </h1><a href=""testurl""><b class=""mrclass"">four ...</b></a>", TruncateHTMLSafeishWord( @"<h1>one two three </h1><a href=""testurl""><b class=""mrclass"">four five </b></a><i><strong>some italic nested in string</strong></i>", 4)); // start of h1 Assert.AreEqual(@"<h1>one two three ...</h1>", TruncateHTMLSafeishWord( @"<h1>one two three </h1><a href=""testurl""><b>four five </b></a><i><strong>some italic nested in string</strong></i>", 3)); // more than words available Assert.AreEqual(@"<h1>one two three </h1><a href=""testurl""><b>four five </b></a><i><strong>some italic nested in string</strong></i> ...", TruncateHTMLSafeishWord( @"<h1>one two three </h1><a href=""testurl""><b>four five </b></a><i><strong>some italic nested in string</strong></i>", 99)); } [TestMethod] public void TestTruncateHTMLSafeishWordXML() { // zero case Assert.AreEqual(@" ...", TruncateHTMLSafeishWord( @"", 5)); // 'simple' nested none attributed tags string output = TruncateHTMLSafeishCharXML( @"<body><h1>one two </h1><b><i>three </i>four</b></body>", 13); Assert.AreEqual(@"<body>\r\n <h1>one two </h1>\r\n <b>\r\n <i>three</i>\r\n </b>\r\n</body>", output, "XML version, no ... yet and addeds '\r\n + spaces?' to format document"); // In middle of a! Assert.AreEqual(@"<h1>one two three </h1><a href=""testurl""><b class=""mrclass"">four ...</b></a>", TruncateHTMLSafeishCharXML( @"<body><h1>one two three </h1><a href=""testurl""><b class=""mrclass"">four five </b></a><i><strong>some italic nested in string</strong></i></body>", 4)); // start of h1 Assert.AreEqual(@"<h1>one two three ...</h1>", TruncateHTMLSafeishCharXML( @"<h1>one two three </h1><a href=""testurl""><b>four five </b></a><i><strong>some italic nested in string</strong></i>", 3)); // more than words available Assert.AreEqual(@"<h1>one two three </h1><a href=""testurl""><b>four five </b></a><i><strong>some italic nested in string</strong></i> ...", TruncateHTMLSafeishCharXML( @"<h1>one two three </h1><a href=""testurl""><b>four five </b></a><i><strong>some italic nested in string</strong></i>", 99)); } } }

    Read the article

  • HTML5 Form: Page Is Reloading Instantly After Restyling (And It Shouldn't Be)

    - by user3689753
    I have a form. I have made it so that if your name is not put in, a red border is put on the name field. That works, BUT...it's for a split second, and then the page reloads. I want the red border to appear, and then stay there. For some reason it's for a split second. Can someone help me make it so the page doesn't reload after displaying the red border? Here's the script. window.onload = function() { document.getElementById("Hogwarts").onsubmit = function () { window.alert("Form submitted. Owl being sent..."); var fname = document.getElementById("fName"); if(!fName.value.match("^[A-Z][A-Za-z]+( [A-Z][A-Za-z]*)*$")) { window.alert("You must enter your name."); addClass(fName, "errorDisp"); document.getElementById("fName").focus(); } else return true; } } function addClass(element, classToAdd) { var currentClassValue = element.className; if (currentClassValue.indexOf(classToAdd) == -1) { if ((currentClassValue == null) || (currentClassValue === "")) { element.className = classToAdd; } else { element.className += " " + classToAdd; } } } function removeClass(element, classToRemove) { var currentClassValue = element.className; if (currentClassValue == classToRemove) { element.className = ""; return; } var classValues = currentClassValue.split(" "); var filteredList = []; for (var i = 0 ; i < classValues.length; i++) { if (classToRemove != classValues[i]) { filteredList.push(classValues[i]); } } element.className = filteredList.join(" "); } Here's the HTML. <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>Hogwarts School of Witchcraft And Wizardry Application Form</title> <link rel="stylesheet" type="text/css" href="main.css" media="screen"/> <script src="script.js" type="text/javascript"></script> </head> <body> <section> <header> <h1>Hogwarts School of Witchcraft And Wizardry</h1> <nav></nav> </header> <main> <form method="post" id="Hogwarts"> <!--<form action="showform.php" method="post" id="Hogwarts">--!> <fieldset id="aboutMe"> <legend id="aboutMeLeg">About Me</legend> <div class="fieldleading"> <label for="fName" class="labelstyle">First name:</label> <input type="text" id="fName" name="fName" autofocus maxlength="50" value="" placeholder="First Name" size="30"> <label for="lName" class="labelstyle">Last name:</label> <input type="text" id="lName" name="lName" required maxlength="50" value="" placeholder="Last Name" pattern="^[A-Za-z ]{3,}$" size="30"> <label for="age" class="labelstyle">Age:</label> <input type="number" id="age" name="age" required min="17" step="1" max="59" value="" placeholder="Age"> </div> <div class="fieldleading"> <label for="date" class="labelstyle">Date Of Birth:</label> <input type="date" name="date1" id="date" required autofocus value=""> </div> <div id="whitegender"> <div class="fieldleading"> <label class="labelstyle">Gender:</label> </div> <input type="radio" name="sex" value="male" class="gender" required="required">Male<br/> <input type="radio" name="sex" value="female" class="gender" required="required">Female<br/> <input type="radio" name="sex" value="other" class="gender" required="required">Other </div> </fieldset> <fieldset id="contactInfo"> <legend id="contactInfoLeg">Contact Information</legend> <div class="fieldleading"> <label for="street" class="labelstyle">Street Address:</label> <input type="text" id="street" name="street" required autofocus maxlength="50" value="" placeholder="Street Address" pattern="^[0-9A-Za-z\. ]+{5,}$" size="35"> <label for="city" class="labelstyle">City:</label> <input type="text" id="city" name="city" required autofocus maxlength="30" value="" placeholder="City" pattern="^[A-Za-z ]{3,}$" size="35"> <label for="State" class="labelstyle">State:</label> <select required id="State" name="State" > <option value="Select Your State">Select Your State</option> <option value="Delaware">Delaware</option> <option value="Pennsylvania">Pennsylvania</option> <option value="New Jersey">New Jersey</option> <option value="Georgia">Georgia</option> <option value="Connecticut">Connecticut</option> <option value="Massachusetts">Massachusetts</option> <option value="Maryland">Maryland</option> <option value="New Hampshire">New Hampshire</option> <option value="New York">New York</option> <option value="Virginia">Virginia</option> </select> </div> <div class="fieldleading"> <label for="zip" class="labelstyle">5-Digit Zip Code:</label> <input id="zip" name="zip" required autofocus maxlength="5" value="" placeholder="Your Zip Code" pattern="^\d{5}$"> <label for="usrtel" class="labelstyle">10-Digit Telephone Number:</label> <input type="tel" name="usrtel" id="usrtel" required autofocus value="" placeholder="123-456-7890" pattern="^\d{3}[\-]\d{3}[\-]\d{4}$"> </div> <div class="fieldleading"> <label for="email1" class="labelstyle">Email:</label> <input type="email" name="email1" id="email1" required autofocus value="" placeholder="[email protected]" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" size="35"> <label for="homepage1" class="labelstyle">Home Page:</label> <input type="url" name="homepage1" id="homepage1" required autofocus value="" placeholder="http://www.hp.com" pattern="https?://.+" size="35"> </div> </fieldset> <fieldset id="yourInterests"> <legend id="yourInterestsLeg">Your Interests</legend> <label for="Major" class="labelstyle">Major/Program Choice:</label> <select required id="Major" name="Major" > <option value="">Select Your Major</option> <option value="Magic1">Magic Horticulture</option> <option value="Magic2">Black Magic</option> <option value="White">White Magic</option> <option value="Blue">Blue Magic</option> <option value="Non">Non-Wizardry Studies</option> </select> </fieldset> <button type="submit" value="Submit" class="submitreset">Submit</button> <button type="reset" value="Reset" class="submitreset">Reset</button> </form> </main> <footer> &copy; 2014 Bennett Nestok </footer> </section> </body> </html> Here's the CSS. a:link { text-decoration: none !important; color:black !important; } a:visited { text-decoration: none !important; color:red !important; } a:active { text-decoration: none !important; color:green !important; } a:hover { text-decoration: none !important; color:blue !important; background-color:white !important; } ::-webkit-input-placeholder { color: #ffffff; } /* gray80 */ :-moz-placeholder { color: #ffffff; } /* Firefox 18- (one color)*/ ::-moz-placeholder { color: #ffffff; } /* Firefox 19+ (double colons) */ :-ms-input-placeholder { color: #ffffff; } body { margin: 0px auto; text-align:center; background-color:grey; font-weight:normal; font-size:12px; font-family: verdana; color:black; background-image:url('bgtexture.jpg'); background-repeat:repeat; } footer { text-align:center; margin: 0px auto; bottom:0px; position:absolute; width:100%; color:white; background-color:black; height:20px; padding-top:4px; } h1 { color:white; text-align:center; margin: 0px auto; margin-bottom:50px; width:100%; background-color:black; padding-top: 13px; padding-bottom: 14px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); } button.submitreset { -moz-border-radius: 400px; -webkit-border-radius: 400px; border-radius: 400px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); } .labelstyle { background-color:#a7a7a7; color:black; -moz-border-radius: 400px; -webkit-border-radius: 400px; border-radius: 400px; padding:3px 3px 3px 3px; } #aboutMe, #contactInfo, #yourInterests { margin-bottom:30px; text-align:left !important; padding: 10px 10px 10px 10px; } #Hogwarts { text-align:center; margin:0px auto; width:780px; padding-top: 20px !important; padding-bottom: 20px !important; background: -webkit-linear-gradient(#474747, grey); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#474747, grey); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#474747, grey); /* For Firefox 3.6 to 15 */ background: linear-gradient(#474747, grey); /* Standard syntax */ border-color:black; border-style: solid; border-width: 2px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); } @media (max-width: 800px){ .labelstyle { display: none; } #Hogwarts { width:300px; } h1 { width:304px; margin-bottom:0px; } .fieldleading { margin-bottom:0px !important; } ::-webkit-input-label { /* WebKit browsers */ color: transparent; } :-moz-label { /* Mozilla Firefox 4 to 18 */ color: transparent; } ::-moz-label { /* Mozilla Firefox 19+ */ color: transparent; } :-ms-input-label { /* Internet Explorer 10+ */ color: transparent; } ::-webkit-input-placeholder { /* WebKit browsers */ color: grey !important; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: grey !important; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: grey !important; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: grey !important; } #aboutMe, #contactInfo, #yourInterests { margin-bottom:10px; text-align:left !important; padding: 5px 5px 5px 5px; } } br { display: block; line-height: 10px; } .fieldleading { margin-bottom:10px; } legend { color:white; } #whitegender { color:white; } #moreleading { margin-bottom:10px; } /*opera only hack attempt*/ @media not all and (-webkit-min-device-pixel-ratio:0) { .fieldleading { margin-bottom:30px !important; } } .errorDisp { border-color: red; border-style: solid; border-width: 2px; }

    Read the article

  • how to use 3D map Actionscript class in mxml file for display map.

    - by nemade-vipin
    hello friends, I have created the application in which I have to use 3D map Action Script class in mxml file to display a map in form. that is in tab navigator last tab. My ActionScript 3D map class is(FlyingDirections):- package src.SBTSCoreObject { import src.SBTSCoreObject.JSONDecoder; import com.google.maps.InfoWindowOptions; import com.google.maps.LatLng; import com.google.maps.LatLngBounds; import com.google.maps.Map3D; import com.google.maps.MapEvent; import com.google.maps.MapOptions; import com.google.maps.MapType; import com.google.maps.MapUtil; import com.google.maps.View; import com.google.maps.controls.NavigationControl; import com.google.maps.geom.Attitude; import com.google.maps.interfaces.IPolyline; import com.google.maps.overlays.Marker; import com.google.maps.overlays.MarkerOptions; import com.google.maps.services.Directions; import com.google.maps.services.DirectionsEvent; import com.google.maps.services.Route; import flash.display.Bitmap; import flash.display.DisplayObject; import flash.display.DisplayObjectContainer; import flash.display.Loader; import flash.display.LoaderInfo; import flash.display.Sprite; import flash.events.Event; import flash.events.IOErrorEvent; import flash.events.MouseEvent; import flash.events.TimerEvent; import flash.filters.DropShadowFilter; import flash.geom.Point; import flash.net.URLLoader; import flash.net.URLRequest; import flash.net.navigateToURL; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFormat; import flash.utils.Timer; import flash.utils.getTimer; public class FlyingDirections extends Map3D { /** * Panoramio home page. */ private static const PANORAMIO_HOME:String = "http://www.panoramio.com/"; /** * The icon for the car. */ [Embed("assets/car-icon-24px.png")] private static const Car:Class; /** * The Panoramio icon. */ [Embed("assets/iw_panoramio.png")] private static const PanoramioIcon:Class; /** * We animate a zoom in to the start the route before the car starts * to move. This constant sets the time in seconds over which this * zoom occurs. */ private static const LEAD_IN_DURATION:Number = 3; /** * Duration of the trip in seconds. */ private static const TRIP_DURATION:Number = 40; /** * Constants that define the geometry of the Panoramio image markers. */ private static const BORDER_T:Number = 3; private static const BORDER_L:Number = 10; private static const BORDER_R:Number = 10; private static const BORDER_B:Number = 3; private static const GAP_T:Number = 2; private static const GAP_B:Number = 1; private static const IMAGE_SCALE:Number = 1; /** * Trajectory that the camera follows over time. Each element is an object * containing properties used to generate parameter values for flyTo(..). * fraction = 0 corresponds to the start of the trip; fraction = 1 * correspondsto the end of the trip. */ private var FLY_TRAJECTORY:Array = [ { fraction: 0, zoom: 6, attitude: new Attitude(0, 0, 0) }, { fraction: 0.2, zoom: 8.5, attitude: new Attitude(30, 30, 0) }, { fraction: 0.5, zoom: 9, attitude: new Attitude(30, 40, 0) }, { fraction: 1, zoom: 8, attitude: new Attitude(50, 50, 0) }, { fraction: 1.1, zoom: 8, attitude: new Attitude(130, 50, 0) }, { fraction: 1.2, zoom: 8, attitude: new Attitude(220, 50, 0) }, ]; /** * Number of panaramio photos for which we load data. We&apos;ll select a * subset of these approximately evenly spaced along the route. */ private static const NUM_GEOTAGGED_PHOTOS:int = 50; /** * Number of panaramio photos that we actually show. */ private static const NUM_SHOWN_PHOTOS:int = 7; /** * Scaling between real trip time and animation time. */ private static const SCALE_TIME:Number = 0.001; /** * getTimer() value at the instant that we start the trip. If this is 0 then * we have not yet started the car moving. */ private var startTimer:int = 0; /** * The current route. */ private var route:Route; /** * The polyline for the route. */ private var polyline:IPolyline; /** * The car marker. */ private var marker:Marker; /** * The cumulative duration in seconds over each step in the route. * cumulativeStepDuration[0] is 0; cumulativeStepDuration[1] adds the * duration of step 0; cumulativeStepDuration[2] adds the duration * of step 1; etc. */ private var cumulativeStepDuration:/*Number*/Array = []; /** * The cumulative distance in metres over each vertex in the route polyline. * cumulativeVertexDistance[0] is 0; cumulativeVertexDistance[1] adds the * distance to vertex 1; cumulativeVertexDistance[2] adds the distance to * vertex 2; etc. */ private var cumulativeVertexDistance:Array; /** * Array of photos loaded from Panoramio. This array has the same format as * the &apos;photos&apos; property within the JSON returned by the Panoramio API * (see http://www.panoramio.com/api/), with additional properties added to * individual photo elements to hold the loader structures that fetch * the actual images. */ private var photos:Array = []; /** * Array of polyline vertices, where each element is in world coordinates. * Several computations can be faster if we can use world coordinates * instead of LatLng coordinates. */ private var worldPoly:/*Point*/Array; /** * Whether the start button has been pressed. */ private var startButtonPressed:Boolean = false; /** * Saved event from onDirectionsSuccess call. */ private var directionsSuccessEvent:DirectionsEvent = null; /** * Start button. */ private var startButton:Sprite; /** * Alpha value used for the Panoramio image markers. */ private var markerAlpha:Number = 0; /** * Index of the current driving direction step. Used to update the * info window content each time we progress to a new step. */ private var currentStepIndex:int = -1; /** * The fly directions map constructor. * * @constructor */ public function FlyingDirections() { key="ABQIAAAA7QUChpcnvnmXxsjC7s1fCxQGj0PqsCtxKvarsoS-iqLdqZSKfxTd7Xf-2rEc_PC9o8IsJde80Wnj4g"; super(); addEventListener(MapEvent.MAP_PREINITIALIZE, onMapPreinitialize); addEventListener(MapEvent.MAP_READY, onMapReady); } /** * Handles map preintialize. Initializes the map center and zoom level. * * @param event The map event. */ private function onMapPreinitialize(event:MapEvent):void { setInitOptions(new MapOptions({ center: new LatLng(-26.1, 135.1), zoom: 4, viewMode: View.VIEWMODE_PERSPECTIVE, mapType:MapType.PHYSICAL_MAP_TYPE })); } /** * Handles map ready and looks up directions. * * @param event The map event. */ private function onMapReady(event:MapEvent):void { enableScrollWheelZoom(); enableContinuousZoom(); addControl(new NavigationControl()); // The driving animation will be updated on every frame. addEventListener(Event.ENTER_FRAME, enterFrame); addStartButton(); // We start the directions loading now, so that we&apos;re ready to go when // the user hits the start button. var directions:Directions = new Directions(); directions.addEventListener( DirectionsEvent.DIRECTIONS_SUCCESS, onDirectionsSuccess); directions.addEventListener( DirectionsEvent.DIRECTIONS_FAILURE, onDirectionsFailure); directions.load("48 Pirrama Rd, Pyrmont, NSW to Byron Bay, NSW"); } /** * Adds a big blue start button. */ private function addStartButton():void { startButton = new Sprite(); startButton.buttonMode = true; startButton.addEventListener(MouseEvent.CLICK, onStartClick); startButton.graphics.beginFill(0x1871ce); startButton.graphics.drawRoundRect(0, 0, 150, 100, 10, 10); startButton.graphics.endFill(); var startField:TextField = new TextField(); startField.autoSize = TextFieldAutoSize.LEFT; startField.defaultTextFormat = new TextFormat("_sans", 20, 0xffffff, true); startField.text = "Start!"; startButton.addChild(startField); startField.x = 0.5 * (startButton.width - startField.width); startField.y = 0.5 * (startButton.height - startField.height); startButton.filters = [ new DropShadowFilter() ]; var container:DisplayObjectContainer = getDisplayObject() as DisplayObjectContainer; container.addChild(startButton); startButton.x = 0.5 * (container.width - startButton.width); startButton.y = 0.5 * (container.height - startButton.height); var panoField:TextField = new TextField(); panoField.autoSize = TextFieldAutoSize.LEFT; panoField.defaultTextFormat = new TextFormat("_sans", 11, 0x000000, true); panoField.text = "Photos provided by Panoramio are under the copyright of their owners."; container.addChild(panoField); panoField.x = container.width - panoField.width - 5; panoField.y = 5; } /** * Handles directions success. Starts flying the route if everything * is ready. * * @param event The directions event. */ private function onDirectionsSuccess(event:DirectionsEvent):void { directionsSuccessEvent = event; flyRouteIfReady(); } /** * Handles click on the start button. Starts flying the route if everything * is ready. */ private function onStartClick(event:MouseEvent):void { startButton.removeEventListener(MouseEvent.CLICK, onStartClick); var container:DisplayObjectContainer = getDisplayObject() as DisplayObjectContainer; container.removeChild(startButton); startButtonPressed = true; flyRouteIfReady(); } /** * If we have loaded the directions and the start button has been pressed * start flying the directions route. */ private function flyRouteIfReady():void { if (!directionsSuccessEvent || !startButtonPressed) { return; } var directions:Directions = directionsSuccessEvent.directions; // Extract the route. route = directions.getRoute(0); // Draws the polyline showing the route. polyline = directions.createPolyline(); addOverlay(directions.createPolyline()); // Creates a car marker that is moved along the route. var car:DisplayObject = new Car(); marker = new Marker(route.startGeocode.point, new MarkerOptions({ icon: car, iconOffset: new Point(-car.width / 2, -car.height) })); addOverlay(marker); transformPolyToWorld(); createCumulativeArrays(); // Load Panoramio data for the region covered by the route. loadPanoramioData(directions.bounds); var duration:Number = route.duration; // Start a timer that will trigger the car moving after the lead in time. var leadInTimer:Timer = new Timer(LEAD_IN_DURATION * 1000, 1); leadInTimer.addEventListener(TimerEvent.TIMER, onLeadInDone); leadInTimer.start(); var flyTime:Number = -LEAD_IN_DURATION; // Set up the camera flight trajectory. for each (var flyStep:Object in FLY_TRAJECTORY) { var time:Number = flyStep.fraction * duration; var center:LatLng = latLngAt(time); var scaledTime:Number = time * SCALE_TIME; var zoom:Number = flyStep.zoom; var attitude:Attitude = flyStep.attitude; var elapsed:Number = scaledTime - flyTime; flyTime = scaledTime; flyTo(center, zoom, attitude, elapsed); } } /** * Loads Panoramio data for the route bounds. We load data about more photos * than we need, then select a subset lying along the route. * @param bounds Bounds within which to fetch images. */ private function loadPanoramioData(bounds:LatLngBounds):void { var params:Object = { order: "popularity", set: "full", from: "0", to: NUM_GEOTAGGED_PHOTOS.toString(10), size: "small", minx: bounds.getWest(), miny: bounds.getSouth(), maxx: bounds.getEast(), maxy: bounds.getNorth() }; var loader:URLLoader = new URLLoader(); var request:URLRequest = new URLRequest( "http://www.panoramio.com/map/get_panoramas.php?" + paramsToString(params)); loader.addEventListener(Event.COMPLETE, onPanoramioDataLoaded); loader.addEventListener(IOErrorEvent.IO_ERROR, onPanoramioDataFailed); loader.load(request); } /** * Transforms the route polyline to world coordinates. */ private function transformPolyToWorld():void { var numVertices:int = polyline.getVertexCount(); worldPoly = new Array(numVertices); for (var i:int = 0; i < numVertices; ++i) { var vertex:LatLng = polyline.getVertex(i); worldPoly[i] = fromLatLngToPoint(vertex, 0); } } /** * Returns the time at which the route approaches closest to the * given point. * @param world Point in world coordinates. * @return Route time at which the closest approach occurs. */ private function getTimeOfClosestApproach(world:Point):Number { var minDistSqr:Number = Number.MAX_VALUE; var numVertices:int = worldPoly.length; var x:Number = world.x; var y:Number = world.y; var minVertex:int = 0; for (var i:int = 0; i < numVertices; ++i) { var dx:Number = worldPoly[i].x - x; var dy:Number = worldPoly[i].y - y; var distSqr:Number = dx * dx + dy * dy; if (distSqr < minDistSqr) { minDistSqr = distSqr; minVertex = i; } } return cumulativeVertexDistance[minVertex]; } /** * Returns the array index of the first element that compares greater than * the given value. * @param ordered Ordered array of elements. * @param value Value to use for comparison. * @return Array index of the first element that compares greater than * the given value. */ private function upperBound(ordered:Array, value:Number, first:int=0, last:int=-1):int { if (last < 0) { last = ordered.length; } var count:int = last - first; var index:int; while (count > 0) { var step:int = count >> 1; index = first + step; if (value >= ordered[index]) { first = index + 1; count -= step - 1; } else { count = step; } } return first; } /** * Selects up to a given number of photos approximately evenly spaced along * the route. * @param ordered Array of photos, each of which is an object with * a property &apos;closestTime&apos;. * @param number Number of photos to select. */ private function selectEvenlySpacedPhotos(ordered:Array, number:int):Array { var start:Number = cumulativeVertexDistance[0]; var end:Number = cumulativeVertexDistance[cumulativeVertexDistance.length - 2]; var closestTimes:Array = []; for each (var photo:Object in ordered) { closestTimes.push(photo.closestTime); } var selectedPhotos:Array = []; for (var i:int = 0; i < number; ++i) { var idealTime:Number = start + ((end - start) * (i + 0.5) / number); var index:int = upperBound(closestTimes, idealTime); if (index < 1) { index = 0; } else if (index >= ordered.length) { index = ordered.length - 1; } else { var errorToPrev:Number = Math.abs(idealTime - closestTimes[index - 1]); var errorToNext:Number = Math.abs(idealTime - closestTimes[index]); if (errorToPrev < errorToNext) { --index; } } selectedPhotos.push(ordered[index]); } return selectedPhotos; } /** * Handles completion of loading the Panoramio index data. Selects from the * returned photo indices a subset of those that lie along the route and * initiates load of each of these. * @param event Load completion event. */ private function onPanoramioDataLoaded(event:Event):void { var loader:URLLoader = event.target as URLLoader; var decoder:JSONDecoder = new JSONDecoder(loader.data as String); var allPhotos:Array = decoder.getValue().photos; for each (var photo:Object in allPhotos) { var latLng:LatLng = new LatLng(photo.latitude, photo.longitude); photo.closestTime = getTimeOfClosestApproach(fromLatLngToPoint(latLng, 0)); } allPhotos.sortOn("closestTime", Array.NUMERIC); photos = selectEvenlySpacedPhotos(allPhotos, NUM_SHOWN_PHOTOS); for each (photo in photos) { var photoLoader:Loader = new Loader(); // The images aren&apos;t on panoramio.com: we can&apos;t acquire pixel access // using "new LoaderContext(true)". photoLoader.load( new URLRequest(photo.photo_file_url)); photo.loader = photoLoader; // Save the loader info: we use this to find the original element when // the load completes. photo.loaderInfo = photoLoader.contentLoaderInfo; photoLoader.contentLoaderInfo.addEventListener( Event.COMPLETE, onPhotoLoaded); } } /** * Creates a MouseEvent listener function that will navigate to the given * URL in a new window. * @param url URL to which to navigate. */ private function createOnClickUrlOpener(url:String):Function { return function(event:MouseEvent):void { navigateToURL(new URLRequest(url)); }; } /** * Handles completion of loading an individual Panoramio image. * Adds a custom marker that displays the image. Initially this is made * invisible so that it can be faded in as needed. * @param event Load completion event. */ private function onPhotoLoaded(event:Event):void { var loaderInfo:LoaderInfo = event.target as LoaderInfo; // We need to find which photo element this image corresponds to. for each (var photo:Object in photos) { if (loaderInfo == photo.loaderInfo) { var imageMarker:Sprite = createImageMarker(photo.loader, photo.owner_name, photo.owner_url); var options:MarkerOptions = new MarkerOptions({ icon: imageMarker, hasShadow: true, iconAlignment: MarkerOptions.ALIGN_BOTTOM | MarkerOptions.ALIGN_LEFT }); var latLng:LatLng = new LatLng(photo.latitude, photo.longitude); var marker:Marker = new Marker(latLng, options); photo.marker = marker; addOverlay(marker); // A hack: we add the actual image after the overlay has been added, // which creates the shadow, so that the shadow is valid even if we // don&apos;t have security privileges to generate the shadow from the // image. marker.foreground.visible = false; marker.shadow.alpha = 0; var imageHolder:Sprite = new Sprite(); imageHolder.addChild(photo.loader); imageHolder.buttonMode = true; imageHolder.addEventListener( MouseEvent.CLICK, createOnClickUrlOpener(photo.photo_url)); imageMarker.addChild(imageHolder); return; } } trace("An image was loaded which could not be found in the photo array."); } /** * Creates a custom marker showing an image. */ private function createImageMarker(child:DisplayObject, ownerName:String, ownerUrl:String):Sprite { var content:Sprite = new Sprite(); var panoramioIcon:Bitmap = new PanoramioIcon(); var iconHolder:Sprite = new Sprite(); iconHolder.addChild(panoramioIcon); iconHolder.buttonMode = true; iconHolder.addEventListener(MouseEvent.CLICK, onPanoramioIconClick); panoramioIcon.x = BORDER_L; panoramioIcon.y = BORDER_T; content.addChild(iconHolder); // NOTE: we add the image as a child only after we&apos;ve added the marker // to the map. Currently the API requires this if it&apos;s to generate the // shadow for unprivileged content. // Shrink the image, so that it doesn&apos;t obcure too much screen space. // Ideally, we&apos;d subsample, but we don&apos;t have pixel level access. child.scaleX = IMAGE_SCALE; child.scaleY = IMAGE_SCALE; var imageW:Number = child.width; var imageH:Number = child.height; child.x = BORDER_L + 30; child.y = BORDER_T + iconHolder.height + GAP_T; var authorField:TextField = new TextField(); authorField.autoSize = TextFieldAutoSize.LEFT; authorField.defaultTextFormat = new TextFormat("_sans", 12); authorField.text = "author:"; content.addChild(authorField); authorField.x = BORDER_L; authorField.y = BORDER_T + iconHolder.height + GAP_T + imageH + GAP_B; var ownerField:TextField = new TextField(); ownerField.autoSize = TextFieldAutoSize.LEFT; var textFormat:TextFormat = new TextFormat("_sans", 14, 0x0e5f9a); ownerField.defaultTextFormat = textFormat; ownerField.htmlText = "<a href=\"" + ownerUrl + "\" target=\"_blank\">" + ownerName + "</a>"; content.addChild(ownerField); ownerField.x = BORDER_L + authorField.width; ownerField.y = BORDER_T + iconHolder.height + GAP_T + imageH + GAP_B; var totalW:Number = BORDER_L + Math.max(imageW, ownerField.width + authorField.width) + BORDER_R; var totalH:Number = BORDER_T + iconHolder.height + GAP_T + imageH + GAP_B + ownerField.height + BORDER_B; content.graphics.beginFill(0xffffff); content.graphics.drawRoundRect(0, 0, totalW, totalH, 10, 10); content.graphics.endFill(); var marker:Sprite = new Sprite(); marker.addChild(content); content.x = 30; content.y = 0; marker.graphics.lineStyle(); marker.graphics.beginFill(0xff0000); marker.graphics.drawCircle(0, totalH + 30, 3); marker.graphics.endFill(); marker.graphics.lineStyle(2, 0xffffff); marker.graphics.moveTo(30 + 10, totalH - 10); marker.graphics.lineTo(0, totalH + 30); return marker; } /** * Handles click on the Panoramio icon. */ private function onPanoramioIconClick(event:MouseEvent):void { navigateToURL(new URLRequest(PANORAMIO_HOME)); } /** * Handles failure of a Panoramio image load. */ private function onPanoramioDataFailed(event:IOErrorEvent):void { trace("Load of image failed: " + event); } /** * Returns a string containing cgi query parameters. * @param Associative array mapping query parameter key to value. * @return String containing cgi query parameters. */ private static function paramsToString(params:Object):String { var result:String = ""; var separator:String = ""; for (var key:String in params) { result += separator + encodeURIComponent(key) + "=" + encodeURIComponent(params[key]); separator = "&"; } return result; } /** * Called once the lead-in flight is done. Starts the car driving along * the route and starts a timer to begin fade in of the Panoramio * images in 1.5 seconds. */ private function onLeadInDone(event:Event):void { // Set startTimer non-zero so that the car starts to move. startTimer = getTimer(); // Start a timer that will fade in the Panoramio images. var fadeInTimer:Timer = new Timer(1500, 1); fadeInTimer.addEventListener(TimerEvent.TIMER, onFadeInTimer); fadeInTimer.start(); } /** * Handles the fade in timer&apos;s TIMER event. Sets markerAlpha above zero * which causes the frame enter handler to fade in the markers. */ private function onFadeInTimer(event:Event):void { markerAlpha = 0.01; } /** * The end time of the flight. */ private function get endTime():Number { if (!cumulativeStepDuration || cumulativeStepDuration.length == 0) { return startTimer; } return startTimer + cumulativeStepDuration[cumulativeStepDuration.length - 1]; } /** * Creates the cumulative arrays, cumulativeStepDuration and * cumulativeVertexDistance. */ private function createCumulativeArrays():void { cumulativeStepDuration = new Array(route.numSteps + 1); cumulativeVertexDistance = new Array(polyline.getVertexCount() + 1); var polylineTotal:Number = 0; var total:Number = 0; var numVertices:int = polyline.getVertexCount(); for (var stepIndex:int = 0; stepIndex < route.numSteps; ++stepIndex) { cumulativeStepDuration[stepIndex] = total; total += route.getStep(stepIndex).duration; var startVertex:int = stepIndex >= 0 ? route.getStep(stepIndex).polylineIndex : 0; var endVertex:int = stepIndex < (route.numSteps - 1) ? route.getStep(stepIndex + 1).polylineIndex : numVertices; var duration:Number = route.getStep(stepIndex).duration; var stepVertices:int = endVertex - startVertex; var latLng:LatLng = polyline.getVertex(startVertex); for (var vertex:int = startVertex; vertex < endVertex; ++vertex) { cumulativeVertexDistance[vertex] = polylineTotal; if (vertex < numVertices - 1) { var nextLatLng:LatLng = polyline.getVertex(vertex + 1); polylineTotal += nextLatLng.distanceFrom(latLng); } latLng = nextLatLng; } } cumulativeStepDuration[stepIndex] = total; } /** * Opens the info window above the car icon that details the given * step of the driving directions. * @param stepIndex Index of the current step. */ private function openInfoForStep(stepIndex:int):void { // Sets the content of the info window. var content:String; if (stepIndex >= route.numSteps) { content = "<b>" + route.endGeocode.address + "</b>" + "<br /><br />" + route.summaryHtml; } else { content = "<b>" + stepIndex + ".</b> " + route.getStep(stepIndex).descriptionHtml; } marker.openInfoWindow(new InfoWindowOptions({ contentHTML: content })); } /** * Displays the driving directions step appropriate for the given time. * Opens the info window showing the step instructions each time we * progress to a new step. * @param time Time for which to display the step. */ private function displayStepAt(time:Number):void { var stepIndex:int = upperBound(cumulativeStepDuration, time) - 1; var minStepIndex:int = 0; var maxStepIndex:int = route.numSteps - 1; if (stepIndex >= 0 && stepIndex <= maxStepIndex && currentStepIndex != stepIndex) { openInfoForStep(stepIndex); currentStepIndex = stepIndex; } } /** * Returns the LatLng at which the car should be positioned at the given * time. * @param time Time for which LatLng should be found. * @return LatLng. */ private function latLngAt(time:Number):LatLng { var stepIndex:int = upperBound(cumulativeStepDuration, time) - 1; var minStepIndex:int = 0; var maxStepIndex:int = route.numSteps - 1; if (stepIndex < minStepIndex) { return route.startGeocode.point; } else if (stepIndex > maxStepIndex) { return route.endGeocode.point; } var stepStart:Number = cumulativeStepDuration[stepIndex]; var stepEnd:Number = cumulativeStepDuration[stepIndex + 1]; var stepFraction:Number = (time - stepStart) / (stepEnd - stepStart); var startVertex:int = route.getStep(stepIndex).polylineIndex; var endVertex:int = (stepIndex + 1) < route.numSteps ? route.getStep(stepIndex + 1).polylineIndex : polyline.getVertexCount(); var stepVertices:int = endVertex - startVertex; var stepLeng

    Read the article

  • DIV is picking max-width value as width value for DIV.

    - by Lokesh
    I am facing a problem after applying max-width hack for IE7. In mozilla, width of the div is flexible and adjustable as per the image width in the div. But in IE7 it is taking the max-width as width of DIV. Below is my HTML code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <link rel="stylesheet" type="text/css" media="all" href="style/food.css" /> <!--[if IE 7]> <link rel="stylesheet" type="text/css" media="screen" href="style/ie7.css" /> <![endif]--> </head> <body> <div class="main_content_inner_ko"> <div class="product_item"> <img src="images/product_icons/BigNTasty.png" alt="Big N&rsquo; Tasty"/><div class="small_title">Big N&rsquo; Tasty</div> <table class="product_information" cellpadding="0" border="0" cellspacing="0"> <tbody> <tr> <td class="red_bold"></td> <td></td> <td class="small_italic">(Daily Value)</td> </tr> <tr> <td class="red_bold">Calories</td> <td>460</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Total Fat</td> <td>24g</td> <td class="small_italic">(37%)</td> </tr> <tr> <td class="red_bold">Carbs</td> <td>37g</td> <td class="small_italic">(12%)</td> </tr> <tr> <td class="red_bold">Protein</td> <td>24g</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Sodium</td> <td>720mg</td> <td class="small_italic">(30%)</td> </tr> <tr> <td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td> </tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr> </tbody> </table> </div> <div class="product_item"> <img src="images/product_images/x115/chicken/PremCrispyChickenRanchBLT.png" height="115" width="115" alt="Premium Cripsy Chicken Ranch BLT"/><div class="small_title">Premium Cripsy Chicken Ranch BLT</div> <table class="product_information" cellpadding="0" border="0" cellspacing="0"> <tbody> <tr> <td class="red_bold"></td> <td></td> <td class="small_italic">(Daily Value)</td> </tr> <tr> <td class="red_bold">Calories</td> <td>460</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Total Fat</td> <td>24g</td> <td class="small_italic">(37%)</td> </tr> <tr> <td class="red_bold">Carbs</td> <td>37g</td> <td class="small_italic">(12%)</td> </tr> <tr> <td class="red_bold">Protein</td> <td>24g</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Sodium</td> <td>720mg</td> <td class="small_italic">(30%)</td> </tr> <tr> <td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td> </tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr> </tbody> </table> </div> <div class="product_item"> <img src="images/product_images/x115/sandwiches/FiletOFish.png" height="115" width="99" alt="Filet O Fish"/> <div class="small_title">Filet O Fish</div> <table class="product_information" cellpadding="0" border="0" cellspacing="0"> <tbody> <tr> <td class="red_bold"></td> <td></td> <td class="small_italic">(Daily Value)</td> </tr> <tr> <td class="red_bold">Calories</td> <td>460</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Total Fat</td> <td>24g</td> <td class="small_italic">(37%)</td> </tr> <tr> <td class="red_bold">Carbs</td> <td>37g</td> <td class="small_italic">(12%)</td> </tr> <tr> <td class="red_bold">Protein</td> <td>24g</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Sodium</td> <td>720mg</td> <td class="small_italic">(30%)</td> </tr> <tr> <td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td> </tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr> </tbody> </table> </div> <div class="product_item"> <img src="images/product_icons/BigNTasty.png" height="115" width="99" alt="Big N&rsquo; Tasty"/> <div class="small_title">Big N&rsquo; Tasty</div> <table class="product_information" cellpadding="0" border="0" cellspacing="0"> <tbody> <tr> <td class="red_bold"></td> <td></td> <td class="small_italic">(Daily Value)</td> </tr> <tr> <td class="red_bold">Calories</td> <td>460</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Total Fat</td> <td>24g</td> <td class="small_italic">(37%)</td> </tr> <tr> <td class="red_bold">Carbs</td> <td>37g</td> <td class="small_italic">(12%)</td> </tr> <tr> <td class="red_bold">Protein</td> <td>24g</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Sodium</td> <td>720mg</td> <td class="small_italic">(30%)</td> </tr> <tr> <td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td> </tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr> </tbody> </table> </div> <div class="product_item"> <img src="images/product_images/x115/chicken/PremCrispyChickenRanchBLT.png" height="115" width="115" alt="Premium Cripsy Chicken Ranch BLT"/> <div class="small_title">Premium Cripsy Chicken Ranch BLT</div> <table class="product_information" cellpadding="0" border="0" cellspacing="0"> <tbody> <tr> <td class="red_bold"></td> <td></td> <td class="small_italic">(Daily Value)</td> </tr> <tr> <td class="red_bold">Calories</td> <td>460</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Total Fat</td> <td>24g</td> <td class="small_italic">(37%)</td> </tr> <tr> <td class="red_bold">Carbs</td> <td>37g</td> <td class="small_italic">(12%)</td> </tr> <tr> <td class="red_bold">Protein</td> <td>24g</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Sodium</td> <td>720mg</td> <td class="small_italic">(30%)</td> </tr> <tr> <td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td> </tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr> </tbody> </table> </div> <div class="product_item"> <img src="images/product_images/x115/sandwiches/FiletOFish.png" height="115" width="99" alt="Filet O Fish"/> <div class="small_title">Filet O Fish</div> <table class="product_information" cellpadding="0" border="0" cellspacing="0"> <tbody> <tr> <td class="red_bold"></td> <td></td> <td class="small_italic">(Daily Value)</td> </tr> <tr> <td class="red_bold">Calories</td> <td>460</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Total Fat</td> <td>24g</td> <td class="small_italic">(37%)</td> </tr> <tr> <td class="red_bold">Carbs</td> <td>37g</td> <td class="small_italic">(12%)</td> </tr> <tr> <td class="red_bold">Protein</td> <td>24g</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Sodium</td> <td>720mg</td> <td class="small_italic">(30%)</td> </tr> <tr> <td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td> </tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr> </tbody> </table> </div> <div class="product_item"> <img src="images/product_icons/BigNTasty.png" height="115" width="99" alt="Big N&rsquo; Tasty"/> <div class="small_title">Big N&rsquo; Tasty</div> <table class="product_information" cellpadding="0" border="0" cellspacing="0"> <tbody> <tr> <td class="red_bold"></td> <td></td> <td class="small_italic">(Daily Value)</td> </tr> <tr> <td class="red_bold">Calories</td> <td>460</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Total Fat</td> <td>24g</td> <td class="small_italic">(37%)</td> </tr> <tr> <td class="red_bold">Carbs</td> <td>37g</td> <td class="small_italic">(12%)</td> </tr> <tr> <td class="red_bold">Protein</td> <td>24g</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Sodium</td> <td>720mg</td> <td class="small_italic">(30%)</td> </tr> <tr> <td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td> </tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr> </tbody> </table> </div> <div class="product_item"> <img src="images/product_icons/BigNTasty.png" height="115" width="99" alt="Big N&rsquo; Tasty"/> <div class="small_title">Big N&rsquo; Tasty</div> <table class="product_information" cellpadding="0" border="0" cellspacing="0"> <tbody> <tr> <td class="red_bold"></td> <td></td> <td class="small_italic">(Daily Value)</td> </tr> <tr> <td class="red_bold">Calories</td> <td>460</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Total Fat</td> <td>24g</td> <td class="small_italic">(37%)</td> </tr> <tr> <td class="red_bold">Carbs</td> <td>37g</td> <td class="small_italic">(12%)</td> </tr> <tr> <td class="red_bold">Protein</td> <td>24g</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Sodium</td> <td>720mg</td> <td class="small_italic">(30%)</td> </tr> <tr> <td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td> </tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr> </tbody> </table> </div> <div class="product_item"> <img src="images/product_images/x115/sandwiches/FiletOFish.png" height="115" width="99" alt="Filet O Fish"/> <div class="small_title">Filet O Fish</div> <table class="product_information" cellpadding="0" border="0" cellspacing="0"> <tbody> <tr> <td class="red_bold"></td> <td></td> <td class="small_italic">(Daily Value)</td> </tr> <tr> <td class="red_bold">Calories</td> <td>460</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Total Fat</td> <td>24g</td> <td class="small_italic">(37%)</td> </tr> <tr> <td class="red_bold">Carbs</td> <td>37g</td> <td class="small_italic">(12%)</td> </tr> <tr> <td class="red_bold">Protein</td> <td>24g</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Sodium</td> <td>720mg</td> <td class="small_italic">(30%)</td> </tr> <tr> <td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td> </tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr> </tbody> </table> </div> <div class="product_item"> <img src="images/product_icons/BigNTasty.png" height="115" width="99" alt="Big N&rsquo; Tasty"/> <div class="small_title">Big N&rsquo; Tasty</div> <table class="product_information" cellpadding="0" border="0" cellspacing="0"> <tbody> <tr> <td class="red_bold"></td> <td></td> <td class="small_italic">(Daily Value)</td> </tr> <tr> <td class="red_bold">Calories</td> <td>460</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Total Fat</td> <td>24g</td> <td class="small_italic">(37%)</td> </tr> <tr> <td class="red_bold">Carbs</td> <td>37g</td> <td class="small_italic">(12%)</td> </tr> <tr> <td class="red_bold">Protein</td> <td>24g</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Sodium</td> <td>720mg</td> <td class="small_italic">(30%)</td> </tr> <tr> <td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td> </tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr> </tbody> </table> </div> <div class="product_item"> <img src="images/product_icons/BigNTasty.png" height="115" width="99" alt="Big N&rsquo; Tasty"/> <div class="small_title">Big N&rsquo; Tasty</div> <table class="product_information" cellpadding="0" border="0" cellspacing="0"> <tbody> <tr> <td class="red_bold"></td> <td></td> <td class="small_italic">(Daily Value)</td> </tr> <tr> <td class="red_bold">Calories</td> <td>460</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Total Fat</td> <td>24g</td> <td class="small_italic">(37%)</td> </tr> <tr> <td class="red_bold">Carbs</td> <td>37g</td> <td class="small_italic">(12%)</td> </tr> <tr> <td class="red_bold">Protein</td> <td>24g</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Sodium</td> <td>720mg</td> <td class="small_italic">(30%)</td> </tr> <tr> <td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td> </tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr> </tbody> </table> </div> <div class="product_item"> <img src="images/product_icons/BigNTasty.png" height="115" width="99" alt="Big N&rsquo; Tasty"/> <div class="small_title">Big N&rsquo; Tasty</div> <table class="product_information" cellpadding="0" border="0" cellspacing="0"> <tbody> <tr> <td class="red_bold"></td> <td></td> <td class="small_italic">(Daily Value)</td> </tr> <tr> <td class="red_bold">Calories</td> <td>460</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Total Fat</td> <td>24g</td> <td class="small_italic">(37%)</td> </tr> <tr> <td class="red_bold">Carbs</td> <td>37g</td> <td class="small_italic">(12%)</td> </tr> <tr> <td class="red_bold">Protein</td> <td>24g</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Sodium</td> <td>720mg</td> <td class="small_italic">(30%)</td> </tr> <tr> <td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td> </tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr> </tbody> </table> </div> <div class="product_item"> <img src="images/product_images/x115/chicken/PremCrispyChickenRanchBLT.png" height="115" width="115" alt="Premium Cripsy Chicken Ranch BLT"/> <div class="small_title">Premium Cripsy Chicken Ranch BLT</div> <table class="product_information" cellpadding="0" border="0" cellspacing="0"> <tbody> <tr> <td class="red_bold"></td> <td></td> <td class="small_italic">(Daily Value)</td> </tr> <tr> <td class="red_bold">Calories</td> <td>460</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Total Fat</td> <td>24g</td> <td class="small_italic">(37%)</td> </tr> <tr> <td class="red_bold">Carbs</td> <td>37g</td> <td class="small_italic">(12%)</td> </tr> <tr> <td class="red_bold">Protein</td> <td>24g</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Sodium</td> <td>720mg</td> <td class="small_italic">(30%)</td> </tr> <tr> <td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td> </tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr> </tbody> </table> </div> <div class="product_item"> <img src="images/product_images/x115/sandwiches/FiletOFish.png" height="115" width="99" alt="Filet O Fish"/> <div class="small_title">Filet O Fish</div> <table class="product_information" cellpadding="0" border="0" cellspacing="0"> <tbody> <tr> <td class="red_bold"></td> <td></td> <td class="small_italic">(Daily Value)</td> </tr> <tr> <td class="red_bold">Calories</td> <td>460</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Total Fat</td> <td>24g</td> <td class="small_italic">(37%)</td> </tr> <tr> <td class="red_bold">Carbs</td> <td>37g</td> <td class="small_italic">(12%)</td> </tr> <tr> <td class="red_bold">Protein</td> <td>24g</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Sodium</td> <td>720mg</td> <td class="small_italic">(30%)</td> </tr> <tr> <td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td> </tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr> </tbody> </table> </div> <div class="product_item"> <img src="images/product_icons/BigNTasty.png" height="115" width="99" alt="Big N&rsquo; Tasty"/> <div class="small_title">Big N&rsquo; Tasty</div> <table class="product_information" cellpadding="0" border="0" cellspacing="0"> <tbody> <tr> <td class="red_bold"></td> <td></td> <td class="small_italic">(Daily Value)</td> </tr> <tr> <td class="red_bold">Calories</td> <td>460</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Total Fat</td> <td>24g</td> <td class="small_italic">(37%)</td> </tr> <tr> <td class="red_bold">Carbs</td> <td>37g</td> <td class="small_italic">(12%)</td> </tr> <tr> <td class="red_bold">Protein</td> <td>24g</td> <td class="small_italic"></td> </tr> <tr> <td class="red_bold">Sodium</td> <td>720mg</td> <td class="small_italic">(30%)</td> </tr> <tr> <td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td> </tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr> <tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr> </tbody> </table> </div> <div class="clear"></div> </div> </body> Below is the css code: div.small_title { font-size: 10px; color: #929292; text-align: center; max-width: 115px; line-height: 13px; padding-top: 5px; margin: 0 auto; } .product_item { position: relative; float:left; min-width: 35px; max-width: 189px; width: auto !important; text-align:center; border: 1px solid #CCC; } Please help me! Cheers!! Lokesh Yadav

    Read the article

< Previous Page | 63 64 65 66 67