Search Results

Search found 12538 results on 502 pages for 'min width'.

Page 44/502 | < Previous Page | 40 41 42 43 44 45 46 47 48 49 50 51  | Next Page >

  • display image in a grid using extjs

    - by Abisha
    I am new to extjs. I want to display icon images for each grid elements. can you please healp me anybody? i am getting the image path from an xml file. my code is below. here i am displaying image path. i have to replace it by displaying image. Ext.onReady(function(){ var store = new Ext.data.Store({ url: 'new_frm.xml', reader: new Ext.data.XmlReader({ record: 'message', fields: [{name: 'first'},{name: 'last'},{name: 'company'},{name: 'email'},{name: 'gender'},{name: 'form-file'},{name: 'state'},{name: 'Live'},{name: 'content'}] }) }); var grid = new Ext.grid.GridPanel({ store: store, columns: [ {header: "First Name", width: 120, dataIndex: 'first', sortable: true}, {header: "Last Name", width: 180, dataIndex: 'last', sortable: true}, {header: "Company", width: 115, dataIndex: 'company', sortable: true}, {header: "Email", width: 100, dataIndex: 'email', sortable: true}, {header: "Gender", width: 100, dataIndex: 'gender', sortable: true}, {header: "Photo", width: 100, dataIndex: 'form-file', sortable: true}, {header: "State", width: 100, dataIndex: 'state', sortable: true}, {header: "Living with", width: 100, dataIndex: 'Live', sortable: true}, {header: "Commands", width: 100, dataIndex: 'content', sortable: true} ], renderTo:'example-grid', height:200 }); store.load(); });

    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

  • OpenGL ES - texture map all faces of an 8 vertex cube?

    - by Feet
    Working through some OpenGL-ES tutorials, using the Android emulator. I've gotten up to texture mapping and am having some trouble mapping to a cube. Is it possible to map a texture to all faces of a cube that has 8 vertices and 12 triangles for the 6 faces as described below? // Use half as we are going for a 0,0,0 centre. width /= 2; height /= 2; depth /= 2; float vertices[] = { -width, -height, depth, // 0 width, -height, depth, // 1 width, height, depth, // 2 -width, height, depth, // 3 -width, -height, -depth, // 4 width, -height, -depth, // 5 width, height, -depth, // 6 -width, height, -depth, // 7 }; short indices[] = { // Front 0,1,2, 0,2,3, // Back 5,4,7, 5,7,6, // Left 4,0,3, 4,3,7, // Right 1,5,6, 1,6,2, // Top 3,2,6, 3,6,7, // Bottom 4,5,1, 4,1,0, }; float texCoords[] = { 1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, }; I have gotten the front and back faces working correctly, however, none of the other faces are showing the texture.

    Read the article

  • Open Select using Javascript/jQuery?

    - by Newbie
    Hello! Is there a way to open a select box using Javascript (and jQuery)? <select style="width:150px;"> <option value="1">1</option> <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc arcu nunc, rhoncus ac dignissim at, rhoncus ac tellus.</option> <option value="3">3</option> </select> I have to open my select, cause of ie bug. All versions of IE (6,7,8) cut my options. As far as I know, there is no css bugfix for this. At the moment I try to do the following: var original_width = 0; var selected_val = false; if (jQuery.browser.msie) { $('select').click(function(){ if (selected_val == false){ if(original_width == 0) original_width = $(this).width(); $(this).css({ 'position' : 'absolute', 'width' : 'auto' }); }else{ $(this).css({ 'position' : 'relative', 'width' : original_width }); selected_val = false; } }); $('select').blur(function(){ $(this).css({ 'position' : 'relative', 'width' : original_width }); }); $('select').blur(function(){ $(this).css({ 'position' : 'relative', 'width' : original_width }); }); $('select').change(function(){ $(this).css({ 'position' : 'relative', 'width' : original_width }); }); $('select option').click(function(){ $(this).css({ 'position' : 'relative', 'width' : original_width }); selected_val = true; }); } But clicking on my select the first time will change the width of the select but I have to click again to open it.

    Read the article

  • HTML: Nesting DIVs problem

    - by mawg
    I am coding a form generator. So far, so good, then I decided to give it a real test. I made a form with some nested each holding a few controls. I will post the HTML at the end. If you load it into a browser, it renders, but is obviously wrong. I had previously tested using the W3C validator and things were fine, but that was for non nested. When I validate a form with nested I get errors: Error Line 13, Column 117: document type does not allow element "DIV" here …style="position: absolute; top:88px; left: 256px; width: 145px; height: 21px;"> So, how do I correct that? What do I do with nested FIELDSETs? Here's the complete HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> </head> <body> <form action="C:\temp\an_elogger_test.php" method="get"><div class="TGroupBox" id="GroupBox1"> <fieldset style="position: absolute; top:24px; left:24px; width: 449px; height: 473px;"> <legend>GroupBox1</legend> <div class="TPanel" id="Panel1"> <fieldset style="position: absolute; top:64px; left:64px; width: 361px; height: 217px;"> <div class="TComboBox" id="ComboBox1" style="position: absolute; top:88px; left: 256px; width: 145px; height: 21px;"> <select name="ComboBox1"> </select> </div> <div class="TGroupBox" id="GroupBox2"> <fieldset style="position: absolute; top:80px; left:88px; width: 145px; height: 177px;"> <legend>GroupBox2</legend> <div class="TCheckBox" id="CheckBox1" style="position: absolute; top:112px; left: 104px; width: 97px; height: 17px;">CheckBox1<input type="checkbox" name="CheckBox1" value="CheckBox1Checked"></div> <div class="TCheckBox" id="CheckBox2" style="position: absolute; top:152px; left: 112px; width: 97px; height: 17px;">CheckBox2<input type="checkbox" name="CheckBox2" value="CheckBox2Checked"checked="checked"></div> </fieldset> </div> <div class="TRadioGroup" id="RadioGroup2"> <fieldset style="position: absolute; top:128px; left: 264px; width: 145px; height: 137px;"><legend>RadioGroup2</legend> eins: <input type="radio" name="RadioGroup2" value="eins" checked><br> zwei: <input type="radio" name="RadioGroup2" value="zwei"><br> drei: <input type="radio" name="RadioGroup2" value="drei"><br> </fieldset> </div> </fieldset> </div> <div class="TMemo" id="Memo1"><textarea name="Memo1" rows="8" cols="13" style="position: absolute; top:320px; left: 88px; width: 185px; height: 89px;"> </textarea> </div> <div class="TComboBox" id="ComboBox2" style="position: absolute; top:328px; left: 296px; width: 145px; height: 21px;"> <select name="ComboBox2"> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> <option value="d" selected="selected">d</option> <option value="e">e</option> </select> </div> </fieldset> </div> <div class="TPanel" id="Panel2"> <fieldset style="position: absolute; top:32px; left:520px; width: 425px; height: 449px;"> <div class="TPanel" id="Panel3"> <fieldset style="position: absolute; top:64px; left:552px; width: 345px; height: 185px;"> <div class="TMemo" id="Memo2"><textarea name="Memo2" rows="8" cols="13" style="position: absolute; top:88px; left: 584px; width: 185px; height: 89px;"> You may wish to leave this memo emptyOr perpahaps give instructions aboout what should be written here</textarea> </div> <div class="TEdit" id="Edit1" style="position: absolute; top:200px; left: 600px; width: 121px; height: 21px;"><input type="text" name="Edit1"value="Insert text here"></div> </fieldset> </div> <div class="TGroupBox" id="GroupBox3"> <fieldset style="position: absolute; top:272px; left:552px; width: 345px; height: 185px;"> <legend>GroupBox3</legend> <div class="TPanel" id="Panel4"> <fieldset style="position: absolute; top:304px; left:584px; width: 177px; height: 137px;"> <div class="TRadioGroup" id="RadioGroup1"> <fieldset style="position: absolute; top:312px; left: 600px; width: 97px; height: 105px;"><legend>RadioGroup1</legend> one: <input type="radio" name="RadioGroup1" value="one"><br> two: <input type="radio" name="RadioGroup1" value="two" checked><br> three: <input type="radio" name="RadioGroup1" value="three"><br> </fieldset> </div> </fieldset> </div> <div class="TEdit" id="Edit2" style="position: absolute; top:320px; left: 776px; width: 105px; height: 21px;"><input type="text" name="Edit2"></div> </fieldset> </div> </fieldset> </div> <div align="center" style="margin: auto"><input type="submit" name="submitButton" value="Submit" style="position:absolute;top:522px;"></div> </form> </body> </html>

    Read the article

  • jQuery resizable() dynamic maxWidth option

    - by Vitaliy Isikov
    I have 3 columns that are resizable. When one is made wider, the one to it's left is made smaller. Essentially there are only 2 handles. Left col and Mid col. So when Mid col is made thinner, Right col expands accordingly. All three of them are contained with a 900px parent div, so the sum of all three is always 900. They have max and min widths set statically. My issue is that if you take the left handle and move it all the way to the right you're still able to use the right handle and expand the mid col past the edge of the parent div. I thought of a way to solve that issue by writing up a function that checks the widths of the columns and then subtracts left and right columns from the parent div width, I called it mWid. This leaves me with the number I want to set as the maxWidth for Mid col. Now the issue is that mWid is not gettings updated for here "maxWidth: mWid" Here is what the function for the right handle looks like: $(function() { $("#midResizable").resizable({ handles: 'e', containment: '#container', maxWidth: mWid, // gets set once, but doesn't update! WHY? minWidth: 195, resize: function(event, ui) { contWidth = $('#container').width() newWidth = $(this).width() leftWidth = $('#leftResizable').width() rightWidth = $('#rightResizable').width() $("#rightResizable").css("width", (contWidth-15)-(newWidth)-(leftWidth)+"px"); checkWid() } }); }); function checkWid() { rightWidth = $('#rightResizable').width() leftWidth = $('#leftResizable').width() contWidth = $('#container').width() mWid = (contWidth-15)-(rightWidth)-(leftWidth) }

    Read the article

  • HTML , Jquery Fisheye menu

    - by Thirumalai
    I have used the fisheye jquery "interface.js" I want to make make 3rd element with id="default" should be show default like mouse over effect , Please help me thaks in advance <div class="dock" id="dock1"> <div class="dock-container2"> <a class="dock-item2" href="#" ><span>E-Mail</span><img src="images/ui/img1.png" alt="home" width="40"/></a> <a class="dock-item2" href="#"><span>Contact</span><img src="images/ui/img2.png" alt="contact" width="50" /></a> <a class="dock-item2" href="#" id="default"><span>Car</span><img src="images/ui/img3.png" alt="portfolio" width="60"/></a> <a class="dock-item2" href="#"><span>Home</span><img src="images/ui/img4.png" alt="music" width="70" /></a> <a class="dock-item2" href="#"><span>Air Line</span><img src="images/ui/img5.png" alt="video" width="80" /></a> <a class="dock-item2" href="#"><span>Train</span><img src="images/ui/img6.png" alt="history" width="70"/></a> <a class="dock-item2" href="#"><span>Hotel</span><img src="images/ui/img7.png" alt="calendar" width="60"/></a> <a class="dock-item2" href="#"><span>Links</span><img src="images/ui/img8.png" alt="links" width="50"/></a> <a class="dock-item2" href="#"><span>Call Us</span><img src="images/ui/img9.png" alt="rss" width="40" /></a> </div> $(document).ready(function () { $('#dock1').Fisheye({ maxWidth: 60, items: 'a', itemsText: 'span', container: '.dock-container2', itemWidth: 40, proximity: 80, alignment: 'left', valign: 'top', halign: 'center' }); $("#pagecontent").slider(); });

    Read the article

  • Fitting a rectangle into screen with XNA

    - by alecnash
    I am drawing a rectangle with primitives in XNA. The width is: width = GraphicsDevice.Viewport.Width and the height is height = GraphicsDevice.Viewport.Height I am trying to fit this rectangle in the screen (using different screens and devices) but I am not sure where to put the camera on the Z-axis. Sometimes the camera is too close and sometimes to far. This is what I am using to get the camera distance: //Height of piramid float alpha = 0; float beta = 0; float gamma = 0; alpha = (float)Math.Sqrt((width / 2 * width/2) + (height / 2 * height / 2)); beta = height / ((float)Math.Cos(MathHelper.ToRadians(67.5f)) * 2); gamma = (float)Math.Sqrt(beta*beta - alpha*alpha); position = new Vector3(0, 0, gamma); Any idea where to put the camera on the Z-axis?

    Read the article

  • Centered Content using panelGridLayout

    - by Duncan Mills
    A classic layout conundrum,  which I think pretty much every ADF developer may have faced at some time or other, is that of truly centered (centred) layout. Typically this requirement comes up in relation to say displaying a login type screen or similar. Superficially the  problem seems easy, but as my buddy Eduardo explained when discussing this subject a couple of years ago it's actually a little more complex than you might have thought. If fact, even the "solution" provided in that posting is not perfect and suffers from a several issues (not Eduardo's fault, just limitations of panelStretch!) The top, bottom, end and start facets all need something in them The percentages you apply to the topHeight, startWidth etc. are calculated as part of the whole width.  This means that you have to guestimate the correct percentage based on your typical screen size and the sizing of the centered content. So, at best, you will in fact only get approximate centering, and the more you tune that centering for a particular browser size the more it will fail if the user resizes. You can't attach styles to the panelStretchLayout facets so to provide things like background color or fixed sizing you need to embed another container that you can apply styles to, typically a panelgroupLayout   For reference here's the code to print a simple 100px x 100px red centered square  using the panelStretchLayout solution, approximately tuned to a 1980 x 1080 maximized browser (IDs omitted for brevity): <af:panelStretchLayout startWidth="45%" endWidth="45%"                        topHeight="45%"  bottomHeight="45%" >   <f:facet name="center">     <af:panelGroupLayout inlineStyle="height:100px;width:100px;background-color:red;"                          layout="vertical"/>   </f:facet>   <f:facet name="top">     <af:spacer height="1" width="1"/>   </f:facet>   <f:facet name="bottom">     <af:spacer height="1" width="1"/>   </f:facet>   <f:facet name="start">     <af:spacer height="1" width="1"/>   </f:facet>   <f:facet name="end">     <af:spacer height="1" width="1"/>    </f:facet> </af:panelStretchLayout>  And so to panelGridLayout  So here's the  good news, panelGridLayout makes this really easy and it works without the caveats above.  The key point is that percentages used in the grid definition are evaluated after the fixed sizes are taken into account, so rather than having to guestimate what percentage will "more, or less", center the content you can just say "allocate half of what's left" to the flexible content and you're done. Here's the same example using panelGridLayout: <af:panelGridLayout> <af:gridRow height="50%"/> <af:gridRow height="100px"> <af:gridCell width="50%" /> <af:gridCell width="100px" halign="stretch" valign="stretch"  inlineStyle="background-color:red;"> <af:spacer width="1" height="1"/> </af:gridCell> <af:gridCell width="50%" /> </af:gridRow> <af:gridRow height="50%"/> </af:panelGridLayout>  So you can see that the amount of markup is somewhat smaller (as is, I should mention, the generated DOM structure in the browser), mainly because we don't need to introduce artificial components to ensure that facets are actually observed in the final result.  But the key thing here is that the centering is no longer approximate and it will work as expected as the user resizes the browser screen.  By far this is a more satisfactory solution and although it's only a simple example, it will hopefully open your eyes to the potential of panelGridLayout as your number one, go-to layout container. Just a reminder though, right now, panelGridLayout is only available in 11.1.2.2 and above.

    Read the article

  • How do I make a dialog box? [on hold]

    - by bill
    By dialog box I mean when player talks to someone, a box shows up with text on it. I haven't found much about this topic online, so I created a basic dialog box: //in dialog box i have only two methods public void createBox(int x, int y, int width, int height, String txt) { this.x = x; this.y = y; this.width = width; this.height = height; this.txt = txt; } //draw dialog box public void draw(Graphics2D g) { if (txt != null) { g.setColor(Color.red); g.drawRect(x,y,width,height); g.setColor(Color.black); g.fillRect(x, y, width, height); g.setColor(Color.white); g.drawString(txt, x + 10, y + 10); } } I wanted to now can I make this better?

    Read the article

  • Rich Text Editor (YUI Simple Text Editor used) not sending data to next page

    - by Aman Chhabra
    I am using a simple text editor from YUI, but when I click submit the code in the textarea/editor is not sent to the next page. I want to be able to receive it on the subsequent page and then store it in a DB(MySql). I have wasted lot of time already. Please help. HTML FILE: <html> <head> <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.9.0/build/yahoo-dom-event/yahoo-dom-event.js&2.9.0/build/container/container_core-min.js&2.9.0/build/element/element-min.js&2.9.0/build/editor/simpleeditor-min.js"></script> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/editor/assets/skins/sam/simpleeditor.css" /> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/assets/skins/sam/skin.css"> <!-- Utility Dependencies --> <script src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script src="http://yui.yahooapis.com/2.8.2r1/build/element/element-min.js"></script> <!-- Needed for Menus, Buttons and Overlays used in the Toolbar --> <script src="http://yui.yahooapis.com/2.8.2r1/build/container/container_core-min.js"></script> <script src="http://yui.yahooapis.com/2.8.2r1/build/menu/menu-min.js"></script> <script src="http://yui.yahooapis.com/2.8.2r1/build/button/button-min.js"></script> <!-- Source file for Rich Text Editor--> <script src="http://yui.yahooapis.com/2.8.2r1/build/editor/editor-min.js"></script> <script> YAHOO.util.Event.on('submit', 'click', function() { myEditor.saveHTML(); var html = myEditor.get('element').value; }); (function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; var myConfig = { height: '200px', width: '900px', dompath: true, }; myEditor = new YAHOO.widget.SimpleEditor('msgpost', myConfig); myEditor.render(); })(); </script> </head> <body class="yui-skin-sam"> <form action="submit.php" method="post"> <textarea name="msgpost" id="msgpost" cols="50" rows="10"></textarea> <input type="submit" value="Submit" onsubmit="return myDoSubmit()"/> </form> </body> </html>

    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

  • CSS Positioning

    - by Davey
    Trying to mess with this wordpress theme and can't figure out why the sidebar is stacking underneath the content block. Any help would be very appreciated. http://www.buffalostreetbooks.com/events CSS: body { font-family: Arial, Helvetica, Verdana, Sans-serif; font-size: 10pt; background-color: #692022; background-image:url("http://www.buffalostreetbooks.com/wp-content/themes/autumn-leaves/images/repeatflower.png"); } body,h1#blog-title { margin: 0; padding: 0; } a { color: blue; } a:hover { color: #FF8C00; } a img { border: 0 none; } #wrapper { width: 960px; margin: 0 auto; background-color: #F4FBF4; border-left: 1px solid #ccc; border-right: 1px solid #ccc; } #header { background-image:url("http://www.buffalostreetbooks.com/wp-content/themes/autumn-leaves/images/headertime.png"); width:768px; height: 200px; } #inner-header { padding: 125px 1em 0; } h1#blog-title { font-size: 2em; } h1#blog-title a { color: #800000; } .entry-title a { color: #CD853F; } h1#blog-title a, .entry-title a, #footer a { text-decoration: none; } h1#blog-title a:hover, .entry-title a:hover, #footer a:hover { text-decoration: underline; } div.skip-link { display: none; } #menu { border-bottom: 1px solid #ccc; } #menu a { color: #000; } #menu a:hover { text-decoration: underline; } #menu li.current_page_item a, #menu li.current_page_item a:hover { background-color: #DFC28B; text-decoration: none; } #content { padding: 1em; width:600px; } .entry-title { font-size: 1.5em; margin: 1em 0 0 0; } abbr.published { color: #666; border: 0 none; } .entry-meta, .entry-date { color: #666; } #comments-list .avatar { float: left; margin-right: 1em; } #comments-list .n { font-weight: bold; } .entry-meta, .comment-meta { font-style: italic; } #comments-list p { clear: left; } #primary { padding-left: 1em; font-size: 0.9em; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; background-color: #FFFACD; } #footer { text-align: center; font-size: 0.8em; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin-bottom: 1em; } #inner-footer { padding: 1em 0; } .entry-meta, .entry-meta a, .comment-meta, .comment-meta a, .sidebar, .sidebar a, #footer, #footer a { color: #666; } /* LAYOUT: Two-Column (Right) DESCRIPTION: Two-column fluid layout with one sidebars right of content */ div#container { margin:0 0 0 0; width:960px; height:100%; } div#content { margin:0 0 0 0; } div.sidebar { overflow:hidden; width:280px; min-height:500px; clear:both; } div#secondary { clear:right; } div#footer { clear:both; width:100%; } /* Just some example content */ div#menu { height:2em; width:100%; } div#menu ul,div#menu ul ul { line-height:2em; list-style:none; margin:0; padding:0; } div#menu ul a { display:block; margin-right:1em; padding:0 0.5em; text-decoration:none; } div#menu ul ul ul a { font-style:italic; } div#menu ul li ul { left:-999em; position:absolute; } div#menu ul li:hover ul { left:auto; } .entry-title,.entry-meta { clear:both; } div#primary { } form#commentform .form-label { margin:1em 0 0; } form#commentform span.required { background:#fff; color:#c30; } form#commentform,form#commentform p { padding:0; } input#author,input#email,input#url,textarea#comme nt { padding:0.2em; } div.comments ol li { margin:0 0 3.5em; } textarea#comment { height:13em; margin:0 0 0.5em; overflow:auto; width:66%; } .alignright,img.alignright{ float:right; margin:1em 0 0 1em; } .alignleft,img.alignleft{ float:left; margin:1em 1em 0 0; } .aligncenter,img.aligncenter{ display:block; margin:1em auto; text-align:center; } div.gallery { clear:both; height:180px; margin:1em 0; width:100%; } p.wp-caption-text{ font-style:italic; } div.gallery dl{ margin:1em auto; overflow:hidden; text-align:center; } div.gallery dl.gallery-columns-1 { width:100%; } div.gallery dl.gallery-columns-2 { width:49%; } div.gallery dl.gallery-columns-3 { width:33%; } div.gallery dl.gallery-columns-4 { width:24%; } div.gallery dl.gallery-columns-5 { width:19%; } div#nav-above { margin-bottom:1em; } div#nav-below { margin-top:1em; } div#nav-images { height:150px; margin:1em 0; } div.navigation { height:1.25em; } div.navigation div.nav-next { float:right; text-align:right; } div.sidebar h3 { font-size:1.2em; } div.sidebar input#s { width:7em; } div.sidebar li { list-style:none; margin:0 0 2em; } div.sidebar li form { margin:0.2em 0 0; padding:0; } div.sidebar ul ul { margin:0 0 0 2em; } div.sidebar ul ul li { list-style:disc; margin:0; } div.sidebar ul ul ul { margin:0 0 0 0.5em; } div.sidebar ul ul ul li { list-style:circle; } div#menu ul li,div.gallery dl,div.navigation div.nav-previous { float:left; } input#author,input#email,input#url,div.navigation div { width:50%; } div.gallery *,div.sidebar div,div.sidebar h3,div.sidebar ul { margin:0; padding:0; }

    Read the article

  • Using R to Analyze G1GC Log Files

    - by user12620111
    Using R to Analyze G1GC Log Files body, td { font-family: sans-serif; background-color: white; font-size: 12px; margin: 8px; } tt, code, pre { font-family: 'DejaVu Sans Mono', 'Droid Sans Mono', 'Lucida Console', Consolas, Monaco, monospace; } h1 { font-size:2.2em; } h2 { font-size:1.8em; } h3 { font-size:1.4em; } h4 { font-size:1.0em; } h5 { font-size:0.9em; } h6 { font-size:0.8em; } a:visited { color: rgb(50%, 0%, 50%); } pre { margin-top: 0; max-width: 95%; border: 1px solid #ccc; white-space: pre-wrap; } pre code { display: block; padding: 0.5em; } code.r, code.cpp { background-color: #F8F8F8; } table, td, th { border: none; } blockquote { color:#666666; margin:0; padding-left: 1em; border-left: 0.5em #EEE solid; } hr { height: 0px; border-bottom: none; border-top-width: thin; border-top-style: dotted; border-top-color: #999999; } @media print { * { background: transparent !important; color: black !important; filter:none !important; -ms-filter: none !important; } body { font-size:12pt; max-width:100%; } a, a:visited { text-decoration: underline; } hr { visibility: hidden; page-break-before: always; } pre, blockquote { padding-right: 1em; page-break-inside: avoid; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page :left { margin: 15mm 20mm 15mm 10mm; } @page :right { margin: 15mm 10mm 15mm 20mm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } pre .operator, pre .paren { color: rgb(104, 118, 135) } pre .literal { color: rgb(88, 72, 246) } pre .number { color: rgb(0, 0, 205); } pre .comment { color: rgb(76, 136, 107); } pre .keyword { color: rgb(0, 0, 255); } pre .identifier { color: rgb(0, 0, 0); } pre .string { color: rgb(3, 106, 7); } var hljs=new function(){function m(p){return p.replace(/&/gm,"&").replace(/"}while(y.length||w.length){var v=u().splice(0,1)[0];z+=m(x.substr(q,v.offset-q));q=v.offset;if(v.event=="start"){z+=t(v.node);s.push(v.node)}else{if(v.event=="stop"){var p,r=s.length;do{r--;p=s[r];z+=("")}while(p!=v.node);s.splice(r,1);while(r'+M[0]+""}else{r+=M[0]}O=P.lR.lastIndex;M=P.lR.exec(L)}return r+L.substr(O,L.length-O)}function J(L,M){if(M.sL&&e[M.sL]){var r=d(M.sL,L);x+=r.keyword_count;return r.value}else{return F(L,M)}}function I(M,r){var L=M.cN?'':"";if(M.rB){y+=L;M.buffer=""}else{if(M.eB){y+=m(r)+L;M.buffer=""}else{y+=L;M.buffer=r}}D.push(M);A+=M.r}function G(N,M,Q){var R=D[D.length-1];if(Q){y+=J(R.buffer+N,R);return false}var P=q(M,R);if(P){y+=J(R.buffer+N,R);I(P,M);return P.rB}var L=v(D.length-1,M);if(L){var O=R.cN?"":"";if(R.rE){y+=J(R.buffer+N,R)+O}else{if(R.eE){y+=J(R.buffer+N,R)+O+m(M)}else{y+=J(R.buffer+N+M,R)+O}}while(L1){O=D[D.length-2].cN?"":"";y+=O;L--;D.length--}var r=D[D.length-1];D.length--;D[D.length-1].buffer="";if(r.starts){I(r.starts,"")}return R.rE}if(w(M,R)){throw"Illegal"}}var E=e[B];var D=[E.dM];var A=0;var x=0;var y="";try{var s,u=0;E.dM.buffer="";do{s=p(C,u);var t=G(s[0],s[1],s[2]);u+=s[0].length;if(!t){u+=s[1].length}}while(!s[2]);if(D.length1){throw"Illegal"}return{r:A,keyword_count:x,value:y}}catch(H){if(H=="Illegal"){return{r:0,keyword_count:0,value:m(C)}}else{throw H}}}function g(t){var p={keyword_count:0,r:0,value:m(t)};var r=p;for(var q in e){if(!e.hasOwnProperty(q)){continue}var s=d(q,t);s.language=q;if(s.keyword_count+s.rr.keyword_count+r.r){r=s}if(s.keyword_count+s.rp.keyword_count+p.r){r=p;p=s}}if(r.language){p.second_best=r}return p}function i(r,q,p){if(q){r=r.replace(/^((]+|\t)+)/gm,function(t,w,v,u){return w.replace(/\t/g,q)})}if(p){r=r.replace(/\n/g,"")}return r}function n(t,w,r){var x=h(t,r);var v=a(t);var y,s;if(v){y=d(v,x)}else{return}var q=c(t);if(q.length){s=document.createElement("pre");s.innerHTML=y.value;y.value=k(q,c(s),x)}y.value=i(y.value,w,r);var u=t.className;if(!u.match("(\\s|^)(language-)?"+v+"(\\s|$)")){u=u?(u+" "+v):v}if(/MSIE [678]/.test(navigator.userAgent)&&t.tagName=="CODE"&&t.parentNode.tagName=="PRE"){s=t.parentNode;var p=document.createElement("div");p.innerHTML=""+y.value+"";t=p.firstChild.firstChild;p.firstChild.cN=s.cN;s.parentNode.replaceChild(p.firstChild,s)}else{t.innerHTML=y.value}t.className=u;t.result={language:v,kw:y.keyword_count,re:y.r};if(y.second_best){t.second_best={language:y.second_best.language,kw:y.second_best.keyword_count,re:y.second_best.r}}}function o(){if(o.called){return}o.called=true;var r=document.getElementsByTagName("pre");for(var p=0;p|=||=||=|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~";this.ER="(?![\\s\\S])";this.BE={b:"\\\\.",r:0};this.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[this.BE],r:0};this.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[this.BE],r:0};this.CLCM={cN:"comment",b:"//",e:"$"};this.CBLCLM={cN:"comment",b:"/\\*",e:"\\*/"};this.HCM={cN:"comment",b:"#",e:"$"};this.NM={cN:"number",b:this.NR,r:0};this.CNM={cN:"number",b:this.CNR,r:0};this.BNM={cN:"number",b:this.BNR,r:0};this.inherit=function(r,s){var p={};for(var q in r){p[q]=r[q]}if(s){for(var q in s){p[q]=s[q]}}return p}}();hljs.LANGUAGES.cpp=function(){var a={keyword:{"false":1,"int":1,"float":1,"while":1,"private":1,"char":1,"catch":1,"export":1,virtual:1,operator:2,sizeof:2,dynamic_cast:2,typedef:2,const_cast:2,"const":1,struct:1,"for":1,static_cast:2,union:1,namespace:1,unsigned:1,"long":1,"throw":1,"volatile":2,"static":1,"protected":1,bool:1,template:1,mutable:1,"if":1,"public":1,friend:2,"do":1,"return":1,"goto":1,auto:1,"void":2,"enum":1,"else":1,"break":1,"new":1,extern:1,using:1,"true":1,"class":1,asm:1,"case":1,typeid:1,"short":1,reinterpret_cast:2,"default":1,"double":1,register:1,explicit:1,signed:1,typename:1,"try":1,"this":1,"switch":1,"continue":1,wchar_t:1,inline:1,"delete":1,alignof:1,char16_t:1,char32_t:1,constexpr:1,decltype:1,noexcept:1,nullptr:1,static_assert:1,thread_local:1,restrict:1,_Bool:1,complex:1},built_in:{std:1,string:1,cin:1,cout:1,cerr:1,clog:1,stringstream:1,istringstream:1,ostringstream:1,auto_ptr:1,deque:1,list:1,queue:1,stack:1,vector:1,map:1,set:1,bitset:1,multiset:1,multimap:1,unordered_set:1,unordered_map:1,unordered_multiset:1,unordered_multimap:1,array:1,shared_ptr:1}};return{dM:{k:a,i:"",k:a,r:10,c:["self"]}]}}}();hljs.LANGUAGES.r={dM:{c:[hljs.HCM,{cN:"number",b:"\\b0[xX][0-9a-fA-F]+[Li]?\\b",e:hljs.IMMEDIATE_RE,r:0},{cN:"number",b:"\\b\\d+(?:[eE][+\\-]?\\d*)?L\\b",e:hljs.IMMEDIATE_RE,r:0},{cN:"number",b:"\\b\\d+\\.(?!\\d)(?:i\\b)?",e:hljs.IMMEDIATE_RE,r:1},{cN:"number",b:"\\b\\d+(?:\\.\\d*)?(?:[eE][+\\-]?\\d*)?i?\\b",e:hljs.IMMEDIATE_RE,r:0},{cN:"number",b:"\\.\\d+(?:[eE][+\\-]?\\d*)?i?\\b",e:hljs.IMMEDIATE_RE,r:1},{cN:"keyword",b:"(?:tryCatch|library|setGeneric|setGroupGeneric)\\b",e:hljs.IMMEDIATE_RE,r:10},{cN:"keyword",b:"\\.\\.\\.",e:hljs.IMMEDIATE_RE,r:10},{cN:"keyword",b:"\\.\\.\\d+(?![\\w.])",e:hljs.IMMEDIATE_RE,r:10},{cN:"keyword",b:"\\b(?:function)",e:hljs.IMMEDIATE_RE,r:2},{cN:"keyword",b:"(?:if|in|break|next|repeat|else|for|return|switch|while|try|stop|warning|require|attach|detach|source|setMethod|setClass)\\b",e:hljs.IMMEDIATE_RE,r:1},{cN:"literal",b:"(?:NA|NA_integer_|NA_real_|NA_character_|NA_complex_)\\b",e:hljs.IMMEDIATE_RE,r:10},{cN:"literal",b:"(?:NULL|TRUE|FALSE|T|F|Inf|NaN)\\b",e:hljs.IMMEDIATE_RE,r:1},{cN:"identifier",b:"[a-zA-Z.][a-zA-Z0-9._]*\\b",e:hljs.IMMEDIATE_RE,r:0},{cN:"operator",b:"|=||   Using R to Analyze G1GC Log Files   Using R to Analyze G1GC Log Files Introduction Working in Oracle Platform Integration gives an engineer opportunities to work on a wide array of technologies. My team’s goal is to make Oracle applications run best on the Solaris/SPARC platform. When looking for bottlenecks in a modern applications, one needs to be aware of not only how the CPUs and operating system are executing, but also network, storage, and in some cases, the Java Virtual Machine. I was recently presented with about 1.5 GB of Java Garbage First Garbage Collector log file data. If you’re not familiar with the subject, you might want to review Garbage First Garbage Collector Tuning by Monica Beckwith. The customer had been running Java HotSpot 1.6.0_31 to host a web application server. I was told that the Solaris/SPARC server was running a Java process launched using a commmand line that included the following flags: -d64 -Xms9g -Xmx9g -XX:+UseG1GC -XX:MaxGCPauseMillis=200 -XX:InitiatingHeapOccupancyPercent=80 -XX:PermSize=256m -XX:MaxPermSize=256m -XX:+PrintGC -XX:+PrintGCTimeStamps -XX:+PrintHeapAtGC -XX:+PrintGCDateStamps -XX:+PrintFlagsFinal -XX:+DisableExplicitGC -XX:+UnlockExperimentalVMOptions -XX:ParallelGCThreads=8 Several sources on the internet indicate that if I were to print out the 1.5 GB of log files, it would require enough paper to fill the bed of a pick up truck. Of course, it would be fruitless to try to scan the log files by hand. Tools will be required to summarize the contents of the log files. Others have encountered large Java garbage collection log files. There are existing tools to analyze the log files: IBM’s GC toolkit The chewiebug GCViewer gchisto HPjmeter Instead of using one of the other tools listed, I decide to parse the log files with standard Unix tools, and analyze the data with R. Data Cleansing The log files arrived in two different formats. I guess that the difference is that one set of log files was generated using a more verbose option, maybe -XX:+PrintHeapAtGC, and the other set of log files was generated without that option. Format 1 In some of the log files, the log files with the less verbose format, a single trace, i.e. the report of a singe garbage collection event, looks like this: {Heap before GC invocations=12280 (full 61): garbage-first heap total 9437184K, used 7499918K [0xfffffffd00000000, 0xffffffff40000000, 0xffffffff40000000) region size 4096K, 1 young (4096K), 0 survivors (0K) compacting perm gen total 262144K, used 144077K [0xffffffff40000000, 0xffffffff50000000, 0xffffffff50000000) the space 262144K, 54% used [0xffffffff40000000, 0xffffffff48cb3758, 0xffffffff48cb3800, 0xffffffff50000000) No shared spaces configured. 2014-05-14T07:24:00.988-0700: 60586.353: [GC pause (young) 7324M->7320M(9216M), 0.1567265 secs] Heap after GC invocations=12281 (full 61): garbage-first heap total 9437184K, used 7496533K [0xfffffffd00000000, 0xffffffff40000000, 0xffffffff40000000) region size 4096K, 0 young (0K), 0 survivors (0K) compacting perm gen total 262144K, used 144077K [0xffffffff40000000, 0xffffffff50000000, 0xffffffff50000000) the space 262144K, 54% used [0xffffffff40000000, 0xffffffff48cb3758, 0xffffffff48cb3800, 0xffffffff50000000) No shared spaces configured. } A simple grep can be used to extract a summary: $ grep "\[ GC pause (young" g1gc.log 2014-05-13T13:24:35.091-0700: 3.109: [GC pause (young) 20M->5029K(9216M), 0.0146328 secs] 2014-05-13T13:24:35.440-0700: 3.459: [GC pause (young) 9125K->6077K(9216M), 0.0086723 secs] 2014-05-13T13:24:37.581-0700: 5.599: [GC pause (young) 25M->8470K(9216M), 0.0203820 secs] 2014-05-13T13:24:42.686-0700: 10.704: [GC pause (young) 44M->15M(9216M), 0.0288848 secs] 2014-05-13T13:24:48.941-0700: 16.958: [GC pause (young) 51M->20M(9216M), 0.0491244 secs] 2014-05-13T13:24:56.049-0700: 24.066: [GC pause (young) 92M->26M(9216M), 0.0525368 secs] 2014-05-13T13:25:34.368-0700: 62.383: [GC pause (young) 602M->68M(9216M), 0.1721173 secs] But that format wasn't easily read into R, so I needed to be a bit more tricky. I used the following Unix command to create a summary file that was easy for R to read. $ echo "SecondsSinceLaunch BeforeSize AfterSize TotalSize RealTime" $ grep "\[GC pause (young" g1gc.log | grep -v mark | sed -e 's/[A-SU-z\(\),]/ /g' -e 's/->/ /' -e 's/: / /g' | more SecondsSinceLaunch BeforeSize AfterSize TotalSize RealTime 2014-05-13T13:24:35.091-0700 3.109 20 5029 9216 0.0146328 2014-05-13T13:24:35.440-0700 3.459 9125 6077 9216 0.0086723 2014-05-13T13:24:37.581-0700 5.599 25 8470 9216 0.0203820 2014-05-13T13:24:42.686-0700 10.704 44 15 9216 0.0288848 2014-05-13T13:24:48.941-0700 16.958 51 20 9216 0.0491244 2014-05-13T13:24:56.049-0700 24.066 92 26 9216 0.0525368 2014-05-13T13:25:34.368-0700 62.383 602 68 9216 0.1721173 Format 2 In some of the log files, the log files with the more verbose format, a single trace, i.e. the report of a singe garbage collection event, was more complicated than Format 1. Here is a text file with an example of a single G1GC trace in the second format. As you can see, it is quite complicated. It is nice that there is so much information available, but the level of detail can be overwhelming. I wrote this awk script (download) to summarize each trace on a single line. #!/usr/bin/env awk -f BEGIN { printf("SecondsSinceLaunch IncrementalCount FullCount UserTime SysTime RealTime BeforeSize AfterSize TotalSize\n") } ###################### # Save count data from lines that are at the start of each G1GC trace. # Each trace starts out like this: # {Heap before GC invocations=14 (full 0): # garbage-first heap total 9437184K, used 325496K [0xfffffffd00000000, 0xffffffff40000000, 0xffffffff40000000) ###################### /{Heap.*full/{ gsub ( "\\)" , "" ); nf=split($0,a,"="); split(a[2],b," "); getline; if ( match($0, "first") ) { G1GC=1; IncrementalCount=b[1]; FullCount=substr( b[3], 1, length(b[3])-1 ); } else { G1GC=0; } } ###################### # Pull out time stamps that are in lines with this format: # 2014-05-12T14:02:06.025-0700: 94.312: [GC pause (young), 0.08870154 secs] ###################### /GC pause/ { DateTime=$1; SecondsSinceLaunch=substr($2, 1, length($2)-1); } ###################### # Heap sizes are in lines that look like this: # [ 4842M->4838M(9216M)] ###################### /\[ .*]$/ { gsub ( "\\[" , "" ); gsub ( "\ \]" , "" ); gsub ( "->" , " " ); gsub ( "\\( " , " " ); gsub ( "\ \)" , " " ); split($0,a," "); if ( split(a[1],b,"M") > 1 ) {BeforeSize=b[1]*1024;} if ( split(a[1],b,"K") > 1 ) {BeforeSize=b[1];} if ( split(a[2],b,"M") > 1 ) {AfterSize=b[1]*1024;} if ( split(a[2],b,"K") > 1 ) {AfterSize=b[1];} if ( split(a[3],b,"M") > 1 ) {TotalSize=b[1]*1024;} if ( split(a[3],b,"K") > 1 ) {TotalSize=b[1];} } ###################### # Emit an output line when you find input that looks like this: # [Times: user=1.41 sys=0.08, real=0.24 secs] ###################### /\[Times/ { if (G1GC==1) { gsub ( "," , "" ); split($2,a,"="); UserTime=a[2]; split($3,a,"="); SysTime=a[2]; split($4,a,"="); RealTime=a[2]; print DateTime,SecondsSinceLaunch,IncrementalCount,FullCount,UserTime,SysTime,RealTime,BeforeSize,AfterSize,TotalSize; G1GC=0; } } The resulting summary is about 25X smaller that the original file, but still difficult for a human to digest. SecondsSinceLaunch IncrementalCount FullCount UserTime SysTime RealTime BeforeSize AfterSize TotalSize ... 2014-05-12T18:36:34.669-0700: 3985.744 561 0 0.57 0.06 0.16 1724416 1720320 9437184 2014-05-12T18:36:34.839-0700: 3985.914 562 0 0.51 0.06 0.19 1724416 1720320 9437184 2014-05-12T18:36:35.069-0700: 3986.144 563 0 0.60 0.04 0.27 1724416 1721344 9437184 2014-05-12T18:36:35.354-0700: 3986.429 564 0 0.33 0.04 0.09 1725440 1722368 9437184 2014-05-12T18:36:35.545-0700: 3986.620 565 0 0.58 0.04 0.17 1726464 1722368 9437184 2014-05-12T18:36:35.726-0700: 3986.801 566 0 0.43 0.05 0.12 1726464 1722368 9437184 2014-05-12T18:36:35.856-0700: 3986.930 567 0 0.30 0.04 0.07 1726464 1723392 9437184 2014-05-12T18:36:35.947-0700: 3987.023 568 0 0.61 0.04 0.26 1727488 1723392 9437184 2014-05-12T18:36:36.228-0700: 3987.302 569 0 0.46 0.04 0.16 1731584 1724416 9437184 Reading the Data into R Once the GC log data had been cleansed, either by processing the first format with the shell script, or by processing the second format with the awk script, it was easy to read the data into R. g1gc.df = read.csv("summary.txt", row.names = NULL, stringsAsFactors=FALSE,sep="") str(g1gc.df) ## 'data.frame': 8307 obs. of 10 variables: ## $ row.names : chr "2014-05-12T14:00:32.868-0700:" "2014-05-12T14:00:33.179-0700:" "2014-05-12T14:00:33.677-0700:" "2014-05-12T14:00:35.538-0700:" ... ## $ SecondsSinceLaunch: num 1.16 1.47 1.97 3.83 6.1 ... ## $ IncrementalCount : int 0 1 2 3 4 5 6 7 8 9 ... ## $ FullCount : int 0 0 0 0 0 0 0 0 0 0 ... ## $ UserTime : num 0.11 0.05 0.04 0.21 0.08 0.26 0.31 0.33 0.34 0.56 ... ## $ SysTime : num 0.04 0.01 0.01 0.05 0.01 0.06 0.07 0.06 0.07 0.09 ... ## $ RealTime : num 0.02 0.02 0.01 0.04 0.02 0.04 0.05 0.04 0.04 0.06 ... ## $ BeforeSize : int 8192 5496 5768 22528 24576 43008 34816 53248 55296 93184 ... ## $ AfterSize : int 1400 1672 2557 4907 7072 14336 16384 18432 19456 21504 ... ## $ TotalSize : int 9437184 9437184 9437184 9437184 9437184 9437184 9437184 9437184 9437184 9437184 ... head(g1gc.df) ## row.names SecondsSinceLaunch IncrementalCount ## 1 2014-05-12T14:00:32.868-0700: 1.161 0 ## 2 2014-05-12T14:00:33.179-0700: 1.472 1 ## 3 2014-05-12T14:00:33.677-0700: 1.969 2 ## 4 2014-05-12T14:00:35.538-0700: 3.830 3 ## 5 2014-05-12T14:00:37.811-0700: 6.103 4 ## 6 2014-05-12T14:00:41.428-0700: 9.720 5 ## FullCount UserTime SysTime RealTime BeforeSize AfterSize TotalSize ## 1 0 0.11 0.04 0.02 8192 1400 9437184 ## 2 0 0.05 0.01 0.02 5496 1672 9437184 ## 3 0 0.04 0.01 0.01 5768 2557 9437184 ## 4 0 0.21 0.05 0.04 22528 4907 9437184 ## 5 0 0.08 0.01 0.02 24576 7072 9437184 ## 6 0 0.26 0.06 0.04 43008 14336 9437184 Basic Statistics Once the data has been read into R, simple statistics are very easy to generate. All of the numbers from high school statistics are available via simple commands. For example, generate a summary of every column: summary(g1gc.df) ## row.names SecondsSinceLaunch IncrementalCount FullCount ## Length:8307 Min. : 1 Min. : 0 Min. : 0.0 ## Class :character 1st Qu.: 9977 1st Qu.:2048 1st Qu.: 0.0 ## Mode :character Median :12855 Median :4136 Median : 12.0 ## Mean :12527 Mean :4156 Mean : 31.6 ## 3rd Qu.:15758 3rd Qu.:6262 3rd Qu.: 61.0 ## Max. :55484 Max. :8391 Max. :113.0 ## UserTime SysTime RealTime BeforeSize ## Min. :0.040 Min. :0.0000 Min. : 0.0 Min. : 5476 ## 1st Qu.:0.470 1st Qu.:0.0300 1st Qu.: 0.1 1st Qu.:5137920 ## Median :0.620 Median :0.0300 Median : 0.1 Median :6574080 ## Mean :0.751 Mean :0.0355 Mean : 0.3 Mean :5841855 ## 3rd Qu.:0.920 3rd Qu.:0.0400 3rd Qu.: 0.2 3rd Qu.:7084032 ## Max. :3.370 Max. :1.5600 Max. :488.1 Max. :8696832 ## AfterSize TotalSize ## Min. : 1380 Min. :9437184 ## 1st Qu.:5002752 1st Qu.:9437184 ## Median :6559744 Median :9437184 ## Mean :5785454 Mean :9437184 ## 3rd Qu.:7054336 3rd Qu.:9437184 ## Max. :8482816 Max. :9437184 Q: What is the total amount of User CPU time spent in garbage collection? sum(g1gc.df$UserTime) ## [1] 6236 As you can see, less than two hours of CPU time was spent in garbage collection. Is that too much? To find the percentage of time spent in garbage collection, divide the number above by total_elapsed_time*CPU_count. In this case, there are a lot of CPU’s and it turns out the the overall amount of CPU time spent in garbage collection isn’t a problem when viewed in isolation. When calculating rates, i.e. events per unit time, you need to ask yourself if the rate is homogenous across the time period in the log file. Does the log file include spikes of high activity that should be separately analyzed? Averaging in data from nights and weekends with data from business hours may alias problems. If you have a reason to suspect that the garbage collection rates include peaks and valleys that need independent analysis, see the “Time Series” section, below. Q: How much garbage is collected on each pass? The amount of heap space that is recovered per GC pass is surprisingly low: At least one collection didn’t recover any data. (“Min.=0”) 25% of the passes recovered 3MB or less. (“1st Qu.=3072”) Half of the GC passes recovered 4MB or less. (“Median=4096”) The average amount recovered was 56MB. (“Mean=56390”) 75% of the passes recovered 36MB or less. (“3rd Qu.=36860”) At least one pass recovered 2GB. (“Max.=2121000”) g1gc.df$Delta = g1gc.df$BeforeSize - g1gc.df$AfterSize summary(g1gc.df$Delta) ## Min. 1st Qu. Median Mean 3rd Qu. Max. ## 0 3070 4100 56400 36900 2120000 Q: What is the maximum User CPU time for a single collection? The worst garbage collection (“Max.”) is many standard deviations away from the mean. The data appears to be right skewed. summary(g1gc.df$UserTime) ## Min. 1st Qu. Median Mean 3rd Qu. Max. ## 0.040 0.470 0.620 0.751 0.920 3.370 sd(g1gc.df$UserTime) ## [1] 0.3966 Basic Graphics Once the data is in R, it is trivial to plot the data with formats including dot plots, line charts, bar charts (simple, stacked, grouped), pie charts, boxplots, scatter plots histograms, and kernel density plots. Histogram of User CPU Time per Collection I don't think that this graph requires any explanation. hist(g1gc.df$UserTime, main="User CPU Time per Collection", xlab="Seconds", ylab="Frequency") Box plot to identify outliers When the initial data is viewed with a box plot, you can see the one crazy outlier in the real time per GC. Save this data point for future analysis and drop the outlier so that it’s not throwing off our statistics. Now the box plot shows many outliers, which will be examined later, using times series analysis. Notice that the scale of the x-axis changes drastically once the crazy outlier is removed. par(mfrow=c(2,1)) boxplot(g1gc.df$UserTime,g1gc.df$SysTime,g1gc.df$RealTime, main="Box Plot of Time per GC\n(dominated by a crazy outlier)", names=c("usr","sys","elapsed"), xlab="Seconds per GC", ylab="Time (Seconds)", horizontal = TRUE, outcol="red") crazy.outlier.df=g1gc.df[g1gc.df$RealTime > 400,] g1gc.df=g1gc.df[g1gc.df$RealTime < 400,] boxplot(g1gc.df$UserTime,g1gc.df$SysTime,g1gc.df$RealTime, main="Box Plot of Time per GC\n(crazy outlier excluded)", names=c("usr","sys","elapsed"), xlab="Seconds per GC", ylab="Time (Seconds)", horizontal = TRUE, outcol="red") box(which = "outer", lty = "solid") Here is the crazy outlier for future analysis: crazy.outlier.df ## row.names SecondsSinceLaunch IncrementalCount ## 8233 2014-05-12T23:15:43.903-0700: 20741 8316 ## FullCount UserTime SysTime RealTime BeforeSize AfterSize TotalSize ## 8233 112 0.55 0.42 488.1 8381440 8235008 9437184 ## Delta ## 8233 146432 R Time Series Data To analyze the garbage collection as a time series, I’ll use Z’s Ordered Observations (zoo). “zoo is the creator for an S3 class of indexed totally ordered observations which includes irregular time series.” require(zoo) ## Loading required package: zoo ## ## Attaching package: 'zoo' ## ## The following objects are masked from 'package:base': ## ## as.Date, as.Date.numeric head(g1gc.df[,1]) ## [1] "2014-05-12T14:00:32.868-0700:" "2014-05-12T14:00:33.179-0700:" ## [3] "2014-05-12T14:00:33.677-0700:" "2014-05-12T14:00:35.538-0700:" ## [5] "2014-05-12T14:00:37.811-0700:" "2014-05-12T14:00:41.428-0700:" options("digits.secs"=3) times=as.POSIXct( g1gc.df[,1], format="%Y-%m-%dT%H:%M:%OS%z:") g1gc.z = zoo(g1gc.df[,-c(1)], order.by=times) head(g1gc.z) ## SecondsSinceLaunch IncrementalCount FullCount ## 2014-05-12 17:00:32.868 1.161 0 0 ## 2014-05-12 17:00:33.178 1.472 1 0 ## 2014-05-12 17:00:33.677 1.969 2 0 ## 2014-05-12 17:00:35.538 3.830 3 0 ## 2014-05-12 17:00:37.811 6.103 4 0 ## 2014-05-12 17:00:41.427 9.720 5 0 ## UserTime SysTime RealTime BeforeSize AfterSize ## 2014-05-12 17:00:32.868 0.11 0.04 0.02 8192 1400 ## 2014-05-12 17:00:33.178 0.05 0.01 0.02 5496 1672 ## 2014-05-12 17:00:33.677 0.04 0.01 0.01 5768 2557 ## 2014-05-12 17:00:35.538 0.21 0.05 0.04 22528 4907 ## 2014-05-12 17:00:37.811 0.08 0.01 0.02 24576 7072 ## 2014-05-12 17:00:41.427 0.26 0.06 0.04 43008 14336 ## TotalSize Delta ## 2014-05-12 17:00:32.868 9437184 6792 ## 2014-05-12 17:00:33.178 9437184 3824 ## 2014-05-12 17:00:33.677 9437184 3211 ## 2014-05-12 17:00:35.538 9437184 17621 ## 2014-05-12 17:00:37.811 9437184 17504 ## 2014-05-12 17:00:41.427 9437184 28672 Example of Two Benchmark Runs in One Log File The data in the following graph is from a different log file, not the one of primary interest to this article. I’m including this image because it is an example of idle periods followed by busy periods. It would be uninteresting to average the rate of garbage collection over the entire log file period. More interesting would be the rate of garbage collect in the two busy periods. Are they the same or different? Your production data may be similar, for example, bursts when employees return from lunch and idle times on weekend evenings, etc. Once the data is in an R Time Series, you can analyze isolated time windows. Clipping the Time Series data Flashing back to our test case… Viewing the data as a time series is interesting. You can see that the work intensive time period is between 9:00 PM and 3:00 AM. Lets clip the data to the interesting period:     par(mfrow=c(2,1)) plot(g1gc.z$UserTime, type="h", main="User Time per GC\nTime: Complete Log File", xlab="Time of Day", ylab="CPU Seconds per GC", col="#1b9e77") clipped.g1gc.z=window(g1gc.z, start=as.POSIXct("2014-05-12 21:00:00"), end=as.POSIXct("2014-05-13 03:00:00")) plot(clipped.g1gc.z$UserTime, type="h", main="User Time per GC\nTime: Limited to Benchmark Execution", xlab="Time of Day", ylab="CPU Seconds per GC", col="#1b9e77") box(which = "outer", lty = "solid") Cumulative Incremental and Full GC count Here is the cumulative incremental and full GC count. When the line is very steep, it indicates that the GCs are repeating very quickly. Notice that the scale on the Y axis is different for full vs. incremental. plot(clipped.g1gc.z[,c(2:3)], main="Cumulative Incremental and Full GC count", xlab="Time of Day", col="#1b9e77") GC Analysis of Benchmark Execution using Time Series data In the following series of 3 graphs: The “After Size” show the amount of heap space in use after each garbage collection. Many Java objects are still referenced, i.e. alive, during each garbage collection. This may indicate that the application has a memory leak, or may indicate that the application has a very large memory footprint. Typically, an application's memory footprint plateau's in the early stage of execution. One would expect this graph to have a flat top. The steep decline in the heap space may indicate that the application crashed after 2:00. The second graph shows that the outliers in real execution time, discussed above, occur near 2:00. when the Java heap seems to be quite full. The third graph shows that Full GCs are infrequent during the first few hours of execution. The rate of Full GC's, (the slope of the cummulative Full GC line), changes near midnight.   plot(clipped.g1gc.z[,c("AfterSize","RealTime","FullCount")], xlab="Time of Day", col=c("#1b9e77","red","#1b9e77")) GC Analysis of heap recovered Each GC trace includes the amount of heap space in use before and after the individual GC event. During garbage coolection, unreferenced objects are identified, the space holding the unreferenced objects is freed, and thus, the difference in before and after usage indicates how much space has been freed. The following box plot and bar chart both demonstrate the same point - the amount of heap space freed per garbage colloection is surprisingly low. par(mfrow=c(2,1)) boxplot(as.vector(clipped.g1gc.z$Delta), main="Amount of Heap Recovered per GC Pass", xlab="Size in KB", horizontal = TRUE, col="red") hist(as.vector(clipped.g1gc.z$Delta), main="Amount of Heap Recovered per GC Pass", xlab="Size in KB", breaks=100, col="red") box(which = "outer", lty = "solid") This graph is the most interesting. The dark blue area shows how much heap is occupied by referenced Java objects. This represents memory that holds live data. The red fringe at the top shows how much data was recovered after each garbage collection. barplot(clipped.g1gc.z[,c("AfterSize","Delta")], col=c("#7570b3","#e7298a"), xlab="Time of Day", border=NA) legend("topleft", c("Live Objects","Heap Recovered on GC"), fill=c("#7570b3","#e7298a")) box(which = "outer", lty = "solid") When I discuss the data in the log files with the customer, I will ask for an explaination for the large amount of referenced data resident in the Java heap. There are two are posibilities: There is a memory leak and the amount of space required to hold referenced objects will continue to grow, limited only by the maximum heap size. After the maximum heap size is reached, the JVM will throw an “Out of Memory” exception every time that the application tries to allocate a new object. If this is the case, the aplication needs to be debugged to identify why old objects are referenced when they are no longer needed. The application has a legitimate requirement to keep a large amount of data in memory. The customer may want to further increase the maximum heap size. Another possible solution would be to partition the application across multiple cluster nodes, where each node has responsibility for managing a unique subset of the data. Conclusion In conclusion, R is a very powerful tool for the analysis of Java garbage collection log files. The primary difficulty is data cleansing so that information can be read into an R data frame. Once the data has been read into R, a rich set of tools may be used for thorough evaluation.

    Read the article

  • How to crop the UIImage?

    - by Rajendra Bhole
    Hi, I develop an application in which i process the image using its pixels but in that image processing it takes a lot of time. Therefore i want to crop UIImage (Only middle part of image i.e. removing/croping bordered part of image).I have the develop code are, - (NSInteger) processImage1: (UIImage*) image { CGFloat width = image.size.width; CGFloat height = image.size.height; struct pixel* pixels = (struct pixel*) calloc(1, image.size.width * image.size.height * sizeof(struct pixel)); if (pixels != nil) { // Create a new bitmap CGContextRef context = CGBitmapContextCreate( (void*) pixels, image.size.width, image.size.height, 8, image.size.width * 4, CGImageGetColorSpace(image.CGImage), kCGImageAlphaPremultipliedLast ); if (context != NULL) { // Draw the image in the bitmap CGContextDrawImage(context, CGRectMake(0.0f, 0.0f, image.size.width, image.size.height), image.CGImage); NSUInteger numberOfPixels = image.size.width * image.size.height; NSMutableArray *numberOfPixelsArray = [[[NSMutableArray alloc] initWithCapacity:numberOfPixelsArray] autorelease]; } How i take(croping outside bordered) the middle part of UIImage?????????

    Read the article

  • jQuery: Highlight element under mouse cursor?

    - by Ralph
    I'm trying to create an "element picker" in jQuery, like Firebug has. Basically, I want to highlight the element underneath the user's mouse. Here's what I've got so far, but it isn't working very well: $('*').mouseover(function (event) { var $this = $(this); $div.offset($this.offset()).width($this.width()).height($this.height()); return false; }); var $div = $('<div>') .css({ 'background-color': 'rgba(255,0,0,.5)', 'position': 'absolute', 'z-index': '65535' }) .appendTo('body'); Basically, I'm injecting a div into the DOM that has a semi-transparent background. Then I listen for the mouseover event on every element, then move the div so that it covers that element. Right now, this just makes the whole page go red as soon as you move your mouse over the page. How can I get this to work nicer? Edit: Pretty sure the problem is that as soon as my mouse touches the page, the body gets selected, and then as I move my mouse around, none of the moments get passed through the highligher because its overtop of everything. Firebug Digging through Firebug source code, I found this: drawBoxModel: function(el) { // avoid error when the element is not attached a document if (!el || !el.parentNode) return; var box = Firebug.browser.getElementBox(el); var windowSize = Firebug.browser.getWindowSize(); var scrollPosition = Firebug.browser.getWindowScrollPosition(); // element may be occluded by the chrome, when in frame mode var offsetHeight = Firebug.chrome.type == "frame" ? FirebugChrome.height : 0; // if element box is not inside the viewport, don't draw the box model if (box.top > scrollPosition.top + windowSize.height - offsetHeight || box.left > scrollPosition.left + windowSize.width || scrollPosition.top > box.top + box.height || scrollPosition.left > box.left + box.width ) return; var top = box.top; var left = box.left; var height = box.height; var width = box.width; var margin = Firebug.browser.getMeasurementBox(el, "margin"); var padding = Firebug.browser.getMeasurementBox(el, "padding"); var border = Firebug.browser.getMeasurementBox(el, "border"); boxModelStyle.top = top - margin.top + "px"; boxModelStyle.left = left - margin.left + "px"; boxModelStyle.height = height + margin.top + margin.bottom + "px"; boxModelStyle.width = width + margin.left + margin.right + "px"; boxBorderStyle.top = margin.top + "px"; boxBorderStyle.left = margin.left + "px"; boxBorderStyle.height = height + "px"; boxBorderStyle.width = width + "px"; boxPaddingStyle.top = margin.top + border.top + "px"; boxPaddingStyle.left = margin.left + border.left + "px"; boxPaddingStyle.height = height - border.top - border.bottom + "px"; boxPaddingStyle.width = width - border.left - border.right + "px"; boxContentStyle.top = margin.top + border.top + padding.top + "px"; boxContentStyle.left = margin.left + border.left + padding.left + "px"; boxContentStyle.height = height - border.top - padding.top - padding.bottom - border.bottom + "px"; boxContentStyle.width = width - border.left - padding.left - padding.right - border.right + "px"; if (!boxModelVisible) this.showBoxModel(); }, hideBoxModel: function() { if (!boxModelVisible) return; offlineFragment.appendChild(boxModel); boxModelVisible = false; }, showBoxModel: function() { if (boxModelVisible) return; if (outlineVisible) this.hideOutline(); Firebug.browser.document.getElementsByTagName("body")[0].appendChild(boxModel); boxModelVisible = true; } Looks like they're using a standard div + css to draw it..... just have to figure out how they're handling the events now... (this file is 28K lines long) There's also this snippet, which I guess retrieves the appropriate object.... although I can't figure out how. They're looking for a class "objectLink-element"... and I have no idea what this "repObject" is. onMouseMove: function(event) { var target = event.srcElement || event.target; var object = getAncestorByClass(target, "objectLink-element"); object = object ? object.repObject : null; if(object && instanceOf(object, "Element") && object.nodeType == 1) { if(object != lastHighlightedObject) { Firebug.Inspector.drawBoxModel(object); object = lastHighlightedObject; } } else Firebug.Inspector.hideBoxModel(); }, I'm thinking that maybe when the mousemove or mouseover event fires for the highlighter node I can somehow pass it along instead? Maybe to node it's covering...?

    Read the article

  • Visualize the depth buffer

    - by Thanatos
    I'm attempting to visualize the depth buffer for debugging purposes, by drawing it on top of the actual rendering when a key is pressed. It's mostly working, but the resulting image appears to be zoomed in. (It's not just the original image, in an odd grayscale) Why is it not the same size as the color buffer? This is what I'm using the view the depth buffer: void get_gl_size(int &width, int &height) { int iv[4]; glGetIntegerv(GL_VIEWPORT, iv); width = iv[2]; height = iv[3]; } void visualize_depth_buffer() { int width, height; get_gl_size(width, height); float *data = new float[width * height]; glReadPixels(0, 0, width, height, GL_DEPTH_COMPONENT, GL_FLOAT, data); glDrawPixels(width, height, GL_LUMINANCE, GL_FLOAT, data); delete [] data; }

    Read the article

  • collision with moving objects

    - by blacksheep
    tried to write a collision with the moving "floats" but did not succeed. maybe wrong place of the "collision" code? thanx 4 help! // // FruitsView.m // import "FruitsView.h" import "Constants.h" import "Utilities.h" define kFloat1Speed 0.15 define kFloat2Speed 0.3 define kFloat3Speed 0.2 @interface FruitsView (Private) - (void) stopTimer; @end @implementation FruitsView @synthesize apple, float1, float2, float3, posFloat1, posFloat2, posFloat3; -(void)onTimer { float1.center = CGPointMake(float1.center.x+posFloat1.x,float1.cen ter.y+posFloat1.y); if(float1.center.x 380 || float1.center.x < -60) posFloat1.x = -posFloat1.x; if(float1.center.y 100 || float1.center.y < -40) posFloat1.y = -posFloat1.y; float2.center = CGPointMake(float2.center.x+posFloat2.x,float2.cen ter.y+posFloat2.y); if(float2.center.x 380 || float2.center.x < -50) posFloat2.x = -posFloat2.x; if(float2.center.y 150 || float2.center.y < -30) posFloat2.y = -posFloat2.y; float3.center = CGPointMake(float3.center.x+posFloat3.x,float3.cen ter.y+posFloat3.y); if(float3.center.x 380 || float3.center.x < -70) posFloat3.x = -posFloat3.x; if(float3.center.y 100 || float3.center.y < -20) posFloat3.y = -posFloat3.y; if(CGRectIntersectsRect(apple.frame,float1.frame)) { if(apple.center.y float1.center.y) { posApple.y = -posApple.y; } } if(CGRectIntersectsRect(apple.frame,float2.frame)) { if(apple.center.y float2.center.y) { posFloat2.y = -posFloat2.y; } } if(CGRectIntersectsRect(apple.frame,float3.frame)) { if(apple.center.y float3.center.y) { posFloat3.y = -posFloat3.y; } } } pragma mark Initialisation/destruction (void)awakeFromNib { [NSTimer scheduledTimerWithTimeInterval:0.0001 target:self selector:@selector(onTimer) userInfo:nil repeats:YES]; posFloat1 = CGPointMake(kFloat1Speed, 0); posFloat2 = CGPointMake(kFloat2Speed, 0); posFloat3 = CGPointMake(kFloat3Speed, 0); timer = nil; modeLock = lockNotYetChosen; defaultSize = self.bounds.size.width; modal = self.tag; [[UIAccelerometer sharedAccelerometer] setDelegate:self]; [UIView beginAnimations:nil context:nil]; [UIView setAnimationRepeatCount:1]; eadbea.transform = CGAffineTransformMakeScale(0.5,0.5); [UIView commitAnimations]; [UIView beginAnimations:nil context:nil]; [UIView setAnimationRepeatCount:1]; apple.transform = CGAffineTransformMakeScale(0.5,0.5); [UIView commitAnimations]; } pragma mark Background animation processing (void) startTimer { if (!timer) { timer = [[NSTimer scheduledTimerWithTimeInterval:1.0/60.0 target:self selector:@selector(timerTick:) userInfo:nil repeats:YES] retain]; } } (void) stopTimer { [timer invalidate]; [timer release]; timer = nil; } (void) check:(CGPoint*)position delta:(CGSize*)delta halfSize:(CGSize)halfSize forBouncingAgainst:(CGSize)containerSize { if ((position-x - halfSize.width)<0) { delta-width = fabsf(delta-width)*BOUNCE_DAMPING; position-x = halfSize.width; } if ((position-x + halfSize.width)containerSize.width) { delta-width = fabsf(delta-width)*-BOUNCE_DAMPING; position-x = containerSize.width - halfSize.width; } if ((position-y - halfSize.height)<0) { delta-height = fabsf(delta-height)*BOUNCE_DAMPING; position-y = halfSize.height; } if ((position-y + halfSize.height)containerSize.height) { delta-height = fabsf(delta-height)*-BOUNCE_DAMPING; position-y = containerSize.height - halfSize.height; } } (void) timerTick: (NSTimer*)timer { dragDelta = CGSizeScale(dragDelta, INERTIAL_DAMPING); if ((fabsf(dragDelta.width)DELTA_ZERO_THRESHOLD) || (fabsf(dragDelta.height)DELTA_ZERO_THRESHOLD)) { CGPoint ctr = CGPointApplyDelta(self.center, dragDelta); CGSize halfSize = CGSizeMake(self.bounds.size.width/4, self.bounds.size.height/4); [self check:&ctr delta:&dragDelta halfSize:halfSize forBouncingAgainst:self.superview.bounds.size]; self.center = ctr; } else { [self stopTimer]; } } pragma mark Input Handling (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent )event { NSSet allTouches = [event touchesForView:self]; if ([allTouches count]==1) { if (modeLocklockNotYetChosen) return; UITouch* anyTouch = [touches anyObject]; lastMove = anyTouch.timestamp; CGPoint now = [anyTouch locationInView: self.superview]; CGPoint then = [anyTouch previousLocationInView: self.superview]; dragDelta = CGPointDelta(now, then); self.center = CGPointApplyDelta(self.center, dragDelta); [self stopTimer]; } } (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { NSSet* allTouches = [event touchesForView:self]; if ([touches count]==[allTouches count]) { modeLock = lockNotYetChosen; if ((event.timestamp - lastMove) MOVEMENT_PAUSE_THRESHOLD) return; if ((fabsf(dragDelta.width)INERTIA_THRESHOLD) || (fabsf(dragDelta.height)INERTIA_THRESHOLD)) { [self startTimer]; } } } (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event { modeLock = lockNotYetChosen; [self stopTimer]; } (void)dealloc { [float1 release]; [float2 release]; [float3 release]; [apple release]; [bear_head release]; [self stopTimer]; [super dealloc]; } @end

    Read the article

  • Flex: Why does setting scaleX/Y in mxml effect the components size but setting it in actionscript do

    - by ChrisInCambo
    Hi, I'm playing around with the scaleX/Y in the canvas tag and have noticed some strange behaviour. When I set scale in in mxml the width and height of the canvas are adjusted accordingly. For example if I have a canvas like this: <mx:Canvas width="1000" height="1000" scaleX="0.1" scaleY="0.1" /> The canvas now appears on screen to have a width and height of 100 and if inside my creationComplete callback I check the width and height property they are indeed 100. But if I do exactly the same thing except I set the scaleX/Y property from actionscript the canvas on screen appears to have a width and height of 100 as expected, but when I check the width and height property of the canvas they are still at the previous values of 1000. Could anyone help me understand what is going on and also tell me if there is any method that will refresh the width and height values so that they are correct? Thanks, Chris

    Read the article

  • on click checkbox set input attr

    - by Tommy Arnold
    html form with 4 columns the first 2 columns are the sizes inside input boxes with disabled ='disabled', when they click radio button to select a size a checkbox appears, when they click that checkbox I would like to change the class and disabled attr of the inputs on that table row to allow them to edit the input box <table width="388" border="1" id="product1"> <tr> <td width="100">Width</td> <td width="100">Height</td> <td width="48">Price</td> <td width="65">Select</td> </tr> <tr> <td><input type="text" disabled='disabled'value="200"/><span> CMS</span></td> <td><input disabled='disabled'type="text" value="500"/><span> CMS</span></td> <td>£50.00</td> <td><input type="radio" name="product1" value="size1" /> Customise<input type="checkbox" name="custom[size1]" class="custombox" value="1"/></td> </tr> <tr> <td>200</td> <td>1000</td> <td>£100.00</td> <td><input type="radio" name="product1" value="size2" /> Customise<input disabled='disabled' type="checkbox" name="custom[size2]" class="custombox" value="1"/></td> </tr> <tr> <td>200</td> <td>1500</td> <td>£150</td> <td><input type="radio" name="product1" value="size3" /> Customise<input type="checkbox" name="custom[size3]" class="custombox" value="1"/></td> </tr> </table> <table width="288" border="1" id="product2"> <tr> <td width="72">Width</td> <td width="75">Height</td> <td width="48">Price</td> <td width="65">&nbsp;</td> </tr> <tr> <td>200</td> <td>500</td> <td>£50.00</td> <td><input type="radio" name="product2" value="size1" /> Customise<input type="checkbox" name="custom[size1]" class="custombox" value="1"/></td> </tr> <tr> <td>200</td> <td>1000</td> <td>£100.00</td> <td><input type="radio" name="product2" value="size2" /> Customise<input type="checkbox" name="custom[size2]" class="custombox" value="1"/></td> </tr> <tr> <td>200</td> <td>1500</td> <td>£150</td> <td><input type="radio" name="product2" value="size3" /> Customise<input type="checkbox" name="custom[size3]" class="custombox" value="1"/></td> </tr> <table> CSS input[type=checkbox] { display: none; } input[type=checkbox].shown { display: inline; } input .edit{ border:1px solid red; } input[disabled='disabled'] { border:0px; width:60px; padding:5px; float:left; background:#fff; } span{float:left; width:30px; padding:5px;} Jquery $("body :checkbox").hide(); // The most obvious way is to set radio-button click handlers for each table separatly: $("#product1 :radio").click(function() { $("#product1 :checkbox").hide(); $("#product1 .cbox").hide(); $(this).parent().children(":checkbox").show(); $(this).parent().children(".cbox").show(); }); $("#product2 :radio").click(function() { $("#product2 :checkbox").hide(); $("#product2 .cbox").hide(); $(this).parent().children(":checkbox").show(); $(this).parent().children(".cbox").show(); }); This is what I thought but its not working $("#product1 :checkbox").click(function(){ $(this).parent("tr").children("td :input").attr('disabled',''); $(this).parent("tr").children("td :input").toggleClass(edit); }); $("#product2 :checkbox").click(function(){ $(this).parent("tr").children("td :input").attr('disabled',''); $(this).parent("tr").children("td :input").toggleClass(edit); }); Thanks in advance for any help.

    Read the article

  • HTML tables in JTextPane showing weird "form" boxes

    - by Ted
    import java.awt.BorderLayout; import java.awt.EventQueue; import javax.swing.JFrame; import javax.swing.JPanel; import javax.swing.JTextPane; import javax.swing.border.EmptyBorder; import javax.swing.text.Document; import javax.swing.text.html.HTMLEditorKit; import javax.swing.text.html.StyleSheet; public class htmlEditor2 extends JFrame { private JPanel contentPane; public static void main(String[] args) { EventQueue.invokeLater(new Runnable() { public void run() { try { htmlEditor2 frame = new htmlEditor2(); frame.setVisible(true); } catch (Exception e) { e.printStackTrace(); } } }); } public htmlEditor2() { setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setBounds(100, 100, 450, 300); contentPane = new JPanel(); contentPane.setBorder(new EmptyBorder(5, 5, 5, 5)); contentPane.setLayout(new BorderLayout(0, 0)); setContentPane(contentPane); Foo f = new Foo(); f.setText("<html><body><table border=\"1\" width=\"985\" cellpadding=\"3\" cellspacing=\"0\" style=\"table-layout: fixed; border-collapse: collapse; border-width: 0px; border-color: #010101; \"><colgroup><col width=\"328\"></col> <col width=\"328\"></col> <col width=\"328\"></col> </colgroup><tr><td align=\"left\" valign=\"top\" width=\"321\" style=\"border: solid #010101 1px; \"><div align=\"left\"><font face=\"Arial\"><span style=\"font-size:8pt\">row 1</span></font></div></td><td align=\"left\" valign=\"top\" width=\"321\" style=\"border: solid #010101 1px; \"><div align=\"left\"><font face=\"Arial\"><span style=\"font-size:8pt\">row2</span></font></div></td><td align=\"left\" valign=\"top\" width=\"321\" style=\"border: solid #010101 1px; \"><div align=\"left\"><font face=\"Arial\"><span style=\"font-size:8pt\">row3</span></font></div></td></tr><tr><td align=\"left\" valign=\"top\" width=\"321\" style=\"border: solid #010101 1px; \"><div align=\"left\"><span style=\"font-size: 8pt;\">&nbsp;</span></div></td><td align=\"left\" valign=\"top\" width=\"321\" style=\"border: solid #010101 1px; \"><div align=\"left\"><span style=\"font-size: 8pt;\">&nbsp;</span></div></td><td align=\"left\" valign=\"top\" width=\"321\" style=\"border: solid #010101 1px; \"><div align=\"left\"><span style=\"font-size: 8pt;\">&nbsp;</span></div></td></tr><tr><td align=\"left\" valign=\"top\" width=\"321\" style=\"border: solid #010101 1px; \"><div align=\"left\"><span style=\"font-size: 8pt;\">&nbsp;</span></div></td><td align=\"left\" valign=\"top\" width=\"321\" style=\"border: solid #010101 1px; \"><div align=\"left\"><span style=\"font-size: 8pt;\">&nbsp;</span></div></td><td align=\"left\" valign=\"top\" width=\"321\" style=\"border: solid #010101 1px; \"><div align=\"left\"><span style=\"font-size: 8pt;\">&nbsp;</span></div></td></tr></table><div align=\"left\">&nbsp;&nbsp;</div></body></html>"); contentPane.add(f); } class Foo extends JTextPane { public Foo() { super(); HTMLEditorKit kit = new HTMLEditorKit(); setEditorKit(kit); StyleSheet styleSheet = kit.getStyleSheet(); styleSheet.addRule(""); //in case I need to add a CSS Document doc = kit.createDefaultDocument(); setDocument(doc); } } } I would paste a nicely formatted version of the html, but I'm not sure how to do it on here... So yeah.. I just want to know how to get rid of those weird colgroup and col boxes in my table and how to make the table work normally! Thanks yall!

    Read the article

  • jqgrid Posting name:value pair when deleting row?

    - by user837168
    I want to send some name:value pair from the row selected along with del command. from below script I want to send the "polpono" value to my php script when del command is issued. any help will be highly appreciated. $(document).ready(function(){ $("#datagrid").jqGrid({ url:'actionpo.php?vid=polpogridjq', datatype: 'xml', mtype: 'GET', colNames:['List#','PO#', 'Item Code','Item Detail','Qty','Price','Tax'], colModel :[ {name:'polistno', width:100,editable:true,editable:true,key:true}, {name:'polpono',index:'polpono', width:100,editable:true}, {name:'politemcode',index:'politemcode', width:100, align:'right',sortable:true,editable:true}, {name:'politemname', width:300, align:'left',sortable:false,editable:true}, {name:'politemqty',width:50, align:'right',sortable:false,editable:true}, {name:'politemvalue', width:80,align:'left',sortable:false,editable:true}, {name:'politemtax', width:50, align:'right',editable:true} ], pager: $('#pager'), rowNum:10, rowList:[10,20,30], sortname: 'polpono', sortorder: 'desc', shrinkToFit: false, rownumbers: false, multiselect: false, viewRecords: false, clearAfterAdd:true, caption: 'Itemised Quantity', editurl: "actionpo.php?vid=gridformcall", }).navGrid('#pager', { edit: true, add: true, del: true ,search:false, refresh:true},{ } }); });

    Read the article

  • jqGrid Additional POST datas when deleting

    - by user300657
    I want to delete a row in the grid, but the grid always post's only the id and oper, I also want to post additional data. My jqgrid is something like : jQuery("#editgrid").jqGrid({ url:'autoJSON.php', datatype: "xml", colNames:['RowID','Asigurator','Cilindree','Persoana', 'Perioada', 'Pret'], colModel:[ {name:'rowID',index:'rowID', width:60, editable:true}, {name:'idAsigurator',index:'idAsigurator', width:100, editable:true,editoptions:{size:20}}, {name:'cilindree',index:'cilindree', width:90, editable:true,editoptions:{size:20}}, {name:'persoana',index:'persoana', width:300,editable:true,edittype:"select",editoptions:{value:"Persoana juridica:Persoana juridica;Pensionar:Pensionar;Persoana fizica:Persoana fizica"}}, {name:'perioada',index:'perioada', width:120, align:"right",edittype:"select",editable:true,editoptions:{value:"12 luni:12 luni;6 luni:6 luni"}}, {name:'pret',index:'pret', width:80, align:"right",editable:true,editoptions:{size:20}} ], width:900, height:600, pager: '#pagered', sortname: 'rowID', viewrecords: true, sortorder: "desc", caption:"Autoturisme", editurl:"autoPOST.php", }); jQuery("#editgrid").jqGrid('navGrid',"#pagered",{edit:true,add:true,del:true}); What should I do to access in autoPOST.php rowID also as a post variable. Thanks

    Read the article

  • @media print display:none isn't working

    - by chris Frisina
    I have tried for over 3 weeks now with different implementations trying to get the right section to not display, and have the left section display at full width. Given that my research shows there is no easy or streamlined way to quickly render Print views without reviewing the print preview, I am asking for some help to figure this out. This is the current page im trying to get to work. This is what I want to happen. Please note that the width of the left side needs to extend the full width. the print media css that is not working is this: #gc { width: 100%; } #asideTrack { /* width: 100%;*/ display: none; } .asideTrack { /* width: 100%;*/ display: none; } .slideAside { /* width: 100%;*/ display: none; } #slideAside { display:none } Any suggestions?

    Read the article

  • IE issues with my Website (Help me fix my CSS)

    - by cam77
    I'm struggling geting my website to test fully positive in IE, the following problems keep arising, only in IE; My '#grey box' div displaying 200px to the left out of place, and it seems to move with the adjustment of the IE window size, does this in no other browsers, just IE. It creates this unnecessary horizontal scroll. I have the width set to pretty large, but have "overflow: hidden" and again, works fine across except for IE. On a few of my pages, the footer is somewhat cropped and out of place. My biggest concern is the particular page's CSS, pasted below. #container { width : 1265px; height : 920px; background-color : #addceb; overflow : hidden; padding : 0; } #logo { font-size : 38px; height : 167px; width : 427px; margin-left : 435px; padding-top : 20px; margin-bottom : -10px; margin-top: 10px; border : none; } #menunav { width : 100%; background-image : url(../imagesnew/menunav.png); background-repeat : repeat-x; height : 40px; text-align : center; font-size : 14px; font-family : Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif; overflow : auto; } #menunav ul { list-style-type : none; background-image : url(); height : 40px; width : 800px; margin : auto; } #menunav ul a { background-image : url(); background-repeat : no-repeat; background-position : right; padding-right : 32px; padding-left : 15px; display : block; line-height : 30px; text-decoration : none; font-size : 14px; } #mainbox { position : relative; background-image : url(../premiumslideimgs/premiumbox.png); background-repeat : no-repeat; width : 900px; height : 800px; margin-left : 16%; top : 22px; padding-top : 5px; overflow : hidden; } #simplegallery1 { position : absolute; left : 50%; width : 800px; height : 800px; margin-top : 44px; margin-bottom: -44px; margin-bottom : 240px; margin-left : -397px; background-color : #a1bbfe; padding-top : 0; } #textbelowbox { position : absolute; width : 830px; height : 45px; margin-left : 209px; margin-bottom : 240px; margin-top : -240px; overflow : hidden; } #footer { background-image : url(../imagesnew/footerimg.png); background-repeat : no-repeat; background-position : right; height : 275px; margin-top : -285px; } a:hover { color : #addceb; } #right { float : right; margin-top : 3px; } #left { float : left; margin-left : 30px; } body { font-family : Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif; background-color : #addceb; margin : 0; padding : 0; } #textabovebox { width : 920px; position : absolute; margin-left : 228px; margin-bottom : 80px; margin-top : 38px; z-index : 2000; font-family : Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif; } a.submenu:hover { color : #333; font-weight : bolder; } #dialog { font-size : 12px; } #greybox { position : absolute; width : 275px; height : 465px; margin-left : 715px; margin-top : 80px; overflow : hidden; z-index : 2000; } ul { background-image : url(); height : 40px; width : 800px; margin : auto; } ul a { background-image : url(); background-repeat : no-repeat; background-position : right; padding-right : 32px; padding-left : 15px; display : block; line-height : 30px; text-decoration : none; font-size : 14px; } li { float : left; } a:link { color : #ffffff; text-decoration : none; } a:visited { color : #ffffff; text-decoration : none; } a:active { color : #ffffff; text-decoration : none; } a:hover { color : #addceb; } #right { float : right; margin-top : 3px; } #left { float : left; margin-left : 30px; } #text { float : left; margin-left : 30px; } body { font-family : Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif; padding : 0; margin : 0; } body { background-color : #addceb; } a.submenu:link { color : #333333; } a.submenu:active { color : #333333; } a.submenu:visited { color : #333333; } a.submenu:hover { color : #333333; font-weight : bolder; } { margin: 0; padding: 0; } Please help if you can, thanks a lot.

    Read the article

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