markup extensions - Page 62

How to use a VB usercontrol on a C# page?

- by ks78

Hopefully someone will be able to point me in the right direction. I've created a usercontrol in VB that handles paging more efficiently than the DataPager (at least for very large datasets). I'd like to use it in a C# project, but I've been having trouble getting it to work. I've tried simply adding PagingControl.ascx to the C# project, but when I do that the markup and VB code behind don't seem to see each other. --Is this a namespace issue? I've tried adding the PagingControl.ascx to its own VB project, then adding that project to the C# project's solution, as well as a reference. --That almost works. I can register the PagingControl usercontrol in the markup. I can access the usercontrol's properties in the code behind, but any property that involves the UI of the usercontrol fails. Its seems as if the usercontrol's form hasn't had a chance to load by the time the C# page's Page_Load event handler fires. --Maybe this is an "order of operations" problem? At what point in the C# page's lifetime should a usercontrol's form be loaded? If anyone has any ideas or insight, I'd really appreciate it. Thanks in advance.

Read the article

divert asp.net child controls

- by Eric

Hi Folks, I am trying to create an asp.net custom control that acts as a hosting container for any other controls, similar to the existing ‘Panel’ control. Basically, I need to build a web control that groups a bunch of other controls. It will consist of a header and a body pane, similar to a normal window in desktop application. The header will contain some simple text and some JavaScript driven code that shows/hides the body pane. The body pane simply hosts any number of other controls. +------------------------------------------------------+ | User Details Show/Hide | +------------------------------------------------------+ | Name: [Eric ] | | Address: [Some where] | | Date of Birth: [01/01/1980] | | | | (any other fields goes on) | | | | | +------------------------------------------------------+ Ideally I want to create a control that packs the whole thing together, so at design time I could use the following markup. <myCtl:SuperContainer runat=”server” Title=”User Details”> <asp:label id=”lblName” runat=”server” text=”Name:”/> <asp:textbox id=”txtName” runat=”server”/> <asp:label id=”lblDOB” runat=”server” text=”Date of Birth:”/> <asp:textbox id=”txtDOB” runat=”server”/> (…other controls definition…) </myCtl:SuperContainer> I plan to include two panels in my control, one for the header and another one for the body, but as you can see, the key issue is to find a way to ‘divert’ the child controls that are defined in the markup to the body panel, instead of the default parent container. I feel it can be some how simply override (manipulate) the control property, but don’t know how to properly do so. Can any one give some idea about how to implement this ‘SuperContainer’ control? Many thank, Eric

Read the article

JS/CSS include section replacement, Debug vs Release

- by Bayard Randel

I'd be interested to hear how people handle conditional markup, specifically in their masterpages between release and debug builds. The particular scenario this is applicable to is handling concatenated js and css files. I'm currently using the .Net port of YUI compress to produce a single site.css and site.js from a large collection of separate files. One thought that occurred to me was to place the js and css include section in a user control or collection of panels and conditionally display the <link> and <script> markup based on the Debug or Release state of the assembly. Something along the lines of: #if DEBUG pnlDebugIncludes.visible = true #else pnlReleaseIncludes.visible = true #endif The panel is really not very nice semantically - wrapping <script> tags in a <div> is a bit gross; there must be a better approach. I would also think that a block level element like a <div> within <head> would be invalid html. Another idea was this could possibly be handled using web.config section replacements, but I'm not sure how I would go about doing that.

Read the article

Binding KeyUp event to Input Field

- by user306686

I am dynamically generating textboxes in ruby using <%0.upto(4) do |i| % <%= text_field_tag('relative_factor[]', @prefill_values[:relative_factor][i],:size = 6,:maxlength = 5) % <%end% it generates following HTML markup Another set of textboxes: <%0.upto(4) do |i| % <%= text_field_tag('rating_factor[]', @prefill_values[:relative_factor][i],:size = 6,:maxlength = 5) % <%end% it generates following HTML markup I have one more textbox: ..... I want to update id="rating_factor_" textboxes as the value in either id="multiple" textbox changes or id="relative_factor_" textboxes changes. E.g. id="multiple" textbox = 5 id="relative_factor_" value= 0.0 textbox = 1 id="relative_factor_" value= 1.0 textbox = 2 id="relative_factor_" value= 2.0 textbox = 3 id="relative_factor_" value= 3.0 textbox = 4 id="relative_factor_" value= 4.0 textbox = 5 I want to show (multiple multiple and relative_factor_ and show) id="rating_factor_" value= 0.0 textbox = 5 id="rating_factor_" value= 1.0 textbox = 10 id="rating_factor_" value= 2.0 textbox = 15 id="rating_factor_" value= 3.0 textbox = 20 id="rating_factor_" value= 4.0 textbox = 25 Now if user changes, id="relative_factor_" value= 1.0 textbox as 1.5 then id="rating_factor_" value= 1.0 textbox should be updated as 7.5 To achieve above goal, I tried binding #relative_factor_ to keyup event but as id is same for all i.e.#relative_factor_, it returns value for first textbox i.e. id="relative_factor_" value= 0.0. Please guide me to crack this problem. Thanks in Advance.

Read the article

Fast, Unicode-capable, cross-platform programmer's text editor that shows invisibles like ZWSP?

- by Roger_S

