Search Results

Search found 10226 results on 410 pages for 'width'.

Page 41/410 | < Previous Page | 37 38 39 40 41 42 43 44 45 46 47 48  | Next Page >

  • How can I add a previous button to this Jquery Content Slider?

    - by user1269988
    I did this nice tutorial for a Jquery Content Slider: http://brenelz.com/blog/build-a-content-slider-with-jquery/ Here is my test page: http://www.gregquinn.com/oneworld/brenez_slider_test.html But the Left button is hidden on the first slide and I do not want it to be. I don't know much about jquery but I tried to set the left button from opacity o to 100 or 1 and it didn't work the button showed up once but did not work. Does anyone know how to do this? Here is the code: (function($) { $.fn.ContentSlider = function(options) { var defaults = { leftBtn : 'images/panel_previous_btn.gif', rightBtn : 'images/panel_next_btn.gif', width : '900px', height : '400px', speed : 400, easing : 'easeOutQuad', textResize : false, IE_h2 : '26px', IE_p : '11px' } var defaultWidth = defaults.width; var o = $.extend(defaults, options); var w = parseInt(o.width); var n = this.children('.cs_wrapper').children('.cs_slider').children('.cs_article').length; var x = -1*w*n+w; // Minimum left value var p = parseInt(o.width)/parseInt(defaultWidth); var thisInstance = this.attr('id'); var inuse = false; // Prevents colliding animations function moveSlider(d, b) { var l = parseInt(b.siblings('.cs_wrapper').children('.cs_slider').css('left')); if(isNaN(l)) { var l = 0; } var m = (d=='left') ? l-w : l+w; if(m<=0&&m>=x) { b .siblings('.cs_wrapper') .children('.cs_slider') .animate({ 'left':m+'px' }, o.speed, o.easing, function() { inuse=false; }); if(b.attr('class')=='cs_leftBtn') { var thisBtn = $('#'+thisInstance+' .cs_leftBtn'); var otherBtn = $('#'+thisInstance+' .cs_rightBtn'); } else { var thisBtn = $('#'+thisInstance+' .cs_rightBtn'); var otherBtn = $('#'+thisInstance+' .cs_leftBtn'); } if(m==0||m==x) { thisBtn.animate({ 'opacity':'0' }, o.speed, o.easing, function() { thisBtn.hide(); }); } if(otherBtn.css('opacity')=='0') { otherBtn.show().animate({ 'opacity':'1' }, { duration:o.speed, easing:o.easing }); } } } function vCenterBtns(b) { // Safari and IE don't seem to like the CSS used to vertically center // the buttons, so we'll force it with this function var mid = parseInt(o.height)/2; b .find('.cs_leftBtn img').css({ 'top':mid+'px', 'padding':0 }).end() .find('.cs_rightBtn img').css({ 'top':mid+'px', 'padding':0 }); } return this.each(function() { $(this) // Set the width and height of the div to the defined size .css({ width:o.width, height:o.height }) // Add the buttons to move left and right .prepend('<a href="#" class="cs_leftBtn"><img src="'+o.leftBtn+'" /></a>') .append('<a href="#" class="cs_rightBtn"><img src="'+o.rightBtn+'" /></a>') // Dig down to the article div elements .find('.cs_article') // Set the width and height of the div to the defined size .css({ width:o.width, height:o.height }) .end() // Animate the entrance of the buttons .find('.cs_leftBtn') .css('opacity','0') .hide() .end() .find('.cs_rightBtn') .hide() .animate({ 'width':'show' }); // Resize the font to match the bounding box if(o.textResize===true) { var h2FontSize = $(this).find('h2').css('font-size'); var pFontSize = $(this).find('p').css('font-size'); $.each(jQuery.browser, function(i) { if($.browser.msie) { h2FontSize = o.IE_h2; pFontSize = o.IE_p; } }); $(this).find('h2').css({ 'font-size' : parseFloat(h2FontSize)*p+'px', 'margin-left' : '66%' }); $(this).find('p').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' }); $(this).find('.readmore').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' }); } // Store a copy of the button in a variable to pass to moveSlider() var leftBtn = $(this).children('.cs_leftBtn'); leftBtn.bind('click', function() { if(inuse===false) { inuse = true; moveSlider('right', leftBtn); } return false; // Keep the link from firing }); // Store a copy of the button in a variable to pass to moveSlider() var rightBtn = $(this).children('.cs_rightBtn'); rightBtn.bind('click', function() { if(inuse===false) { inuse=true; moveSlider('left', rightBtn); } return false; // Keep the link from firing }); }); } })(jQuery)

    Read the article

  • how to make a div(black border,and on the google-maps) panel drop-disable,thanks

    - by zjm1126
    the black div is used to panel,so it can not be droppable. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=0.3,maximum-scale=5.0,user-scalable=yes"> </head> <body onload="initialize()" onunload="GUnload()"> <style type="text/css"> *{ margin:0; padding:0; } .container{ padding:10px; width:50px; height:50px; border:5px solid black; } </style> <!--<div style="width:100px;height:100px;background:blue;"> </div>--> <div id="map_canvas" style="width: 500px; height: 300px;"></div> <!-- <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> --> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA-7cuV3vqp7w6zUNiN_F4uBRi_j0U6kJrkFvY4-OX2XYmEAa76BSNz0ifabgugotzJgrxyodPDmheRA&sensor=false"type="text/javascript"></script> <script type="text/javascript"> var aFn; //********** function initialize() { if (GBrowserIsCompatible()) { //************ function a() { } a.prototype = new GControl(); a.prototype.initialize = function(map) { var container = document.createElement("div"); var a=''; for(i=0;i<5;i++){ a+='<div class=b style="width: 20px; height: 20px;background:red;position:absolute;"></div>' } $(container).addClass('container'); $(container).droppable( 'destroy' ).css('z-index','2700') $(map.getContainer()).append($(container).append(a)); return container; } a.prototype.getDefaultPosition = function() { return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7)); } //************ var map = new GMap2(document.getElementById("map_canvas")); map.addControl(new a()); var center=new GLatLng(39.9493, 116.3975); map.setCenter(center, 13); aFn=function(x,y){ var point =new GPoint(x,y) point = map.fromContainerPixelToLatLng(point); //console.log(point.x+" "+point.y) map.addOverlay(new GMarker(point)); } $(".b").draggable({}); $("#map_canvas").droppable({ drop: function(event,ui) { //console.log(ui.offset.left+' '+ui.offset.top) aFn(ui.offset.left+10,ui.offset.top+10); ui.draggable.remove(); } }); } } //************* </script> </body> </html>

    Read the article

  • won't repaint a different Month after pressing button in my calendar

    - by DarkStar123
    I'm trying to build a Calendar in Java as a little project I thought of, But I can't seem to change the name of the Month every time I click the Next button. here's my code! package drawing; import javax.swing.*; import java.awt.*; import java.awt.event.*; public class Drawing_something extends JPanel{ int[] calender_squares = {1, 2, 3, 4, 5, 6, 7}; String[] Month = {"January", "February", "March", "April","May","June","July", "August","September","October","November","December"}; int i = 0; Graphics c; @Override public void paintComponent(Graphics c){ super.paintComponent(c); this.setBackground(Color.WHITE); int WIDTH = 55, HEIGHT = 65; for (int in: calender_squares) { for (int counter = 0; counter < 7; counter++){ c.drawRect(50, 50, 100, 100); c.drawRect(50, 50, 700, 500); c.copyArea(50, 50, 600, 500, 100, 0); c.copyArea(50, 50, 600, 400, 0, 100); } } for (int date = 1; date <= 30; date++) { String s = String.valueOf(date); c.drawString(s, WIDTH, HEIGHT); if (date <= 6){ WIDTH += 100; } else if (date == 7){ WIDTH = 55; HEIGHT = 165; }else if (date <= 13){ WIDTH += 100; }else if (date == 14){ WIDTH = 55; HEIGHT = 265; }else if (date <= 20){ WIDTH += 100; }else if (date == 21){ WIDTH = 55; HEIGHT = 365; }else if (date <= 27){ WIDTH += 100; }else if (date == 28){ WIDTH = 55; HEIGHT = 465; }else if (date <= 30){ WIDTH += 100; } } c.setFont(new Font("default", Font.BOLD, 40)); c.drawString(Month[i], 320, 45); } public Drawing_something(){ setLayout(new BorderLayout()); JButton N = new JButton("NEXT"); JButton B = new JButton("BACK"); JPanel P = new JPanel(); P.add(B); P.add(N); add(P, BorderLayout.SOUTH); B.addActionListener(new HandlerClass()); N.addActionListener(new NextClass()); } public class HandlerClass implements ActionListener{ public void actionPerformed(ActionEvent e){ } } public class NextClass implements ActionListener{ public void actionPerformed(ActionEvent e){ if (i == 11){ i = 0; } i = i + 1; c.drawString(Month[i], 320, 45); } } public static void main(String[] args){ JFrame mainFrame = new JFrame("Calender"); mainFrame.add(new Drawing_something()); mainFrame.setSize(850, 650); mainFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); mainFrame.setVisible(true); } } if anyone could help that would be much appreciated!! Thanks in advance!!

    Read the article

  • jQuery table replace

    - by Happy
    We have a table: <table> <tr> <td width="10">1</td> <td>text 1</td> </tr> <tr> <td width="10">2</td> <td>text 2</td> </tr> <tr> <td width="10">3</td> <td>text 3</td> </tr> <tr> <td width="10">4</td> <td>text 4</td> </tr> <tr> <td width="10">5</td> <td>text 5</td> </tr> <tr> <td width="10">6</td> <td>text 6</td> </tr> <tr> <td width="10">7</td> <td>text 7</td> </tr> <tr> <td width="10">8</td> <td>text 8</td> </tr> <tr> <td width="10">9</td> <td>text 9</td> </tr> <tr> <td width="10">10</td> <td>text 10</td> </tr> </table> We update this table by throwing into each <tr> 3 <td>, each <td> with width="10" attribute must be deleted. It must look like: <table> <tr> <td>text 1</td> <td>text 2</td> <td>text 3</td> </tr> <tr> <td>text 4</td> <td>text 5</td> <td>text 6</td> </tr> <tr> <td>text 7</td> <td>text 8</td> <td>text 9</td> </tr> <tr> <td>text 10</td> </tr> </table> How can we do this? Thanks.

    Read the article

  • Unable to display images through media queries form stylesheet

    - by kNair
    I'm trying to create a responsive homepage with max-width of 1024 first. However the images are not displaying when I called from the css file. I did include the stylesheet inside the home page and the current viewport is 1024. I can't find my mistake, please help. Thanks. homepage <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1"/> <title>Responsive design</title> <link rel="stylesheet" href="res-style.css" type="text/css" media="screen and (max-width:1024px)"/> </head> <body> <table class="ct"> <tr> <td class="1"> <?php include 'menu.php'; ?> </td> </tr> <tr> <td class="2"> </td> </tr> <tr> <td class='3'> <img src="NewLogo1.png"></td> </tr> <tr> <td class='4'> </td> </tr> <tr> <td class='5'> wefhuiweabhfuia</td> </tr> </table> </body> </html> stylesheet @charset "utf-8"; /* CSS Document */ @media screen and (max-width:1024px) { .ct{min-width:1000px;height:898px;border:0;} .1{background-image:url('images/text-5_02.png');min-width:1000px;height:43px;margin-left:10px;background-repeat:no-repeat;display:inherit;} .2{background-image:url('images/text-5_04.png');min-width:1000px;height:256px;background-repeat:no-repeat;} .3{background-image:url('images/text-5_05.png');min-width:1000px;height:288px;padding-left:25%;background-repeat:no-repeat;} .4{background-image:url('images/text-5_06.png');min-width:1000px;height:256px;background-repeat:no-repeat;} .5{background-image:url('images/text-5_07.png');min-width:1000px;height:55px;background-repeat:no-repeat;} }

    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

  • HTML/CSS formating

    - by Codeguy007
    I'm having to issues lining up items properly in my html code. I am not sure why they are lining up the way I want them to. First the header My Color Library is a full line height above the horizontal ruler. I want it right above the ruler. Second my X box in the td with the background is justified right fine but I actually want it in the top right hand corner not centered vertically. Here's some example html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>FunctionalColor&amp;Design</title> </head> <html> <body> <table style="width=900px; margin-left: auto; margin-right: auto;"> <tr> <td> <P> <div style="font-size: 1em; line-height: 1em; font-weight: bolder; padding: 0px;">My Color Library</div> <div align="right" class="removeall"> <a href="colors"> <img src="http://2100computerlane.net/workingproject/images/x-button.png" /> <bold>Remove All</bold> </a> </div> <HR/></p> <div class="mycolor"> <table><!--width="900px" --> <tr> <td style="border: none; background-color: #f8d3cf; width:125px; height:80px; border-spacing: 10px; padding:0;"> <div style="padding:0; vertical-align:top;" align="right" class="remove"> <a href="f8d3cf" style="padding: 0px;"> <img src="http://2100computerlane.net/workingproject/images/x-button.png" style="padding: 0px;"/> </a> </div> </td> <td style="border: none; width:10px;"></td> <td style="border: none; background-color: #f8d3cf; width:125px; height:80px; border-spacing: 10px; padding:0;"></td> <td style="border: none; width:10px;"></td> <td style="border: none; background-color: #f8d3cf; width:125px; height:80px; border-spacing: 10px; padding:0;"></td> <td style="border: none; width:10px;"></td> <td style="border: none; background-color: #f8d3cf; width:125px; height:80px; border-spacing: 10px; padding:0;"></td> <td style="border: none; width:10px;"></td> <td style="border: none; background-color: #f8d3cf; width:125px; height:80px; border-spacing: 10px; padding:0;"></td> <td style="border: none; width:10px;"></td> <td style="border: none; background-color: #f8d3cf; width:125px; height:80px; border-spacing: 10px; padding:0;"></td> <tr> <td style="border: none; font:.6em Arial, Helvetica, sans-serif; width:125px; height:20px;">Desert Warmth<br/>70YR 56/190 A0542</td> </tr> </table> </div> </td> </tr> </table> </body> </html>

    Read the article

  • Overlapping and Stacking in CSS

    - by ApacheCode
    Hello, I'm a programmer and learning new techniques in web development. I've ran into a problem if you could look at the link below. http://bailesslaw.com/Bailess_003/bailesHeader/header.html This example I made isnt fixed and it needs to be, which is becoming difficult. This looks fine on here, but when I put those layers on main website, index.html, place this code as the header, the banner moves in the documents position 0,0 . I need these boxes fixed, center page and I cannot get them to do that without messing up the layers order and content. Layer1-rotating images, js causes the rotation Layer2-blue triangle with backdrop effect overlapping layer 1, Layer 3-is a static image with a high z-index Below I including some code, the important part that needs 3 overlapped layers exactly matching in width and height, except it has to be fixed in center 780px wide. Code: <style rel="stylesheet" type="text/css"> div#layer1 { border: 1px solid #000; height: 200px; left: 0px; position: fixed; top: 0px; width: 780px; z-index: 1; } div#layer2 { border: 1px solid #000; height: 200px; left: 0px; position: absolute; top: 0px; width: 780px; z-index: 2; } div#layer3 { border: 1px solid #000000; height: 200px; left: 0px; position: absolute; top: 0px; width: 780px; z-index: 3; } </style> </head> <body class="oneColFixCtr"> <div id="container"> <div id="mainContent"> <div id="layer1"> </div> <div id="layer2"> <div class="slideshow"> <span id="rotating1"> <p class="rotating"> </p> </span> <span id="rotating2"> <p class="rotating"> </p> </span> <span id="rotating3"> <p class="rotating"> </p> </span> <span id="rotating4"> <p class="rotating"> </p> </span> </div> </div> <div id="layer3"> <table width="385" border="0"> <tr> <th width="81" scope="col"> &nbsp; </th> <th width="278" scope="col"> &nbsp; </th> <th width="12" scope="col"> &nbsp; </th> </tr> <tr> <td> &nbsp; </td> <td> </td> <td> &nbsp; </td> </tr> <tr> <td> &nbsp; </td> <td> &nbsp; </td> <td> &nbsp; </td> </tr> </table> </div> </div> <!-- end #container --> </div> </body> </body> </html> CSS: @charset "utf-8"; CSS code: #rotating1 { height: 200px; width: 780px; } #rotating2 { height: 200px; width: 780px; } #rotating3 { height: 200px; width: 780px; } #main { background-repeat: no-repeat; height: 200px; width: 780px; z-index: 100; } #test { width: 780px; z-index: 2; } #indexContent { background-color: #12204d; background-repeat: no-repeat; height: 200px; width: 780px; z-index: 1; } #indexContent p { padding: .5em 2em .5em 2em; text-align: justify; text-indent: 2em; } .rotating { float: right; margin-top: 227px; text-indent: 0px !important; } .clearfix:after { clear: both; content: " "; display: block; font-size: 0; height: 0; visibility: hidden; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } .clearfix { display: block; }

    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

  • ASP.NET Web API Exception Handling

    - by Fredrik N
    When I talk about exceptions in my product team I often talk about two kind of exceptions, business and critical exceptions. Business exceptions are exceptions thrown based on “business rules”, for example if you aren’t allowed to do a purchase. Business exceptions in most case aren’t important to log into a log file, they can directly be shown to the user. An example of a business exception could be "DeniedToPurchaseException”, or some validation exceptions such as “FirstNameIsMissingException” etc. Critical Exceptions are all other kind of exceptions such as the SQL server is down etc. Those kind of exception message need to be logged and should not reach the user, because they can contain information that can be harmful if it reach out to wrong kind of users. I often distinguish business exceptions from critical exceptions by creating a base class called BusinessException, then in my error handling code I catch on the type BusinessException and all other exceptions will be handled as critical exceptions. This blog post will be about different ways to handle exceptions and how Business and Critical Exceptions could be handled. Web API and Exceptions the basics When an exception is thrown in a ApiController a response message will be returned with a status code set to 500 and a response formatted by the formatters based on the “Accept” or “Content-Type” HTTP header, for example JSON or XML. Here is an example:   public IEnumerable<string> Get() { throw new ApplicationException("Error!!!!!"); return new string[] { "value1", "value2" }; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } The response message will be: HTTP/1.1 500 Internal Server Error Content-Length: 860 Content-Type: application/json; charset=utf-8 { "ExceptionType":"System.ApplicationException","Message":"Error!!!!!","StackTrace":" at ..."} .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }   The stack trace will be returned to the client, this is because of making it easier to debug. Be careful so you don’t leak out some sensitive information to the client. So as long as you are developing your API, this is not harmful. In a production environment it can be better to log exceptions and return a user friendly exception instead of the original exception. There is a specific exception shipped with ASP.NET Web API that will not use the formatters based on the “Accept” or “Content-Type” HTTP header, it is the exception is the HttpResponseException class. Here is an example where the HttpReponseExcetpion is used: // GET api/values [ExceptionHandling] public IEnumerable<string> Get() { throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.InternalServerError)); return new string[] { "value1", "value2" }; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } The response will not contain any content, only header information and the status code based on the HttpStatusCode passed as an argument to the HttpResponseMessage. Because the HttpResponsException takes a HttpResponseMessage as an argument, we can give the response a content: public IEnumerable<string> Get() { throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.InternalServerError) { Content = new StringContent("My Error Message"), ReasonPhrase = "Critical Exception" }); return new string[] { "value1", "value2" }; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }   The code above will have the following response:   HTTP/1.1 500 Critical Exception Content-Length: 5 Content-Type: text/plain; charset=utf-8 My Error Message .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } The Content property of the HttpResponseMessage doesn’t need to be just plain text, it can also be other formats, for example JSON, XML etc. By using the HttpResponseException we can for example catch an exception and throw a user friendly exception instead: public IEnumerable<string> Get() { try { DoSomething(); return new string[] { "value1", "value2" }; } catch (Exception e) { throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.InternalServerError) { Content = new StringContent("An error occurred, please try again or contact the administrator."), ReasonPhrase = "Critical Exception" }); } } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }   Adding a try catch to every ApiController methods will only end in duplication of code, by using a custom ExceptionFilterAttribute or our own custom ApiController base class we can reduce code duplicationof code and also have a more general exception handler for our ApiControllers . By creating a custom ApiController’s and override the ExecuteAsync method, we can add a try catch around the base.ExecuteAsync method, but I prefer to skip the creation of a own custom ApiController, better to use a solution that require few files to be modified. The ExceptionFilterAttribute has a OnException method that we can override and add our exception handling. Here is an example: using System; using System.Diagnostics; using System.Net; using System.Net.Http; using System.Web.Http; using System.Web.Http.Filters; public class ExceptionHandlingAttribute : ExceptionFilterAttribute { public override void OnException(HttpActionExecutedContext context) { if (context.Exception is BusinessException) { throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.InternalServerError) { Content = new StringContent(context.Exception.Message), ReasonPhrase = "Exception" }); } //Log Critical errors Debug.WriteLine(context.Exception); throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.InternalServerError) { Content = new StringContent("An error occurred, please try again or contact the administrator."), ReasonPhrase = "Critical Exception" }); } } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }   Note: Something to have in mind is that the ExceptionFilterAttribute will be ignored if the ApiController action method throws a HttpResponseException. The code above will always make sure a HttpResponseExceptions will be returned, it will also make sure the critical exceptions will show a more user friendly message. The OnException method can also be used to log exceptions. By using a ExceptionFilterAttribute the Get() method in the previous example can now look like this: public IEnumerable<string> Get() { DoSomething(); return new string[] { "value1", "value2" }; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } To use the an ExceptionFilterAttribute, we can for example add the ExceptionFilterAttribute to our ApiControllers methods or to the ApiController class definition, or register it globally for all ApiControllers. You can read more about is here. Note: If something goes wrong in the ExceptionFilterAttribute and an exception is thrown that is not of type HttpResponseException, a formatted exception will be thrown with stack trace etc to the client. How about using a custom IHttpActionInvoker? We can create our own IHTTPActionInvoker and add Exception handling to the invoker. The IHttpActionInvoker will be used to invoke the ApiController’s ExecuteAsync method. Here is an example where the default IHttpActionInvoker, ApiControllerActionInvoker, is used to add exception handling: public class MyApiControllerActionInvoker : ApiControllerActionInvoker { public override Task<HttpResponseMessage> InvokeActionAsync(HttpActionContext actionContext, System.Threading.CancellationToken cancellationToken) { var result = base.InvokeActionAsync(actionContext, cancellationToken); if (result.Exception != null && result.Exception.GetBaseException() != null) { var baseException = result.Exception.GetBaseException(); if (baseException is BusinessException) { return Task.Run<HttpResponseMessage>(() => new HttpResponseMessage(HttpStatusCode.InternalServerError) { Content = new StringContent(baseException.Message), ReasonPhrase = "Error" }); } else { //Log critical error Debug.WriteLine(baseException); return Task.Run<HttpResponseMessage>(() => new HttpResponseMessage(HttpStatusCode.InternalServerError) { Content = new StringContent(baseException.Message), ReasonPhrase = "Critical Error" }); } } return result; } } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } You can register the IHttpActionInvoker with your own IoC to resolve the MyApiContollerActionInvoker, or add it in the Global.asax: GlobalConfiguration.Configuration.Services.Remove(typeof(IHttpActionInvoker), GlobalConfiguration.Configuration.Services.GetActionInvoker()); GlobalConfiguration.Configuration.Services.Add(typeof(IHttpActionInvoker), new MyApiControllerActionInvoker()); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }   How about using a Message Handler for Exception Handling? By creating a custom Message Handler, we can handle error after the ApiController and the ExceptionFilterAttribute is invoked and in that way create a global exception handler, BUT, the only thing we can take a look at is the HttpResponseMessage, we can’t add a try catch around the Message Handler’s SendAsync method. The last Message Handler that will be used in the Wep API pipe-line is the HttpControllerDispatcher and this Message Handler is added to the HttpServer in an early stage. The HttpControllerDispatcher will use the IHttpActionInvoker to invoke the ApiController method. The HttpControllerDipatcher has a try catch that will turn ALL exceptions into a HttpResponseMessage, so that is the reason why a try catch around the SendAsync in a custom Message Handler want help us. If we create our own Host for the Wep API we could create our own custom HttpControllerDispatcher and add or exception handler to that class, but that would be little tricky but is possible. We can in a Message Handler take a look at the HttpResponseMessage’s IsSuccessStatusCode property to see if the request has failed and if we throw the HttpResponseException in our ApiControllers, we could use the HttpResponseException and give it a Reason Phrase and use that to identify business exceptions or critical exceptions. I wouldn’t add an exception handler into a Message Handler, instead I should use the ExceptionFilterAttribute and register it globally for all ApiControllers. BUT, now to another interesting issue. What will happen if we have a Message Handler that throws an exception?  Those exceptions will not be catch and handled by the ExceptionFilterAttribute. I found a  bug in my previews blog post about “Log message Request and Response in ASP.NET WebAPI” in the MessageHandler I use to log incoming and outgoing messages. Here is the code from my blog before I fixed the bug:   public abstract class MessageHandler : DelegatingHandler { protected override async Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken) { var corrId = string.Format("{0}{1}", DateTime.Now.Ticks, Thread.CurrentThread.ManagedThreadId); var requestInfo = string.Format("{0} {1}", request.Method, request.RequestUri); var requestMessage = await request.Content.ReadAsByteArrayAsync(); await IncommingMessageAsync(corrId, requestInfo, requestMessage); var response = await base.SendAsync(request, cancellationToken); var responseMessage = await response.Content.ReadAsByteArrayAsync(); await OutgoingMessageAsync(corrId, requestInfo, responseMessage); return response; } protected abstract Task IncommingMessageAsync(string correlationId, string requestInfo, byte[] message); protected abstract Task OutgoingMessageAsync(string correlationId, string requestInfo, byte[] message); } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }   If a ApiController throws a HttpResponseException, the Content property of the HttpResponseMessage from the SendAsync will be NULL. So a null reference exception is thrown within the MessageHandler. The yellow screen of death will be returned to the client, and the content is HTML and the Http status code is 500. The bug in the MessageHandler was solved by adding a check against the HttpResponseMessage’s IsSuccessStatusCode property: public abstract class MessageHandler : DelegatingHandler { protected override async Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken) { var corrId = string.Format("{0}{1}", DateTime.Now.Ticks, Thread.CurrentThread.ManagedThreadId); var requestInfo = string.Format("{0} {1}", request.Method, request.RequestUri); var requestMessage = await request.Content.ReadAsByteArrayAsync(); await IncommingMessageAsync(corrId, requestInfo, requestMessage); var response = await base.SendAsync(request, cancellationToken); byte[] responseMessage; if (response.IsSuccessStatusCode) responseMessage = await response.Content.ReadAsByteArrayAsync(); else responseMessage = Encoding.UTF8.GetBytes(response.ReasonPhrase); await OutgoingMessageAsync(corrId, requestInfo, responseMessage); return response; } protected abstract Task IncommingMessageAsync(string correlationId, string requestInfo, byte[] message); protected abstract Task OutgoingMessageAsync(string correlationId, string requestInfo, byte[] message); } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } If we don’t handle the exceptions that can occur in a custom Message Handler, we can have a hard time to find the problem causing the exception. The savior in this case is the Global.asax’s Application_Error: protected void Application_Error() { var exception = Server.GetLastError(); Debug.WriteLine(exception); } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } I would recommend you to add the Application_Error to the Global.asax and log all exceptions to make sure all kind of exception is handled. Summary There are different ways we could add Exception Handling to the Wep API, we can use a custom ApiController, ExceptionFilterAttribute, IHttpActionInvoker or Message Handler. The ExceptionFilterAttribute would be a good place to add a global exception handling, require very few modification, just register it globally for all ApiControllers, even the IHttpActionInvoker can be used to minimize the modifications of files. Adding the Application_Error to the global.asax is a good way to catch all unhandled exception that can occur, for example exception thrown in a Message Handler.   If you want to know when I have posted a blog post, you can follow me on twitter @fredrikn

    Read the article

  • Metro: Introduction to CSS 3 Grid Layout

    - by Stephen.Walther
    The purpose of this blog post is to provide you with a quick introduction to the new W3C CSS 3 Grid Layout standard. You can use CSS Grid Layout in Metro style applications written with JavaScript to lay out the content of an HTML page. CSS Grid Layout provides you with all of the benefits of using HTML tables for layout without requiring you to actually use any HTML table elements. Doing Page Layouts without Tables Back in the 1990’s, if you wanted to create a fancy website, then you would use HTML tables for layout. For example, if you wanted to create a standard three-column page layout then you would create an HTML table with three columns like this: <table height="100%"> <tr> <td valign="top" width="300px" bgcolor="red"> Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column </td> <td valign="top" bgcolor="green"> Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column </td> <td valign="top" width="300px" bgcolor="blue"> Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column </td> </tr> </table> When the table above gets rendered out to a browser, you end up with the following three-column layout: The width of the left and right columns is fixed – the width of the middle column expands or contracts depending on the width of the browser. Sometime around the year 2005, everyone decided that using tables for layout was a bad idea. Instead of using tables for layout — it was collectively decided by the spirit of the Web — you should use Cascading Style Sheets instead. Why is using HTML tables for layout bad? Using tables for layout breaks the semantics of the TABLE element. A TABLE element should be used only for displaying tabular information such as train schedules or moon phases. Using tables for layout is bad for accessibility (The Web Content Accessibility Guidelines 1.0 is explicit about this) and using tables for layout is bad for separating content from layout (see http://CSSZenGarden.com). Post 2005, anyone who used HTML tables for layout were encouraged to hold their heads down in shame. That’s all well and good, but the problem with using CSS for layout is that it can be more difficult to work with CSS than HTML tables. For example, to achieve a standard three-column layout, you either need to use absolute positioning or floats. Here’s a three-column layout with floats: <style type="text/css"> #container { min-width: 800px; } #leftColumn { float: left; width: 300px; height: 100%; background-color:red; } #middleColumn { background-color:green; height: 100%; } #rightColumn { float: right; width: 300px; height: 100%; background-color:blue; } </style> <div id="container"> <div id="rightColumn"> Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column </div> <div id="leftColumn"> Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column </div> <div id="middleColumn"> Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column </div> </div> The page above contains four DIV elements: a container DIV which contains a leftColumn, middleColumn, and rightColumn DIV. The leftColumn DIV element is floated to the left and the rightColumn DIV element is floated to the right. Notice that the rightColumn DIV appears in the page before the middleColumn DIV – this unintuitive ordering is necessary to get the floats to work correctly (see http://stackoverflow.com/questions/533607/css-three-column-layout-problem). The page above (almost) works with the most recent versions of most browsers. For example, you get the correct three-column layout in both Firefox and Chrome: And the layout mostly works with Internet Explorer 9 except for the fact that for some strange reason the min-width doesn’t work so when you shrink the width of your browser, you can get the following unwanted layout: Notice how the middle column (the green column) bleeds to the left and right. People have solved these issues with more complicated CSS. For example, see: http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm But, at this point, no one could argue that using CSS is easier or more intuitive than tables. It takes work to get a layout with CSS and we know that we could achieve the same layout more easily using HTML tables. Using CSS Grid Layout CSS Grid Layout is a new W3C standard which provides you with all of the benefits of using HTML tables for layout without the disadvantage of using an HTML TABLE element. In other words, CSS Grid Layout enables you to perform table layouts using pure Cascading Style Sheets. The CSS Grid Layout standard is still in a “Working Draft” state (it is not finalized) and it is located here: http://www.w3.org/TR/css3-grid-layout/ The CSS Grid Layout standard is only supported by Internet Explorer 10 and there are no signs that any browser other than Internet Explorer will support this standard in the near future. This means that it is only practical to take advantage of CSS Grid Layout when building Metro style applications with JavaScript. Here’s how you can create a standard three-column layout using a CSS Grid Layout: <!DOCTYPE html> <html> <head> <style type="text/css"> html, body, #container { height: 100%; padding: 0px; margin: 0px; } #container { display: -ms-grid; -ms-grid-columns: 300px auto 300px; -ms-grid-rows: 100%; } #leftColumn { -ms-grid-column: 1; background-color:red; } #middleColumn { -ms-grid-column: 2; background-color:green; } #rightColumn { -ms-grid-column: 3; background-color:blue; } </style> </head> <body> <div id="container"> <div id="leftColumn"> Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column </div> <div id="middleColumn"> Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column </div> <div id="rightColumn"> Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column </div> </div> </body> </html> When the page above is rendered in Internet Explorer 10, you get a standard three-column layout: The page above contains four DIV elements: a container DIV which contains a leftColumn DIV, middleColumn DIV, and rightColumn DIV. The container DIV is set to Grid display mode with the following CSS rule: #container { display: -ms-grid; -ms-grid-columns: 300px auto 300px; -ms-grid-rows: 100%; } The display property is set to the value “-ms-grid”. This property causes the container DIV to lay out its child elements in a grid. (Notice that you use “-ms-grid” instead of “grid”. The “-ms-“ prefix is used because the CSS Grid Layout standard is still preliminary. This implementation only works with IE10 and it might change before the final release.) The grid columns and rows are defined with the “-ms-grid-columns” and “-ms-grid-rows” properties. The style rule above creates a grid with three columns and one row. The left and right columns are fixed sized at 300 pixels. The middle column sizes automatically depending on the remaining space available. The leftColumn, middleColumn, and rightColumn DIVs are positioned within the container grid element with the following CSS rules: #leftColumn { -ms-grid-column: 1; background-color:red; } #middleColumn { -ms-grid-column: 2; background-color:green; } #rightColumn { -ms-grid-column: 3; background-color:blue; } The “-ms-grid-column” property is used to specify the column associated with the element selected by the style sheet selector. The leftColumn DIV is positioned in the first grid column, the middleColumn DIV is positioned in the second grid column, and the rightColumn DIV is positioned in the third grid column. I find using CSS Grid Layout to be just as intuitive as using an HTML table for layout. You define your columns and rows and then you position different elements within these columns and rows. Very straightforward. Creating Multiple Columns and Rows In the previous section, we created a super simple three-column layout. This layout contained only a single row. In this section, let’s create a slightly more complicated layout which contains more than one row: The following page contains a header row, a content row, and a footer row. The content row contains three columns: <!DOCTYPE html> <html> <head> <style type="text/css"> html, body, #container { height: 100%; padding: 0px; margin: 0px; } #container { display: -ms-grid; -ms-grid-columns: 300px auto 300px; -ms-grid-rows: 100px 1fr 100px; } #header { -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 1; background-color: yellow; } #leftColumn { -ms-grid-column: 1; -ms-grid-row: 2; background-color:red; } #middleColumn { -ms-grid-column: 2; -ms-grid-row: 2; background-color:green; } #rightColumn { -ms-grid-column: 3; -ms-grid-row: 2; background-color:blue; } #footer { -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 3; background-color: orange; } </style> </head> <body> <div id="container"> <div id="header"> Header, Header, Header </div> <div id="leftColumn"> Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column </div> <div id="middleColumn"> Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column </div> <div id="rightColumn"> Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column </div> <div id="footer"> Footer, Footer, Footer </div> </div> </body> </html> In the page above, the grid layout is created with the following rule which creates a grid with three rows and three columns: #container { display: -ms-grid; -ms-grid-columns: 300px auto 300px; -ms-grid-rows: 100px 1fr 100px; } The header is created with the following rule: #header { -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 1; background-color: yellow; } The header is positioned in column 1 and row 1. Furthermore, notice that the “-ms-grid-column-span” property is used to span the header across three columns. CSS Grid Layout and Fractional Units When you use CSS Grid Layout, you can take advantage of fractional units. Fractional units provide you with an easy way of dividing up remaining space in a page. Imagine, for example, that you want to create a three-column page layout. You want the size of the first column to be fixed at 200 pixels and you want to divide the remaining space among the remaining three columns. The width of the second column is equal to the combined width of the third and fourth columns. The following CSS rule creates four columns with the desired widths: #container { display: -ms-grid; -ms-grid-columns: 200px 2fr 1fr 1fr; -ms-grid-rows: 1fr; } The fr unit represents a fraction. The grid above contains four columns. The second column is two times the size (2fr) of the third (1fr) and fourth (1fr) columns. When you use the fractional unit, the remaining space is divided up using fractional amounts. Notice that the single row is set to a height of 1fr. The single grid row gobbles up the entire vertical space. Here’s the entire HTML page: <!DOCTYPE html> <html> <head> <style type="text/css"> html, body, #container { height: 100%; padding: 0px; margin: 0px; } #container { display: -ms-grid; -ms-grid-columns: 200px 2fr 1fr 1fr; -ms-grid-rows: 1fr; } #firstColumn { -ms-grid-column: 1; background-color:red; } #secondColumn { -ms-grid-column: 2; background-color:green; } #thirdColumn { -ms-grid-column: 3; background-color:blue; } #fourthColumn { -ms-grid-column: 4; background-color:orange; } </style> </head> <body> <div id="container"> <div id="firstColumn"> First Column, First Column, First Column </div> <div id="secondColumn"> Second Column, Second Column, Second Column </div> <div id="thirdColumn"> Third Column, Third Column, Third Column </div> <div id="fourthColumn"> Fourth Column, Fourth Column, Fourth Column </div> </div> </body> </html>   Summary There is more in the CSS 3 Grid Layout standard than discussed in this blog post. My goal was to describe the basics. If you want to learn more than you can read through the entire standard at http://www.w3.org/TR/css3-grid-layout/ In this blog post, I described some of the difficulties that you might encounter when attempting to replace HTML tables with Cascading Style Sheets when laying out a web page. I explained how you can take advantage of the CSS 3 Grid Layout standard to avoid these problems when building Metro style applications using JavaScript. CSS 3 Grid Layout provides you with all of the benefits of using HTML tables for laying out a page without requiring you to use HTML table elements.

    Read the article

  • Metro: Introduction to CSS 3 Grid Layout

    - by Stephen.Walther
    The purpose of this blog post is to provide you with a quick introduction to the new W3C CSS 3 Grid Layout standard. You can use CSS Grid Layout in Metro style applications written with JavaScript to lay out the content of an HTML page. CSS Grid Layout provides you with all of the benefits of using HTML tables for layout without requiring you to actually use any HTML table elements. Doing Page Layouts without Tables Back in the 1990’s, if you wanted to create a fancy website, then you would use HTML tables for layout. For example, if you wanted to create a standard three-column page layout then you would create an HTML table with three columns like this: <table height="100%"> <tr> <td valign="top" width="300px" bgcolor="red"> Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column </td> <td valign="top" bgcolor="green"> Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column </td> <td valign="top" width="300px" bgcolor="blue"> Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column </td> </tr> </table> When the table above gets rendered out to a browser, you end up with the following three-column layout: The width of the left and right columns is fixed – the width of the middle column expands or contracts depending on the width of the browser. Sometime around the year 2005, everyone decided that using tables for layout was a bad idea. Instead of using tables for layout — it was collectively decided by the spirit of the Web — you should use Cascading Style Sheets instead. Why is using HTML tables for layout bad? Using tables for layout breaks the semantics of the TABLE element. A TABLE element should be used only for displaying tabular information such as train schedules or moon phases. Using tables for layout is bad for accessibility (The Web Content Accessibility Guidelines 1.0 is explicit about this) and using tables for layout is bad for separating content from layout (see http://CSSZenGarden.com). Post 2005, anyone who used HTML tables for layout were encouraged to hold their heads down in shame. That’s all well and good, but the problem with using CSS for layout is that it can be more difficult to work with CSS than HTML tables. For example, to achieve a standard three-column layout, you either need to use absolute positioning or floats. Here’s a three-column layout with floats: <style type="text/css"> #container { min-width: 800px; } #leftColumn { float: left; width: 300px; height: 100%; background-color:red; } #middleColumn { background-color:green; height: 100%; } #rightColumn { float: right; width: 300px; height: 100%; background-color:blue; } </style> <div id="container"> <div id="rightColumn"> Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column </div> <div id="leftColumn"> Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column </div> <div id="middleColumn"> Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column </div> </div> The page above contains four DIV elements: a container DIV which contains a leftColumn, middleColumn, and rightColumn DIV. The leftColumn DIV element is floated to the left and the rightColumn DIV element is floated to the right. Notice that the rightColumn DIV appears in the page before the middleColumn DIV – this unintuitive ordering is necessary to get the floats to work correctly (see http://stackoverflow.com/questions/533607/css-three-column-layout-problem). The page above (almost) works with the most recent versions of most browsers. For example, you get the correct three-column layout in both Firefox and Chrome: And the layout mostly works with Internet Explorer 9 except for the fact that for some strange reason the min-width doesn’t work so when you shrink the width of your browser, you can get the following unwanted layout: Notice how the middle column (the green column) bleeds to the left and right. People have solved these issues with more complicated CSS. For example, see: http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm But, at this point, no one could argue that using CSS is easier or more intuitive than tables. It takes work to get a layout with CSS and we know that we could achieve the same layout more easily using HTML tables. Using CSS Grid Layout CSS Grid Layout is a new W3C standard which provides you with all of the benefits of using HTML tables for layout without the disadvantage of using an HTML TABLE element. In other words, CSS Grid Layout enables you to perform table layouts using pure Cascading Style Sheets. The CSS Grid Layout standard is still in a “Working Draft” state (it is not finalized) and it is located here: http://www.w3.org/TR/css3-grid-layout/ The CSS Grid Layout standard is only supported by Internet Explorer 10 and there are no signs that any browser other than Internet Explorer will support this standard in the near future. This means that it is only practical to take advantage of CSS Grid Layout when building Metro style applications with JavaScript. Here’s how you can create a standard three-column layout using a CSS Grid Layout: <!DOCTYPE html> <html> <head> <style type="text/css"> html, body, #container { height: 100%; padding: 0px; margin: 0px; } #container { display: -ms-grid; -ms-grid-columns: 300px auto 300px; -ms-grid-rows: 100%; } #leftColumn { -ms-grid-column: 1; background-color:red; } #middleColumn { -ms-grid-column: 2; background-color:green; } #rightColumn { -ms-grid-column: 3; background-color:blue; } </style> </head> <body> <div id="container"> <div id="leftColumn"> Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column </div> <div id="middleColumn"> Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column </div> <div id="rightColumn"> Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column </div> </div> </body> </html> When the page above is rendered in Internet Explorer 10, you get a standard three-column layout: The page above contains four DIV elements: a container DIV which contains a leftColumn DIV, middleColumn DIV, and rightColumn DIV. The container DIV is set to Grid display mode with the following CSS rule: #container { display: -ms-grid; -ms-grid-columns: 300px auto 300px; -ms-grid-rows: 100%; } The display property is set to the value “-ms-grid”. This property causes the container DIV to lay out its child elements in a grid. (Notice that you use “-ms-grid” instead of “grid”. The “-ms-“ prefix is used because the CSS Grid Layout standard is still preliminary. This implementation only works with IE10 and it might change before the final release.) The grid columns and rows are defined with the “-ms-grid-columns” and “-ms-grid-rows” properties. The style rule above creates a grid with three columns and one row. The left and right columns are fixed sized at 300 pixels. The middle column sizes automatically depending on the remaining space available. The leftColumn, middleColumn, and rightColumn DIVs are positioned within the container grid element with the following CSS rules: #leftColumn { -ms-grid-column: 1; background-color:red; } #middleColumn { -ms-grid-column: 2; background-color:green; } #rightColumn { -ms-grid-column: 3; background-color:blue; } The “-ms-grid-column” property is used to specify the column associated with the element selected by the style sheet selector. The leftColumn DIV is positioned in the first grid column, the middleColumn DIV is positioned in the second grid column, and the rightColumn DIV is positioned in the third grid column. I find using CSS Grid Layout to be just as intuitive as using an HTML table for layout. You define your columns and rows and then you position different elements within these columns and rows. Very straightforward. Creating Multiple Columns and Rows In the previous section, we created a super simple three-column layout. This layout contained only a single row. In this section, let’s create a slightly more complicated layout which contains more than one row: The following page contains a header row, a content row, and a footer row. The content row contains three columns: <!DOCTYPE html> <html> <head> <style type="text/css"> html, body, #container { height: 100%; padding: 0px; margin: 0px; } #container { display: -ms-grid; -ms-grid-columns: 300px auto 300px; -ms-grid-rows: 100px 1fr 100px; } #header { -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 1; background-color: yellow; } #leftColumn { -ms-grid-column: 1; -ms-grid-row: 2; background-color:red; } #middleColumn { -ms-grid-column: 2; -ms-grid-row: 2; background-color:green; } #rightColumn { -ms-grid-column: 3; -ms-grid-row: 2; background-color:blue; } #footer { -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 3; background-color: orange; } </style> </head> <body> <div id="container"> <div id="header"> Header, Header, Header </div> <div id="leftColumn"> Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column, Left Column </div> <div id="middleColumn"> Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column, Middle Column </div> <div id="rightColumn"> Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column, Right Column </div> <div id="footer"> Footer, Footer, Footer </div> </div> </body> </html> In the page above, the grid layout is created with the following rule which creates a grid with three rows and three columns: #container { display: -ms-grid; -ms-grid-columns: 300px auto 300px; -ms-grid-rows: 100px 1fr 100px; } The header is created with the following rule: #header { -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 1; background-color: yellow; } The header is positioned in column 1 and row 1. Furthermore, notice that the “-ms-grid-column-span” property is used to span the header across three columns. CSS Grid Layout and Fractional Units When you use CSS Grid Layout, you can take advantage of fractional units. Fractional units provide you with an easy way of dividing up remaining space in a page. Imagine, for example, that you want to create a three-column page layout. You want the size of the first column to be fixed at 200 pixels and you want to divide the remaining space among the remaining three columns. The width of the second column is equal to the combined width of the third and fourth columns. The following CSS rule creates four columns with the desired widths: #container { display: -ms-grid; -ms-grid-columns: 200px 2fr 1fr 1fr; -ms-grid-rows: 1fr; } The fr unit represents a fraction. The grid above contains four columns. The second column is two times the size (2fr) of the third (1fr) and fourth (1fr) columns. When you use the fractional unit, the remaining space is divided up using fractional amounts. Notice that the single row is set to a height of 1fr. The single grid row gobbles up the entire vertical space. Here’s the entire HTML page: <!DOCTYPE html> <html> <head> <style type="text/css"> html, body, #container { height: 100%; padding: 0px; margin: 0px; } #container { display: -ms-grid; -ms-grid-columns: 200px 2fr 1fr 1fr; -ms-grid-rows: 1fr; } #firstColumn { -ms-grid-column: 1; background-color:red; } #secondColumn { -ms-grid-column: 2; background-color:green; } #thirdColumn { -ms-grid-column: 3; background-color:blue; } #fourthColumn { -ms-grid-column: 4; background-color:orange; } </style> </head> <body> <div id="container"> <div id="firstColumn"> First Column, First Column, First Column </div> <div id="secondColumn"> Second Column, Second Column, Second Column </div> <div id="thirdColumn"> Third Column, Third Column, Third Column </div> <div id="fourthColumn"> Fourth Column, Fourth Column, Fourth Column </div> </div> </body> </html>   Summary There is more in the CSS 3 Grid Layout standard than discussed in this blog post. My goal was to describe the basics. If you want to learn more than you can read through the entire standard at http://www.w3.org/TR/css3-grid-layout/ In this blog post, I described some of the difficulties that you might encounter when attempting to replace HTML tables with Cascading Style Sheets when laying out a web page. I explained how you can take advantage of the CSS 3 Grid Layout standard to avoid these problems when building Metro style applications using JavaScript. CSS 3 Grid Layout provides you with all of the benefits of using HTML tables for laying out a page without requiring you to use HTML table elements.

    Read the article

  • Use Extension method to write cleaner code

    - by Fredrik N
    This blog post will show you step by step to refactoring some code to be more readable (at least what I think). Patrik Löwnedahl gave me some of the ideas when we where talking about making code much cleaner. The following is an simple application that will have a list of movies (Normal and Transfer). The task of the application is to calculate the total sum of each movie and also display the price of each movie. class Program { enum MovieType { Normal, Transfer } static void Main(string[] args) { var movies = GetMovies(); int totalPriceOfNormalMovie = 0; int totalPriceOfTransferMovie = 0; foreach (var movie in movies) { if (movie == MovieType.Normal) { totalPriceOfNormalMovie += 2; Console.WriteLine("$2"); } else if (movie == MovieType.Transfer) { totalPriceOfTransferMovie += 3; Console.WriteLine("$3"); } } } private static IEnumerable<MovieType> GetMovies() { return new List<MovieType>() { MovieType.Normal, MovieType.Transfer, MovieType.Normal }; } } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } In the code above I’m using an enum, a good way to add types (isn’t it ;)). I also use one foreach loop to calculate the price, the loop has a condition statement to check what kind of movie is added to the list of movies. I want to reuse the foreach only to increase performance and let it do two things (isn’t that smart of me?! ;)). First of all I can admit, I’m not a big fan of enum. Enum often results in ugly condition statements and can be hard to maintain (if a new type is added we need to check all the code in our app to see if we use the enum somewhere else). I don’t often care about pre-optimizations when it comes to write code (of course I have performance in mind). I rather prefer to use two foreach to let them do one things instead of two. So based on what I don’t like and Martin Fowler’s Refactoring catalog, I’m going to refactoring this code to what I will call a more elegant and cleaner code. First of all I’m going to use Split Loop to make sure the foreach will do one thing not two, it will results in two foreach (Don’t care about performance here, if the results will results in bad performance, you can refactoring later, but computers are so fast to day, so iterating through a list is not often so time consuming.) Note: The foreach actually do four things, will come to is later. var movies = GetMovies(); int totalPriceOfNormalMovie = 0; int totalPriceOfTransferMovie = 0; foreach (var movie in movies) { if (movie == MovieType.Normal) { totalPriceOfNormalMovie += 2; Console.WriteLine("$2"); } } foreach (var movie in movies) { if (movie == MovieType.Transfer) { totalPriceOfTransferMovie += 3; Console.WriteLine("$3"); } } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } To remove the condition statement we can use the Where extension method added to the IEnumerable<T> and is located in the System.Linq namespace: foreach (var movie in movies.Where( m => m == MovieType.Normal)) { totalPriceOfNormalMovie += 2; Console.WriteLine("$2"); } foreach (var movie in movies.Where( m => m == MovieType.Transfer)) { totalPriceOfTransferMovie += 3; Console.WriteLine("$3"); } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } The above code will still do two things, calculate the total price, and display the price of the movie. I will not take care of it at the moment, instead I will focus on the enum and try to remove them. One way to remove enum is by using the Replace Conditional with Polymorphism. So I will create two classes, one base class called Movie, and one called MovieTransfer. The Movie class will have a property called Price, the Movie will now hold the price:   public class Movie { public virtual int Price { get { return 2; } } } public class MovieTransfer : Movie { public override int Price { get { return 3; } } } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } The following code has no enum and will use the new Movie classes instead: class Program { static void Main(string[] args) { var movies = GetMovies(); int totalPriceOfNormalMovie = 0; int totalPriceOfTransferMovie = 0; foreach (var movie in movies.Where( m => m is Movie)) { totalPriceOfNormalMovie += movie.Price; Console.WriteLine(movie.Price); } foreach (var movie in movies.Where( m => m is MovieTransfer)) { totalPriceOfTransferMovie += movie.Price; Console.WriteLine(movie.Price); } } private static IEnumerable<Movie> GetMovies() { return new List<Movie>() { new Movie(), new MovieTransfer(), new Movie() }; } } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }   If you take a look at the foreach now, you can see it still actually do two things, calculate the price and display the price. We can do some more refactoring here by using the Sum extension method to calculate the total price of the movies:   static void Main(string[] args) { var movies = GetMovies(); int totalPriceOfNormalMovie = movies.Where(m => m is Movie) .Sum(m => m.Price); int totalPriceOfTransferMovie = movies.Where(m => m is MovieTransfer) .Sum(m => m.Price); foreach (var movie in movies.Where( m => m is Movie)) Console.WriteLine(movie.Price); foreach (var movie in movies.Where( m => m is MovieTransfer)) Console.WriteLine(movie.Price); } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Now when the Movie object will hold the price, there is no need to use two separate foreach to display the price of the movies in the list, so we can use only one instead: foreach (var movie in movies) Console.WriteLine(movie.Price); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } If we want to increase the Maintainability index we can use the Extract Method to move the Sum of the prices into two separate methods. The name of the method will explain what we are doing: static void Main(string[] args) { var movies = GetMovies(); int totalPriceOfMovie = TotalPriceOfMovie(movies); int totalPriceOfTransferMovie = TotalPriceOfMovieTransfer(movies); foreach (var movie in movies) Console.WriteLine(movie.Price); } private static int TotalPriceOfMovieTransfer(IEnumerable<Movie> movies) { return movies.Where(m => m is MovieTransfer) .Sum(m => m.Price); } private static int TotalPriceOfMovie(IEnumerable<Movie> movies) { return movies.Where(m => m is Movie) .Sum(m => m.Price); } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Now to the last thing, I love the ForEach method of the List<T>, but the IEnumerable<T> doesn’t have it, so I created my own ForEach extension, here is the code of the ForEach extension method: public static class LoopExtensions { public static void ForEach<T>(this IEnumerable<T> values, Action<T> action) { Contract.Requires(values != null); Contract.Requires(action != null); foreach (var v in values) action(v); } } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } I will now replace the foreach by using this ForEach method: static void Main(string[] args) { var movies = GetMovies(); int totalPriceOfMovie = TotalPriceOfMovie(movies); int totalPriceOfTransferMovie = TotalPriceOfMovieTransfer(movies); movies.ForEach(m => Console.WriteLine(m.Price)); } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } The ForEach on the movies will now display the price of the movie, but maybe we want to display the name of the movie etc, so we can use Extract Method by moving the lamdba expression into a method instead, and let the method explains what we are displaying: movies.ForEach(DisplayMovieInfo); private static void DisplayMovieInfo(Movie movie) { Console.WriteLine(movie.Price); } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Now the refactoring is done! Here is the complete code:   class Program { static void Main(string[] args) { var movies = GetMovies(); int totalPriceOfMovie = TotalPriceOfMovie(movies); int totalPriceOfTransferMovie = TotalPriceOfMovieTransfer(movies); movies.ForEach(DisplayMovieInfo); } private static void DisplayMovieInfo(Movie movie) { Console.WriteLine(movie.Price); } private static int TotalPriceOfMovieTransfer(IEnumerable<Movie> movies) { return movies.Where(m => m is MovieTransfer) .Sum(m => m.Price); } private static int TotalPriceOfMovie(IEnumerable<Movie> movies) { return movies.Where(m => m is Movie) .Sum(m => m.Price); } private static IEnumerable<Movie> GetMovies() { return new List<Movie>() { new Movie(), new MovieTransfer(), new Movie() }; } } public class Movie { public virtual int Price { get { return 2; } } } public class MovieTransfer : Movie { public override int Price { get { return 3; } } } pulbic static class LoopExtensions { public static void ForEach<T>(this IEnumerable<T> values, Action<T> action) { Contract.Requires(values != null); Contract.Requires(action != null); foreach (var v in values) action(v); } } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } I think the new code is much cleaner than the first one, and I love the ForEach extension on the IEnumerable<T>, I can use it for different kind of things, for example: movies.Where(m => m is Movie) .ForEach(DoSomething); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } By using the Where and ForEach extension method, some if statements can be removed and will make the code much cleaner. But the beauty is in the eye of the beholder. What would you have done different, what do you think will make the first example in the blog post look much cleaner than my results, comments are welcome! If you want to know when I will publish a new blog post, you can follow me on twitter: http://www.twitter.com/fredrikn

    Read the article

  • How do I make my page respect h1 css addition? [migrated]

    - by Adobe
    I add h1 { margin-top:100px; } to the end of the css, but the page doesn't change. But if I add to the html of some h1: <h1 style="margin-top:100px;"><a class="toc-backref" href="#id4">KHotKeys</a><a class="headerlink" href="#khotkeys" title="Permalink to this headline">¶</a></h1> Then it does. I'm not css pro, and I guess the problem is somewhere in the css file. Here it is: div.clearer { clear: both; } /* -- relbar ---------------------------------------------------------------- */ div.related { width: 100%; font-size: 90%; } div.related h3 { display: none; } div.related ul { margin: 0; padding: 0 0 0 10px; list-style: none; } div.related li { display: inline; } div.related li.right { float: right; margin-right: 5px; } /* -- sidebar --------------------------------------------------------------- */ div.sphinxsidebarwrapper { padding: 10px 5px 0 10px; } div.sphinxsidebar { float: left; width: 230px; margin-left: -100%; font-size: 90%; } div.sphinxsidebar ul { list-style: none; } div.sphinxsidebar ul ul, div.sphinxsidebar ul.want-points { margin-left: 20px; list-style: square; } div.sphinxsidebar ul ul { margin-top: 0; margin-bottom: 0; } div.sphinxsidebar form { margin-top: 10px; } div.sphinxsidebar input { border: 1px solid #98dbcc; font-family: sans-serif; font-size: 1em; } div.sphinxsidebar input[type="text"] { width: 160px; } div.sphinxsidebar input[type="submit"] { width: 30px; } img { border: 0; } /* -- search page ----------------------------------------------------------- */ ul.search { margin: 10px 0 0 20px; padding: 0; } ul.search li { padding: 5px 0 5px 20px; background-image: url(file.png); background-repeat: no-repeat; background-position: 0 7px; } ul.search li a { font-weight: bold; } ul.search li div.context { color: #888; margin: 2px 0 0 30px; text-align: left; } ul.keywordmatches li.goodmatch a { font-weight: bold; } /* -- index page ------------------------------------------------------------ */ table.contentstable { width: 90%; } table.contentstable p.biglink { line-height: 150%; } a.biglink { font-size: 1.3em; } span.linkdescr { font-style: italic; padding-top: 5px; font-size: 90%; } /* -- general index --------------------------------------------------------- */ table.indextable { width: 100%; } table.indextable td { text-align: left; vertical-align: top; } table.indextable dl, table.indextable dd { margin-top: 0; margin-bottom: 0; } table.indextable tr.pcap { height: 10px; } table.indextable tr.cap { margin-top: 10px; background-color: #f2f2f2; } img.toggler { margin-right: 3px; margin-top: 3px; cursor: pointer; } div.modindex-jumpbox { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin: 1em 0 1em 0; padding: 0.4em; } div.genindex-jumpbox { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin: 1em 0 1em 0; padding: 0.4em; } /* -- general body styles --------------------------------------------------- */ a.headerlink { visibility: hidden; } h1:hover > a.headerlink, h2:hover > a.headerlink, h3:hover > a.headerlink, h4:hover > a.headerlink, h5:hover > a.headerlink, h6:hover > a.headerlink, dt:hover > a.headerlink { visibility: visible; } div.body p.caption { text-align: inherit; } div.body td { text-align: left; } .field-list ul { padding-left: 1em; } .first { margin-top: 0 !important; } p.rubric { margin-top: 30px; font-weight: bold; } img.align-left, .figure.align-left, object.align-left { clear: left; float: left; margin-right: 1em; } img.align-right, .figure.align-right, object.align-right { clear: right; float: right; margin-left: 1em; } img.align-center, .figure.align-center, object.align-center { display: block; margin-left: auto; margin-right: auto; } .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } /* -- sidebars -------------------------------------------------------------- */ div.sidebar { margin: 0 0 0.5em 1em; border: 1px solid #ddb; padding: 7px 7px 0 7px; background-color: #ffe; width: 40%; float: right; } p.sidebar-title { font-weight: bold; } /* -- topics ---------------------------------------------------------------- */ div.topic { border: 1px solid #ccc; padding: 7px 7px 0 7px; margin: 10px 0 10px 0; } p.topic-title { font-size: 1.1em; font-weight: bold; margin-top: 10px; } /* -- admonitions ----------------------------------------------------------- */ div.admonition { margin-top: 10px; margin-bottom: 10px; padding: 7px; } div.admonition dt { font-weight: bold; } div.admonition dl { margin-bottom: 0; } p.admonition-title { margin: 0px 10px 5px 0px; font-weight: bold; } div.body p.centered { text-align: center; margin-top: 25px; } /* -- tables ---------------------------------------------------------------- */ table.docutils { border: 0; border-collapse: collapse; } table.docutils td, table.docutils th { padding: 1px 8px 1px 5px; border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px solid #aaa; } table.field-list td, table.field-list th { border: 0 !important; } table.footnote td, table.footnote th { border: 0 !important; } th { text-align: left; padding-right: 5px; } table.citation { border-left: solid 1px gray; margin-left: 1px; } table.citation td { border-bottom: none; } /* -- other body styles ----------------------------------------------------- */ ol.arabic { list-style: decimal; } ol.loweralpha { list-style: lower-alpha; } ol.upperalpha { list-style: upper-alpha; } ol.lowerroman { list-style: lower-roman; } ol.upperroman { list-style: upper-roman; } dl { margin-bottom: 15px; } dd p { margin-top: 0px; } dd ul, dd table { margin-bottom: 10px; } dd { margin-top: 3px; margin-bottom: 10px; margin-left: 30px; } dt:target, .highlighted { background-color: #fbe54e; } dl.glossary dt { font-weight: bold; font-size: 1.1em; } .field-list ul { margin: 0; padding-left: 1em; } .field-list p { margin: 0; } .refcount { color: #060; } .optional { font-size: 1.3em; } .versionmodified { font-style: italic; } .system-message { background-color: #fda; padding: 5px; border: 3px solid red; } .footnote:target { background-color: #ffa; } .line-block { display: block; margin-top: 1em; margin-bottom: 1em; } .line-block .line-block { margin-top: 0; margin-bottom: 0; margin-left: 1.5em; } .guilabel, .menuselection { font-family: sans-serif; } .accelerator { text-decoration: underline; } .classifier { font-style: oblique; } /* -- code displays --------------------------------------------------------- */ pre { overflow: auto; overflow-y: hidden; /* fixes display issues on Chrome browsers */ } td.linenos pre { padding: 5px 0px; border: 0; background-color: transparent; color: #aaa; } table.highlighttable { margin-left: 0.5em; } table.highlighttable td { padding: 0 0.5em 0 0.5em; } tt.descname { background-color: transparent; font-weight: bold; font-size: 1.2em; } tt.descclassname { background-color: transparent; } tt.xref, a tt { background-color: transparent; font-weight: bold; } h1 tt, h2 tt, h3 tt, h4 tt, h5 tt, h6 tt { background-color: transparent; } .viewcode-link { float: right; } .viewcode-back { float: right; font-family: sans-serif; } div.viewcode-block:target { margin: -1px -10px; padding: 0 10px; } /* -- math display ---------------------------------------------------------- */ img.math { vertical-align: middle; } div.body div.math p { text-align: center; } span.eqno { float: right; } /* -- printout stylesheet --------------------------------------------------- */ @media print { div.document, div.documentwrapper, div.bodywrapper { margin: 0 !important; width: 100%; } div.sphinxsidebar, div.related, div.footer, #top-link { display: none; } } body { font-family: sans-serif; font-size: 100%; background-color: #11303d; color: #000; margin: 0; padding: 0; } div.document { background-color: #d4e9f7; } div.documentwrapper { float: left; width: 100%; } div.bodywrapper { margin: 0 0 0 230px; } div.body { background-color: #ffffff; color: #222222; padding: 0 20px 30px 20px; } div.footer { color: #ffffff; width: 100%; padding: 9px 0 9px 0; text-align: center; font-size: 75%; } div.footer a { color: #ffffff; text-decoration: underline; } div.related { background-color: #191a19; line-height: 30px; color: #ffffff; } div.related a { color: #ffffff; } div.sphinxsidebar { top: 30px; bottom: 60px; margin: 0; position: fixed; overflow: auto; height: auto; } div.sphinxsidebar h3 { font-family: 'Trebuchet MS', sans-serif; color: #3a3a3a; font-size: 1.4em; font-weight: normal; margin: 0; padding: 0; } div.sphinxsidebar h3 a { color: #3a3a3a; } div.sphinxsidebar h4 { font-family: 'Trebuchet MS', sans-serif; color: #3a3a3a; font-size: 1.3em; font-weight: normal; margin: 5px 0 0 0; padding: 0; } div.sphinxsidebar p { color: #3a3a3a; } div.sphinxsidebar p.topless { margin: 5px 10px 10px 10px; } div.sphinxsidebar ul { margin: 10px; padding: 0; color: #3a3a3a; } div.sphinxsidebar ul li { margin-top: .2em; } div.sphinxsidebar a { color: #3a8942; } div.sphinxsidebar input { border: 1px solid #3a8942; font-family: sans-serif; font-size: 1em; } /* -- body styles ----------------------------------------------------------- */ a { color: #355f7c; text-decoration: none; } a:hover { text-decoration: underline; } div.body p, div.body dd, div.body li { text-align: left; line-height: 130%; margin-top: 0px; margin-bottom: 0px; } div.body h1, div.body h2, div.body h3, div.body h4, div.body h5, div.body h6 { font-family: 'Trebuchet MS', sans-serif; background-color: #f2f2f2; font-weight: normal; color: #20435c; border-top: 2px solid #cccccc; border-bottom: 1px solid #cccccc; margin: 30px -20px 20px -20px; padding: 3px 0 3px 10px; } div.body h1 { margin-top: 0; font-size: 200%; } div.body h2 { font-size: 160%; } div.body h3 { font-size: 140%; padding-left: 20px; } div.body h4 { font-size: 120%; padding-left: 20px; } div.body h5 { font-size: 110%; padding-left: 20px; } div.body h6 { font-size: 100%; padding-left: 20px; } a.headerlink { color: #c60f0f; font-size: 0.8em; padding: 0 4px 0 4px; text-decoration: none; } a.headerlink:hover { background-color: #c60f0f; color: white; } div.body p, div.body dd, div.body li { text-align: left; line-height: 110%; } div.admonition p.admonition-title + p { display: inline; } div.note { background-color: #eee; border: 1px solid #ccc; } div.seealso { background-color: #ffc; border: 1px solid #ff6; } div.topic { background-color: #eee; } div.warning { background-color: #ffe4e4; border: 1px solid #f66; } p.admonition-title { display: inline; } p.admonition-title:after { content: ":"; } pre { padding: 0px; background-color: #ffffff; color: #000000; line-height: 120%; border: 0px solid #ffffff; border-left: none; border-right: none; white-space: pre-wrap; /* word-wrap: break-word; */ /* width:100px; */ } tt { background-color: #ecf0f3; padding: 0 1px 0 1px; font-size: 110%; } .warning tt { background: #efc2c2; } .note tt { background: #d6d6d6; } body { width:150%; }

    Read the article

  • Spritebatch drawing sprite with jagged borders

    - by Mutoh
    Alright, I've been on the making of a sprite class and a sprite sheet manager, but have come across this problem. Pretty much, the project is acting like so; for example: Let's take this .png image, with a transparent background. Note how it has alpha-transparent pixels around it in the lineart. Now, in the latter link's image, in the left (with CornflowerBlue background) it is shown the image drawn in another project (let's call it "Project1") with a simpler sprite class - there, it works. The right (with Purple background for differentiating) shows it drawn with a different class in "Project2" - where the problem manifests itself. This is the Sprite class of Project1: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Microsoft.Xna.Framework; using Microsoft.Xna.Framework.Content; using Microsoft.Xna.Framework.Graphics; namespace WindowsGame2 { class Sprite { Vector2 pos = new Vector2(0, 0); Texture2D image; Rectangle size; float scale = 1.0f; // --- public float X { get { return pos.X; } set { pos.X = value; } } public float Y { get { return pos.Y; } set { pos.Y = value; } } public float Width { get { return size.Width; } } public float Height { get { return size.Height; } } public float Scale { get { return scale; } set { if (value < 0) value = 0; scale = value; if (image != null) { size.Width = (int)(image.Width * scale); size.Height = (int)(image.Height * scale); } } } // --- public void Load(ContentManager Man, string filename) { image = Man.Load<Texture2D>(filename); size = new Rectangle( 0, 0, (int)(image.Width * scale), (int)(image.Height * scale) ); } public void Become(Texture2D frame) { image = frame; size = new Rectangle( 0, 0, (int)(image.Width * scale), (int)(image.Height * scale) ); } public void Draw(SpriteBatch Desenhista) { // Desenhista.Draw(image, pos, Color.White); Desenhista.Draw( image, pos, new Rectangle( 0, 0, image.Width, image.Height ), Color.White, 0.0f, Vector2.Zero, scale, SpriteEffects.None, 0 ); } } } And this is the code in Project2, a rewritten, pretty much, version of the previous class. In this one I added sprite sheet managing and, in particular, removed Load and Become, to allow for static resources and only actual Sprites to be instantiated. using System; using System.Collections.Generic; using System.Linq; using System.Text; using Microsoft.Xna.Framework; using Microsoft.Xna.Framework.Content; using Microsoft.Xna.Framework.Graphics; namespace Mobby_s_Adventure { // Actually, I might desconsider this, and instead use static AnimationLocation[] and instanciated ID and Frame; // For determining the starting frame of an animation in a sheet and being able to iterate through // the Rectangles vector of the Sheet; class AnimationLocation { public int Location; public int FrameCount; // --- public AnimationLocation(int StartingRow, int StartingColumn, int SheetWidth, int NumberOfFrames) { Location = (StartingRow * SheetWidth) + StartingColumn; FrameCount = NumberOfFrames; } public AnimationLocation(int PositionInSheet, int NumberOfFrames) { Location = PositionInSheet; FrameCount = NumberOfFrames; } public static int CalculatePosition(int StartingRow, int StartingColumn, SheetManager Sheet) { return ((StartingRow * Sheet.Width) + StartingColumn); } } class Sprite { // The general stuff; protected SheetManager Sheet; protected Vector2 Position; public Vector2 Axis; protected Color _Tint; public float Angle; public float Scale; protected SpriteEffects _Effect; // --- // protected AnimationManager Animation; // For managing the animations; protected AnimationLocation[] Animation; public int AnimationID; protected int Frame; // --- // Properties for easy accessing of the position of the sprite; public float X { get { return Position.X; } set { Position.X = Axis.X + value; } } public float Y { get { return Position.Y; } set { Position.Y = Axis.Y + value; } } // --- // Properties for knowing the size of the sprite's frames public float Width { get { return Sheet.FrameWidth * Scale; } } public float Height { get { return Sheet.FrameHeight * Scale; } } // --- // Properties for more stuff; public Color Tint { set { _Tint = value; } } public SpriteEffects Effect { set { _Effect = value; } } public int FrameID { get { return Frame; } set { if (value >= (Animation[AnimationID].FrameCount)) value = 0; Frame = value; } } // --- // The only things that will be constantly modified will be AnimationID and FrameID, anything else only // occasionally; public Sprite(SheetManager SpriteSheet, AnimationLocation[] Animations, Vector2 Location, Nullable<Vector2> Origin = null) { // Assign the sprite's sprite sheet; // (Passed by reference! To allow STATIC sheets!) Sheet = SpriteSheet; // Define the animations that the sprite has available; // (Passed by reference! To allow STATIC animation boundaries!) Animation = Animations; // Defaulting some numerical values; Angle = 0.0f; Scale = 1.0f; _Tint = Color.White; _Effect = SpriteEffects.None; // If the user wants a default Axis, it is set in the middle of the frame; if (Origin != null) Axis = Origin.Value; else Axis = new Vector2( Sheet.FrameWidth / 2, Sheet.FrameHeight / 2 ); // Now that we have the axis, we can set the position with no worries; X = Location.X; Y = Location.Y; } // Simply put, draw the sprite with all its characteristics; public void Draw(SpriteBatch Drafter) { Drafter.Draw( Sheet.Texture, Position, Sheet.Rectangles[Animation[AnimationID].Location + FrameID], // Find the rectangle which frames the wanted image; _Tint, Angle, Axis, Scale, _Effect, 0.0f ); } } } And, in any case, this is the SheetManager class found in the previous code: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Microsoft.Xna.Framework; using Microsoft.Xna.Framework.Content; using Microsoft.Xna.Framework.Graphics; namespace Mobby_s_Adventure { class SheetManager { protected Texture2D SpriteSheet; // For storing the sprite sheet; // Number of rows and frames in each row in the SpriteSheet; protected int NumberOfRows; protected int NumberOfColumns; // Size of a single frame; protected int _FrameWidth; protected int _FrameHeight; public Rectangle[] Rectangles; // For storing each frame; // --- public int Width { get { return NumberOfColumns; } } public int Height { get { return NumberOfRows; } } // --- public int FrameWidth { get { return _FrameWidth; } } public int FrameHeight { get { return _FrameHeight; } } // --- public Texture2D Texture { get { return SpriteSheet; } } // --- public SheetManager (Texture2D Texture, int Rows, int FramesInEachRow) { // Normal assigning SpriteSheet = Texture; NumberOfRows = Rows; NumberOfColumns = FramesInEachRow; _FrameHeight = Texture.Height / NumberOfRows; _FrameWidth = Texture.Width / NumberOfColumns; // Framing everything Rectangles = new Rectangle[NumberOfRows * NumberOfColumns]; int ID = 0; for (int i = 0; i < NumberOfRows; i++) { for (int j = 0; j < NumberOfColumns; j++) { Rectangles[ID] = new Rectangle ( _FrameWidth * j, _FrameHeight * i, _FrameWidth, _FrameHeight ); ID++; } } } public SheetManager (Texture2D Texture, int NumberOfFrames): this(Texture, 1, NumberOfFrames) { } } } For even more comprehending, if needed, here is how the main code looks like (it's just messing with the class' capacities, nothing actually; the result is a disembodied feet walking in place animation on the top-left of the screen and a static axe nearby): using System; using System.Collections.Generic; using System.Linq; using Microsoft.Xna.Framework; using Microsoft.Xna.Framework.Audio; using Microsoft.Xna.Framework.Content; using Microsoft.Xna.Framework.GamerServices; using Microsoft.Xna.Framework.Graphics; using Microsoft.Xna.Framework.Input; using Microsoft.Xna.Framework.Media; using System.Threading; namespace Mobby_s_Adventure { /// <summary> /// This is the main type for your game /// </summary> public class Game1 : Microsoft.Xna.Framework.Game { GraphicsDeviceManager graphics; SpriteBatch spriteBatch; static List<Sprite> ToDraw; static Texture2D AxeSheet; static Texture2D FeetSheet; static SheetManager Axe; static Sprite Jojora; static AnimationLocation[] Hack = new AnimationLocation[1]; static SheetManager Feet; static Sprite Mutoh; static AnimationLocation[] FeetAnimations = new AnimationLocation[2]; public Game1() { graphics = new GraphicsDeviceManager(this); Content.RootDirectory = "Content"; this.TargetElapsedTime = TimeSpan.FromMilliseconds(100); this.IsFixedTimeStep = true; } /// <summary> /// Allows the game to perform any initialization it needs to before starting to run. /// This is where it can query for any required services and load any non-graphic /// related content. Calling base.Initialize will enumerate through any components /// and initialize them as well. /// </summary> protected override void Initialize() { // TODO: Add your initialization logic here base.Initialize(); } /// <summary> /// LoadContent will be called once per game and is the place to load /// all of your content. /// </summary> protected override void LoadContent() { // Create a new SpriteBatch, which can be used to draw textures. spriteBatch = new SpriteBatch(GraphicsDevice); // Loading logic ToDraw = new List<Sprite>(); AxeSheet = Content.Load<Texture2D>("Sheet"); FeetSheet = Content.Load<Texture2D>("Feet Sheet"); Axe = new SheetManager(AxeSheet, 1); Hack[0] = new AnimationLocation(0, 1); Jojora = new Sprite(Axe, Hack, new Vector2(100, 100), new Vector2(5, 55)); Jojora.AnimationID = 0; Jojora.FrameID = 0; Feet = new SheetManager(FeetSheet, 8); FeetAnimations[0] = new AnimationLocation(1, 7); FeetAnimations[1] = new AnimationLocation(0, 1); Mutoh = new Sprite(Feet, FeetAnimations, new Vector2(0, 0)); Mutoh.AnimationID = 0; Mutoh.FrameID = 0; } /// <summary> /// UnloadContent will be called once per game and is the place to unload /// all content. /// </summary> protected override void UnloadContent() { // TODO: Unload any non ContentManager content here } /// <summary> /// Allows the game to run logic such as updating the world, /// checking for collisions, gathering input, and playing audio. /// </summary> /// <param name="gameTime">Provides a snapshot of timing values.</param> protected override void Update(GameTime gameTime) { // Allows the game to exit if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed) this.Exit(); // Update logic Mutoh.FrameID++; ToDraw.Add(Mutoh); ToDraw.Add(Jojora); base.Update(gameTime); } /// <summary> /// This is called when the game should draw itself. /// </summary> /// <param name="gameTime">Provides a snapshot of timing values.</param> protected override void Draw(GameTime gameTime) { GraphicsDevice.Clear(Color.Purple); // Drawing logic spriteBatch.Begin(); foreach (Sprite Element in ToDraw) { Element.Draw(spriteBatch); } spriteBatch.Draw(Content.Load<Texture2D>("Sheet"), new Rectangle(50, 50, 55, 60), Color.White); spriteBatch.End(); base.Draw(gameTime); } } } Please help me find out what I'm overlooking! One thing that I have noticed and could aid is that, if inserted the equivalent of this code spriteBatch.Draw( Content.Load<Texture2D>("Image Location"), new Rectangle(X, Y, images width, height), Color.White ); in Project2's Draw(GameTime) of the main loop, it works. EDIT Ok, even if the matter remains unsolved, I have made some more progress! As you see, I managed to get the two kinds of rendering in the same project (the aforementioned Project2, with the more complex Sprite class). This was achieved by adding the following code to Draw(GameTime): protected override void Draw(GameTime gameTime) { GraphicsDevice.Clear(Color.Purple); // Drawing logic spriteBatch.Begin(); foreach (Sprite Element in ToDraw) { Element.Draw(spriteBatch); } // Starting here spriteBatch.Draw( Axe.Texture, new Vector2(65, 100), new Rectangle ( 0, 0, Axe.FrameWidth, Axe.FrameHeight ), Color.White, 0.0f, new Vector2(0, 0), 1.0f, SpriteEffects.None, 0.0f ); // Ending here spriteBatch.End(); base.Draw(gameTime); } (Supposing that Axe is the SheetManager containing the texture, sorry if the "jargons" of my code confuse you :s) Thus, I have noticed that the problem is within the Sprite class. But I only get more clueless, because even after modifying its Draw function to this: public void Draw(SpriteBatch Drafter) { /*Drafter.Draw( Sheet.Texture, Position, Sheet.Rectangles[Animation[AnimationID].Location + FrameID], // Find the rectangle which frames the wanted image; _Tint, Angle, Axis, Scale, _Effect, 0.0f );*/ Drafter.Draw( Sheet.Texture, Position, new Rectangle( 0, 0, Sheet.FrameWidth, Sheet.FrameHeight ), Color.White, 0.0f, Vector2.Zero, Scale, SpriteEffects.None, 0 ); } to make it as simple as the patch of code that works, it still draws the sprite jaggedly!

    Read the article

  • Using CSS3 media queries in HTML 5 pages

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

    Read the article

  • iPhone SDK vs Windows Phone 7 Series SDK Challenge, Part 1: Hello World!

    In this series, I will be taking sample applications from the iPhone SDK and implementing them on Windows Phone 7 Series.  My goal is to do as much of an apples-to-apples comparison as I can.  This series will be written to not only compare and contrast how easy or difficult it is to complete tasks on either platform, how many lines of code, etc., but Id also like it to be a way for iPhone developers to either get started on Windows Phone 7 Series development, or for developers in general to learn the platform. Heres my methodology: Run the iPhone SDK app in the iPhone Simulator to get a feel for what it does and how it works, without looking at the implementation Implement the equivalent functionality on Windows Phone 7 Series using Silverlight. Compare the two implementations based on complexity, functionality, lines of code, number of files, etc. Add some functionality to the Windows Phone 7 Series app that shows off a way to make the scenario more interesting or leverages an aspect of the platform, or uses a better design pattern to implement the functionality. You can download Microsoft Visual Studio 2010 Express for Windows Phone CTP here, and the Expression Blend 4 Beta here. Hello World! Of course no first post would be allowed if it didnt focus on the hello world scenario.  The iPhone SDK follows that tradition with the Your First iPhone Application walkthrough.  I will say that the developer documentation for iPhone is pretty good.  There are plenty of walkthoughs and they break things down into nicely sized steps and do a good job of bringing the user along.  As expected, this application is quite simple.  It comprises of a text box, a label, and a button.  When you push the button, the label changes to Hello plus the  word you typed into the text box.  Makes perfect sense for a starter application.  Theres not much to this but it covers a few basic elements: Laying out basic UI Handling user input Hooking up events Formatting text     So, lets get started building a similar app for Windows Phone 7 Series! Implementing the UI: UI in Silverlight (and therefore Windows Phone 7) is defined in XAML, which is a declarative XML language also used by WPF on the desktop.  For anyone thats familiar with similar types of markup, its relatively straightforward to learn, but has a lot of power in it once you get it figured out.  Well talk more about that. This UI is very simple.  When I look at this, I note a couple of things: Elements are arranged vertically They are all centered So, lets create our Application and then start with the UI.  Once you have the the VS 2010 Express for Windows Phone tool running, create a new Windows Phone Project, and call it Hello World: Once created, youll see the designer on one side and your XAML on the other: Now, we can create our UI in one of three ways: Use the designer in Visual Studio to drag and drop the components Use the designer in Expression Blend 4 to drag and drop the components Enter the XAML by hand in either of the above Well start with (1), then kind of move to (3) just for instructional value. To develop this UI in the designer: First, delete all of the markup between inside of the Grid element (LayoutRoot).  You should be left with just this XAML for your MainPage.xaml (i shortened all the xmlns declarations below for brevity): 1: <phoneNavigation:PhoneApplicationPage 2: x:Class="HelloWorld.MainPage" 3: xmlns="...[snip]" 4: FontFamily="{StaticResource PhoneFontFamilyNormal}" 5: FontSize="{StaticResource PhoneFontSizeNormal}" 6: Foreground="{StaticResource PhoneForegroundBrush}"> 7:   8: <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}"> 9:   10: </Grid> 11:   12: </phoneNavigation:PhoneApplicationPage> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }   Well be adding XAML at line 9, so thats the important part. Now, Click on the center area of the phone surface Open the Toolbox and double click StackPanel Double click TextBox Double click TextBlock Double click Button That will create the necessary UI elements but they wont be arranged quite right.  Well fix it in a second.    Heres the XAML that we end up with: 1: <StackPanel Height="100" HorizontalAlignment="Left" Margin="10,10,0,0" Name="stackPanel1" VerticalAlignment="Top" Width="200"> 2: <TextBox Height="32" Name="textBox1" Text="TextBox" Width="100" /> 3: <TextBlock Height="23" Name="textBlock1" Text="TextBlock" /> 4: <Button Content="Button" Height="70" Name="button1" Width="160" /> 5: </StackPanel> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } The designer does its best at guessing what we want, but in this case we want things to be a bit simpler. So well just clean it up a bit.  We want the items to be centered and we want them to have a little bit of a margin on either side, so heres what we end up with.  Ive also made it match the values and style from the iPhone app: 1: <StackPanel Margin="10"> 2: <TextBox Name="textBox1" HorizontalAlignment="Stretch" Text="You" TextAlignment="Center"/> 3: <TextBlock Name="textBlock1" HorizontalAlignment="Center" Margin="0,100,0,0" Text="Hello You!" /> 4: <Button Name="button1" HorizontalAlignment="Center" Margin="0,150,0,0" Content="Hello"/> 5: </StackPanel> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Now lets take a look at what weve done there. Line 1: We removed all of the formatting from the StackPanel, except for Margin, as thats all we need.  Since our parent element is a Grid, by default the StackPanel will be sized to fit in that space.  The Margin says that we want to reserve 10 pixels on each side of the StackPanel. Line 2: Weve set the HorizontalAlignment of the TextBox to Stretch, which says that it should fill its parents size horizontally.  We want to do this so the TextBox is always full-width.  We also set TextAlignment to Center, to center the text. Line 3: In contrast to the TextBox above, we dont care how wide the TextBlock is, just so long as it is big enough for its text.  Thatll happen automatically, so we just set its Horizontal alignment to Center.  We also set a Margin above the TextBlock of 100 pixels to bump it down a bit, per the iPhone UI. Line 4: We do the same things here as in Line 3. Heres how the UI looks in the designer: Believe it or not, were almost done! Implementing the App Logic Now, we want the TextBlock to change its text when the Button is clicked.  In the designer, double click the Button to be taken to the Event Handler for the Buttons Click event.  In that event handler, we take the Text property from the TextBox, and format it into a string, then set it into the TextBlock.  Thats it! 1: private void button1_Click(object sender, RoutedEventArgs e) 2: { 3: string name = textBox1.Text; 4:   5: // if there isn't a name set, just use "World" 6: if (String.IsNullOrEmpty(name)) 7: { 8: name = "World"; 9: } 10:   11: // set the value into the TextBlock 12: textBlock1.Text = String.Format("Hello {0}!", name); 13:   14: } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } We use the String.Format() method to handle the formatting for us.    Now all thats left is to test the app in the Windows Phone Emulator and verify it does what we think it does! And it does! Comparing against the iPhone Looking at the iPhone example, there are basically three things that you have to touch as the developer: 1) The UI in the Nib file 2) The app delegate 3) The view controller Counting lines is a bit tricky here, but to try to keep this even, Im going to only count lines of code that I could not have (or would not have) generated with the tooling.  Meaning, Im not counting XAML and Im not counting operations that happen in the Nib file with the XCode designer tool.  So in the case of the above, even though I modified the XAML, I could have done all of those operations using the visual designer tool.  And normally I would have, but the XAML is more instructive (and less steps!).  Im interested in things that I, as the developer have to figure out in code.  Im also not counting lines that just have a curly brace on them, or lines that are generated for me (e.g. method names that are generated for me when I make a connection, etc.) So, by that count, heres what I get from the code listing for the iPhone app found here: HelloWorldAppDelegate.h: 6 HelloWorldAppDelegate.m: 12 MyViewController.h: 8 MyViewController.m: 18 Which gives me a grand total of about 44 lines of code on iPhone.  I really do recommend looking at the iPhone code for a comparison to the above. Now, for the Windows Phone 7 Series application, the only code I typed was in the event handler above Main.Xaml.cs: 4 So a total of 4 lines of code on Windows Phone 7.  And more importantly, the process is just A LOT simpler.  For example, I was surprised that the User Interface Designer in XCode doesnt automatically create instance variables for me and wire them up to the corresponding elements.  I assumed I wouldnt have to write this code myself (and risk getting it wrong!).  I dont need to worry about view controllers or anything.  I just write my code.  This blog post up to this point has covered almost every aspect of this apps development in a few pages.  The iPhone tutorial has 5 top level steps with 2-3 sub sections of each. Now, its worth pointing out that the iPhone development model uses the Model View Controller (MVC) pattern, which is a very flexible and powerful pattern that enforces proper separation of concerns.  But its fairly complex and difficult to understand when you first walk up to it.  Here at Microsoft weve dabbled in MVC a bit, with frameworks like MFC on Visual C++ and with the ASP.NET MVC framework now.  Both are very powerful frameworks.  But one of the reasons weve stayed away from MVC with client UI frameworks is that its difficult to tool.  We havent seen the type of value that beats double click, write code! for the broad set of scenarios. Another thing to think about is how many of those lines of code were focused on my apps functionality?.  Or, the converse of How many lines of code were boilerplate plumbing?  In both examples, the actual number of functional code lines is similar.  I count most of them in MyViewController.m, in the changeGreeting method.  Its about 7 lines of code that do the work of taking the value from the TextBox and putting it into the label.  Versus 4 on the Windows Phone 7 side.  But, unfortunately, on iPhone I still have to write that other 37 lines of code, just to get there. 10% of the code, 1 file instead of 4, its just much simpler. Making Some Tweaks It turns out, I can actually do this application with ZERO  lines of code, if Im willing to change the spec a bit. The data binding functionality in Silverlight is incredibly powerful.  And what I can do is databind the TextBoxs value directly to the TextBlock.  Take some time looking at this XAML below.  Youll see that I have added another nested StackPanel and two more TextBlocks.  Why?  Because thats how I build that string, and the nested StackPanel will lay things out Horizontally for me, as specified by the Orientation property. 1: <StackPanel Margin="10"> 2: <TextBox Name="textBox1" HorizontalAlignment="Stretch" Text="You" TextAlignment="Center"/> 3: <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,100,0,0" > 4: <TextBlock Text="Hello " /> 5: <TextBlock Name="textBlock1" Text="{Binding ElementName=textBox1, Path=Text}" /> 6: <TextBlock Text="!" /> 7: </StackPanel> 8: <Button Name="button1" HorizontalAlignment="Center" Margin="0,150,0,0" Content="Hello" Click="button1_Click" /> 9: </StackPanel> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Now, the real action is there in the bolded TextBlock.Text property: Text="{Binding ElementName=textBox1, Path=Text}" .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } That does all the heavy lifting.  It sets up a databinding between the TextBox.Text property on textBox1 and the TextBlock.Text property on textBlock1. As I change the text of the TextBox, the label updates automatically. In fact, I dont even need the button any more, so I could get rid of that altogether.  And no button means no event handler.  No event handler means no C# code at all.  Did you know that DotNetSlackers also publishes .net articles written by top known .net Authors? We already have over 80 articles in several categories including Silverlight. Take a look: here.

    Read the article

  • Using a 64bit Linux kernel, can't see more than 4GB of RAM in /proc/meminfo

    - by Chris Huang-Leaver
    I'm running my new computer which has 8GB of RAM installed, which is visable from BIOS page, does not show in /proc/meminfo uname -a Linux localhost 3.0.6-gentoo #2 SMP PREEMPT Sat Nov 19 10:45:22 GMT-- x86_64 AMD Phenom(tm) II X4 955 Processor AuthenticAMD GNU/Linux The result of /proc/meminfo is as follows: (thans Andrey) MemTotal: 4021348 kB MemFree: 1440280 kB Buffers: 23696 kB Cached: 1710828 kB SwapCached: 4956 kB Active: 1389904 kB Inactive: 841364 kB Active(anon): 1337812 kB Inactive(anon): 714060 kB Active(file): 52092 kB Inactive(file): 127304 kB Unevictable: 32 kB Mlocked: 32 kB SwapTotal: 8388604 kB SwapFree: 8047900 kB Dirty: 0 kB Writeback: 0 kB AnonPages: 492732 kB Mapped: 47528 kB Shmem: 1555120 kB Slab: 267724 kB SReclaimable: 177464 kB SUnreclaim: 90260 kB KernelStack: 1176 kB PageTables: 12148 kB NFS_Unstable: 0 kB Bounce: 0 kB WritebackTmp: 0 kB CommitLimit: 10399276 kB Committed_AS: 3293896 kB VmallocTotal: 34359738367 kB VmallocUsed: 317008 kB VmallocChunk: 34359398908 kB AnonHugePages: 120832 kB HugePages_Total: 0 HugePages_Free: 0 HugePages_Rsvd: 0 HugePages_Surp: 0 Hugepagesize: 2048 kB DirectMap4k: 23552 kB DirectMap2M: 3088384 kB DirectMap1G: 1048576 kB I have tried using mem=8G as a kernel boot parameter, I read a post about setting HIGHMEM64G to yes, before realising that only applies to 32bit kernels. Trying dmindecode -t memory SMBIOS 2.7 present. Handle 0x0026, DMI type 16, 23 bytes Physical Memory Array Location: System Board Or Motherboard Use: System Memory Error Correction Type: Multi-bit ECC Maximum Capacity: 32 GB Error Information Handle: Not Provided Number Of Devices: 4 Handle 0x0028, DMI type 17, 34 bytes Memory Device Array Handle: 0x0026 Error Information Handle: Not Provided Total Width: 64 bits Data Width: 64 bits Size: 4096 MB Form Factor: DIMM Set: None Locator: DIMM0 Bank Locator: BANK0 Type: <OUT OF SPEC> Type Detail: Synchronous Speed: 1333 MHz Manufacturer: Manufacturer0 Serial Number: SerNum0 Asset Tag: AssetTagNum0 Part Number: Array1_PartNumber0 Rank: Unknown Handle 0x002A, DMI type 17, 34 bytes Memory Device Array Handle: 0x0026 Error Information Handle: Not Provided Total Width: Unknown Data Width: 64 bits Size: No Module Installed Form Factor: DIMM Set: None Locator: DIMM1 Bank Locator: BANK1 Type: Unknown Type Detail: Synchronous Speed: Unknown Manufacturer: Manufacturer1 Serial Number: SerNum1 Asset Tag: AssetTagNum1 Part Number: Array1_PartNumber1 Rank: Unknown Handle 0x002C, DMI type 17, 34 bytes Memory Device Array Handle: 0x0026 Error Information Handle: Not Provided Total Width: 64 bits Data Width: 64 bits Size: 4096 MB Form Factor: DIMM Set: None Locator: DIMM2 Bank Locator: BANK2 Type: <OUT OF SPEC> Type Detail: Synchronous Speed: 1333 MHz Manufacturer: Manufacturer2 Serial Number: SerNum2 Asset Tag: AssetTagNum2 Part Number: Array1_PartNumber2 Rank: Unknown Handle 0x002E, DMI type 17, 34 bytes Memory Device Array Handle: 0x0026 Error Information Handle: Not Provided Total Width: Unknown Data Width: 64 bits Size: No Module Installed Form Factor: DIMM Set: None Locator: DIMM3 Bank Locator: BANK3 Type: Unknown Type Detail: Synchronous Speed: Unknown Manufacturer: Manufacturer3 Serial Number: SerNum3 Asset Tag: AssetTagNum3 Part Number: Array1_PartNumber3 Rank: Unknown

    Read the article

  • Best Processor for MediaSmart Server?

    - by Kent Boogaart
    I'm trying to figure out what the best possible processor is that I can stick in my HP MediaSmart server. I'm clueless when it comes to correlating CPUs to motherboards. I suspect it's the socket type I care about, but I worry that there's more to it. CPU-Z gives me (excerpt): Processors Information ------------------------------------------------------------------------- Processor 1 ID = 0 Number of cores 1 (max 1) Number of threads 1 (max 1) Name AMD Sempron LE-1150 Codename Sparta Specification AMD Sempron(tm) Processor LE-1150 Package Socket AM2 (940) CPUID F.F.1 Extended CPUID F.7F Brand ID 1 Core Stepping DH-G1 Technology 65 nm Core Speed 1000.0 MHz Multiplier x FSB 5.0 x 200.0 MHz HT Link speed 800.0 MHz Stock frequency 2000 MHz Instructions sets MMX (+), 3DNow! (+), SSE, SSE2, SSE3, x86-64 L1 Data cache 64 KBytes, 2-way set associative, 64-byte line size L1 Instruction cache 64 KBytes, 2-way set associative, 64-byte line size L2 cache 256 KBytes, 16-way set associative, 64-byte line size FID/VID Control yes Max FID 10.0x Max VID 1.350 V P-State FID 0x2 - VID 0x12 (5.0x - 1.100 V) P-State FID 0xA - VID 0x0C (9.0x - 1.250 V) P-State FID 0xC - VID 0x0A (10.0x - 1.300 V) K8 Thermal sensor yes K8 Revision ID 6.0 Attached device PCI device at bus 0, device 24, function 0 Attached device PCI device at bus 0, device 24, function 1 Attached device PCI device at bus 0, device 24, function 2 Attached device PCI device at bus 0, device 24, function 3 Chipset ------------------------------------------------------------------------- Northbridge SiS 761GX rev. 02 Southbridge SiS 966 rev. 59 Graphic Interface AGP AGP Revision 3.0 AGP Transfer Rate 8x AGP SBA supported, enabled Memory Type DDR2 Memory Size 2048 MBytes Channels Single Memory Frequency 200.0 MHz (CPU/5) CAS# latency (CL) 5.0 RAS# to CAS# delay (tRCD) 5 RAS# Precharge (tRP) 5 Cycle Time (tRAS) 15 Bank Cycle Time (tRC) 21 Command Rate (CR) 1T DMI ------------------------------------------------------------------------- DMI BIOS vendor Phoenix Technologies, LTD version R03 date 05/08/2008 DMI System Information manufacturer HP product MediaSmart Server version unknown serial CN68330DGH UUID A482007B-B0CC7593-DD11736A-407B7067 DMI Baseboard vendor Wistron model SJD4 revision A.0 serial unknown DMI System Enclosure manufacturer HP chassis type Desktop chassis serial unknown DMI Processor manufacturer AMD model AMD Sempron(tm) Processor LE-1150 clock speed 2000.0 MHz FSB speed 200.0 MHz multiplier 10.0x DMI Memory Controller correction 64-bit ECC Max module size 4096 MBytes DMI Memory Module designation A0 size 2048 MBytes (double bank) DMI Memory Module designation A1 DMI Memory Module designation A2 DMI Memory Module designation A3 DMI Port Connector designation PS/2 Mouse (internal) port type Mouse Port connector PS/2 connector PS/2 DMI Port Connector designation USB0 (external) port type USB DMI Physical Memory Array location Motherboard usage System Memory correction None max capacity 16384 MBytes max# of devices 4 DMI Memory Device designation A0 format DIMM type unknown total width 64 bits data width 64 bits size 2048 MBytes DMI Memory Device designation A1 format DIMM type unknown total width 64 bits data width 64 bits DMI Memory Device designation A2 format DIMM type unknown total width 64 bits data width 64 bits DMI Memory Device designation A3 format DIMM type unknown total width 64 bits data width 64 bits How do I figure out what options I have for an upgrade?

    Read the article

  • Video memory buswidth vs video memory Bandwidth

    - by Mixxiphoid
    My current video card (9600GT) is dying and I'm searching for a new video card. Between acquiring my current one and now, I got a lot more knowledge about hardware and I want to use that to pick my new card. So I decided to not just buy some popular card blindly, but to search for a card able to handle my hardware requirements. I searched the specs at the NVidia site for the GT640 and was confused by the memory section and some questions raised. My current card's memory bus width is 256bit and has 1GB of memory. I checked Google about the importance of bus width. And all the links basically said the same 'The higher the number the more potential simultaneously traffic can be transferred'. This was already clear to me, yet there are currently a lot of new cards which are considered better than my current one with a lower bus width. To go in more detail about my question I copied the memory info from the NVidia site: GT 640 GT640 GDDR5 Memory Specs: Memory Clock 1.8 Gbps 5.0 Gbps Standard Memory Config 2048 MB 1024 MB Memory Interface DDR3 GDDR5 Memory Interface Width 128-bit 64-bit Memory Bandwidth (GB/sec) 28.5 40.0 What puzzled me is that the Memory Bandwidth seems to me the most important part, yet the lower bus width has the higher 'performance'. Is this due to the fact the memory interface is GDDR5 and is therefore able to have a higher memory clock speed (5Gbps)? If I am to buy a new video card, should I check the bus width? Memory clock? Bandwith? Amount of memory? My current card ahs 1GB memory, so I was searching for a 2GB memory card, but now I'm not so sure any more whether that is really 'better'. My main question: To me it seems that memory performance is made up by the combination of bus width and frequency. Is this true? If yes, why are there so many sites telling me I need to get a card with a high bus width? If no, then what IS important when it goes about memory performance on a video card. NOTE: The memory bandwidth is (almost) never displayed on vendor sites. How can I determine which card is better without knowing the bandwith?

    Read the article

  • 403 error after adding javascript to masterpage for sharepoint.

    - by Jeremy
    I am attempting to add highslide-with-html.js from http://highslide.com/ to my masterpage. I am receiving a 403 forbidden error when I use the provided masterpage. I have placed it in C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033. Test javascript files such as pirate.js which consists solely of alert("Arr!"); have loaded from the same directory. I have provided the code for the masterpage. When I do not reference the problem javascript file there is no 403 error. <%@ Master language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register TagPrefix="wssuc" TagName="Welcome" src="~/_controltemplates/Welcome.ascx" %> <%@ Register TagPrefix="wssuc" TagName="DesignModeConsole" src="~/_controltemplates/DesignModeConsole.ascx" %> <%@ Register TagPrefix="PublishingVariations" TagName="VariationsLabelMenu" src="~/_controltemplates/VariationsLabelMenu.ascx" %> <%@ Register Tagprefix="PublishingConsole" TagName="Console" src="~/_controltemplates/PublishingConsole.ascx" %> <%@ Register TagPrefix="PublishingSiteAction" TagName="SiteActionMenu" src="~/_controltemplates/PublishingActionMenu.ascx" %> <html dir="<%$Resources:wss, multipages_direction_dir_value %>" runat="server" __expr-val-dir="ltr"> <head runat="server"> <meta name="GENERATOR" content="Microsoft SharePoint"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Expires" content="0"> <SharePoint:RobotsMetaTag runat="server" __designer:Preview="" __designer:Values="&lt;P N='InDesign' T='False' /&gt;&lt;P N='ID' T='ctl00' /&gt;&lt;P N='Page' ID='1' /&gt;&lt;P N='TemplateControl' ID='2' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;"/> <title id="onetidTitle"> <asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server"/> </title> <Sharepoint:CssLink runat="server" __designer:Preview="&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/Style%20Library/en-US/Core%20Styles/Band.css&quot;/&gt; &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/Style%20Library/en-US/Core%20Styles/controls.css&quot;/&gt; &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/Style%20Library/zz1_blue.css&quot;/&gt; &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/_layouts/1033/styles/core.css&quot;/&gt; " __designer:Values="&lt;P N='InDesign' T='False' /&gt;&lt;P N='ID' T='ctl01' /&gt;&lt;P N='Page' ID='1' /&gt;&lt;P N='TemplateControl' ID='2' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;"/> <!--Styles used for positioning, font and spacing definitions--> <SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/~language/Core Styles/Band.css%>" runat="server" __designer:Preview="&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/Style%20Library/en-US/Core%20Styles/Band.css&quot;/&gt; " __designer:Values="&lt;P N='Name' Bound='True' T='SPUrl:~SiteCollection/Style Library/~language/Core Styles/Band.css' /&gt;&lt;P N='InDesign' T='False' /&gt;&lt;P N='ID' T='ctl02' /&gt;&lt;P N='Page' ID='1' /&gt;&lt;P N='TemplateControl' ID='2' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;"/> <SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/controls.css %>" runat="server" __designer:Preview="&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/Style%20Library/en-US/Core%20Styles/controls.css&quot;/&gt; " __designer:Values="&lt;P N='Name' Bound='True' T='SPUrl:~sitecollection/Style Library/~language/Core Styles/controls.css' /&gt;&lt;P N='InDesign' T='False' /&gt;&lt;P N='ID' T='ctl03' /&gt;&lt;P N='Page' ID='1' /&gt;&lt;P N='TemplateControl' ID='2' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;"/> <SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/zz1_blue.css%>" runat="server" __designer:Preview="&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/Style%20Library/zz1_blue.css&quot;/&gt; " __designer:Values="&lt;P N='Name' Bound='True' T='SPUrl:~SiteCollection/Style Library/zz1_blue.css' /&gt;&lt;P N='InDesign' T='False' /&gt;&lt;P N='ID' T='ctl04' /&gt;&lt;P N='Page' ID='1' /&gt;&lt;P N='TemplateControl' ID='2' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;"/> <SharePoint:ScriptLink name="init.js" runat="server" __designer:Preview="&lt;script src=&quot;/_layouts/1033/init.js?rev=VhAxGc3rkK79RM90tibDzw%3D%3D&quot;&gt;&lt;/script&gt; " __designer:Values="&lt;P N='Name' T='init.js' /&gt;&lt;P N='InDesign' T='False' /&gt;&lt;P N='ID' T='ctl05' /&gt;&lt;P N='Page' ID='1' /&gt;&lt;P N='TemplateControl' ID='2' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;"/> <SharePoint:ScriptLink Name="highslide-with-html.js" runat="server" __designer:Error="Access to the path 'C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\Template\layouts\1033\highslide-with-html.js' is denied."/> <!--Placeholder for additional overrides--> <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server"/> </head> <body class="body" onload="javascript:_spBodyOnLoadWrapper();"> <WebPartPages:SPWebPartManager runat="server"/> <form runat="server" onsubmit="return _spFormOnSubmitWrapper();"> <table cellpadding="0" cellspacing="0" class="master"> <tr> <td height="100%" class="shadowLeft"> <div class="spacer"> </div> </td> <td valign="top"> <table cellpadding="0" cellspacing="0" width="100%" class="masterContent"> <tr style="height:0px"><td> <wssuc:DesignModeConsole id="IdDesignModeConsole" runat="server" __designer:Preview="&lt;span __designer:NonVisual=&quot;true&quot;&gt;[ DesignModeConsoleContainer &quot;DesignModeContainer&quot; ]&lt;/span&gt; " __designer:Values="&lt;P N='ID' ID='1' T='IdDesignModeConsole' /&gt;&lt;P N='TemplateControl' R='0' /&gt;"/></td></tr> <tr> <td colspan="2" class="authoringRegion"> <span class="siteActionMenu"> <PublishingSiteAction:SiteActionMenu runat="server" __designer:Preview=" &lt;!-- Begin Action Menu Markup --&gt; &lt;table height=100% class=&quot;ms-siteaction&quot; cellpadding=0 cellspacing=0&gt; &lt;tr&gt; &lt;td class=&quot;ms-siteactionsmenu&quot; id=&quot;siteactiontd&quot;&gt; &lt;span style=&quot;display:none&quot;&gt;&lt;menu type='ServerMenu' id=&quot;zz1_SiteActionsMenuMain&quot; largeIconMode=&quot;true&quot;&gt;&lt;ie:menuitem id=&quot;zz2_MenuItem_Create&quot; type=&quot;option&quot; iconSrc=&quot;/_layouts/images/Actionscreate.gif&quot; onMenuClick=&quot;window.location = '/_layouts/create.aspx';&quot; menuGroupId=&quot;100&quot;&gt;&lt;/ie:menuitem&gt;&lt;ie:menuitem id=&quot;zz3_MenuItem_Settings&quot; type=&quot;option&quot; iconSrc=&quot;/_layouts/images/ActionsSettings.gif&quot; onMenuClick=&quot;window.location = '/_layouts/settings.aspx';&quot; menuGroupId=&quot;100&quot;&gt;&lt;/ie:menuitem&gt;&lt;/menu&gt;&lt;/span&gt;&lt;div&gt;&lt;div&gt;&lt;span title=&quot;Open Menu&quot;&gt;&lt;div id=&quot;zz4_SiteActionsMenu_t&quot; class=&quot;&quot; onmouseover=&quot;MMU_PopMenuIfShowing(this);MMU_EcbTableMouseOverOut(this, true)&quot; hoverActive=&quot;ms-siteactionsmenuhover&quot; hoverInactive=&quot;&quot; onclick=&quot; MMU_Open(byid(''), MMU_GetMenuFromClientId('zz4_SiteActionsMenu'),event,false, null, 0);&quot; foa=&quot;MMU_GetMenuFromClientId('zz4_SiteActionsMenu')&quot; oncontextmenu=&quot;this.click(); return false;&quot; nowrap=&quot;nowrap&quot;&gt;&lt;a id=&quot;zz4_SiteActionsMenu&quot; accesskey=&quot;/&quot; href=&quot;#&quot; onclick=&quot;javascript:return false;&quot; style=&quot;cursor:pointer;white-space:nowrap;&quot; onfocus=&quot;MMU_EcbLinkOnFocusBlur(byid(''), this, true);&quot; onkeydown=&quot;MMU_EcbLinkOnKeyDown(byid(''), MMU_GetMenuFromClientId('zz4_SiteActionsMenu'), event);&quot; onclick=&quot; MMU_Open(byid(''), MMU_GetMenuFromClientId('zz4_SiteActionsMenu'),event,false, null, 0);&quot; oncontextmenu=&quot;this.click(); return false;&quot; menuTokenValues=&quot;MENUCLIENTID=zz4_SiteActionsMenu,TEMPLATECLIENTID=zz1_SiteActionsMenuMain&quot; serverclientid=&quot;zz4_SiteActionsMenu&quot;&gt;Site Actions&lt;img src=&quot;/_layouts/images/blank.gif&quot; border=&quot;0&quot; alt=&quot;Use SHIFT+ENTER to open the menu (new window).&quot;/&gt;&lt;/a&gt;&lt;img align=&quot;absbottom&quot; src=&quot;/_layouts/images/whitearrow.gif&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;!-- End Action Menu Markup --&gt; " __designer:Values="&lt;P N='TemplateControl' R='0' /&gt;"/> </span> <div class="sharepointLogin"> <!--Authentication for Authors only--> <table cellpadding="0" cellspacing="0" > <tr> <td class="ms-globallinks"> <SharePoint:DelegateControl ControlId="GlobalSiteLink1" Scope="Farm" runat="server" __designer:Preview="&lt;span style='padding-left:3px'&gt;&lt;/span&gt; &lt;a id=&quot;ctl00_ctl09_hlMySite&quot; href=&quot;http://litwaredemo:80/MySite/_layouts/MySite.aspx&quot;&gt;My Site&lt;/a&gt; &lt;span style='padding-left:4px;padding-right:3px'&gt;|&lt;/span&gt; " __designer:Values="&lt;P N='ControlId' T='GlobalSiteLink1' /&gt;&lt;P N='Scope' T='Farm' /&gt;&lt;P N='ID' T='ctl08' /&gt;&lt;P N='Page' ID='1' /&gt;&lt;P N='TemplateControl' ID='2' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;"/></td> <td class="ms-globallinks"> <SharePoint:DelegateControl ControlId="GlobalSiteLink2" Scope="Farm" runat="server" __designer:Preview="&lt;span id=&quot;ctl00_ctl11_MyLinksMenu&quot;&gt;&lt;span style=&quot;display:none&quot;&gt;&lt;menu type='ServerMenu' id=&quot;ctl00_ctl11_MyLinksMenuMenuTemplate&quot; largeIconMode=&quot;true&quot;&gt;&lt;/menu&gt;&lt;/span&gt;&lt;span title=&quot;Open Menu&quot;&gt;&lt;span id=&quot;ctl00_ctl11_MyLinksMenuMenu_t&quot; class=&quot;ms-SPLink ms-hovercellinactive&quot; onmouseover=&quot;MMU_PopMenuIfShowing(this);MMU_EcbTableMouseOverOut(this, true)&quot; hoverActive=&quot;ms-SPLink ms-hovercellactive&quot; hoverInactive=&quot;ms-SPLink ms-hovercellinactive&quot; onclick=&quot;javascript:FetchCallbackMenuItems(&amp;#39;ctl00_ctl11_MyLinksMenuMenuTemplate&amp;#39;); MMU_Open(byid('ctl00_ctl11_MyLinksMenuMenuTemplate'), MMU_GetMenuFromClientId('ctl00_ctl11_MyLinksMenuMenu'),event,true, null, 0);&quot; foa=&quot;MMU_GetMenuFromClientId('ctl00_ctl11_MyLinksMenuMenu')&quot; oncontextmenu=&quot;this.click(); return false;&quot; nowrap=&quot;nowrap&quot;&gt;&lt;a id=&quot;ctl00_ctl11_MyLinksMenuMenu&quot; accesskey=&quot;M&quot; href=&quot;#&quot; onclick=&quot;javascript:return false;&quot; style=&quot;cursor:pointer;white-space:nowrap;&quot; onfocus=&quot;MMU_EcbLinkOnFocusBlur(byid('ctl00_ctl11_MyLinksMenuMenuTemplate'), this, true);&quot; onkeydown=&quot;MMU_EcbLinkOnKeyDown(byid('ctl00_ctl11_MyLinksMenuMenuTemplate'), MMU_GetMenuFromClientId('ctl00_ctl11_MyLinksMenuMenu'), event);&quot; onclick=&quot;javascript:FetchCallbackMenuItems(&amp;#39;ctl00_ctl11_MyLinksMenuMenuTemplate&amp;#39;); MMU_Open(byid('ctl00_ctl11_MyLinksMenuMenuTemplate'), MMU_GetMenuFromClientId('ctl00_ctl11_MyLinksMenuMenu'),event,true, null, 0);&quot; oncontextmenu=&quot;this.click(); return false;&quot; menuTokenValues=&quot;MENUCLIENTID=ctl00_ctl11_MyLinksMenuMenu,TEMPLATECLIENTID=ctl00_ctl11_MyLinksMenuMenuTemplate&quot; serverclientid=&quot;ctl00_ctl11_MyLinksMenuMenu&quot;&gt;My Links&lt;img src=&quot;/_layouts/images/blank.gif&quot; border=&quot;0&quot; alt=&quot;Use SHIFT+ENTER to open the menu (new window).&quot;/&gt;&lt;/a&gt;&lt;img align=&quot;absbottom&quot; src=&quot;/_layouts/images/menudark.gif&quot; alt=&quot;&quot; /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;|" __designer:Values="&lt;P N='ControlId' T='GlobalSiteLink2' /&gt;&lt;P N='Scope' T='Farm' /&gt;&lt;P N='ID' T='ctl10' /&gt;&lt;P N='Page' ID='1' /&gt;&lt;P N='TemplateControl' ID='2' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;"/></td> <td class="ms-globallinks"> <wssuc:Welcome id="explitLogout" runat="server" __designer:Preview=" &lt;span style=&quot;display:none&quot;&gt;&lt;menu type='ServerMenu' id=&quot;zz5_ID_PersonalActionMenu&quot; largeIconMode=&quot;true&quot;&gt;&lt;ie:menuitem id=&quot;zz6_ID_PersonalInformation&quot; type=&quot;option&quot; iconSrc=&quot;/_layouts/images/menuprofile.gif&quot; onMenuClick=&quot;javascript:GoToPage('\u002f_layouts\u002fuserdisp.aspx?Force=True\u0026ID=' + _spUserId);return false;&quot; menuGroupId=&quot;100&quot;&gt;&lt;/ie:menuitem&gt;&lt;ie:menuitem id=&quot;zz7_ID_LoginAsDifferentUser&quot; type=&quot;option&quot; onMenuClick=&quot;javascript:LoginAsAnother('\u002f_layouts\u002fAccessDenied.aspx?loginasanotheruser=true', 0)&quot; menuGroupId=&quot;200&quot;&gt;&lt;/ie:menuitem&gt;&lt;ie:menuitem id=&quot;zz8_ID_RequestAccess&quot; type=&quot;option&quot; onMenuClick=&quot;window.location = '/_layouts/reqacc.aspx?type=list&amp;amp;name=%7B36F0105B%2D0F8E%2D4A22%2DBE90%2D716A51E97B5D%7D';&quot; menuGroupId=&quot;200&quot;&gt;&lt;/ie:menuitem&gt;&lt;ie:menuitem id=&quot;zz9_ID_Logout&quot; type=&quot;option&quot; onMenuClick=&quot;window.location = '/_layouts/SignOut.aspx';&quot; menuGroupId=&quot;200&quot;&gt;&lt;/ie:menuitem&gt;&lt;/menu&gt;&lt;/span&gt;&lt;span title=&quot;Open Menu&quot;&gt;&lt;div id=&quot;zz10_Menu_t&quot; class=&quot;ms-SPLink ms-SpLinkButtonInActive&quot; onmouseover=&quot;MMU_PopMenuIfShowing(this);MMU_EcbTableMouseOverOut(this, true)&quot; hoverActive=&quot;ms-SPLink ms-SpLinkButtonActive&quot; hoverInactive=&quot;ms-SPLink ms-SpLinkButtonInActive&quot; onclick=&quot; MMU_Open(byid(''), MMU_GetMenuFromClientId('zz10_Menu'),event,false, null, 0);&quot; foa=&quot;MMU_GetMenuFromClientId('zz10_Menu')&quot; oncontextmenu=&quot;this.click(); return false;&quot; nowrap=&quot;nowrap&quot;&gt;&lt;a id=&quot;zz10_Menu&quot; accesskey=&quot;L&quot; href=&quot;#&quot; onclick=&quot;javascript:return false;&quot; style=&quot;cursor:pointer;white-space:nowrap;&quot; onfocus=&quot;MMU_EcbLinkOnFocusBlur(byid(''), this, true);&quot; onkeydown=&quot;MMU_EcbLinkOnKeyDown(byid(''), MMU_GetMenuFromClientId('zz10_Menu'), event);&quot; onclick=&quot; MMU_Open(byid(''), MMU_GetMenuFromClientId('zz10_Menu'),event,false, null, 0);&quot; oncontextmenu=&quot;this.click(); return false;&quot; menuTokenValues=&quot;MENUCLIENTID=zz10_Menu,TEMPLATECLIENTID=zz5_ID_PersonalActionMenu&quot; serverclientid=&quot;zz10_Menu&quot;&gt;Welcome LitwareInc Administrator&lt;img src=&quot;/_layouts/images/blank.gif&quot; border=&quot;0&quot; alt=&quot;Use SHIFT+ENTER to open the menu (new window).&quot;/&gt;&lt;/a&gt;&lt;img align=&quot;absbottom&quot; src=&quot;/_layouts/images/menudark.gif&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;&lt;/span&gt;&lt;script type=&quot;text/javascript&quot; language=&quot;javascript&quot;&gt;var _spUserId=1;&lt;/script&gt; &lt;a id=&quot;explitLogout_ExplicitLogin&quot; Href=&quot;_controltemplates/http://litwaredemo/_layouts/Authenticate.aspx&quot; style=&quot;display:none&quot;&gt;Sign In&lt;/a&gt; " __designer:Values="&lt;P N='ID' ID='1' T='explitLogout' /&gt;&lt;P N='TemplateControl' R='0' /&gt;"/></td> </tr> </table> </div> <div class="console"> <PublishingConsole:Console runat="server" __designer:Preview=" &lt;!-- Console --&gt; &lt;span id=&quot;ctl00_publishingContext1&quot;&gt;&lt;/span&gt; &lt;script type=&quot;text/javascript&quot; language=&quot;javascript&quot;&gt;if (document.getElementById('mpdmconsole')) { ShowConsoleBlockPaddingWithOverhang('mpLeftBackPadding', 'mpRightBackPadding', 'masterPageLeftOverhang', 'masterPageRightOverhang'); } &lt;/script&gt; &lt;!-- Console --&gt; " __designer:Values="&lt;P N='TemplateControl' R='0' /&gt;"/> </div> </td> </tr> <tr> <td colspan="2" > <table cellpadding="0" cellspacing="0" width="100%"> <tr> <td colspan="4" class="topArea"> <SharePoint:AspMenu ID="logoLinkId" runat="server" DataSourceID="SiteMapDataSourceRoot" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="0" AccessKey="1" CssClass="logo" __designer:Preview="&lt;table id=&quot;zz12_logoLinkId&quot; class=&quot;logo&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot;&gt; &lt;tr id=&quot;zz12_logoLinkIdn0&quot;&gt; &lt;td&gt;&lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; width=&quot;100%&quot;&gt; &lt;tr&gt; &lt;td style=&quot;white-space:nowrap;width:100%;&quot;&gt;&lt;a Href=&quot;/Pages/Default.aspx&quot; accesskey=&quot;1&quot; style=&quot;text-decoration:none;&quot;&gt;Home&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;" __designer:Values="&lt;P N='ID' T='logoLinkId' /&gt;&lt;P N='MaximumDynamicDisplayLevels' T='0' /&gt;&lt;P N='DataSourceID' T='SiteMapDataSourceRoot' /&gt;&lt;P N='AccessKey' T='1' /&gt;&lt;P N='ControlStyle'&gt;&lt;P N='CssClass' ID='1' T='logo' /&gt;&lt;P N='Font' ID='2' /&gt;&lt;P N='IsEmpty' T='False' /&gt;&lt;/P&gt;&lt;P N='CssClass' R='1' /&gt;&lt;P N='Font' R='2' /&gt;&lt;P N='Page' ID='3' /&gt;&lt;P N='TemplateControl' ID='4' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;" __designer:Templates="&lt;Group Name=&quot;Item Templates&quot;&gt;&lt;Template Name=&quot;StaticItemTemplate&quot; Flags=&quot;D&quot; Content=&quot;&quot; /&gt;&lt;Template Name=&quot;DynamicItemTemplate&quot; Flags=&quot;D&quot; Content=&quot;&quot; /&gt;&lt;/Group&gt;"/> <PublishingNavigation:PortalSiteMapDataSource ID="SiteMapDataSourceRoot" Runat="server" SiteMapProvider="CombinedNavSiteMapProvider" EnableViewState="true" StartFromCurrentNode="true" StartingNodeOffset="0" ShowStartingNode="true" __designer:Preview="&lt;table cellpadding=4 cellspacing=0 style=&quot;font:messagebox;color:buttontext;background-color:buttonface;border: solid 1px;border-top-color:buttonhighlight;border-left-color:buttonhighlight;border-bottom-color:buttonshadow;border-right-color:buttonshadow&quot;&gt; &lt;tr&gt;&lt;td nowrap&gt;&lt;span style=&quot;font-weight:bold&quot;&gt;PortalSiteMapDataSource&lt;/span&gt; - SiteMapDataSourceRoot&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt;" __designer:Values="&lt;P N='ID' T='SiteMapDataSourceRoot' /&gt;&lt;P N='SiteMapProvider' T='CombinedNavSiteMapProvider' /&gt;&lt;P N='StartFromCurrentNode' T='True' /&gt;&lt;P N='Page' ID='1' /&gt;&lt;P N='TemplateControl' ID='2' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;"/> <div class="topLinkBar"> <div class="topLink"> <PublishingVariations:VariationsLabelMenu id="labelmenu1" runat="server" __designer:Preview="&lt;span __designer:NonVisual=&quot;true&quot;&gt;&lt;table cellpadding=4 cellspacing=0 style=&quot;font:messagebox;color:buttontext;background-color:buttonface;border: solid 1px;border-top-color:buttonhighlight;border-left-color:buttonhighlight;border-bottom-color:buttonshadow;border-right-color:buttonshadow&quot;&gt; &lt;tr&gt;&lt;td nowrap&gt;&lt;span style=&quot;font-weight:bold&quot;&gt;VariationDataSource&lt;/span&gt; - LabelMenuDataSource&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt;&lt;/span&gt; " __designer:Values="&lt;P N='ID' ID='1' T='labelmenu1' /&gt;&lt;P N='TemplateControl' R='0' /&gt;"/> </div> </div> </td> </tr> <tr class="topNavContainer"> <td class="topNavRoundLeft"> <div class="glassSpacerLeft" /> </td> <td valign="top" width="100%"> <SharePoint:AspMenu ID="GlobalNav" Runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="1" StaticSubMenuIndent="0" DynamicHorizontalOffset="0" DynamicVerticalOffset="-8" StaticEnableDefaultPopOutImage="false" ItemWrap="false" SkipLinkText="<%$Resources:cms,masterpages_skiplinktext%>" CssClass="topNav" __designer:Preview="&lt;table id=&quot;zz13_GlobalNav&quot; class=&quot;topNav&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot;&gt; &lt;tr&gt; &lt;td title=&quot;Document Center site&quot; id=&quot;zz13_GlobalNavn0&quot;&gt;&lt;table class=&quot;topNavItem&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; width=&quot;100%&quot;&gt; &lt;tr&gt; &lt;td style=&quot;white-space:nowrap;&quot;&gt;&lt;a class=&quot;topNavItem&quot; Href=&quot;/Docs&quot; style=&quot;text-decoration:none;border-style:none;&quot;&gt;Document Center&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;/td&gt;&lt;td style=&quot;width:0px;&quot;&gt;&lt;/td&gt;&lt;td style=&quot;width:0px;&quot;&gt;&lt;/td&gt;&lt;td title=&quot;Company News Home&quot; id=&quot;zz13_GlobalNavn1&quot;&gt;&lt;table class=&quot;topNavItem&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; width=&quot;100%&quot;&gt; &lt;tr&gt; &lt;td style=&quot;white-space:nowrap;&quot;&gt;&lt;a class=&quot;topNavItem&quot; Href=&quot;/News/Pages/Default.aspx&quot; style=&quot;text-decoration:none;border-style:none;&quot;&gt;News&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;/td&gt;&lt;td style=&quot;width:0px;&quot;&gt;&lt;/td&gt;&lt;td style=&quot;width:0px;&quot;&gt;&lt;/td&gt;&lt;td title=&quot;Report Center&quot; id=&quot;zz13_GlobalNavn2&quot;&gt;&lt;table class=&quot;topNavItem&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; width=&quot;100%&quot;&gt; &lt;tr&gt; &lt;td style=&quot;white-space:nowrap;&quot;&gt;&lt;a class=&quot;topNavItem&quot; Href=&quot;/Reports/Pages/Default.aspx&quot; style=&quot;text-decoration:none;border-style:none;&quot;&gt;Reports&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;/td&gt;&lt;td style=&quot;width:0px;&quot;&gt;&lt;/td&gt;&lt;td style=&quot;width:0px;&quot;&gt;&lt;/td&gt;&lt;td title=&quot;The Search Center displays search results&quot; id=&quot;zz13_GlobalNavn3&quot;&gt;&lt;table class=&quot;topNavItem&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; width=&quot;100%&quot;&gt; &lt;tr&gt; &lt;td style=&quot;white-space:nowrap;&quot;&gt;&lt;a class=&quot;topNavItem&quot; Href=&quot;/SearchCenter/Pages/default.aspx&quot; style=&quot;text-decoration:none;border-style:none;&quot;&gt;Search&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;/td&gt;&lt;td style=&quot;width:0px;&quot;&gt;&lt;/td&gt;&lt;td style=&quot;width:0px;&quot;&gt;&lt;/td&gt;&lt;td title=&quot;Site Directory web&quot; id=&quot;zz13_GlobalNavn4&quot;&gt;&lt;table class=&quot;topNavItem&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; width=&quot;100%&quot;&gt; &lt;tr&gt; &lt;td style=&quot;white-space:nowrap;&quot;&gt;&lt;a class=&quot;topNavItem&quot; Href=&quot;/SiteDirectory/Pages/category.aspx&quot; style=&quot;text-decoration:none;border-style:none;&quot;&gt;Sites&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;/td&gt;&lt;td style=&quot;width:0px;&quot;&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;" __designer:Values="&lt;P N='ID' T='GlobalNav' /&gt;&lt;P N='DynamicHoverStyle'&gt;&lt;P N='CssClass' T='topNavFlyOutsHover' /&gt;&lt;P N='IsEmpty' T='False' /&gt;&lt;/P&gt;&lt;P N='DynamicMenuItemStyle'&gt;&lt;P N='CssClass' T='topNavFlyOutsItem' /&gt;&lt;P N='IsEmpty' T='False' /&gt;&lt;/P&gt;&lt;P N='DynamicMenuStyle'&gt;&lt;P N='CssClass' T='topNavFlyOuts' /&gt;&lt;P N='IsEmpty' T='False' /&gt;&lt;/P&gt;&lt;P N='DynamicVerticalOffset' T='-8' /&gt;&lt;P N='MaximumDynamicDisplayLevels' T='1' /&gt;&lt;P N='Orientation' E='0' /&gt;&lt;P N='SkipLinkText' Bound='True' T='Resources:cms,masterpages_skiplinktext' /&gt;&lt;P N='StaticEnableDefaultPopOutImage' T='False' /&gt;&lt;P N='StaticHoverStyle'&gt;&lt;P N='CssClass' T='topNavHover' /&gt;&lt;P N='IsEmpty' T='False' /&gt;&lt;/P&gt;&lt;P N='StaticMenuItemStyle'&gt;&lt;P N='CssClass' T='topNavItem' /&gt;&lt;P N='ItemSpacing' T='0px' /&gt;&lt;P N='IsEmpty' T='False' /&gt;&lt;/P&gt;&lt;P N='StaticSelectedStyle'&gt;&lt;P N='CssClass' T='topNavSelected' /&gt;&lt;P N='ItemSpacing' T='0px' /&gt;&lt;P N='IsEmpty' T='False' /&gt;&lt;/P&gt;&lt;P N='StaticSubMenuIndent' T='0px' /&gt;&lt;P N='DataSourceID' T='SiteMapDataSource1' /&gt;&lt;P N='ControlStyle'&gt;&lt;P N='CssClass' ID='1' T='topNav' /&gt;&lt;P N='Font' ID='2' /&gt;&lt;P N='IsEmpty' T='False' /&gt;&lt;/P&gt;&lt;P N='CssClass' R='1' /&gt;&lt;P N='Font' R='2' /&gt;&lt;P N='Page' ID='3' /&gt;&lt;P N='TemplateControl' ID='4' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;" __designer:Templates="&lt;Group Name=&quot;Item Templates&quot;&gt;&lt;Template Name=&quot;StaticItemTemplate&quot; Flags=&quot;D&quot; Content=&quot;&quot; /&gt;&lt;Template Name=&quot;DynamicItemTemplate&quot; Flags=&quot;D&quot; Content=&quot;&quot; /&gt;&lt;/Group&gt;"> <StaticMenuItemStyle CssClass="topNavItem" ItemSpacing="0"/> <StaticSelectedStyle CssClass="topNavSelected" ItemSpacing="0"/> <StaticHoverStyle CssClass="topNavHover"/> <DynamicMenuStyle CssClass="topNavFlyOuts" /> <DynamicMenuItemStyle CssClass="topNavFlyOutsItem" /> <DynamicHoverStyle CssClass="topNavFlyOutsHover"/> </SharePoint:AspMenu> <PublishingNavigation:PortalSiteMapDataSource ID="siteMapDataSource1" Runat="server" SiteMapProvider="CombinedNavSiteMapProvider" EnableViewState="true" StartFromCurrentNode="true" StartingNodeOffset="0" ShowStartingNode="false" TreatStartingNodeAsCurrent="true" TrimNonCurrentTypes="Heading" __designer:Preview="&lt;table cellpadding=4 cellspacing=0 style=&quot;font:messagebox;color:buttontext;background-color:buttonface;border: solid 1px;border-top-color:buttonhighlight;border-left-color:buttonhighlight;border-bottom-color:buttonshadow;border-right-color:buttonshadow&quot;&gt; &lt;tr&gt;&lt;td nowrap&gt;&lt;span style=&quot;font-weight:bold&quot;&gt;PortalSiteMapDataSource&lt;/span&gt; - siteMapDataSource1&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt;" __designer:Values="&lt;P N='ID' T='siteMapDataSource1' /&gt;&lt;P N='SiteMapProvider' T='CombinedNavSiteMapProvider' /&gt;&lt;P N='StartFromCurrentNode' T='True' /&gt;&lt;P N='ShowStartingNode' T='False' /&gt;&lt;P N='TreatStartingNodeAsCurrent' T='True' /&gt;&lt;P N='TrimNonCurrentTypes' E='32' /&gt;&lt;P N='Page' ID='1' /&gt;&lt;P N='TemplateControl' ID='2' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;"/> </td> <td> <div class="search"> <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server"> <SPSWC:SearchBoxEx id="SearchBox" RegisterStyles="false" TextBeforeDropDown="" TextBeforeTextBox="<%$Resources:cms,masterpages_searchbox_label%>" TextBoxWidth="100" GoImageUrl="<% $SPUrl:~sitecollection/Style Library/Images/Search_Arrow.jpg %>" GoImageUrlRTL="<% $SPUrl:~sitecollection/Style Library/Images/Search_Arrow_RTL.jpg %>" UseSiteDefaults="true" DropDownMode = "HideScopeDD" SuppressWebPartChrome="true" runat="server" WebPart="true" __WebPartId="{7DECDCCA-FDA0-4739-8F0E-7B8DE48F0E0D}" __Preview="&lt;table TOPLEVEL border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;&gt; &lt;tr&gt; &lt;td&gt;&lt;table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;&gt; &lt;tr class=&quot;ms-WPHeader&quot;&gt; &lt;td title=&quot;&quot; id=&quot;WebPart

    Read the article

  • Div positioning problem related to Relative and Absolute positioning

    - by abszero
    Hello everyone. The problem I am running into is related to a footer I have absolutely positioned at the bottom of the page. Everything is fine until the copy on the page begins to extend further down the page which then causes my content wells to extend down, behind, the footer. Is there anyway I can force my content wells to 'push' the footer down the page? Here is the relevant html: <div id="page"> <div id="page_container"> <div id="header"></div> <div id="nav"></div> <div id="main_content"> <div id="left_column"></div> <div id="right_column"></div> </div> </div> </div> <div id="footer"> <div id="footer_container"> </div> </div> And the relevant CSS #page {width:100%;margin:0 0 10px 0; text-align:center;} #page_container {width:743px;height:auto !important;height:100%;margin:0 auto;min-height:100%;text-align:center;overflow:hidden;border:2px solid #000;} #header {width:100%;background:url('../images/header.jpg');height:87px;clear:both; margin-top: -2px;} #nav {width:100%;height:29px;float:left; text-align:left; border-bottom: solid 2px #000; border-top: solid 2px #000;} #main_content {width:100%;float:left; text-align:left; background-color:#fff; border-bottom: solid 2px #000; border-left: solid 2px #000; border-right: solid 2px #000;} #footer {width:100%; position:absolute;margin-top:10px; bottom: 0; background:url('../images/footer_bg.jpg');height:133px;text-align:center;} #footer_container{width:746px;height:133px; text-align:left; display:inline-block;} #left_column {width:230px; float:left; text-align:left; background-color:#fff; margin-top:5px;} #right_column {width:490px; float:right; text-align:left; background-color:#fff;margin-top:5px; padding:10px;} Thanks for any help you might be able to give!

    Read the article

  • the data can't display in the form....

    - by shimaTun
    i wrote code to view data after user fill the form...but the data can't display.... this the code : <?php include "connectioncomplaint.php"; $userid = $_GET['userid']; $secname = $_GET['secname']; $subject = $_GET['subject']; $comment = $_GET['comment']; //Tarik data dari sini $queryDetail = " SELECT * FROM campuscomplaint " . " WHERE userid = '". $userid . "' AND secname = '". secname . "' "; $resultDetail = mysql_query($queryDetail); $detail = mysql_fetch_array($resultDetail); ?> and this code for form: <tr> <td height="400" colspan="7" bgcolor="#FFFFFF"> <table width="67%" align="center" border="1" bordercolor="#ABD519" cellpadding="2" cellspacing="2"> <tr bordercolor="#0000FF" bgcolor="#000033"> <td colspan="2" align="center" valign="top" bgcolor="#ABD519"> --- Complaint Detail --- &nbsp;</td> </tr> <tr bordercolor="#FFFFFF"> <td width="40%" class="register">User ID:</td> <td width="62%" class="register"><?php echo $detail['userid']; ?></td></tr> <tr bordercolor="#FFFFFF"> <td width="40%" class="register">Section Name:</td> <td width="62%" class="register"><?php echo $detail['secname']; ?></td></tr> <tr> <td width="40%" bordercolor="#FFFFFF" bgcolor="#FFFFFF" class="register">Subject:</td> <td width="62%" bordercolor="#FFFFFF" bgcolor="#FFFFFF" class="register"><?php echo $detail['subject']; ?></td></tr> <tr> <td width="40%" bordercolor="#FFFFFF" bgcolor="#FFFFFF" class="register">Comment:</td> <td width="62%" bordercolor="#FFFFFF" bgcolor="#FFFFFF" class="register"><?php echo $detail['comment']; ?></td></tr> <tr bordercolor="#0000FF" bgcolor="#ABD519"> <td colspan="2" align="center" valign="top">&nbsp;</td> </tr> </table> how to view data from dbase?.... help me...

    Read the article

  • Div not floating left

    - by Davey
    Can't seem to get this div to move to the left. Using wordpress. I tried a lot of things but am at a loss. Here is the css for the div: #portfolio li img { position: absolute; float: left; margin: 34px 50px 0 0; width: 942px; } Here is the header.php: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Design by Davey Whitney [email protected] --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" /> <link rel="stylesheet" type="text/css" href="wp-content/themes/zenlite/layout.css" media="screen" /> <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/print.css" media="print" /> <link rel="stylesheet" type="text/css" href="wp-content/themes/zenlite/color.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.kwicks-1.5.1.js"></script> <script type="text/javascript" src="js/jquery.innerfade.js"></script> <script type="text/javascript" src="js/custom.js"></script> <title> Wildfire </title> <script type="text/javascript" src="http://wfithaca.com/js/jquery.lavalamp.js"></script> <script type="text/javascript" src="http://wfithaca.com/js/jquery.easing.1.1.js"></script> <script type="text/javascript" src="http://wfithaca.com/js/jquery.cycle.all.min.js"></script> <script type="text/javascript"> function my_kwicks(){ $('.kwicks').kwicks({ duration: 300, max: 200, spacing: 0 }); } $(document).ready(function(){ my_kwicks(); }); </script> <script type="text/javascript"> $(document).ready( function(){ $('ul#portfolio').innerfade({ speed: 1000, timeout: 5000, type: 'sequence', }); }); </script> </script> <script type="text/javascript"> $(document).ready(function(){ $('li.headlink').hover( function() { $('ul', this).css('display', 'block'); }, function() { $('ul', this).css('display', 'none'); }); }); </script> </head> <body> <div id="wrapper"> <div id="header"> <ul id="portfolio"> <li> <img src="http://wfithaca.com/images/banner1.png" /> </li> <li> <img src="http://wfithaca.com/images/banner1.png" /> </li> <li> <img src="http://wfithaca.com/images/banner1.png" /> </li> </ul> </div> <div id="navigation"> <div id="kwickbar"> <ul class="kwicks"> <li id="kwick1"><a href="#">Home</a></li> <li id="kwick2"><a href="#">Menu</a></li> <li id="kwick3"><a href="#">Events</a></li> <li id="kwick4"><a href="#">Friends</a></li> <li id="kwick5"><a href="#">Contact</a></li> </ul> </div> </div> Here is the stylesheet: html,body { font-family:Tahoma, Verdana,Arial, Helvetica, sans-serif; font-size:100%; padding:0; color:#fff; border-style:none; } a { text-decoration:none; } a:hover,a:active,a:focus { text-decoration:none; } ul li { list-style-type:none; } ul.dbem_events_list a:link {color: #A32725; text-decoration: underline; } ul.dbem_events_list a:visited {color: #A32725; text-decoration: underline; } ul.dbem_events_list a:hover {color: #ffffff; text-decoration: none; } ul.dbem_events_list{text-decoration:none; list-style-type:none;} ul li ul li { list-style-type:none; } ul li ul li ul li { list-style-type: none; } q:before, q:after { content:""; } #wrapper { width:986px; margin: 0 auto; } #header { background-image:url('images/headframe.png'); width:986px; height:271px; } #kwickbar { padding: 25px 0 0 25px; } #navigation { width:984px; height: 100px; background-color: #000000; text-decoration:none; margin-left:1px; } .update-post { float:left; width:100px; } #content { float:left; height:100%; width:984px; background-color: #000000; text-decoration:none; margin-left:1px; } #postcontent{ height:100%; width:100%; } #content .post { float:left; width:90px; } #content .page,#content .attachment,.postcontent { color:#fff; width:720px; margin-top:15px; margin-left:30px; float:left; text-decoration:none; } .photo { width: 250px; height:700px; background-color:#000000; margin:0 0 0 880px; } .slideshow { height: 232px; width: 232px; margin:0 0 0 880px; } .slideshow img { border: 5px solid #000; } .post-title { margin:0; padding:0; } .post-title a { text-decoration:none; } .post-title a:hover,.post-title a:active,.post-title a:focus { text-decoration:underline; } #content .meta li,#content .prevnext li,#content .gallery li { list-style-image:none; list-style:none; } .meta { margin:5px 0 0; padding:0; font-size:.85em; } .meta ul,.meta li { margin:0; padding:0; } .meta ul { display:inline; } .meta li li { display:inline; padding-right:.3em; } .postfoot { clear:both; margin-bottom:20px; padding-bottom:10px; line-height:1.2em; } .author .posts-by { padding-top:10px; } #footer { clear:both; margin:0; padding:0 0 5px; text-align:center; font-size:.8em; border: 0; width:960px; } #footer ul { clear:both; margin:0; padding:0; } #footer li { display:inline; margin:0; padding:0 5px; } #footer li.rss { position:relative; top:3px; } .copyright { padding:50px 0 0 0; font-family:verdana; color:#ffffff; text-align:left; width:800px; font-size:0.8em; } .copyright a { text-decoration:none; color:#7E0000; font-weight:600; } .copyright a:hover { color:#C0D341; } . .postcontent p { text-decoration:none; border:0; border-style:none; } .postcontent p a:hover { color:#fff; } .kwicks { list-style-type: none; list-style-position:outside; position: relative; margin: 0; padding: 0; } .kwicks li{ display: block; overflow: hidden; padding: 0; cursor: pointer; float: left; width: 125px; height: 40px; margin-right: 0px; background-image:url('http://wfithaca.com/images/kwicks.jpg'); background-repeat:no-repeat; } .kwicks a{ display:block; height:40px; text-indent:-9999px; outline:none; } #kwick1 { background-position:0px 0px; } #kwick2 { background-position:-200px 0px; } #kwick3 { background-position:-400px 0px; } #kwick4 { background-position:-600px 0px; } #kwick5 { background-position:-800px 0px; } #kwick1.active, #kwick1:hover { background-position: 0 bottom; } #kwick2.active, #kwick2:hover{ background-position: -200px bottom; } #kwick3.active, #kwick3:hover { background-position: -400px bottom; } #kwick4.active, #kwick4:hover { background-position: -600px bottom; } #kwick5.active, #kwick5:hover { background-position: -800px bottom; } #portfolio li img { position: absolute; float: left; margin: 34px 50px 0 0; width: 942px; } Just want the #portfolio li img div to move to the left a bit. any help would be greatly appreciated.

    Read the article

  • C# - WebBrowser control seems to cache screenshots

    - by Justin
    Hey, I'm using the WebBrowser control in an ASP.NET MVC 2 app (don't judge, I'm doing it in an admin section only to be used by me), here's the code: public static class Screenshot { private static string _url; private static int _width; private static byte[] _bytes; public static byte[] Get(string url) { // This method gets a screenshot of the webpage // rendered at its full size (height and width) return Get(url, 50); } public static byte[] Get(string url, int width) { //set properties. _url = url; _width = width; //start screen scraper. var webBrowseThread = new Thread(new ThreadStart(TakeScreenshot)); webBrowseThread.SetApartmentState(ApartmentState.STA); webBrowseThread.Start(); //check every second if it got the screenshot yet. //i know, the thread sleep is terrible, but it's the secure section, don't judge... int numChecks = 20; for (int k = 0; k < numChecks; k++) { Thread.Sleep(1000); if (_bytes != null) { return _bytes; } } return null; } private static void TakeScreenshot() { try { //load the webpage into a WebBrowser control. using (WebBrowser wb = new WebBrowser()) { wb.ScrollBarsEnabled = false; wb.ScriptErrorsSuppressed = true; wb.Navigate(_url); while (wb.ReadyState != WebBrowserReadyState.Complete) { Application.DoEvents(); } //set the size of the WebBrowser control. //take Screenshot of the web pages full width. wb.Width = wb.Document.Body.ScrollRectangle.Width; //take Screenshot of the web pages full height. wb.Height = wb.Document.Body.ScrollRectangle.Height; //get a Bitmap representation of the webpage as it's rendered in the WebBrowser control. var bitmap = new Bitmap(wb.Width, wb.Height); wb.DrawToBitmap(bitmap, new Rectangle(0, 0, wb.Width, wb.Height)); //resize. var height = _width * (bitmap.Height / bitmap.Width); var thumbnail = bitmap.GetThumbnailImage(_width, height, null, IntPtr.Zero); //convert to byte array. var ms = new MemoryStream(); thumbnail.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg); _bytes = ms.ToArray(); } } catch(Exception exc) {//TODO: why did screenshot fail? string message = exc.Message; } } This works fine for the first screenshot that I take, however if I try to take subsequent screenshots of different URL's, it saves screenshots of the first url for the new url, or sometimes it'll save the screenshot from 3 or 4 url's ago. I'm creating a new instance of WebBrowser for each screenshot and am disposing of it properly with the "using" block, any idea why it's behaving this way? Thanks, Justin

    Read the article

< Previous Page | 37 38 39 40 41 42 43 44 45 46 47 48  | Next Page >