Search Results

Search found 13454 results on 539 pages for 'left'.

Page 46/539 | < Previous Page | 42 43 44 45 46 47 48 49 50 51 52 53  | Next Page >

  • Move <option> to top of list with Javascript

    - by Adam
    I'm trying to create a button that will move the currently selected OPTION in a SELECT MULTIPLE list to the top of that list. I currently have OptionTransfer.js implemented, which is allowing me to move items up and down the list. I want to add a new function function MoveOptionTop(obj) { ... } Here is the source of OptionTransfer.js // =================================================================== // Author: Matt Kruse // WWW: http://www.mattkruse.com/ // // NOTICE: You may use this code for any purpose, commercial or // private, without any further permission from the author. You may // remove this notice from your final code if you wish, however it is // appreciated by the author if at least my web site address is kept. // // You may *NOT* re-distribute this code in any way except through its // use. That means, you can include it in your product, or your web // site, or any other form where the code is actually being used. You // may not put the plain javascript up on your site for download or // include it in your javascript libraries for download. // If you wish to share this code with others, please just point them // to the URL instead. // Please DO NOT link directly to my .js files from your site. Copy // the files to your server and use them there. Thank you. // =================================================================== /* SOURCE FILE: selectbox.js */ function hasOptions(obj){if(obj!=null && obj.options!=null){return true;}return false;} function selectUnselectMatchingOptions(obj,regex,which,only){if(window.RegExp){if(which == "select"){var selected1=true;var selected2=false;}else if(which == "unselect"){var selected1=false;var selected2=true;}else{return;}var re = new RegExp(regex);if(!hasOptions(obj)){return;}for(var i=0;i(b.text+"")){return 1;}return 0;});for(var i=0;i3){var regex = arguments[3];if(regex != ""){unSelectMatchingOptions(from,regex);}}if(!hasOptions(from)){return;}for(var i=0;i=0;i--){var o = from.options[i];if(o.selected){from.options[i] = null;}}if((arguments.length=0;i--){if(obj.options[i].selected){if(i !=(obj.options.length-1) && ! obj.options[i+1].selected){swapOptions(obj,i,i+1);obj.options[i+1].selected = true;}}}} function removeSelectedOptions(from){if(!hasOptions(from)){return;}for(var i=(from.options.length-1);i=0;i--){var o=from.options[i];if(o.selected){from.options[i] = null;}}from.selectedIndex = -1;} function removeAllOptions(from){if(!hasOptions(from)){return;}for(var i=(from.options.length-1);i=0;i--){from.options[i] = null;}from.selectedIndex = -1;} function addOption(obj,text,value,selected){if(obj!=null && obj.options!=null){obj.options[obj.options.length] = new Option(text, value, false, selected);}} /* SOURCE FILE: OptionTransfer.js */ function OT_transferLeft(){moveSelectedOptions(this.right,this.left,this.autoSort,this.staticOptionRegex);this.update();} function OT_transferRight(){moveSelectedOptions(this.left,this.right,this.autoSort,this.staticOptionRegex);this.update();} function OT_transferAllLeft(){moveAllOptions(this.right,this.left,this.autoSort,this.staticOptionRegex);this.update();} function OT_transferAllRight(){moveAllOptions(this.left,this.right,this.autoSort,this.staticOptionRegex);this.update();} function OT_saveRemovedLeftOptions(f){this.removedLeftField = f;} function OT_saveRemovedRightOptions(f){this.removedRightField = f;} function OT_saveAddedLeftOptions(f){this.addedLeftField = f;} function OT_saveAddedRightOptions(f){this.addedRightField = f;} function OT_saveNewLeftOptions(f){this.newLeftField = f;} function OT_saveNewRightOptions(f){this.newRightField = f;} function OT_update(){var removedLeft = new Object();var removedRight = new Object();var addedLeft = new Object();var addedRight = new Object();var newLeft = new Object();var newRight = new Object();for(var i=0;i0){str=str+delimiter;}str=str+val;}return str;} function OT_setDelimiter(val){this.delimiter=val;} function OT_setAutoSort(val){this.autoSort=val;} function OT_setStaticOptionRegex(val){this.staticOptionRegex=val;} function OT_init(theform){this.form = theform;if(!theform[this.left]){alert("OptionTransfer init(): Left select list does not exist in form!");return false;}if(!theform[this.right]){alert("OptionTransfer init(): Right select list does not exist in form!");return false;}this.left=theform[this.left];this.right=theform[this.right];for(var i=0;i

    Read the article

  • Android text layout question: two textviews, side-by-side, with different layout alignments and weights

    - by thx1200
    I'm still a bit of an Android noob, forgive me if this is simple and I'm just not seeing it. There are two portions of text in a view that spans the entire width horizontally, but is only as high as one line of text. The left side must always be displayed in full, but should take no more horizontal space than it needs. The right side should be pushed over by the left side and fill up the remainder of the screen width. If the right side text is smaller than this width, the text should be right-aligned horizontally. If the text is greater than the width, it should scroll horizontally. The text on the right side will be updated frequently and should slide up with new text when the app tells it (explaining the TextSwitcher in the layout). I have tried two different layout styles. In both situations, I can get the left side to "push" the layout, the right side to scroll, but I can't figure out how to get the right side to right align. It is always left aligned. Here is a picture showing what is happening... http://img10.imageshack.us/img10/5599/androidlayout.png In addition (but less important), in my layout code I have android:fadingEdge="none" on the TextViews, but it still has a faded edge on the left and right side when it scrolls. Why is that? Here are the two layouts I created, which yield the results shown, but not the results I want. Using a horizontal LinearLayout... <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/LinearLayoutStatusBar" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margin="2px" android:background="#555555" > <TextView android:id="@+id/TextViewTimer" android:textSize="18px" android:textColor="#FFFFFF" android:layout_gravity="left" android:layout_weight="0" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="0px" android:layout_marginRight="3px" android:text="Left Side" > </TextView> <TextSwitcher android:id="@+id/TextSwitcherDetails" android:inAnimation="@anim/push_up_in" android:outAnimation="@anim/push_up_out" android:layout_weight="1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:layout_marginLeft="3px" android:layout_marginRight="0px" > <TextView android:id="@+id/TextViewDetails1" android:textSize="18px" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="right" android:singleLine="true" android:ellipsize="marquee" android:marqueeRepeatLimit="marquee_forever" android:scrollHorizontally="true" android:focusable="true" android:focusableInTouchMode="true" android:fadingEdge="none" android:text="Right Side 1" > </TextView> <TextView android:id="@+id/TextViewDetails2" android:textSize="18px" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="right" android:singleLine="true" android:ellipsize="marquee" android:marqueeRepeatLimit="marquee_forever" android:scrollHorizontally="true" android:focusable="true" android:focusableInTouchMode="true" android:fadingEdge="none" android:text="Right Side 2 - This is a really long text this is long and fun and fun and long" > </TextView> </TextSwitcher> </LinearLayout> And the RelativeLayout style... <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/LinearLayoutStatusBar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margin="2px" android:background="#555555" > <TextView android:id="@+id/TextViewTimer" android:textSize="18px" android:textColor="#FFFFFF" android:layout_gravity="left" android:layout_weight="0" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="0px" android:layout_marginRight="3px" android:layout_alignParentLeft="true" android:text="Left Side" > </TextView> <TextSwitcher android:id="@+id/TextSwitcherDetails" android:inAnimation="@anim/push_up_in" android:outAnimation="@anim/push_up_out" android:layout_weight="1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="3px" android:layout_marginRight="0px" android:layout_toRightOf="@+id/TextViewTimer" android:layout_alignParentRight="true" android:fadingEdge="none" android:fadingEdgeLength="0px" > <TextView android:id="@+id/TextViewDetails1" android:textSize="18px" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="right" android:singleLine="true" android:ellipsize="marquee" android:marqueeRepeatLimit="marquee_forever" android:scrollHorizontally="true" android:focusable="true" android:focusableInTouchMode="true" android:fadingEdge="none" android:fadingEdgeLength="0px" android:text="Right Side 1" > </TextView> <TextView android:id="@+id/TextViewDetails2" android:textSize="18px" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="right" android:singleLine="true" android:ellipsize="marquee" android:marqueeRepeatLimit="marquee_forever" android:scrollHorizontally="true" android:focusable="true" android:focusableInTouchMode="true" android:fadingEdge="none" android:fadingEdgeLength="0px" android:text="Right Side 2 - This is a really long text this is long and fun and fun and long" > </TextView> </TextSwitcher> </RelativeLayout> So how do I get that text on the right side to right-align. Thanks!

    Read the article

  • Why won't my DIV height grow? Is it because I am using floats?

    - by user1684636
    Please help! I am trying to create some div sections and some of these div sections have some other divs that are floated. All of which I have cleared. But the sections are not growing to accomodate the content inside of them. The following is my HTML - <div class="data"> <div class="name">Data</div> <div class="first section"> <div class="title">First Section</div> <div class="left settings"> <div class="row"> <div class="field">First Name</div> <div class="value">John</div> </div> <div class="row"> <div class="field">Last Name</div> <div class="value">Smith</div> </div> </div> <div class="right settings"> <div class="row"> <div class="field">ID</div> <div class="value">321</div> </div> <div class="row"> <div class="field">Group</div> <div class="value">Eng</div> </div> </div> </div> <div class="second section"> <div class="title">Second Section</div> </div> <div class="third section"> <div class="title">Third Section</div> </div> </div> The following is my CSS - div.data { position: relative; top: 1em; width: 100em; } div.data div.name { color: #0066FF; font-weight: bold; } div.data div.section div.title { color: green; font-weight: bold; } /** first section **/ div.data div.first div.settings { position: relative; width: 799px; border-top: 1px solid; float: left; } div.data div.first div.left { border-left: 1px solid; } div.data div.first div.settings div.row { border-bottom: 1px solid; clear: both; height: 2em; } div.data div.first div.settings div.row div { float: left; height: 22px; padding: 5px; border-right: 1px solid; } div.data div.first div.settings div.row div.field { width: 192px; } div.data div.first div.settings div.row div.value { width: 585px; } /** second section **/ div.data div.second { clear: both; } For the first section, I have a title and a table that is made up of a left and right. Both of these are floated left and cleared. The rows of the left and right table have a field and value which are also floated left and right and cleared. At this point, I expect "first section" to grow as the content inside of it grows. But instead the height is stuck at 22px, the same height as the section title! What is going on? I tried overflow:auto for div.section and that worked. But when I tried to set this style for div.settings in "first section": div.data div.first div.settings { position: relative; top: 1em; } I end up with these scroll bars, instead of the height growing to fit the new changes. And everything was out of whack. I am really at my wit's end trying to figure this out. If anyone can give me any suggestions on what I am doing wrong, it would be a great help. Thanks.

    Read the article

  • PHP Form not working IE and Chrome, but fine in FF

    - by RO
    <? if(isset($_POST['accountUser']) && isset($_POST['accountPassword'])) { include("dbase.php"); include("settings.php"); if ($_POST['accountType']=="member") { $database="chatusers"; } else if ($_POST['accountType']=="model") { $database="chatmodels"; } else if ($_POST['accountType']=="studioop") { $database="chatoperators"; } $userExists=false; $result = mysql_query("SELECT id,user,password,status FROM $database WHERE status!='pending' AND status!='rejected' "); while($row = mysql_fetch_array($result)) { $tempUser=$row["user"]; $tempPass=$row["password"]; $tempId=$row["id"]; if ($_POST['accountUser']==$tempUser && md5($_POST['accountPassword'])==$tempPass) { if ($row["status"]=="blocked") { $userExists=true; $errorMsg="Account is blocked, please contact the administrator for more details"; } else { $userExists=true; $currentTime=time(); mysql_query("UPDATE $database SET lastLogIn='$currentTime' WHERE id = '$tempId' LIMIT 1"); setcookie("usertype", $database, time()+3600); setcookie("id", $tempId, time()+3600); header("Location: cp/$database/"); } } } if (!$userExists){ $errorMsg="Wrong Username or password"; } } else if (isset($_GET['from']) && $_GET['from']=="recoverpass"){ $errorMsg="Your new password has been sent to your mail"; } else { $errorMsg="Please complete username and password fields"; } ?> <? include("_main.header.php"); ?> <table width="720" height="200" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="middle"><form action="login.php" method="post" enctype="application/x-www-form-urlencoded" name="form1"> <p>&nbsp;</p> <table width="720" border="0" align="center"> <tr> <td colspan="2"><p align="left"> <span class="error"><?php if ( isset($errorMsg) && $errorMsg!=""){ echo $errorMsg; } ?></span> <br> <br> </p></td> </tr> <tr> <td width="210" align="right" valign="top" class="form_definitions"><div align="right">Username:</div></td> <td align="left" valign="top"><input name="accountUser" type="text" id="accountUser" value="<? echo $_GET[user];?>" size="24" maxlength="24"></td> </tr> <tr> <td align="right" valign="top" class="form_definitions"><div align="right">Password:</div></td> <td align="left" valign="top"><input name="accountPassword" type="password" id="accountPassword2" size="24" maxlength="24"></td> </tr> <tr> <td align="right" valign="top" class="form_definitions"><div align="right">Account type:</div></td> <td align="left" valign="top"> <select name="accountType" id="select"> <option value="member" selected>Member</option> <option value="model">Model</option> <option value="studioop">Studio Operator</option> </select> <div align="left"></div></td> </tr> <tr> <td align="right" valign="top" class="form_definitions">&nbsp;</td> <td align="left" valign="top"> <input type="submit" name="Submit" value="Log In to your account"> <div align="left"></div></td> </tr> <tr> <td align="right" valign="top" class="form_definitions">&nbsp;</td> <td align="left" valign="top"><a href="lostpassword.php" class="left">Lost Password? Press Here!</a></td> </tr> </table> </form></td> </tr> </table> <br> <br> <? include("_main.footer.php"); ?>

    Read the article

  • IE7 li ul bug on dropdown menu

    - by Berns
    hoping one of you guys can help me please. I have a basic list menu with two dropdowns. This all works fine on all browsers except IE6 and IE7. Please take a look at my markup. <nav> <ul id="topNav" ><li id="topNavFirst"><a href="../about/about.php" id="aboutNav">About Us</a></li ><li id="topNavSecond"><a href="../people/our-people.php" id="peopleNav">Our People</a ><ul id="subList1"><li><a href="../people/mike-hadfield.php">Mike Hadfield</a></li ><li><a href="../people/karen-sampson.php">Karen Sampson</a></li ><li><a href="../people/milhana-farook.php">Milhana Farook</a></li ><li><a href="../people/kim-crook.php">Kim Crook</a></li ><li><a href="../people/amanda-lynch.php">Amanda Lynch</a></li ><li><a href="../people/gideon-scott.php">Gideon Scott</a></li ><li><a href="../people/paul-fuller.php">Paul Fuller</a></li ><li><a href="../people/peter-chaplain.php">Peter Chaplain</a></li ><li><a href="../people/laura-hutley.php">Laura Hutley</a></li ></ul ></li ><li id="topNavThird"><a href="../services/our-services.php" id="servicesNav">Our Services</a ><ul id="subList2"><li><a href="../services/company-and-commercial.php">Company &amp; Commercial</a></li ><li><a href="../services/employment.php">Employment</a></li ><li><a href="../services/civil-litigation.php">Civil Litigation</a></li ><li><a href="../services/debt-recovery.php">Debt Recovery</a></li ><li><a href="../services/conveyancing.php">Conveyancing</a></li ><li><a href="../services/commercial-property.php">Commerical Property</a></li ><li><a href="../services/wills-and-probate.php">Wills &amp; Probate</a></li ><li><a href="../services/family.php">Matrimonial &amp; Family</a></li ></ul ></li ><li><a href="../news/news.php" id="newsNav">News</a></li ><li><a href="../careers/careers.php" id="careersNav">Careers</a></li ><li><a href="../contact/contact.php" id="contactNav">Contact</a></li ></ul><!-- /topNav --> </nav>? and the css a {text-decoration:none;} #topNav { float:right; height:30px; margin:0; font-size:12px; } #topNav li { display:inline; float:left; list-style:none; color:#666; border-left: 1px solid #666; padding: 0 3px 0 3px; position:relative; } #topNav ul a { white-space:nowrap; } #topNav li a:hover { border-bottom:2px solid #369; } #topNavSecond a:hover { border-bottom:2px solid transparent !important; } #topNavFirst { border-left: 1px solid transparent !important; } /*****OUR-PEOPLE DROPDOWN*****/ #topNav ul{ background:#fff; border:1px solid #666; border-top:0px solid transparent; border-bottom:2px solid #666; list-style:none; position:absolute; left:-9999px; width:100px; text-align:left; padding:5px 0 5px 0px; margin:0 0 0 -4px; z-index:10; -webkit-box-shadow: 1px 1px 1px #666; -moz-box-shadow: 1px 1px 1px #666; box-shadow: 1px 1px 1px #666; vertical-align: bottom; } #topNav ul li{ display:block; border-left:0px; margin-bottom: 0px; padding:0; vertical-align: bottom; } #topNav ul a{ padding:0 0 0 5px; } #topNav li:hover ul{ left:auto; } #topNav li:hover a { color:#369; } #topNav li:hover ul a{ text-decoration:none; color:#666; } #topNav li:hover ul li a:hover{ color:#fff;; width:100%; border-bottom:0px solid transparent !important; } #topNav ul li:hover { background:#369; display: block; } #topNav ul li a { display: block; padding:0 0 0 4px; } /************/ /*****OUR-SERVICES DROPDOWN*****/ #topNavThird a:hover { border-bottom:2px solid transparent !important; } #topNavThird ul{ /*background:#fff url(images/service-ul-bg.png) no-repeat;*/ width:135px !important; /*margin-left:120px !important;*/ }? here it is working perfectly http://jsfiddle.net/BcWd9/ here is a screen shot of how it looks in IE7. hadfield.andymcnallydesign.co.uk/images/ie7-error.jpg as you can see the ul is appearing to the right of the li and not the left and it is overlaying the top list. I've tried removing white space, but no luck. Any ideas? If one of you can help it would be much appreciated.

    Read the article

  • How can a code editor effectively hint at code nesting level - without using indentation?

    - by pgfearo
    I've written an XML text editor that provides 2 view options for the same XML text, one indented (virtually), the other left-justified. The motivation for the left-justified view is to help users 'see' the whitespace characters they're using for indentation of plain-text or XPath code without interference from indentation that is an automated side-effect of the XML context. I want to provide visual clues (in the non-editable part of the editor) for the left-justified mode that will help the user, but without getting too elaborate. I tried just using connecting lines, but that seemed too busy. The best I've come up with so far is shown in a mocked up screenshot of the editor below, but I'm seeking better/simpler alternatives (that don't require too much code). [Edit] Taking the heatmap idea (from: @jimp) I get this and 3 alternatives - labelled a, b and c: The following section describes the accepted answer as a proposal, bringing together ideas from a number of other answers and comments. As this question is now community wiki, please feel free to update this. NestView The name for this idea which provides a visual method to improve the readability of nested code without using indentation. Contour Lines The name for the differently shaded lines within the NestView The image above shows the NestView used to help visualise an XML snippet. Though XML is used for this illustration, any other code syntax that uses nesting could have been used for this illustration. An Overview: The contour lines are shaded (as in a heatmap) to convey nesting level The contour lines are angled to show when a nesting level is being either opened or closed. A contour line links the start of a nesting level to the corresponding end. The combined width of contour lines give a visual impression of nesting level, in addition to the heatmap. The width of the NestView may be manually resizable, but should not change as the code changes. Contour lines can either be compressed or truncated to keep acheive this. Blank lines are sometimes used code to break up text into more digestable chunks. Such lines could trigger special behaviour in the NestView. For example the heatmap could be reset or a background color contour line used, or both. One or more contour lines associated with the currently selected code can be highlighted. The contour line associated with the selected code level would be emphasized the most, but other contour lines could also 'light up' in addition to help highlight the containing nested group Different behaviors (such as code folding or code selection) can be associated with clicking/double-clicking on a Contour Line. Different parts of a contour line (leading, middle or trailing edge) may have different dynamic behaviors associated. Tooltips can be shown on a mouse hover event over a contour line The NestView is updated continously as the code is edited. Where nesting is not well-balanced assumptions can be made where the nesting level should end, but the associated temporary contour lines must be highlighted in some way as a warning. Drag and drop behaviors of Contour Lines can be supported. Behaviour may vary according to the part of the contour line being dragged. Features commonly found in the left margin such as line numbering and colour highlighting for errors and change state could overlay the NestView. Additional Functionality The proposal addresses a range of additional issues - many are outside the scope of the original question, but a useful side-effect. Visually linking the start and end of a nested region The contour lines connect the start and end of each nested level Highlighting the context of the currently selected line As code is selected, the associated nest-level in the NestView can be highlighted Differentiating between code regions at the same nesting level In the case of XML different hues could be used for different namespaces. Programming languages (such as c#) support named regions that could be used in a similar way. Dividing areas within a nesting area into different visual blocks Extra lines are often inserted into code to aid readability. Such empty lines could be used to reset the saturation level of the NestView's contour lines. Multi-Column Code View Code without indentation makes the use of a multi-column view more effective because word-wrap or horizontal scrolling is less likely to be required. In this view, once code has reach the bottom of one column, it flows into the next one: Usage beyond merely providing a visual aid As proposed in the overview, the NestView could provide a range of editing and selection features which would be broadly in line with what is expected from a TreeView control. The key difference is that a typical TreeView node has 2 parts: an expander and the node icon. A NestView contour line can have as many as 3 parts: an opener (sloping), a connector (vertical) and a close (sloping). On Indentation The NestView presented alongside non-indented code complements, but is unlikely to replace, the conventional indented code view. It's likely that any solutions adopting a NestView, will provide a method to switch seamlessly between indented and non-indented code views without affecting any of the code text itself - including whitespace characters. One technique for the indented view would be 'Virtual Formatting' - where a dynamic left-margin is used in lieu of tab or space characters. The same nesting-level data used to dynamically render the NestView could also used for the more conventional-looking indented view. Printing Indentation will be important for the readability of printed code. Here, the absence of tab/space characters and a dynamic left-margin means that the text can wrap at the right-margin and still maintain the integrity of the indented view. Line numbers can be used as visual markers that indicate where code is word-wrapped and also the exact position of indentation: Screen Real-Estate: Flat Vs Indented Addressing the question of whether the NestView uses up valuable screen real-estate: Contour lines work well with a width the same as the code editor's character width. A NestView width of 12 character widths can therefore accommodate 12 levels of nesting before contour lines are truncated/compressed. If an indented view uses 3 character-widths for each nesting level then space is saved until nesting reaches 4 levels of nesting, after this nesting level the flat view has a space-saving advantage that increases with each nesting level. Note: A minimum indentation of 4 character widths is often recommended for code, however XML often manages with less. Also, Virtual Formatting permits less indentation to be used because there's no risk of alignment issues A comparison of the 2 views is shown below: Based on the above, its probably fair to conclude that view style choice will be based on factors other than screen real-estate. The one exception is where screen space is at a premium, for example on a Netbook/Tablet or when multiple code windows are open. In these cases, the resizable NestView would seem to be a clear winner. Use Cases Examples of real-world examples where NestView may be a useful option: Where screen real-estate is at a premium a. On devices such as tablets, notepads and smartphones b. When showing code on websites c. When multiple code windows need to be visible on the desktop simultaneously Where consistent whitespace indentation of text within code is a priority For reviewing deeply nested code. For example where sub-languages (e.g. Linq in C# or XPath in XSLT) might cause high levels of nesting. Accessibility Resizing and color options must be provided to aid those with visual impairments, and also to suit environmental conditions and personal preferences: Compatability of edited code with other systems A solution incorporating a NestView option should ideally be capable of stripping leading tab and space characters (identified as only having a formatting role) from imported code. Then, once stripped, the code could be rendered neatly in both the left-justified and indented views without change. For many users relying on systems such as merging and diff tools that are not whitespace-aware this will be a major concern (if not a complete show-stopper). Other Works: Visualisation of Overlapping Markup Published research by Wendell Piez, dated from 2004, addresses the issue of the visualisation of overlapping markup, specifically LMNL. This includes SVG graphics with significant similarities to the NestView proposal, as such, they are acknowledged here. The visual differences are clear in the images (below), the key functional distinction is that NestView is intended only for well-nested XML or code, whereas Wendell Piez's graphics are designed to represent overlapped nesting. The graphics above were reproduced - with kind permission - from http://www.piez.org Sources: Towards Hermenutic Markup Half-steps toward LMNL

    Read the article

  • Jquery Flexslider - can't see navigational images (manualControl)

    - by Kim Thomas
    I've spent a lot of time looking at the post on 3/13/12 re: manual controls, but isn't getting me all the way there...probably because I don't know jquery. Sorry, newbie on board. I'm trying to get the right/left arrows to show, as well as the 1, 2, 3...at the bottom. They are there, I see the lists on Firebug, just don't know how to add them to the "hook" (?) so they appear. Here is the code I have in header: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="jquery.flexslider.js"></script> <script type="text/javascript" charset="utf-8"> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", slideshow: false, controlNav: true, manualControls: ".flex-control-nav li a", controlsContainer: ".flex-container" }); }); </script> Here is my html: <div class="flex-container"> <div class="flexslider"> <ul class="slides"> <li><img src="images/tah_home.jpg" alt="taylor art house home page" width="600" height="320"/> <p class="flex-caption">Taylor Art House Home Page</p></li> <li><img src="images/tah_blog.jpg" alt="taylor art house blog page" width="600" height="320" /> <p class="flex-caption">We created a blog that fits seemlessly into Taylor Art House's look</p></li> <li><img src="images/tah_artwork_page.jpg" alt="taylor art house art page" width="600" height="320" /> <p class="flex-caption">One of Taylor Art House's gallery pages, using a Wordpress plugin</p></li> <li><img src="images/tah_arch_portfolio.jpg" alt="jon taylor architecture portfolio page" width="600" height="320" /> <p class="flex-caption">We created links to toggle from TAH to Jon Taylor Architecture</p></li> </ul> </div><!--end flexsider--> </div><!--end flex-container--> Here is the Flexslider CSS: /* * jQuery FlexSlider v1.8 * http://www.woothemes.com/flexslider/ * * Copyright 2012 WooThemes * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php */ /* Browser Resets */ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* FlexSlider Necessary Styles *********************************/ .flexslider { width: 100%; margin: 0; padding: 0; } .flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img { max-width: 100%; display: block; } .flex-pauseplay span { text-transform: capitalize; } /* Clearfix for the .slides element */ .slides:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } html[xmlns] .slides { display: block; } * html .slides { height: 1%; } /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child { display: block; } /* FlexSlider Default Theme *********************************/ .flexslider { width: 600px; background: #fff; border: 4px solid #999; position: relative; margin: 30px 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1; } .flexslider .slides { zoom: 1; } .flexslider .slides > li { position: relative; } /* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */ .flex-container { zoom: 1; position: relative; margin-left:100px; } /* Caption style */ /* IE rgba() hack */ .flex-caption { background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1; } .flex-caption { width: 96%; padding: 2%; margin: 0; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px; } /* Direction Nav */ .flex-direction-nav { height: 0; } .flex-direction-nav li a { width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(theme/bg_direction_nav.png) no-repeat; position: absolute; top: 50%; cursor: pointer; text-indent: -999em; } .flex-direction-nav li .next { background-position: -52px 0; right: -21px; } .flex-direction-nav li .prev { left: -20px; } .flex-direction-nav li .disabled { opacity: .3; filter:alpha(opacity=30); cursor: default; } /* Control Nav */ .flex-control-nav { width: 100%; position: absolute; bottom: -30px; text-align: center; } .flex-control-nav li { margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline; } .flex-control-nav li:first-child { margin: 0; } .flex-control-nav li a { width: 13px; height: 13px; display: block; background: url(theme/bg_control_nav.png) no-repeat; cursor: pointer; text-indent: -999em; } .flex-control-nav li a:hover { background-position: 0 -13px; } .flex-control-nav li a.active { background-position: 0 -26px; cursor: default; } Here is how it appears in Firebug: <div class="flex-container"> <div class="flexslider" style="overflow: hidden;"> <ul class="slides" style="width: 1200%; margin-left: -1800px;"> <li class="clone" style="width: 600px; float: left; display: block;"> <li style="width: 600px; float: left; display: block;"> <li style="width: 600px; float: left; display: block;"> <li style="width: 600px; float: left; display: block;"> <li style="width: 600px; float: left; display: block;"> <li class="clone" style="width: 600px; float: left; display: block;"> </ul> </div> <ol class="flex-control-nav"> <li> <a class="">1</a> </li> <li> <li> <li> </ol> <ul class="flex-direction-nav"> <li> <a class="prev" href="#">Previous</a> </li> <li> <a class="next" href="#">Next</a> </li> </ul> </div> Finally, here is a link to the jsFiddle file (I saw someone wanted that in other flexslider post): http://jsfiddle.net/kthms/Wxmsp/ Link to page: http://www.kajortdesigns.com/tah.php I've tried every combo of class from the CSS in the manualControl: "", but I'm just guessing. If anyone can help this newbie out, I would be very appreciative. Explicit instructions are always appreciated.

    Read the article

  • Set Height of Div Equal to Parent Tag

    - by Phong Dang
    Hello, I have a snip code HTML as below : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns:o="urn:schemas-microsoft-com:office:office" lang="en-us" dir="ltr"> <head> <meta http-equiv="X-UA-Compatible" content="IE=8" /> <meta name="GENERATOR" content="Microsoft SharePoint" /> <meta name="progid" content="SharePoint.WebPartPage.Document" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Expires" content="0" /> <title>Demo </title> <style type="text/css"> A { font-weight: normal; font-size: 10pt; text-decoration: none; } </style> <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/wiki.css?rev=AWRyZDbGxZSekWBubaxPXw%3D%3D" /> <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css?rev=w9FW7ASZnUjiWWCtJEcnTw%3D%3D" /> </head> <body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="height:100%;"> <form method="" name="frm"> <table style="border-bottom: black 1px solid; border-left: black 1px solid; border-collapse: collapse; border-top: black 1px solid; border-right: black 1px solid" id="ctl00_m_g_510fd150_a968_41ee_a28d_d47ff4a7198e_BambooCalendarControl" height="100%"> <tbody> <tr> <td style="border-top: black 1px solid; border-right: black 1px solid" height="25" valign="top" rowspan="1" width="1%" align="right"> <span> <nobr>8:00 AM</nobr> </span> </td> <td style="border-bottom: #d4d0c8 1px dotted; background-color: #ccffcc; border-left: 0px; border-top: black 1px solid; border-right: black 1px solid" height="100%" valign="top" rowspan="8" width="50%"> <div style="border-bottom: gray 1px solid; border-left: gray 1px solid; background-color: #ffa500; height: 100%; overflow: hidden; border-top: gray 1px solid; border-right: gray 1px solid" nowrap width="100%" valign="top"> <a style="height: 100%; color: black" href="#"><font color="white">Item </font></a> </div> </td> <td style="border-bottom: #d4d0c8 1px dotted; border-left: 0px; border-top: black 1px solid; border-right: black 1px solid" height="25" valign="top" width="100%" colspan="1"> </td> </tr> <tr> <td style="border-bottom: black 1px solid; border-right: black 1px solid" height="25" valign="top" rowspan="1" width="1%" align="right"> </td> <td style="border-bottom: black 1px solid; border-left: 0px; border-right: black 1px solid" height="25" valign="top" width="100%" colspan="1"> </td> </tr> <tr> <td style="border-right: black 1px solid" height="25" valign="top" rowspan="1" width="1%" align="right"> <span> <nobr>9:00 AM</nobr> </span> </td> <td style="border-bottom: #d4d0c8 1px dotted; background-color: #ccffcc; border-left: 0px; border-right: black 1px solid" height="100%" valign="top" rowspan="4" width="50%"> <div style="border-bottom: gray 1px solid; border-left: gray 1px solid; background-color: #bdb76b; height: 100%; overflow: hidden; border-top: gray 1px solid; border-right: gray 1px solid" nowrap width="100%" valign="top"> <a style="height: 100%; color: black" title="" href="#"><font color="white">Item 2 </font> </a> </div> </td> </tr> <tr> <td style="border-bottom: black 1px solid; border-right: black 1px solid" height="25" valign="top" rowspan="1" width="1%" align="right"> </td> </tr> <tr style="border-left: medium none; border-right: #696969 1px solid"> <td style="border-right: black 1px solid" height="25" valign="top" rowspan="1" width="1%" align="right"> <span> <nobr>10:00 AM</nobr> </span> </td> </tr> <tr> <td style="border-bottom: black 1px solid; border-right: black 1px solid" height="25" valign="top" rowspan="1" width="1%" align="right"> </td> </tr> <tr> <td style="border-right: black 1px solid" height="25" valign="top" rowspan="1" width="1%" align="right"> <span> <nobr>11:00 AM</nobr> </span> </td> <td style="border-bottom: #d4d0c8 1px dotted; border-left: 0px; border-top: black 1px solid; border-right: black 1px solid" height="25" valign="top" width="100%" colspan="1"> </td> </tr> <tr> <td style="border-bottom: black 1px solid; border-right: black 1px solid" height="25" valign="top" rowspan="1" width="1%" align="right"> </td> <td style="border-bottom: black 1px solid; border-left: 0px; border-right: black 1px solid" height="25" valign="top" width="100%" colspan="2"> </td> </tr> </tbody> </table> </form> </body> </html> I set the height of the div 100% so that it full of TD but it did not effect. Please help me ! Thanks / PD

    Read the article

  • Floats will not align, stay staggered, can't find a solution?

    - by Sarah Proper
    What I am trying to do is build a multi column layout. The main two sections are divided 2/3 to 1/3 and inside the 2/3 column is divided 2/3 1/3 as well. My problem is that my floats will not align nicely with each other, choosing instead to stagger like stairs. I have tried declaring the widths smaller, floating them individually, including in the float sections display:block,inline, or inline-block and nothing seems to be working. I am getting really frustrated and would appreciate any help! Thanks! <div class="wrapper"> <div class="width50" style="float:left;"> <h1>Our Mission:</h1> <p> Bacon ipsum dolor sit amet swine spare ribs pork meatloaf pancetta filet mignon. Rump frankfurter pork belly prosciutto beef boudin andouille pig pork chop meatball ham drumstick filet mignon. Strip steak flank shank pig, tongue tri-tip jowl leberkas sirloin brisket t-bone. Ground round spare ribs salami capicola filet mignon. Capicola turkey t-bone corned beef sausage ham hock. Corned beef capicola leberkas pork chop, swine pastrami drumstick. Frankfurter fatback bacon jowl short loin, jerky pancetta bresaola corned beef shoulder drumstick ball tip tri-tip.</p> <div class="width50 float-left"> <img src="@Url.StaticContent(Links.Content.images.map_homepage_png)" alt="Map" /> </div> <div class="width33 float-right"> <img src="@Url.StaticContent(Links.Content.images.address_line_text_png)" alt="addressline" /> <br /> <h3>address</h3> <b>405 Empire Boulevard<br /> Rochester, NY 14609 </b> </div> </div> <div class="width33" style="float:right;"> <h1>Events</h1> <ul class="events"> <li> <h2>Fall Volunteer Festival</h2> <p> <b>october 6<br /> 10 am to 3pm </b> </p> <p> come to our town location for some fun activities for family and friends! </p> </li> <li> <h2>Fall Volunteer Festival</h2> <p> <b>october 6<br /> 10 am to 3pm </b> </p> <p> come to our town location for some fun activities for family and friends! </p> </li> <li> <h2>Fall Volunteer Festival</h2> <p> <b>october 6<br /> 10 am to 3pm </b> </p> <p> come to our town location for some fun activities for family and friends! </p> </li> </ul> </div> </div> </div> and the css: .clearfix:before, .clearfix:after, .grid-block:before, .grid-block:after, .deepest:before, .deepest:after { content: ""; display: table; } .clearfix:after, .grid-block:after, .deepest:after { clear: both; } .grid-box { float: left; } /* Grid Units */ .width16 { width: 16.666%; } .width20 { width: 20%; } .width25 { width: 25%; } .width33 { width: 39.333%; } .width40 { width: 40%; } .width50 { width: 50%; } .width60 { width: 60%; } .width66 { width: 66.666%; } .width75 { width: 75%; } .width80 { width: 80%; } .width100 { width: 100%; } .width16, .width20, .width25, .width33, .width40, .width50, .width60, .width66, .width75, .width80, .width100 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 5px 10px 5px 10px; } /* Create new Block Formatting Contexts */ .bfc-o { overflow: hidden; } .bfc-f { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; float: left; } /* Align Boxes */ .float-left { float: left; } .float-right { float: right; } /* Grid Gutter */ .grid-gutter.grid-block { margin: 0 -15px; } .grid-gutter > .grid-box > * { margin: 0 15px; } .grid-gutter > .grid-box > * > :first-child { margin-top: 0; } .grid-gutter > .grid-box > * > :last-child { margin-bottom: 0; } /* Layout Defaults --------------------------------------------------------------------------------------- -------------*/ /* Center Page */ .wrapper { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: auto; } /* Header */ #header { position: relative; padding-top: 10px; } #toolbar .float-left .module, #toolbar .float-left > time { margin: 0 15px 0 0; float: left; } #toolbar .float-right .module { margin: 0 0 0 15px; float: right; } #headerbar .module { max-width: 300px; margin-right: 0; float: right; } #logo, #logo > img, #menu { float: left; } #search { float: right; } #banner { position: absolute; top: 0; right: -200px; } /* Footer */ #footer { position: relative; text-align: center; } /* Absolute */ #absolute { position: absolute; z-index: 15; width: 100%; }

    Read the article

  • drop down and post data to data base

    - by DAFFODIL
    This is a form which retrieves data from db and displays them in table. At the beginning of each row there will be a check box. If there are 10 rows fetched, I ii check 5 rows and insert them in to diff db but here when, I click drop down box data is getting in to db automatically,bcoz I use onchange event. Any alternative to prevent this to happen. Data should be inserted only when, I click submit button. Any help will be appreciated <?php $con = mysql_connect("localhost","root",""); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("form1", $con); error_reporting(E_ALL ^ E_NOTICE); $nam=$_REQUEST['select1']; $row=mysql_query("select * from inv where name='$nam'"); while($row1=mysql_fetch_array($row)) { $Name=$row1['Name']; $Address =$row1['Address']; $City=$row1['City']; $Pincode=$row1['Pincode']; $No=$row1['No']; $Date=$row1['Date']; $DCNo=$row1['DCNo']; $DcDate=$row1['DcDate']; $YourOrderNo=$row1['YourOrderNo']; $OrderDate=$row1['OrderDate']; $VendorCode=$row1['VendorCode']; $SNo=$row1['SNo']; $descofgoods=$row1['descofgoods']; $Qty=$row1['Qty']; $Rate=$row1['Rate']; $Amount=$row1['Amount']; } ?> <!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>Untitled Document</title> <script type="text/javascript"> function ram(id) { var q=document.getElementById('qty_'+id).value; var r=document.getElementById('rate_'+id).value; document.getElementById('amt_'+id).value=q*r; } </script> </head> <body> <form id="form1" name="form1" method="post" action=""> <table width="1315" border="0"> <script type="text/javascript"> function g() { form1.submit(); } </script> <tr> <th>Name</th> <th align="left"><select name="select1" onchange="g();"> <option value="" selected="selected">select</option> <?php $row=mysql_query("select Name from inv "); while($row1=mysql_fetch_array($row)) { ?> <option value="<?php echo $row1['Name'];?>"><?php echo $row1['Name'];?></option> <?php } ?> </select></th> </tr> <tr> <th>Address</th> <th align="left"><textarea name="Address"><?php echo $Address;?></textarea></th> </tr> <tr> <th>City</th> <th align="left"><input type="text" name="City" value='<?php echo $City;?>' /></th> </tr> <tr> <th>Pincode</th> <th align="left"><input type="text" name="Pincode" value='<?php echo $Pincode;?>'></th> </tr> <tr> <th>No</th> <th align="left"><input type="text" name="No2" value='<?php echo $No;?>' readonly="" /></th> </tr> <tr> <th>Date</th> <th align="left"><input type="text" name="Date" value='<?php echo $Date;?>' /></th> </tr> <tr> <th>DCNo</th> <th align="left"><input type="text" name="DCNo" value='<?php echo $DCNo;?>' readonly="" /></th> </tr> <tr> <th>DcDate:</th> <th align="left"><input type="text" name="DcDate" value='<?php echo $DcDate;?>' /></th> </tr> <tr> <th>YourOrderNo</th> <th align="left"><input type="text" name="YourOrderNo" value='<?php echo $YourOrderNo;?>' readonly="" /></th> </tr> <tr> <th>OrderDate</th> <th align="left"><input type="text" name="OrderDate" value='<?php echo $OrderDate;?>' /></th> </tr> <tr> <th width="80">VendorCode</th> <th width="1225" align="left"><input type="text" name="VendorCode" value='<?php echo $VendorCode;?>' readonly="" /></th> </tr> </table> <table width="1313" border="0"> <tr> <td width="44">&nbsp;</td> <td width="71">SNO</td> <td width="527">DESCRIPTION</td> <td width="214">QUANTITY</td> <td width="214">RATE/UNIT</td> <td width="217">AMOUNT</td> </tr> <?php $i=1; $row=mysql_query("select * from inv where Name='$nam'"); while($row1=mysql_fetch_array($row)) { $SNo=$row1['SNo']; $descofgoods=$row1['descofgoods']; $Qty=$row1['Qty']; $Rate=$row1['Rate']; $Amount=$row1['Amount']; ?> <tr> <td><input type="checkbox" name="checkbox" value="checkbox" checked="checked"/></td> <td><input type="text" name="No[<?php echo $i?>]" value='<?php echo $SNo;?>' readonly=""/></td> <td><input type="text" name="descofgoods[<?php echo $i?>]" value='<?php echo $descofgoods;?>' /></td> <td><input type="text" name="qty[<?php echo $i?>]" maxlength="50000000" id="qty_<?PHP echo($i) ?>"/></td> <td><input type="text" name="Rate[<?php echo $i?>]" value='<?php echo $Rate;?>' id="rate_<?PHP echo($i) ?>" onclick="ram('<?PHP echo($i) ?>')";></td> <td><input type="text" name="Amount[<?php echo $i?>]" id="amt_<?PHP echo($i) ?>"/></td> </tr> <?php $i++;} ?> <tr> <td><input type="submit" value="submit" header("location:values to be brought for print page.php");/></td> </tr> </table> <label></label> </form> </body> </html> <?php /*error_reporting(E_ALL ^ E_NOTICE); $con = mysql_connect("localhost","root",""); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("form1", $con); /*if(checked=checkbox) { mysql_query="INSERT INTO invo (Name, Address, City, Pincode, No, Date, DCNo, DcDate, YourOrderNo, OrderDate, VendorCode, SNo, descofgoods, Qty, Rate, Amount) VALUES ('$_POST[Name]','$_POST[Address]','$_POST[City]','$_POST[Pincode]','$_POST[No]','$_POST[Date]','$_POST[DCNo]','$_POST[DcDate]','$_POST[YourOrderNo]','$_POST[OrderDate]','$_POST[VendorCode]','$_POST[SNo]','$_POST[descofgoods]','$_POST[qty]','$_POST[Rate]','$_POST[Amount]')"; } else { header("location:values to be brought for print page.php"); }*/ header("ins.php"); ?>

    Read the article

  • Multiplying values using javascript

    - by DAFFODIL
    i have used js to multiply but only 1st row is getting multiplied other rows are nt getting multiplied. <?php $con = mysql_connect("localhost","root",""); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("form1", $con); error_reporting(E_ALL ^ E_NOTICE); $nam=$_REQUEST['select1']; $row=mysql_query("select * from inv where name='$nam'"); while($row1=mysql_fetch_array($row)) { $Name=$row1['Name']; $Address =$row1['Address']; $City=$row1['City']; $Pincode=$row1['Pincode']; $No=$row1['No']; $Date=$row1['Date']; $DCNo=$row1['DCNo']; $DcDate=$row1['DcDate']; $YourOrderNo=$row1['YourOrderNo']; $OrderDate=$row1['OrderDate']; $VendorCode=$row1['VendorCode']; $SNo=$row1['SNo']; $descofgoods=$row1['descofgoods']; $Qty=$row1['Qty']; $Rate=$row1['Rate']; $Amount=$row1['Amount']; } ?> <!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>Untitled Document</title> <script type="text/javascript"> **function ram() { var q=document.getElementById('qty').value; var r=document.getElementById('rate').value; document.getElementById('amt').value=q*r; }** </script> </head> <body> <form id="form1" name="form1" method="post" action=""> <table width="1315" border="0"> <script type="text/javascript"> function g() { form1.submit(); } </script> <tr> <th>Name</th> <th align="left"><select name="select1" onchange="g();"> <option value="" selected="selected">select</option> <?php $row=mysql_query("select Name from inv "); while($row1=mysql_fetch_array($row)) { ?> <option value="<?php echo $row1['Name'];?>"><?php echo $row1['Name'];?></option> <?php } ?> </select></th> </tr> <tr> <th>Address</th> <th align="left"><textarea name="Address"><?php echo $Address;?></textarea></th> </tr> <tr> <th>City</th> <th align="left"><input type="text" name="City" value='<?php echo $City;?>' /></th> </tr> <tr> <th>Pincode</th> <th align="left"><input type="text" name="Pincode" value='<?php echo $Pincode;?>'></th> </tr> <tr> <th>No</th> <th align="left"><input type="text" name="No2" value='<?php echo $No;?>' readonly="" /></th> </tr> <tr> <th>Date</th> <th align="left"><input type="text" name="Date" value='<?php echo $Date;?>' readonly="" /></th> </tr> <tr> <th>DCNo</th> <th align="left"><input type="text" name="DCNo" value='<?php echo $DCNo;?>' readonly="" /></th> </tr> <tr> <th>DcDate:</th> <th align="left"><input type="text" name="DcDate" value='<?php echo $DcDate;?>' /></th> </tr> <tr> <th>YourOrderNo</th> <th align="left"><input type="text" name="YourOrderNo" value='<?php echo $YourOrderNo;?>' readonly="" /></th> </tr> <tr> <th>OrderDate</th> <th align="left"><input type="text" name="OrderDate" value='<?php echo $OrderDate;?>' readonly="" /></th> </tr> <tr> <th width="80">VendorCode</th> <th width="1225" align="left"><input type="text" name="VendorCode" value='<?php echo $VendorCode;?>' readonly="" /></th> </tr> </table> <table width="1313" border="0"> <tr> <td width="44">&nbsp;</td> <td width="71">SNO</td> <td width="527">DESCRIPTION</td> <td width="214">QUANTITY</td> <td width="214">RATE/UNIT</td> <td width="217">AMOUNT</td> </tr> <?php $i=1; $row=mysql_query("select * from inv where Name='$nam'"); while($row1=mysql_fetch_array($row)) { $descofgoods=$row1['descofgoods']; $Qty=$row1['Qty']; $Rate=$row1['Rate']; $Amount=$row1['Amount']; ?> <tr> <td><input type="checkbox" name="checkbox" value="checkbox" /></td> <td><input type="text" name="No" value='<?php echo $No;?>' readonly=""/></td> <td><input type="text" name="descofgoods" value='<?php echo $descofgoods;?>' /></td> <td><input type="text" name="qty" maxlength="50000000" id="qty"/></td> <td><input type="text" name="Rate" value='<?php echo $Rate;?>' id="rate" onclick="ram()";></td> <td><input type="text" name="Amount" id="amt"/></td> </tr> <?php $i++;} ?> <tr> <th colspan="2"><a href="pp.php?msg=<?php echo $nam;?>">Print</a></th> </tr> </table> <label></label> </form> </body> </html>

    Read the article

  • How do I target a div without a class or id but with all these specific style-attributes

    - by Ben
    I'm restyling a certain page where I don't have access to all the source-HTML. So I'm left over with some hard to target elements within a page I need removed. For example the page is swamped with <div style="float: left; width: 10.25px; height: 284px;"></div>. To get rid of them I tried this in CSS: div[style="float: left; width: 10.25px; height: 284px;"] { display:none !important; } I'd like to fix this using CSS, because the the HTML that needs to be removed is updated using ajax. How do I target a div without a class or id but with all these specific style-attributes? Some more of the source-code (took a while to organize the parsed source): <div> <span class="Block BigPhotoList_Block"> <span class="Photo BigPhotoList_Photo" style="height: 200px"> <a href="/Webwinkel-Product-83760187/Le-Coq-Sportif-Angers-Low.html.html"> <span style="background-image:url(http://61955.static.securearea.eu/Files/2/61000/61955/ProductPhotos/MaxContent/144036303.jpg);" class="Canvas BigPhotoList_Canvas" title="Le-Coq-Sportif-Angers-Low"></span> </a> </span> <span class="Title BigPhotoList_Title"> <a href="/Webwinkel-Product-83760187/Le-Coq-Sportif-Angers-Low.html.html"> Le Coq Sportif Angers Low </a> </span> <span class="Price BigPhotoList_Price" style="font-size: 120%;"> € 89,95 </span> </span> <div style="float: left; width: 10.25px; height: 284px; border-right: 1px dashed #A0A0A0;" class="BigPhotoList_Stippel"></div> <div style="float: left; width: 10.25px; height: 284px;"></div> <span class="Block BigPhotoList_Block"> <span class="Photo BigPhotoList_Photo" style="height: 200px"> <a href="/Webwinkel-Product-83760185/Le-Coq-Sportif-Auveurne-Low.html"> <span style="background-image:url(http://61955.static.securearea.eu/Files/2/61000/61955/ProductPhotos/MaxContent/144036301.jpg);" class="Canvas BigPhotoList_Canvas" title="Le-Coq-Sportif-Auveurne-Low"></span> </a> </span> <span class="Title BigPhotoList_Title"> <a href="/Webwinkel-Product-83760185/Le-Coq-Sportif-Auveurne-Low.html"> Le Coq Sportif Auveurne Low </a> </span> <span class="Price BigPhotoList_Price" style="font-size: 120%;"> € 79,95 </span> </span> <div style="float: left; width: 10.25px; height: 284px; border-right: 1px dashed #A0A0A0;" class="BigPhotoList_Stippel"></div> <div style="float: left; width: 10.25px; height: 284px;"></div> <span class="Block BigPhotoList_Block"> <span class="Photo BigPhotoList_Photo" style="height: 200px"> <a href="/Webwinkel-Product-83760191/Le-Coq-Sportif-Bordeaux-Low.html"> <span style="background-image:url(http://61955.static.securearea.eu/Files/2/61000/61955/ProductPhotos/MaxContent/144036307.jpg);" class="Canvas BigPhotoList_Canvas" title="Le-Coq-Sportif-Bordeaux-Low"></span> </a> </span> <span class="Title BigPhotoList_Title"> <a href="/Webwinkel-Product-83760191/Le-Coq-Sportif-Bordeaux-Low.html"> Le Coq Sportif Bordeaux Low </a> </span> <span class="Price BigPhotoList_Price" style="font-size: 120%;"> € 99,95 </span> </span> <span class="Block BigPhotoList_Block"> <span class="Photo BigPhotoList_Photo" style="height: 200px"> <a href="/Webwinkel-Product-83760181/Le-Coq-Sportif-Cannet-Low.html"> <span style="background-image:url(http://61955.static.securearea.eu/Files/2/61000/61955/ProductPhotos/MaxContent/144036297.jpg);" class="Canvas BigPhotoList_Canvas" title="Le-Coq-Sportif-Cannet-Low"></span> </a> </span> <span class="Title BigPhotoList_Title"> <a href="/Webwinkel-Product-83760181/Le-Coq-Sportif-Cannet-Low.html"> Le Coq Sportif Cannet Low </a> </span> <span class="Discount BigPhotoList_Discount" style="font-size: 120%;"> € 99,95 </span> <span class="Price BigPhotoList_Price" style="font-size: 120%;"> € 94,95 </span> </span> <div style="float: left; width: 10.25px; height: 284px; border-right: 1px dashed #A0A0A0;" class="BigPhotoList_Stippel"></div> <div style="float: left; width: 10.25px; height: 284px;"></div> <span class="Block BigPhotoList_Block"> <span class="Photo BigPhotoList_Photo" style="height: 200px"> <a href="/Webwinkel-Product-83760183/Le-Coq-Sportif-Rodez-Low.html"> <span style="background-image:url(http://61955.static.securearea.eu/Files/2/61000/61955/ProductPhotos/MaxContent/144036299.jpg);" class="Canvas BigPhotoList_Canvas" title="Le-Coq-Sportif-Rodez-Low"></span> </a> </span> <span class="Title BigPhotoList_Title"> <a href="/Webwinkel-Product-83760183/Le-Coq-Sportif-Rodez-Low.html"> Le Coq Sportif Rodez Low </a> </span> <span class="Price BigPhotoList_Price" style="font-size: 120%;"> € 99,95 </span> </span> <div style="float: left; width: 10.25px; height: 284px; border-right: 1px dashed #A0A0A0;" class="BigPhotoList_Stippel"></div> <div style="float: left; width: 10.25px; height: 284px;"></div> <span class="Block BigPhotoList_Block"> <span class="Photo BigPhotoList_Photo" style="height: 200px"> <a href="/Webwinkel-Product-83760189/Le-Coq-Sportif-Sedan-Low.html"> <span style="background-image:url(http://61955.static.securearea.eu/Files/2/61000/61955/ProductPhotos/MaxContent/144036305.jpg);" class="Canvas BigPhotoList_Canvas" title="Le-Coq-Sportif-Sedan-Low"></span> </a> </span> <span class="Title BigPhotoList_Title"> <a href="/Webwinkel-Product-83760189/Le-Coq-Sportif-Sedan-Low.html"> Le Coq Sportif Sedan Low </a> </span> <span class="Discount BigPhotoList_Discount" style="font-size: 120%;"> € 109,95 </span> <span class="Price BigPhotoList_Price" style="font-size: 120%;"> € 99,95 </span> </span> </div>

    Read the article

  • Flash AS3 Mysterious Blinking MovieClip

    - by Ben
    This is the strangest problem I've faced in flash so far. I have no idea what's causing it. I can provide a .swf if someone wants to actually see it, but I'll describe it as best I can. I'm creating bullets for a tank object to shoot. The tank is a child of the document class. The way I am creating the bullet is: var bullet:Bullet = new Bullet(); (parent as MovieClip).addChild(bullet); The bullet itself simply moves itself in a direction using code like this.x += 5; The problem is the bullets will trace for their creation and destruction at the correct times, however the bullet is sometimes not visible until half way across the screen, sometimes not at all, and sometimes for the whole traversal. Oddly removing the timer I have on bullet creation seems to solve this. The timer is implemented as such: if(shot_timer == 0) { shoot(); // This contains the aforementioned bullet creation method shot_timer = 10; My enter frame handler for the tank object controls the timer and decrements it every frame if it is greater than zero. Can anyone suggest why this could be happening? EDIT: As requested, full code: Bullet.as package { import flash.display.MovieClip; import flash.events.Event; public class Bullet extends MovieClip { public var facing:int; private var speed:int; public function Bullet():void { trace("created"); speed = 10; addEventListener(Event.ADDED_TO_STAGE,addedHandler); } private function addedHandler(e:Event):void { addEventListener(Event.ENTER_FRAME,enterFrameHandler); removeEventListener(Event.ADDED_TO_STAGE,addedHandler); } private function enterFrameHandler(e:Event):void { //0 - up, 1 - left, 2 - down, 3 - right if(this.x > 720 || this.x < 0 || this.y < 0 || this.y > 480) { removeEventListener(Event.ENTER_FRAME,enterFrameHandler); trace("destroyed"); (parent as MovieClip).removeChild(this); return; } switch(facing) { case 0: this.y -= speed; break; case 1: this.x -= speed; break; case 2: this.y += speed; break; case 3: this.x += speed; break; } } } } Tank.as: package { import flash.display.MovieClip; import flash.events.KeyboardEvent; import flash.events.Event; import flash.ui.Keyboard; public class Tank extends MovieClip { private var right:Boolean = false; private var left:Boolean = false; private var up:Boolean = false; private var down:Boolean = false; private var facing:int = 0; //0 - up, 1 - left, 2 - down, 3 - right private var horAllowed:Boolean = true; private var vertAllowed:Boolean = true; private const GRID_SIZE:int = 100; private var shooting:Boolean = false; private var shot_timer:int = 0; private var speed:int = 2; public function Tank():void { addEventListener(Event.ADDED_TO_STAGE,stageAddHandler); addEventListener(Event.ENTER_FRAME, enterFrameHandler); } private function stageAddHandler(e:Event):void { stage.addEventListener(KeyboardEvent.KEY_DOWN,checkKeys); stage.addEventListener(KeyboardEvent.KEY_UP,keyUps); removeEventListener(Event.ADDED_TO_STAGE,stageAddHandler); } public function checkKeys(event:KeyboardEvent):void { if(event.keyCode == 32) { //trace("Spacebar is down"); shooting = true; } if(event.keyCode == 39) { //trace("Right key is down"); right = true; } if(event.keyCode == 38) { //trace("Up key is down"); // lol up = true; } if(event.keyCode == 37) { //trace("Left key is down"); left = true; } if(event.keyCode == 40) { //trace("Down key is down"); down = true; } } public function keyUps(event:KeyboardEvent):void { if(event.keyCode == 32) { event.keyCode = 0; shooting = false; //trace("Spacebar is not down"); } if(event.keyCode == 39) { event.keyCode = 0; right = false; //trace("Right key is not down"); } if(event.keyCode == 38) { event.keyCode = 0; up = false; //trace("Up key is not down"); } if(event.keyCode == 37) { event.keyCode = 0; left = false; //trace("Left key is not down"); } if(event.keyCode == 40) { event.keyCode = 0; down = false; //trace("Down key is not down") // O.o } } public function checkDirectionPermissions(): void { if(this.y % GRID_SIZE < 5 || GRID_SIZE - this.y % GRID_SIZE < 5) { horAllowed = true; } else { horAllowed = false; } if(this.x % GRID_SIZE < 5 || GRID_SIZE - this.x % GRID_SIZE < 5) { vertAllowed = true; } else { vertAllowed = false; } if(!horAllowed && !vertAllowed) { realign(); } } public function realign():void { if(!horAllowed) { if(this.x % GRID_SIZE < GRID_SIZE / 2) { this.x -= this.x % GRID_SIZE; } else { this.x += (GRID_SIZE - this.x % GRID_SIZE); } } if(!vertAllowed) { if(this.y % GRID_SIZE < GRID_SIZE / 2) { this.y -= this.y % GRID_SIZE; } else { this.y += (GRID_SIZE - this.y % GRID_SIZE); } } } public function enterFrameHandler(Event):void { //trace(shot_timer); if(shot_timer > 0) { shot_timer--; } movement(); firing(); } public function firing():void { if(shooting) { if(shot_timer == 0) { shoot(); shot_timer = 10; } } } public function shoot():void { var bullet = new Bullet(); bullet.facing = facing; //0 - up, 1 - left, 2 - down, 3 - right switch(facing) { case 0: bullet.x = this.x; bullet.y = this.y - this.height / 2; break; case 1: bullet.x = this.x - this.width / 2; bullet.y = this.y; break; case 2: bullet.x = this.x; bullet.y = this.y + this.height / 2; break; case 3: bullet.x = this.x + this.width / 2; bullet.y = this.y; break; } (parent as MovieClip).addChild(bullet); } public function movement():void { //0 - up, 1 - left, 2 - down, 3 - right checkDirectionPermissions(); if(horAllowed) { if(right) { orient(3); realign(); this.x += speed; } if(left) { orient(1); realign(); this.x -= speed; } } if(vertAllowed) { if(up) { orient(0); realign(); this.y -= speed; } if(down) { orient(2); realign(); this.y += speed; } } } public function orient(dest:int):void { //trace("facing: " + facing); //trace("dest: " + dest); var angle = facing - dest; this.rotation += (90 * angle); facing = dest; } } }

    Read the article

  • Asp controls Id generation inside repeater

    - by toraan
    I define some controls inside repeater itemtemplate, the problem is with the Id that are generated automatically. This is my page: <asp:Repeater ID="rptThreads" runat="server" onitemcreated="rptThreads_ItemCreated"> <HeaderTemplate> <table cellpadding="0px" cellspacing="0"> </HeaderTemplate> <ItemTemplate> <tr style="height:50px"> <td> <asp:PlaceHolder ID="plcItemTitle" runat="server"> <asp:Panel id="titleContainer" runat="server" style="position:absolute;"> <asp:HyperLink ID="lnkTitle" runat="server" style="float:left;padding-right:10px;" Text='<%# Container.DataItem%>'/> <asp:Panel id="pnlEditButtons" runat="server" Visible="false" style="vertical-align:middle;z-index:100;display:none;float:left;" > <asp:ImageButton ID="imgbtn1" runat="server" ImageUrl="~/Images/misc/edit.png" /> <asp:ImageButton ID="imgbtn2" runat="server" ImageUrl="~/Images/misc/Rename.png" /> </asp:Panel> </asp:Panel> </asp:PlaceHolder> </td> </tr> </ItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> Now I will try to describe the problem: code-behind: protected void Page_Load(object sender, EventArgs e) { int [] array = {1,2,3,4,5}; rptThreads.DataSource = array; rptThreads.DataBind(); } protected void rptThreads_ItemCreated(object sender, RepeaterItemEventArgs e) { if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { Panel editButtonsPanel = e.Item.FindControl("pnlEditButtons") as Panel; editButtonsPanel.Visible = true; Panel containerPanel = e.Item.FindControl("titleContainer") as Panel; //Point of Interest!!!! containerPanel.Attributes.Add("onmouseover", "ShowEditButtons('" + editButtonsPanel.ClientID + "');"); } } If I run the page as is, the generated html will be the following (I show only the first 2 items): <table cellpadding="0px" cellspacing="0"> <tr style="height:50px"> <td> <div id="titleContainer" onmouseover="ShowEditButtons('pnlEditButtons');" style="position:absolute;"> <a id="lnkTitle" style="float:left;padding-right:10px;">1</a> <div id="pnlEditButtons" style="vertical-align:middle;z-index:100;display:none;float:left;"> <input type="image" name="imgbtn1" id="imgbtn1" src="Images/misc/edit.png" style="border-width:0px;" /> <input type="image" name="imgbtn2" id="imgbtn2" src="Images/misc/Rename.png" style="border-width:0px;" /> </div> </div> </td> </tr> <tr style="height:50px"> <td> <div id="titleContainer" onmouseover="ShowEditButtons('pnlEditButtons');" style="position:absolute;"> <a id="lnkTitle" style="float:left;padding-right:10px;">2</a> <div id="pnlEditButtons" style="vertical-align:middle;z-index:100;display:none;float:left;"> <input type="image" name="imgbtn1" id="imgbtn1" src="Images/misc/edit.png" style="border-width:0px;" /> <input type="image" name="imgbtn2" id="imgbtn2" src="Images/misc/Rename.png" style="border-width:0px;" /> </div> </div> </td> </tr> As you can see all divs get the SAME ID, THIS I DONT WANT!!! But If I omit this line form the ItemCreated event: containerPanel.Attributes.Add("onmouseover", "ShowEditButtons('" + editButtonsPanel.ClientID + "');"); The generated HTML will be the following: <table cellpadding="0px" cellspacing="0"> <tr style="height:50px"> <td> <div id="rptThreads_ctl01_titleContainer" style="position:absolute;"> <a id="rptThreads_ctl01_lnkTitle" style="float:left;padding-right:10px;">1</a> <div id="rptThreads_ctl01_pnlEditButtons" style="vertical-align:middle;z-index:100;display:none;float:left;"> <input type="image" name="rptThreads$ctl01$imgbtn1" id="rptThreads_ctl01_imgbtn1" src="Images/misc/edit.png" style="border-width:0px;" /> <input type="image" name="rptThreads$ctl01$imgbtn2" id="rptThreads_ctl01_imgbtn2" src="Images/misc/Rename.png" style="border-width:0px;" /> </div> </div> </td> </tr> <tr style="height:50px"> <td> <div id="rptThreads_ctl02_titleContainer" style="position:absolute;"> <a id="rptThreads_ctl02_lnkTitle" style="float:left;padding-right:10px;">2</a> <div id="rptThreads_ctl02_pnlEditButtons" style="vertical-align:middle;z-index:100;display:none;float:left;"> <input type="image" name="rptThreads$ctl02$imgbtn1" id="rptThreads_ctl02_imgbtn1" src="Images/misc/edit.png" style="border-width:0px;" /> <input type="image" name="rptThreads$ctl02$imgbtn2" id="rptThreads_ctl02_imgbtn2" src="Images/misc/Rename.png" style="border-width:0px;" /> </div> </div> </td> </tr> All divs get unique IDs, and this I do want My questions are: 1)why it happens? why this line of code messup the ids? 2)how can have the unique ID's and assign javascript in codebehind? I can add this on aspx (it will wotk and I will get unique ids): onmouseover='<%# "javascript:ShowEditButtons(\""+ Container.FindControl("pnlEditButtons").ClientID+ "\");" %>' But I must do it in codebehind because I need to set the javascript only if server validate some things.

    Read the article

  • How to autostart this slide

    - by lchales
    Hello there: first of all i have no idea on coding or anything related, simple question: is there any simple way to tell this code to autostart the slide? at the current moment the images change on click. currently the index page only have one image, what i want is to add a few but without the need to click to see the next one here is the code from my index: <script type="text/javascript"> //<![CDATA[ /* the images preload plugin */ (function($) { $.fn.preload = function(options) { var opts = $.extend({}, $.fn.preload.defaults, options), o = $.meta ? $.extend({}, opts, this.data()) : opts; var c = this.length, l = 0; return this.each(function() { var $i = $(this); $('<img/>').load(function(i){ ++l; if(l == c) o.onComplete(); }).attr('src',$i.attr('src')); }); }; $.fn.preload.defaults = { onComplete : function(){return false;} }; })(jQuery); //]]> </script><script type="text/javascript"> //<![CDATA[ $(function() { var $tf_bg = $('#tf_bg'), $tf_bg_images = $tf_bg.find('img'), $tf_bg_img = $tf_bg_images.eq(0), $tf_thumbs = $('#tf_thumbs'), total = $tf_bg_images.length, current = 0, $tf_content_wrapper = $('#tf_content_wrapper'), $tf_next = $('#tf_next'), $tf_prev = $('#tf_prev'), $tf_loading = $('#tf_loading'); //preload the images $tf_bg_images.preload({ onComplete : function(){ $tf_loading.hide(); init(); } }); //shows the first image and initializes events function init(){ //get dimentions for the image, based on the windows size var dim = getImageDim($tf_bg_img); //set the returned values and show the image $tf_bg_img.css({ width : dim.width, height : dim.height, left : dim.left, top : dim.top }).fadeIn(); //resizing the window resizes the $tf_bg_img $(window).bind('resize',function(){ var dim = getImageDim($tf_bg_img); $tf_bg_img.css({ width : dim.width, height : dim.height, left : dim.left, top : dim.top }); }); //expand and fit the image to the screen $('#tf_zoom').live('click', function(){ if($tf_bg_img.is(':animated')) return false; var $this = $(this); if($this.hasClass('tf_zoom')){ resize($tf_bg_img); $this.addClass('tf_fullscreen') .removeClass('tf_zoom'); } else{ var dim = getImageDim($tf_bg_img); $tf_bg_img.animate({ width : dim.width, height : dim.height, top : dim.top, left : dim.left },350); $this.addClass('tf_zoom') .removeClass('tf_fullscreen'); } } ); //click the arrow down, scrolls down $tf_next.bind('click',function(){ if($tf_bg_img.is(':animated')) return false; scroll('tb'); }); //click the arrow up, scrolls up $tf_prev.bind('click',function(){ if($tf_bg_img.is(':animated')) return false; scroll('bt'); }); //mousewheel events - down / up button trigger the scroll down / up $(document).mousewheel(function(e, delta) { if($tf_bg_img.is(':animated')) return false; if(delta > 0) scroll('bt'); else scroll('tb'); return false; }); //key events - down / up button trigger the scroll down / up $(document).keydown(function(e){ if($tf_bg_img.is(':animated')) return false; switch(e.which){ case 38: scroll('bt'); break; case 40: scroll('tb'); break; } }); } //show next / prev image function scroll(dir){ //if dir is "tb" (top -> bottom) increment current, //else if "bt" decrement it current = (dir == 'tb')?current + 1:current - 1; //we want a circular slideshow, //so we need to check the limits of current if(current == total) current = 0; else if(current < 0) current = total - 1; //flip the thumb $tf_thumbs.flip({ direction : dir, speed : 400, onBefore : function(){ //the new thumb is set here var content = '<span id="tf_zoom" class="tf_zoom"><\/span>'; content +='<img src="' + $tf_bg_images.eq(current).attr('longdesc') + '" alt="Thumb' + (current+1) + '"/>'; $tf_thumbs.html(content); } }); //we get the next image var $tf_bg_img_next = $tf_bg_images.eq(current), //its dimentions dim = getImageDim($tf_bg_img_next), //the top should be one that makes the image out of the viewport //the image should be positioned up or down depending on the direction top = (dir == 'tb')?$(window).height() + 'px':-parseFloat(dim.height,10) + 'px'; //set the returned values and show the next image $tf_bg_img_next.css({ width : dim.width, height : dim.height, left : dim.left, top : top }).show(); //now slide it to the viewport $tf_bg_img_next.stop().animate({ top : dim.top },700); //we want the old image to slide in the same direction, out of the viewport var slideTo = (dir == 'tb')?-$tf_bg_img.height() + 'px':$(window).height() + 'px'; $tf_bg_img.stop().animate({ top : slideTo },700,function(){ //hide it $(this).hide(); //the $tf_bg_img is now the shown image $tf_bg_img = $tf_bg_img_next; //show the description for the new image $tf_content_wrapper.children() .eq(current) .show(); }); //hide the current description $tf_content_wrapper.children(':visible') .hide() } //animate the image to fit in the viewport function resize($img){ var w_w = $(window).width(), w_h = $(window).height(), i_w = $img.width(), i_h = $img.height(), r_i = i_h / i_w, new_w,new_h; if(i_w > i_h){ new_w = w_w; new_h = w_w * r_i; if(new_h > w_h){ new_h = w_h; new_w = w_h / r_i; } } else{ new_h = w_w * r_i; new_w = w_w; } $img.animate({ width : new_w + 'px', height : new_h + 'px', top : '0px', left : '0px' },350); } //get dimentions of the image, //in order to make it full size and centered function getImageDim($img){ var w_w = $(window).width(), w_h = $(window).height(), r_w = w_h / w_w, i_w = $img.width(), i_h = $img.height(), r_i = i_h / i_w, new_w,new_h, new_left,new_top; if(r_w > r_i){ new_h = w_h; new_w = w_h / r_i; } else{ new_h = w_w * r_i; new_w = w_w; } return { width : new_w + 'px', height : new_h + 'px', left : (w_w - new_w) / 2 + 'px', top : (w_h - new_h) / 2 + 'px' }; } }); //]]> </script>

    Read the article

  • css menu for cross browser...mobile and desktop

    - by user1763319
    I made a cross browser drop down menu, which works well with IE6. However, I have problems with other browsers such as IE9, Firefox, Chrome... etc. How can I modify my HTML and CSS to get the same effect that works in IE6? Link to JSFiddle Here is my CSS: <style> .bar ul,li{ z-index:999; margin:0; padding:0; } .bar { color: #FFFFFF; font-weight: bold; text-align: center; } .bar a { padding: 11px; } .bar a:visited { color: #FFFFFF; font-weight: bold; text-decoration:none } .bar a:link { color: #FFFFFF; font-weight: bold; text-decoration:none } .bar a:hover { color: #FFFFFF; font-weight: bold; text-decoration:underline } #nav0{ list-style:none; font-weight:bold; /* Clear floats */ float:left; width:100%; } #nav0 li{ float:left; margin-right:10px; position:relative; } #nav0 a{ display:block; padding:5px; color:#fff; background:#003399; text-decoration:none; } #nav0 a:hover{ color:#fff; background:#333; text-decoration:underline; } /*--- DROPDOWN ---*/ #nav0 ul{ background:#fff; background:rgba(255,255,255,0); list-style:none; position:absolute; left:-9999px; } #nav0 ul li{ padding-top:1px; float:none; } #nav0 ul a{ white-space:nowrap; } #nav0 li:hover ul{ left:0; } #nav0 li:hover a{ text-decoration:underline; } #nav0 li:hover ul a{ text-decoration:none; } #nav0 li:hover ul li a:hover{ background:#333; } #nav0 li ul li a{ text-align: left; } #nav0 li:hover ul li ul { display:block; background:#003399; float:left; position:relative; padding-left:20px; } #nav0 li ul li:hover ul { display:block; background:#003399; float:left; position:relative; padding-left:20px; } </style> Here is my HTML: <body bgcolor="#79A6A6"> <div id="page" align="center"> <table class="bar" border="0" width="960" cellspacing="0" cellpadding="0" id="table_bar" bgcolor="#003399"> <tr> <td> <ul id="nav0"> <li><a><strong>Home</strong> </a> <ul> <li><a href="#" title>Top Item 1</a><ul> <li><a href="#" title="-">Item 1</a></li> <li><a href="#" title="-">Item 2</a></li> </ul> </li> <li><a href="#" title>Top Item 2</a><ul> <li><a href="@" title>Item 3</a></li> <li><a href="@" title>Item 4</a></li> </ul> </li> </ul> </li> <li><a><strong>Home</strong> </a> <ul> <li><a href="#" title>Top Title</a><ul> <li><a href="#" title="-">title</a></li> <li><a href="#" title="-">title123456789</a></li> </ul> </li> <li><a href="#" title>Top Hello</a><ul> <li><a href="@" title>hello</a></li> <li><a href="@" title>hello123456789</a></li> </ul> </li> </ul> </li> </ul> </li> <ul> </ul> </td> <td width="50" style="text-align: left">&nbsp;</td> </tr> </table> </div> </body> In ie6 Home Top Item 1 Item 1 Item 2 Top Item 2 Item3 Item4 In ie9 Home Top Item 1 Top Item 2 Item 2 Item 3 Item 4

    Read the article

  • URGENT: IE 6/7/8 problem!- Right Column is not aligned and is pushed down.

    - by Kalpesh Vasta
    Hi Guys, I'm new to this but here goes. I have been developing this website http://www.panelmaster.co.uk and i have managed to solve the majority of design problems but one! If you take a look at the site in IE the right column seems to drop down and is not aligned with the right and centre column. This problem only occurs in IE as upon testing i found it was fine in firefox and safari. I have provided below the CSS for the website. I would appreciate if you guys can help me with the problem asap. Thanks in advance. :) ========================== body { margin: 0; padding: 0; line-height: 1.5em; font-family: Tahoma, Geneva, sans-serif; font-size: 12px; color: #666; background-image: url(images/templatemo_body_top.jpg); background-color: #90857c; background-repeat: repeat-x; background-position: top; text-align: left; } a:link, a:visited { color: #073475; text-decoration: none; font-weight: normal; } a:active, a:hover { color: #073475; text-decoration: underline; } h3 { color: #1e7da9; font-size: 16px; font-weight: bold; } h2 { color: #1e7da9; font-size: 16px; font-weight: bold; } h1 { color: #696969; font-size: 20px; font-weight: bold; } p { margin: 0px; padding: 0px; } img { margin: 0px; padding: 0px; border: none; } .cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; } .cleaner_h30 { clear: both; width:100%; height: 30px; } .cleaner_h40 { clear: both; width:100%; height: 40px; } .float_l { float: left; } .float_r { float: right; } .margin_r20 { margin-right: 20px; } templatemo_body_wrapper { width: 100%; background: url(images/templatemo_body_bottom.png) repeat-x bottom center; } templatemo_wrapper { width: 970px; padding: 0 10px; margin: 0 auto; background: url(images/templatemo_wrapper_top.jpg) no-repeat top center; } /* header */ templatemo_header { clear: both; width: 890px; height: 60px; padding: 20px 40px } templatemo_header #site_title { float: left; padding-top: 15px; } site_title a { font-size: 24px; color: #FFFFFF; font-weight: bold; text-decoration: none; } site_title a:hover { font-weight: bold; text-decoration: none; } site_title a span { display: block; margin-top: 5px; font-size: 14px; color: #fff; font-weight: bold; letter-spacing: 2px; } /* end of header */ /* menu */ templatemo_menu { clear: both; width: 970px; height: 80px; background: url(images/templatemo_menubar.png) no-repeat; } search_box { width: 990px; height: 35px; text-align: right; } search_box form { margin: 0; padding: 5px 40px; } search_box #input_field { height: 20px; width: 300px; color: #000000; font-size: 12px; font-variant: normal; line-height: normal; border: 1px solid #CCCCCC; background: #FFFFFF; } search_box #submit_btn { height: 24px; width: 100px; cursor: pointer; font-size: 12px; text-align: center; vertical-align: bottom; white-space: pre; outline: none; color:#666666; border: 1px solid #CCCCCC; background: #FFFFFF; } templatemo_menu ul { width: 890px; height: 35px; margin: 0; padding: 7px 40px; list-style: none; } templatemo_menu ul li { padding: 0px; margin: 0px; display: inline; } templatemo_menu ul li a { float: left; display: block; margin-right: 40px; font-size: 13px; text-decoration: none; color: #fff; font-weight: normal; outline: none; } templatemo_menu ul li a:hover, #templatemo_menu ul .current { color: #162127; } /* end of menu */ /* contetnt */ templatemo_content_wrapper { clear: both; padding: 0px 0; } templatemo_content { float: left; margin-left: 10px; width: 550px; } banner { margin: 0 0 10px 0; } templatemo_content #content_top { width: 550px; height: 20px; background: url(images/templatemo_content_top.png) no-repeat; } templatemo_content #content_bottom { width: 550px; height: 20px; background: url(images/templatemo_content_bottom.png) no-repeat; } templatemo_content #content_middle { width: 510px; padding: 5px 20px 0px 20px; background: url(images/templatemo_content_middle.png) repeat-y; } content_middle p { text-align: justify; } .templatemo_sidebar_wrapper { width: 200px; } .templatemo_sidebar { width: 197px; padding-right: 3px; background: url(images/templatemo_sidebar_middle.png) repeat-y; } .templatemo_sidebar_top { width: 200px; height: 20px; background: url(images/templatemo_sidebar_top.png) no-repeat; } .templatemo_sidebar_bottom { width: 200px; height: 20px; background: url(images/templatemo_sidebar_bottom.png) no-repeat; } .templatemo_sidebar .sidebar_box { clear: both; padding-bottom: 20px; } .sidebar_box1 { padding: 15px; } .sidebar_box h2 { color: #2d84ad; font-size: 16px; padding-left: 25px; font-weight: bold; margin: 0 0 10px 10px; background: url(images/templatemo_sidebar_h1.jpg) left center no-repeat; } .sidebar_box .sidebar_box_content { padding: 15px; background: url(images/templatemo_sidebar_box_top.png) top repeat-x; } .sidebar_box img { border: 1px solid #999; margin-bottom: 5px; } .sidebar_box .discount { margin: 5px 0 0 0; font-weight: bold; } .sidebar_box .discount span { color: #C00; } .left_sidebar_box .discount a { font-weight: bold; color: #000; } .sidebar_box .categories_list { margin: 0; padding: 0; list-style: none; } .categories_list li { padding: 0; margin: 0; } .categories_list li a { display: block; color: #201f1c; padding: 5px 0 5px 20px; background: url(images/list.png) center left no-repeat; } .categories_list li a:hover { color: #439ac3; text-decoration: none; } .news_box { clear: both; margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid #999; } .news_box h4 { padding: 2px 0; margin: 0; } .news_box h4 a { font-size: 12px; font-weight: normal; color: #1893f2; } newsletter_box label { display: block; margin-bottom: 10px; } newsletter_box .input_field { height: 20px; width: 155px; padding: 0 5px; margin-bottom: 10px; color: #000000; font-size: 12px; font-variant: normal; line-height: normal; } newsletter_box .submit_btn { float: right; height: 30px; width: 80px; margin: 0px; padding: 3px 0 15px 0; cursor: pointer; font-size: 12px; text-align: center; vertical-align: bottom; white-space: pre; outline: none; } .product_box { float: left; width: 223px; padding: 10px; margin-bottom: 20px; border: 1px solid #CCC; text-align: center; } .product_box img { margin-bottom: 10px; } .product_box h3 { color: #2a2522; font-size: 12px; margin: 0 0 10px; } .product_box p { margin-bottom: 10px; } .product_box p span { color: #cf5902; font-size: 14px; font-weight: bold; } .product_box .detail { float: right; } .product_box .addtocard { float: left; font-weight: bold; padding-right: 20px; background: url(images/templatemo_shopping_cart.png) bottom right no-repeat; } /* end of content */ /* footer */ templatemo_footer_wrapper { background: url(images/templatemo_footer.png) repeat-x; } templatemo_footer { width: 910px; height: 85px; padding: 50px 40px 30px 40px; margin: 0 auto; text-align: center; color: #a9a098; } templatemo_footer a { color: #d7d1cc; font-weight: normal; } templatemo_footer a:hover { text-decoration: none; color: #FFFF33; } templatemo_footer .footer_menu { margin: 0 0 30px 0; padding: 0px; list-style: none; } .footer_menu li { margin: 0px; padding: 0 20px; display: inline; border-right: 1px solid #d7d1cc; } .footer_menu li a { color: #d7d1cc; } .footer_menu .last_menu { border: none; } /* end of footer */ /twitter/ twitter_div {border-top: 0px;} twitter_div a {color: #0000ff !important;} twitter_update_list {margin-left: -1em !important; margin-bottom: 0px !important;} twitter_update_list li {list-style-type: none; padding-right: 5px; } twitter_update_list li a {color: #0000ff; padding-right: 5px;} twitter_div {border-bottom: 0px; padding-bottom: 10px; padding-top:6px; padding-right: 5px;} twitter_div a, #twitter_update_list li a {text-decoration: none !important;} twitter_div a:hover, #twitter_update_list li a:hover {text-decoration:underline !important;}

    Read the article

  • Right Hand Column Does Not Align Properly in IE6/7/8

    - by Kalpesh Vasta
    Hi Guys, I'm new to this but here goes. I have been developing this website http://www.panelmaster.co.uk and i have managed to solve the majority of design problems but one! If you take a look at the site in IE the right column seems to drop down and is not aligned with the right and centre column. This problem only occurs in IE as upon testing i found it was fine in firefox and safari. I have provided below the CSS for the website. I would appreciate if you guys can help me with the problem. Thanks in advance. :) ========================== body { margin: 0; padding: 0; line-height: 1.5em; font-family: Tahoma, Geneva, sans-serif; font-size: 12px; color: #666; background-image: url(images/templatemo_body_top.jpg); background-color: #90857c; background-repeat: repeat-x; background-position: top; text-align: left; } a:link, a:visited { color: #073475; text-decoration: none; font-weight: normal; } a:active, a:hover { color: #073475; text-decoration: underline; } h3 { color: #1e7da9; font-size: 16px; font-weight: bold; } h2 { color: #1e7da9; font-size: 16px; font-weight: bold; } h1 { color: #696969; font-size: 20px; font-weight: bold; } p { margin: 0px; padding: 0px; } img { margin: 0px; padding: 0px; border: none; } .cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; } .cleaner_h30 { clear: both; width:100%; height: 30px; } .cleaner_h40 { clear: both; width:100%; height: 40px; } .float_l { float: left; } .float_r { float: right; } .margin_r20 { margin-right: 20px; } #templatemo_body_wrapper { width: 100%; background: url(images/templatemo_body_bottom.png) repeat-x bottom center; } #templatemo_wrapper { width: 970px; padding: 0 10px; margin: 0 auto; background: url(images/templatemo_wrapper_top.jpg) no-repeat top center; } /* header */ #templatemo_header { clear: both; width: 890px; height: 60px; padding: 20px 40px } #templatemo_header #site_title { float: left; padding-top: 15px; } #site_title a { font-size: 24px; color: #FFFFFF; font-weight: bold; text-decoration: none; } #site_title a:hover { font-weight: bold; text-decoration: none; } #site_title a span { display: block; margin-top: 5px; font-size: 14px; color: #fff; font-weight: bold; letter-spacing: 2px; } /* end of header */ /* menu */ #templatemo_menu { clear: both; width: 970px; height: 80px; background: url(images/templatemo_menubar.png) no-repeat; } #search_box { width: 990px; height: 35px; text-align: right; } #search_box form { margin: 0; padding: 5px 40px; } #search_box #input_field { height: 20px; width: 300px; color: #000000; font-size: 12px; font-variant: normal; line-height: normal; border: 1px solid #CCCCCC; background: #FFFFFF; } #search_box #submit_btn { height: 24px; width: 100px; cursor: pointer; font-size: 12px; text-align: center; vertical-align: bottom; white-space: pre; outline: none; color:#666666; border: 1px solid #CCCCCC; background: #FFFFFF; } #templatemo_menu ul { width: 890px; height: 35px; margin: 0; padding: 7px 40px; list-style: none; } #templatemo_menu ul li { padding: 0px; margin: 0px; display: inline; } #templatemo_menu ul li a { float: left; display: block; margin-right: 40px; font-size: 13px; text-decoration: none; color: #fff; font-weight: normal; outline: none; } #templatemo_menu ul li a:hover, #templatemo_menu ul .current { color: #162127; } /* end of menu */ /* contetnt */ #templatemo_content_wrapper { clear: both; padding: 0px 0; } #templatemo_content { float: left; margin-left: 10px; width: 550px; } #banner { margin: 0 0 10px 0; } #templatemo_content #content_top { width: 550px; height: 20px; background: url(images/templatemo_content_top.png) no-repeat; } #templatemo_content #content_bottom { width: 550px; height: 20px; background: url(images/templatemo_content_bottom.png) no-repeat; } #templatemo_content #content_middle { width: 510px; padding: 5px 20px 0px 20px; background: url(images/templatemo_content_middle.png) repeat-y; } #content_middle p { text-align: justify; } .templatemo_sidebar_wrapper { width: 200px; } .templatemo_sidebar { width: 197px; padding-right: 3px; background: url(images/templatemo_sidebar_middle.png) repeat-y; } .templatemo_sidebar_top { width: 200px; height: 20px; background: url(images/templatemo_sidebar_top.png) no-repeat; } .templatemo_sidebar_bottom { width: 200px; height: 20px; background: url(images/templatemo_sidebar_bottom.png) no-repeat; } .templatemo_sidebar .sidebar_box { clear: both; padding-bottom: 20px; } .sidebar_box1 { padding: 15px; } .sidebar_box h2 { color: #2d84ad; font-size: 16px; padding-left: 25px; font-weight: bold; margin: 0 0 10px 10px; background: url(images/templatemo_sidebar_h1.jpg) left center no-repeat; } .sidebar_box .sidebar_box_content { padding: 15px; background: url(images/templatemo_sidebar_box_top.png) top repeat-x; } .sidebar_box img { border: 1px solid #999; margin-bottom: 5px; } .sidebar_box .discount { margin: 5px 0 0 0; font-weight: bold; } .sidebar_box .discount span { color: #C00; } .left_sidebar_box .discount a { font-weight: bold; color: #000; } .sidebar_box .categories_list { margin: 0; padding: 0; list-style: none; } .categories_list li { padding: 0; margin: 0; } .categories_list li a { display: block; color: #201f1c; padding: 5px 0 5px 20px; background: url(images/list.png) center left no-repeat; } .categories_list li a:hover { color: #439ac3; text-decoration: none; } .news_box { clear: both; margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid #999; } .news_box h4 { padding: 2px 0; margin: 0; } .news_box h4 a { font-size: 12px; font-weight: normal; color: #1893f2; } #newsletter_box label { display: block; margin-bottom: 10px; } #newsletter_box .input_field { height: 20px; width: 155px; padding: 0 5px; margin-bottom: 10px; color: #000000; font-size: 12px; font-variant: normal; line-height: normal; } #newsletter_box .submit_btn { float: right; height: 30px; width: 80px; margin: 0px; padding: 3px 0 15px 0; cursor: pointer; font-size: 12px; text-align: center; vertical-align: bottom; white-space: pre; outline: none; } .product_box { float: left; width: 223px; padding: 10px; margin-bottom: 20px; border: 1px solid #CCC; text-align: center; } .product_box img { margin-bottom: 10px; } .product_box h3 { color: #2a2522; font-size: 12px; margin: 0 0 10px; } .product_box p { margin-bottom: 10px; } .product_box p span { color: #cf5902; font-size: 14px; font-weight: bold; } .product_box .detail { float: right; } .product_box .addtocard { float: left; font-weight: bold; padding-right: 20px; background: url(images/templatemo_shopping_cart.png) bottom right no-repeat; } /* end of content */ /* footer */ #templatemo_footer_wrapper { background: url(images/templatemo_footer.png) repeat-x; } #templatemo_footer { width: 910px; height: 85px; padding: 50px 40px 30px 40px; margin: 0 auto; text-align: center; color: #a9a098; } #templatemo_footer a { color: #d7d1cc; font-weight: normal; } #templatemo_footer a:hover { text-decoration: none; color: #FFFF33; } #templatemo_footer .footer_menu { margin: 0 0 30px 0; padding: 0px; list-style: none; } .footer_menu li { margin: 0px; padding: 0 20px; display: inline; border-right: 1px solid #d7d1cc; } .footer_menu li a { color: #d7d1cc; } .footer_menu .last_menu { border: none; } /* end of footer */ /*twitter*/ #twitter_div {border-top: 0px;} #twitter_div a {color: #0000ff !important;} #twitter_update_list {margin-left: -1em !important; margin-bottom: 0px !important;} #twitter_update_list li {list-style-type: none; padding-right: 5px; } #twitter_update_list li a {color: #0000ff; padding-right: 5px;} #twitter_div {border-bottom: 0px; padding-bottom: 10px; padding-top:6px; padding-right: 5px;} #twitter_div a, #twitter_update_list li a {text-decoration: none !important;} #twitter_div a:hover, #twitter_update_list li a:hover {text-decoration:underline !important;}

    Read the article

  • Handling keyboard and mouse input (Win API)

    - by Deluxe
    There is a number of ways to catch mouse or keyboard under Windows. So I tried some of them, but every of them has some advantages and drawbacks. I want to ask you: Which method do use? I've tried these: WM_KEYDOWN/WM_KEYUP - Main disadvantage is that, I can't distinguish between left and right-handed keys like ALT, CONTROL or SHIFT. GetKeyboardState - This solves problem of first method, but there is new one. When I get that the Right-ALT key is pressed, I also get that the Left-Control key is down. This behaviour happens only when using localized keyboard layout (Czech - CS). WM_INPUT (Raw Input) - This method also doesn't distinguish left and right-handed keys (if I can remember) and for mouse movement sometimes generates message with zero delta values of mouse position.

    Read the article

  • Integrating HTML into Silverlight Applications

    - by dwahlin
    Looking for a way to display HTML content within a Silverlight application? If you haven’t tried doing that before it can be challenging at first until you know a few tricks of the trade.  Being able to display HTML is especially handy when you’re required to display RSS feeds (with embedded HTML), SQL Server Reporting Services reports, PDF files (not actually HTML – but the techniques discussed will work), or other HTML content.  In this post I'll discuss three options for displaying HTML content in Silverlight applications and describe how my company is using these techniques in client applications. Displaying HTML Overlays If you need to display HTML over a Silverlight application (such as an RSS feed containing HTML data in it) you’ll need to set the Silverlight control’s windowless parameter to true. This can be done using the object tag as shown next: <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> <param name="source" value="ClientBin/HTMLAndSilverlight.xap"/> <param name="onError" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value="4.0.50401.0" /> <param name="autoUpgrade" value="true" /> <param name="windowless" value="true" /> <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none"> <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/> </a> </object> By setting the control to “windowless” you can overlay HTML objects by using absolute positioning and other CSS techniques. Keep in mind that on Windows machines the windowless setting can result in a performance hit when complex animations or HD video are running since the plug-in content is displayed directly by the browser window. It goes without saying that you should only set windowless to true when you really need the functionality it offers. For example, if I want to display my blog’s RSS content on top of a Silverlight application I could set windowless to true and create a user control that grabbed the content and output it using a DataList control: <style type="text/css"> a {text-decoration:none;font-weight:bold;font-size:14pt;} </style> <div style="margin-top:10px; margin-left:10px;margin-right:5px;"> <asp:DataList ID="RSSDataList" runat="server" DataSourceID="RSSDataSource"> <ItemTemplate> <a href='<%# XPath("link") %>'><%# XPath("title") %></a> <br /> <%# XPath("description") %> <br /> </ItemTemplate> </asp:DataList> <asp:XmlDataSource ID="RSSDataSource" DataFile="http://weblogs.asp.net/dwahlin/rss.aspx" XPath="rss/channel/item" CacheDuration="60" runat="server" /> </div> The user control can then be placed in the page hosting the Silverlight control as shown below. This example adds a Close button, additional content to display in the overlay window and the HTML generated from the user control. <div id="RSSDiv"> <div style="background-color:#484848;border:1px solid black;height:35px;width:100%;"> <img alt="Close Button" align="right" src="Images/Close.png" onclick="HideOverlay();" style="cursor:pointer;" /> </div> <div style="overflow:auto;width:800px;height:565px;"> <div style="float:left;width:100px;height:103px;margin-left:10px;margin-top:5px;"> <img src="http://weblogs.asp.net/blogs/dwahlin/dan2008.jpg" style="border:1px solid Gray" /> </div> <div style="float:left;width:300px;height:103px;margin-top:5px;"> <a href="http://weblogs.asp.net/dwahlin" style="margin-left:10px;font-size:20pt;">Dan Wahlin's Blog</a> </div> <br /><br /><br /> <div style="clear:both;margin-top:20px;"> <uc:BlogRoller ID="BlogRoller" runat="server" /> </div> </div> </div> Of course, we wouldn’t want the RSS HTML content to be shown until requested. Once it’s requested the absolute position of where it should show above the Silverlight control can be set using standard CSS styles. The following ID selector named #RSSDiv handles hiding the overlay div shown above and determines where it will be display on the screen. #RSSDiv { background-color:White; position:absolute; top:100px; left:300px; width:800px; height:600px; border:1px solid black; display:none; } Now that the HTML content to display above the Silverlight control is set, how can we show it as a user clicks a HyperlinkButton or other control in the application? Fortunately, Silverlight provides an excellent HTML bridge that allows direct access to content hosted within a page. The following code shows two JavaScript functions that can be called from Siverlight to handle showing or hiding HTML overlay content. The two functions rely on jQuery (http://www.jQuery.com) to make it easy to select HTML objects and manipulate their properties: function ShowOverlay() { rssDiv.css('display', 'block'); } function HideOverlay() { rssDiv.css('display', 'none'); } Calling the ShowOverlay function is as simple as adding the following code into the Silverlight application within a button’s Click event handler: private void OverlayHyperlinkButton_Click(object sender, RoutedEventArgs e) { HtmlPage.Window.Invoke("ShowOverlay"); } The result of setting the Silverlight control’s windowless parameter to true and showing the HTML overlay content is shown in the following screenshot:   Thinking Outside the Box to Show HTML Content Setting the windowless parameter to true may not be a viable option for some Silverlight applications or you may simply want to go about showing HTML content a different way. The next technique I’ll show takes advantage of simple HTML, CSS and JavaScript code to handle showing HTML content while a Silverlight application is running in the browser. Keep in mind that with Silverlight’s HTML bridge feature you can always pop-up HTML content in a new browser window using code similar to the following: System.Windows.Browser.HtmlPage.Window.Navigate( new Uri("http://silverlight.net"), "_blank"); For this example I’ll demonstrate how to hide the Silverlight application while maximizing a container div containing the HTML content to show. This allows HTML content to take up the full screen area of the browser without having to set windowless to true and when done right can make the user feel like they never left the Silverlight application. The following HTML shows several div elements that are used to display HTML within the same browser window as the Silverlight application: <div id="JobPlanDiv"> <div style="vertical-align:middle"> <img alt="Close Button" align="right" src="Images/Close.png" onclick="HideJobPlanIFrame();" style="cursor:pointer;" /> </div> <div id="JobPlan_IFrame_Container" style="height:95%;width:100%;margin-top:37px;"></div> </div> The JobPlanDiv element acts as a container for two other divs that handle showing a close button and hosting an iframe that will be added dynamically at runtime. JobPlanDiv isn’t visible when the Silverlight application loads due to the following ID selector added into the page: #JobPlanDiv { position:absolute; background-color:#484848; overflow:hidden; left:0; top:0; height:100%; width:100%; display:none; } When the HTML content needs to be shown or hidden the JavaScript functions shown next can be used: var jobPlanIFrameID = 'JobPlan_IFrame'; var slHost = null; var jobPlanContainer = null; var jobPlanIFrameContainer = null; var rssDiv = null; $(document).ready(function () { slHost = $('#silverlightControlHost'); jobPlanContainer = $('#JobPlanDiv'); jobPlanIFrameContainer = $('#JobPlan_IFrame_Container'); rssDiv = $('#RSSDiv'); }); function ShowJobPlanIFrame(url) { jobPlanContainer.css('display', 'block'); $('<iframe id="' + jobPlanIFrameID + '" src="' + url + '" style="height:100%;width:100%;" />') .appendTo(jobPlanIFrameContainer); slHost.css('width', '0%'); } function HideJobPlanIFrame() { jobPlanContainer.css('display', 'none'); $('#' + jobPlanIFrameID).remove(); slHost.css('width', '100%'); } ShowJobPlanIFrame() handles showing the JobPlanDiv div and adding an iframe into it dynamically. Once JobPlanDiv is shown, the Silverlight control host has its width set to a value of 0% to allow the control to stay alive while making it invisible to the user. I found that this technique works better across multiple browsers as opposed to manipulating the Silverlight control host div’s display or visibility properties. Now that you’ve seen the code to handle showing and hiding the HTML content area, let’s switch focus to the Silverlight application. As a user clicks on a link such as “View Report” the ShowJobPlanIFrame() JavaScript function needs to be called. The following code handles that task: private void ReportHyperlinkButton_Click(object sender, RoutedEventArgs e) { ShowBrowser(_BaseUrl + "/Report.aspx"); } public void ShowBrowser(string url) { HtmlPage.Window.Invoke("ShowJobPlanIFrame", url); } Any URL can be passed into the ShowBrowser() method which handles invoking the JavaScript function. This includes standard web pages or even PDF files. We’ve used this technique frequently with our SmartPrint control (http://www.smartwebcontrols.com) which converts Silverlight screens into PDF documents and displays them. Here’s an example of the content generated:   Silverlight 4’s WebBrowser Control Both techniques shown to this point work well when Silverlight is running in-browser but not so well when it’s running out-of-browser since there’s no host page that you can access using the HTML bridge. Fortunately, Silverlight 4 provides a WebBrowser control that can be used to perform the same functionality quite easily. We’re currently using it in client applications to display PDF documents, SSRS reports and standard HTML content. Using the WebBrowser control simplifies the application quite a bit since no JavaScript is required if the application only runs out-of-browser. Here’s a simple example of defining the WebBrowser control in XAML. I typically define it in MainPage.xaml when a Silverlight Navigation template is used to create the project so that I can re-use the functionality across multiple screens. <Grid x:Name="WebBrowserGrid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Visibility="Collapsed"> <StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> <Border Background="#484848" HorizontalAlignment="Stretch" Height="40"> <Image x:Name="WebBrowserImage" Width="100" Height="33" Cursor="Hand" HorizontalAlignment="Right" Source="/HTMLAndSilverlight;component/Assets/Images/Close.png" MouseLeftButtonDown="WebBrowserImage_MouseLeftButtonDown" /> </Border> <WebBrowser x:Name="JobPlanReportWebBrowser" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> </StackPanel> </Grid> Looking through the XAML you can see that a close image is defined along with the WebBrowser control. Because the URL that the WebBrowser should navigate to isn’t known at design time no value is assigned to the control’s Source property. If the XAML shown above is left “as is” you’ll find that any HTML content assigned to the WebBrowser doesn’t display properly. This is due to no height or width being set on the control. To handle this issue the following code is added into the XAML’s code-behind file to dynamically determine the height and width of the page and assign it to the WebBrowser. This is done by handling the SizeChanged event. void MainPage_SizeChanged(object sender, SizeChangedEventArgs e) { WebBrowserGrid.Height = JobPlanReportWebBrowser.Height = ActualHeight; WebBrowserGrid.Width = JobPlanReportWebBrowser.Width = ActualWidth; } When the user wants to view HTML content they click a button which executes the code shown in next: public void ShowBrowser(string url) { if (Application.Current.IsRunningOutOfBrowser) { JobPlanReportWebBrowser.NavigateToString("<html><body><iframe src='" + url + "' style='width:100%;height:97%;' /></body></html>"); WebBrowserGrid.Visibility = Visibility.Visible; } else { HtmlPage.Window.Invoke("ShowJobPlanIFrame", url); } } private void WebBrowserImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { WebBrowserGrid.Visibility = Visibility.Collapsed; }   Looking through the code you’ll see that it checks to see if the Silverlight application is running out-of-browser and then either displays the WebBrowser control or runs the JavaScript function discussed earlier. Although the WebBrowser control’s Source property could be assigned the URI of the page to navigate to, by assigning HTML content using the NavigateToString() method and adding an iframe, content can be shown from any site including cross-domain sites. This is especially handy when you need to grab a page from a reporting site that’s in a different domain than the Silverlight application. Here’s an example of viewing  PDF file inside of an out-of-browser application. The first image shows the application running out-of-browser before the user clicks a PDF HyperlinkButton.  The second image shows the PDF being displayed.   While there are certainly other techniques that can be used, the ones shown here have worked well for us in different applications and provide the ability to display HTML content in-browser or out-of-browser. Feel free to add a comment if you have another tip or trick you like to use when working with HTML content in Silverlight applications.   Download Code Sample   For more information about onsite, online and video training, mentoring and consulting solutions for .NET, SharePoint or Silverlight please visit http://www.thewahlingroup.com.

    Read the article

  • Blending the Sketchflow Action

    - by GeekAgilistMercenary
    Started a new Sketchflow Prototype in Expression Blend recently and documented each of the steps.  This blog entry covers some of those steps, which are the basic elements of any prototype.  I will have more information regarding design, prototype creation, and the process of the initial phases for development in the future.  For now, I hope you enjoy this short walk through.  Also, be sure to check out my last quick entry on Sketchflow. I started off with a Sketchflow Project, just like I did in my previous entry (more specifics in that entry about how to manipulate and build out the Sketchflow Map). Once I created the project I setup the following Sketchflow Map. The CoreNavigation is a ComponentScreen setup solely for the page navigation at the top of the screen.  The XAML markup in case you want to create a Component Screen with the same design is included below. <UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:pb="clr-namespace:Microsoft.Expression.Prototyping.Behavior;assembly=Microsoft.Expression.Prototyping.Interactivity" x:Class="RapidPrototypeSketchScreens.CoreNavigation" d:DesignWidth="624" d:DesignHeight="49" Height="49" Width="624">   <Grid x:Name="LayoutRoot"> <TextBlock HorizontalAlignment="Stretch" Margin="307,3,0,0" Style="{StaticResource TitleCenter-Sketch}" Text="Aütøchart Scorecards" TextWrapping="Wrap"> <i:Interaction.Triggers> <i:EventTrigger EventName="MouseLeftButtonDown"> <pb:NavigateToScreenAction TargetScreen="RapidPrototypeSketchScreens.Screen_1"/> </i:EventTrigger> </i:Interaction.Triggers> </TextBlock> <Button HorizontalAlignment="Left" Margin="164,8,0,11" Style="{StaticResource Button-Sketch}" Width="144" Content="Scorecard"> <i:Interaction.Triggers> <i:EventTrigger EventName="Click"> <pb:NavigateToScreenAction TargetScreen="RapidPrototypeSketchScreens.Screen_1_2"/> </i:EventTrigger> </i:Interaction.Triggers> </Button> <Button HorizontalAlignment="Left" Margin="8,8,0,11" Style="{StaticResource Button-Sketch}" Width="152" Content="Standard Reports"> <i:Interaction.Triggers> <i:EventTrigger EventName="Click"> <pb:NavigateToScreenAction TargetScreen="RapidPrototypeSketchScreens.Screen_1_1"/> </i:EventTrigger> </i:Interaction.Triggers> </Button> </Grid> </UserControl> Now that the CoreNavigation Component Screen is done I built out each of the others.  In each of those screens I included the CoreNavigation Screen (all those little green lines in the image) as the top navigation.  In order to do that, as I created each of the pages I would hover over the CoreNavigation Object in the Sketchflow Map.  When the utilities drawer (the small menu that pops down under a node when you hover over it) shows click on the third little icon and drag it onto the page node you want a navigation screen on. Once I created all the screens I setup the navigation by opening up each screen and right clicking on the objects that needed to point to somewhere else in the prototype. Once I was done with the main page, my Home Navigation Page, it looked something like this in the Expression Blend Designer. I fleshed out each of the additional screens.  Once I was done I wanted to try out the deployment package.  The way to deploy a Sketchflow Prototype is to merely click on File –> Package SketchFlow Project and a prompt will appear.  In the prompt enter what you want the package to be called. I like to see the files generated afterwards too, so I checked the box to see that.  When Expression Blend is done generating everything you’ll have a directory like the one shown below, with all the needed files for deployment. Now these files can be copied or moved to any location for viewing.  One can even copy them (such as via FTP) to a server location to share with others.  Once they are deployed and you run the "TestPage.html" the other features of the Sketchflow Package are available. In the image below I have tagged a few sections to show the Sketchflow Player Features.  To the top left is the navigation, which provides a clearly defined area of movement in a list.  To the center right is the actual prototype application.  I have placed lists of things and made edits.  On the left hand side is the highlight feature, which is available in the Feedback section of the lower left.  On the right hand list I underlined the Autochart with an orange marker, and marked out two list items with a red marker. In the lower left hand side in the Feedback section is also an area to type in your feedback.  This can be useful for time based feedback, when you post this somewhere and want people to provide subsequent follow up feedback. Overall lots of great features, that enable some fairly rapid prototyping with customers.  Once one is familiar with the steps and parts of this Sketchflow Prototype Capabilities it is easy to step through an application without even stopping.  It really is that easy.  So get hold of Expression Blend 3 and get ramped up on Sketchflow, it will pay off in the design phases to do so! Original Entry

    Read the article

  • SQL SERVER – Solution to Puzzle – Simulate LEAD() and LAG() without Using SQL Server 2012 Analytic Function

    - by pinaldave
    Earlier I wrote a series on SQL Server Analytic Functions of SQL Server 2012. During the series to keep the learning maximum and having fun, we had few puzzles. One of the puzzle was simulating LEAD() and LAG() without using SQL Server 2012 Analytic Function. Please read the puzzle here first before reading the solution : Write T-SQL Self Join Without Using LEAD and LAG. When I was originally wrote the puzzle I had done small blunder and the question was a bit confusing which I corrected later on but wrote a follow up blog post on over here where I describe the give-away. Quick Recap: Generate following results without using SQL Server 2012 analytic functions. I had received so many valid answers. Some answers were similar to other and some were very innovative. Some answers were very adaptive and some did not work when I changed where condition. After selecting all the valid answer, I put them in table and ran RANDOM function on the same and selected winners. Here are the valid answers. No Joins and No Analytic Functions Excellent Solution by Geri Reshef – Winner of SQL Server Interview Questions and Answers (India | USA) WITH T1 AS (SELECT Row_Number() OVER(ORDER BY SalesOrderDetailID) N, s.SalesOrderID, s.SalesOrderDetailID, s.OrderQty FROM Sales.SalesOrderDetail s WHERE SalesOrderID IN (43670, 43669, 43667, 43663)) SELECT SalesOrderID,SalesOrderDetailID,OrderQty, CASE WHEN N%2=1 THEN MAX(CASE WHEN N%2=0 THEN SalesOrderDetailID END) OVER (Partition BY (N+1)/2) ELSE MAX(CASE WHEN N%2=1 THEN SalesOrderDetailID END) OVER (Partition BY N/2) END LeadVal, CASE WHEN N%2=1 THEN MAX(CASE WHEN N%2=0 THEN SalesOrderDetailID END) OVER (Partition BY N/2) ELSE MAX(CASE WHEN N%2=1 THEN SalesOrderDetailID END) OVER (Partition BY (N+1)/2) END LagVal FROM T1 ORDER BY SalesOrderID, SalesOrderDetailID, OrderQty; GO No Analytic Function and Early Bird Excellent Solution by DHall – Winner of Pluralsight 30 days Subscription -- a query to emulate LEAD() and LAG() ;WITH s AS ( SELECT 1 AS ldOffset, -- equiv to 2nd param of LEAD 1 AS lgOffset, -- equiv to 2nd param of LAG NULL AS ldDefVal, -- equiv to 3rd param of LEAD NULL AS lgDefVal, -- equiv to 3rd param of LAG ROW_NUMBER() OVER (ORDER BY SalesOrderDetailID) AS row, SalesOrderID, SalesOrderDetailID, OrderQty FROM Sales.SalesOrderDetail WHERE SalesOrderID IN (43670, 43669, 43667, 43663) ) SELECT s.SalesOrderID, s.SalesOrderDetailID, s.OrderQty, ISNULL( sLd.SalesOrderDetailID, s.ldDefVal) AS LeadValue, ISNULL( sLg.SalesOrderDetailID, s.lgDefVal) AS LagValue FROM s LEFT OUTER JOIN s AS sLd ON s.row = sLd.row - s.ldOffset LEFT OUTER JOIN s AS sLg ON s.row = sLg.row + s.lgOffset ORDER BY s.SalesOrderID, s.SalesOrderDetailID, s.OrderQty No Analytic Function and Partition By Excellent Solution by DHall – Winner of Pluralsight 30 days Subscription /* a query to emulate LEAD() and LAG() */ ;WITH s AS ( SELECT 1 AS LeadOffset, /* equiv to 2nd param of LEAD */ 1 AS LagOffset, /* equiv to 2nd param of LAG */ NULL AS LeadDefVal, /* equiv to 3rd param of LEAD */ NULL AS LagDefVal, /* equiv to 3rd param of LAG */ /* Try changing the values of the 4 integer values above to see their effect on the results */ /* The values given above of 0, 0, null and null behave the same as the default 2nd and 3rd parameters to LEAD() and LAG() */ ROW_NUMBER() OVER (ORDER BY SalesOrderDetailID) AS row, SalesOrderID, SalesOrderDetailID, OrderQty FROM Sales.SalesOrderDetail WHERE SalesOrderID IN (43670, 43669, 43667, 43663) ) SELECT s.SalesOrderID, s.SalesOrderDetailID, s.OrderQty, ISNULL( sLead.SalesOrderDetailID, s.LeadDefVal) AS LeadValue, ISNULL( sLag.SalesOrderDetailID, s.LagDefVal) AS LagValue FROM s LEFT OUTER JOIN s AS sLead ON s.row = sLead.row - s.LeadOffset /* Try commenting out this next line when LeadOffset != 0 */ AND s.SalesOrderID = sLead.SalesOrderID /* The additional join criteria on SalesOrderID above is equivalent to PARTITION BY SalesOrderID in the OVER clause of the LEAD() function */ LEFT OUTER JOIN s AS sLag ON s.row = sLag.row + s.LagOffset /* Try commenting out this next line when LagOffset != 0 */ AND s.SalesOrderID = sLag.SalesOrderID /* The additional join criteria on SalesOrderID above is equivalent to PARTITION BY SalesOrderID in the OVER clause of the LAG() function */ ORDER BY s.SalesOrderID, s.SalesOrderDetailID, s.OrderQty No Analytic Function and CTE Usage Excellent Solution by Pravin Patel - Winner of SQL Server Interview Questions and Answers (India | USA) --CTE based solution ; WITH cteMain AS ( SELECT SalesOrderID, SalesOrderDetailID, OrderQty, ROW_NUMBER() OVER (ORDER BY SalesOrderDetailID) AS sn FROM Sales.SalesOrderDetail WHERE SalesOrderID IN (43670, 43669, 43667, 43663) ) SELECT m.SalesOrderID, m.SalesOrderDetailID, m.OrderQty, sLead.SalesOrderDetailID AS leadvalue, sLeg.SalesOrderDetailID AS leagvalue FROM cteMain AS m LEFT OUTER JOIN cteMain AS sLead ON sLead.sn = m.sn+1 LEFT OUTER JOIN cteMain AS sLeg ON sLeg.sn = m.sn-1 ORDER BY m.SalesOrderID, m.SalesOrderDetailID, m.OrderQty No Analytic Function and Co-Related Subquery Usage Excellent Solution by Pravin Patel – Winner of SQL Server Interview Questions and Answers (India | USA) -- Co-Related subquery SELECT m.SalesOrderID, m.SalesOrderDetailID, m.OrderQty, ( SELECT MIN(SalesOrderDetailID) FROM Sales.SalesOrderDetail AS l WHERE l.SalesOrderID IN (43670, 43669, 43667, 43663) AND l.SalesOrderID >= m.SalesOrderID AND l.SalesOrderDetailID > m.SalesOrderDetailID ) AS lead, ( SELECT MAX(SalesOrderDetailID) FROM Sales.SalesOrderDetail AS l WHERE l.SalesOrderID IN (43670, 43669, 43667, 43663) AND l.SalesOrderID <= m.SalesOrderID AND l.SalesOrderDetailID < m.SalesOrderDetailID ) AS leag FROM Sales.SalesOrderDetail AS m WHERE m.SalesOrderID IN (43670, 43669, 43667, 43663) ORDER BY m.SalesOrderID, m.SalesOrderDetailID, m.OrderQty This was one of the most interesting Puzzle on this blog. Giveaway Winners will get following giveaways. Geri Reshef and Pravin Patel SQL Server Interview Questions and Answers (India | USA) DHall Pluralsight 30 days Subscription Reference: Pinal Dave (http://blog.SQLAuthority.com) Filed under: Pinal Dave, PostADay, Readers Contribution, Readers Question, SQL, SQL Authority, SQL Function, SQL Puzzle, SQL Query, SQL Scripts, SQL Server, SQL Tips and Tricks, T SQL, Technology

    Read the article

  • How can a code editor effectively hint at code nesting level - without using indentation?

    - by pgfearo
    I'm writing an XML text editor that provides 2 view options for the same XML text, one indented (virtually), the other left-justified. The motivation for the left-justified view is to help users 'see' the whitespace characters they're using for indentation of plain-text or XPath code without interference from indentation that is an automated side-effect of the XML context. I want to provide visual clues (in the non-editable part of the editor) for the left-justified mode that will help the user, but without getting too elaborate. I tried just using connecting lines, but that seemed too busy. The best I've come up with so far is shown in a mocked up screenshot of the editor below, but I'm seeking better/simpler alternatives (that don't require too much code). [Edit] Taking the heatmap idea (from: @jimp) I get something like this: or even these alternates:

    Read the article

  • "Untangle"-Game AI

    - by M0rgenstern
    I am trying to program an AI for such untangle games like Untangle game. I tried the following possibilities: 1) Just set one node after the other to a random place. If every node was moved once, start over with the first node in the list. 2) First move all nodes which have the most wrong connections. If all were moved once, move the nodes which have the fewest (but not 0) wrong connections. If all were moved but there are some left, move all which are left. If none are left start over. 3) Just 2) bust starting with the nodes with the fewest connections. 4)/5) As 2) and 3) but when I didn't move nodes which have only correct connections. All of these approaches are too slow and inefficient. Can anyone suggest a solution which does not depend so much on fortune?

    Read the article

  • How to autohide Unity 2D?

    - by ph1b
    In the regular Unity 3D, I used Compiz Config Manager where I could config the Unity-Plugin to autohide the left start-bar and not to show it when moving my mouse to the left. So it was perfect for using Docky. But with Unity 2D the Unity settings don't have any effect. How can I completely hide the start-panel and just have it shown when pressing the windows-key? With the following: dconf write /com/canonical/unity-2d/launcher/hide-mode 1 dconf write /com/canonical/unity-2d/launcher/use-strut false it still opens the bar when going with my mouse to the left.

    Read the article

< Previous Page | 42 43 44 45 46 47 48 49 50 51 52 53  | Next Page >