Search Results

Search found 1079 results on 44 pages for 'dtd'.

Page 30/44 | < Previous Page | 26 27 28 29 30 31 32 33 34 35 36 37  | Next Page >

  • Creating Custom Ajax Control Toolkit Controls

    - by Stephen Walther
    The goal of this blog entry is to explain how you can extend the Ajax Control Toolkit with custom Ajax Control Toolkit controls. I describe how you can create the two halves of an Ajax Control Toolkit control: the server-side control extender and the client-side control behavior. Finally, I explain how you can use the new Ajax Control Toolkit control in a Web Forms page. At the end of this blog entry, there is a link to download a Visual Studio 2010 solution which contains the code for two Ajax Control Toolkit controls: SampleExtender and PopupHelpExtender. The SampleExtender contains the minimum skeleton for creating a new Ajax Control Toolkit control. You can use the SampleExtender as a starting point for your custom Ajax Control Toolkit controls. The PopupHelpExtender control is a super simple custom Ajax Control Toolkit control. This control extender displays a help message when you start typing into a TextBox control. The animated GIF below demonstrates what happens when you click into a TextBox which has been extended with the PopupHelp extender. Here’s a sample of a Web Forms page which uses the control: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShowPopupHelp.aspx.cs" Inherits="MyACTControls.Web.Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html > <head runat="server"> <title>Show Popup Help</title> </head> <body> <form id="form1" runat="server"> <div> <act:ToolkitScriptManager ID="tsm" runat="server" /> <%-- Social Security Number --%> <asp:Label ID="lblSSN" Text="SSN:" AssociatedControlID="txtSSN" runat="server" /> <asp:TextBox ID="txtSSN" runat="server" /> <act:PopupHelpExtender id="ph1" TargetControlID="txtSSN" HelpText="Please enter your social security number." runat="server" /> <%-- Social Security Number --%> <asp:Label ID="lblPhone" Text="Phone Number:" AssociatedControlID="txtPhone" runat="server" /> <asp:TextBox ID="txtPhone" runat="server" /> <act:PopupHelpExtender id="ph2" TargetControlID="txtPhone" HelpText="Please enter your phone number." runat="server" /> </div> </form> </body> </html> In the page above, the PopupHelp extender is used to extend the functionality of the two TextBox controls. When focus is given to a TextBox control, the popup help message is displayed. An Ajax Control Toolkit control extender consists of two parts: a server-side control extender and a client-side behavior. For example, the PopupHelp extender consists of a server-side PopupHelpExtender control (PopupHelpExtender.cs) and a client-side PopupHelp behavior JavaScript script (PopupHelpBehavior.js). Over the course of this blog entry, I describe how you can create both the server-side extender and the client-side behavior. Writing the Server-Side Code Creating a Control Extender You create a control extender by creating a class that inherits from the abstract ExtenderControlBase class. For example, the PopupHelpExtender control is declared like this: public class PopupHelpExtender: ExtenderControlBase { } The ExtenderControlBase class is part of the Ajax Control Toolkit. This base class contains all of the common server properties and methods of every Ajax Control Toolkit extender control. The ExtenderControlBase class inherits from the ExtenderControl class. The ExtenderControl class is a standard class in the ASP.NET framework located in the System.Web.UI namespace. This class is responsible for generating a client-side behavior. The class generates a call to the Microsoft Ajax Library $create() method which looks like this: <script type="text/javascript"> $create(MyACTControls.PopupHelpBehavior, {"HelpText":"Please enter your social security number.","id":"ph1"}, null, null, $get("txtSSN")); }); </script> The JavaScript $create() method is part of the Microsoft Ajax Library. The reference for this method can be found here: http://msdn.microsoft.com/en-us/library/bb397487.aspx This method accepts the following parameters: type – The type of client behavior to create. The $create() method above creates a client PopupHelpBehavior. Properties – Enables you to pass initial values for the properties of the client behavior. For example, the initial value of the HelpText property. This is how server property values are passed to the client. Events – Enables you to pass client-side event handlers to the client behavior. References – Enables you to pass references to other client components. Element – The DOM element associated with the client behavior. This will be the DOM element associated with the control being extended such as the txtSSN TextBox. The $create() method is generated for you automatically. You just need to focus on writing the server-side control extender class. Specifying the Target Control All Ajax Control Toolkit extenders inherit a TargetControlID property from the ExtenderControlBase class. This property, the TargetControlID property, points at the control that the extender control extends. For example, the Ajax Control Toolkit TextBoxWatermark control extends a TextBox, the ConfirmButton control extends a Button, and the Calendar control extends a TextBox. You must indicate the type of control which your extender is extending. You indicate the type of control by adding a [TargetControlType] attribute to your control. For example, the PopupHelp extender is declared like this: [TargetControlType(typeof(TextBox))] public class PopupHelpExtender: ExtenderControlBase { } The PopupHelp extender can be used to extend a TextBox control. If you try to use the PopupHelp extender with another type of control then an exception is thrown. If you want to create an extender control which can be used with any type of ASP.NET control (Button, DataView, TextBox or whatever) then use the following attribute: [TargetControlType(typeof(Control))] Decorating Properties with Attributes If you decorate a server-side property with the [ExtenderControlProperty] attribute then the value of the property gets passed to the control’s client-side behavior. The value of the property gets passed to the client through the $create() method discussed above. The PopupHelp control contains the following HelpText property: [ExtenderControlProperty] [RequiredProperty] public string HelpText { get { return GetPropertyValue("HelpText", "Help Text"); } set { SetPropertyValue("HelpText", value); } } The HelpText property determines the help text which pops up when you start typing into a TextBox control. Because the HelpText property is decorated with the [ExtenderControlProperty] attribute, any value assigned to this property on the server is passed to the client automatically. For example, if you declare the PopupHelp extender in a Web Form page like this: <asp:TextBox ID="txtSSN" runat="server" /> <act:PopupHelpExtender id="ph1" TargetControlID="txtSSN" HelpText="Please enter your social security number." runat="server" />   Then the PopupHelpExtender renders the call to the the following Microsoft Ajax Library $create() method: $create(MyACTControls.PopupHelpBehavior, {"HelpText":"Please enter your social security number.","id":"ph1"}, null, null, $get("txtSSN")); You can see this call to the JavaScript $create() method by selecting View Source in your browser. This call to the $create() method calls a method named set_HelpText() automatically and passes the value “Please enter your social security number”. There are several attributes which you can use to decorate server-side properties including: ExtenderControlProperty – When a property is marked with this attribute, the value of the property is passed to the client automatically. ExtenderControlEvent – When a property is marked with this attribute, the property represents a client event handler. Required – When a value is not assigned to this property on the server, an error is displayed. DefaultValue – The default value of the property passed to the client. ClientPropertyName – The name of the corresponding property in the JavaScript behavior. For example, the server-side property is named ID (uppercase) and the client-side property is named id (lower-case). IDReferenceProperty – Applied to properties which refer to the IDs of other controls. URLProperty – Calls ResolveClientURL() to convert from a server-side URL to a URL which can be used on the client. ElementReference – Returns a reference to a DOM element by performing a client $get(). The WebResource, ClientResource, and the RequiredScript Attributes The PopupHelp extender uses three embedded resources named PopupHelpBehavior.js, PopupHelpBehavior.debug.js, and PopupHelpBehavior.css. The first two files are JavaScript files and the final file is a Cascading Style sheet file. These files are compiled as embedded resources. You don’t need to mark them as embedded resources in your Visual Studio solution because they get added to the assembly when the assembly is compiled by a build task. You can see that these files get embedded into the MyACTControls assembly by using Red Gate’s .NET Reflector tool: In order to use these files with the PopupHelp extender, you need to work with both the WebResource and the ClientScriptResource attributes. The PopupHelp extender includes the following three WebResource attributes. [assembly: WebResource("PopupHelp.PopupHelpBehavior.js", "text/javascript")] [assembly: WebResource("PopupHelp.PopupHelpBehavior.debug.js", "text/javascript")] [assembly: WebResource("PopupHelp.PopupHelpBehavior.css", "text/css", PerformSubstitution = true)] These WebResource attributes expose the embedded resource from the assembly so that they can be accessed by using the ScriptResource.axd or WebResource.axd handlers. The first parameter passed to the WebResource attribute is the name of the embedded resource and the second parameter is the content type of the embedded resource. The PopupHelp extender also includes the following ClientScriptResource and ClientCssResource attributes: [ClientScriptResource("MyACTControls.PopupHelpBehavior", "PopupHelp.PopupHelpBehavior.js")] [ClientCssResource("PopupHelp.PopupHelpBehavior.css")] Including these attributes causes the PopupHelp extender to request these resources when you add the PopupHelp extender to a page. If you open View Source in a browser which uses the PopupHelp extender then you will see the following link for the Cascading Style Sheet file: <link href="/WebResource.axd?d=0uONMsWXUuEDG-pbJHAC1kuKiIMteQFkYLmZdkgv7X54TObqYoqVzU4mxvaa4zpn5H9ch0RDwRYKwtO8zM5mKgO6C4WbrbkWWidKR07LD1d4n4i_uNB1mHEvXdZu2Ae5mDdVNDV53znnBojzCzwvSw2&amp;t=634417392021676003" type="text/css" rel="stylesheet" /> You also will see the following script include for the JavaScript file: <script src="/ScriptResource.axd?d=pIS7xcGaqvNLFBvExMBQSp_0xR3mpDfS0QVmmyu1aqDUjF06TrW1jVDyXNDMtBHxpRggLYDvgFTWOsrszflZEDqAcQCg-hDXjun7ON0Ol7EXPQIdOe1GLMceIDv3OeX658-tTq2LGdwXhC1-dE7_6g2&amp;t=ffffffff88a33b59" type="text/javascript"></script> The JavaScrpt file returned by this request to ScriptResource.axd contains the combined scripts for any and all Ajax Control Toolkit controls in a page. By default, the Ajax Control Toolkit combines all of the JavaScript files required by a page into a single JavaScript file. Combining files in this way really speeds up how quickly all of the JavaScript files get delivered from the web server to the browser. So, by default, there will be only one ScriptResource.axd include for all of the JavaScript files required by a page. If you want to disable Script Combining, and create separate links, then disable Script Combining like this: <act:ToolkitScriptManager ID="tsm" runat="server" CombineScripts="false" /> There is one more important attribute used by Ajax Control Toolkit extenders. The PopupHelp behavior uses the following two RequirdScript attributes to load the JavaScript files which are required by the PopupHelp behavior: [RequiredScript(typeof(CommonToolkitScripts), 0)] [RequiredScript(typeof(PopupExtender), 1)] The first parameter of the RequiredScript attribute represents either the string name of a JavaScript file or the type of an Ajax Control Toolkit control. The second parameter represents the order in which the JavaScript files are loaded (This second parameter is needed because .NET attributes are intrinsically unordered). In this case, the RequiredScript attribute will load the JavaScript files associated with the CommonToolkitScripts type and the JavaScript files associated with the PopupExtender in that order. The PopupHelp behavior depends on these JavaScript files. Writing the Client-Side Code The PopupHelp extender uses a client-side behavior written with the Microsoft Ajax Library. Here is the complete code for the client-side behavior: (function () { // The unique name of the script registered with the // client script loader var scriptName = "PopupHelpBehavior"; function execute() { Type.registerNamespace('MyACTControls'); MyACTControls.PopupHelpBehavior = function (element) { /// <summary> /// A behavior which displays popup help for a textbox /// </summmary> /// <param name="element" type="Sys.UI.DomElement">The element to attach to</param> MyACTControls.PopupHelpBehavior.initializeBase(this, [element]); this._textbox = Sys.Extended.UI.TextBoxWrapper.get_Wrapper(element); this._cssClass = "ajax__popupHelp"; this._popupBehavior = null; this._popupPosition = Sys.Extended.UI.PositioningMode.BottomLeft; this._popupDiv = null; this._helpText = "Help Text"; this._element$delegates = { focus: Function.createDelegate(this, this._element_onfocus), blur: Function.createDelegate(this, this._element_onblur) }; } MyACTControls.PopupHelpBehavior.prototype = { initialize: function () { MyACTControls.PopupHelpBehavior.callBaseMethod(this, 'initialize'); // Add event handlers for focus and blur var element = this.get_element(); $addHandlers(element, this._element$delegates); }, _ensurePopup: function () { if (!this._popupDiv) { var element = this.get_element(); var id = this.get_id(); this._popupDiv = $common.createElementFromTemplate({ nodeName: "div", properties: { id: id + "_popupDiv" }, cssClasses: ["ajax__popupHelp"] }, element.parentNode); this._popupBehavior = new $create(Sys.Extended.UI.PopupBehavior, { parentElement: element }, {}, {}, this._popupDiv); this._popupBehavior.set_positioningMode(this._popupPosition); } }, get_HelpText: function () { return this._helpText; }, set_HelpText: function (value) { if (this._HelpText != value) { this._helpText = value; this._ensurePopup(); this._popupDiv.innerHTML = value; this.raisePropertyChanged("Text") } }, _element_onfocus: function (e) { this.show(); }, _element_onblur: function (e) { this.hide(); }, show: function () { this._popupBehavior.show(); }, hide: function () { if (this._popupBehavior) { this._popupBehavior.hide(); } }, dispose: function() { var element = this.get_element(); $clearHandlers(element); if (this._popupBehavior) { this._popupBehavior.dispose(); this._popupBehavior = null; } } }; MyACTControls.PopupHelpBehavior.registerClass('MyACTControls.PopupHelpBehavior', Sys.Extended.UI.BehaviorBase); Sys.registerComponent(MyACTControls.PopupHelpBehavior, { name: "popupHelp" }); } // execute if (window.Sys && Sys.loader) { Sys.loader.registerScript(scriptName, ["ExtendedBase", "ExtendedCommon"], execute); } else { execute(); } })();   In the following sections, we’ll discuss how this client-side behavior works. Wrapping the Behavior for the Script Loader The behavior is wrapped with the following script: (function () { // The unique name of the script registered with the // client script loader var scriptName = "PopupHelpBehavior"; function execute() { // Behavior Content } // execute if (window.Sys && Sys.loader) { Sys.loader.registerScript(scriptName, ["ExtendedBase", "ExtendedCommon"], execute); } else { execute(); } })(); This code is required by the Microsoft Ajax Library Script Loader. You need this code if you plan to use a behavior directly from client-side code and you want to use the Script Loader. If you plan to only use your code in the context of the Ajax Control Toolkit then you can leave out this code. Registering a JavaScript Namespace The PopupHelp behavior is declared within a namespace named MyACTControls. In the code above, this namespace is created with the following registerNamespace() method: Type.registerNamespace('MyACTControls'); JavaScript does not have any built-in way of creating namespaces to prevent naming conflicts. The Microsoft Ajax Library extends JavaScript with support for namespaces. You can learn more about the registerNamespace() method here: http://msdn.microsoft.com/en-us/library/bb397723.aspx Creating the Behavior The actual Popup behavior is created with the following code. MyACTControls.PopupHelpBehavior = function (element) { /// <summary> /// A behavior which displays popup help for a textbox /// </summmary> /// <param name="element" type="Sys.UI.DomElement">The element to attach to</param> MyACTControls.PopupHelpBehavior.initializeBase(this, [element]); this._textbox = Sys.Extended.UI.TextBoxWrapper.get_Wrapper(element); this._cssClass = "ajax__popupHelp"; this._popupBehavior = null; this._popupPosition = Sys.Extended.UI.PositioningMode.BottomLeft; this._popupDiv = null; this._helpText = "Help Text"; this._element$delegates = { focus: Function.createDelegate(this, this._element_onfocus), blur: Function.createDelegate(this, this._element_onblur) }; } MyACTControls.PopupHelpBehavior.prototype = { initialize: function () { MyACTControls.PopupHelpBehavior.callBaseMethod(this, 'initialize'); // Add event handlers for focus and blur var element = this.get_element(); $addHandlers(element, this._element$delegates); }, _ensurePopup: function () { if (!this._popupDiv) { var element = this.get_element(); var id = this.get_id(); this._popupDiv = $common.createElementFromTemplate({ nodeName: "div", properties: { id: id + "_popupDiv" }, cssClasses: ["ajax__popupHelp"] }, element.parentNode); this._popupBehavior = new $create(Sys.Extended.UI.PopupBehavior, { parentElement: element }, {}, {}, this._popupDiv); this._popupBehavior.set_positioningMode(this._popupPosition); } }, get_HelpText: function () { return this._helpText; }, set_HelpText: function (value) { if (this._HelpText != value) { this._helpText = value; this._ensurePopup(); this._popupDiv.innerHTML = value; this.raisePropertyChanged("Text") } }, _element_onfocus: function (e) { this.show(); }, _element_onblur: function (e) { this.hide(); }, show: function () { this._popupBehavior.show(); }, hide: function () { if (this._popupBehavior) { this._popupBehavior.hide(); } }, dispose: function() { var element = this.get_element(); $clearHandlers(element); if (this._popupBehavior) { this._popupBehavior.dispose(); this._popupBehavior = null; } } }; The code above has two parts. The first part of the code is used to define the constructor function for the PopupHelp behavior. This is a factory method which returns an instance of a PopupHelp behavior: MyACTControls.PopupHelpBehavior = function (element) { } The second part of the code modified the prototype for the PopupHelp behavior: MyACTControls.PopupHelpBehavior.prototype = { } Any code which is particular to a single instance of the PopupHelp behavior should be placed in the constructor function. For example, the default value of the _helpText field is assigned in the constructor function: this._helpText = "Help Text"; Any code which is shared among all instances of the PopupHelp behavior should be added to the PopupHelp behavior’s prototype. For example, the public HelpText property is added to the prototype: get_HelpText: function () { return this._helpText; }, set_HelpText: function (value) { if (this._HelpText != value) { this._helpText = value; this._ensurePopup(); this._popupDiv.innerHTML = value; this.raisePropertyChanged("Text") } }, Registering a JavaScript Class After you create the PopupHelp behavior, you must register the behavior as a class by using the Microsoft Ajax registerClass() method like this: MyACTControls.PopupHelpBehavior.registerClass('MyACTControls.PopupHelpBehavior', Sys.Extended.UI.BehaviorBase); This call to registerClass() registers PopupHelp behavior as a class which derives from the base Sys.Extended.UI.BehaviorBase class. Like the ExtenderControlBase class on the server side, the BehaviorBase class on the client side contains method used by every behavior. The documentation for the BehaviorBase class can be found here: http://msdn.microsoft.com/en-us/library/bb311020.aspx The most important methods and properties of the BehaviorBase class are the following: dispose() – Use this method to clean up all resources used by your behavior. In the case of the PopupHelp behavior, the dispose() method is used to remote the event handlers created by the behavior and disposed the Popup behavior. get_element() -- Use this property to get the DOM element associated with the behavior. In other words, the DOM element which the behavior extends. get_id() – Use this property to the ID of the current behavior. initialize() – Use this method to initialize the behavior. This method is called after all of the properties are set by the $create() method. Creating Debug and Release Scripts You might have noticed that the PopupHelp behavior uses two scripts named PopupHelpBehavior.js and PopupHelpBehavior.debug.js. However, you never create these two scripts. Instead, you only create a single script named PopupHelpBehavior.pre.js. The pre in PopupHelpBehavior.pre.js stands for preprocessor. When you build the Ajax Control Toolkit (or the sample Visual Studio Solution at the end of this blog entry), a build task named JSBuild generates the PopupHelpBehavior.js release script and PopupHelpBehavior.debug.js debug script automatically. The JSBuild preprocessor supports the following directives: #IF #ELSE #ENDIF #INCLUDE #LOCALIZE #DEFINE #UNDEFINE The preprocessor directives are used to mark code which should only appear in the debug version of the script. The directives are used extensively in the Microsoft Ajax Library. For example, the Microsoft Ajax Library Array.contains() method is created like this: $type.contains = function Array$contains(array, item) { //#if DEBUG var e = Function._validateParams(arguments, [ {name: "array", type: Array, elementMayBeNull: true}, {name: "item", mayBeNull: true} ]); if (e) throw e; //#endif return (indexOf(array, item) >= 0); } Notice that you add each of the preprocessor directives inside a JavaScript comment. The comment prevents Visual Studio from getting confused with its Intellisense. The release version, but not the debug version, of the PopupHelpBehavior script is also minified automatically by the Microsoft Ajax Minifier. The minifier is invoked by a build step in the project file. Conclusion The goal of this blog entry was to explain how you can create custom AJAX Control Toolkit controls. In the first part of this blog entry, you learned how to create the server-side portion of an Ajax Control Toolkit control. You learned how to derive a new control from the ExtenderControlBase class and decorate its properties with the necessary attributes. Next, in the second part of this blog entry, you learned how to create the client-side portion of an Ajax Control Toolkit control by creating a client-side behavior with JavaScript. You learned how to use the methods of the Microsoft Ajax Library to extend your client behavior from the BehaviorBase class. Download the Custom ACT Starter Solution

    Read the article

  • Extending NerdDinner: Adding Geolocated Flair

    - by Jon Galloway
    NerdDinner is a website with the audacious goal of “Organizing the world’s nerds and helping them eat in packs.” Because nerds aren’t likely to socialize with others unless a website tells them to do it. Scott Hanselman showed off a lot of the cool features we’ve added to NerdDinner lately during his popular talk at MIX10, Beyond File | New Company: From Cheesy Sample to Social Platform. Did you miss it? Go ahead and watch it, I’ll wait. One of the features we wanted to add was flair. You know about flair, right? It’s a way to let folks who like your site show it off in their own site. For example, here’s my StackOverflow flair: Great! So how could we add some of this flair stuff to NerdDinner? What do we want to show? If we’re going to encourage our users to give up a bit of their beautiful website to show off a bit of ours, we need to think about what they’ll want to show. For instance, my StackOverflow flair is all about me, not StackOverflow. So how will this apply to NerdDinner? Since NerdDinner is all about organizing local dinners, in order for the flair to be useful it needs to make sense for the person viewing the web page. If someone visits from Egypt visits my blog, they should see information about NerdDinners in Egypt. That’s geolocation – localizing site content based on where the browser’s sitting, and it makes sense for flair as well as entire websites. So we’ll set up a simple little callout that prompts them to host a dinner in their area: Hopefully our flair works and there is a dinner near your viewers, so they’ll see another view which lists upcoming dinners near them: The Geolocation Part Generally website geolocation is done by mapping the requestor’s IP address to a geographic area. It’s not an exact science, but I’ve always found it to be pretty accurate. There are (at least) three ways to handle it: You pay somebody like MaxMind for a database (with regular updates) that sits on your server, and you use their API to do lookups. I used this on a pretty big project a few years ago and it worked well. You use HTML 5 Geolocation API or Google Gears or some other browser based solution. I think those are cool (I use Google Gears a lot), but they’re both in flux right now and I don’t think either has a wide enough of an install base yet to rely on them. You might want to, but I’ve heard you do all kinds of crazy stuff, and sometimes it gets you in trouble. I don’t mean talk out of line, but we all laugh behind your back a bit. But, hey, it’s up to you. It’s your flair or whatever. There are some free webservices out there that will take an IP address and give you location information. Easy, and works for everyone. That’s what we’re doing. I looked at a few different services and settled on IPInfoDB. It’s free, has a great API, and even returns JSON, which is handy for Javascript use. The IP query is pretty simple. We hit a URL like this: http://ipinfodb.com/ip_query.php?ip=74.125.45.100&timezone=false … and we get an XML response back like this… <?xml version="1.0" encoding="UTF-8"?> <Response> <Ip>74.125.45.100</Ip> <Status>OK</Status> <CountryCode>US</CountryCode> <CountryName>United States</CountryName> <RegionCode>06</RegionCode> <RegionName>California</RegionName> <City>Mountain View</City> <ZipPostalCode>94043</ZipPostalCode> <Latitude>37.4192</Latitude> <Longitude>-122.057</Longitude> </Response> So we’ll build some data transfer classes to hold the location information, like this: public class LocationInfo { public string Country { get; set; } public string RegionName { get; set; } public string City { get; set; } public string ZipPostalCode { get; set; } public LatLong Position { get; set; } } public class LatLong { public float Lat { get; set; } public float Long { get; set; } } And now hitting the service is pretty simple: public static LocationInfo HostIpToPlaceName(string ip) { string url = "http://ipinfodb.com/ip_query.php?ip={0}&timezone=false"; url = String.Format(url, ip); var result = XDocument.Load(url); var location = (from x in result.Descendants("Response") select new LocationInfo { City = (string)x.Element("City"), RegionName = (string)x.Element("RegionName"), Country = (string)x.Element("CountryName"), ZipPostalCode = (string)x.Element("CountryName"), Position = new LatLong { Lat = (float)x.Element("Latitude"), Long = (float)x.Element("Longitude") } }).First(); return location; } Getting The User’s IP Okay, but first we need the end user’s IP, and you’d think it would be as simple as reading the value from HttpContext: HttpContext.Current.Request.UserHostAddress But you’d be wrong. Sorry. UserHostAddress just wraps HttpContext.Current.Request.ServerVariables["REMOTE_ADDR"], but that doesn’t get you the IP for users behind a proxy. That’s in another header, “HTTP_X_FORWARDED_FOR". So you can either hit a wrapper and then check a header, or just check two headers. I went for uniformity: string SourceIP = string.IsNullOrEmpty(Request.ServerVariables["HTTP_X_FORWARDED_FOR"]) ? Request.ServerVariables["REMOTE_ADDR"] : Request.ServerVariables["HTTP_X_FORWARDED_FOR"]; We’re almost set to wrap this up, but first let’s talk about our views. Yes, views, because we’ll have two. Selecting the View We wanted to make it easy for people to include the flair in their sites, so we looked around at how other people were doing this. The StackOverflow folks have a pretty good flair system, which allows you to include the flair in your site as either an IFRAME reference or a Javascript include. We’ll do both. We have a ServicesController to handle use of the site information outside of NerdDinner.com, so this fits in pretty well there. We’ll be displaying the same information for both HTML and Javascript flair, so we can use one Flair controller action which will return a different view depending on the requested format. Here’s our general flow for our controller action: Get the user’s IP Translate it to a location Grab the top three upcoming dinners that are near that location Select the view based on the format (defaulted to “html”) Return a FlairViewModel which contains the list of dinners and the location information public ActionResult Flair(string format = "html") { string SourceIP = string.IsNullOrEmpty( Request.ServerVariables["HTTP_X_FORWARDED_FOR"]) ? Request.ServerVariables["REMOTE_ADDR"] : Request.ServerVariables["HTTP_X_FORWARDED_FOR"]; var location = GeolocationService.HostIpToPlaceName(SourceIP); var dinners = dinnerRepository. FindByLocation(location.Position.Lat, location.Position.Long). OrderByDescending(p => p.EventDate).Take(3); // Select the view we'll return. // Using a switch because we'll add in JSON and other formats later. string view; switch (format.ToLower()) { case "javascript": view = "JavascriptFlair"; break; default: view = "Flair"; break; } return View( view, new FlairViewModel { Dinners = dinners.ToList(), LocationName = string.IsNullOrEmpty(location.City) ? "you" : String.Format("{0}, {1}", location.City, location.RegionName) } ); } Note: I’m not in love with the logic here, but it seems like overkill to extract the switch statement away when we’ll probably just have two or three views. What do you think? The HTML View The HTML version of the view is pretty simple – the only thing of any real interest here is the use of an extension method to truncate strings that are would cause the titles to wrap. public static string Truncate(this string s, int maxLength) { if (string.IsNullOrEmpty(s) || maxLength <= 0) return string.Empty; else if (s.Length > maxLength) return s.Substring(0, maxLength) + "..."; else return s; }   So here’s how the HTML view ends up looking: <%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage<FlairViewModel>" %> <%@ Import Namespace="NerdDinner.Helpers" %> <%@ Import Namespace="NerdDinner.Models" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Nerd Dinner</title> <link href="/Content/Flair.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="nd-wrapper"> <h2 id="nd-header">NerdDinner.com</h2> <div id="nd-outer"> <% if (Model.Dinners.Count == 0) { %> <div id="nd-bummer"> Looks like there's no Nerd Dinners near <%:Model.LocationName %> in the near future. Why not <a target="_blank" href="http://www.nerddinner.com/Dinners/Create">host one</a>?</div> <% } else { %> <h3> Dinners Near You</h3> <ul> <% foreach (var item in Model.Dinners) { %> <li> <%: Html.ActionLink(String.Format("{0} with {1} on {2}", item.Title.Truncate(20), item.HostedBy, item.EventDate.ToShortDateString()), "Details", "Dinners", new { id = item.DinnerID }, new { target = "_blank" })%></li> <% } %> </ul> <% } %> <div id="nd-footer"> More dinners and fun at <a target="_blank" href="http://nrddnr.com">http://nrddnr.com</a></div> </div> </div> </body> </html> You’d include this in a page using an IFRAME, like this: <IFRAME height=230 marginHeight=0 src="http://nerddinner.com/services/flair" frameBorder=0 width=160 marginWidth=0 scrolling=no></IFRAME> The Javascript view The Javascript flair is written so you can include it in a webpage with a simple script include, like this: <script type="text/javascript" src="http://nerddinner.com/services/flair?format=javascript"></script> The goal of this view is very similar to the HTML embed view, with a few exceptions: We’re creating a script element and adding it to the head of the document, which will then document.write out the content. Note that you have to consider if your users will actually have a <head> element in their documents, but for website flair use cases I think that’s a safe bet. Since the content is being added to the existing page rather than shown in an IFRAME, all links need to be absolute. That means we can’t use Html.ActionLink, since it generates relative routes. We need to escape everything since it’s being written out as strings. We need to set the content type to application/x-javascript. The easiest way to do that is to use the <%@ Page ContentType%> directive. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<NerdDinner.Models.FlairViewModel>" ContentType="application/x-javascript" %> <%@ Import Namespace="NerdDinner.Helpers" %> <%@ Import Namespace="NerdDinner.Models" %> document.write('<script>var link = document.createElement(\"link\");link.href = \"http://nerddinner.com/content/Flair.css\";link.rel = \"stylesheet\";link.type = \"text/css\";var head = document.getElementsByTagName(\"head\")[0];head.appendChild(link);</script>'); document.write('<div id=\"nd-wrapper\"><h2 id=\"nd-header\">NerdDinner.com</h2><div id=\"nd-outer\">'); <% if (Model.Dinners.Count == 0) { %> document.write('<div id=\"nd-bummer\">Looks like there\'s no Nerd Dinners near <%:Model.LocationName %> in the near future. Why not <a target=\"_blank\" href=\"http://www.nerddinner.com/Dinners/Create\">host one</a>?</div>'); <% } else { %> document.write('<h3> Dinners Near You</h3><ul>'); <% foreach (var item in Model.Dinners) { %> document.write('<li><a target=\"_blank\" href=\"http://nrddnr.com/<%: item.DinnerID %>\"><%: item.Title.Truncate(20) %> with <%: item.HostedBy %> on <%: item.EventDate.ToShortDateString() %></a></li>'); <% } %> document.write('</ul>'); <% } %> document.write('<div id=\"nd-footer\"> More dinners and fun at <a target=\"_blank\" href=\"http://nrddnr.com\">http://nrddnr.com</a></div></div></div>'); Getting IP’s for Testing There are a variety of online services that will translate a location to an IP, which were handy for testing these out. I found http://www.itouchmap.com/latlong.html to be most useful, but I’m open to suggestions if you know of something better. Next steps I think the next step here is to minimize load – you know, in case people start actually using this flair. There are two places to think about – the NerdDinner.com servers, and the services we’re using for Geolocation. I usually think about caching as a first attack on server load, but that’s less helpful here since every user will have a different IP. Instead, I’d look at taking advantage of Asynchronous Controller Actions, a cool new feature in ASP.NET MVC 2. Async Actions let you call a potentially long-running webservice without tying up a thread on the server while waiting for the response. There’s some good info on that in the MSDN documentation, and Dino Esposito wrote a great article on Asynchronous ASP.NET Pages in the April 2010 issue of MSDN Magazine. But let’s think of the children, shall we? What about ipinfodb.com? Well, they don’t have specific daily limits, but they do throttle you if you put a lot of traffic on them. From their FAQ: We do not have a specific daily limit but queries that are at a rate faster than 2 per second will be put in "queue". If you stay below 2 queries/second everything will be normal. If you go over the limit, you will still get an answer for all queries but they will be slowed down to about 1 per second. This should not affect most users but for high volume websites, you can either use our IP database on your server or we can whitelist your IP for 5$/month (simply use the donate form and leave a comment with your server IP). Good programming practices such as not querying our API for all page views (you can store the data in a cookie or a database) will also help not reaching the limit. So the first step there is to save the geolocalization information in a time-limited cookie, which will allow us to look up the local dinners immediately without having to hit the geolocation service.

    Read the article

  • Using Rich Text Editor (WYSIWYG) in ASP.NET MVC

    - by imran_ku07
       Introduction:          In ASP.NET MVC forum I found some question regarding a sample HTML Rich Text Box Editor(also known as wysiwyg).So i decided to create a sample ASP.NET MVC web application which will use a Rich Text Box Editor. There are are lot of Html Editors are available, but for creating a sample application, i decided to use cross-browser WYSIWYG editor from openwebware. In this article I will discuss what changes needed to work this editor with ASP.NET MVC. Also I had attached the sample application for download at http://www.speedfile.org/155076. Also note that I will only show the important features, not discuss every feature in detail.   Description:          So Let's start create a sample ASP.NET MVC application. You need to add the following script files,         jquery-1.3.2.min.js        jquery_form.js        wysiwyg.js        wysiwyg-settings.js        wysiwyg-popup.js          Just put these files inside Scripts folder. Also put wysiwyg.css in your Content Folder and add the following folders in your project        addons        popups          Also create a empty folder Uploads to store the uploaded images. Next open wysiwyg.js and set your configuration                  // Images Directory        this.ImagesDir = "/addons/imagelibrary/images/";                // Popups Directory        this.PopupsDir = "/popups/";                // CSS Directory File        this.CSSFile = "/Content/wysiwyg.css";              Next create a simple View TextEditor.aspx inside View / Home Folder and add the folllowing HTML.        <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">        <html >            <head runat="server">                <title>TextEditor</title>                <script src="../../Scripts/wysiwyg.js" type="text/javascript"></script>                <script src="../../Scripts/wysiwyg-settings.js" type="text/javascript"></script>                <script type="text/javascript">                            WYSIWYG.attach('text', full);                            </script>            </head>            <body>                <% using (Html.BeginForm()){ %>                    <textarea id="text" name="test2" style="width:850px;height:200px;">                    </textarea>                    <input type="submit" value="submit" />                <%} %>            </body>        </html>                  Here i have just added a text area control and a submit button inside a form. Note the id of text area and WYSIWYG.attach function's first parameter is same and next to watch is the HomeController.cs        using System;        using System.Collections.Generic;        using System.Linq;        using System.Web;        using System.Web.Mvc;        using System.IO;        namespace HtmlTextEditor.Controllers        {            [HandleError]            public class HomeController : Controller            {                public ActionResult Index()                {                    ViewData["Message"] = "Welcome to ASP.NET MVC!";                    return View();                }                    public ActionResult About()                {                                return View();                }                        public ActionResult TextEditor()                {                    return View();                }                [AcceptVerbs(HttpVerbs.Post)]                [ValidateInput(false)]                public ActionResult TextEditor(string test2)                {                    Session["html"] = test2;                            return RedirectToAction("Index");                }                        public ActionResult UploadImage()                {                    if (Request.Files[0].FileName != "")                    {                        Request.Files[0].SaveAs(Server.MapPath("~/Uploads/" + Path.GetFileName(Request.Files[0].FileName)));                        return Content(Url.Content("~/Uploads/" + Path.GetFileName(Request.Files[0].FileName)));                    }                    return Content("a");                }            }        }          So simple code, just save the posted Html into Session. Here the parameter of TextArea action is test2 which is same as textarea control name of TextArea.aspx View. Also note ValidateInputAttribute is false, so it's up to you to defends against XSS. Also there is an Action method which simply saves the file inside Upload Folder.          I am uploading the file using Jquery Form Plugin. Here is the code which is found in insert_image.html inside addons folder,        function ChangeImage() {            var myform=document.getElementById("formUpload");                    $(myform).ajaxSubmit({success: function(responseText){                insertImage(responseText);                        window.close();                }            });        }          and here is the Index View which simply renders the html of Editor which was saved in Session        <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>        <asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">            Home Page        </asp:Content>        <asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">            <h2><%= Html.Encode(ViewData["Message"]) %></h2>            <p>                To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.            </p>            <%if (Session["html"] != null){                  Response.Write(Session["html"].ToString());            } %>                    </asp:Content>   Summary:          Hopefully you will enjoy this article. Just download the code and see the effect. From security point, you must handle the XSS attack your self. I had uploaded the sample application in http://www.speedfile.org/155076

    Read the article

  • Sublime text 2 syntax highlighter?

    - by BigSack
    I have coded my first custom syntax highlighter for sublime text 2, but i don't know how to install it. It is based on notepad++ highlighter found here https://70995658-a-62cb3a1a-s-sites.googlegroups.com/site/lohanplus/files/smali_npp.xml?attachauth=ANoY7criVTO9bDmIGrXwhZLQ_oagJzKKJTlbNDGRzMDVpFkO5i0N6hk_rWptvoQC1tBlNqcqFDD5NutD_2vHZx1J7hcRLyg1jruSjebHIeKdS9x0JCNrsRivgs6DWNhDSXSohkP1ZApXw0iQ0MgqcXjdp7CkJJ6pY_k5Orny9TfK8UWn_HKFsmPcpp967NMPtUnd--ad-BImtkEi-fox2tjs7zc5LabkDQ%3D%3D&attredirects=0&d=1 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>fileTypes</key> <array> <string>smali</string> </array> <dict> <key>Word1</key> <string>add-double add-double/2addr add-float add-float/2addr add-int add-int/2addr add-int/lit16 add-int/lit8 add-long add-long/2addr aget aget-boolean aget-byte aget-char aget-object aget-short aget-wide and-int and-int/2addr and-int/lit16 and-int/lit8 and-long and-long/2addr aput aput-boolean aput-byte aput-char aput-object aput-short aput-wide array-length check-cast cmp-long cmpg-double cmpg-float cmpl-double cmpl-float const const-class const-string const-string-jumbo const-wide const-wide/16 const-wide/32 const-wide/high16 const/16 const/4 const/high16 div-double div-double/2addr div-float div-float/2addr div-int div-int/2addr div-int/lit16 div-int/lit8 div-long div-long/2addr double-to-float double-to-int double-to-long execute-inline fill-array-data filled-new-array filled-new-array/range float-to-double float-to-int float-to-long goto goto/16 goto/32 if-eq if-eqz if-ge if-gez if-gt if-gtz if-le if-lez if-lt if-ltz if-ne if-nez iget iget-boolean iget-byte iget-char iget-object iget-object-quick iget-quick iget-short iget-wide iget-wide-quick instance-of int-to-byte int-to-char int-to-double int-to-float int-to-long int-to-short invoke-direct invoke-direct-empty invoke-direct/range invoke-interface invoke-interface/range invoke-static invoke-static/range invoke-super invoke-super-quick invoke-super-quick/range invoke-super/range invoke-virtual invoke-virtual-quick invoke-virtual-quick/range invoke-virtual/range iput iput-boolean iput-byte iput-char iput-object iput-object-quick iput-quick iput-short iput-wide iput-wide-quick long-to-double long-to-float long-to-int monitor-enter monitor-exit move move-exception move-object move-object/16 move-object/from16 move-result move-result-object move-result-wide move-wide move-wide/16 move-wide/from16 move/16 move/from16 mul-double mul-double/2addr mul-float mul-float/2addr mul-int mul-int/2addr mul-int/lit8 mul-int/lit16 mul-long mul-long/2addr neg-double neg-float neg-int neg-long new-array new-instance nop not-int not-long or-int or-int/2addr or-int/lit16 or-int/lit8 or-long or-long/2addr rem-double rem-double/2addr rem-float rem-float/2addr rem-int rem-int/2addr rem-int/lit16 rem-int/lit8 rem-long rem-long/2addr return return-object return-void return-wide rsub-int rsub-int/lit8 sget sget-boolean sget-byte sget-char sget-object sget-short sget-wide shl-int shl-int/2addr shl-int/lit8 shl-long shl-long/2addr shr-int shr-int/2addr shr-int/lit8 shr-long shr-long/2addr sparse-switch sput sput-boolean sput-byte sput-char sput-object sput-short sput-wide sub-double sub-double/2addr sub-float sub-float/2addr sub-int sub-int/2addr sub-int/lit16 sub-int/lit8 sub-long sub-long/2addr throw throw-verification-error ushr-int ushr-int/2addr ushr-int/lit8 ushr-long ushr-long/2addr xor-int xor-int/2addr xor-int/lit16 xor-int/lit8 xor-long xor-long/2addr</string> </dict> <dict> <key>Word2</key> <string>v0 v1 v2 v3 v4 v5 v6 v7 v8 v9 v10 v11 v12 v13 v14 v15 v16 v17 v18 v19 v20 v21 v22 v23 v24 v25 v26 v27 v28 v29 v30 v31 v32 v33 v34 v35 v36 v37 v38 v39 v40 v41 v42 v43 v44 v45 v46 v47 v48 v49 v50 p0 p1 p2 p3 p4 p5 p6 p7 p8 p9 p10 p11 p12 p13 p14 p15 p16 p17 p18 p19 p20 p21 p22 p23 p24 p25 p26 p27 p28 p29 p30</string> </dict> <dict> <key>Word3</key> <string>array-data .catch .catchall .class .end .end\ local .enum .epilogue .field .implements .line .local .locals .parameter .prologue .registers .restart .restart\ local .source .subannotation .super</string> </dict> <dict> <key>Word4</key> <string>abstract bridge constructor declared-synchronized enum final interface native private protected public static strictfp synchronized synthetic system transient varargs volatile</string> </dict> <dict> <key>Word4</key> <string>(&quot;0)&quot;0</string> </dict> <dict> <key>Word5</key> <string>.method .annotation .sparse-switch .packed-switch</string> </dict> <dict> <key>word6</key> <string>.end\ method .end\ annotation .end\ sparse-switch .end\ packed-switch</string> </dict> <dict> <key>word7</key> <string>&quot; ( ) , ; { } &gt;</string> </dict> <key>uuid</key> <string>27798CC6-6B1D-11D9-B8FA-000D93589AF6</string> </dict> </plist>

    Read the article

  • How to tell the Browser the character encoding of a HTML website regardless of Server Content.-Type Headers?

    - by hakre
    I have a HTML page that correctly (the encoding of the physical on disk matches it) announces it's Content-Type: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content= "text/html; charset=utf-8"> <title> ... Opening the file from disk in browser (Google Chrome, Firefox) works fine. Requesting it via HTTP, the webserver sends a different Content-Type header: $ curl -I http:/example.com/file.html HTTP/1.1 200 OK Date: Fri, 19 Oct 2012 10:57:13 GMT ... Content-Type: text/html; charset=ISO-8859-1 (see last line). The browser then uses ISO-8859-1 to display which is an unwanted result. Is there a common way to override the server headers send to the browser from within the HTML document?

    Read the article

  • Using the ASP.NET Cache to cache data in a Model or Business Object layer, without a dependency on System.Web in the layer - Part One.

    - by Rhames
    ASP.NET applications can make use of the System.Web.Caching.Cache object to cache data and prevent repeated expensive calls to a database or other store. However, ideally an application should make use of caching at the point where data is retrieved from the database, which typically is inside a Business Objects or Model layer. One of the key features of using a UI pattern such as Model-View-Presenter (MVP) or Model-View-Controller (MVC) is that the Model and Presenter (or Controller) layers are developed without any knowledge of the UI layer. Introducing a dependency on System.Web into the Model layer would break this independence of the Model from the View. This article gives a solution to this problem, using dependency injection to inject the caching implementation into the Model layer at runtime. This allows caching to be used within the Model layer, without any knowledge of the actual caching mechanism that will be used. Create a sample application to use the caching solution Create a test SQL Server database This solution uses a SQL Server database with the same Sales data used in my previous post on calculating running totals. The advantage of using this data is that it gives nice slow queries that will exaggerate the effect of using caching! To create the data, first create a new SQL database called CacheSample. Next run the following script to create the Sale table and populate it: USE CacheSample GO   CREATE TABLE Sale(DayCount smallint, Sales money) CREATE CLUSTERED INDEX ndx_DayCount ON Sale(DayCount) go INSERT Sale VALUES (1,120) INSERT Sale VALUES (2,60) INSERT Sale VALUES (3,125) INSERT Sale VALUES (4,40)   DECLARE @DayCount smallint, @Sales money SET @DayCount = 5 SET @Sales = 10   WHILE @DayCount < 5000  BEGIN  INSERT Sale VALUES (@DayCount,@Sales)  SET @DayCount = @DayCount + 1  SET @Sales = @Sales + 15  END Next create a stored procedure to calculate the running total, and return a specified number of rows from the Sale table, using the following script: USE [CacheSample] GO   SET ANSI_NULLS ON GO   SET QUOTED_IDENTIFIER ON GO   -- ============================================= -- Author:        Robin -- Create date: -- Description:   -- ============================================= CREATE PROCEDURE [dbo].[spGetRunningTotals]       -- Add the parameters for the stored procedure here       @HighestDayCount smallint = null AS BEGIN       -- SET NOCOUNT ON added to prevent extra result sets from       -- interfering with SELECT statements.       SET NOCOUNT ON;         IF @HighestDayCount IS NULL             SELECT @HighestDayCount = MAX(DayCount) FROM dbo.Sale                   DECLARE @SaleTbl TABLE (DayCount smallint, Sales money, RunningTotal money)         DECLARE @DayCount smallint,                   @Sales money,                   @RunningTotal money         SET @RunningTotal = 0       SET @DayCount = 0         DECLARE rt_cursor CURSOR       FOR       SELECT DayCount, Sales       FROM Sale       ORDER BY DayCount         OPEN rt_cursor         FETCH NEXT FROM rt_cursor INTO @DayCount,@Sales         WHILE @@FETCH_STATUS = 0 AND @DayCount <= @HighestDayCount        BEGIN        SET @RunningTotal = @RunningTotal + @Sales        INSERT @SaleTbl VALUES (@DayCount,@Sales,@RunningTotal)        FETCH NEXT FROM rt_cursor INTO @DayCount,@Sales        END         CLOSE rt_cursor       DEALLOCATE rt_cursor         SELECT DayCount, Sales, RunningTotal       FROM @SaleTbl   END   GO   Create the Sample ASP.NET application In Visual Studio create a new solution and add a class library project called CacheSample.BusinessObjects and an ASP.NET web application called CacheSample.UI. The CacheSample.BusinessObjects project will contain a single class to represent a Sale data item, with all the code to retrieve the sales from the database included in it for simplicity (normally I would at least have a separate Repository or other object that is responsible for retrieving data, and probably a data access layer as well, but for this sample I want to keep it simple). The C# code for the Sale class is shown below: using System; using System.Collections.Generic; using System.Data; using System.Data.SqlClient;   namespace CacheSample.BusinessObjects {     public class Sale     {         public Int16 DayCount { get; set; }         public decimal Sales { get; set; }         public decimal RunningTotal { get; set; }           public static IEnumerable<Sale> GetSales(int? highestDayCount)         {             List<Sale> sales = new List<Sale>();               SqlParameter highestDayCountParameter = new SqlParameter("@HighestDayCount", SqlDbType.SmallInt);             if (highestDayCount.HasValue)                 highestDayCountParameter.Value = highestDayCount;             else                 highestDayCountParameter.Value = DBNull.Value;               string connectionStr = System.Configuration.ConfigurationManager .ConnectionStrings["CacheSample"].ConnectionString;               using(SqlConnection sqlConn = new SqlConnection(connectionStr))             using (SqlCommand sqlCmd = sqlConn.CreateCommand())             {                 sqlCmd.CommandText = "spGetRunningTotals";                 sqlCmd.CommandType = CommandType.StoredProcedure;                 sqlCmd.Parameters.Add(highestDayCountParameter);                   sqlConn.Open();                   using (SqlDataReader dr = sqlCmd.ExecuteReader())                 {                     while (dr.Read())                     {                         Sale newSale = new Sale();                         newSale.DayCount = dr.GetInt16(0);                         newSale.Sales = dr.GetDecimal(1);                         newSale.RunningTotal = dr.GetDecimal(2);                           sales.Add(newSale);                     }                 }             }               return sales;         }     } }   The static GetSale() method makes a call to the spGetRunningTotals stored procedure and then reads each row from the returned SqlDataReader into an instance of the Sale class, it then returns a List of the Sale objects, as IEnnumerable<Sale>. A reference to System.Configuration needs to be added to the CacheSample.BusinessObjects project so that the connection string can be read from the web.config file. In the CacheSample.UI ASP.NET project, create a single web page called ShowSales.aspx, and make this the default start up page. This page will contain a single button to call the GetSales() method and a label to display the results. The html mark up and the C# code behind are shown below: ShowSales.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShowSales.aspx.cs" Inherits="CacheSample.UI.ShowSales" %>   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">     <title>Cache Sample - Show All Sales</title> </head> <body>     <form id="form1" runat="server">     <div>         <asp:Button ID="btnTest1" runat="server" onclick="btnTest1_Click"             Text="Get All Sales" />         &nbsp;&nbsp;&nbsp;         <asp:Label ID="lblResults" runat="server"></asp:Label>         </div>     </form> </body> </html>   ShowSales.aspx.cs using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls;   using CacheSample.BusinessObjects;   namespace CacheSample.UI {     public partial class ShowSales : System.Web.UI.Page     {         protected void Page_Load(object sender, EventArgs e)         {         }           protected void btnTest1_Click(object sender, EventArgs e)         {             System.Diagnostics.Stopwatch stopWatch = new System.Diagnostics.Stopwatch();             stopWatch.Start();               var sales = Sale.GetSales(null);               var lastSales = sales.Last();               stopWatch.Stop();               lblResults.Text = string.Format( "Count of Sales: {0}, Last DayCount: {1}, Total Sales: {2}. Query took {3} ms", sales.Count(), lastSales.DayCount, lastSales.RunningTotal, stopWatch.ElapsedMilliseconds);         }       } }   Finally we need to add a connection string to the CacheSample SQL Server database, called CacheSample, to the web.config file: <?xmlversion="1.0"?>   <configuration>    <connectionStrings>     <addname="CacheSample"          connectionString="data source=.\SQLEXPRESS;Integrated Security=SSPI;Initial Catalog=CacheSample"          providerName="System.Data.SqlClient" />  </connectionStrings>    <system.web>     <compilationdebug="true"targetFramework="4.0" />  </system.web>   </configuration>   Run the application and click the button a few times to see how long each call to the database takes. On my system, each query takes about 450ms. Next I shall look at a solution to use the ASP.NET caching to cache the data returned by the query, so that subsequent requests to the GetSales() method are much faster. Adding Data Caching Support I am going to create my caching support in a separate project called CacheSample.Caching, so the next step is to add a class library to the solution. We shall be using the application configuration to define the implementation of our caching system, so we need a reference to System.Configuration adding to the project. ICacheProvider<T> Interface The first step in adding caching to our application is to define an interface, called ICacheProvider, in the CacheSample.Caching project, with methods to retrieve any data from the cache or to retrieve the data from the data source if it is not present in the cache. Dependency Injection will then be used to inject an implementation of this interface at runtime, allowing the users of the interface (i.e. the CacheSample.BusinessObjects project) to be completely unaware of how the caching is actually implemented. As data of any type maybe retrieved from the data source, it makes sense to use generics in the interface, with a generic type parameter defining the data type associated with a particular instance of the cache interface implementation. The C# code for the ICacheProvider interface is shown below: using System; using System.Collections.Generic;   namespace CacheSample.Caching {     public interface ICacheProvider     {     }       public interface ICacheProvider<T> : ICacheProvider     {         T Fetch(string key, Func<T> retrieveData, DateTime? absoluteExpiry, TimeSpan? relativeExpiry);           IEnumerable<T> Fetch(string key, Func<IEnumerable<T>> retrieveData, DateTime? absoluteExpiry, TimeSpan? relativeExpiry);     } }   The empty non-generic interface will be used as a type in a Dictionary generic collection later to store instances of the ICacheProvider<T> implementation for reuse, I prefer to use a base interface when doing this, as I think the alternative of using object makes for less clear code. The ICacheProvider<T> interface defines two overloaded Fetch methods, the difference between these is that one will return a single instance of the type T and the other will return an IEnumerable<T>, providing support for easy caching of collections of data items. Both methods will take a key parameter, which will uniquely identify the cached data, a delegate of type Func<T> or Func<IEnumerable<T>> which will provide the code to retrieve the data from the store if it is not present in the cache, and absolute or relative expiry policies to define when a cached item should expire. Note that at present there is no support for cache dependencies, but I shall be showing a method of adding this in part two of this article. CacheProviderFactory Class We need a mechanism of creating instances of our ICacheProvider<T> interface, using Dependency Injection to get the implementation of the interface. To do this we shall create a CacheProviderFactory static class in the CacheSample.Caching project. This factory will provide a generic static method called GetCacheProvider<T>(), which shall return instances of ICacheProvider<T>. We can then call this factory method with the relevant data type (for example the Sale class in the CacheSample.BusinessObject project) to get a instance of ICacheProvider for that type (e.g. call CacheProviderFactory.GetCacheProvider<Sale>() to get the ICacheProvider<Sale> implementation). The C# code for the CacheProviderFactory is shown below: using System; using System.Collections.Generic;   using CacheSample.Caching.Configuration;   namespace CacheSample.Caching {     public static class CacheProviderFactory     {         private static Dictionary<Type, ICacheProvider> cacheProviders = new Dictionary<Type, ICacheProvider>();         private static object syncRoot = new object();           ///<summary>         /// Factory method to create or retrieve an implementation of the  /// ICacheProvider interface for type <typeparamref name="T"/>.         ///</summary>         ///<typeparam name="T">  /// The type that this cache provider instance will work with  ///</typeparam>         ///<returns>An instance of the implementation of ICacheProvider for type  ///<typeparamref name="T"/>, as specified by the application  /// configuration</returns>         public static ICacheProvider<T> GetCacheProvider<T>()         {             ICacheProvider<T> cacheProvider = null;             // Get the Type reference for the type parameter T             Type typeOfT = typeof(T);               // Lock the access to the cacheProviders dictionary             // so multiple threads can work with it             lock (syncRoot)             {                 // First check if an instance of the ICacheProvider implementation  // already exists in the cacheProviders dictionary for the type T                 if (cacheProviders.ContainsKey(typeOfT))                     cacheProvider = (ICacheProvider<T>)cacheProviders[typeOfT];                 else                 {                     // There is not already an instance of the ICacheProvider in       // cacheProviders for the type T                     // so we need to create one                       // Get the Type reference for the application's implementation of       // ICacheProvider from the configuration                     Type cacheProviderType = Type.GetType(CacheProviderConfigurationSection.Current. CacheProviderType);                     if (cacheProviderType != null)                     {                         // Now get a Type reference for the Cache Provider with the                         // type T generic parameter                         Type typeOfCacheProviderTypeForT = cacheProviderType.MakeGenericType(new Type[] { typeOfT });                         if (typeOfCacheProviderTypeForT != null)                         {                             // Create the instance of the Cache Provider and add it to // the cacheProviders dictionary for future use                             cacheProvider = (ICacheProvider<T>)Activator. CreateInstance(typeOfCacheProviderTypeForT);                             cacheProviders.Add(typeOfT, cacheProvider);                         }                     }                 }             }               return cacheProvider;                 }     } }   As this code uses Activator.CreateInstance() to create instances of the ICacheProvider<T> implementation, which is a slow process, the factory class maintains a Dictionary of the previously created instances so that a cache provider needs to be created only once for each type. The type of the implementation of ICacheProvider<T> is read from a custom configuration section in the application configuration file, via the CacheProviderConfigurationSection class, which is described below. CacheProviderConfigurationSection Class The implementation of ICacheProvider<T> will be specified in a custom configuration section in the application’s configuration. To handle this create a folder in the CacheSample.Caching project called Configuration, and add a class called CacheProviderConfigurationSection to this folder. This class will extend the System.Configuration.ConfigurationSection class, and will contain a single string property called CacheProviderType. The C# code for this class is shown below: using System; using System.Configuration;   namespace CacheSample.Caching.Configuration {     internal class CacheProviderConfigurationSection : ConfigurationSection     {         public static CacheProviderConfigurationSection Current         {             get             {                 return (CacheProviderConfigurationSection) ConfigurationManager.GetSection("cacheProvider");             }         }           [ConfigurationProperty("type", IsRequired=true)]         public string CacheProviderType         {             get             {                 return (string)this["type"];             }         }     } }   Adding Data Caching to the Sales Class We now have enough code in place to add caching to the GetSales() method in the CacheSample.BusinessObjects.Sale class, even though we do not yet have an implementation of the ICacheProvider<T> interface. We need to add a reference to the CacheSample.Caching project to CacheSample.BusinessObjects so that we can use the ICacheProvider<T> interface within the GetSales() method. Once the reference is added, we can first create a unique string key based on the method name and the parameter value, so that the same cache key is used for repeated calls to the method with the same parameter values. Then we get an instance of the cache provider for the Sales type, using the CacheProviderFactory, and pass the existing code to retrieve the data from the database as the retrievalMethod delegate in a call to the Cache Provider Fetch() method. The C# code for the modified GetSales() method is shown below: public static IEnumerable<Sale> GetSales(int? highestDayCount) {     string cacheKey = string.Format("CacheSample.BusinessObjects.GetSalesWithCache({0})", highestDayCount);       return CacheSample.Caching.CacheProviderFactory. GetCacheProvider<Sale>().Fetch(cacheKey,         delegate()         {             List<Sale> sales = new List<Sale>();               SqlParameter highestDayCountParameter = new SqlParameter("@HighestDayCount", SqlDbType.SmallInt);             if (highestDayCount.HasValue)                 highestDayCountParameter.Value = highestDayCount;             else                 highestDayCountParameter.Value = DBNull.Value;               string connectionStr = System.Configuration.ConfigurationManager. ConnectionStrings["CacheSample"].ConnectionString;               using (SqlConnection sqlConn = new SqlConnection(connectionStr))             using (SqlCommand sqlCmd = sqlConn.CreateCommand())             {                 sqlCmd.CommandText = "spGetRunningTotals";                 sqlCmd.CommandType = CommandType.StoredProcedure;                 sqlCmd.Parameters.Add(highestDayCountParameter);                   sqlConn.Open();                   using (SqlDataReader dr = sqlCmd.ExecuteReader())                 {                     while (dr.Read())                     {                         Sale newSale = new Sale();                         newSale.DayCount = dr.GetInt16(0);                         newSale.Sales = dr.GetDecimal(1);                         newSale.RunningTotal = dr.GetDecimal(2);                           sales.Add(newSale);                     }                 }             }               return sales;         },         null,         new TimeSpan(0, 10, 0)); }     This example passes the code to retrieve the Sales data from the database to the Cache Provider as an anonymous method, however it could also be written as a lambda. The main advantage of using an anonymous function (method or lambda) is that the code inside the anonymous function can access the parameters passed to the GetSales() method. Finally the absolute expiry is set to null, and the relative expiry set to 10 minutes, to indicate that the cache entry should be removed 10 minutes after the last request for the data. As the ICacheProvider<T> has a Fetch() method that returns IEnumerable<T>, we can simply return the results of the Fetch() method to the caller of the GetSales() method. This should be all that is needed for the GetSales() method to now retrieve data from a cache after the first time the data has be retrieved from the database. Implementing a ASP.NET Cache Provider The final step is to actually implement the ICacheProvider<T> interface, and add the implementation details to the web.config file for the dependency injection. The cache provider implementation needs to have access to System.Web. Therefore it could be placed in the CacheSample.UI project, or in its own project that has a reference to System.Web. Implementing the Cache Provider in a separate project is my favoured approach. Create a new project inside the solution called CacheSample.CacheProvider, and add references to System.Web and CacheSample.Caching to this project. Add a class to the project called AspNetCacheProvider. Make the class a generic class by adding the generic parameter <T> and indicate that the class implements ICacheProvider<T>. The C# code for the AspNetCacheProvider class is shown below: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Caching;   using CacheSample.Caching;   namespace CacheSample.CacheProvider {     public class AspNetCacheProvider<T> : ICacheProvider<T>     {         #region ICacheProvider<T> Members           public T Fetch(string key, Func<T> retrieveData, DateTime? absoluteExpiry, TimeSpan? relativeExpiry)         {             return FetchAndCache<T>(key, retrieveData, absoluteExpiry, relativeExpiry);         }           public IEnumerable<T> Fetch(string key, Func<IEnumerable<T>> retrieveData, DateTime? absoluteExpiry, TimeSpan? relativeExpiry)         {             return FetchAndCache<IEnumerable<T>>(key, retrieveData, absoluteExpiry, relativeExpiry);         }           #endregion           #region Helper Methods           private U FetchAndCache<U>(string key, Func<U> retrieveData, DateTime? absoluteExpiry, TimeSpan? relativeExpiry)         {             U value;             if (!TryGetValue<U>(key, out value))             {                 value = retrieveData();                 if (!absoluteExpiry.HasValue)                     absoluteExpiry = Cache.NoAbsoluteExpiration;                   if (!relativeExpiry.HasValue)                     relativeExpiry = Cache.NoSlidingExpiration;                   HttpContext.Current.Cache.Insert(key, value, null, absoluteExpiry.Value, relativeExpiry.Value);             }             return value;         }           private bool TryGetValue<U>(string key, out U value)         {             object cachedValue = HttpContext.Current.Cache.Get(key);             if (cachedValue == null)             {                 value = default(U);                 return false;             }             else             {                 try                 {                     value = (U)cachedValue;                     return true;                 }                 catch                 {                     value = default(U);                     return false;                 }             }         }           #endregion       } }   The two interface Fetch() methods call a private method called FetchAndCache(). This method first checks for a element in the HttpContext.Current.Cache with the specified cache key, and if so tries to cast this to the specified type (either T or IEnumerable<T>). If the cached element is found, the FetchAndCache() method simply returns it. If it is not found in the cache, the method calls the retrievalMethod delegate to get the data from the data source, and then adds this to the HttpContext.Current.Cache. The final step is to add the AspNetCacheProvider class to the relevant custom configuration section in the CacheSample.UI.Web.Config file. To do this there needs to be a <configSections> element added as the first element in <configuration>. This will match a custom section called <cacheProvider> with the CacheProviderConfigurationSection. Then we add a <cacheProvider> element, with a type property set to the fully qualified assembly name of the AspNetCacheProvider class, as shown below: <?xmlversion="1.0"?>   <configuration>  <configSections>     <sectionname="cacheProvider" type="CacheSample.Base.Configuration.CacheProviderConfigurationSection, CacheSample.Base" />  </configSections>    <connectionStrings>     <addname="CacheSample"          connectionString="data source=.\SQLEXPRESS;Integrated Security=SSPI;Initial Catalog=CacheSample"          providerName="System.Data.SqlClient" />  </connectionStrings>    <cacheProvidertype="CacheSample.CacheProvider.AspNetCacheProvider`1, CacheSample.CacheProvider, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null">  </cacheProvider>    <system.web>     <compilationdebug="true"targetFramework="4.0" />  </system.web>   </configuration>   One point to note is that the fully qualified assembly name of the AspNetCacheProvider class includes the notation `1 after the class name, which indicates that it is a generic class with a single generic type parameter. The CacheSample.UI project needs to have references added to CacheSample.Caching and CacheSample.CacheProvider so that the actual application is aware of the relevant cache provider implementation. Conclusion After implementing this solution, you should have a working cache provider mechanism, that will allow the middle and data access layers to implement caching support when retrieving data, without any knowledge of the actually caching implementation. If the UI is not ASP.NET based, if for example it is Winforms or WPF, the implementation of ICacheProvider<T> would be written around whatever technology is available. It could even be a standalone caching system that takes full responsibility for adding and removing items from a global store. The next part of this article will show how this caching mechanism may be extended to provide support for cache dependencies, such as the System.Web.Caching.SqlCacheDependency. Another possible extension would be to cache the cache provider implementations instead of storing them in a static Dictionary in the CacheProviderFactory. This would prevent a build up of seldom used cache providers in the application memory, as they could be removed from the cache if not used often enough, although in reality there are probably unlikely to be vast numbers of cache provider implementation instances, as most applications do not have a massive number of business object or model types.

    Read the article

  • I can see traffic coming from google ads, even though I don't have any google ads running, how is that possible?

    - by freethinker
    I can see "googleads.g.doubleclick.net/pagead/ads...." as a referrer on my website. However I am not running any google ads. So how am I getting the traffic? Here's the complete URL http://googleads.g.doubleclick.net/pagead/ads?output=html&h=250&slotname=5275434421&w=300&lmt=1311690266&flash=10.1.102&url=http%3A%2F%2Fwww.humbug.in%2Fsuperuser%2Fes%2Fpromiscuous-modo-con-intel-centrino-adelantado-n-6200-agn-tarjeta-inalambrica--214946.html&dt=1311690268347&bpp=3&shv=r20110713&jsv=r20110719&prev_slotnames=7553874535%2C5896307875%2C8590890981&correlator=1311690268052&frm=4&adk=3153418812&ga_vid=1396001617.1311690268&ga_sid=1311690268&ga_hid=558368546&ga_fc=1&u_tz=-180&u_his=1&u_java=0&u_h=1024&u_w=1280&u_ah=960&u_aw=1280&u_cd=24&u_nplug=6&u_nmime=22&biw=1263&bih=851&fu=0&ifi=4&dtd=441&xpc=T5MgG9EVV9&p=http%3A%2F%2Fwww.humbug.in

    Read the article

  • Using HTML entities in XML Literals (Avner Aharoni)

    One of the common use-cases of XML literals is creating HTML. However, HTML entities cannot be used in XML literals since LINQ to XML directly supports only the Data type definitions (DTD) defined in the XML 1.0 spec. You can read more about it here. The workaround is to use the Unicode representation of the entity, although its not as readable as the HTML entities, the output is the same. Here are two examples of HTML entities from the XHTML spec :   Entity...Did you know that DotNetSlackers also publishes .net articles written by top known .net Authors? We already have over 80 articles in several categories including Silverlight. Take a look: here.

    Read the article

  • Using HTML entities in XML Literals (Avner Aharoni)

    One of the common use-cases of XML literals is creating HTML. However, HTML entities cannot be used in XML literals since LINQ to XML directly supports only the Data type definitions (DTD) defined in the XML 1.0 spec. You can read more about it here. The workaround is to use the Unicode representation of the entity, although its not as readable as the HTML entities, the output is the same. Here are two examples of HTML entities from the XHTML spec :   Entity...Did you know that DotNetSlackers also publishes .net articles written by top known .net Authors? We already have over 80 articles in several categories including Silverlight. Take a look: here.

    Read the article

  • How can I center XHTML content with CSS?

    - by drea
    so I recently converted a website of mine from a table content format to a div content format. Table format Version: Table version of the website: here. Table version style CSS: body { width: 1020px; margin: 0 auto; background-image: url(images/bg.png); } .logo{ width:301px; height:151px; background:url(images/logo.png); text-indent:-9999px; border:none; cursor:pointer; } .logo:hover { opacity:0.9; } .signin{ width:69px; height:30px; background:url(images/signin.png); text-indent:-9999px; border:none; cursor:pointer; } .signin:hover { opacity:0.9; } .register{ width:79px; height:30px; background:url(images/register.png); text-indent:-9999px; border:none; cursor:pointer; } .register:hover { opacity:0.9; } .Contact_Us{ width:53px; height:9px; background:url(images/Contact_Us.png); text-indent:-9999px; border:none; cursor:pointer; } .Contact_Us:hover { opacity:0.9; } .Code_of_Conduct{ width:84px; height:9px; background:url(images/Code_of_Conduct.png); text-indent:-9999px; border:none; cursor:pointer; } .Code_of_Conduct:hover { opacity:0.9; } .Privacy_Policy{ width:65px; height:12px; background:url(images/Privacy_Policy.png); text-indent:-9999px; border:none; cursor:pointer; } .Privacy_Policy:hover { opacity:0.9; } .Copyright{ width:149px; height:9px; background:url(images/Copyright.png); text-indent:-9999px; border:none; cursor:pointer; } .Copyright:hover { opacity:0.9; } .slideshow{ width:301px; height:151px; background: url(slideshow.png), url(minecraft.png), url(tf2.png), url(CSS.png), url(GM.png), url(aos.png), url(CSGO.png), url(voip.png), text-indent:-9999px; border:none; cursor:pointer; } .slideshow:hover { opacity:0.9; } Table version source: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head profile="http://www.w3.org/2005/10/profile"> <link rel="icon" type="image/png" href="http://www.xodusen.com/resources/images/favicon.png"> <title>Welcome to XodusEN</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); }); </script> <meta name="description" content="This is the homepage of XodusEN. Xodus Entertainment Network is a unique & friendly Gaming Community that welcomes & realises the potential, and value within any user regardless of their origin. " > <meta name="keywords" content="XeN, Xodus, XEN, xen, Xodus Entertainment Network, gaming, community, PC, Steam, XBL, Xbox 360, PSN, Playstation, games, Gaming, Community, XodusEN, Gaming Network, Network, TF2, Server, CS:S, Minecraft, premium, servers, Counter-Strike: Source, Website, Homepage, Minecraftia" > <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="style.css" rel="stylesheet" type="text/css"> <!--[if IE]> <script type="text/javascript"> window.location = "http://www.xodusen.com/ie/"; </script> <![endif]--> </head> <body bgcolor="#d7d7d7"> <table id="Table_01" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="18"> <img src="images/index_01.png" width="1020" height="9" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="9" alt=""></td> </tr> <tr> <td colspan="11" rowspan="2"> <img src="images/index_02.png" width="826" height="252" alt=""></td> <td> <a id="signin" class="signin" href="http://s.xodusen.com/VrtqYm"> <img src="images/signin.png" width="69" height="30" border="0" alt=""></a> <td rowspan="6"> <img src="images/index_04.png" width="3" height="643" alt=""></td> <td colspan="3"> <a id="register" class="register" href="http://s.xodusen.com/WW3rpZ"> <img src="images/Register.png" width="79" height="30" border="0" alt=""></a> <td colspan="2" rowspan="6"> <img src="images/index_06.png" width="43" height="643" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="30" alt=""></td> </tr> <tr> <td rowspan="5"> <img src="images/index_07.png" width="69" height="613" alt=""></td> <td colspan="3" rowspan="5"> <img src="images/index_08.png" width="79" height="613" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="222" alt=""></td> </tr> <tr> <td colspan="5"> <img src="images/index_09.png" width="385" height="53" alt=""></td> <td> <img src="images/index_10.png" width="250" height="53" alt=""></td> <td colspan="5"> <img src="images/index_11.png" width="191" height="53" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="53" alt=""></td> </tr> <tr> <td colspan="4" rowspan="3"> <img src="images/index_09-13.png" width="360" height="338" alt=""></td> <td colspan="3"> <a id="logo" class="logo" href="http://www.xodusen.com/community"> <img src="images/logo.png" alt=""></a> </td> <td colspan="4" rowspan="3"> <img src="images/index_11-15.png" width="165" height="338" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="151" alt=""></td> </tr> <tr> <td rowspan="2"> <img src="images/index_09-16.png" width="25" height="187" alt=""></td> <td> <img src="images/index_16.png" width="250" height="46" alt=""></td> <td rowspan="2"> <img src="images/index_11-18.png" width="26" height="187" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="46" alt=""></td> </tr> <tr> <td> <img src="images/index_12.png" width="250" height="141" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="141" alt=""></td> </tr> <tr> <td rowspan="7"> <img src="images/index_13.png" width="27" height="548" alt=""></td> <td colspan="16" id="slideshow" class="slideshow"> <a href="http://www.xodusen.com/community"><img src="images/slideshow.png" width="960" height="305" alt=""></a> <a href="http://www.xodusen.com/mcurl"><img src="images/minecraft.png" width="960" height="305" alt=""></a> <a href="steam://connect/74.121.188.194:27015"><img src="images/tf2.png" width="960" height="305" alt=""></a> <a href="steam://connect/74.121.188.195:27015"><img src="images/CSS.png" width="960" height="305" alt=""></a> <a href="steam://connect/74.121.188.197:27015"><img src="images/GM.png" width="960" height="305" alt=""></a> <a href="aos://3267131722:32887"><img src="images/aos.png" width="960" height="305" alt=""></a> <a href="steam://connect/74.121.188.196:27015"><img src="images/CSGO.png" width="960" height="305" alt=""></a></td> <td rowspan="7"> <img src="images/index_15.png" width="33" height="548" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="305" alt=""></td> </tr> <tr> <td colspan="16"> <img src="images/index_16-23.png" width="960" height="155" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="155" alt=""></td> </tr> <tr> <td rowspan="5"> <img src="images/index_17.png" width="38" height="88" alt=""></td> <td rowspan="2"> <a id="Copyright" class="Copyright" href="http://www.xodusen.com/community"> <img src="images/Copyright.png" width="149" height="9" border="0" alt=""></a></td> <td colspan="14"> <img src="images/index_25.png" width="773" height="5" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="5" alt=""></td> </tr> <tr> <td colspan="5" rowspan="4"> <img src="images/index_20.png" width="527" height="83" alt=""></td> <td rowspan="3"> <a id="Privacy_Policy" class="Privacy_Policy" href="http://s.xodusen.com/VhGEkH"> <img src="images/Privacy_Policy.png" width="65" height="12" border="0" alt=""></a></td> <td rowspan="4"> <img src="images/index_28.png" width="8" height="83" alt=""></td> <td colspan="3" rowspan="2"> <a id="Code_of_Conduct" class="Code_of_Conduct" href="http://s.xodusen.com/Tf5Gz7"> <img src="images/Code_of_Conduct.png" width="84" height="9" border="0" alt=""></a></td> <td rowspan="4"> <img src="images/index_30.png" width="6" height="83" alt=""></td> <td rowspan="2"> <a id="Contact_Us" class="Contact_Us" href="http://s.xodusen.com/T5EYsG"> <img src="images/Contact_Us.png" width="53" height="9" border="0" alt=""></a></td> <td colspan="2" rowspan="4"> <img src="images/index_26.png" width="30" height="83" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="4" alt=""></td> </tr> <tr> <td rowspan="3"> <img src="images/index_27.png" width="149" height="79" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="5" alt=""></td> </tr> <tr> <td colspan="3" rowspan="2"> <img src="images/index_28-35.png" width="84" height="74" alt=""></td> <td rowspan="2"> <img src="images/index_29.png" width="53" height="74" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="3" alt=""></td> </tr> <tr> <td> <img src="images/index_30-37.png" width="65" height="71" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="71" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="27" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="38" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="149" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="146" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="25" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="250" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="26" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="80" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="65" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="8" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="12" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="69" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="3" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="6" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="53" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="20" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="10" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="33" height="1" alt=""></td> <td></td> </tr> </table> </body> </html> Div format Version: Div version of the website: here. Div version style CSS: body { width: 1020px; margin: 0 auto; background-image: url(images/bg.png); } #Table_01 { position:absolute; left:0px; top:0px; width:1020px; height:1200px; } #index-01_ { position:absolute; left:0px; top:0px; width:1020px; height:9px; } #index-02_ { position:absolute; left:0px; top:9px; width:826px; height:305px; } #Signin_ { position:absolute; left:826px; top:9px; width:69px; height:30px; } #index-04_ { position:absolute; left:895px; top:9px; width:3px; height:643px; } #Register_ { position:absolute; left:898px; top:9px; width:79px; height:30px; } #index-06_ { position:absolute; left:977px; top:9px; width:43px; height:643px; } #index-07_ { position:absolute; left:826px; top:39px; width:69px; height:613px; } #index-08_ { position:absolute; left:898px; top:39px; width:79px; height:613px; } #index-09_ { position:absolute; left:0px; top:314px; width:360px; height:338px; } #Logo_ { position:absolute; left:360px; top:314px; width:301px; height:151px; } #index-11_ { position:absolute; left:661px; top:314px; width:165px; height:338px; } #index-12_ { position:absolute; left:360px; top:465px; width:301px; height:187px; } #index-13_ { position:absolute; left:0px; top:652px; width:27px; height:548px; } #Slideshow_ { position:absolute; left:27px; top:652px; width:960px; height:305px; } #index-15_ { position:absolute; left:987px; top:652px; width:33px; height:548px; } #index-16_ { position:absolute; left:27px; top:957px; width:960px; height:155px; } #index-17_ { position:absolute; left:27px; top:1112px; width:39px; height:88px; } #Copyright_ { position:absolute; left:66px; top:1112px; width:148px; height:13px; } #index-19_ { position:absolute; left:214px; top:1112px; width:773px; height:5px; } #index-20_ { position:absolute; left:214px; top:1117px; width:526px; height:83px; } #Privacy-Policy_ { position:absolute; left:740px; top:1117px; width:68px; height:23px; } #index-22_ { position:absolute; left:808px; top:1117px; width:6px; height:83px; } #Code-of-Conduct_ { position:absolute; left:814px; top:1117px; width:84px; height:23px; } #index-24_ { position:absolute; left:898px; top:1117px; width:2px; height:83px; } #Contact-Us_ { position:absolute; left:900px; top:1117px; width:57px; height:23px; } #index-26_ { position:absolute; left:957px; top:1117px; width:30px; height:83px; } #index-27_ { position:absolute; left:66px; top:1125px; width:148px; height:75px; } #index-28_ { position:absolute; left:740px; top:1140px; width:68px; height:60px; } #index-29_ { position:absolute; left:814px; top:1140px; width:84px; height:60px; } #index-30_ { position:absolute; left:900px; top:1140px; width:57px; height:60px; } .logo{ width:301px; height:151px; background:url(images/logo.png); text-indent:-9999px; border:none; cursor:pointer; } .logo:hover { opacity:0.9; } .signin{ width:69px; height:30px; background:url(images/signin.png); text-indent:-9999px; border:none; cursor:pointer; } .signin:hover { opacity:0.9; } .register{ width:79px; height:30px; background:url(images/register.png); text-indent:-9999px; border:none; cursor:pointer; } .register:hover { opacity:0.9; } .contact_Us{ width:53px; height:9px; background:url(images/Contact_Us.png); text-indent:-9999px; border:none; cursor:pointer; } .contact_Us:hover { opacity:0.9; } .code_of_Conduct{ width:84px; height:9px; background:url(images/Code_of_Conduct.png); text-indent:-9999px; border:none; cursor:pointer; } .code_of_Conduct:hover { opacity:0.9; } .privacy_policy{ width:65px; height:12px; background:url(images/Privacy_Policy.png); text-indent:-9999px; border:none; cursor:pointer; } .privacy_policy:hover { opacity:0.9; } .copyright{ width:148px; height:13px; background:url(images/Copyright.png); text-indent:-9999px; border:none; cursor:pointer; } .copyright:hover { opacity:0.9; } .slideshow{ width:301px; height:151px; background: url(slideshow.png), url(minecraft.png), url(tf2.png), url(CSS.png), url(GM.png), url(aos.png), url(CSGO.png), url(voip.png), text-indent:-9999px; border:none; cursor:pointer; } .slideshow:hover { opacity:0.9; } Div version source: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> //<![CDATA[ window.__CF=window.__CF||{};window.__CF.AJS={"vig_key":{"sid":"c6d1454039dd49b1c8400bbfdf74df7a"},"trumpet":{"message":"XodusEN is undergoing background maintenance, that will provide performance & graphical improvements to our system, but will not hinder your experience across our services."},"ga_key":{"ua":"UA-35779435-1","ga_bs":"2"},"exprmntly":{"service_id":"7967"},"cdnjs":{"__h":"1","cdnjs":"MO,GF,FX,CS,JS"},"abetterbrowser":{"ie":"10"}}; //]]> </script> <script type="text/javascript"> //<![CDATA[ try{if (!window.CloudFlare) { var CloudFlare=[{verbose:0,p:0,byc:0,owlid:"cf",mirage:{responsive:0,lazy:0},oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/aav=1870252173/"},atok:"d6e39f49946fcb6d690f0d10d5a963f3",zone:"xodusen.com",rocket:"a",apps:{"vig_key":{"sid":"c6d1454039dd49b1c8400bbfdf74df7a"},"trumpet":{"message":"XodusEN is undergoing background maintenance, that will provide performance & graphical improvements to our system, but will not hinder your experience across our services."},"ga_key":{"ua":"UA-35779435-1","ga_bs":"2"},"exprmntly":{"service_id":"7967"},"cdnjs":{"__h":"1","cdnjs":"MO,GF,FX,CS,JS"},"abetterbrowser":{"ie":"10"}}}];document.write('<script type="text/javascript" src="//ajax.cloudflare.com/cdn-cgi/nexp/aav=4114775854/cloudflare.min.js"><'+'\/script>')}}catch(e){}; //]]> </script> <script type="text/javascript" src="//ajax.cloudflare.com/cdn-cgi/nexp/aav=1566821048/appsh.min.js"></script><script type="text/javascript">__CF.AJS.inith();</script><link rel="icon" type="image/png" href="http://www.xodusen.com/resources/images/favicon.png"> <title>Welcome to XodusEN</title> <meta name="description" content="This is the homepage of XodusEN. Xodus Entertainment Network is a unique & friendly Gaming Community that welcomes & realises the potential, and value within any user regardless of their origin. "> <meta name="keywords" content="XeN, Xodus, XEN, xen, Xodus Entertainment Network, gaming, community, PC, Steam, XBL, Xbox 360, PSN, Playstation, games, Gaming, Community, XodusEN, Gaming Network, Network, TF2, Server, CS:S, Minecraft, premium, servers, Counter-Strike: Source, Website, Homepage, Minecraftia"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/rocketscript" data-rocketsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/rocketscript" data-rocketsrc="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> <script type="text/rocketscript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); }); </script> <!--[if IE]> <script type="text/javascript"> window.location = "http://www.xodusen.com/ie/"; </script> <![endif]--> <script type="text/javascript"> /* <![CDATA[ */ var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-35779435-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); (function(b){(function(a){"__CF"in b&&"DJS"in b.__CF?b.__CF.DJS.push(a):"addEventListener"in b?b.addEventListener("load",a,!1):b.attachEvent("onload",a)})(function(){"FB"in b&&"Event"in FB&&"subscribe"in FB.Event&&(FB.Event.subscribe("edge.create",function(a){_gaq.push(["_trackSocial","facebook","like",a])}),FB.Event.subscribe("edge.remove",function(a){_gaq.push(["_trackSocial","facebook","unlike",a])}),FB.Event.subscribe("message.send",function(a){_gaq.push(["_trackSocial","facebook","send",a])}));"twttr"in b&&"events"in twttr&&"bind"in twttr.events&&twttr.events.bind("tweet",function(a){if(a){var b;if(a.target&&a.target.nodeName=="IFRAME")a:{if(a=a.target.src){a=a.split("#")[0].match(/[^?=&]+=([^&]*)?/g);b=0;for(var c;c=a[b];++b)if(c.indexOf("url")===0){b=unescape(c.split("=")[1]);break a}}b=void 0}_gaq.push(["_trackSocial","twitter","tweet",b])}})})})(window); /* ]]> */ </script> <meta name="pinterest" content="nopin"/></head> <body style="background-color:#d7d7d7;"><script type="text/javascript"> //<![CDATA[ try{(function(a){var b="http://",c="www.xodusen.com",d="/cdn-cgi/cl/",e="618e40fe1e01787d9cb9aa2f8abc52caf8a32796.gif",f=new a;f.src=[b,c,d,e].join("")})(Image)}catch(e){} //]]> </script> <div id="Table_01"> <div id="index-01_"> <img id="index_01" src="images/index_01.png" width="1020" height="9" alt=""/> </div> <div id="index-02_"> <img id="index_02" src="images/index_02.png" width="826" height="305" alt=""/> </div> <div id="Signin_"> <a href="http://s.xodusen.com/VrtqYm"> <img id="Signin" class="signin" src="images/Signin.png" width="69" height="30" border="0" alt=""/></a> </div> <div id="index-04_"> <img id="index_04" src="images/index_04.png" width="3" height="643" alt=""/> </div> <div id="Register_"> <a href="http://s.xodusen.com/WW3rpZ"> <img id="Register" class="register" src="images/Register.png" width="79" height="30" alt=""/></a> </div> <div id="index-06_"> <img id="index_06" src="images/index_06.png" width="43" height="643" alt=""/> </div> <div id="index-07_"> <img id="index_07" src="images/index_07.png" width="69" height="613" alt=""/> </div> <div id="index-08_"> <img id="index_08" src="images/index_08.png" width="79" height="613" alt=""/> </div> <div id="index-09_"> <img id="index_09" src="images/index_09.png" width="360" height="338" alt=""/> </div> <div id="Logo_"> <a href="http://s.xodusen.com/WW3rpZ"> <img class="logo" src="images/Logo.png" width="301" height="151" alt=""></a> </div> <div id="index-11_"> <img id="index_11" src="images/index_11.png" width="165" height="338" alt=""/> </div> <div id="index-12_"> <img id="index_12" src="images/index_12.png" width="301" height="187" alt=""/> </div> <div id="index-13_"> <img id="index_13" src="images/index_13.png" width="27" height="548" alt=""/> </div> <div id="Slideshow_" class="slideshow"> <a href="http://www.xodusen.com/community"> <img src="images/slideshow.png" width="960" height="305" alt=""></a> <a href="http://www.xodusen.com/mcurl"> <img src="images/minecraft.png" width="960" height="305" alt=""></a> <a href="steam://connect/74.121.188.194:27015"> <img src="images/tf2.png" width="960" height="305" alt=""></a> <a href="steam://connect/74.121.188.195:27015"> <img src="images/CSS.png" width="960" height="305" alt=""></a> <a href="steam://connect/74.121.188.197:27015"> <img src="images/GM.png" width="960" height="305" alt=""></a> <a href="aos://3267131722:32887"> <img src="images/aos.png" width="960" height="305" alt=""></a> <a href="steam://connect/74.121.188.196:27015"> <img src="images/CSGO.png" width="960" height="305" alt=""></a> </div> <div id="index-15_"> <img id="index_15" src="images/index_15.png" width="33" height="548" alt=""/> </div> <div id="index-16_"> <img id="index_16" src="images/index_16.png" width="960" height="155" alt=""/> </div> <div id="index-17_"> <img id="index_17" src="images/index_17.png" width="39" height="88" alt=""/> </div> <div id="Copyright_"> <a href="http://www.xodusen.com/community"> <img id="Copyright" src="images/Copyright.png" width="148" height="13" alt=""></a> </div> <div id="index-19_"> <img id="index_19" src="images/index_19.png" width="773" height="5" alt=""/> </div> <div id="index-20_"> <img id="index_20" src="images/index_20.png" width="526" height="83" alt=""/> </div> <div id="Privacy-Policy_"> <a href="http://s.xodusen.com/VhGEkH"> <img id="Privacy_Policy" src="images/Privacy_Policy.png" width="68" height="23" alt=""></a> </div> <div id="index-22_"> <img id="index_22" src="images/index_22.png" width="6" height="83" alt=""/> </div> <div id="Code-of-Conduct_"> <a href="http://s.xodusen.com/Tf5Gz7"> <img id="Code_of_Conduct" src="images/Code_of_Conduct.png" width="84" height="23" alt=""></a> </div> <div id="index-24_"> <img id="index_24" src="images/index_24.png" width="2" height="83" alt=""/> </div> <div id="Contact-Us_"> <a href="http://s.xodusen.com/T5EYsG"> <img id="Contact_Us" src="images/Contact_Us.png" width="57" height="23" alt=""></a> </div> <div id="index-26_"> <img id="index_26" src="images/index_26.png" width="30" height="83" alt=""/> </div> <div id="index-27_"> <img id="index_27" src="images/index_27.png" width="148" height="75" alt=""/> </div> <div id="index-28_"> <img id="index_28" src="images/index_28.png" width="68" height="60" alt=""/> </div> <div id="index-29_"> <img id="index_29" src="images/index_29.png" width="84" height="60" alt=""/> </div> <div id="index-30_"> <img id="index_30" src="images/index_30.png" width="57" height="60" alt=""/> </div> </div> <script type="text/javascript" src="//ajax.cloudflare.com/cdn-cgi/nexp/aav=4188748942/apps1.min.js"></script><script type="text/javascript">__CF.AJS.init1();</script></body> </html> My issue is, how can I achieve the same 'centered' results in the div format of the website, as the table format of the website? I have done some research to no avail, so I'd thought given the reputation of this site, that i'd post my issue here. Thank you in advance, ~ drea.

    Read the article

  • error when I use GWT RPC

    - by Sebe
    Hello everyone... I have a problem with Eclipse when I use an RPC.. If I use a single method call it's all in the right direction but if I add a new method to handle the server I get the following error: com.google.gwt.core.client.JavaScriptException: (null): null at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:237) at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:126) at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561) at com.google.gwt.dev.shell.ModuleSpace.invokeNativeBoolean(ModuleSpace.java:184) at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeBoolean(JavaScriptHost.java:35) at com.google.gwt.user.client.rpc.impl.RpcStatsContext.isStatsAvailable(RpcStatsContext.java) at com.google.gwt.user.client.rpc.impl.RequestCallbackAdapter.onResponseReceived(RequestCallbackAdapter.java:221) at com.google.gwt.http.client.Request.fireOnResponseReceived(Request.java:287) at com.google.gwt.http.client.RequestBuilder$1.onReadyStateChange(RequestBuilder.java:395) at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39) at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25) at java.lang.reflect.Method.invoke(Method.java:597) at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103) at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71) at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:157) at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessagesWhileWaitingForReturn(BrowserChannelServer.java:326) at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:207) at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:126) at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561) at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:269) at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91) at com.google.gwt.core.client.impl.Impl.apply(Impl.java) at com.google.gwt.core.client.impl.Impl.entry0(Impl.java:214) at sun.reflect.GeneratedMethodAccessor13.invoke(Unknown Source) at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25) at java.lang.reflect.Method.invoke(Method.java:597) at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103) at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71) at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:157) at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessages(BrowserChannelServer.java:281) at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:531) at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:352) at java.lang.Thread.run(Thread.java:619) Can I have more services in an asynchronous call right? Where am I wrong? This is my implementation MyService: package de.vogella.gwt.helloworld.client; import com.google.gwt.user.client.rpc.RemoteService; public interface MyService extends RemoteService { //chiamo i metodi presenti sul server public void creaXML(String nickname,String pass,String email2,String gio,String mes, String ann); public void setWeb(String userCorrect,String query, String titolo,String snippet,String url); } MyServiceAsync package de.vogella.gwt.helloworld.client; import com.google.gwt.user.client.rpc.AsyncCallback; public interface MyServiceAsync { void creaXML(String nickname,String pass,String email2,String gio,String mes, String ann,AsyncCallback<Void> callback); void setWeb(String userCorrect,String query, String titolo,String snippet,String url, AsyncCallback<Void> callback); } RPCService: package de.vogella.gwt.helloworld.client; import com.google.gwt.core.client.GWT; import com.google.gwt.user.client.rpc.AsyncCallback; import com.google.gwt.user.client.rpc.ServiceDefTarget; import com.google.gwt.user.client.ui.FlexTable; public class RPCService implements MyServiceAsync { MyServiceAsync service = (MyServiceAsync) GWT.create(MyService.class); ServiceDefTarget endpoint = (ServiceDefTarget) service; public RPCService() { endpoint.setServiceEntryPoint(GWT.getModuleBaseURL() + "rpc"); } public void creaXML(String nickname,String pass,String email2,String gio,String mes, String ann,AsyncCallback callback) { service.creaXML(nickname, pass, email2, gio, mes, ann, callback); } public void setWeb(String userCorrect,String query, String titolo,String snippet,String url,AsyncCallback callback) { service.setWeb(userCorrect,query, titolo,snippet,url,callback); } } MyServiceImpl package de.vogella.gwt.helloworld.server; import java.io.*; import org.w3c.dom.*; import org.xml.sax.SAXException; import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import javax.xml.parsers.ParserConfigurationException; import javax.xml.transform.*; import javax.xml.transform.dom.DOMSource; import javax.xml.transform.stream.StreamResult; import de.vogella.gwt.helloworld.client.MyService; import com.google.gwt.user.client.ui.FlexTable; import com.google.gwt.user.server.rpc.RemoteServiceServlet; import com.google.gwt.xml.client.Element; import com.google.gwt.xml.client.NodeList; public class MyServiceImpl extends RemoteServiceServlet implements MyService { //metodo che inserisce il nuovo iscritto public void creaXML(String nickname,String pass,String email2,String gio,String mes, String ann){ ....... } public void setWeb(String userCorrect,String query, String titolo,String snippet,String url) { ..... } In the app in client-side I do RPCService rpc2 = New RPCService() rpc2.setWeb(..,...,...,...,callback); and RPCService rpc = New RPCService() rpc.creaXML(..,...,...,...,callback); (in other posizions in the code...) and.. AsyncCallback callback = new AsyncCallback() { public void onFailure(Throwable caught) { Window.alert("Failure!"); } public void onSuccess(Object result) { Window.alert("Successoooooo"); } }; Web.xml: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd"> <web-app> <!-- Servlets --> <!-- Default page to serve --> <welcome-file-list> <welcome-file>De_vogella_gwt_helloworld.html</welcome-file> </welcome-file-list> <servlet> <servlet-name>rPCImpl</servlet-name> <servlet-class>de.vogella.gwt.helloworld.server.MyServiceImpl</servlet-class> </servlet> <servlet-mapping> <servlet-name>rPCImpl</servlet-name> <url-pattern>/de_vogella_gwt_helloworld/rpc</url-pattern> </servlet-mapping> </web-app> Thank you all for your attention Sebe

    Read the article

  • Primefaces datatable in-cell edit to update other rows in the same datatable with ajax rowEdit event processing

    - by Java Thu
    I have issue to update other rows in the same datatable when one row updated using primeface datatable in-cell edit ajax rowEdit. But failed to update other row with ajax call. The ajax response only return the same row data which was updated. The codes are as following: <h:form id="testForm"> <p:dataTable id="testDT" var="d" rowIndexVar="rowIndex" value="#{testBean.lists}" editable="true"> <p:column> <f:facet name="header">No</f:facet> <h:outputText value="#{rowIndex}" /> </p:column> <p:column headerText="Value"> <p:cellEditor> <f:facet name="output"> <h:outputText value="#{d.value}" /> </f:facet> <f:facet name="input"> <p:inputText value="#{d.value}" size="5" /> </f:facet> </p:cellEditor> </p:column> <p:column headerText="Edit" style="width:50px"> <p:outputPanel rendered="#{d.editable}"> <p:rowEditor> </p:rowEditor> </p:outputPanel> </p:column> <p:ajax event="rowEdit" update=":testForm:testDT" listener="#{testBean.onRowUpdate}" /> </p:dataTable> </h:form> My TestBean: package web.bean.test; import java.util.ArrayList; import java.util.List; import javax.annotation.PostConstruct; import javax.faces.bean.ManagedBean; import javax.faces.bean.ViewScoped; import org.primefaces.event.RowEditEvent; @ManagedBean(name="testBean") @ViewScoped public class TestBean { private List<TestData> lists = new ArrayList<>(); @PostConstruct protected void init() { TestData d = new TestData("Row1Data", 1d, true); lists.add(d); d = new TestData("Row1Data", 11.11d, false); lists.add(d); } public void onRowUpdate(RowEditEvent event) { Object o = event.getObject(); if (o != null) { TestData d = (TestData)o; TestData d1 = lists.get(1); d1.setValue(d1.getValue() + d.getValue()); } } public List<TestData> getLists() { return lists; } public void setLists(List<TestData> lists) { this.lists = lists; } } package web.bean.test; public class TestData { private String name; private double value; private boolean editable; public TestData(String name, double value, boolean editable) { super(); this.name = name; this.value = value; this.editable = editable; } public TestData() { } public String getName() { return name; } public void setName(String name) { this.name = name; } public double getValue() { return value; } public void setValue(double value) { this.value = value; } public boolean isEditable() { return editable; } public void setEditable(boolean editable) { this.editable = editable; } } The ajax response body: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><link type="text/css" rel="stylesheet" href="/Octopus-G/javax.faces.resource/theme.css.xhtml?ln=primefaces-bluesky" /><link type="text/css" rel="stylesheet" href="/Octopus-G/javax.faces.resource/primefaces.css.xhtml?ln=primefaces&amp;v=3.2" /><script type="text/javascript" src="/Octopus-G/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&amp;v=3.2"></script><script type="text/javascript" src="/Octopus-G/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&amp;v=3.2"></script></head><body> <form id="testForm" name="testForm" method="post" action="/Octopus-G/test.xhtml" enctype="application/x-www-form-urlencoded"> <input type="hidden" name="testForm" value="testForm" /> <div id="testForm:testDT" class="ui-datatable ui-widget"><table role="grid"><thead><tr role="row"><th id="testForm:testDT:j_idt5" class="ui-state-default" role="columnheader"><div class="ui-dt-c"><span>No</span></div></th><th id="testForm:testDT:j_idt8" class="ui-state-default" role="columnheader"><div class="ui-dt-c"><span>Value</span></div></th><th id="testForm:testDT:j_idt12" class="ui-state-default" role="columnheader" style="width:50px"><div class="ui-dt-c"><span>Edit</span></div></th></tr></thead><tfoot></tfoot><tbody id="testForm:testDT_data" class="ui-datatable-data ui-widget-content"><tr data-ri="0" class="ui-widget-content ui-datatable-even" role="row"><td role="gridcell"><div class="ui-dt-c">0</div></td><td role="gridcell" class="ui-editable-column"><div class="ui-dt-c"><span id="testForm:testDT:0:j_idt9" class="ui-cell-editor"><span class="ui-cell-editor-output">1.0</span><span class="ui-cell-editor-input"><input id="testForm:testDT:0:j_idt11" name="testForm:testDT:0:j_idt11" type="text" value="1.0" size="5" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /><script id="testForm:testDT:0:j_idt11_s" type="text/javascript">PrimeFaces.cw('InputText','widget_testForm_testDT_0_j_idt11',{id:'testForm:testDT:0:j_idt11'});</script></span></span></div></td><td role="gridcell" style="width:50px"><div class="ui-dt-c"><span id="testForm:testDT:0:j_idt13"><span id="testForm:testDT:0:j_idt14" class="ui-row-editor"><span class="ui-icon ui-icon-pencil"></span><span class="ui-icon ui-icon-check" style="display:none"></span><span class="ui-icon ui-icon-close" style="display:none"></span></span></span></div></td></tr><tr data-ri="1" class="ui-widget-content ui-datatable-odd" role="row"><td role="gridcell"><div class="ui-dt-c">1</div></td><td role="gridcell" class="ui-editable-column"><div class="ui-dt-c"><span id="testForm:testDT:1:j_idt9" class="ui-cell-editor"><span class="ui-cell-editor-output">11.11</span><span class="ui-cell-editor-input"><input id="testForm:testDT:1:j_idt11" name="testForm:testDT:1:j_idt11" type="text" value="11.11" size="5" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /><script id="testForm:testDT:1:j_idt11_s" type="text/javascript">PrimeFaces.cw('InputText','widget_testForm_testDT_1_j_idt11',{id:'testForm:testDT:1:j_idt11'});</script></span></span></div></td><td role="gridcell" style="width:50px"><div class="ui-dt-c"></div></td></tr></tbody></table></div><script id="testForm:testDT_s" type="text/javascript">$(function() {PrimeFaces.cw('DataTable','widget_testForm_testDT',{id:'testForm:testDT',editable:true,behaviors:{rowEdit:function(event) {PrimeFaces.ab({source:'testForm:testDT',process:'testForm:testDT',update:'testForm:testDT',event:'rowEdit'}, arguments[1]);}}});});</script><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-8223787210091934199:-360328890338571623" autocomplete="off" /> </form></body> </html>

    Read the article

  • IdHttp Post Method Delphi 2010

    - by Dusten S
    Like others before me, I'm having troubles using the IdHttp(Indy 10.5.5) component in Delphi 2010. The code works fine in Delphi 7: var XMLString : AnsiString; lService : AnsiString; ResponseStream: TMemoryStream; InputStringList : TStringList; begin ResponseStream := TMemoryStream.Create; InputStringList := TStringList.Create; XMLString :='<?xml version="1.0" encoding="ISO-8859-1"?> '+ '<!DOCTYPE pnet_imessage_send PUBLIC "-//PeopleNet//pnet_imessage_send" "http://open.peoplenetonline.com/dtd/pnet_imessage_send.dtd"> '+ '<pnet_imessage_send> '+ ' <cid>username</cid> '+ ' <pw>password</pw> '+ ' <vehicle_number>tr01</vehicle_number> '+ ' <deliver>now</deliver> '+ ' <action> '+ ' <action_type>reply_with_freeform</action_type> '+ ' <urgent_reply>yes</urgent_reply> '+ ' </action> '+ ' <freeform_message>Test Message Version 2</freeform_message> '+ '</pnet_imessage_send> '; lService := 'imessage_send'; InputStringList.Values['service'] := lService; InputStringList.Values['xml'] := XMLString; try IdHttp1.Request.Accept := '*/*'; IdHttp1.Request.ContentType := 'text/XML'; IdHTTP1.Post('http://open.peoplenetonline.com/scripts/open.dll', InputStringList, ResponseStream); ... finally ResponseStream.Free; InputStringList.Free; end; The only differences so far between this and the D7 code is that I've changed the String types to AnsiString, and added the HTTP Request properties. The response I get back from the server is 'XML failed to parse. Whitespace expected at Line:1 Position: 19', I'm assuming the XML got garbled up somewhere in the process, but I can't figure our where I'm going wrong. Any ideas?

    Read the article

  • ASP.NET make a panel visible on click of hyperlink (whilst also cuasing postback for page navigation

    - by Helen
    I may be asking the impossible but let me set out my problem: I have a menu in a MasterPage which uses images and mouseover mouseout events for design purposes. On one of the menu options I need to display a set of sub menus options on the click of the parent menu item. The menu item itself also needs to navigate to a specified url. I was originally trying to use an AJAX accordion panel but as I only had one accordion panel it was always displaying the sub menu items and was not collapsing. I have also tried putting the options in a div and setting the display via javascript. This worked but then was overwritten once the page navigation postback occurred. Here is the source: <%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <%@ Register Src="LeadHeader.ascx" TagName="LeadHeader" TagPrefix="uc1" %> <%@ Register Src="~/LeadFooter.ascx" TagName="LeadFooter" TagPrefix="uc2" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var revert = new Array(); var inames = new Array('home', 'whoweare', 'whatwedo','ourapproach', 'ourvalues', 'contact'); // Preload if (document.images) { var flipped = new Array(); for(i=0; i< inames.length; i++) { flipped[i] = new Image(); flipped[i].src = "images/"+inames[i]+"2.jpg"; } } function over(num) { if(document.images) { revert[num] = document.images[inames[num]].src; document.images[inames[num]].src = flipped[num].src; } } function out(num) { if(document.images) document.images[inames[num]].src = revert[num]; } function ShowHide(elementId) { var element = document.getElementById(elementId); if(element.style.display != "block") { element.style.display = "block"; } else { element.style.display = "none"; } } function UpdateText(element) { if(element.innerHTML.indexOf("Show") != -1) { element.innerHTML = "Hide Details"; } else { element.innerHTML = "Show Details"; } } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server"> <uc1:LeadHeader ID="LeadHeader" runat="server" /> </asp:ContentPlaceHolder> <div id="nav"> <div class="menu-item"> <a href="Default.aspx"> <img src="Images/home.jpg" alt="home" id="home" onmouseover="over(0)" onmouseout="out(0)" class="right" /></a> </div> <div class="menu-item"> <a href="AboutUs.aspx"> <img src="Images/whoweare.jpg" alt="who we are" id="whoweare" onmouseover="over(1)" onmouseout="out(1)" class="right" /></a> </div> <%-- <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:Accordion ID="Accordion1" runat="server" AutoSize="None" FadeTransitions="true" TransitionDuration="350" FramesPerSecond="40" RequireOpenedPane="false" > <Panes> <cc1:AccordionPane runat="server"> <Header>--%> <div class="menu-item"> <a href="WhatWeDo.aspx"> <img src="Images/whatwedo.jpg" alt="what we do" id="whatwedo" onmouseover="over(2)" onmouseout="out(2)" class="right" onclick="ShowHide('divDetails');UpdateText(this);" /></a></div> <%--/Header> <Content>--%> <div id="divDetails" style="display:none;"> <a href="management.aspx" title="Management Development">Management Development</a><br /> <a href="leadership.aspx" title="Leadership Development">Leadership Development</a><br /> <a href="personal.aspx" title="Personal Development">Personal Development</a><br /> <a href="realteams.aspx" title="Team Building / Facilitation">Team Building & Facilitation</a><br /> <a href="coaching.aspx" title="Coaching">One to One Coaching</a> </div> <%-- </Content> </cc1:AccordionPane> </Panes> </cc1:Accordion> --%> <div class="menu-item"> <a href="OurApproach.aspx"> <img src="images/ourapproach.jpg" alt="our approach" id="ourapproach" onmouseover="over(3)" onmouseout="out(3)" /></a> </div> <div class="menu-item"> <a href="OurValues.aspx"> <img src="images/ourvalues.jpg" alt="our values" id="ourvalues" onmouseover="over(4)" onmouseout="out(4)" /></a> </div> <div class="menu-item"> <a href="ContactUs.aspx"> <img src="images/ContactUs.jpg" alt="contact us" id="contactus" onmouseover="over(5)" onmouseout="out(5)" /></a> </div> </div> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> <asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server"> <uc2:LeadFooter ID="LeadFooter" runat="server" /> </asp:ContentPlaceHolder> </div> </form> </body> </html>

    Read the article

  • Dojo JsonRest store and dijit.Tree

    - by user1427712
    I'm having a some problem making JSonRest store and dijit.Tree with ForestModel. I've tried some combination of JsonRestStore and json data format following many tips on the web, with no success. At the end, taking example form here http://blog.respondify.se/2011/09/using-dijit-tree-with-the-new-dojo-object-store/ I've made up this simple page (I'm using dojotolkit 1.7.2) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Tree Model Explorer</title> <script type="text/javascript"> djConfig = { parseOnLoad : true, isDebug : true, } </script> <script type="text/javascript" djConfig="parseOnLoad: true" src="lib/dojo/dojo.js"></script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.Tree"); dojo.require("dojo.store.JsonRest"); dojo.require("dojo.data.ObjectStore"); dojo.require("dijit.tree.ForestStoreModel"); dojo.addOnLoad(function() { var objectStore = new dojo.store.JsonRest({ target : "test.json", labelAttribute : "name", idAttribute: "id" }); var dataStore = new dojo.data.ObjectStore({ objectStore : objectStore }); var treeModel = new dijit.tree.ForestStoreModel({ store : dataStore, deferItemLoadingUntilExpand : true, rootLabel : "Subjects", query : { "id" : "*" }, childrenAttrs : [ "children" ] }); var tree = new dijit.Tree({ model : treeModel }, 'treeNode'); tree.startup(); }); </script> </head> <body> <div id="treeNode"></div> </body> </html> My rest service responds the following json { data: [ { "id": "PippoId", "name": "Pippo", "children": [] }, { "id": "PlutoId", "name": "Pluto", "children": [] }, { "id": "PaperinoId", "name": "Paperino", "children": [] } ]} I've tried also with the following response (actually my final intention n is to use lazy loading for the tree) { data: [ { "id": "PippoId", "name": "Pippo", "$ref": "author0", "children": true }, { "id": "PlutoId", "name": "Pluto", "$ref": "author1", "children": true }, { "id": "PaperinoId", "name": "Paperino", "$ref": "author2", "children": true } ]} Neither of the two works. I see no error message in firebug. I simply see the root "Subject" on the page. Thanks to anybody could help in some way.

    Read the article

  • Contact Form ASP.net

    - by kwek-kwek
    This is my first time creating a from in ASP.NET I am following a tutorial here It is easy to follow but I get this error. But, if I take out this code : <%@ Page Language="C#" AutoEventWireup="true" CodeFile="contact-form.aspx.cs" Inherits="_Emailer" %> it works like a charm. What am I doing wrong? Here is my code full HTML: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="contact-form.aspx.cs" Inherits="_Emailer" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1 " /> <title>&Eacute;cole Marc Favreau</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body id="benevolat"> <asp:label id="lblOutcome" runat="server" /> <form action="" method="post" enctype="multipart/form-data" name="form1" id="form1"> <table width="100%" border="0" cellspacing="5" cellpadding="0"> <tr> <td>Nom du Parent</td> <td><label> <input type="text" name="c_Name" id="c_Name" /> </label></td> </tr> <tr> <td>Nom de votre enfant</td> <td><input type="text" name="c_Enfant" id="c_Enfant" /></td> </tr> <tr> <td>Groupe</td> <td><input type="text" name="c_Groupe" id="c_Groupe" /></td> </tr> <tr> <td>Num&eacute;ro de t&eacute;l&eacute;phone</td> <td><input type="text" name="c_Tel" id="c_Tel" /></td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td colspan="2"><strong>J'aimerais &ecirc;tre bénévole pour:</strong></td> </tr> <tr> <td colspan="2"><table width="100%" border="0" cellspacing="5" cellpadding="0"> <tr> <td width="5%"><label> <input type="checkbox" name="La biblioth&egrave;que " id="La biblioth&egrave;que " /> </label></td> <td colspan="2">La biblioth&egrave;que </td> </tr> <tr> <td><input type="checkbox" name="Aide en classe " id="Aide en classe " /></td> <td colspan="2">Aide en classe </td> </tr> <tr> <td><input type="checkbox" name="Aide pour les dîners pizza  " id="Aide pour les dîners pizza  " /></td> <td colspan="2">Aide pour les d&icirc;ners pizza&nbsp; </td> </tr> <tr> <td><input type="checkbox" name="Aide aux devoirs apr&egrave;s l&rsquo;&eacute;cole" id="Aide aux devoirs apr&egrave;s l&rsquo;&eacute;cole" /></td> <td colspan="2">Aide aux devoirs apr&egrave;s l&rsquo;&eacute;cole </td> </tr> <tr> <td><input type="checkbox" name="Am&eacute;nagement paysager (fleurs, arbustes &agrave; tailler&hellip;)" id="Am&eacute;nagement paysager (fleurs, arbustes &agrave; tailler&hellip;)" /></td> <td colspan="2">Am&eacute;nagement paysager (fleurs, arbustes &agrave; tailler&hellip;) </td> </tr> <tr> <td><input type="checkbox" name="Photo scolaire" id="Photo scolaire" /></td> <td colspan="2">Photo scolaire </td> </tr> <tr> <td><input type="checkbox" name="Accompagner les &eacute;l&egrave;ves lors des sorties" id="Accompagner les &eacute;l&egrave;ves lors des sorties" /></td> <td colspan="2">Accompagner les &eacute;l&egrave;ves lors des sorties </td> </tr> <tr> <td><input type="checkbox" name="Venir parler de votre m&eacute;tier dans une classe ou monter un atelier" id="Venir parler de votre m&eacute;tier dans une classe ou monter un atelier" /></td> <td colspan="2">Venir parler de votre m&eacute;tier dans une classe ou monter un atelier </td> </tr> <tr> <td><input type="checkbox" name="Autres" id="Autres" /></td> <td>Autres</td> <td><label> <input type="text" name="c_Autre" id="c_Autre" /> </label></td> </tr> </table></td> </tr> <tr> <td colspan="2"><label> <input type="submit" name="button" id="button" value="Soumettre" /> <input type="submit" name="button2" id="button2" value="Effacer" /> </label></td> </tr> </table> </form> </div> </div> </div> <!-- #include file="footer.aspx"--> </div> </body> </html>

    Read the article

  • Stretching width correctly to 100% of an inline-block element in IE6 and IE7

    - by Simon Lieschke
    I have the following markup, where I am attempting to get the right hand side of the second table to align with the right hand side of the heading above it. This works in IE8, Firefox and Chrome, but in IE6/7 the table is incorrectly stretched to fill the width of the page. I'm using the Trip Switch hasLayout trigger to apply inline-block in IE6/7. Does anyone know how (or even if) I can get the table only to fill the natural width of the wrapper element displayed with inline-block in IE6/7? You can see the code running live at http://jsbin.com/uyuva. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Test</title> <style> .wrapper { display: inline-block; border: 1px solid green; } /* display: inline-block triggers the wrapper element to have layout for IE 6/7. The trip switch then provides the inline component of the display behaviour. See http://www.brunildo.org/test/InlineBlockLayout.html for more details. */ .wrapper { *display: inline; } table { border: 1px solid red; } </style> </head> <body> <h1>No width on table:</h1> <div class="wrapper"> <h2>The right hand side of the table doesn't stretch to the end of this heading</h2> <table><tr><td>foo</td></tr></table> </div> text <h1>Width on table:</h1> <div class="wrapper"> <h2>The right hand side of the table should stretch to the end of this heading</h2> <table style="width: 100%"><tr><td>foo</td></tr></table> </div> text </body> </html>

    Read the article

  • Why won't "!important" override ":first-line"?

    - by bazzlevi
    I am trying to do the tutorial in Chapter 6 of the 2nd edition of "CSS: The Missing Manual", and I've run into an issue I'm trying to understand. I have one style that looks like this: #main p:first-line { color: #999999; font-weight: bold; } Later I have another style that looks like this: #main p.byline { color: #00994D !important; font-size: 1.6em; margin: 5px 0 25px 50px; } I am confused because the second one won't override the color choice in the first one despite the fact that the second one has "!important" in it. I put both classes into an online specificity calculator, and the second one comes out being more specific, so I'm doubly confused. By the way, the inclusion of "!important" is the work-around suggested in the errata for the book. Odd that it still doesn't work! Here's the code for the entire page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS Typography</title> <style type="text/css"> html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote { padding: 0; margin: 0; font-size: 100%; font-weight: normal; } table { border-collapse: collapse; border-spacing: 0; } td, th, caption { font-weight: normal; text-align: left; } img, fieldset { border: 0; } ol { padding-left: 1.4em; list-style: decimal; } ul { padding-left: 1.4em; list-style:square; } q:before, q:after { content:''; } body { color: #002D4B; font-family: Arial, Helvetica, sans-serif; font-size: 62.5% } #main h1 { color: #F60; font-family: "Arial Black", Arial, Helvetica, sans-serif; font-size: 4em; } #main h2 { font: bold 3.5em "Hoefler Text", Garamond, Times, serif; border-bottom: 1px solid #002D4B; margin-top: 25px; } #main h3 { color: #F60; font-size: 1.9em; font-weight: bold; text-transform: uppercase; margin-top: 25px; margin-bottom: 10px; } #main p { font-size: 1.5em; line-height: 150%; margin-left: 150px; margin-right: 50px; margin-bottom: 10px; } #main p:first-line { color: #999999; font-weight: bold; } #main ul { margin: 50px 0 25px 50px; width: 150px; float: right; } #main li { color: #207EBF; font-size: 1.5em; margin-bottom: 7px; } #main p.byline { color: #00994D !important; font-size: 1.6em; margin: 5px 0 25px 50px; } #main .byline strong { color: #207EBF; text-transform: uppercase; margin-left: 5px; } </style> </head> <body> <div id="main"> <h1><strong>CSS</strong> The Missing Manual</h1> <h2>Exploring Typographic Possibilities</h2> <p class="byline">november 30 <strong>Rod Dibble</strong></p> <ul> <li>Lorem Ipsum</li> <li>Reprehenderit qui in ea</li> <li>Lorem Ipsum</li> <li>Reprehenderit qui in ea</li> <li>Lorem Ipsum</li> <li>Reprehenderit qui in ea</li> </ul> <h3>Esse quam nulla</h3> <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> <h3>Quis autem vel eum</h3> <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> </div> </body> </html> Here is the above code on JSBin: http://jsbin.com/unexe3

    Read the article

  • Controls not aligning properly.

    - by RPK
    I am using following code to design my home page. The output (as shown below) is not appearing properly. You can see the banner going to far left and the navigation links have a huge gap in between. How to set this? Can it be done using only the DIV tag instead of TABLE? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> First Website </title> </head> <body> <table id="main" align="center" width="600 px"> <tr id="trBanner"> <td id="tdBanner"> <img src="../../../My Pictures/banner copy.bmp.jpg" </td> </tr> <tr id="trNavLinks"> <td id="lnkHome"> <a href="" id="lnkHome" name="lnkHome">Home</a> </td> <td id="lnkLife"> <a href="" id="lnkLife" name="lnkLife">Life</a> </td> <td id="lnkTeachings"> <a href="" id="lnkTeachings" name="lnkTeachings">Teachings</a> </td> <td id="lnkExperiences"> <a href="" id="lnkExperiences" name="lnkExperiences">Experiences</a> </td> <td id="lnkPhotoGallery"> <a href="" id="lnkPhotoGallery" name="lnkPhotoGallery">Photo Gallery</a> </td> <td id="lnkReach"> <a href="" id="lnkReach" name="lnkReach">How to Reach</a> </td> <td id="lnkContact"> <a href="" id="lnkContact" name="lnkContact">Contact Us</a> </td> </tr> </table> </body> </html>

    Read the article

  • 100% width table cell

    - by Elvis
    Hello! I have this table layout. I want to align the whole content to the right. So i'm using one cell with width: 100%;. Usually everything looks good and nice. But there is something, which i don't understand. If the content in cell, which has colspan, becomes bigger than normal cell in this column (you can test this by clicking Click to test button), it brakes whole layout. This happens on Chrome, Safari 4 and 5, IE8, but on Opera, FF and IE7 is OK. Any ideas? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>TEST</title> <style type="text/css"> table { width: 100%; } table td { border: 1px solid black; white-space: nowrap; } .delimiter { width: 100%; } </style> </head> <body> <table> <tr> <td><label>Row 1</label></td> <td>&nbsp;</td> <td><input type="text" value="Field 1" id="field1" size="25"></td> <td><input type="button" value="Click to test" onclick="var o = document.getElementById('field2'); o.size = o.size == 25 ? 50 : 25;"></td> <td class="delimiter">&nbsp;</td> </tr> <tr> <td><label>Row 2</label></td> <td>&nbsp;</td> <td colspan="3"><input type="text" id="field2" value="Field 2" size="25"></td> </tr> </table> </body> </html>

    Read the article

  • Jquery append input for 2 different input-sections

    - by Email
    Hi i use the following simple jquery script to append input. Source http://muiomuio.com/web-design/add-remove-items-with-jquery <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Add and Remove - jQuery tutorial</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { var i = $('input').size() + 1; $('a.add').click(function() { $('<p><input type="text" value="input ' + i + '" name="input_field'+ i +'" /></p>').animate({ opacity: "show" }, "slow").appendTo('#inputs'); i++; }); $('a.remove').click(function() { if(i > 2) { $('input:last').animate({opacity:"hide"}, "slow").remove(); i--; } }); $('a.reset').click(function() { while(i > 2) { $('input:last').remove(); i--; } }); }); </script> </head> <body> <h1>Add / remove text fields from webform</h1> <a href="#" class="add"><img src="add.png" width="24" height="24" alt="add" title="add input" /></a> <a href="#" class="remove"><img src="remove.png" width="24" height="24" alt="remove input" /></a> <a href="#" class="reset"><img src="reset.png" width="24" height="24" alt="reset" /></a> <div id="inputs"> <p> <input type="text" value="input 1" name="input_field1"> </p> </div> </div> </body> </html> I know want to add more input fields so i add this html <div id="outputs"> <p> <input type="text" value="output 1" name="output_field1"> </p> how can i achieve that the var i = $('input').size() + 1; will be individually for every input section? EDITED: the full script is the following. copy and paste will get you a full clone of mine. Problem still exists <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Add and Remove - jQuery tutorial</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { var i = $('input').size() + 1; $('a.add').click(function() { $('<p><input type="text" value="input ' + i + '" name="input_field'+ i +'" /></p>').animate({ opacity: "show" }, "slow").appendTo('#inputs'); i++; }); $('a.remove').click(function() { if(i > 2) { $('input:last').animate({opacity:"hide"}, "slow").remove(); i--; } }); $('a.reset').click(function() { while(i > 2) { $('input:last').remove(); i--; } }); $('a.add_o').click(function() { $('<p><input type="text" value="output ' + i + '" name="input_field'+ i +'" /></p>').animate({ opacity: "show" }, "slow").appendTo('#outputs'); i++; }); $('a.remove_o').click(function() { if(i > 2) { $('input:last').animate({opacity:"hide"}, "slow").remove(); i--; } }); $('a.reset_o').click(function() { while(i > 2) { $('input:last').remove(); i--; } }); }); </script> <style rel="stylesheet" type="text/css"> h1 { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;} .hide {visibility:hidden;} img {border:none;} input { width:500px; height:20px; padding:10px; background:#f7f7f7; border:1px solid #f0f0f0; color:#333; font-size:20px; text-align:center; line-height:120px; margin:0; -moz-border-radius:5px; -webkit-border-radius:5px; } #inputs { width:520px; padding:0px 20px; border:1px solid #f0f0f0; -moz-border-radius:20px; -webkit-border-radius:20px; } </style> </head> <body> <h1>Add / remove text fields from webform</h1> <a href="#" class="add"><img src="http://muiomuio.com/tutorials/jquery/add-remove/add.png" width="24" height="24" alt="add" title="add input" /></a> <a href="#" class="remove"><img src="http://muiomuio.com/tutorials/jquery/add-remove/remove.png" width="24" height="24" alt="remove input" /></a> <a href="#" class="reset"><img src="http://muiomuio.com/tutorials/jquery/add-remove/reset.png" width="24" height="24" alt="reset" /></a> <div id="inputs"> <p> <input type="text" value="input 1" name="input_field1"> </p> </div> <a href="#" class="add_o"><img src="http://muiomuio.com/tutorials/jquery/add-remove/add.png" width="24" height="24" alt="add" title="add input" /></a> <a href="#" class="remove_o"><img src="http://muiomuio.com/tutorials/jquery/add-remove/remove.png" width="24" height="24" alt="remove input" /></a> <a href="#" class="reset_o"><img src="http://muiomuio.com/tutorials/jquery/add-remove/reset.png" width="24" height="24" alt="reset" /></a> <div id="outputs"> <p> <input type="text" value="output 1" name="output_field1"> </p> </div> </body> </html>

    Read the article

  • Anchor tag not centered on page after clicking

    - by jennyjune
    I am creating a website that scrolls down to different divs by the use of anchors. However, when I click on a link, that anchored div is not centered on the page. I positioned my divs absolutely but I have no idea if that is affecting it? Anyone have any clue how to get the divs centered using anchors? Please help! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Jean and James</title> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.anchor.js" type="text/javascript"></script> <link href="jj_css.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="navigation" align="center"> <a href="#jeanandjames" class="anchorLink">JEAN AND JAMES</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#feature" class="anchorLink">FEATURE PRODUCT</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#contact" class="anchorLink">CONTACT</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#work" class="anchorLink">WORK</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div> <div id="logo"> <img src="logo.gif" /> </div> <a name="jeanandjames" id="jeanandjames"> <div id="jeanandjames" align="center"> <img src="jeanandjames.jpg" /><br /> A boutique design firm specializing in hand crafted products and graphic print work. </div> </a> <a name="feature" id="feature"> <div id="feature"> <img src="baby_bowtie.gif" /> </div> </a> <a name="contact" id="contact"> <div id="contact"> Jean & James Chicago, IL<br /><br /> Donec faucibus nunc eget quam pretium vel porttitor diam venenatis. Nullam egestas, quam et congue rutrum, diam mauris tempus urna, eget mattis quam quam ac erat. Vivamus lobortis nunc quis arcu lobortis vel euismod felis tincidunt. Etiam facilisis, metus et mattis tempor, erat ipsum tincidunt diam, nec aliquam velit risus a lacus. Duis tempor bibendum felis, adipiscing mattis lorem eleifend fermentum. Nulla adipiscing consequat enim id sagittis. Suspendisse venenatis scelerisque orci, sed sollicitudin erat egestas in. Nunc orci leo, adipiscing vel consectetur sit amet, rutrum vitae nulla. Mauris ut mi nunc, non condimentum risus. Donec varius consequat quam vel lacinia. Etiam et eros nec quam egestas pellentesque sit amet ac nunc. </div> </a> </body> </html> And here is my css: #navigation A:link {text-decoration: none; color: #FFFFFF;} #navigation A:visited {text-decoration: none; color: #FFFFFF;} #navigation A:active {text-decoration: none; color: #FFFFFF;} #navigation A:hover {text-decoration: none; color: #CC9;} #navigation { position: fixed; top: -1px; left: -1px; width: 100%; height: 20px; padding: 10px; z-index: 10; font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: #000; color: #FFF; } #logo { position: fixed; top: 150px; left: 50px; } #jeanandjames { position: absolute; top: 230px; left: 200px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } #feature { position: absolute; top: 600px; left: 200px; } #contact { position: absolute; top: 1200px; left: 200px; width: 500px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }

    Read the article

  • JavaScript/Dojo Module Pattern - how to debug?

    - by djna
    I'm working with Dojo and using the "Module Pattern" as described in Mastering Dojo. So far as I can see this pattern is a general, and widely used, JavaScript pattern. My question is: How do we debug our modules? So far I've not been able to persuade Firebug to show me the source of my module. Firebug seems to show only the dojo eval statement used to execute the factory method. Hence I'm not able to step through my module source. I've tried putting "debugger" statements in my module code, and Firebug seems to halt correctly, but does not show the source. Contrived example code below. This is just an example of sufficient complexity to make the need for debugging plausible, it's not intended to be useful code. The page <!-- Experiments with Debugging --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>console me</title> <style type="text/css"> @import "../dojoroot/dojo/resources/dojo.css"; @import "../dojoroot/dijit/themes/tundra/tundra.css"; @import "edf.css"; </style> <script type="text/javascript" src="../dojoroot/dojo/dojo.js"> </script> <script type="text/javascript" > dojo.registerModulePath("mytest", "../../mytest"); dojo.require("mytest.example"); dojo.addOnLoad(function(){ mytest.example.greet(); }); </script> </head> <body class="tundra"> <div id="bulletin"> <p>Just Testing</p> </div> </body> </html> <!-- END: snip1 --> The java script I'd like to debug dojo.provide("mytest.example"); dojo.require("dijit.layout.ContentPane"); /** * define module */ (function(){ //define the main program functions... var example= mytest.example; example.greet= function(args) { var bulletin = dojo.byId("bulletin"); console.log("bulletin:" + bulletin); if ( bulletin) { var content = new dijit.layout.ContentPane({ id: "dummy", region: "center" }); content.setContent('Greetings!'); dojo._destroyElement(bulletin); dojo.place(content.domNode, dojo.body(), "first"); console.log("greeting done"); } else { console.error("no bulletin board"); } } })();

    Read the article

  • Visual Web Developer 2008 Express and XHTML 1.1 (not applying)

    - by Mike Valeriano
    Hello. I may be missing something since I'm not used to work with IDEs for web development, so please understand if I'm doing something stupid. I've picked a copy of Beginning ASP.NET 3.5 in C# and VB to try and learn this thing quickly. I'm no HTML guru, but I know something about the DTDs and I want to either use XHTML 1.0 Strict or XHTML 1.1 while learning the ins and outs of ASP.NET. Following the book (just started actually), I'm not having any trouble understanding the concepts, since I have a C# background, but what I don't understand is how VWD goes about applying the schema you select for validation. The book explains that the drop-down list on the toolbar is enough to set this, so that's what I did: I've selected XHTML 1.1 (since there is no 1.0 strict option, what I find really odd) and then started the project. The thing is that the code generated automatically for the Default page had the XHTML 1.0 transitional DTD. Every other page added had the same DTD, even though XHTML 1.1 is still the selected schema in the drop-down list. I decided to test it out and there it was: inserting some text in the design view and then applying a bold formatting just inserted < b tags on the code. Changing color does add a span tag with added CSS though. What I want to know is: if I want strict XHTML (or 1.1) should I just code it manually? Or is there a "fix" for this problem (having a schema selected but not applied by the IDE)? Am I missing something really easy and dumb? I have no problem with coding it manually - I actually prefer doing that. The thing is that I really wanna try this WYSIWYG approach for once, since some developers swear by it. Plus I don't know yet if I'll need special tags for ASP.NET, so I think having them inserted automatically should be the best practice. I couldn't find any similar problems around (MSDN, Google, here), and as far as the book goes (up to the point I've read), this is the expected VWD behavior, which I find suspect at least. Sorry for the long text (and poor English - not my primary language). Thanks in advance for any help/tips.

    Read the article

  • CSS drop-down menus pushing page content down

    - by Mason Jones
    This is probably (hopefully) a pretty simple question, but I can't seem to get it to work so I'll turn to the experts here. I'm using a pretty straightforward CSS drop-down menu, with just a little JQuery involved. The issue is that when I hover over the drop-down and it opens, it's pushing everything on the page down below it rather then opening over it. I've tried messing with the z-index but that doesn't seem to be the issue. Any tips would be fantastic, thanks in advance. Here's the HTML; sorry it's not super-pretty, I had to rip out a bunch of stuff to make it simple and generic. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML style="zoom: 100%; "> <HEAD> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script> </HEAD> <BODY class="bodyclass" style="background:#BCE2F1; height: 100%;"> <DIV id="maincontainer" style="min-height: 100%;"> <STYLE type="text/css"> #cssdropdown, #cssdropdown ul { font-size: 9pt; background-color: black; list-style: none; } #cssdropdown, #cssdropdown * { padding: 0; margin: 0; } #cssdropdown li.headlink { width: 140px; float: left; margin-left: -1px; border: 1px black solid; background-color: white; text-align: center; } #cssdropdown li.headlink a { display: block; color: #339804; padding: 3px; text-decoration: none; } #cssdropdown li.headlink a:hover { background-color: #F8E0AC; font-weight: bold; } #cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left; } #cssdropdown li.headlink:hover ul { display: block; text-decoration: none; } #cssdropdown li.headlink ul li a { padding: 5px; height: 15px; } #cssdropdown li.headlink ul li a:hover { background-color: #CCE9F5; text-decoration: none; font-weight: normal; } /* #cssdropdown a { color: #CCE9F5; } */ #cssdropdown ul li a:hover { text-decoration: none; } #cssdropdown li.headlink { background-color: white; } #cssdropdown li.headlink ul { background-color: white; background-position: bottom; padding-bottom: 2px; } </STYLE> <SCRIPT language="JavaScript"> $(document).ready(function(){ $('#cssdropdown li.headlink').hover( function() { $('ul', this).css('display', 'block'); }, function() { $('ul', this).css('display', 'none'); }); }); </SCRIPT> <DIV class="navigation_box" style="border: none;"> <DIV class="innercontent"> <DIV style="background: white; float: left; padding: 5px; border: solid 1px black;"> LOGO </DIV> <DIV class="navmenu" style="float: right; bottom: 0; font-size: 9pt; text-align: right;"> <SPAN>Logged in as [email protected]</SPAN><BR> <UL id="cssdropdown"> <LI class="headlink"> <A href="http://localhost:3000/one">One</A> <UL style="display: none; "> <LI><A href="http://localhost:3000/one">Option One</A></LI> <LI><A href="http://localhost:3000/one">Option Two</A></LI> <LI><A href="http://localhost:3000/one">Option Three</A></LI> <LI><A href="http://localhost:3000/one">Option Four</A></LI> </UL> </LI> <LI class="headlink"> <A href="http://localhost:3000/two">Two</A> <UL style="display: none; "> <LI><A href="http://localhost:3000/two">Option Two-One</A></LI> <LI><A href="http://localhost:3000/two">Option Two-Two</A></LI> <LI><A href="http://localhost:3000/two">Option Two-Three</A></LI> </UL> </LI> <LI class="headlink" style="width: 80px;"> <A href="http://localhost:3000/three">Three</A> </LI> <LI class="headlink" style="width: 300px; padding-top: 2px; height: 19px;"> <FORM action="http://localhost:3000/search" method="post"> <P> Search: <INPUT id="searchwords" name="searchwords" size="20" type="text" value=""> <INPUT name="commit" type="submit" value="Find"> </P> </FORM> </LI> <LI class="headlink" style="width: 60px;"> <A href="http://localhost:3000/four">Four</A> </LI> <LI class="headlink" style="width: 60px;"> <A href="http://localhost:3000/logout">Logout</A> </LI> </UL> </DIV> </DIV> </DIV> <DIV id="contentwrapper" style="clear:both"> <DIV class="innercontent" style="margin: 0px 20px 20px 20px;"> <H1>Some test content here to fill things out a little bit.</H1> </DIV> </DIV> </DIV> <DIV id="footer" style="clear: both; float: bottom;"> <DIV class="innercontent" style="font-size: 10px;"> Copyright 2008-2010 </DIV> </DIV> </BODY>

    Read the article

< Previous Page | 26 27 28 29 30 31 32 33 34 35 36 37  | Next Page >