Our publishing workflow includes Windows and Linux machines (there are some Macs too, but not in the critical-path workflow). Many texts include both English and Khmer and are marked-up in XML. XML Copy Editor is the best cross-platform open-source XML editor I've discovered. It utilizes the Scintilla editing component, which is generally good with Unicode but which does not enable non-printing or invisible characters like U+200B (zero-width space) and U+200C (zero-width non-joiner) to be displayed. Khmer does not separate words with a space character as Western languages do, so ZWSP is used in electronic texts to enable applications to break lines easily. Ideally I'd edit the markup and the content in a single editor, but XML awareness is less important at times than being able to display invisibles. (OpenOffice.org Writer and Microsoft Word are the only two apps I know that will display ZWSP. They are not suitable for the markup and text manipulations that need to be done to prepare manuscripts for publication, unfortunately, although I guess they're fine for authoring.) I tried out a promising editor last week, but a search-and-replace regex operation that took under a second in TextPad 4.7.3 lasted over twenty seconds. So I want to mention that speed and the ability to handle large (up to 150mb) files is also a concern. Is there a good, fast, free or not too expensive text editor, with versions on Windows and Linux and maybe mac too, Unicode-aware and capable of displaying invisibles like ZWSP? That has syntax highlighting, can handle large files and is customizable enough that I won't tear my hair out in frustration? Thanks, Roger_S

Read the article

Problem creating a custom input element using FluentHtml (MVCContrib)

- by seth

Hi there, I just recently started dabbling in ASP.NET MVC 1.0 and came across the wonderful MVCContrib. I had originally gone down the path of creating some extended html helpers, but after finding FluentHTML decided to try my hand at creating a custom input element. Basically I am wanting to ultimately create several custom input elements to make it easier for some other devs on the project I'm working on to add their input fields to the page and have all of my preferred markup to render for them. So, in short, I'd like to wrap certain input elements with additional markup.. A TextBox would be wrapped in an <li /> for example. I've created my custom input elements following Tim Scott's answer in another question on here: DRY in the MVC View. So, to further elaborate, I've created my class, "TextBoxListItem": public class TextBoxListItem : TextInput<TextBox> { public TextBoxListItem (string name) : base(HtmlInputType.Text, name) { } public TextBoxListItem (string name, MemberExpression forMember, IEnumerable<IBehaviorMarker> behaviors) : base(HtmlInputType.Text, name, forMember, behaviors) { } public override string ToString() { var liBuilder = new TagBuilder(HtmlTag.ListItem); liBuilder.InnerHtml = ToString(); return liBuilder.ToString(TagRenderMode.SelfClosing); } } I've also added it to my ViewModelContainerExtensions class: public static TextBox TextBoxListItem<T>(this IViewModelContainer<T> view, Expression<Func<T, object>> expression) where T : class { return new TextBoxListItem(expression.GetNameFor(view), expression.GetMemberExpression(), view.Behaviors) .Value(expression.GetValueFrom(view.ViewModel)); } And lastly, I've added it to ViewDataContainerExtensions as well: public static TextBox TextBoxListItem(this IViewDataContainer view, string name) { return new TextBox(name).Value(view.ViewData.Eval(name)); } I'm calling it in my view like so: <%= this.TextBoxListItem("username").Label("Username:") %> Anyway, I'm not getting anything other than the standard FluentHTML TextBox, not wrapped in <li></li> elements. What am I missing here? Thanks very much for any assistance.

Read the article

Drupal theme preprocess function - primary links and suckerfish menus

- by slimcady

I have a preprocess function that works fine when the menu is single level list. However I would like it to work w/ suckerfish menus. I want to add a class to the top level menu item so that I can style it. This is the code I used for the single level menu: function cti_flex_preprocess_page(&$vars, $hook) { // Make a shortcut for the primary links variables $primary_links = $vars['primary_links']; // Loop thru the menu, adding a new class for CSS selectors $i = 1; foreach ($primary_links as $link => $attributes){ // Append the new class to existing classes for each menu item $class = $attributes['attributes']['class'] . " item-$i"; // Add revised classes back to the primary links temp variable $primary_links[$link]['attributes']['class'] = $class; $link['title'] = '<span class="hide">' . check_plain($link['title']) . '</span>'; $i++; } // end the foreach loop // reset the variable to contain the new markup $vars['primary_links'] = $primary_links; } I've been trying to use the menu_tree() function to no avail, for example: function cti_flex_preprocess_page(&$vars, $hook) { // Make a shortcut for the primary links variables $primary_links = $vars['primary_links']; // Loop thru the menu, adding a new class for CSS selectors $i = 1; foreach ($primary_links as $link => $attributes){ // Append the new class to existing classes for each menu item $class = $attributes['attributes']['class'] . " item-$i"; // Add revised classes back to the primary links temp variable $primary_links[$link]['attributes']['class'] = $class; $link['title'] = '<span class="hide">' . check_plain($link['title']) . '</span>'; $i++; } // end the foreach loop // reset the variable to contain the new markup $vars['primary_links_tree'] = menu_tree(variable_get('menu_primary_links_source', '$primary_links')); } Any ideas would be greatly appreciated.

Read the article

Dojo StackContainer children are not resizing on browser maximise/restore

- by Andy

Hi. I have the following nested layout in a dojo 1.4 app: BorderContainer 1 -- Stack Container 1 ----BorderContainer 2 ----BorderContainer 3 The StackContainer is sized with width and height 100%. When I resize the browser window using maximise/restore, the StackContainer correctly resizes to the center region of it's parent BorderContainer. The problem I have is that the StackContainer children (BorderContainer 2 and 3) do not get resized to the StackContainer's contentBox. Is there something special you have to do to force a resize of StackContainer children? I have tried calling StackContainer1.resize() but this makes no difference. Thanks in advance. Additional information: Thanks for the reply peller. The widget hierachy that contains the StackContainer is actually a custom widget, so the StackContainer is not actually in a BorderContainer directly, but has its height and width explicitly set to 100%. This works and the StackContainer is resized correctly on browser maximise. The direct children of the stackcontainer are BorderContainers and it is these BorderContainers that do not get resized when the StackContainer is resized. One point to note is that when the StackContainer is created in markup, the stackcontainer children are empty divs. These divs are then used as placeholders for custom widget creation, e.g. var widget = new com.company.widget(params, placeholderDiv); where placeholderDiv is a direct child of the StackContainer in markup. Should I be adding the programatically created 'widget' to the stackcontainer using addChild instead?

Read the article

Why does the '#weight' property sometimes not have any effect in Drupal forms?

- by Adrian

Hello, I'm trying to create a node form for a custom type. I have organic groups and taxonomy both enabled, but want their elements to come out in a non-standard order. So I've implemented hook_form_alter and set the #weight property of the og_nodeapi subarray to -1000, but it still goes after taxonomy and menu. I even tried changing the subarray to a fieldset (to force it to actually be rendered), but no dice. I also tried setting $form['taxonomy']['#weight'] = 1000 (I have two vocabs so it's already being rendered as a fieldset) but that didn't work either. I set the weight of my module very high and confirmed in the system table that it is indeed the highest module on the site - so I'm all out of ideas. Any suggestions? Update: While I'm not exactly sure how, I did manage to get the taxonomy fieldset to sink below everything else, but now I have a related problem that's hopefully more manageable to understand. Within the taxonomy fieldset, I have two items (a tags and a multi-select), and I wanted to add some instructions in hook_form_alter as follows: $form['taxonomy']['instructions'] = array( '#value' => "These are the instructions", '#weight' => -1, ); You guessed it, this appears after the terms inserted by the taxonomy module. However, if I change this to a fieldset: $form['taxonomy']['instructions'] = array( '#type' => 'fieldset', // <-- here '#title' => 'Instructions', // <-- and here for good measure '#value' => "These are the instructions", '#weight' => -1, ); then it magically floats to the top as I'd intended. I also tried textarea (this also worked) and explicitly saying markup (this did not). So basically, changing the type from "markup" (the default IIRC) to "fieldset" has the effect of no longer ignoring its weight.

Read the article

Spring Form: Submitting extra parameter on submit buttons

- by theringostarrs

Hi, I am working on a form with a bunch of selection criteria that will generate a report when the form is submitted. I also have a number of different reports that can be generated form this same criteria, and want the type of report to be selectable by using a tab system where each tab clicked on submits the form and generates the correct report. I was to do this by passing an extra parameter into the form to switch onto the right form type I am new to Spring, and from the guidance of an elder was told to use an input button for each tab with the following approximate syntax: <input type="submit" name="${form.selectionValues.tabSelection}" value="1" /> tabSelection form property of the SelectionValues object is not being set. I wasn't surprised ;) DIdn't think this would work. So I am wondering how can I can submit a post back from a button in Spring containing the form values plus an extra tabSelection parameter and value? How should I mark up this mechanism? Will I have to do anything to the form controller to register this extra parameter? The original markup I was using to build this page, was using HTML anchor tags instead of buttons for the tab links, which would be much better for the CSS, is there any way to trigger a full form submit using an anchor href? I know this will be a GET request instead of a POST, and not associated with the form.. so I dont expect this to work.. just trying to think of solutions! I would prefer to use the priginal markup, as the styles are there. Any help would be appreciated

Read the article

Good Replacement for User Control?

- by David Lively

I found user controls to be incredibly useful when working with ASP.NET webforms. By encapsulating the code required for displaying a control with the markup, creation of reusable components was very straightforward and very, very useful. While MVC provides convenient separation of concerns, this seems to break encapsulation (ie, you can add a control without adding or using its supporting code, leading to runtime errors). Having to modify a controller every time I add a control to a view seems to me to integrate concerns, not separate them. I'd rather break the purist MVC ideology than give up the benefits of reusable, packaged controls. I need to be able to include components similar to webforms user controls throughout a site, but not for the entire site, and not at a level that belongs in a master page. These components should have their own code not just markup (to interact with the business layer), and it would be great if the page controller didn't need to know about the control. Since MVC user controls don't have codebehind, I can't see a good way to do this. I've searched previous SO questions, and have yet to find a good answer. Options so far In an attempt to avoid turning the comments section into a discussion... RenderAction This allows the view to call another controller, which will be responsible for interacting with the BLL and whatever data is necessary to its corresponding view. The calling view needs to be aware of the sub controller. This seems to provide a nice way to encapsulate partial views and controls, without having to modify the calling controller. RenderPartial The calling controller is still responsible for executing whatever code is associated with the partial view, and making sure that the model passed to the partial view contains the data it expects. Effectively, modifying the partial view potentially means modifying the calling controller. Annoying especially if this is used in multiple places. Portable Areas Place each control in its own project/area?

Read the article

Chrome renders button links completely screwed up when placed inside a paragraph

- by Ferdy

I am fairly proficient in CSS but now I am running into a very strange rendering issue in Google Chrome 9. I am trying to create some fancy looking link buttons (basically heavily styled anchors). Here is some example markup: <a href="" class="button"> <figure class="sprite icon icon_back"></figure> Link button with icon</a> This markup may look a litte strange to you, there's a few things you should know: I am using HTML5's figure class to include an icon as part of the button. I have the proper reset CSS applied and Chrome can render this tag for sure. Instead of actually pointing to an image I am applying CSS classes to the figure element. Within the CSS I am using the spriting technique to show the correct portion of a single large sprite image. All of this is working fine in Firefox, and actually also in Chrome. The correct rendering can be seen in the following image: It renders like that in both Firefox and Chrome. Here comes the problem, if I place such a button within paragraph tags <p></p> this is what happens in Chrome only: Notice how the button is ripped apart? Only in Chrome and only when placed inside a paragraph. It gets even stranger: this only happens for the first button inside the paragraph, if I would place three buttons inside a paragraph, only the 1st one is screwed up. Your first question would probably be about the CSS. It is rather verbose so hereby a temporary link to the page in question: Edit: link to live page removed, was only temporary for problem inspection.

Read the article

Why wouldn't an embedded silverlight control work in a page?

- by rsteckly

Hi, I have a silverlight application project in my solution. The other project is a web application project that has a .xap file in ClientBin. When I created the silverlight project, it asked if I wanted the asp.net application to host it (and I said yes). In the root directory, there is a test page for the silverlight control. That loads the control. In another directory, I insert the SAME asp markup to get the silverlight control to launch again. Nothing happens. Why would the silverlight launch on one page and not on the other? Can people help point me to documentation about dependencies that I might not know about? I've put a reference to Silverlight.js on the page as well. Here's the markup: <div id="silverlightControlHost"> <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> <param name="source" value="../ClientBin/Editor.xap"/> <param name="onError" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value="3.0.40818.0" /> <param name="autoUpgrade" value="true" /> <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none"> <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/> </a> </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div> </div>

Read the article

ASP.NET: I'm getting strange output when styling a Label control...

- by pkiyan

.labelOne { border-width:thin; border-style:solid; border-color:Red; background-color:Silver; } <asp:Label ID="Label1" runat="server" CssClass="labelOne"> <h1>Hello world</h1> </asp:Label> <br /><br /> <asp:Label ID="Label2" runat="server" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" BackColor="Silver"> <h1>Hello world</h1> </asp:Label> Hello. In the code sample above I have 2 Label controls with their contents set to an h1 header tag. The first Label is styled using css, and the second with the Label's inline properties (both Labels have identical styling). But the first Label doesn't output properly, it's border is broken. If I replace the first Label's markup with plain "Hello world" text it renders properly, but it breaks again when I use markup. Can someone explain why this is happening?

Read the article

jquery select one class from many

- by simnom

Hi, I'm trying to achieve the following functionality. Within a form I have multiple fields with the class name .inputField if one of these fields is selected then the div associated with that element should be shown on focus and hidden on blur. However, when I implement the code below on selecting the second element the class is applied to both. Not sure where I'm going wrong?!?!? html markup: <form class="friendlyForm" name="friendlyForm" id="friendlyForm"> <ul> <li> <label for="testField">Test field</label> <input name="testField" value="here" class="inputField" id="testField" /> <div class="helper" style="display: none;">helper text here</div> </li> <li> <label for="testField">Test field2</label> <input name="testField2" value="here" class="inputField" id="testField2" /> <div class="helper" style="display: none;">helper text here</div> </li> </ul> </form> jQuery markup: $('.friendlyForm').find('.inputField').each(function(i) { $(this).blur(); $(this).focus(function() { //Add the focus class and fadeIn the helper div $(this).parent().addClass('focus'); $(this).parent().parent().find('.helper').fadeIn(); }); $(this).blur(function () { //Remove the focus class and fadeOut helper div $(this).parent().removeClass('focus'); $(this).parent().parent().find('.helper').fadeOut(); }); }); Any pointers here would be greatly appreciated. Thanks

Read the article

Regex to GENERATE thumbnails!?!?! (but that's crazy!)

- by CryptoMonkey

Hello everyone! So here is my situation, and the solution that I've come up with to solve the problem. I have created an application that includes TinyMCE to allow users to create HTML content for publishing. The user can include images in their markup, and drag/resize those images effecting the final Width/Height attributes in the IMG tag. This is all great, the users can include images and resize/relocate them to their desired appearance. But one big problem is that I am now sending a (possibly) much larger image to the client, only to have the browser resize the image into the requested Width/Height attributes. All that bandwidth and lost load time.... So my solution is to pre-process my users markup content, scanning all of the IMG tags and parsing out the Height/Width/Src attributes. Then set each img's SRC tag to a phpThumb request with the parsed Height/Width passed into the thumbnails URL. This will create my reduced size image (optimising bandwidth at the expense of CPU and caching). What do you think about this solution? I've seen other posts where people were using mod_rewrite to do something similar, but I want to effect the content on the page service and not manipulate the image requests as they're being received. .... Any thoughts about this design? I need some help with the fine details as my regex skills need some work, but I'm very short on time and promise to pay my technical knowledge debt soon. To make the regex's easier, I can be sure of some things. Only img tags that need this processing will have an existing width="" height="" attributes (with the double quotes, and lower cased text, but I suppose matching the text case insensitive would be better if TinyMCE changes) So a regex to match only the necessary Img tags, and maybe another three regex's to extract the src, the width, and the height? Thanks everyone.

Read the article

ASP.NET Custom/User Control With Children

- by Bob Fincheimer

I want a create a custom/user control that has children (NOT a template control). For Example, I want my control to have the following markup: <div runat="server" id="div"> <label runat="server" id="label"></label> <div class="field">  </div> </div> and when I want to use it on a page I simply: <ctr:MyUserControl runat="server" ID="myControl"> <span>This is a child</span> <div>And another <b>child</b> </ctr:MyUserControl> The child controls inside my user control will be inserted into my user control somewhere. What is the best way to accomplish this. The functionality is similar to a asp:PlaceHolder but I want to add a couple more options as well as additional markup and the such. Also the child controls still need to be able to be accessed by the page.

Read the article

wpautop() - when shortcode attributes are on new lines -breaks args array

- by Luca

I have a custom shortcode tag with a few attributes, and I would like to be able to display its attributes on new lines - to make it more readable to content editors: [component attr1 ="value1" attr2 ="value of the second one" attr3 ="another" attr4 ="value" ... attrN ="valueN"] The reason behind this requirement is that a few attributes might be quite verbose in content. Unfortunately, wpautop() adds some nasty extra markup that breaks the args array like this (using php print_r($args)): Array ( [0] => attr1 [1] => ="value1" /> [3] => attr2 = [4] => "value [5] => of [6] => the [7] => second [8] => one" /> [10] => "" //...and more like this) I've tried with the attributes inline: [component attr1 ="value1" attr2 ="value of the second one" ="value"... attrN ="valueN"] and the output is as expected: Array ( [attr1] => value1 [attr2] => value of the second one [attr3] => //...and so on) is there any way to have the attributes intented and avoid that extra markup that breaks the $args array?

Read the article

matching images inside a link in regex

- by user225269

What is wrong with regex pattern that I created: $link_image_pattern = '/\<a\shref="([^"]*)"\>\<img\s.+\><\/a\>/'; preg_match_all($link_image_pattern, $str, $link_images); What I'm trying to do is to match all the links which has images inside of them. But when I try to output $link_images it contains everything inside the first index: <pre> <?php print_r($link_images); ?> </pre> The markup looks something like this: Array ( [0] = Array ([0] = " <p> </p> <p><strong><a href="url">Title</a></strong></p> <p>Desc</p> <p><a href="{$image_url2}"><img style="background-image:none;padding-left:0;padding-right:0;display:inline;padding-top:0;border-width:0;" title="image" border="0" alt="image" src="{$image_url2}" width="569" height="409"></a></p> But when outputting the contents of the matches, it simply returns the first string that matches the pattern plus all the other markup in the page like this: <a href="{$image_url}"><img style="background-image:none;padding-left:0;padding-right:0;display:inline;padding-top:0;border-width:0;" title="image" border="0" alt="image" src="{$image_url}" width="568" height="347"></a></p> <p> </p> <p><strong><a href="url">Title</a></strong></p> <p>Desc</p> <p><a href="{$image_url2}"><img style="background-image:none;padding-left:0;padding-right:0;display:inline;padding-top:0;border-width:0;" title="image" border="0" alt="image" src="{$image_url2}" width="569" height="409"></a></p>")

Read the article

Corrupt output with an HttpModule

- by clementi

I have an HttpModule that looks at the query string for a parameter called "cmd" and executes one of a small set of predefined commands that display server stats in XML. For example, http://server01?cmd=globalstats. Now, on rare occasions, like once out of hundreds of times, I will get corrupt output like this:  <stats> <ServerName>SERVER01</ServerName> <StackName>Search</StackName> <TotalRequests>945</TotalRequests>  <!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> ...the rest of the home page markup... (Remove the comments in the example above.) I'm not all that familiar with HttpModules and the IIS pipeline, but could this be a threading problem? Or, what else?

Read the article

Setting CSS attributes on Change using jQuery

- by Nick B

I want to change css visibility and display attributes using jQuery on click when the state of another div's visibility attribute changes. (Many apologies for the obfuscated markup, but needing to manipulate someone else's construction): There are four instances of [data-label="Checkbox"] [data-label="Checked"] in this page. I want to set [data-label="trash"] and [data-label="Sort Options"] to visibility: visible; display: [empty value] when any of the [data-label="Checkbox"] [data-label="Checked"]'s attributes changes to 'visibility', 'visible'. Else, if none of [data-label="Checkbox"] [data-label="Checked"]'s have the attribute 'visibility', 'visible', I want to set [data-label="trash"] and [data-label="Sort Options"] back to their initial states: display: none; visibility: hidden;. Here's the markup: <div data-label="Sort Options" style="display: none; visibility: hidden;"> <div data-label="trash" style="display: none; visibility: hidden;"></div> </div> <div data-label="Checkbox"> <div data-label="Unchecked"></div> <div data-label="Checked" style="display: none; visibility: hidden;"></div> </div> Here is what I have tried unsuccessfully: $('[data-label="Checkbox"]').click(function() { if ('[data-label="Checkbox"] [data-label="Checked"]').css('visibility', 'visible') { $('[data-label="trash"], [data-label="Sort Options"]').css({'display': '', 'visibility': 'visible'}); } else { $('[data-label="trash"], [data-label="Sort Options"]').css({'display': 'none', 'visibility': 'hidden'}); } }); Any help would be greatly appreciated! Thanks

Read the article

IE 7 issues: Super simple page - TD height not taking effect

- by Anthony

This is my markup: <!DOCTYPE HTML> <html> <head> <title>Test title</title> <style type="text/css"> * { margin:0px auto; padding:0px; } html,body { height:100%; width:100%; } </style> </head> <body> <table cellspacing="0" cellpadding="0" style="width: 100%; height: 100%;"> <tr> <td style="height:55px;background:#CCC;" valign="top"> <h1>Header</h1> </td> </tr> <tr> <td valign="top"> Content @RenderBody() </td> </tr> <tr> <td style="height:85px;background:#CCC;" valign="bottom"> Footer </td> </tr> </table> </body> </html> Can anybody tell me why td height is not taking effect? This same markup works in IE9. Is it due to the HTML5 doctype?

Read the article

Using multiple column layout with HTML 5 and CSS 3

- by nikolaosk

This is going to be the fourth post in a series of posts regarding HTML 5. You can find the other posts here , here and here.In this post I will provide a hands-on example with HTML 5 and CSS 3 on how to create a page with multiple columns and proper layout.I will show you how to use CSS 3 to create columns much easier than relying on DIV elements and the float CSS rule.I will also show you how to use browser-specific prefix rules (-ms for Internet Explorer and -moz for Firefox ) for browsers that do not fully support CSS 3.In order to be absolutely clear this is not (and could not be) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.Another excellent resource is HTML 5 Doctor.Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here.I will create a simple page with information about HTML 5, CSS 3 and JQuery. This is the full HTML 5 code. <!DOCTYPE html><html lang="en"> <head> <title>HTML 5, CSS3 and JQuery</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="header"> <h1>Learn cutting edge technologies</h1> <p>HTML 5, JQuery, CSS3</p> </div> <div id="main"> <div id="mainnews"> <div> <h2>HTML 5</h2> </div> <div> <p> HTML5 is the latest version of HTML and XHTML. The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML. </p> <div class="quote"> <h4>Do More with Less</h4> <p> jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. </p> </div> <p> The HTML5 test(html5test.com) score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications. Even though the specification isn't finalized yet, all major browser manufacturers are making sure their browser is ready for the future. Find out which parts of HTML5 are already supported by your browser today and compare the results with other browsers. The HTML5 test does not try to test all of the new features offered by HTML5, nor does it try to test the functionality of each feature it does detect. Despite these shortcomings we hope that by quantifying the level of support users and web developers will get an idea of how hard the browser manufacturers work on improving their browsers and the web as a development platform.</p> </div> </div> <div id="CSS"> <div> <h2>CSS 3 Intro</h2> </div> <div> <p> Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL. </p> </div> </div> <div id="CSSmore"> <div> <h2>CSS 3 Purpose</h2> </div> <div> <p> CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). </p> </div> </div> </div> <div id="footer"> <p>Feel free to google more about the subject</p> </div> </body> </html> The markup is very easy to follow. I have used some HTML 5 tags and the relevant HTML 5 doctype.The CSS code (style.css) follows body{ line-height: 30px; width: 1024px; background-color:#eee; } p{ font-size:17px; font-family:"Comic Sans MS" } p,h2,h3,h4{ margin: 0 0 20px 0; } #main, #header, #footer{ width: 100%; margin: 0px auto; display:block; } #header{ text-align: center; border-bottom: 1px solid #000; margin-bottom: 30px; } #footer{ text-align: center; border-top: 1px solid #000; margin-bottom: 30px; } .quote{ width: 200px; margin-left: 10px; padding: 5px; float: right; border: 2px solid #000; background-color:#F9ACAE; } .quote :last-child{ margin-bottom: 0; } #main{ column-count:2; column-gap:20px; column-rule: 1px solid #000; -moz-column-count: 2; -webkit-column-count: 2; -moz-column-gap: 20px; -webkit-column-gap: 20px; -moz-column-rule: 1px solid #000; -webkit-column-rule: 1px solid #000; } All the rules in the css code are pretty simple. The layout is achieved with that CSS rule #main{ column-count:2; column-gap:20px; column-rule: 1px solid #000; -moz-column-count: 2; -webkit-column-count: 2; -moz-column-gap: 20px; -webkit-column-gap: 20px; -moz-column-rule: 1px solid #000; -webkit-column-rule: 1px solid #000; Do note the column-count,column-gap and column-rule properties. These properties make the two column layout possible.Please have a look at the picture below to see why I used prefixes for Chrome (webkit) and Firefox(moz).It clearly indicates that the CSS 3 column layout are not supported from Firefox and Chrome. Finally I test my simple HTML 5 page using the latest versions of Firefox,Internet Explorer and Chrome. In my machine I have installed Firefox 15.0.1.Have a look at the picture below to see how the page looks I have installed Google Chrome 21.0 in my machine.Have a look at the picture below to see how the page looks Have a look at the picture below to see how my page looks in IE 10. My page looks the same in all browsers. Hope it helps!!!

Read the article

CodePlex Daily Summary for Sunday, October 30, 2011

CodePlex Daily Summary for Sunday, October 30, 2011Popular ReleasesKoober: Koober - The Ebook Creator 0.2: The official release of Koober as Open source. Koober is a ebook creator for Windows, and Koob Reader is the reader.?????????????: ??????????????: ??????????????VidCoder: 1.2.0: Updated to HandBrake svn 4311. Refactored to read in list of encoders from HandBrake itself. Added ffaac, FLAC audio and ffmpeg2 video. Reworked audio encoding UI: removed grid and gave each encoding more vertical space. Added audio quality targeting and compression. Added status messages. Added messages for a few events (encode start/stop, playing a preview clip, update available, update download finished). Made source and destination path UI elements smarter about what parts they cut ...patterns & practices: Enterprise Library Contrib: Enterprise Library Contrib - 5.0 (Oct 2011): This release of Enterprise Library Contrib is based on the Microsoft patterns & practices Enterprise Library 5.0 core and contains the following: Common extensionsTypeConfigurationElement<T> - A Polymorphic Configuration Element without having to be part of a PolymorphicConfigurationElementCollection. AnonymousConfigurationElement - A Configuration element that can be uniquely identified without having to define its name explicitly. Data Access Application Block extensionsMySql Provider - ...Network Monitor Open Source Parsers: Network Monitor Parsers 3.4.2748: The Network Monitor Parsers packages contain parsers for more than 400 network protocols, including RFC based public protocols and protocols for Microsoft products defined in the Microsoft Open Specifications for Windows and SQL Server. NetworkMonitor_Parsers.msi is the base parser package which defines parsers for commonly used public protocols and protocols for Microsoft Windows. In this release, NetowrkMonitor_Parsers.msi continues to improve quality and fix bugs. It has included the fo...Duckworth Lewis Professional Edition Calculator: DLcalc 3.0: DLcalc 3.0 can perform Duckworth/Lewis Professional Edition calculations 100% accurately. It also produces over-by-over and ball-by-ball PAR score tables.Folder Bookmarks: Folder Bookmarks 2.2.0.1: In this version: Custom Icons - now you can change the icons of the bookmarks. By default, whenever an image is added, the icon is automatically changed to a thumbnail of the picture. This can be turned off in the settings (Options... > Settings) Ability to remove items from the 'Recent' category Bugfixes - 'Choose' button in 'Edit Bookmark' now works Another bug fix: another problem in the 'Edit Bookmark' windowMedia Companion: MC 3.420b Weekly: Ensure .NET 4.0 Full Framework is installed. (Available from http://www.microsoft.com/download/en/details.aspx?id=17718) Ensure the NFO ID fix is applied when transitioning from versions prior to 3.416b. (Details here) Movies Fixed: Fanart and poster scraping issues TV Shows (Re)Added: Rebuild single show Fixed: Issue when shows are moved from original location Ability to handle " for actor nicknames Crash when episode name contains "<" (does not scrape yet) Clears fanart when switch...patterns & practices - Unity: Unity 3.0 for .NET4.5 Preview: The Unity 3.0.1026.0 Preview enables Unity to work on .NET 4.5 with both the WinRT and desktop profiles. The major changes include: Unity projects updated to target .NET 4.5. Dynamic build plans modified to use compiled lambda expressions instead of Reflection.Emit Converting reflection to use the new TypeInfo for reflection. Projects updated to work with the Microsoft Visual Studio 2011 Preview Notes/Known Issues: The Microsoft.Practices.Unity.UnityServiceLocator class cannot be use...Managed Extensibility Framework: MEF 2 Preview 4: Detailed information on this release is available on the BCL team blog.Image Converter: Image Converter 0.3: New Features: - English and German support Technical Improvements: - Microsoft All Rules using Code Analysis Planned Features for future release: 1. Unit testing 2. Command line interface 3. Automatic UpdatesAcDown????? - Anime&Comic Downloader: AcDown????? v3.6: ?? ● AcDown??????????、??????，??????????????????????，???????Acfun、Bilibili、???、???、???、Tucao.cc、SF???、?????80????，???????????、?????????。 ● AcDown???????????????????????????，???，???????????????????。 ● AcDown???????C#??，????.NET Framework 2.0??。?????"Acfun?????"。 ????32??64? Windows XP/Vista/7 ????????????? ??：????????Windows XP???,?????????.NET Framework 2.0???(x86)?.NET Framework 2.0???(x64)，?????"?????????"??? ??????????????，??????????： ??"AcDown?????"????????? ?? v3.6?? ??“????”...Path Copy Copy: 8.0: New version that mostly adds lots of requested features: 11340 11339 11338 11337 This version also features a more elaborate Settings UI that has several tabs. I tried to add some notes to better explain the use and purpose of the various options. The Path Copy Copy documentation is also on the way, both to explain how to develop custom plugins and to explain how to pre-configure options if you're a network admin. Stay tuned.MVC Controls Toolkit: Mvc Controls Toolkit 1.5.0: Added: The new Client Blocks feaure of Views A new "move" js method for the TreeViews The NewHtmlCreated js event to the DataGrid Improved the ChoiceList structure that now allows also the selection list of a dropdown to be chosen with a lambda expression Improved the AcceptViewHintAttribute controller filter. Now a client can specify not only the name of a View or Partial View it prefers, but also to receive just the rough data in Json format. Now the the SMinimum and SMaximum par...Free SharePoint Master Pages: Buried Alive (Halloween) Theme: Release Notes *Created for Halloween, you will find theme file, custom css file and images. *Created by Al Roome @AlstarRoome Features: Custom styling for web part Custom background *Screenshot https://s3.amazonaws.com/kkhipple/post/sharepoint-showcase-halloween.pngDevForce Application Framework: DevForce AF 2.0.3 RTW: PrerequisitesWPF 4.0 Silverlight 4.0 DevForce 2010 6.1.3.1 Download ContentsDebug and Release Assemblies API Documentation Source code License.txt Requirements.txt Release HighlightsNew: EventAggregator event forwarding New: EntityManagerInterceptor<T> to intercept EntityManger events New: IHarnessAware to allow for ViewModel setup when executed inside of the Development Harness New: Improved design time stability New: Support for add-in development New: CoroutineFns.To...NicAudio: NicAudio 2.0.5: Minor change to accept special DTS stereo modes (LtRt, AB,...)NDepend TFS 2010 integration: version 0.5.0 beta 1: Only the activity and the VS plugin are avalaible right now. They basically work. Data types that are logged into tfs reports are subject to change. This is no big deal since data is not yet sent into the warehouse.Windows Azure Toolkit for Windows Phone: Windows Azure Toolkit for Windows Phone v1.3.1: Upgraded Windows Azure projects to Windows Azure Tools for Microsoft Visual Studio 2010 1.5 – September 2011 Upgraded the tools tools to support the Windows Phone Developer Tools RTW Update SQL Azure only scenarios to use ASP.NET Universal Providers (through the System.Web.Providers v1.0.1 NuGet package) Changed Shared Access Signature service interface to support more operations Refactored Blobs API to have a similar interface and usage to that provided by the Windows Azure SDK Stor...DotNetNuke® FAQ: 05.00.00: FAQ (Frequently Asked Questions) 05.00.00 will work for any DNN version 5.6.1 and up. It is the first version which is rewritten in C#. The scope of this update is to fix all known issues and improve user interface. Please review and rate this release... (stars are welcome)BUG FIXESManage Categories button text was not localized Edit/Add FAQ Entry: button text was not localized ENHANCEMENTSAdded an option to select the control for category display: Listbox with checkboxes (flat category ...New ProjectsalphaCards: Digitale LernkarteiBinary Code Interpreter: The Binary Code Interpreter is a small and funny programming languaage. This interpreter works a bit like a Turing Machine.Buscar ciudades: This is the source code for the application "Buscar ciudades" published in the Windows Phone Marketplace. CamOnWeb - Componente para WebCam: Este projeto tem como objetivo o desenvolvimento um componente para captura e exibição de videos da webcam. Compare.Net: Compare.Net is a configurable application to compare and reconclie from different sources. C# WPF applcation targeting .Net 4CSGame: Academic project for our studies. Subject "Client -server technology"curbside: curbsideDanish Language Pack for Community Server: Danish Language Packs for Community Server 2.1 and 2007. At its inception, this project contains quite incomplete translations to Danish. This project provides a common resource where all interested parties can gradually improve on this language pack. Please join to improve the contents. The source code tree contains two major folders: One for Community Server 2.1 and one for Community Server 2007.Dependency Variable Lib: ??????????????????、?????????????????????。（???????、?????????????ｗ） ???、「??×??＝??」???????????????、????????、????????、???「??×??」????????????????????????????????????。 FreedBack: FreedBack allows you to quickly and easily embed a configurable feedback form into any web application. It can be a standalone application that you install and deploy, then embed a bit of script into existing apps to implement feedback, or you can make it part of your MVC App.Hageveld - NieuwsModule (Chris' Tutorial: A news article manager made for educational purposes.Idea Resto: Aplicación para restaurantes.jqgridmvcgeneration: codesmith template that creates js, html and asp.net mvc server side json server for a jqgrid -based table on a arbitratrary database table. The code includes pagination and server side sorting. Jqgrid is a great jquery extension that provides an ajax-enabled fully customizable interactive table based on server side data. However, the actual coding can be a bit tedious and cryptic. This project provides a template base approach that basically performs two tasks: 1. creates a client si...MyClassMapper: A simple configurable classmapper for mapping ClassA to ClassB and vice versa, the ideas are borrowed from the Dozer project (http://dozer.sourceforge.net). Most code is based on 'Dynamic Access' code from Hongju Cao <hjcao_wei@hotmail.com> (All that code is located in the "DynamicAccess" sub-directory from the project.)NavigateTo Providers: This project is a collection of NavigateTo providers for Visual Studio 2010. NObsidian: A proxy component to access Obisidian Portal API from .NetNSession: The objective of this project is to allow ASP Classic to access ASP.NET out-of-process session stores in the same way that ASP.NET accesses them, and thus share the session state with ASP.NET.NTextile: NTextile is a lightweight, humane web compatible markup generator. It generates valid XHTML output using simple easy to remember conventions and text characters (a.k.a modifiers), to markup plain text. NTextile is especially useful to provide quick and valid markup for .NET web applications. For e.g. wikis, blogs, online forums, content management systems etc. This project was inspired by Dean Allen’s original Textile features, as included in the Textpattern content management application. T...OpenTasksBehaviorsLibrary for Windows Phone: Open Tasks Behavior for Windows Phone *OpenWebBrowserTask *OpenMediaLauncherTaskPowerShell Cmdlet Sample: PowerShell Cmdlet SamplePrismEx: PrismEx is a library of helpers and extension methods to allow developers to more easily develop and test Prism applications. QuickDelete: A Windows Explorer add-on to delete files and folders very quickly, much more so than the usual Explorer command. Works on Windows XP or later. Currently in EXPERIMENTAL state. No releases have been produced yet.Quiz Module for DotNetNuke: This is a module that allows you to quickly and easily provide a quiz that can be taken by the visitors on your DotNetNuke website.RaptorDB - The Key Value Store: Smallest, fastest embedded nosql persisted dictionary using b+tree or MurMur hash indexing. (Now with Hybrid WAH bitmap indexes)Rockin CMS-LMS Combo: RockinCmsLms Combo provides a great way for users to build their content and training sites with one great tool. It will be developed with C# 4.0-4.5, Silverlight, JQuery, and ASP.Net and MVC 3.0 with Razor. This project will demonstrate how to use todays technologies to build solutions that last. We may have 2 versions - one with a local db and one with a Windows Azure storage solution. Suggest using the Web Platform Installer to get all of the components.SandKeeper - Time Tracking Addin for Outlook 2010 tasks: SandKeeper is an Outlook Addin that enables you to track time for your tasks.Share: Share is a new web-based content management system. For more information about this project, please visit http://blog.aphysoft.com.SharePoint 2010 ViewEdit Group By Content Type: A simple project that injects JavaScript into the ribbon bar area to add "Content Type" as a choice on the ViewEdit.aspx page. With this, users can once again create views that group by Content Type without having to use SharePoint Designer 2010.Simple Merge Sort: This is a simple implementation of Merge-Sort, using to sort an Array of Integers.UKag: Unity3D?Kr2/KAG3??moduleUsingLinq: TestUtec Logger: Utec Logger is meant to be used the Turbo XS UTEC and UTEC Delta. It is simply a data logger application, it will auto logged based on pre defined conditionals. It also takes this information and displays it in a two dimensional table, averaging the values appropriately to ease of log analysis.WOXalizer: Fork of WOX project. http://woxserializer.sourceforge.net/Zeta Backup Validator: A small .NET 3.5 console application that helps you verifying whether your backups succeed by checking files and folders with various configurable rules (folder size, file age, etc.).Zeta Links: A web application for generating and measuring shortcut hyperlinks, similar to bit.ly.Zombie Slayer v1.0: Zombie Slayer v1.0 is an action first person shooter where players can try and survive a never-ending wave of zombies for as long as they can while a timer keeps track of how long they survived and posts times online from longest to shortest.?????????????: ??????????????????，????。

Read the article

Using CSS3 media queries in HTML 5 pages

- by nikolaosk

This is going to be the seventh post in a series of posts regarding HTML 5. You can find the other posts here , here , here, here , here and here. In this post I will provide a hands-on example on how to use CSS 3 Media Queries in HTML 5 pages. This is a very important feature since nowadays lots of users view websites through their mobile devices. Web designers were able to define media-specific style sheets for quite a while, but have been limited to the type of output. The output could only be Screen, Print .The way we used to do things before CSS 3 was to have separate CSS files and the browser decided which style sheet to use. Please have a look at the snippet below - HTML 4 media queries <link rel="stylesheet" type="text/css" media="screen" href="styles.css"> <link rel="stylesheet" type="text/css" media="print" href="print-styles.css"> ?he browser determines which style to use. With CSS 3 we can have all media queries in one stylesheet. Media queries can determine the resolution of the device, the orientation of the device, the width and height of the device and the width and height of the browser window.We can also include CSS 3 media queries in separate stylesheets. In order to be absolutely clear this is not (and could not be) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School. Another excellent resource is HTML 5 Doctor. Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr. In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here. Before I go on with the actual demo I will use the (http://www.caniuse.com) to see the support for CSS 3 Media Queries from the latest versions of modern browsers. Please have a look at the picture below. We see that all the latest versions of modern browsers support this feature. We can see that even IE 9 supports this feature. Let's move on with the actual demo. This is going to be a rather simple demo.I create a simple HTML 5 page. The markup follows and it is very easy to use and understand.This is a page with a 2 column layout. <!DOCTYPE html><html lang="en"> <head> <title>HTML 5, CSS3 and JQuery</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="header"> <h1>Learn cutting edge technologies</h1> <p>HTML 5, JQuery, CSS3</p> </div> <div id="main"> <div id="mainnews"> <div> <h2>HTML 5</h2> </div> <div> <p> HTML5 is the latest version of HTML and XHTML. The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML. </p> <div class="quote"> <h4>Do More with Less</h4> <p> jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. </p> </div> <p> The HTML5 test(html5test.com) score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications. Even though the specification isn't finalized yet, all major browser manufacturers are making sure their browser is ready for the future. Find out which parts of HTML5 are already supported by your browser today and compare the results with other browsers. The HTML5 test does not try to test all of the new features offered by HTML5, nor does it try to test the functionality of each feature it does detect. Despite these shortcomings we hope that by quantifying the level of support users and web developers will get an idea of how hard the browser manufacturers work on improving their browsers and the web as a development platform.</p> </div> </div> <div id="CSS"> <div> <h2>CSS 3 Intro</h2> </div> <div> <p> Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL. </p> </div> </div> <div id="CSSmore"> <div> <h2>CSS 3 Purpose</h2> </div> <div> <p> CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). </p> </div> </div> </div> <div id="footer"> <p>Feel free to google more about the subject</p> </div> </body> </html> The CSS code (style.css) follows body{ line-height: 30px; width: 1024px; background-color:#eee; } p{ font-size:17px; font-family:"Comic Sans MS" } p,h2,h3,h4{ margin: 0 0 20px 0; } #main, #header, #footer{ width: 100%; margin: 0px auto; display:block; } #header{ text-align: center; border-bottom: 1px solid #000; margin-bottom: 30px; } #footer{ text-align: center; border-top: 1px solid #000; margin-bottom: 30px; } .quote{ width: 200px; margin-left: 10px; padding: 5px; float: right; border: 2px solid #000; background-color:#F9ACAE; } .quote :last-child{ margin-bottom: 0; } #main{ column-count:2; column-gap:20px; column-rule: 1px solid #000; -moz-column-count: 2; -webkit-column-count: 2; -moz-column-gap: 20px; -webkit-column-gap: 20px; -moz-column-rule: 1px solid #000; -webkit-column-rule: 1px solid #000; } Now I view the page in the browser.Now I am going to write a media query and add some more rules in the .css file in order to change the layout of the page when the page is viewed by mobile devices. @media only screen and (max-width: 480px) { body{ width: 480px; } #main{ -moz-column-count: 1; -webkit-column-count: 1; } } I am specifying that this media query applies only to screen and a max width of 480 px. If this condition is true, then I add new rules for the body element. I change the number of columns to one. This rule will not be applied unless the maximum width is 480px or less. As I decrease the size-width of the browser window I see no change in the column's layout. Have a look at the picture below. When I resize the window and the width of the browser so the width is less than 480px, the media query and its respective rules take effect.We can scroll vertically to view the content which is a more optimised viewing experience for mobile devices. Have a look at the picture below Hope it helps!!!!

Search Results

Search found 4664 results on 187 pages for 'markup extensions'.

Page 62/187 | < Previous Page | 58 59 60 61 62 63 64 65 66 67 68 69 | Next Page >

- by ks78

- by Eric

- by Bayard Randel

- by user306686

- by Roger_S

- by seth

- by slimcady

- by Andy

- by Adrian

- by theringostarrs

- by David Lively

- by Ferdy

- by rsteckly

- by pkiyan

- by simnom

- by CryptoMonkey

- by Bob Fincheimer

- by Luca

- by user225269

- by clementi

- by Nick B

- by Anthony

- by nikolaosk

- by nikolaosk

< Previous Page | 58 59 60 61 62 63 64 65 66 67 68 69 | Next Page >