gif - Page 75 - Developer IT

Using JS script for "raining images". Can't seem to hide pre-loaded image

- by user1813605

I am trying to hide an image in a script pre-loading on the page. Below script makes images "rain" down the screen onClick. It functions well, but it displays the pre-loaded image itself on the page before the button is clicked. I'm trying to hide the image until the button is pressed. If anyone has any insight on how to hide the image until the function dispenseMittens() runs, I'd be eternally grateful :) Thanks! <script language="javascript"> var pictureSrc = 'mitten.gif'; //the location of the mittens var pictureWidth = 40; //the width of the mittens var pictureHeight = 46; //the height of the mittens var numFlakes = 10; //the number of mittens var downSpeed = 0.01; var lrFlakes = 10; var EmergencyMittens = false; //safety checks. Browsers will hang if this is wrong. If other values are wrong there will just be errors if( typeof( numFlakes ) != 'number' || Math.round( numFlakes ) != numFlakes || numFlakes < 1 ) { numFlakes = 10; } //draw the snowflakes for( var x = 0; x < numFlakes; x++ ) { if( document.layers ) { //releave NS4 bug document.write('<layer id="snFlkDiv'+x+'"><img src="'+pictureSrc+'" height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*" border="0"></layer>'); } else { document.write('<div style="position:absolute;" id="snFlkDiv'+x+'"><img src="'+pictureSrc+'" height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*" border="0"></div>'); } } //calculate initial positions (in portions of browser window size) var xcoords = new Array(), ycoords = new Array(), snFlkTemp; for( var x = 0; x < numFlakes; x++ ) { xcoords[x] = ( x + 1 ) / ( numFlakes + 1 ); do { snFlkTemp = Math.round( ( numFlakes - 1 ) * Math.random() ); } while( typeof( ycoords[snFlkTemp] ) == 'number' ); ycoords[snFlkTemp] = x / numFlakes; } //now animate function mittensFall() { if( !getRefToDivNest('snFlkDiv0') ) { return; } var scrWidth = 0, scrHeight = 0, scrollHeight = 0, scrollWidth = 0; //find screen settings for all variations. doing this every time allows for resizing and scrolling if( typeof( window.innerWidth ) == 'number' ) { scrWidth = window.innerWidth; scrHeight = window.innerHeight; } else { if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { scrWidth = document.documentElement.clientWidth; scrHeight = document.documentElement.clientHeight; } else { if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { scrWidth = document.body.clientWidth; scrHeight = document.body.clientHeight; } } } if( typeof( window.pageYOffset ) == 'number' ) { scrollHeight = pageYOffset; scrollWidth = pageXOffset; } else { if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) { scrollHeight = document.body.scrollTop; scrollWidth = document.body.scrollLeft; } else { if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) { scrollHeight = document.documentElement.scrollTop; scrollWidth = document.documentElement.scrollLeft; } } } //move the snowflakes to their new position for( var x = 0; x < numFlakes; x++ ) { if( ycoords[x] * scrHeight > scrHeight - pictureHeight ) { ycoords[x] = 0; } var divRef = getRefToDivNest('snFlkDiv'+x); if( !divRef ) { return; } if( divRef.style ) { divRef = divRef.style; } var oPix = document.childNodes ? 'px' : 0; divRef.top = ( Math.round( ycoords[x] * scrHeight ) + scrollHeight ) + oPix; divRef.left = ( Math.round( ( ( xcoords[x] * scrWidth ) - ( pictureWidth / 2 ) ) + ( ( scrWidth / ( ( numFlakes + 1 ) * 4 ) ) * ( Math.sin( lrFlakes * ycoords[x] ) - Math.sin( 3 * lrFlakes * ycoords[x] ) ) ) ) + scrollWidth ) + oPix; ycoords[x] += downSpeed; } } //DHTML handlers function getRefToDivNest(divName) { if( document.layers ) { return document.layers[divName]; } //NS4 if( document[divName] ) { return document[divName]; } //NS4 also if( document.getElementById ) { return document.getElementById(divName); } //DOM (IE5+, NS6+, Mozilla0.9+, Opera) if( document.all ) { return document.all[divName]; } //Proprietary DOM - IE4 return false; } function dispenseMittens() { if (EmergencyMittens) { window.clearInterval(EmergencyMittens); } else { EmergencyMittens = window.setInterval('mittensFall();',100); } } </script>

Read the article

list images from directory by function

- by osc2nuke

i'm using this function: function getmyimages($qid){ $imgdir = 'modules/Projects/uploaded_project_images/'. $qid .''; // the directory, where your images are stored $allowed_types = array('png','jpg','jpeg','gif'); // list of filetypes you want to show $dimg = opendir($imgdir); while($imgfile = readdir($dimg)) { if(in_array(strtolower(substr($imgfile,-3)),$allowed_types)) { $a_img[] = $imgfile; sort($a_img); reset ($a_img); } } $totimg = count($a_img); // total image number for($x=0; $x < $totimg; $x++) { $size = getimagesize($imgdir.'/'.$a_img[$x]); // do whatever $halfwidth = ceil($size[0]/2); $halfheight = ceil($size[1]/2); $mytest = 'name: '.$a_img[$x].' width: '.$size[0].' height: '.$size[1].'<br /><a href="'. $imgdir .'/'.$a_img[$x].'">'. $a_img[$x]. '</a>'; } return $mytest; } And i call this function between a while row as: $sql_select = $db->sql_query('SELECT * from '.$prefix.'_projects WHERE topic=\''.$cid.'\''); OpenTable(); while ($row2 = $db->sql_fetchrow($sql_select)){ $qid = $row2['qid']; $project_query = $db->sql_query('SELECT p.uid, p.uname, p.subject, p.story, p.storyext, p.date, p.topic, p.pdate, p.materials, p.bidoptions, p.projectduration, pd.id_duration, pm.material_id, pbo.bidid, pc.cid FROM ' . $prefix . '_projects p, ' . $prefix . '_projects_duration pd, ' . $prefix . '_project_materials pm, ' . $prefix . '_project_bid_options pbo, ' . $prefix . '_project_categories pc WHERE p.topic=\''.$cid.'\' and p.qid=\''.$qid.'\' and p.bidoptions=pbo.bidid and p.materials=pm.material_id and p.projectduration=pd.id_duration'); while ($project_row = $db->sql_fetchrow($project_query)) { //$qid = $project_row['qid']; $uid = $project_row['uid']; $uname = $project_row['uname']; $subject = $project_row['subject']; $story = $project_row['story']; $storyext = $project_row['storyext']; $date = $project_row['date']; $topic = $project_row['topic']; $pdate = $project_row['pdate']; $materials = $project_row['materials']; $bidoptions = $project_row['bidoptions']; $projectduration = $project_row['projectduration']; //Get the topic name $topic_query = $db->sql_query('SELECT cid,title from '.$prefix.'_project_categories WHERE cid =\''.$cid.'\''); while ($topic_row = $db->sql_fetchrow($topic_query)) { $topic_id = $topic_row['cid']; $topic_title = $topic_row['title']; } //Get the material text $material_query = $db->sql_query('SELECT material_id,material_name from '.$prefix.'_project_materials WHERE material_id =\''.$materials.'\''); while ($material_row = $db->sql_fetchrow($material_query)) { $material_id = $material_row['material_id']; $material_name = $material_row['material_name']; } //Get the bid methode $bid_query = $db->sql_query('SELECT bidid,bidname from '.$prefix.'_project_bid_options WHERE bidid =\''.$bidoptions.'\''); while ($bid_row = $db->sql_fetchrow($bid_query)) { $bidid = $bid_row['bidid']; $bidname = $bid_row['bidname']; } //Get the project duration $duration_query = $db->sql_query('SELECT id_duration,duration_value,duration_alias from '.$prefix.'_projects_duration WHERE id_duration =\''.$projectduration.'\''); while ($duration_row = $db->sql_fetchrow($duration_query)) { $id_duration = $duration_row['id_duration']; $duration_value = $duration_row['duration_value']; $duration_alias = $duration_row['duration_alias']; } } echo '<br/><b>id</b>--->' .$qid. '<br/><b>uid</b>--->' .$uid. '<br/><b>username</b>--->' .$uname. '<br/><b>subject</b>--->'.$subject. '<br/><b>story1</b>--->'.$story. '<br/><b>story2</b>--->'.$storyext. '<br/><b>postdate</b>--->'.$date. '<br/><b>categorie</b>--->'.$topic_title . '<br/><b>project start</b>--->'.$pdate. '<br/><b>materials</b>--->'.$material_name. '<br/><b>bid methode</b>--->'.$bidname. '<br/><b>project duration</b>--->'.$duration_alias.'<br /><br /><br/><b>image url</b>--->'.getmyimages($qid).'<br /><br />'; } CloseTable(); the result outputs only the "last" file from the directories. if i do a echo instead of a return $mytest; it read the whole directory but ruïns the output.

Read the article

Pass a variable from javascript to php in the same session OnClickFunction

- by MickyScion

I was seeing through stackoverflow the solutions for this kind of problems but any of them are executing the code of javascript in the same session...please i want some help with this...i have this in my session <script> function show_alert() { var ProdAntes = document.getElementById("productoseleccionado").value; var CantAntes = document.getElementById("cantidadantes").value; var PrecAntes = document.getElementById("precioantes").value; var FecAntes = document.getElementById("fechaantes").value; var ProdAhora = document.getElementById("SoyaProductorProduccionProducto").value; var CantAhora = document.getElementById("SoyaProductorProduccionCantidadtm").value; var PrecAhora = document.getElementById("SoyaProductorProduccionPreciodolar").value; var FecAhora = document.getElementById("select_date").value; } </script> and in my html stuff i have this <?php echo $this->Form->create('SoyaProductorProduccion');?> <fieldset> <?php echo $this->Form->hidden('id', array('value' => $this->data['SoyaProductorProduccion']['id'])); echo $this->Form->input('operacion', array('type' => 'hidden', 'value'=>'Produccion')); //-------------------------------------------------------------- $productoseleccionado = $this->data['SoyaProductorProduccion']['producto']; echo $this->Form->input('productoseleccionado', array('type' => 'hidden','style'=>'width:500px; height:30px;','id' => 'productoseleccionado' , 'value' => $productoseleccionado)); echo $this->Form->input('producto', array( 'options' => array( $productoseleccionado => $productoseleccionado, 'Torta solvente de soya' => 'Torta solvente de soya', 'Torta solvente de girasol' => 'Torta solvente de girasol', 'Harina integral de soya' => 'Harina integral de soya', 'Harina de girasol' => 'Harina de girasol', 'Cascarilla de soya' => 'Cascarilla de soya', 'Cascarilla de girasol' => 'Cascarilla de girasol', 'Aceite de soya refinado' => 'Aceite de soya refinado', 'Aceite de soya crudo' => 'Aceite de soya crudo', 'Aceite de girasol refinado' => 'Aceite de girasol refinado', 'Aceite de girasol crudo' => 'Aceite de girasol crudo', ),'label'=>'Tipo de Producto' )); foreach ($soyacambiodolares as $soyacambiodolar): $dolar=$soyacambiodolar['SoyaCambioDolar']['cambio']; endforeach; echo $this->Form->input('cambio', array('type' => 'hidden','value' => $dolar)); //----------------------------------------------------------------------------- $cantidadantes = $this->data['SoyaProductorProduccion']['cantidadtm']; echo $this->Form->input('cantidadantes', array('type' => 'hidden','style'=>'width:500px; height:30px;', 'value' => $cantidadantes,'id' => 'cantidadantes')); echo $this->Form->input('cantidadtm', array('label' => 'Cantidad en tonelada(s) métrica(s) del producto (TM)','style'=>'width:500px; height:30px;')); //----------------------------------------------------------------------------- $precioantes = $this->data['SoyaProductorProduccion']['preciodolar']; echo $this->Form->input('precioantes', array('type' => 'hidden','style'=>'width:500px; height:30px;', 'value' => $precioantes,'id' => 'precioantes')); echo $this->Form->input('preciodolar', array('label' => 'Precio en Dolares Americanos por tonelada métrica (TM / $us)','style'=>'width:500px; height:30px;')); //----------------------------------------------------------------------------- ?> <table style="width: 600px"> <tr> <td > <?php //---------------------------------------------------------------- $fechaantes = $this->data['SoyaProductorProduccion']['fecharegistro']; echo $this->Form->input('fechaantes', array('type' => 'hidden','style'=>'width:500px; height:30px;', 'value' => $fechaantes, 'id' => 'fechaantes')); //---------------------------------------------------------------- echo $this->Form->input("fecharegistro", array( 'label' => '<strong>Periodo al que corresponde la declaración</strong>', 'type' => 'text', 'style' => 'width: 110px', 'class' => 'fl tal vat w300p', 'error' => false , 'id' => 'select_date')); ?> <?php echo $this->Html->div('datepicker_img w100p fl pl460p pa', $this->Html->image('datepicker_calendar_icon.gif'),array('id' => 'datepicker_img')); ?> <?php echo $this->Html->div('datepicker fl pl460p pa', ' ' ,array('id' => 'datepicker')); ?> </td> </tr> </table> <?php echo $this->Form->submit('Modificar Existencia', array('class' => 'form-submit', 'title' => 'Presione aqui para agregar datos', 'onclick' => 'return show_alert();')); ?> </fieldset> <?php echo $this->Form->end(); ?> my function is ok but i want these: when i click the submit button i want to compare wich field had been changed, and i want to create a chain of detailed changes like "change in the field 1, change in the fiel 2.--" and so on...and this has to be saved in my database so i have to pass to a variable in my php before saving...thanks!

Read the article

seeking help with Chrome & Safari not rendering my table stretched to fit its contents...help?

- by oompa_l

I have an element on this web page I'm developing where I need my text to conform to the width of an image above it - whose width will always be different - think of captions. I have found numerous references to using a 1px table to force this width sizing behaviour. I am having problems, though with Safari and Chrome "seeing" this instruction - the text ends up as a marginally sized text box sitting behind the image. The problem, as I see it, has to do with the text and images sitting in div's nested within the table. I need the images to sit in a div because of some jquery script I'm using called cycle, which turns a group of images into a slideshow. The problem may have something to do with the script as well. In any case, I have tried a seeming infinite number of combination of floating left and clearing left on all all the divs, changing their positions and widths...nothing works. Anyone have any clues about how to broach this one? EDIT 1: ok, should I be editing my post or responding with answers? here's the url to see the problem I am having - http://friedmanstudios.ca/webdev/test8.html and the code: <div id="content" class="boxes"> <table> <tr> <td > <div id="imageFrame"> <a href="#" class="img" title="_MG_9786_fmt.jpeg"> <img src="images/_MG_9786_fmt.jpeg"/> </a> <a href="#" class="img" title="IMG_5169_fmt.jpeg"> <img src="indesign export/GFA-TEARSHEETS-100526-01-web-images/IMG_5169_fmt.jpeg"/> </a> <a href="#" class="img" title="IMG_5175_fmt.jpeg"> <img src="indesign export/GFA-TEARSHEETS-100526-01-web-images/IMG_5175_fmt.jpeg"/> </a> <a href="#" class="img" title="aerial_fmt.jpeg" width=""> <img src="indesign export/GFA-TEARSHEETS-100526-01-web-images/aerial_fmt.jpeg"/> </a> </div> <div id="cycleCtrl"> <div id="prev" class="pager"><a href="#">< Prev</a> </div> <div id="next" class="pager"><a href="#">Next ></a></div> <div id="pagerNav" class="pager"></div> </div> <div id="descController"> <img src="images/arrow.gif" name="arrow" width="5" height="10" id="arrow" /> <span id="projectName">Toronto Centre for the Arts </span> <br /> <div id="desc"> In the past eight years... </div> </div></td> <td width="90%"></td> </tr> </table> and the styles: #content { position: absolute; top: 250px; left: 275px; float: left; clear: both; } content table { float: left; width: 1px; } imageFrame { position: relative; float: left; clear: left; width: inherit; } desc { position: relative; clear: left; float: left; } descController { position:relative; padding-top:5px; padding-bottom:10px; clear: left; float: left; } descController div { height:0; overflow:hidden; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease; padding-top:10px; margin-top: 10px; word-spacing: 0em; line-height: 16px; font-size: 12px; position: relative; float: left; clear: left; }

Read the article

How to specify 2 different positions for Colorbox or Fancybox on the same page?

- by Eric

I know this question has been asked before, but I'm having difficulty implementing it. I'm looking for a more specific answer. Here is my html code: <head> <meta charset=utf-8 /> <title>ColorBox Examples</title> <style type="text/css"> body{font:12px/1.2 Verdana, Arial, san-serrif; padding:0 10px;} a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;} h2{font-size:13px; margin:15px 0 0 0;} </style> <link media="screen" rel="stylesheet" href="colorbox.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script src="../colorbox/jquery.colorbox.js"></script> <script> $(document).ready(function(){ //Examples of how to assign the ColorBox event to elements $(".example7").colorbox({width:"80%", height:"80%", iframe:true}); $(".example7").colorbox({width:"80%", height:"80%", iframe:true}); }); </script> </head> <body> <p><a class='example7' href="http://google.com">Outside Webpage 1 (Iframe)</a></p> <p><a class='example7' href="http://google.com">Outside Webpage 2 (Iframe)</a></p> (Excuse the wrong indentation - I had to mess with the formatting to get the body content to show up.) Here is my CSS code(default colorbox code): #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative; overflow:visible;} #cboxLoadedContent{overflow:auto;} #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} #cboxOverlay{background:#fff;} #colorbox{} #cboxContent{margin-top:32px;} #cboxLoadedContent{background:#000; padding:1px;} #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;} #cboxLoadingOverlay{background:#000;} #cboxTitle{position:absolute; top:-22px; left:0; color:#000;} #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;} #cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose{text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(images/controls.png) no-repeat 0 0;} #cboxPrevious{background-position:0px 0px; right:44px;} #cboxPrevious.hover{background-position:0px -25px;} #cboxNext{background-position:-25px 0px; right:22px;} #cboxNext.hover{background-position:-25px -25px;} #cboxClose{background-position:-50px 0px; right:0;} #cboxClose.hover{background-position:-50px -25px;} .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;} .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;} .cboxSlideshow_on #cboxSlideshow.hover{background-position:-100px -25px;} .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;} .cboxSlideshow_off #cboxSlideshow.hover{background-position:-75px -25px;} Can someone please tell me how this can be achieved? Forgive my lack of css knowledge :) Any help would be greatly appreciated. Thanks a ton.

Read the article

files get uploaded just before they get cancelled

- by user1763986

Got a little situation here where I am trying to cancel a file's upload. What I have done is stated that if the user clicks on the "Cancel" button, then it will simply remove the iframe so that it does not go to the page where it uploads the files into the server and inserts data into the database. Now this works fine if the user clicks on the "Cancel" button in quickish time the problem I have realised though is that if the user clicks on the "Cancel" button very late, it sometimes doesn't remove the iframe in time meaning that the file has just been uploaded just before the user has clicked on the "Cancel" button. So my question is that is there a way that if the file does somehow get uploaded before the user clicks on the "Cancel" button, that it deletes the data in the database and removes the file from the server? Below is the image upload form: <form action="imageupload.php" method="post" enctype="multipart/form-data" target="upload_target_image" onsubmit="return imageClickHandler(this);" class="imageuploadform" > <p class="imagef1_upload_process" align="center"> Loading...<br/> <img src="Images/loader.gif" /> </p> <p class="imagef1_upload_form" align="center"> <br/> <span class="imagemsg"></span> <label>Image File: <input name="fileImage" type="file" class="fileImage" /></label><br/> <br/> <label class="imagelbl"><input type="submit" name="submitImageBtn" class="sbtnimage" value="Upload" /></label> </p> <p class="imagef1_cancel" align="center"> <input type="reset" name="imageCancel" class="imageCancel" value="Cancel" /> </p> <iframe class="upload_target_image" name="upload_target_image" src="#" style="width:0px;height:0px;border:0px;solid;#fff;"></iframe> </form> Below is the jquery function which controls the "Cancel" button: $(imageuploadform).find(".imageCancel").on("click", function(event) { $('.upload_target_image').get(0).contentwindow $("iframe[name='upload_target_image']").attr("src", "javascript:'<html></html>'"); return stopImageUpload(2); }); Below is the php code where it uploads the files and inserts the data into the database. The form above posts to this php page "imageupload.php": <body> <?php include('connect.php'); session_start(); $result = 0; //uploads file move_uploaded_file($_FILES["fileImage"]["tmp_name"], "ImageFiles/" . $_FILES["fileImage"]["name"]); $result = 1; //set up the INSERT SQL query command to insert the name of the image file into the "Image" Table $imagesql = "INSERT INTO Image (ImageFile) VALUES (?)"; //prepare the above SQL statement if (!$insert = $mysqli->prepare($imagesql)) { // Handle errors with prepare operation here } //bind the parameters (these are the values that will be inserted) $insert->bind_param("s",$img); //Assign the variable of the name of the file uploaded $img = 'ImageFiles/'.$_FILES['fileImage']['name']; //execute INSERT query $insert->execute(); if ($insert->errno) { // Handle query error here } //close INSERT query $insert->close(); //Retrieve the ImageId of the last uploded file $lastID = $mysqli->insert_id; //Insert into Image_Question Table (be using last retrieved Image id in order to do this) $imagequestionsql = "INSERT INTO Image_Question (ImageId, SessionId, QuestionId) VALUES (?, ?, ?)"; //prepare the above SQL statement if (!$insertimagequestion = $mysqli->prepare($imagequestionsql)) { // Handle errors with prepare operation here echo "Prepare statement err imagequestion"; } //Retrieve the question number $qnum = (int)$_POST['numimage']; //bind the parameters (these are the values that will be inserted) $insertimagequestion->bind_param("isi",$lastID, 'Exam', $qnum); //execute INSERT query $insertimagequestion->execute(); if ($insertimagequestion->errno) { // Handle query error here } //close INSERT query $insertimagequestion->close(); ?>  <script> window.top.stopImageUpload(<?php echo $result; ?>, '<?php echo $_FILES['fileImage']['name'] ?>'); </script> </body> UPDATE: Below is the php code "cancelimage.php" where I want to delete the cancelled file from the server and delete the record from the database. It is set up but not finished, can somebody finish it off so I can retrieve the name of the file and it's id using $_SESSION? <?php // connect to the database include('connect.php'); /* check connection */ if (mysqli_connect_errno()) { printf("Connect failed: %s\n", mysqli_connect_error()); die(); } //remove file from server unlink("ImageFiles/...."); //need to retrieve file name here where the ... line is //DELETE query statement where it will delete cancelled file from both Image and Image Question Table $imagedeletesql = " DELETE img, img_q FROM Image AS img LEFT JOIN Image_Question AS img_q ON img_q.ImageId = img.ImageId WHERE img.ImageFile = ?"; //prepare delete query if (!$delete = $mysqli->prepare($imagedeletesql)) { // Handle errors with prepare operation here } //Dont pass data directly to bind_param store it in a variable $delete->bind_param("s",$img); //execute DELETE query $delete->execute(); if ($delete->errno) { // Handle query error here } //close query $delete->close(); ?> Can you please provide an sample code in your answer to make it easier for me. Thank you

Read the article

.NET HTML Sanitation for rich HTML Input

- by Rick Strahl

Recently I was working on updating a legacy application to MVC 4 that included free form text input. When I set up the new site my initial approach was to not allow any rich HTML input, only simple text formatting that would respect a few simple HTML commands for bold, lists etc. and automatically handles line break processing for new lines and paragraphs. This is typical for what I do with most multi-line text input in my apps and it works very well with very little development effort involved. Then the client sprung another note: Oh by the way we have a bunch of customers (real estate agents) who need to post complete HTML documents. Oh uh! There goes the simple theory. After some discussion and pleading on my part (<snicker>) to try and avoid this type of raw HTML input because of potential XSS issues, the client decided to go ahead and allow raw HTML input anyway. There has been lots of discussions on this subject on StackOverFlow (and here and here) but to after reading through some of the solutions I didn't really find anything that would work even closely for what I needed. Specifically we need to be able to allow just about any HTML markup, with the exception of script code. Remote CSS and Images need to be loaded, links need to work and so. While the 'legit' HTML posted by these agents is basic in nature it does span most of the full gamut of HTML (4). Most of the solutions XSS prevention/sanitizer solutions I found were way to aggressive and rendered the posted output unusable mostly because they tend to strip any externally loaded content. In short I needed a custom solution. I thought the best solution to this would be to use an HTML parser - in this case the Html Agility Pack - and then to run through all the HTML markup provided and remove any of the blacklisted tags and a number of attributes that are prone to JavaScript injection. There's much discussion on whether to use blacklists vs. whitelists in the discussions mentioned above, but I found that whitelists can make sense in simple scenarios where you might allow manual HTML input, but when you need to allow a larger array of HTML functionality a blacklist is probably easier to manage as the vast majority of elements and attributes could be allowed. Also white listing gets a bit more complex with HTML5 and the new proliferation of new HTML tags and most new tags generally don't affect XSS issues directly. Pure whitelisting based on elements and attributes also doesn't capture many edge cases (see some of the XSS cheat sheets listed below) so even with a white list, custom logic is still required to handle many of those edge cases. The Microsoft Web Protection Library (AntiXSS) My first thought was to check out the Microsoft AntiXSS library. Microsoft has an HTML Encoding and Sanitation library in the Microsoft Web Protection Library (formerly AntiXSS Library) on CodePlex, which provides stricter functions for whitelist encoding and sanitation. Initially I thought the Sanitation class and its static members would do the trick for me,but I found that this library is way too restrictive for my needs. Specifically the Sanitation class strips out images and links which rendered the full HTML from our real estate clients completely useless. I didn't spend much time with it, but apparently I'm not alone if feeling this library is not really useful without some way to configure operation. To give you an example of what didn't work for me with the library here's a small and simple HTML fragment that includes script, img and anchor tags. I would expect the script to be stripped and everything else to be left intact. Here's the original HTML:var value = "<b>Here</b> <script>alert('hello')</script> we go. Visit the " + "<a href='http://west-wind.com'>West Wind</a> site. " + "<img src='http://west-wind.com/images/new.gif' /> " ; and the code to sanitize it with the AntiXSS Sanitize class:@Html.Raw(Microsoft.Security.Application.Sanitizer.GetSafeHtmlFragment(value)) This produced a not so useful sanitized string: Here we go. Visit the <a>West Wind</a> site. While it removed the <script> tag (good) it also removed the href from the link and the image tag altogether (bad). In some situations this might be useful, but for most tasks I doubt this is the desired behavior. While links can contain javascript: references and images can 'broadcast' information to a server, without configuration to tell the library what to restrict this becomes useless to me. I couldn't find any way to customize the white list, nor is there code available in this 'open source' library on CodePlex. Using Html Agility Pack for HTML Parsing The WPL library wasn't going to cut it. After doing a bit of research I decided the best approach for a custom solution would be to use an HTML parser and inspect the HTML fragment/document I'm trying to import. I've used the HTML Agility Pack before for a number of apps where I needed an HTML parser without requiring an instance of a full browser like the Internet Explorer Application object which is inadequate in Web apps. In case you haven't checked out the Html Agility Pack before, it's a powerful HTML parser library that you can use from your .NET code. It provides a simple, parsable HTML DOM model to full HTML documents or HTML fragments that let you walk through each of the elements in your document. If you've used the HTML or XML DOM in a browser before you'll feel right at home with the Agility Pack. Blacklist based HTML Parsing to strip XSS Code For my purposes of HTML sanitation, the process involved is to walk the HTML document one element at a time and then check each element and attribute against a blacklist. There's quite a bit of argument of what's better: A whitelist of allowed items or a blacklist of denied items. While whitelists tend to be more secure, they also require a lot more configuration. In the case of HTML5 a whitelist could be very extensive. For what I need, I only want to ensure that no JavaScript is executed, so a blacklist includes the obvious <script> tag plus any tag that allows loading of external content including <iframe>, <object>, <embed> and <link> etc. <form> is also excluded to avoid posting content to a different location. I also disallow <head> and <meta> tags in particular for my case, since I'm only allowing posting of HTML fragments. There is also some internal logic to exclude some attributes or attributes that include references to JavaScript or CSS expressions. The default tag blacklist reflects my use case, but is customizable and can be added to. Here's my HtmlSanitizer implementation:using System.Collections.Generic; using System.IO; using System.Xml; using HtmlAgilityPack; namespace Westwind.Web.Utilities { public class HtmlSanitizer { public HashSet<string> BlackList = new HashSet<string>() { { "script" }, { "iframe" }, { "form" }, { "object" }, { "embed" }, { "link" }, { "head" }, { "meta" } }; /// <summary> /// Cleans up an HTML string and removes HTML tags in blacklist /// </summary> /// <param name="html"></param> /// <returns></returns> public static string SanitizeHtml(string html, params string[] blackList) { var sanitizer = new HtmlSanitizer(); if (blackList != null && blackList.Length > 0) { sanitizer.BlackList.Clear(); foreach (string item in blackList) sanitizer.BlackList.Add(item); } return sanitizer.Sanitize(html); } /// <summary> /// Cleans up an HTML string by removing elements /// on the blacklist and all elements that start /// with onXXX . /// </summary> /// <param name="html"></param> /// <returns></returns> public string Sanitize(string html) { var doc = new HtmlDocument(); doc.LoadHtml(html); SanitizeHtmlNode(doc.DocumentNode); //return doc.DocumentNode.WriteTo(); string output = null; // Use an XmlTextWriter to create self-closing tags using (StringWriter sw = new StringWriter()) { XmlWriter writer = new XmlTextWriter(sw); doc.DocumentNode.WriteTo(writer); output = sw.ToString(); // strip off XML doc header if (!string.IsNullOrEmpty(output)) { int at = output.IndexOf("?>"); output = output.Substring(at + 2); } writer.Close(); } doc = null; return output; } private void SanitizeHtmlNode(HtmlNode node) { if (node.NodeType == HtmlNodeType.Element) { // check for blacklist items and remove if (BlackList.Contains(node.Name)) { node.Remove(); return; } // remove CSS Expressions and embedded script links if (node.Name == "style") { if (string.IsNullOrEmpty(node.InnerText)) { if (node.InnerHtml.Contains("expression") || node.InnerHtml.Contains("javascript:")) node.ParentNode.RemoveChild(node); } } // remove script attributes if (node.HasAttributes) { for (int i = node.Attributes.Count - 1; i >= 0; i--) { HtmlAttribute currentAttribute = node.Attributes[i]; var attr = currentAttribute.Name.ToLower(); var val = currentAttribute.Value.ToLower(); span style="background: white; color: green">// remove event handlers if (attr.StartsWith("on")) node.Attributes.Remove(currentAttribute); // remove script links else if ( //(attr == "href" || attr== "src" || attr == "dynsrc" || attr == "lowsrc") && val != null && val.Contains("javascript:")) node.Attributes.Remove(currentAttribute); // Remove CSS Expressions else if (attr == "style" && val != null && val.Contains("expression") || val.Contains("javascript:") || val.Contains("vbscript:")) node.Attributes.Remove(currentAttribute); } } } // Look through child nodes recursively if (node.HasChildNodes) { for (int i = node.ChildNodes.Count - 1; i >= 0; i--) { SanitizeHtmlNode(node.ChildNodes[i]); } } } } } Please note: Use this as a starting point only for your own parsing and review the code for your specific use case! If your needs are less lenient than mine were you can you can make this much stricter by not allowing src and href attributes or CSS links if your HTML doesn't allow it. You can also check links for external URLs and disallow those - lots of options. The code is simple enough to make it easy to extend to fit your use cases more specifically. It's also quite easy to make this code work using a WhiteList approach if you want to go that route. The code above is semi-generic for allowing full featured HTML fragments that only disallow script related content. The Sanitize method walks through each node of the document and then recursively drills into all of its children until the entire document has been traversed. Note that the code here uses an XmlTextWriter to write output - this is done to preserve XHTML style self-closing tags which are otherwise left as non-self-closing tags. The sanitizer code scans for blacklist elements and removes those elements not allowed. Note that the blacklist is configurable either in the instance class as a property or in the static method via the string parameter list. Additionally the code goes through each element's attributes and looks for a host of rules gleaned from some of the XSS cheat sheets listed at the end of the post. Clearly there are a lot more XSS vulnerabilities, but a lot of them apply to ancient browsers (IE6 and versions of Netscape) - many of these glaring holes (like CSS expressions - WTF IE?) have been removed in modern browsers. What a Pain To be honest this is NOT a piece of code that I wanted to write. I think building anything related to XSS is better left to people who have far more knowledge of the topic than I do. Unfortunately, I was unable to find a tool that worked even closely for me, or even provided a working base. For the project I was working on I had no choice and I'm sharing the code here merely as a base line to start with and potentially expand on for specific needs. It's sad that Microsoft Web Protection Library is currently such a train wreck - this is really something that should come from Microsoft as the systems vendor or possibly a third party that provides security tools. Luckily for my application we are dealing with a authenticated and validated users so the user base is fairly well known, and relatively small - this is not a wide open Internet application that's directly public facing. As I mentioned earlier in the post, if I had my way I would simply not allow this type of raw HTML input in the first place, and instead rely on a more controlled HTML input mechanism like MarkDown or even a good HTML Edit control that can provide some limits on what types of input are allowed. Alas in this case I was overridden and we had to go forward and allow *any* raw HTML posted. Sometimes I really feel sad that it's come this far - how many good applications and tools have been thwarted by fear of XSS (or worse) attacks? So many things that could be done *if* we had a more secure browser experience and didn't have to deal with every little script twerp trying to hack into Web pages and obscure browser bugs. So much time wasted building secure apps, so much time wasted by others trying to hack apps… We're a funny species - no other species manages to waste as much time, effort and resources as we humans do :-) Resources Code on GitHub Html Agility Pack XSS Cheat Sheet XSS Prevention Cheat Sheet Microsoft Web Protection Library (AntiXss) StackOverflow Links: http://stackoverflow.com/questions/341872/html-sanitizer-for-net http://blog.stackoverflow.com/2008/06/safe-html-and-xss/ http://code.google.com/p/subsonicforums/source/browse/trunk/SubSonic.Forums.Data/HtmlScrubber.cs?r=61© Rick Strahl, West Wind Technologies, 2005-2012Posted in Security HTML ASP.NET JavaScript Tweet !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

Read the article

Introducing Data Annotations Extensions

- by srkirkland

Validation of user input is integral to building a modern web application, and ASP.NET MVC offers us a way to enforce business rules on both the client and server using Model Validation. The recent release of ASP.NET MVC 3 has improved these offerings on the client side by introducing an unobtrusive validation library built on top of jquery.validation. Out of the box MVC comes with support for Data Annotations (that is, System.ComponentModel.DataAnnotations) and can be extended to support other frameworks. Data Annotations Validation is becoming more popular and is being baked in to many other Microsoft offerings, including Entity Framework, though with MVC it only contains four validators: Range, Required, StringLength and Regular Expression. The Data Annotations Extensions project attempts to augment these validators with additional attributes while maintaining the clean integration Data Annotations provides. A Quick Word About Data Annotations Extensions The Data Annotations Extensions project can be found at http://dataannotationsextensions.org/, and currently provides 11 additional validation attributes (ex: Email, EqualTo, Min/Max) on top of Data Annotations’ original 4. You can find a current list of the validation attributes on the afore mentioned website. The core library provides server-side validation attributes that can be used in any .NET 4.0 project (no MVC dependency). There is also an easily pluggable client-side validation library which can be used in ASP.NET MVC 3 projects using unobtrusive jquery validation (only MVC3 included javascript files are required). On to the Preview Let’s say you had the following “Customer” domain model (or view model, depending on your project structure) in an MVC 3 project: public class Customer { public string Email { get; set; } public int Age { get; set; } public string ProfilePictureLocation { get; set; } } .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; } When it comes time to create/edit this Customer, you will probably have a CustomerController and a simple form that just uses one of the Html.EditorFor() methods that the ASP.NET MVC tooling generates for you (or you can write yourself). It should look something like this: With no validation, the customer can enter nonsense for an email address, and then can even report their age as a negative number! With the built-in Data Annotations validation, I could do a bit better by adding a Range to the age, adding a RegularExpression for email (yuck!), and adding some required attributes. However, I’d still be able to report my age as 10.75 years old, and my profile picture could still be any string. Let’s use Data Annotations along with this project, Data Annotations Extensions, and see what we can get: public class Customer { [Email] [Required] public string Email { get; set; } [Integer] [Min(1, ErrorMessage="Unless you are benjamin button you are lying.")] [Required] public int Age { get; set; } [FileExtensions("png|jpg|jpeg|gif")] public string ProfilePictureLocation { get; set; } } .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 let’s try to put in some invalid values and see what happens: That is very nice validation, all done on the client side (will also be validated on the server). Also, the Customer class validation attributes are very easy to read and understand. Another bonus: Since Data Annotations Extensions can integrate with MVC 3’s unobtrusive validation, no additional scripts are required! Now that we’ve seen our target, let’s take a look at how to get there within a new MVC 3 project. Adding Data Annotations Extensions To Your Project First we will File->New Project and create an ASP.NET MVC 3 project. I am going to use Razor for these examples, but any view engine can be used in practice. Now go into the NuGet Extension Manager (right click on references and select add Library Package Reference) and search for “DataAnnotationsExtensions.” You should see the following two packages: The first package is for server-side validation scenarios, but since we are using MVC 3 and would like comprehensive sever and client validation support, click on the DataAnnotationsExtensions.MVC3 project and then click Install. This will install the Data Annotations Extensions server and client validation DLLs along with David Ebbo’s web activator (which enables the validation attributes to be registered with MVC 3). Now that Data Annotations Extensions is installed you have all you need to start doing advanced model validation. If you are already using Data Annotations in your project, just making use of the additional validation attributes will provide client and server validation automatically. However, assuming you are starting with a blank project I’ll walk you through setting up a controller and model to test with. Creating Your Model In the Models folder, create a new User.cs file with a User class that you can use as a model. To start with, I’ll use the following class: public class User { public string Email { get; set; } public string Password { get; set; } public string PasswordConfirm { get; set; } public string HomePage { get; set; } public int Age { get; set; } } Next, create a simple controller with at least a Create method, and then a matching Create view (note, you can do all of this via the MVC built-in tooling). Your files will look something like this: UserController.cs: public class UserController : Controller { public ActionResult Create() { return View(new User()); } [HttpPost] public ActionResult Create(User user) { if (!ModelState.IsValid) { return View(user); } return Content("User valid!"); } } .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; } Create.cshtml: @model NuGetValidationTester.Models.User @{ ViewBag.Title = "Create"; } <h2>Create</h2> <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> @using (Html.BeginForm()) { @Html.ValidationSummary(true) <fieldset> <legend>User</legend> @Html.EditorForModel() <p> <input type="submit" value="Create" /> </p> </fieldset> } .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 Create.cshtml view, note that we are referencing jquery validation and jquery unobtrusive (jquery is referenced in the layout page). These MVC 3 included scripts are the only ones you need to enjoy both the basic Data Annotations validation as well as the validation additions available in Data Annotations Extensions. These references are added by default when you use the MVC 3 “Add View” dialog on a modification template type. Now when we go to /User/Create we should see a form for editing a User Since we haven’t yet added any validation attributes, this form is valid as shown (including no password, email and an age of 0). With the built-in Data Annotations attributes we can make some of the fields required, and we could use a range validator of maybe 1 to 110 on Age (of course we don’t want to leave out supercentenarians) but let’s go further and validate our input comprehensively using Data Annotations Extensions. The new and improved User.cs model class. { [Required] [Email] public string Email { get; set; } [Required] public string Password { get; set; } [Required] [EqualTo("Password")] public string PasswordConfirm { get; set; } [Url] public string HomePage { get; set; } [Integer] [Min(1)] public int Age { get; set; } } .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 let’s re-run our form and try to use some invalid values: All of the validation errors you see above occurred on the client, without ever even hitting submit. The validation is also checked on the server, which is a good practice since client validation is easily bypassed. That’s all you need to do to start a new project and include Data Annotations Extensions, and of course you can integrate it into an existing project just as easily. Nitpickers Corner ASP.NET MVC 3 futures defines four new data annotations attributes which this project has as well: CreditCard, Email, Url and EqualTo. Unfortunately referencing MVC 3 futures necessitates taking an dependency on MVC 3 in your model layer, which may be unadvisable in a multi-tiered project. Data Annotations Extensions keeps the server and client side libraries separate so using the project’s validation attributes don’t require you to take any additional dependencies in your model layer which still allowing for the rich client validation experience if you are using MVC 3. Custom Error Message and Globalization: Since the Data Annotations Extensions are build on top of Data Annotations, you have the ability to define your own static error messages and even to use resource files for very customizable error messages. Available Validators: Please see the project site at http://dataannotationsextensions.org/ for an up-to-date list of the new validators included in this project. As of this post, the following validators are available: CreditCard Date Digits Email EqualTo FileExtensions Integer Max Min Numeric Url Conclusion Hopefully I’ve illustrated how easy it is to add server and client validation to your MVC 3 projects, and how to easily you can extend the available validation options to meet real world needs. The Data Annotations Extensions project is fully open source under the BSD license. Any feedback would be greatly appreciated. More information than you require, along with links to the source code, is available at http://dataannotationsextensions.org/. Enjoy!

Read the article

Metro: Understanding CSS Media Queries

- by Stephen.Walther

If you are building a Metro style application then your application needs to look great when used on a wide variety of devices. Your application needs to work on tiny little phones, slates, desktop monitors, and the super high resolution displays of the future. Your application also must support portable devices used with different orientations. If someone tilts their phone from portrait to landscape mode then your application must still be usable. Finally, your Metro style application must look great in different states. For example, your Metro application can be in a “snapped state” when it is shrunk so it can share screen real estate with another application. In this blog post, you learn how to use Cascading Style Sheet media queries to support different devices, different device orientations, and different application states. First, you are provided with an overview of the W3C Media Query recommendation and you learn how to detect standard media features. Next, you learn about the Microsoft extensions to media queries which are supported in Metro style applications. For example, you learn how to use the –ms-view-state feature to detect whether an application is in a “snapped state” or “fill state”. Finally, you learn how to programmatically detect the features of a device and the state of an application. You learn how to use the msMatchMedia() method to execute a media query with JavaScript. Using CSS Media Queries Media queries enable you to apply different styles depending on the features of a device. Media queries are not only supported by Metro style applications, most modern web browsers now support media queries including Google Chrome 4+, Mozilla Firefox 3.5+, Apple Safari 4+, and Microsoft Internet Explorer 9+. Loading Different Style Sheets with Media Queries Imagine, for example, that you want to display different content depending on the horizontal resolution of a device. In that case, you can load different style sheets optimized for different sized devices. Consider the following HTML page: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>U.S. Robotics and Mechanical Men</title> <link href="main.css" rel="stylesheet" type="text/css" />  <link href="medium.css" rel="stylesheet" type="text/css" media="(max-width:1100px)" />  <link href="small.css" rel="stylesheet" type="text/css" media="(max-width:800px)" /> </head> <body> <div id="header"> <h1>U.S. Robotics and Mechanical Men</h1> </div>  <div id="leftColumn"> <img src="advertisement1.gif" alt="advertisement" /> <img src="advertisement2.jpg" alt="advertisement" /> </div>  <div id="mainContentColumn"> <label>Search Products</label> <input id="search" /><button>Search</button> </div>  <div id="rightColumn"> <h1>Deal of the Day!</h1> <p> Buy two cameras and get a third camera for free! Offer is good for today only. </p> </div> </body> </html> The HTML page above contains three columns: a leftColumn, mainContentColumn, and rightColumn. When the page is displayed on a low resolution device, such as a phone, only the mainContentColumn appears: When the page is displayed in a medium resolution device, such as a slate, both the leftColumn and the mainContentColumns are displayed: Finally, when the page is displayed in a high-resolution device, such as a computer monitor, all three columns are displayed: Different content is displayed with the help of media queries. The page above contains three style sheet links. Two of the style links include a media attribute: <link href="main.css" rel="stylesheet" type="text/css" />  <link href="medium.css" rel="stylesheet" type="text/css" media="(max-width:1100px)" />  <link href="small.css" rel="stylesheet" type="text/css" media="(max-width:800px)" /> The main.css style sheet contains default styles for the elements in the page. The medium.css style sheet is applied when the page width is less than 1100px. This style sheet hides the rightColumn and changes the page background color to lime: html { background-color: lime; } #rightColumn { display:none; } Finally, the small.css style sheet is loaded when the page width is less than 800px. This style sheet hides the leftColumn and changes the page background color to red: html { background-color: red; } #leftColumn { display:none; } The different style sheets are applied as you stretch and contract your browser window. You don’t need to refresh the page after changing the size of the page for a media query to be applied: Using the @media Rule You don’t need to divide your styles into separate files to take advantage of media queries. You can group styles by using the @media rule. For example, the following HTML page contains one set of styles which are applied when a device’s orientation is portrait and another set of styles when a device’s orientation is landscape: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Application1</title> <style type="text/css"> html { font-family:'Segoe UI Semilight'; font-size: xx-large; } @media screen and (orientation:landscape) { html { background-color: lime; } p.content { width: 50%; margin: auto; } } @media screen and (orientation:portrait) { html { background-color: red; } p.content { width: 90%; margin: auto; } } </style> </head> <body> <p class="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. </p> </body> </html> When a device has a landscape orientation then the background color is set to the color lime and the text only takes up 50% of the available horizontal space: When the device has a portrait orientation then the background color is red and the text takes up 90% of the available horizontal space: Using Standard CSS Media Features The official list of standard media features is contained in the W3C CSS Media Query recommendation located here: http://www.w3.org/TR/css3-mediaqueries/ Here is the official list of the 13 media features described in the standard: · width – The current width of the viewport · height – The current height of the viewport · device-width – The width of the device · device-height – The height of the device · orientation – The value portrait or landscape · aspect-ratio – The ratio of width to height · device-aspect-ratio – The ratio of device width to device height · color – The number of bits per color supported by the device · color-index – The number of colors in the color lookup table of the device · monochrome – The number of bits in the monochrome frame buffer · resolution – The density of the pixels supported by the device · scan – The values progressive or interlace (used for TVs) · grid – The values 0 or 1 which indicate whether the device supports a grid or a bitmap Many of the media features in the list above support the min- and max- prefix. For example, you can test for the min-width using a query like this: (min-width:800px) You can use the logical and operator with media queries when you need to check whether a device supports more than one feature. For example, the following query returns true only when the width of the device is between 800 and 1,200 pixels: (min-width:800px) and (max-width:1200px) Finally, you can use the different media types – all, braille, embossed, handheld, print, projection, screen, speech, tty, tv — with a media query. For example, the following media query only applies to a page when a page is being printed in color: print and (color) If you don’t specify a media type then media type all is assumed. Using Metro Style Media Features Microsoft has extended the standard list of media features which you can include in a media query with two custom media features: · -ms-high-contrast – The values any, black-white, white-black · -ms-view-state – The values full-screen, fill, snapped, device-portrait You can take advantage of the –ms-high-contrast media feature to make your web application more accessible to individuals with disabilities. In high contrast mode, you should make your application easier to use for individuals with vision disabilities. The –ms-view-state media feature enables you to detect the state of an application. For example, when an application is snapped, the application only occupies part of the available screen real estate. The snapped application appears on the left or right side of the screen and the rest of the screen real estate is dominated by the fill application (Metro style applications can only be snapped on devices with a horizontal resolution of greater than 1,366 pixels). Here is a page which contains style rules for an application in both a snap and fill application state: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>MyWinWebApp</title> <style type="text/css"> html { font-family:'Segoe UI Semilight'; font-size: xx-large; } @media screen and (-ms-view-state:snapped) { html { background-color: lime; } } @media screen and (-ms-view-state:fill) { html { background-color: red; } } </style> </head> <body> <p class="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. </p> </body> </html> When the application is snapped, the application appears with a lime background color: When the application state is fill then the background color changes to red: When the application takes up the entire screen real estate – it is not in snapped or fill state – then no special style rules apply and the application appears with a white background color. Querying Media Features with JavaScript You can perform media queries using JavaScript by taking advantage of the window.msMatchMedia() method. This method returns a MSMediaQueryList which has a matches method that represents success or failure. For example, the following code checks whether the current device is in portrait mode: if (window.msMatchMedia("(orientation:portrait)").matches) { console.log("portrait"); } else { console.log("landscape"); } If the matches property returns true, then the device is in portrait mode and the message “portrait” is written to the Visual Studio JavaScript Console window. Otherwise, the message “landscape” is written to the JavaScript Console window. You can create an event listener which triggers code whenever the results of a media query changes. For example, the following code writes a message to the JavaScript Console whenever the current device is switched into or out of Portrait mode: window.msMatchMedia("(orientation:portrait)").addListener(function (mql) { if (mql.matches) { console.log("Switched to portrait"); } }); Be aware that the event listener is triggered whenever the result of the media query changes. So the event listener is triggered both when you switch from landscape to portrait and when you switch from portrait to landscape. For this reason, you need to verify that the matches property has the value true before writing the message. Summary The goal of this blog entry was to explain how CSS media queries work in the context of a Metro style application written with JavaScript. First, you were provided with an overview of the W3C CSS Media Query recommendation. You learned about the standard media features which you can query such as width and orientation. Next, we focused on the Microsoft extensions to media queries. You learned how to use –ms-view-state to detect whether a Metro style application is in “snapped” or “fill” state. You also learned how to use the msMatchMedia() method to perform a media query from JavaScript.

Read the article

Update records in OAF Page

- by PRajkumar

1. Create a Search Page to Create a page please go through the following link https://blogs.oracle.com/prajkumar/entry/create_oaf_search_page 2. Implement Update Action in SearchPG Right click on ResultTable in SearchPG > New > Item Set following properties for New Item Attribute Property ID UpdateAction Item Style image Image URI updateicon_enabled.gif Atribute Set /oracle/apps/fnd/attributesets/Buttons/Update Prompt Update Additional Text Update record Height 24 Width 24 Action Type fireAction Event update Submit True Parameters Name – PColumn1 Value -- ${oa.SearchVO1.Column1} Name – PColumn2 Value -- ${oa.SearchVO1.Column2} 3. Create a Update Page Right click on SearchDemo > New > Web Tier > OA Components > Page Name – UpdatePG Package – prajkumar.oracle.apps.fnd.searchdemo.webui 4. Select the UpdatePG and go to the strcuture pane where a default region has been created 5. Select region1 and set the following properties: Attribute Property ID PageLayoutRN Region Style PageLayout AM Definition prajkumar.oracle.apps.fnd.searchdemo.server.SearchAM Window Title Update Page Window Title Update Page Auto Footer True 6. Create the Second Region (Main Content Region) Select PageLayoutRN right click > New > Region ID – MainRN Region Style – messageComponentLayout 7. Create first Item (Empty Field) MainRN > New > messageTextInput Attribute Property ID Column1 Style Property messageTextInput Prompt Column1 Data Type VARCHAR2 Length 20 Maximum Length 100 View Instance SearchVO1 View Attribute Column1 8. Create second Item (Empty Field) MainRN > New > messageTextInput Attribute Property ID Column2 Style Property messageTextInput Prompt Column2 Data Type VARCHAR2 Length 20 Maximum Length 100 View Instance SearchVO1 View Attribute Column2 9. Create a container Region for Apply and Cancel Button in UpdatePG Select MainRN of UpdatePG MainRN > messageLayout Attribute Property Region ButtonLayout 10. Create Apply Button Select ButtonLayout > New > Item Attribute Property ID Apply Item Style submitButton Attribute /oracle/apps/fnd/attributesets/Buttons/Apply 11. Create Cancel Button Select ButtonLayout > New > Item Attribute Property ID Cancel Item Style submitButton Attribute /oracle/apps/fnd/attributesets/Buttons/Cancel 12. Add Page Controller for SearchPG Right Click on PageLayoutRN of SearchPG > Set New Controller Name – SearchCO Package -- prajkumar.oracle.apps.fnd.searchdemo.webui Add Following code in Search Page controller SearchCO import oracle.apps.fnd.framework.webui.OAPageContext; import oracle.apps.fnd.framework.webui.beans.OAWebBean; import oracle.apps.fnd.framework.webui.OAWebBeanConstants; import oracle.apps.fnd.framework.webui.beans.layout.OAQueryBean; public void processRequest(OAPageContext pageContext, OAWebBean webBean) { super.processRequest(pageContext, webBean); OAQueryBean queryBean = (OAQueryBean)webBean.findChildRecursive("QueryRN"); queryBean.clearSearchPersistenceCache(pageContext); } public void processFormRequest(OAPageContext pageContext, OAWebBean webBean) { super.processFormRequest(pageContext, webBean); if ("update".equals(pageContext.getParameter(EVENT_PARAM))) { pageContext.setForwardURL("OA.jsp?page=/prajkumar/oracle/apps/fnd/searchdemo/webui/UpdatePG", null, OAWebBeanConstants.KEEP_MENU_CONTEXT, null, null, true, OAWebBeanConstants.ADD_BREAD_CRUMB_NO, OAWebBeanConstants.IGNORE_MESSAGES); } } 13. Add Page Controller for UpdatePG Right Click on PageLayoutRN of UpdatePG > Set New Controller Name – UpdateCO Package -- prajkumar.oracle.apps.fnd.searchdemo.webui Add Following code in Update Page controller UpdateCO import oracle.apps.fnd.framework.webui.OAPageContext; import oracle.apps.fnd.framework.webui.beans.OAWebBean; import oracle.apps.fnd.framework.webui.OAWebBeanConstants; import oracle.apps.fnd.framework.OAApplicationModule; import java.io.Serializable; public void processRequest(OAPageContext pageContext, OAWebBean webBean) { super.processRequest(pageContext, webBean); OAApplicationModule am = pageContext.getApplicationModule(webBean); String Column1 = pageContext.getParameter("PColumn1"); String Column2 = pageContext.getParameter("PColumn2"); Serializable[] params = { Column1, Column2 }; am.invokeMethod("updateRow", params); } public void processFormRequest(OAPageContext pageContext, OAWebBean webBean) { super.processFormRequest(pageContext, webBean); OAApplicationModule am = pageContext.getApplicationModule(webBean); if (pageContext.getParameter("Apply") != null) { am.invokeMethod("apply"); pageContext.forwardImmediately("OA.jsp?page=/prajkumar/oracle/apps/fnd/searchdemo/webui/SearchPG", null, OAWebBeanConstants.KEEP_MENU_CONTEXT, null, null, false, // retain AM OAWebBeanConstants.ADD_BREAD_CRUMB_NO); } else if (pageContext.getParameter("Cancel") != null) { am.invokeMethod("rollback"); pageContext.forwardImmediately("OA.jsp?page=/prajkumar/oracle/apps/fnd/searchdemo/webui/SearchPG", null, OAWebBeanConstants.KEEP_MENU_CONTEXT, null, null, false, // retain AM OAWebBeanConstants.ADD_BREAD_CRUMB_NO); } } 14. Add following Code in SearchAMImpl import oracle.apps.fnd.framework.server.OAApplicationModuleImpl; import oracle.apps.fnd.framework.server.OAViewObjectImpl; public void updateRow(String Column1, String Column2) { SearchVOImpl vo = (SearchVOImpl)getSearchVO1(); vo.initQuery(Column1, Column2); } public void apply() { getTransaction().commit(); } public void rollback() { getTransaction().rollback(); } 15. Add following Code in SearchVOImpl import oracle.apps.fnd.framework.server.OAViewObjectImpl; public void initQuery(String Column1, String Column2) { if ((Column1 != null) && (!("".equals(Column1.trim())))) { setWhereClause("column1 = :1 AND column2 = :2"); setWhereClauseParams(null); // Always reset setWhereClauseParam(0, Column1); setWhereClauseParam(1, Column2); executeQuery(); } } 16. Congratulation you have successfully finished. Run Your Search page and Test Your Work

Read the article

CodePlex Daily Summary for Monday, December 10, 2012

CodePlex Daily Summary for Monday, December 10, 2012Popular ReleasesMOBZcript: MOBZcript 0.9.1: First fix - typo in mobzystems.com-url!Media Companion: MediaCompanion3.511b release: Two more bug fixes: - General Preferences were not getting restored - Fanart and poster image files were being locked, preventing changes to themVodigi Open Source Interactive Digital Signage: Vodigi Release 5.5: The following enhancements and fixes are included in Vodigi 5.5. Vodigi Administrator - Manage Music Files - Add Music Files to Image Slide Shows - Manage System Messages - Display System Messages to Users During Login - Ported to Visual Studio 2012 and MVC 4 - Added New Vodigi Administrator User Guide Vodigi Player - Improved Login/Schedule Startup Procedure - Startup Using Last Known Schedule when Disconnected on Startup - Improved Check for Schedule Changes - Now Every 15 Minutes - Pla...Secretary Tool: Secretary Tool v1.1.0: I'm still considering this version a beta version because, while it seems to work well for me, I haven't received any feedback and I certainly don't want anyone relying solely on this tool for calculations and such until its correct functioning is verified by someone. This version includes several bug fixes, including a rather major one with Emergency Contact Information not saving. Also, reporting is completed. There may be some tweaking to the reporting engine, but it is good enough to rel...VidCoder: 1.4.10 Beta: Added progress percent to the title bar/task bar icon. Added MPLS information to Blu-ray titles. Fixed the following display issues in Windows 8: Uncentered text in textbox controls Disabled controls not having gray text making them hard to identify as disabled Drop-down menus having hard-to distinguish white on light-blue text Added more logging to proxy disconnect issues and increased timeout on initial call to help prevent timeouts. Fixed encoding window showing the built-in pre...WPF Application Framework (WAF): WPF Application Framework (WAF) 2.5.0.400: Version 2.5.0.400 (Release): This release contains the source code of the WPF Application Framework (WAF) and the sample applications. Requirements .NET Framework 4.0 (The package contains a solution file for Visual Studio 2010) The unit test projects require Visual Studio 2010 Professional Changelog Legend: [B] Breaking change; [O] Marked member as obsolete Update the documentation. InfoMan: Write the documentation. Other Downloads Downloads OverviewHome Access Plus+: v8.5: v8.5.1208.1500 This is a point release, for the other parts of HAP+ see the v8.3 release. Fixed: #me#me issue with the Edit Profile Link Updated: 8.5.1208 release Updated: Documentation with hidden booking system feature Added: Room Drop Down to the Booking System (no control panel interface), can be Resource Specific Fixed: Recursive AD Group Membership Lookup Fixed: User.IsInRole with recursive lookup Added: Group Searches to hidefrom and showto for the booking system Added: DFS Targeting ...Ynote Classic: Ynote Classic version 1.0: Ynote Classic is a text editor made by SS Corporation. It can help you write code by providing you with different codes for creation of html or batch files. You can also create C/C++ /Java files with SS Ynote Classic. Author of Ynote Classic is Samarjeet Singh. Ynote Classic is available with different themes and skins. It can also compile *.bat files into an executable file. It also has a calculator built within it. 1st version released of 6-12-12 by Samarjeet Singh. Please contact on http:...Http Explorer: httpExplorer-1.1: httpExplorer now has the ability to connect to http server via web proxies. The proxy may be explicitly specified by hostname or IP address. Or it may be specified via the Internet Options settings of Windows. You may also specify credentials to pass to the proxy if the proxy requires them. These credentials may be NTLM or basic authentication (clear text username and password).Bee OPOA Platform: Bee OPOA Demo V1.0.001: Initial version.Microsoft Ajax Minifier: Microsoft Ajax Minifier 4.78: Fix for issue #18924 - using -pretty option left in ///#DEBUG blocks. Fix for issue #18980 - bad += optimization caused bug in resulting code. Optimization has been removed pending further review.XNA GPU Particles Tool: Multi-Effect Release 20525: This version allows creating multiple effects with multiple emitters. Load, change and save particle effects. Display them in various ways to help design the effect. There are also some help pages to explain what the main settings do. This includes some preset emitter settings and a camera position for a First Person view. Source code only for XNA 4 and Visual Studio express 2010.Implementing Google Protocol Buffers using C#: Console Application: Compiled Version of the Application. The application is developed using MS.NET 4.0 run time.MB Tools: WDSMulticastMonitor V2.0: Updated version of WDSMulticast Monitor: Uses WdsTransportManger Comobject instead of WdsManager, this means that it works on servers that only have the transport role installed. Old version required the full WDS role to be installed to work. Some minor bugfixes and extra errorchecks added Added Transfererate to output, although this seems to work only sporadic. Its not a limitation of this script though, when not outputing anything in script niether is the normal wds tools.Yahoo! UI Library: YUI Compressor for .Net: Version 2.2.0.0 - Epee: New : Web Optimization package! Cleaned up the nuget packages BugFix: minifying lots of files will now be faster because of a recent regression in some code. (We were instantiating something far too many times).DtPad - .NET Framework text editor: DtPad 2.9.0.40: http://dtpad.diariotraduttore.com/files/images/flag-eng.png English + A new built-in editor for the management of CSV files, including the edit of cells, deleting and adding new rows, replacement of delimiter character and much more (issue #1137) + The limit of rows allowed before the decommissioning of their side panel has been raised (new default: 1.000) (issue #1155, only partially solved) + Pressing CTRL+TAB now DtPad opens a screen that shows the list of opened tabs (issue #1143) + Note...AvalonDock: AvalonDock 2.0.1746: Welcome to the new release of AvalonDock 2.0 This release contains a lot (lot) of bug fixes and some great improvements: Views Caching: Content of Documents and Anchorables is no more recreated everytime user move it. Autohide pane opens really fast now. Two new themes Expression (Dark and Light) and Metro (both of them still in experimental stage). If you already use AD 2.0 or plan to integrate it in your future projects, I'm interested in your ideas for new features: http://avalondock...AcDown?????: AcDown????? v4.3.2: ??●AcDown??????????、??、??、???????。????，????，?????????????????????????。???????????Acfun、????(Bilibili)、??、??、YouTube、??、???、??????、SF????、????????????。 ●??????AcPlay?????，??????、????????????????。 ● AcDown??????????????????，????????????????????????????。 ● AcDown???????C#??，????.NET Framework 2.0??。?????"Acfun?????"。 ?? v4.3.2?? ?????????????????? ??Acfun??????? ??Bilibili?????? ??Bilibili???????????? ??Bilibili????????? ??????????????? ???? ??Bilibili??????? ????32??64? Windows XP/...ExtJS based ASP.NET 2.0 Controls: FineUI v3.2.2: ??FineUI ?? ExtJS ??? ASP.NET 2.0 ???。 FineUI??? ?? No JavaScript，No CSS，No UpdatePanel，No ViewState，No WebServices ???????。 ?????? IE 7.0、Firefox 3.6、Chrome 3.0、Opera 10.5、Safari 3.0+ ???? Apache License 2.0 (Apache) ???? ??：http://fineui.com/bbs/ ??：http://fineui.com/demo/ ??：http://fineui.com/doc/ ??：http://fineui.codeplex.com/ ???? +2012-12-03 v3.2.2 -?????????????，?????button/button_menu.aspx（????）。 +?Window????Plain??；?ToolbarPosition??Footer??；?????FooterBarAlign??。 -????win...Player Framework by Microsoft: Player Framework for Windows Phone 8: This is a brand new version of the Player Framework for Windows Phone, available exclusively for Windows Phone 8, and now based upon the Player Framework for Windows 8. While this new version is not backward compatible with Windows Phone 7 (get that http://smf.codeplex.com/releases/view/88970), it does offer the same great feature set plus dozens of new features such as advertising, localization support, and improved skinning. Click here for more information about what's new in the Windows P...New ProjectsConfigMgrUI: UI for System Center Configuration Manager 2007 & 2012, System Center Orchestrator 2012 and MDT. cvn demo poject: just a test projectDelicious Notify Plugin: Lets you push a blog post straight to Delicious from Live WriterInsert Acronym Tags: Lets you insert <acronym> and <abbr> tags into your blog entry more easily.Insert File(s): Allows you to include up to three files for publishing in a post using Windows Live Writer.Insert Quick Link: Allows you to paste a link into the Writer window and have the a window similar to the one in Writer where you can change what text is to appear, open in new window, etc.ISD training tasks: ISD training examples and tasksjack1209132501: tesingjack12091327: tesingKata: Just a couple of solutions to katas found over around the web.KJFramework????(Mono Version): KJFramework????(Mono Version)Liber: The Dynamic library manager Managing Ebook and derivatives under different Tags & Properties Share Libers under PUBLIC TAGS in the LIBER Community... Libro Visual Basic 2012 spiegato a mia nonna: Tutti gli esempi del libro "Visual Basic 2012 spiegato a mia nonna". Work in progress...log4net SharePoint 2013 Appender: log4net SharePoint 2013 AppenderMethodSerializer: .NET Method Serializer DeserializerMGR.VSSolutionManager: MGR.VSSolutionManager is a tool to help to manage (update, compare, merge) Visual Studio's solution files.MIAGE IHM: BlablaPCV_Tutorial: PCV_TutorialRoll Manager: Roll Manager is a client/server application that makes it easy to create scripts with many actions that run against groups of servers. No more DOS batch scripts. It's developed in C# .NET 3.5.RootFinder: Comprehensive implementation of a 1D RootFinder framework solution - implements the full suite of bracketing and open methods, and their primitives/compoundSGF Editor: SGF Editor reads/writes .sgf files, edits Go game trees, etc. It has several useful commands for reviewing games. For searching purposes: goban, baduk, weiqi.SharePoint 365 Utilities: SharePoint 365 aims helping SharePoint developers improve the delivery time of SharePoint solutions by offering a set of utilities for DEV/Deploy/Maintenance.SNMP: ????windwos api ? WinSNMP API ??????Stock Analitator: Stock Analyzer using Relative Strength IndexTPV: TPVTrending Topic Component: This component is a final assignment of Component Based Programming in Duta Wacana Christian Univerity, Yogyakarta, IndonesiaVisual .NET RogueLike: A basic roguelike hacked out in Visual .NET. I'm unsure where I want to go with the project, so I'm just putting it out there for now.YooYoo: Personal DevelopingYou are here (for Windows Mobile): This sample shows you how to play a *.wav file on your device with Compact Framework 2.0. There is better support for playing music on Compact Framework 3.5. The idea of this sample is from this video: http://www.youtube.com/watch?v=xMcSNfrT-4MZoom.PE: PE read/write libraryZX AAA Workshop: ????????? ZX AAA Workshop ????????????? ??? ????????? ???????? ? ???? ?????????? ?????????? ZX Spectrum. ?????????????? ?????????: Specaculator, Unreal, Fuse. ??????????? ?????????? ????????? ?????? ?????????? ?????????????. ?????????? ?????? ? ??????? png, gif, bmp, tiff, jpeg.???????? ??????? ?????????? ? Visual Studio: ???????? ??????? ?????????? ? Visual Studio

Read the article

CodePlex Daily Summary for Friday, May 09, 2014

CodePlex Daily Summary for Friday, May 09, 2014Popular ReleasesQuickMon: Version 3.9: First official release of the PowerShell script Collector. Corrective script can now also be PowerShell scripts! There are a couple of internal bugfixes to the core components as well. e.g. Overriding remote host setting now applies to ALL child collectors Main UI app now indicates (in Window title) if there are changes that needs to be saved. Polling frequency can be adjusted by 'slide bar' Note: If you have issues with the new PowerShell script collector please see my post about issu...51Degrees.mobi - Mobile Device Detection and Redirection: 2.1.21.4: One Click Install from NuGet Changes to Version 2.1.21.4The ReadStrings method of the binary reader will now convert strings straight from ASCII as they’re now being written in the data file as ASCII only. The ReadCollection method of the binary reader will now return arrays of integers rather than generic lists to reduce memory consumption. This change has required some public methods to use IList rather the List types. 3rd party source code that accesses the library via these methods may...Media Companion: Media Companion MC3.597b: Thank you for being patient, againThere are a number of fixes in place with this release. and some new features added. Most are self explanatory, so check out the options in Preferences. Couple of new Features:* Movie - Allow save Title and Sort Title in Title Case format. * Movie - Allow save fanart.jpg if movie in folder. * TV - display episode source. Get episode source from episode filename. Fixed:* Movie - Added Fill Tags from plot keywords to Batch Rescraper. * Movie - Fixed TMDB s...SimCityPak: SimCityPak 0.3.0.0: Contains several bugfixes, newly identified properties and some UI improvements. Main new features UI overhaul for the main index list: Icons for each different index, including icons for different property files Tooltips for all relevant fields Removed clutter Identified hundreds of additional properties (thanks to MaxisGuillaume) - this should make modding gameplay easierSeal Report: Seal Report 1.4: New Features: Report Designer: New option to convert a Report Source into a Repository Source. Report Designer: New contextual helper menus to select, remove, copy, prompt elements in a model. Web Server: New option to expand sub-folders displayed in the tree view. Web Server: Web Folder Description File can be a .cshtml file to display a MVC View. Views: additional CSS parameters for some DIVs. NVD3 Chart: Some default configuration values have been changed. Issues Addressed:16 ...Magick.NET: Magick.NET 6.8.9.002: Magick.NET linked with ImageMagick 6.8.9.0.VidCoder: 1.5.22 Beta: Added ability to burn SRT subtitles. Updated to HandBrake SVN 6169. Added checks to prevent VidCoder from running with a database version newer than it expects. Tooltips in the Advanced Video panel now trigger on the field labels as well as the fields themselves. Fixed updating preset/profile/tune/level settings on changing video encoder. This should resolve some problems with QSV encoding. Fixed tunes and profiles getting set to blank when switching between x264 and x265. Fixed co...NuGet: NuGet 2.8.2: We will be releasing a 2.8.2 version of our own NuGet packages and the NuGet.exe command-line tool. The 2.8.2 release will not include updated VS or WebMatrix extensions. NuGet.Server.Extensions.dll needs to be used alongside NuGet-Signed.exe to provide the NuGet.exe mirror functionality.babelua: 1.5.3: V1.5.3 - 2014.5.6Stability improvement: support relative path when debugging lua files; improve variable view function in debugger; fix a bug that when a file is loaded at runtime , its breakpoints would not take effect; some other bug fix; New feature: improve tool windows color scheme to look better with different vs themes; comment/uncomment code block easily; some other improve;SmartStore.NET - Free ASP.NET MVC Ecommerce Shopping Cart Solution: SmartStore.NET 2.0.2: SmartStore.NET 2.0.2 is primarily a maintenance release for version 2.0.0, which has been released on April 04 2014. It contains several improvements & important fixes. BugfixesIMPORTANT FIX: Memory leak leads to OutOfMemoryException in application after a while Installation fix: some varchar(MAX) columns get created as varchar(4000). Added a migration to fix the column specs. Installation fix: Setup fails with exception Value cannot be null. Parameter name: stream Bugfix for stock iss...Channel9's Absolute Beginner Series: Windows Phone 8.1: Entire source code for Windows Phone 8.1 Absolute Beginner Series.BIDS Helper: BIDS Helper 1.6.6: This BIDS Helper beta release brings support for SQL Server 2014 and SSDTBI for Visual Studio 2013. (Note that SSDTBI for Visual Studio 2013 is currently unavailable to download from Microsoft. We are releasing BIDS Helper support to help those who downloaded it before it became unavailable, and we will recheck BIDS Helper 2014 is compatible after SSDTBI becomes available to download again.) BIDS Helper 2014 Beta Limitations: SQL Server 2014 support for Biml is still in progress, so this bet...Windows Phone IsoStoreSpy (a cool WP8.1 + WP8 Isolated Storage Explorer): IsoStoreSpy WP8.1 3.0.0.0 (Win8 only): 3.0.0.0 + WP8.1 & WP8 device allowed + Local, Roaming or Temp directory Selector for WindowsRuntime apps + Version number in the title :)CS-Script for Notepad++ (C# intellisense and code execution): Release v1.0.24.0: ShortcutMapping panel now allows direct modification of the shortcuts. Custom updater dropped support for MSI installation but it still allows downloading of MSI http://www.csscript.net/npp/codeplex/non_msi_update.pngProDinner - ASP.NET MVC Sample (EF5, N-Tier, jQuery): 8.2: upgrade to mvc 5 upgrade to ASP.net MVC Awesome 4.0, EF 6.1, latest jcrop, Windsor Castle etc. ability to show/hide the dog using tinymce for the feedback page mobile friendly uiASP.net MVC Awesome - jQuery Ajax Helpers: 4.0: version 4.0 ========================== - added InitPopup, InitPopupForm helpers, open initialized popups using awe.open(name, params) - added Tag or Tags for all helpers, usable in mod code - added popup aweclose, aweresize events - popups have api accessible via .data('api'), with methods open, close and destroy - all popups have .awe-popup class - popups can be grouped using .Group(string), only 1 popup in the same group can exist at the same time - added awebeginload event for...SEToolbox: SEToolbox 01.028.008 Release 2: Fixes for drag-drop copying. Added ship joiner, to rejoin a broken ship! Installation of this version will replace older version.ScreenToGif: Release 1.0: What's new: • Small UI tweaks everywhere. • You can add Text, Subtitles and Title Frames. • Processing the gif now takes less time. • Languages: Spanish, Italian and Tamil added. • Single .exe multi language. • Takes less time to apply blur and pixelated efect. • Restart button. • Language picker. (If the user wants to select a diferent language than the system's) • "Encoding Finished" page with a link to open the file. • GreenScreen unchanged pixels to save kilobytes. • "Check for Updates" t...Touchmote: Touchmote 1.0 beta 11: Changes Support for multiple monitor setup Additional settings for analog sticks More reliable pairing Bug fixes and improvementsPowerShell App Deployment Toolkit: PowerShell App Deployment Toolkit v3.1.2: Added Get-IniValue / Set-IniValue functions. Replaces Get-IniContent / Set-IniContent which were a bit unwieldy. The new functions are much easier to use. Added -Value parameter to Get-RegistryKey so that a specific registry value can be retrieved instead of the entire Key as an object Fixed Test-Battery to work with machines that can have multiple batteries Fixed issue where BlockExecution would fail if a Custom Temp Path was specified in the config file Updated examples with latest ...New ProjectsAgriComer: Este proyecto es creado con el objetivo inicial de ofrecer una herramienta integral para el comercio agrícola.AST - a tool for exploring windows kernel: A project for exploring windows kernel. It is consist of a Winform for presentation(by C#), and a windows driver(by C). VS2013 + WDK8.1 are required.CondimarSW: Sistema de ventasDeco Pattern: This project shows how the deco design pattern works.Geïntegreerd Project GH5: Geïntegreerd project .NET voor groep GH5Groep_EF4: PXL Groep EF4HttpRequestor: HttpRequestor is a nifty little tool for web developers, developed using Windows Forms, to make different types of HTTP requests to a web endpoint. IBehaviorPortable: This project has a single goal: to make it possible to write behaviors in a PCLKalkulator: Unit Test dan Coded UI TestLorenOS: LorenOS, an operating system based on MikeOSModernUI Extend: ModernUI ExtendPetite Scheme auto-execute pipeline: This program was originally created to avoid the steep learning curve of Emacs, and allow any editor to be used with ease for Chez Petite Scheme.projectgroep3.net: .net project for schoolReadable Athens (Hold-Cold Interactive Map): Demo application for Readable Athens art project Pins JPGs on map (using GPS EXIF info), shows at pin hover, louder noise closer to more text (*.jpg.txt OCRed)Training_Network_Messenger: Training network messengerTsLinq: This is a linq like implementation for typescript. Because typescript gets compiled into javascript, you can use this library for common javascript too.TSQL Smells SSDT: TSQL 'smells' finders TSQL Code can smell, it may work just fine but there can be hidden dangers held within. ??????-??????【??】????????: ?????????????????????????????,??????????,????,????,?????????、??????,??????。??????-??????【??】????????: ????????????????,?????????????? ??。????????、????、????、?????????? ???????。????-????【??】??????: ??????,??????:?????,?????,??????,??????????,????????。????????!?????-?????【??】???????: ?????????????????????????,????,????,??????????。???????????????,??,??,??????????,??????...?????-?????【??】?????????: ??????????????????????:????、????、??????????????,????????。????????!???????-???????【??】?????????: ???????????????????,???????????,??????????????,??????????，??????????????！???????-???????????: ????????????????,???????????????。???????????,??????:????、????、???????！?????-?????【??】???????: ??????????????????,?????????????,????,??????????,?????????????,?????,?????!??????-??????【??】??????????: ??????????????、????、????、??????、????、????????,????????、?????????,?????。??????-??????【??】??????????: ?????????????????,??????????????、???????、???????、???????、?????！??????-??????【??】??????????: ?????????????????,?????????????。?????????????????,???????,???????,?????,?????。????-????【??】??????: ???? ???? ???? ???? ???? ???? ???? ??????? ?????，????????????????.????-????【??】????????: ????????????????????????,???????????,????????,?????????????????????。??????-??????【??】????????: ????????????????,????,????,??????,????“????、????、????、????”????????,??????.??????-??????【??】??????????: ??????????????????????,????“???????,???????”?????,????????????！?????-?????【??】???????: ????????????,?????,???????????,???????,????,????,????,?????。?????-?????【??】?????????: ???????????????????,????????:??、??、???,?????????????????????!?????-?????【??】???????: ???????????????????,????????????????,????????????????,??????！??????-??????【??】????????: ????????????????????,??????????,????????、????,??????????,??????????。??????-??????【??】??????????: ????????????????、????,??100%????,??????,????????????,???????????!??????-??????【??】??????????: ????????????????6?,???????????????????????????,??????????????,?????????！????-????【??】????????: ??????????、???、??、??????????????????????????????,????????????????! ????-????【??】????????: ???????????????????????????、????、????、???????????,????,????!?????-?????【??】???????: ???????????,????,??????????? ???? ???? ?????????,???,??,?????!

Read the article

CodePlex Daily Summary for Saturday, May 10, 2014

CodePlex Daily Summary for Saturday, May 10, 2014Popular ReleasesTerraMap (Terraria World Map Viewer): TerraMap 1.0.3.14652: Added support for the new Terraria v1.2.4 update. New items, walls, and tiles The setup file will make sure .NET 4 is installed, install TerraMap, create desktop and start menu shortcuts, add a .wld file association, and launch TerraMap. If you prefer the zip file, make sure you have .NET Framework v4.5 installed, then just download and extract the ZIP file, and run TerraMap.exe.R.NET: R.NET 1.5.12: R.NET 1.5.12 is a beta release towards R.NET 1.6. You are encouraged to use 1.5.12 now and give feedback. See the documentation for setup and usage instructions. Main changes for R.NET 1.5.12: The C stack limit was not disabled on Windows. For reasons possibly peculiar to R, this means that non-concurrent access to R from multiple threads was not stable. This is now fixed, with the fix validated with a unit test. Thanks to Odugen, skyguy94, and previously others (evolvedmicrobe, tomasp) fo...CTI Text Encryption: CTI Text Encryption 5.2: Change log: 5.2 - Remove Cut button. - Fixed Reset All button does not reset encrypted text column. - Switch button location between Copy and Paste. - Enable users to use local fonts to display characters of their language correctly. (A font settings file will be saved at the same folder of this program.) 5.1 - Improve encryption process. - Minor UI update. - Version 5.1 is not compatible with older version. 5.0 - Improve encryption algorithm. - Simply inner non-encryption related mec...SEToolbox: SEToolbox 01.029.006 Release 1: Fix to allow keyboard search on load dialog. (type the first few letters of your save) Fixed check for new release. Changed the way ship details are loaded to alleviate load time for worlds with very large ships (100,000+ blocks). Fixed Image importer, was incorrectly listing 'Asteroid' as import option. Minor changes to menus (text and appearance) for clarity and OS consistency. Added in reading of world palette for color dialog editor. WIP on subsystem editor. Can now multiselec...Media Companion: Media Companion MC3.597b: Thank you for being patient, againThere are a number of fixes in place with this release. and some new features added. Most are self explanatory, so check out the options in Preferences. Couple of new Features:* Movie - Allow save Title and Sort Title in Title Case format. * Movie - Allow save fanart.jpg if movie in folder. * TV - display episode source. Get episode source from episode filename. Fixed:* Movie - Added Fill Tags from plot keywords to Batch Rescraper. * Movie - Fixed TMDB s...SimCityPak: SimCityPak 0.3.0.0: Contains several bugfixes, newly identified properties and some UI improvements. Main new features UI overhaul for the main index list: Icons for each different index, including icons for different property files Tooltips for all relevant fields Removed clutter Identified hundreds of additional properties (thanks to MaxisGuillaume) - this should make modding gameplay easierSeal Report: Seal Report 1.4: New Features: Report Designer: New option to convert a Report Source into a Repository Source. Report Designer: New contextual helper menus to select, remove, copy, prompt elements in a model. Web Server: New option to expand sub-folders displayed in the tree view. Web Server: Web Folder Description File can be a .cshtml file to display a MVC View. Views: additional CSS parameters for some DIVs. NVD3 Chart: Some default configuration values have been changed. Issues Addressed:16 ...Magick.NET: Magick.NET 6.8.9.002: Magick.NET linked with ImageMagick 6.8.9.0.VidCoder: 1.5.22 Beta: Added ability to burn SRT subtitles. Updated to HandBrake SVN 6169. Added checks to prevent VidCoder from running with a database version newer than it expects. Tooltips in the Advanced Video panel now trigger on the field labels as well as the fields themselves. Fixed updating preset/profile/tune/level settings on changing video encoder. This should resolve some problems with QSV encoding. Fixed tunes and profiles getting set to blank when switching between x264 and x265. Fixed co...NuGet: NuGet 2.8.2: We will be releasing a 2.8.2 version of our own NuGet packages and the NuGet.exe command-line tool. The 2.8.2 release will not include updated VS or WebMatrix extensions. NuGet.Server.Extensions.dll needs to be used alongside NuGet-Signed.exe to provide the NuGet.exe mirror functionality.DNN CMS Platform: 07.03.00 BETA (Not For Production Use): DNN 7.3 release is focused on performance and we have made a variety of changes to improve the run-time characteristics of the platform. End users will notice faster page response time and administrators will appreciate a more responsive user experience, especially on larger scale web sites. This is a BETA release and is NOT recommended for production use. There is no upgrade path offered from this release to the final DNN 7.3 release. Known Issues - The Telerik RAD Controls for ASP.NET AJA...SmartStore.NET - Free ASP.NET MVC Ecommerce Shopping Cart Solution: SmartStore.NET 2.0.2: SmartStore.NET 2.0.2 is primarily a maintenance release for version 2.0.0, which has been released on April 04 2014. It contains several improvements & important fixes. BugfixesIMPORTANT FIX: Memory leak leads to OutOfMemoryException in application after a while Installation fix: some varchar(MAX) columns get created as varchar(4000). Added a migration to fix the column specs. Installation fix: Setup fails with exception Value cannot be null. Parameter name: stream Bugfix for stock iss...Channel9's Absolute Beginner Series: Windows Phone 8.1: Entire source code for Windows Phone 8.1 Absolute Beginner Series.BIDS Helper: BIDS Helper 1.6.6: This BIDS Helper beta release brings support for SQL Server 2014 and SSDTBI for Visual Studio 2013. (Note that SSDTBI for Visual Studio 2013 is currently unavailable to download from Microsoft. We are releasing BIDS Helper support to help those who downloaded it before it became unavailable, and we will recheck BIDS Helper 2014 is compatible after SSDTBI becomes available to download again.) BIDS Helper 2014 Beta Limitations: SQL Server 2014 support for Biml is still in progress, so this bet...Windows Phone IsoStoreSpy (a cool WP8.1 + WP8 Isolated Storage Explorer): IsoStoreSpy WP8.1 3.0.0.0 (Win8 only): 3.0.0.0 + WP8.1 & WP8 device allowed + Local, Roaming or Temp directory Selector for WindowsRuntime apps + Version number in the title :)CS-Script for Notepad++ (C# intellisense and code execution): Release v1.0.24.0: ShortcutMapping panel now allows direct modification of the shortcuts. Custom updater dropped support for MSI installation but it still allows downloading of MSI http://www.csscript.net/npp/codeplex/non_msi_update.pngProDinner - ASP.NET MVC Sample (EF5, N-Tier, jQuery): 8.2: upgrade to mvc 5 upgrade to ASP.net MVC Awesome 4.0, EF 6.1, latest jcrop, Windsor Castle etc. ability to show/hide the dog using tinymce for the feedback page mobile friendly uiASP.net MVC Awesome - jQuery Ajax Helpers: 4.0: version 4.0 ========================== - added InitPopup, InitPopupForm helpers, open initialized popups using awe.open(name, params) - added Tag or Tags for all helpers, usable in mod code - added popup aweclose, aweresize events - popups have api accessible via .data('api'), with methods open, close and destroy - all popups have .awe-popup class - popups can be grouped using .Group(string), only 1 popup in the same group can exist at the same time - added awebeginload event for...ScreenToGif: Release 1.0: What's new: • Small UI tweaks everywhere. • You can add Text, Subtitles and Title Frames. • Processing the gif now takes less time. • Languages: Spanish, Italian and Tamil added. • Single .exe multi language. • Takes less time to apply blur and pixelated efect. • Restart button. • Language picker. (If the user wants to select a diferent language than the system's) • "Encoding Finished" page with a link to open the file. • GreenScreen unchanged pixels to save kilobytes. • "Check for Updates" t...Touchmote: Touchmote 1.0 beta 11: Changes Support for multiple monitor setup Additional settings for analog sticks More reliable pairing Bug fixes and improvementsNew ProjectsADO: copy rightAntilop: Antilop is a professionnal C# business and data access framework.Bit Consulting Business Information Technology Blog: Espacio creado para todos los interesados en intercambiar información, opinar, preguntar todo lo relacionado con los productos ofrecidos por BIT CONSULTING.Black Desert C# emulator(Necroz Project): Development Black Desert emulatorDSLK: bai tap ctdl&gtFreelancerWebSecurity: FreelancerWebSecurityGlobal Machine Access: The project provides an intuitive interface computer control via the command line window. Features: - Login, logout, change password. - Execute commands inHeadTS: An alternative to the HeadJS script loader that provides a more focused, robust, promise-based script management system.How to develop an autodialer / predictive dialer in C#: This project demonstrates how to build a VoIP autodialer in C# in order to be able to make a huge amount of simultaneous calls automatically.html5demo: demo web app.NetPipe: A new piece of software in python that will allow programs to be executed on other computers / servers over a network.Observer Pattern: This project shows how the observer design pattern works.Our wedding: Ruben y Sarahi wedding 19-09-2014SpreadsheetComputations: Good stuffSpurnUI: jQuery based professional ASP.NET Controls for moblieStrategy Pattern: This project shows how the strategy design pattern works.TagIt-MP3: TagIt-MP3 is a free audio file data tagging ID3 format editor, support ID3 tag version, this audio tool can read and write metadata tags for MP3 audio files.TeamProjectDaNang: Ðà N?ng nhóm l?p trình :DThaumcraft4 Research: A small application to help players of Minecraft / Thaumcraft 4 complete their research projects.Visualize and Analyze Demand for Coding Skills, Using WPF: Use data visualization app to figure-out which job skills are most in demand. WPlayer: This project using ffmpeg library, based on Media Foundation. Yammer API SDK: A C# Yammer API SDK?????-?????【??】???????: ????????????????、?????????,??????、??????????????????,???????.??????????,????????。 ??????-??????【??】??????????: ??????????????????,???????、????、????、??????、???????,??????,???????????。?????-?????【??】???????: ??????????1992?,????????????????。??????????????????????。????????????,????，????????！ ?????-?????【??】?????????: ???????????????,???????、???????????,????????,????,?????????,??????,??????! ?????-?????【??】?????????: ???????,??????,?????????????????????,???????????????????????。?????-?????【??】???????: ???????????:?????,??????!???????????????,???????、?????、??????“??”????,????,????!?????-?????【??】???????: ???????????????????,???,??????????、???????????????????。??????,????、????，??????！ ?????-?????【??】???????: ???????????????,????,?????、???、?????,???????,?????,???????????100%。??????！ ?????-?????【??】????? ??: ?????????????????????????,???????????,??????,??????????????...????????。??????！??????-??????【??】??????????: ??????????????????,??:??????,????,????,????,?????,??????????????.??????-??????【??】??????????: ????????????????????,?????????????,???????????.????????????,????????????! ?????-?????【??】???????: ?????????????????????????,???????????,??????,??????????????...????????。??????！????-????【??】????????: ????????????????、?????、?????、????、?????,??????????。????????????????!?????-?????【??】?????????: ??????,??,????????。 ... ??????????????????、??????????????????...?????-?????【??】?????????: ?????????????:????,????,????,???????,????????,??????:????????,?????!??????-??????【??】????????: ?????????????????????、????、????、??????、???????,??????、??????。??????-??????【??】??????????: ????????,??????,?????????????????????,???????????????????????。 ?????-?????【??】???????: ??????????????????????????,??????,???????????,????????????????,????????.??????. ????-????【??】????????: ??????????????,???????、???????????,????????,????,?????????,??????,??????!?????-?????【??】?????: ?????????????????,???????、????、????、??????、???????,??????,???????????。?????-?????【??】???????: ????????????、????、????、??????、????、???????,?????,?????????!?????-?????【??】?????????: ???????????????????????、??????,????、?????、????， ?????????，?????????????！ ??????-??????【??】??????????: ?????????????????????、????、????、??????、???????,??????、??????。?????-??????【??】???????: ?????????,???????????,??????????,????:??,????,???????? ??????????,????????。??????！?????-?????【??】?????????: ???????????????????????、??????,????、?????、????， ?????????，?????????????！?????-?????【??】?????????: ??????????????、????、????、??????、????、???????,?????,?????????!??????-??????【??】??????????: ?????????????????"????,????"???,????????????????????????,??????????????。 ?????-?????【??】???????: ????????????????、?????????,??????、??????????????????,???????.??????????,????????。 ????-????【??】????????: ????????????????????????,???????????????,????????????????！ ?????-?????【??】?????????: ?????,?????????,?????????????。?????????????,?????????,???????。??????-??????【??】??????????: ????????????????,????:????,????,????,??????,?????,???????????????!?????-?????【??】???????: ???????????:?????,??????!???????????????,???????、?????、??????“??”????,????,????! ?????-?????【??】?????????: ?????????????????????????、??????????????,??????????????。?????-?????【??】?????????: ???????????????,????????????,?????????????????,??????,????????!?????-?????【??】?????????: ??????????????????????,????????????,?????、??、????,?????,??????！ ?????-?????【??】???????: ????????????????????????,????,????“???、???、???”?????,?????,?????????????????。??????！ ??????-??????【??】????????: ??????????????????????????、??????????????,??????????????。??????-??????【??】??????????: ?????????????????"????,????"???,????????????????????????,??????????????。????-????【??】????????: ????,?????????,?????????????。?????????????,?????????,???????。 ?????-?????【??】???????: ?????????????????、????、??????、????????,????????????,???????????！?????-?????【??】???????: ???????????????,????????????,?????????????????,??????,????????!?????-?????【??】?????????: ???????????????,????:????,????,????,??????,?????,???????????????! ??????-??????【??】????: ???????????????:?????? ???? ??????,???????,??????,???????。??????-??????【??】????????: ??????????????????、????、??????、????????,????????????,???????????！?????-?????【??】???????: ???????????????????,????????????,????????,???,???????????,????,????。?????,??????.????-????【??】??????: ?????????????????????????,???????????????????????,???????。?????-?????【??】???????: ???????????,????,??????????? ???? ???? ?????????,???,??,?????!

Read the article

Creating Custom Ajax Control Toolkit Controls

- by Stephen Walther

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

Read the article

Rounded Corners and Shadows – Dialogs with CSS

- by Rick Strahl

Well, it looks like we’ve finally arrived at a place where at least all of the latest versions of main stream browsers support rounded corners and box shadows. The two CSS properties that make this possible are box-shadow and box-radius. Both of these CSS Properties now supported in all the major browsers as shown in this chart from QuirksMode: In it’s simplest form you can use box-shadow and border radius like this: .boxshadow { -moz-box-shadow: 3px 3px 5px #535353; -webkit-box-shadow: 3px 3px 5px #535353; box-shadow: 3px 3px 5px #535353; } .roundbox { -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px; border-radius: 6px 6px 6px 6px; } box-shadow: horizontal-shadow-pixels vertical-shadow-pixels blur-distance shadow-color box-shadow attributes specify the the horizontal and vertical offset of the shadow, the blur distance (to give the shadow a smooth soft look) and a shadow color. The spec also supports multiple shadows separated by commas using the attributes above but we’re not using that functionality here. box-radius: top-left-radius top-right-radius bottom-right-radius bottom-left-radius border-radius takes a pixel size for the radius for each corner going clockwise. CSS 3 also specifies each of the individual corner elements such as border-top-left-radius, but support for these is much less prevalent so I would recommend not using them for now until support improves. Instead use the single box-radius to specify all corners. Browser specific Support in older Browsers Notice that there are two variations: The actual CSS 3 properties (box-shadow and box-radius) and the browser specific ones (-moz, –webkit prefixes for FireFox and Chrome/Safari respectively) which work in slightly older versions of modern browsers before official CSS 3 support was added. The goal is to spread support as widely as possible and the prefix versions extend the range slightly more to those browsers that provided early support for these features. Notice that box-shadow and border-radius are used after the browser specific versions to ensure that the latter versions get precedence if the browser supports both (last assignment wins). Use the .boxshadow and .roundbox Styles in HTML To use these two styles create a simple rounded box with a shadow you can use HTML like this:  <div class="roundbox boxshadow" style="width: 550px; border: solid 2px steelblue"> <div class="boxcontenttext"> Simple Rounded Corner Box. </div> </div> which looks like this in the browser: This works across browsers and it’s pretty sweet and simple. Watch out for nested Elements! There are a couple of things to be aware of however when using rounded corners. Specifically, you need to be careful when you nest other non-transparent content into the rounded box. For example check out what happens when I change the inside <div> to have a colored background:  <div class="roundbox boxshadow" style="width: 550px; border: solid 2px steelblue"> <div class="boxcontenttext" style="background: khaki;"> Simple Rounded Corner Box. </div> </div> which renders like this: If you look closely you’ll find that the inside <div>’s corners are not rounded and so ‘poke out’ slightly over the rounded corners. It looks like the rounded corners are ‘broken’ up instead of a solid rounded line around the corner, which his pretty ugly. The bigger the radius the more drastic this effect becomes . To fix this issue the inner <div> also has have rounded corners at the same or slightly smaller radius than the outer <div>. The simple fix for this is to simply also apply the roundbox style to the inner <div> in addition to the boxcontenttext style already applied: <div class="boxcontenttext roundbox" style="background: khaki;"> The fixed display now looks proper: Separate Top and Bottom Elements This gets even a little more tricky if you have an element at the top or bottom only of the rounded box. What if you need to add something like a header or footer <div> that have non-transparent backgrounds which is a pretty common scenario? In those cases you want only the top or bottom corners rounded and not both. To make this work a couple of additional styles to round only the top and bottom corners can be created: .roundbox-top { -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } .roundbox-bottom { -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; } Notice that radius used for the ‘inside’ rounding is smaller (4px) than the outside radius (6px). This is so the inner radius fills into the outer border – if you use the same size you may have some white space showing between inner and out rounded corners. Experiment with values to see what works – in my experimenting the behavior across browsers here is consistent (thankfully). These styles can be applied in addition to other styles to make only the top or bottom portions of an element rounded. For example imagine I have styles like this: .gridheader, .gridheaderbig, .gridheaderleft, .gridheaderright { padding: 4px 4px 4px 4px; background: #003399 url(images/vertgradient.png) repeat-x; text-align: center; font-weight: bold; text-decoration: none; color: khaki; } .gridheaderleft { text-align: left; } .gridheaderright { text-align: right; } .gridheaderbig { font-size: 135%; } If I just apply say gridheader by itself in HTML like this: <div class="roundbox boxshadow" style="width: 550px; border: solid 2px steelblue"> <div class="gridheaderleft">Box with a Header</div> <div class="boxcontenttext" style="background: khaki;"> Simple Rounded Corner Box. </div> </div> This results in a pretty funky display – again due to the fact that the inner elements render square rather than rounded corners: If you look close again you can see that both the header and the main content have square edges which jumps out at the eye. To fix this you can now apply the roundbox-top and roundbox-bottom to the header and content respectively: <div class="roundbox boxshadow" style="width: 550px; border: solid 2px steelblue"> <div class="gridheaderleft roundbox-top">Box with a Header</div> <div class="boxcontenttext roundbox-bottom" style="background: khaki;"> Simple Rounded Corner Box. </div> </div> Which now gives the proper display with rounded corners both on the top and bottom: All of this is sweet to be supported – at least by the newest browser – without having to resort to images and nasty JavaScripts solutions. While this is still not a mainstream feature yet for the majority of actually installed browsers, the majority of browser users are very likely to have this support as most browsers other than IE are actively pushing users to upgrade to newer versions. Since this is a ‘visual display only feature it degrades reasonably well in non-supporting browsers: You get an uninteresting square and non-shadowed browser box, but the display is still overall functional. The main sticking point – as always is Internet Explorer versions 8.0 and down as well as older versions of other browsers. With those browsers you get a functional view that is a little less interesting to look at obviously: but at least it’s still functional. Maybe that’s just one more incentive for people using older browsers to upgrade to a more modern browser :-) Creating Dialog Related Styles In a lot of my AJAX based applications I use pop up windows which effectively work like dialogs. Using the simple CSS behaviors above, it’s really easy to create some fairly nice looking overlaid windows with nothing but CSS. Here’s what a typical ‘dialog’ I use looks like: The beauty of this is that it’s plain CSS – no plug-ins or images (other than the gradients which are optional) required. Add jQuery-ui draggable (or ww.jquery.js as shown below) and you have a nice simple inline implementation of a dialog represented by a simple <div> tag. Here’s the HTML for this dialog: <div id="divDialog" class="dialog boxshadow" style="width: 450px;"> <div class="dialog-header"> <div class="closebox"></div> User Sign-in </div> <div class="dialog-content"> <label>Username:</label> <input type="text" name="txtUsername" value=" " /> <label>Password</label> <input type="text" name="txtPassword" value=" " /> <hr /> <input type="button" id="btnLogin" value="Login" /> </div> <div class="dialog-statusbar">Ready</div> </div> Most of this behavior is driven by the ‘dialog’ styles which are fairly basic and easy to understand. They do use a few support images for the gradients which are provided in the sample I’ve provided. Here’s what the CSS looks like: .dialog { background: White; overflow: hidden; border: solid 1px steelblue; -moz-border-radius: 6px 6px 4px 4px; -webkit-border-radius: 6px 6px 4px 4px; border-radius: 6px 6px 3px 3px; } .dialog-header { background-image: url(images/dialogheader.png); background-repeat: repeat-x; text-align: left; color: cornsilk; padding: 5px; padding-left: 10px; font-size: 1.02em; font-weight: bold; position: relative; -moz-border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; } .dialog-top { -moz-border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; } .dialog-bottom { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; } .dialog-content { padding: 15px; } .dialog-statusbar, .dialog-toolbar { background: #eeeeee; background-image: url(images/dialogstrip.png); background-repeat: repeat-x; padding: 5px; padding-left: 10px; border-top: solid 1px silver; border-bottom: solid 1px silver; font-size: 0.8em; } .dialog-statusbar { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; padding-right: 10px; } .closebox { position: absolute; right: 2px; top: 2px; background-image: url(images/close.gif); background-repeat: no-repeat; width: 14px; height: 14px; cursor: pointer; opacity: 0.60; filter: alpha(opacity="80"); } .closebox:hover { opacity: 1; filter: alpha(opacity="100"); } The main style is the dialog class which is the outer box. It has the rounded border that serves as the outline. Note that I didn’t add the box-shadow to this style because in some situations I just want the rounded box in an inline display that doesn’t have a shadow so it’s still applied separately. dialog-header, then has the rounded top corners and displays a typical dialog heading format. dialog-bottom and dialog-top then provide the same functionality as roundbox-top and roundbox-bottom described earlier but are provided mainly in the stylesheet for consistency to match the dialog’s round edges and making it easier to remember and find in Intellisense as it shows up in the same dialog- group. dialog-statusbar and dialog-toolbar are two elements I use a lot for floating windows – the toolbar serves for buttons and options and filters typically, while the status bar provides information specific to the floating window. Since the the status bar is always on the bottom of the dialog it automatically handles the rounding of the bottom corners. Finally there’s closebox style which is to be applied to an empty <div> tag in the header typically. What this does is render a close image that is by default low-lighted with a low opacity value, and then highlights when hovered over. All you’d have to do handle the close operation is handle the onclick of the <div>. Note that the <div> right aligns so typically you should specify it before any other content in the header. Speaking of closable – some time ago I created a closable jQuery plug-in that basically automates this process and can be applied against ANY element in a page, automatically removing or closing the element with some simple script code. Using this you can leave out the <div> tag for closable and just do the following: To make the above dialog closable (and draggable) which makes it effectively and overlay window, you’d add jQuery.js and ww.jquery.js to the page: <script type="text/javascript" src="../../scripts/jquery.min.js"></script> <script type="text/javascript" src="../../scripts/ww.jquery.min.js"></script> and then simply call: <script type="text/javascript"> $(document).ready(function () { $("#divDialog") .draggable({ handle: ".dialog-header" }) .closable({ handle: ".dialog-header", closeHandler: function () { alert("Window about to be closed."); return true; // true closes - false leaves open } }); }); </script> * ww.jquery.js emulates base features in jQuery-ui’s draggable. If jQuery-ui is loaded its draggable version will be used instead and voila you have now have a draggable and closable window – here in mid-drag: The dragging and closable behaviors are of course optional, but it’s the final touch that provides dialog like window behavior. Relief for older Internet Explorer Versions with CSS Pie If you want to get these features to work with older versions of Internet Explorer all the way back to version 6 you can check out CSS Pie. CSS Pie provides an Internet Explorer behavior file that attaches to specific CSS rules and simulates these behavior using script code in IE (mostly by implementing filters). You can simply add the behavior to each CSS style that uses box-shadow and border-radius like this: .boxshadow { -moz-box-shadow: 3px 3px 5px #535353; -webkit-box-shadow: 3px 3px 5px #535353; box-shadow: 3px 3px 5px #535353; behavior: url(scripts/PIE.htc); } .roundbox { -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px; border-radius: 6px 6px 6px 6px; behavior: url(scripts/PIE.htc); } CSS Pie requires the PIE.htc on your server and referenced from each CSS style that needs it. Note that the url() for IE behaviors is NOT CSS file relative as other CSS resources, but rather PAGE relative , so if you have more than one folder you probably need to reference the HTC file with a fixed path like this: behavior: url(/MyApp/scripts/PIE.htc); in the style. Small price to pay, but a royal pain if you have a common CSS file you use in many applications. Once the PIE.htc file has been copied and you have applied the behavior to each style that uses these new features Internet Explorer will render rounded corners and box shadows! Yay! Hurray for box-shadow and border-radius All of this functionality is very welcome natively in the browser. If you think this is all frivolous visual candy, you might be right :-), but if you take a look on the Web and search for rounded corner solutions that predate these CSS attributes you’ll find a boatload of stuff from image files, to custom drawn content to Javascript solutions that play tricks with a few images. It’s sooooo much easier to have this functionality built in and I for one am glad to see that’s it’s finally becoming standard in the box. Still remember that when you use these new CSS features, they are not universal, and are not going to be really soon. Legacy browsers, especially old versions of Internet Explorer that can’t be updated will continue to be around and won’t work with this shiny new stuff. I say screw ‘em: Let them get a decent recent browser or see a degraded and ugly UI. We have the luxury with this functionality in that it doesn’t typically affect usability – it just doesn’t look as nice. Resources Download the Sample The sample includes the styles and images and sample page as well as ww.jquery.js for the draggable/closable example. Online Sample Check out the sample described in this post online. Closable and Draggable Documentation Documentation for the closeable and draggable plug-ins in ww.jquery.js. You can also check out the full documentation for all the plug-ins contained in ww.jquery.js here. © Rick Strahl, West Wind Technologies, 2005-2011Posted in HTML CSS

Read the article

How to disabled the input,textarea,select using this code..

- by kumar

Hello friends I am using this code in my view.. <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<NorthernTrust.ATP.iTool.Core.Business.Entities.Exceptions.PricingMassEditBE>" %> <script type="text/javascript"> $("#PricingEditExceptions").find("input, select,textarea").attr('disabled', 'disabled'); </script> <%var a = Model; %> <fieldset id="PricingEditExceptions"> <div class="fiveper"> <label>FM#: <span><%=(null != a) ? Model.Asset.FundmasterSec : null%></span></label> <label>TNT#:<span><%=(null != a) ? Model.Asset.TNTSecurity: null%></span></label> <label>CUSIP#: <span><%=(null != a) ? Model.Asset.CUSIP :null%></span></label> <label>Asset:<span><%=(null != a) ? Model.Asset.AssetClassCode: null%></span></label> <label>Issue:<span><%=(null != a) ? Model.Asset.IssueType: null%></span></label> <label>COQ:<span><%=(null != a) ? Model.Asset.CodeCountryofQuotationName: null%></span></label> <label>CCY:<span><%=(null != a) ? Model.Asset.CurrencyCode: null%></span></label> <label> </label> </div> <div class="fiveper"> <input id="check1" type="checkbox" name="PMchk" value="<%=Model.ExceptionID%>" /> <label>ID#: <span><%=(null != a) ? Model.ExceptionID : 0%></span></label> <label for="ExceptionStatus"> Status: <span id="gui-stat-<%=Model.ExceptionID %>"> <%=Model.LookupCodes["C_EXCPT_STAT"].FirstOrDefault(model => model.Key.Trim().Equals(Model.ExceptionStatus.Trim())).Value%></span> </label> <label for="ResolutionCode"> Resolution: <span> <%=Html.DropDownListFor(model => model.ResolutionCode, new SelectList(Model.LookupCodes["C_EXCPT_RESL"], "Key", "Value", (null != Model.ResolutionCode) ? Model.ResolutionCode.Trim() : Model.ResolutionCode))%> </span> </label> <label for="ReasonCode"> Reason: <span><%=Html.DropDownListFor(model => model.ReasonCode, new SelectList(Model.LookupCodes["C_EXCPT_RSN"], "Key", "Value", (null != Model.ReasonCode) ? Model.ReasonCode.Trim() : Model.ReasonCode))%></span> </label> <label>Action Taken:<span><%=Html.DropDownListFor(model => model.ActionCode, new SelectList(Model.LookupCodes["C_EXCPT_ACT"], "Key", "Value", (null != Model.ActionCode) ? Model.ActionCode.Trim() : Model.ActionCode))%></span></label> <label> </label> </div> <div class="fiveper"> <label>Follow-Up:<span class="datepicker-container"><input type="text" id="exc-flwup-<%=Model.ExceptionID %>" name="exc-flwup-<%=Model.ExceptionID %>" value="<%=Model.FollowupDate %>" /></span></label> <label>Inqurity #: <span><%=Html.EditorFor(model => model.IOL)%></span> </label> <label> </label> <label>Comment: <span> <%=Html.TextAreaFor(model => model.Comment, new { })%> <%=Html.ValidationMessageFor(model => model.Comment)%> </span> </label> </div> <div id="hide" style="display:none"> <label><span><%=Model.Sequence %></span></label> <label><span><%=Model.AssignedId %></span></label> <span id="gui-stat-<%=Model.ExceptionID%>"> <%=Model.LookupCodes["C_EXCPT_STAT"].FirstOrDefault(model => model.Key.Trim().Equals(Model.ExceptionStatus.Trim())).Value%></span> <span>Last Updated:</span> <%=Model.LastUpdateUser.StartsWith("ATPB") ? "SYSTEM" : Model.LastUpdateUser%><br /> <%=Model.LastUpdated%> <% if (DateTime.Now.Date == Model.LastUpdated.Value .Date ) {%> <%=Math.Round((DateTime.Now - (DateTime)Model.LastUpdated).TotalHours, 0)%> hr<%} %> <p> <%=Html.EditorFor(model => model.SequenceDateTimeAsString)%> <%=Html.EditorFor(model => model.AssignedId)%> <span><%=Html.EditorFor(model => model.Origination)%></span> </p> </div> </fieldset> <script type="text/javascript"> $(document).ready(function() { function validate_excpt(formData, jqForm, options) { var form = jqForm[0]; } // post-submit callback function showResponse(responseText, statusText, xhr, $form) { if (responseText.substring(0, 16) != "System.Exception") { $('#error-msg-<%=Model.ExceptionID %> span:last').html('<strong>Update successful.</strong>'); } else { $('#error-msg-<%=Model.ExceptionID %> span:last').html('<strong>Update failed.</strong> ' + responseText.substring(0, 48)); } $('#error-msg-<%=Model.ExceptionID %>').removeClass('hide'); $('#gui-stat-<%=Model.ExceptionID %>').html(responseText[1]); } $('#exc-<%=Model.ExceptionID %>').ajaxForm({ target: '#error-msg-<%=Model.ExceptionID %>', beforeSubmit: validate_excpt, success: showResponse, dataType: 'json' }).enable(<%=Model.EnableEdit.ToString().ToLower() %>); $("input[id^='exc-flwup-']").datepicker({ duration: 0, buttonImage: '/Content/images/calender.gif', buttonImageOnly: true, showOn:'button', constrainInput: true, showTime: true, stepMinutes: 30, stepHours: 1, altTimeField: '', time24h: true, minDate: 0 }); $("input[id^='exc-flwup-<%=Model.ExceptionID%>']").click(function() { $(this).val(''); }); $('#ui-timepicker-div').bgiframe(); }); </script> Using this code I am disabling the fields when the view loads.. like this my view displyas for number of users which I am going to selct using this below code I am able to disable only first Fiedset not for other fieldsets? $("#Fieldset1").find("input, select,textarea").attr('disabled', 'disabled'); why its happening? I need to disable for how many users I select.... thanks..

Read the article

how to reload jqgrid in asp.net mvc when i change dropdownlist

- by sandeep

what is wrong in this code? when i change drop down list,the grid takes old value of ddl only, not taken newely selected values why? <%--<asp:Content ID="Content2script" ContentPlaceHolderID="HeadScript" runat="server"> <script type="text/javascript"> $(function() { $("#StateId").change(function() { $('#TheForm').submit(); }); }); $(function() { $("#CityId").change(function() { $('#TheForm').submit(); }); }); $(function() { $("#HospitalName").change(function() { $('#TheForm').submit(); }); }); </script > </asp:Content>--%> <asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server"> <link rel="stylesheet" type="text/css" href="/scripts/themes/coffee/grid.css" title="coffee" media="screen" /> <script src="/Scripts/jquery-1.3.2.js" type="text/javascript"></script> <script src="/Scripts/jquery.jqGrid.js" type="text/javascript"></script> <script src="/Scripts/js/jqModal.js" type="text/javascript"></script> <script src="/Scripts/js/jqDnR.js" type="text/javascript"></script> <script type="text/javascript"> var gridimgpath = '/scripts/themes/coffee/images'; var gridDataUrl = '/Claim/DynamicGridData/'; jQuery(document).ready(function() { // $("#btnSearch").click(function() { var StateId = document.getElementById('StateId').value; var CityId = document.getElementById('CityId').value; var HName = document.getElementById('HospitalName').value; // alert(CityId); // alert(StateId); // alert(HName); if (StateId > 0 && CityId == '' && HName == '') { CityId = 0; HName = 'Default'.toString(); // alert("elseif0" + HName.toString()); } else if (CityId > 0 && StateId == '') { // alert("elseif1"); alert("Please Select State..") } else if (CityId > 0 && StateId > 0 && HName == '') { // alert("elseif2"); alert(CityId); alert(StateId); HName = "Default"; } else { // alert("else"); StateId = 0; CityId = 0; HName = "Default"; } jQuery("#list").jqGrid({ url: gridDataUrl + '?StateId=' + StateId + '&CityId=' + CityId + '&hospname=' + HName, datatype: 'json', mtype: 'GET', colNames: ['Id', 'HospitalName', 'Address', 'City', 'District', 'FaxNumber', 'PhoneNumber'], colModel: [{ name: 'HospitalId', index: 'HospitalId', width: 40, align: 'left' }, { name: 'HospitalName', index: 'HospitalName', width: 40, align: 'left' }, { name: 'Address1', Address: 'Address1', width: 300 }, { name: 'CityName', index: 'CityName', width: 100 }, { name: 'DistName', index: 'DistName', width: 100 }, { name: 'FaxNo', index: 'FaxNo', width: 100 }, { name: 'ContactNo1', index: 'PhoneNumber', width: 100 } ], pager: jQuery('#pager'), rowNum: 10, rowList: [5, 10, 20, 50], // sortname: 'Id,', sortname: '1', sortorder: "asc", viewrecords: true, //multiselect: true, //multikey: "ctrlKey", // imgpath: '/scripts/themes/coffee/images', imgpath: gridimgpath, caption: 'Hospital Search', width: 700, height: 250 }); $(function() { // $("#btnSearch").click(function() { $('#CityId').change(function() { alert("kjasd"); // Set the vars whenever the date range changes and then filter the results StateId = document.getElementById('StateId').value; CityId = document.getElementById('CityId').value; HName = 'default'; setGridUrl(); }); // Set the date range textbox values $('#StateId').val(StateId.toString()); $('#CityId').val(CityId.toString()); // Set the grid json url to get the data to display setGridUrl(); }); function setGridUrl() { alert(StateId); alert(CityId); alert("hi"); var newGridDataUrl = gridDataUrl + '?StateId=' + StateId + '&CityId=' + CityId + '&hospname=' + HName; jQuery('#list').jqGrid('setGridParam', { url: newGridDataUrl }).trigger("reloadGrid"); } // }); }); </script> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <%--<%using (Html.BeginForm("HospitalSearch", "Claim", FormMethod.Post, new { id = "TheForm" })) --%> <table cellspacing="0" cellpadding="2" width="100%" border="0" > <tr> <td class ="Heading1"> Hospital Search</td> <td class ="Heading1" align="right" width="50%" background="../images/homebg.gif">   </td> </tr> <tr> <td colspan="2" > <% Html.RenderPartial("InsuredDetails"); %> </td> </tr> <tr> <td colspan="2"> <table width="100%"> <tr> <td class="subline" valign="middle"> State : <% =Html.DropDownList("StateId", (SelectList)ViewData["States"], "--Select--", new { @class = "ddownmenu" })%>   City : <% =Html.DropDownList("CityId", (SelectList)ViewData["Cities"], "--Select--", new { @class = "ddownmenu" })%>   Hospital Name : <% =Html.TextBox("HospitalName")%>     <input id="btnSearch" type="submit" value="Search" /> </td> </tr> </table> </td> </tr> <tr> <td align="center" colspan="2">  </td> </tr> </table> <div id="jqGridContainer"> <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table> <div id="pager" class="scroll" style="text-align:center;"></div> </div> </asp:Content>

Read the article

YUI Uploader hangs after choosing file

- by stephenbayer

Below is my entire code from a User control that contains the YUI Uploader. Is there something I'm missing. Right now, when I step through the javascript code in Firebug, it hangs on the first line of the upload() function. I have a breakpoint on the first line of the ashx that handles the file, but it is never called. So, it doesn't get that far. I figure I'm just missing something stupid. I've used this control many times before with no issues. I'm using all the css files and graphics provided by the samples folder in the YUI download. If I'm not missing anything, is there a more comprehensive way of debuging this issue then through stepping through the javascript with FireBug. I've tried turning the logging for YUI on and off, and never get any logs anywhere. I'm not sure where to go now. <style type="text/css"> #divFile { background-color:White; border:2px inset Ivory; height:21px; margin-left:-2px; margin-right:9px; width:125px; } </style> <ajaxToolkit:RoundedCornersExtender runat="server" Corners="All" Radius="6" ID="rceContainer" TargetControlID="pnlMMAdmin" /> <asp:Panel ID="pnlMMAdmin" runat="server" Width="100%" BackColor="Silver" ForeColor="#ffffff" Font-Bold="true" Font-Size="16px"> <div style="padding: 5px; text-align:center; width: 100%;"> <table style="width: 100% ; border: none; text-align: left;"> <tr> <td style="width: 460px; vertical-align: top;">  <ajaxToolkit:RoundedCornersExtender runat="server" Corners="All" Radius="6" ID="RoundedCornersExtender1" TargetControlID="pnlInfo" /> <asp:Panel ID="pnlInfo" runat="server" Width="100%" BackColor="Silver" ForeColor="#ffffff" Font-Bold="true" Font-Size="16px"> <div id="infoPanel" style="padding: 5px; text-align:left; width: 100%;"> <table> <tr><td>Chart</td><td> <table><tr><td><div id="divFile" ></div></td><td><div id="uploaderContainer" style="width:60px; height:25px"></div></td></tr> <tr><td colspan="2"><div id="progressBar"></div></td></tr></table> </td></tr> </table> </div></asp:Panel> <script type="text/javascript" language="javascript"> WYSIWYG.attach('<%= txtComment.ClientID %>', full); var uploader = new YAHOO.widget.Uploader("uploaderContainer", "assets/buttonSkin.jpg"); uploader.addListener('contentReady', handleContentReady); uploader.addListener('fileSelect', onFileSelect) uploader.addListener('uploadStart', onUploadStart); uploader.addListener('uploadProgress', onUploadProgress); uploader.addListener('uploadCancel', onUploadCancel); uploader.addListener('uploadComplete', onUploadComplete); uploader.addListener('uploadCompleteData', onUploadResponse); uploader.addListener('uploadError', onUploadError); function handleContentReady() { // Allows the uploader to send log messages to trace, as well as to YAHOO.log uploader.setAllowLogging(false); // Restrict selection to a single file (that's what it is by default, // just demonstrating how). uploader.setAllowMultipleFiles(false); // New set of file filters. var ff = new Array({ description: "Images", extensions: "*.jpg;*.png;*.gif" }); // Apply new set of file filters to the uploader. uploader.setFileFilters(ff); } var fileID; function onFileSelect(event) { for (var item in event.fileList) { if (YAHOO.lang.hasOwnProperty(event.fileList, item)) { YAHOO.log(event.fileList[item].id); fileID = event.fileList[item].id; } } uploader.disable(); var filename = document.getElementById("divFile"); filename.innerHTML = event.fileList[fileID].name; var progressbar = document.getElementById("progressBar"); progressbar.innerHTML = "Please wait... Starting upload.... "; upload(fileID); } function upload(idFile) { // file hangs right here. ************************** progressBar.innerHTML = "Upload starting... "; if (idFile != null) { uploader.upload(idFile, "AdminFileUploader.ashx", "POST"); fileID = null; } } function handleClearFiles() { uploader.clearFileList(); uploader.enable(); fileID = null; var filename = document.getElementById("divFile"); filename.innerHTML = ""; var progressbar = document.getElementById("progressBar"); progressbar.innerHTML = ""; } function onUploadProgress(event) { prog = Math.round(300 * (event["bytesLoaded"] / event["bytesTotal"])); progbar = "<div style=\"background-color: #f00; height: 5px; width: " + prog + "px\"/>"; var progressbar = document.getElementById("progressBar"); progressbar.innerHTML = progbar; } function onUploadComplete(event) { uploader.clearFileList(); uploader.enable(); progbar = "<div style=\"background-color: #f00; height: 5px; width: 300px\"/>"; var progressbar = document.getElementById("progressBar"); progressbar.innerHTML = progbar; alert('File Uploaded'); } function onUploadStart(event) { alert('upload start'); } function onUploadError(event) { alert('upload error'); } function onUploadCancel(event) { alert('upload cancel'); } function onUploadResponse(event) { alert('upload response'); } </script>

Read the article

urgent help needed to convert arabic html to pdf

- by Mariam

<div> <table border="1" width="500px"> <tr> <td colspan="2"> aspdotnetcodebook ????? ???????</td> </tr> <tr> <td> cell1 </td> <td> cell2 </td> </tr> <tr> <td colspan="2"> <asp:Label ID="lblLabel" runat="server" Text=""></asp:Label> <img alt="" src="logo.gif" style="width: 174px; height: 40px" /></td> </tr> <tr> <td colspan="2" dir="rtl"> <h1> <img alt="" height="168" src="http://a.cksource.com/c/1/inc/img/demo-little-red.jpg" style="margin-left: 10px; margin-right: 10px; float: left;" width="120" />????? ????? ??? ??? ?? ?? ??</h1> <p> "<b>Little Red Riding Hood</b>" is a famous <a href="http://en.wikipedia.org/wiki/Fairy_tale" title="Fairy tale">fairy tale</a> about a young girl's encounter with a wolf. The story has been changed considerably in its history and subject to numerous modern adaptations and readings.</p> <table align="right" border="1" cellpadding="1" cellspacing="1" style="width: 200px;"> <caption> <strong>International Names</strong></caption> <tr> <td> ????? ???????</td> <td>  </td> </tr> <tr> <td> Italian</td> <td> <i>Cappuccetto Rosso</i></td> </tr> <tr> <td> Spanish</td> <td> <i>Caperucita Roja</i></td> </tr> </table> <p> The version most widely known today is based on the <a href="http://en.wikipedia.org/wiki/Brothers_Grimm" title="Brothers Grimm"> Brothers Grimm</a> variant. It is about a girl called Little Red Riding Hood, after the red <a href="http://en.wikipedia.org/wiki/Hood_(headgear%2529" title="Hood (headgear)">hooded</a> <a href="http://en.wikipedia.org/wiki/Cape" title="Cape">cape</a> or <a href="http://en.wikipedia.org/wiki/Cloak" title="Cloak">cloak</a> she wears. The girl walks through the woods to deliver food to her sick grandmother.</p> <p> A wolf wants to eat the girl but is afraid to do so in public. He approaches the girl, and she naïvely tells him where she is going. He suggests the girl pick some flowers, which she does. In the meantime, he goes to the grandmother's house and gains entry by pretending to be the girl. He swallows the grandmother whole, and waits for the girl, disguised as the grandmother.</p> <p> When the girl arrives, she notices he looks very strange to be her grandma. In most retellings, this eventually culminates with Little Red Riding Hood saying, "My, what big teeth you have!"<br /> To which the wolf replies, "The better to eat you with," and swallows her whole, too.</p> <p> A <a href="http://en.wikipedia.org/wiki/Hunter" title="Hunter">hunter</a>, however, comes to the rescue and cuts the wolf open. Little Red Riding Hood and her grandmother emerge unharmed. They fill the wolf's body with heavy stones, which drown him when he falls into a well. Other versions of the story have had the grandmother shut in the closet instead of eaten, and some have Little Red Riding Hood saved by the hunter as the wolf advances on her rather than after she is eaten.</p> <p> The tale makes the clearest contrast between the safe world of the village and the dangers of the <a href="http://en.wikipedia.org/wiki/Enchanted_forest" title="Enchanted forest">forest</a>, conventional antitheses that are essentially medieval, though no written versions are as old as that.</p> </td> </tr> </table> </div> i use itextsharp to convert this content which is stored in DB to pdf file to be downloaded to the user i cant achieve this

Read the article

how would you debug this javascript problem?

- by pedalpete

I've been travelling and developing for the past few weeks. The site I'm developing was running well. Then, the other day, i connected to a network and the page 'looked' fine, but it turns out the javascript wasn't running. I checked firebug, and there were no errors, as I was suspecting that maybe a script didn't load (I'm using the google api for jQuery and jQuery UI, as well as loading google maps api and fbconnect). I would suspect that if the issue was with one of these pages not loading I would get an error, and yet there was nothing. Thinking maybe i didn't connect properly or something, i reconnected to the network and even restarted my computer, as well as trying to run the local version. I got nothing. The local version not running also hinted to me that it was the loading of an external javascript which caused the problem. I let it pass as something strange with that one network. Unfortunately now I'm 100s of miles away. Today my brother sent me an e-mail that the network he was on at the airport wouldn't load my page. Same issue. Everything is laid out properly, and part of the layout is set in Javascript, so clearly javascript is running. he too got no errors. Of course, he got on his plane, and now he is no longer at the airport. Now the site works on his computer (and i haven't changed anything). How on earth would you go about figuring out what happened in this situation? That is two of maybe 12 or so networks. But I have no idea how i would find a network that doesn't work (and living in a small town, it could be difficult for me to find a network that doesn't work). Any ideas? The site is still in Dev, so I'd rather not post a link just yet (but could in a few days). What I can see not working is the javascript functions which are called on load, and on click. So i do think it is a javascript issue, but no errors. This wouldn't be as HUGE an issue if I could find and sit on one of these networks, but I can't. So what would you do? EDIT ---------------------------------------------------------- the first function(s - their linked) that doesn't get called is below. I've cut the code of at the .ajax call as the call wasn't being made. function getResultsFromForm(){ jQuery('form#filterList input.button').hide(); var searchAddress=jQuery('form#filterList input#searchTxt').val(); if(searchAddress=='' || searchAddress=='<?php echo $searchLocation; ?>'){ mapShow(20, -40, 0, 'areaMap', 2); jQuery('form#filterList input.button').show(); return; } if (GBrowserIsCompatible()) { var geo = new GClientGeocoder(); geo.setBaseCountryCode(cl.address.country); geo.getLocations(searchAddress, function (result) { if(!result.Placemark && searchAddress!='<?php echo $searchLocation; ?>'){ jQuery('span#addressNotFound').text('<?php echo $addressNotFound; ?>').slideDown('slow'); jQuery('form#filterList input.button').show(); } else { jQuery('span#addressNotFound').slideUp('slow').empty(); jQuery('span#headerLocal').text(searchAddress); var date = new Date(); date.setTime(date.getTime() + (8 * 24 * 60 * 60 * 1000)); jQuery.cookie('address', searchAddress, { expires: date}); var accuracy= result.Placemark[0].AddressDetails.Accuracy; var lat = result.Placemark[0].Point.coordinates[1]; var long = result.Placemark[0].Point.coordinates[0]; lat=parseFloat(lat); long=parseFloat(long); var getTab=jQuery('div#tabs div#active').attr('class'); jQuery('div#tabs').show(); loadForecast(lat, long, getTab, 'true', 0); var zoom=zoomLevel(); mapShow(lat, long, accuracy, 'areaMap', zoom ); } }); } } function zoomLevel(){ var zoomarray= new Array(); zoomarray=jQuery('span.viewDist').attr('id'); zoomarray=zoomarray.split("-"); var zoom=zoomarray[1]; if(zoom==''){ zoom=5; } zoom=parseFloat(zoom); return(zoom); } function loadForecast(lat, long, type, loadForecast, page){ jQuery('div#holdForecast').empty(); var date = new Date(); var d = date.getDate(); var day = (d < 10) ? '0' + d : d; var m = date.getMonth() + 1; var month = (m < 10) ? '0' + m : m; var year='2009'; toDate=year+'-'+month+'-'+day; var genre=jQuery('span.genreblock span#updateGenre').html(); var numDays=''; var numResults=''; var range=jQuery('span.viewDist').attr('id'); var dateRange = jQuery('.updateDate').attr('id'); jQuery('div#holdShows ul.showList').html('<li class="show"><div class="showData"><center><img src="../hwImages/loading.gif"/></center></div></li>'); jQuery('div#holdShows ul.'+type+'List').livequery(function(){ jQuery.ajax({ type: "GET", url: "processes/formatShows.php", data: "output=&genre="+genre+"&numResults="+numResults+"&date="+toDate+"&dateRange="+dateRange+"&range="+range+"&lat="+lat+"&long="+long+'&page='+page, success: function(response){ EDIT 2 ----------------------------------------------------------------------------- Please keep in mind that the problem is not that I can't load the site, the site works fine on most connections, but there are times when the site doesn't work, and no errors are thrown, and nothing changes. My brother couldn't run it earlier today while I had no problems, so it was something to do with his location/network. HOWEVER, the page loads, he had a connection, it was his first time visiting the site, so nothing could have been cashed. Same with when I had the issue a few days before. I didn't change anything, and I got to a different network and everything worked fine.

Read the article

Why am I getting null object reference error when saving (OnItemUpdating event) the first edit item

- by craigmoliver

I'm getting the error "Object reference not set to an instance of an object." when trying to reference a HiddenField (lvEditProjectSteps_hdnStepStatusId for future reference) from the EditItem during the OnItemUpdating event after the Update event fires in a ListView. This only occurs on the FIRST item in the ListView. I checked the source and the HTML is being rendered properly. ANY insight is appreciated! Thanks in advance... Source error: var lvEditProjectSteps_hdnStepStatusId = (HiddenField) lvEditProjectSteps.EditItem.FindControl("lvEditProjectSteps_hdnStepStatusId"); Here's the aspx side of the ListView: <asp:ListView ID="lvEditProjectSteps" runat="server" OnItemDataBound="lvEditProjectSteps_OnItemDataBound" OnItemUpdating="lvEditProjectSteps_OnItemUpdating" DataSourceID="odsEditProjectStep" DataKeyNames="Id"> <LayoutTemplate> <table class="standard-box-style" style="width:800px"> <thead> <tr> <th> </th> <th> </th> <th>Created</th> <th>Updated</th> </tr> </thead> <tbody> <asp:PlaceHolder ID="itemPlaceHolder" runat="server" /> </tbody> </table> </LayoutTemplate> <ItemTemplate> <tr> <td style="width:50px"<%# (Container.DisplayIndex % 2 == 0)?"":" class=\"row-alternating\"" %>> <asp:ImageButton ID="lvEditProjectSteps_btnEdit" runat="server" ImageUrl="~/admin/images/icons/edit.gif" AlternateText="Edit" SkinID="interfaceButton" CommandName="Edit" /> <asp:HiddenField ID="lvEditProjectSteps_hdnId" runat="server" Value='<%# Bind("Id")%>' /> <asp:HiddenField ID="lvEditProjectSteps_hdnStepStatusId" runat="server" Value='<%# Bind("StepStatusId")%>' /> <asp:HiddenField ID="lvEditProjectSteps_hdnStepStatusStepId" runat="server" Value='<%# Bind("StepStatus_StepId")%>' /> </td> <td style="width:30px"<%# (Container.DisplayIndex % 2 == 0)?"":" class=\"row-alternating\"" %>><asp:Image ID="imgStatus" runat="server" /></td> <td style="width:75px"<%# (Container.DisplayIndex % 2 == 0)?"":" class=\"row-alternating\"" %>><asp:Literal ID="litTsCreated" runat="server" /></td> <td style="width:75px"<%# (Container.DisplayIndex % 2 == 0)?"":" class=\"row-alternating\"" %>><asp:Literal ID="litTsUpdated" runat="server" /></td> </tr> </ItemTemplate> <EditItemTemplate> <tr> <td style="width:50px"<%# (Container.DisplayIndex % 2 == 0)?"":" class=\"row-alternating\"" %>> <asp:ImageButton ID="lvEditProjectSteps_btnUpdate" runat="server" ImageUrl="~/admin/images/icons/save.png" AlternateText="Save" SkinID="interfaceButton" CommandName="Update" ValidationGroup="EditProjectStepsSave" /> <asp:ImageButton ID="lvEditProjectSteps_btnCancel" runat="server" ImageUrl="~/admin/images/icons/cancel.png" AlternateText="Cancel" SkinID="interfaceButton" CommandName="Cancel" /> <asp:HiddenField ID="lvEditProjectSteps_hdnId" runat="server" Value='<%# Bind("Id")%>' /> <asp:HiddenField ID="lvEditProjectSteps_hdnStepStatusId" runat="server" Value='<%# Bind("StepStatusId")%>' /> <asp:HiddenField ID="lvEditProjectSteps_hdnStepStatusStepId" runat="server" Value='<%# Bind("StepStatus_StepId")%>' /> </td> <td style="width:180px" colspan="3"<%# (Container.DisplayIndex % 2 == 0)?"":" class=\"row-alternating\"" %>> <div><strong>Status</strong></div> <div class="radiobuttonlist-status"> <asp:RadioButtonList ID="lvEditProjectSteps_rblStatus" runat="server" RepeatDirection="Horizontal" AutoPostBack="true" OnSelectedIndexChanged="lvEditProjectSteps_rblStatus_OnSelectedIndexChanged"> <asp:ListItem Value="1"><img src="/images/icon/project-status/1.png" alt="Error" /></asp:ListItem> <asp:ListItem Value="2"><img src="/images/icon/project-status/2.png" alt="In Progress" /></asp:ListItem> <asp:ListItem Value="3"><img src="/images/icon/project-status/3.png" alt="Complete" /></asp:ListItem> </asp:RadioButtonList> <asp:RequiredFieldValidator ID="valRequired_lvEditProjectSteps_rblStatus" runat="server" ControlToValidate="lvEditProjectSteps_rblStatus" SetFocusOnError="true" Display="Dynamic" ErrorMessage="<br />^ required ^" ValidationGroup="EditProjectStepsSave" /> </div> </td> </tr> </EditItemTemplate> </asp:ListView> And the code-behind: protected void lvEditProjectSteps_OnItemDataBound(object sender, ListViewItemEventArgs e) { if (e.Item.ItemType == ListViewItemType.DataItem) { var info = (ProjectStepInfo)DataBinder.GetDataItem(e.Item); // View Item var litTsCreated = (Literal)e.Item.FindControl("litTsCreated"); var litTsUpdated = (Literal)e.Item.FindControl("litTsUpdated"); var imgStatus = (Image) e.Item.FindControl("imgStatus"); if (litTsCreated != null) litTsCreated.Text = String.Format("{0:d}", info.TsCreated); if (litTsUpdated != null) litTsUpdated.Text = String.Format("{0:d}", info.TsCreated); if (imgStatus != null) imgStatus.ImageUrl = String.Format("/images/icon/project-status/{0}.png", info.StepStatus_StatusId); // Edit Item var lvEditProjectSteps_rblStatus = (RadioButtonList) e.Item.FindControl("lvEditProjectSteps_rblStatus"); if (lvEditProjectSteps_rblStatus != null) lvEditProjectSteps_rblStatus.SelectedValue = info.StepStatus_StatusId.ToString(); } } protected void lvEditProjectSteps_OnItemUpdating(object sender, ListViewUpdateEventArgs e) { if (IsValid) { var oController = new Controller(); var lvEditProjectSteps_hdnStepStatusId = (HiddenField) lvEditProjectSteps.EditItem.FindControl("lvEditProjectSteps_hdnStepStatusId"); var lvEditProjectSteps_hdnStepStatusStepId = (HiddenField) lvEditProjectSteps.EditItem.FindControl("lvEditProjectSteps_hdnStepStatusStepId"); var lvEditProjectSteps_rblStatus = (RadioButtonList) lvEditProjectSteps.EditItem.FindControl("lvEditProjectSteps_rblStatus"); var infoStepStatus = oController.StepStatus_SelectOne_StepId_StatusId(Convert.ToInt32(lvEditProjectSteps_hdnStepStatusStepId.Value), Convert.ToInt32(lvEditProjectSteps_rblStatus.SelectedValue)); if (lvEditProjectSteps_hdnStepStatusId != null) { e.NewValues["ProjectId"] = Convert.ToInt32(lvEditProjectSteps_hdnProjectId.Value); e.NewValues["StepStatusId"] = infoStepStatus.Id; } else { Response.Write("cancel"); e.Cancel = true; } } else { Response.Write("cancel, not valid"); e.Cancel = true; } } protected void lvEditProjectSteps_rblStatus_OnSelectedIndexChanged(object sender, EventArgs e) { var oController = new Controller(); var rbl = (RadioButtonList)sender; var lvEditProjectSteps_txtText = (TextBox) rbl.NamingContainer.FindControl("lvEditProjectSteps_txtText"); var lvEditProjectSteps_txtComment = (TextBox)rbl.NamingContainer.FindControl("lvEditProjectSteps_txtComment"); var lvEditProjectSteps_hdnStepStatusStepId = (HiddenField) rbl.NamingContainer.FindControl("lvEditProjectSteps_hdnStepStatusStepId"); if (!String.IsNullOrEmpty(lvEditProjectSteps_hdnStepStatusStepId.Value) && lvEditProjectSteps_txtText != null && lvEditProjectSteps_txtComment != null) { var infoStep = oController.Step_SelectOne(Convert.ToInt32(lvEditProjectSteps_hdnStepStatusStepId.Value)); var infoStepStatus = oController.StepStatus_SelectOne_StepId_StatusId(Convert.ToInt32(lvEditProjectSteps_hdnStepStatusStepId.Value), Convert.ToInt32(rbl.SelectedValue)); lvEditProjectSteps_txtText.Text = infoStep.Name; lvEditProjectSteps_txtComment.Text = infoStepStatus.Text; } }

Read the article

scrolling lags in emacs 23.2 with GTK

- by mefiX

Hey there, I am using emacs 23.2 with the GTK toolkit. I built emacs from source using the following configure-params: ./configure --prefix=/usr --without-makeinfo --without-sound Which builds emacs with the following configuration: Where should the build process find the source code? /home/****/incoming/emacs-23.2 What operating system and machine description files should Emacs use? `s/gnu-linux.h' and `m/intel386.h' What compiler should emacs be built with? gcc -g -O2 -Wdeclaration-after-statement -Wno-pointer-sign Should Emacs use the GNU version of malloc? yes (Using Doug Lea's new malloc from the GNU C Library.) Should Emacs use a relocating allocator for buffers? yes Should Emacs use mmap(2) for buffer allocation? no What window system should Emacs use? x11 What toolkit should Emacs use? GTK Where do we find X Windows header files? Standard dirs Where do we find X Windows libraries? Standard dirs Does Emacs use -lXaw3d? no Does Emacs use -lXpm? yes Does Emacs use -ljpeg? yes Does Emacs use -ltiff? yes Does Emacs use a gif library? yes -lgif Does Emacs use -lpng? yes Does Emacs use -lrsvg-2? no Does Emacs use -lgpm? yes Does Emacs use -ldbus? yes Does Emacs use -lgconf? no Does Emacs use -lfreetype? yes Does Emacs use -lm17n-flt? no Does Emacs use -lotf? yes Does Emacs use -lxft? yes Does Emacs use toolkit scroll bars? yes When I'm scrolling within files of a common size (about 1000 lines) holding the up/down-keys, emacs almost hangs and produces about 50% CPU-load. I use the following plugins: ido linum tabbar auto-complete-config Starting emacs with -q fixes the problem, but then I don't have any plugins. I can't figure out, which part of my .emacs is responsible for this behaviour. Here's an excerpt of my .emacs-file: (require 'ido) (ido-mode 1) (require 'linum) (global-linum-mode 1) (require 'tabbar) (tabbar-mode 1) (tabbar-local-mode 0) (tabbar-mwheel-mode 0) (setq tabbar-buffer-groups-function (lambda () (list "All"))) (global-set-key [M-left] 'tabbar-backward) (global-set-key [M-right] 'tabbar-forward) ;; hide the toolbar (gtk etc.) (tool-bar-mode -1) ;; Mouse scrolling enhancements (setq mouse-wheel-progressive-speed nil) (setq mouse-wheel-scroll-amount '(5 ((shift) . 5) ((control) . nil))) ;; Smart-HOME (defun smart-beginning-of-line () "Forces the cursor to jump to the first none whitespace char of the current line when pressing HOME" (interactive) (let ((oldpos (point))) (back-to-indentation) (and (= oldpos (point)) (beginning-of-line)))) (put 'smart-beginning-of-line 'CUA 'move) (global-set-key [home] 'smart-beginning-of-line) (custom-set-variables ;; custom-set-variables was added by Custom. ;; If you edit it by hand, you could mess it up, so be careful. ;; Your init file should contain only one such instance. ;; If there is more than one, they won't work right. '(column-number-mode t) '(cua-mode t nil (cua-base)) '(custom-buffer-indent 4) '(delete-selection-mode nil) '(display-time-24hr-format t) '(display-time-day-and-date 1) '(display-time-mode t) '(global-font-lock-mode t nil (font-lock)) '(inhibit-startup-buffer-menu t) '(inhibit-startup-screen t) '(pc-select-meta-moves-sexps t) '(pc-select-selection-keys-only t) '(pc-selection-mode t nil (pc-select)) '(scroll-bar-mode (quote right)) '(show-paren-mode t) '(standard-indent 4) '(uniquify-buffer-name-style (quote forward) nil (uniquify))) (setq-default tab-width 4) (setq-default indent-tabs-mode t) (setq c-basic-offset 4) ;; Highlighting of the current line (global-hl-line-mode 1) (set-face-background 'hl-line "#E8F2FE") (defalias 'yes-or-no-p 'y-or-n-p) (display-time) (set-language-environment "Latin-1") ;; Change cursor color according to mode (setq djcb-read-only-color "gray") ;; valid values are t, nil, box, hollow, bar, (bar . WIDTH), hbar, ;; (hbar. HEIGHT); see the docs for set-cursor-type (setq djcb-read-only-cursor-type 'hbar) (setq djcb-overwrite-color "red") (setq djcb-overwrite-cursor-type 'box) (setq djcb-normal-color "black") (setq djcb-normal-cursor-type 'bar) (defun djcb-set-cursor-according-to-mode () "change cursor color and type according to some minor modes." (cond (buffer-read-only (set-cursor-color djcb-read-only-color) (setq cursor-type djcb-read-only-cursor-type)) (overwrite-mode (set-cursor-color djcb-overwrite-color) (setq cursor-type djcb-overwrite-cursor-type)) (t (set-cursor-color djcb-normal-color) (setq cursor-type djcb-normal-cursor-type)))) (add-hook 'post-command-hook 'djcb-set-cursor-according-to-mode) (define-key global-map '[C-right] 'forward-sexp) (define-key global-map '[C-left] 'backward-sexp) (define-key global-map '[s-left] 'windmove-left) (define-key global-map '[s-right] 'windmove-right) (define-key global-map '[s-up] 'windmove-up) (define-key global-map '[s-down] 'windmove-down) (define-key global-map '[S-down-mouse-1] 'mouse-stay-and-copy) (define-key global-map '[C-M-S-down-mouse-1] 'mouse-stay-and-swap) (define-key global-map '[S-mouse-2] 'mouse-yank-and-kill) (define-key global-map '[C-S-down-mouse-1] 'mouse-stay-and-kill) (define-key global-map "\C-a" 'mark-whole-buffer) (custom-set-faces ;; custom-set-faces was added by Custom. ;; If you edit it by hand, you could mess it up, so be careful. ;; Your init file should contain only one such instance. ;; If there is more than one, they won't work right. '(default ((t (:inherit nil :stipple nil :background "#f7f9fa" :foreground "#191919" :inverse-video nil :box nil :strike-through nil :overline nil :underline nil :slant normal :weight normal :height 98 :width normal :foundry "unknown" :family "DejaVu Sans Mono")))) '(font-lock-builtin-face ((((class color) (min-colors 88) (background light)) (:foreground "#642880" :weight bold)))) '(font-lock-comment-face ((((class color) (min-colors 88) (background light)) (:foreground "#3f7f5f")))) '(font-lock-constant-face ((((class color) (min-colors 88) (background light)) (:weight bold)))) '(font-lock-doc-face ((t (:inherit font-lock-string-face :foreground "#3f7f5f")))) '(font-lock-function-name-face ((((class color) (min-colors 88) (background light)) (:foreground "Black" :weight bold)))) '(font-lock-keyword-face ((((class color) (min-colors 88) (background light)) (:foreground "#7f0055" :weight bold)))) '(font-lock-preprocessor-face ((t (:inherit font-lock-builtin-face :foreground "#7f0055" :weight bold)))) '(font-lock-string-face ((((class color) (min-colors 88) (background light)) (:foreground "#0000c0")))) '(font-lock-type-face ((((class color) (min-colors 88) (background light)) (:foreground "#7f0055" :weight bold)))) '(font-lock-variable-name-face ((((class color) (min-colors 88) (background light)) (:foreground "Black")))) '(minibuffer-prompt ((t (:foreground "medium blue")))) '(mode-line ((t (:background "#222222" :foreground "White")))) '(tabbar-button ((t (:inherit tabbar-default :foreground "dark red")))) '(tabbar-button-highlight ((t (:inherit tabbar-default :background "white" :box (:line-width 2 :color "white"))))) '(tabbar-default ((t (:background "gray90" :foreground "gray50" :box (:line-width 3 :color "gray90") :height 100)))) '(tabbar-highlight ((t (:underline t)))) '(tabbar-selected ((t (:inherit tabbar-default :foreground "blue" :weight bold)))) '(tabbar-separator ((t nil))) '(tabbar-unselected ((t (:inherit tabbar-default))))) Any suggestions? Kind regards, mefiX

Read the article

Bizarre Son of Suckerfish ie6/ie7 problem - 2 letters from right-most dropdown menu also appearing o

- by Kevin Burke

I'm interning for an NGO in India and trying to fix their website, including updating their menu so it's not the last item on the page to load, and it's centered on the screen. Everything works well enough but when I try out my new menu in IE6, I get this weird error where the content below the menu is padded an extra 30px or so and the material in the right-most drop down appears on the far left of the screen, always visible. When I drop down the rightmost link ("Publications") the content appears both in the correct location and in the same spot on the far left of the screen, and changes color when I hover as well. It's tough to describe, so it would probably be best if you took a look: visit http://sevamandir.org/a30/aboutus.htm in your IE6/IE7 browser to see for yourself. I really appreciate your help. Also I'm using a 1000px wide monitor, if there's more hijinks going on outside that space I'd like to know about that too. I took a look at the problem again and it's even weirder than I thought. Only two letters of the bottom-most drop down menu item are shown, no matter how many items are in the left-most drop down menu. When I delete the left-most drop down menu, the bottom item from the next left-most item shows up in the same space. The padding between the menu and the content is always the same. When I hover over the real menu item, the two letters on the left hand side change color to match the hover color. Unfortunately many people that visit our website are using old browsers so IE6 support is pretty crucial, this problem is really weird though, and I would appreciate some help. I uploaded a file with the entire style.css sheet in the and HTML code below, at http://sevamandir.org/a30/aboutus.htm. Here's the relevant code: in the html head: <script> sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script> text surrounding the menu - the menu is simply <ul id="nav"><li></li></ul> etc.  <div style="float:left; height:27px; width:520px; margin:0px; font:16px Arial, Helvetica, sans-serif; font-weight:bold; color:#769841;"> Transforming lives through democratic & participatory development </div> <?php include("menu.php"); ?> </div>  <div id="maincontent"> Relevant menu CSS: #nav, #nav ul { font:bold 11px Verdana, sans-serif; float: left; width: 980px; list-style: none; line-height: 1; background: white; font-weight: bold; padding: 0; border: solid #769841; border-width: 0; margin: 0 0 1em 0; } #nav a { display: block; width: 140px; /*this is the total width of the upper menu*/ w\idth: 120px; /*this is the width less horizontal padding */ padding: 5px 10px 5px 10px; /*horiz padding is the 2nd & 4th items here - goes Top Right Bottom Left */ color: #ffffff; background:#b6791e; text-decoration: none; } #nav a.daddy { background: url(rightarrow2.gif) center right no-repeat; } #nav li { float: left; padding: 0; width: 140px; /*this needs to be updated to match top #nav a */ background:#b6791e; } #nav li:hover, #nav li a:hover, #nav li:hover a { background:#769841; } #nav li:hover li a { background:#ffffff; color:#769841; } #nav li ul { position: absolute; left: -999em; height: auto; width: 14.4em; w\idth: 13.9em; font-weight: bold; border-width: 0.25em; /*green border around dropdown menu*/ margin: 0; } #nav li ul a { background:#ffffff; color:#769841; } #nav li li { padding-right: 1em; width: 13em; background:#ffffff; } #nav li ul a { width: 13em; w\idth: 9em; } #nav li ul ul { margin: -1.75em 0 0 14em; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover, { background: #769841; color:#ffe400; } #nav li a:hover, #nav li li a:hover, #nav li:hover li:hover, #nav li.sfhover a:hover { background: #769841; color:#ffe400; }

Read the article

In Flex, how to drag a component into a column of DataGrid (not the whole DataGrid)?

- by Yousui

Hi guys, I have a custom component: <?xml version="1.0" encoding="utf-8"?> <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Declarations> </fx:Declarations> <fx:Script> <![CDATA[ [Bindable] public var label:String = "don't know"; [Bindable] public var imageName:String = "x.gif"; ]]> </fx:Script> <s:HGroup paddingLeft="8" paddingTop="8" paddingRight="8" paddingBottom="8"> <mx:Image id="img" source="assets/{imageName}" /> <s:Label text="{label}"/> </s:HGroup> </s:Group> and a custom render, which will be used in my DataGrid: <?xml version="1.0" encoding="utf-8"?> <s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" focusEnabled="true" xmlns:components="components.*"> <s:VGroup> <components:Person label="{dataGridListData.label}"> </components:Person> </s:VGroup> </s:MXDataGridItemRenderer> This is my application: <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:services="services.*"> <s:layout> <s:VerticalLayout/> </s:layout> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.controls.Image; import mx.rpc.events.ResultEvent; import mx.utils.ArrayUtil; ]]> </fx:Script> <fx:Declarations> <fx:XMLList id="employees"> <employee> <name>Christina Coenraets</name> <phone>555-219-2270</phone> <email>[email protected]</email> <active>true</active> <image>assets/001.png</image> </employee> <employee> <name>Joanne Wall</name> <phone>555-219-2012</phone> <email>[email protected]</email> <active>true</active> <image>assets/002.png</image> </employee> <employee> <name>Maurice Smith</name> <phone>555-219-2012</phone> <email>[email protected]</email> <active>false</active> <image>assets/003.png</image> </employee> <employee> <name>Mary Jones</name> <phone>555-219-2000</phone> <email>[email protected]</email> <active>true</active> <image>assets/004.png</image> </employee> </fx:XMLList> </fx:Declarations> <s:HGroup> <mx:DataGrid dataProvider="{employees}" width="100%" dropEnabled="true"> <mx:columns> <mx:DataGridColumn headerText="Employee Name" dataField="name"/> <mx:DataGridColumn headerText="Email" dataField="email"/> <mx:DataGridColumn headerText="Image" dataField="image" itemRenderer="renderers.render1"/> </mx:columns> </mx:DataGrid> <s:List dragEnabled="true" dragMoveEnabled="false"> <s:dataProvider> <s:ArrayCollection> <fx:String>aaa</fx:String> <fx:String>bbb</fx:String> <fx:String>ccc</fx:String> <fx:String>ddd</fx:String> </s:ArrayCollection> </s:dataProvider> </s:List> </s:HGroup> </s:Application> Now what I want to do is let the user drag an one or more item from the left List component and drop at the third column of the DataGrid, then using the dragged data to create another <components:Person /> object. So in the final result, maybe the first line contains just one <components:Person /> object at the third column, the second line contains two <components:Person /> object at the third column and so on. Can this be implemented in Flex? How? Great thanks.

Read the article

php form validation with javascript

- by Jon Hanson

hi guys i need help trying to figure out why the alert box doesnt show up when i run this. im also new at programming. html i due just fine. im currently taking a php class, and the teacher thought it would be fun to have us create a form and validate it. my problem is i am trying to call the function which then would validate it. My problem is its not calling it, and i cant quite figure out why. please help? jons viladating <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <link rel="stylesheet" href="decor.css" type="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jons viladating</title> <script type="text/javascript">  </script> <h1>jons validations test</h1> </head> <body> <div id="rightcolumn"> <img src="hula.gif" align="right"/> </div> <text align="left"> <form name="jon" action="formoutput.php" onsubmit="return showjonsForm()" Method="post"> <fieldset style="width:250px"> <label> first name</label> <input type="text" name="fname" size="15" maxlength="22" onBlur="checkRequired( this,'fname')"/><br /> <label>last name</label> <input type="text" name="lname" size="10" maxlength="22"> <br /> </fieldset> <fieldset style="width:250px"> <label>address</label> <input type="text" name="adrs1" size="10" maxlength="30"><br /> <span class="msg_container" id="adrs2"></span><br /> <label>city</label> <input type="text" name="city" size="10" maxlength="15"><br /> <span class="msg_container" id="city"></span><br /> <label>state</label> <input type="text" name="state" size="10" maxlength="2"><br /> <span class="msg_container" id="state"></span><br /> <label>zip</label> <input type="text" name="zip" size="10" maxlength="5"><br /> </fieldset> <fieldset style="width:250px"> <label>phone</label> <input type="text" name="phone" size="10" maxlength="10"><br /> <div>please input phone number in this format 1234567892 thank you </div> <label>email</label> <input type="text" name="email" size="10" maxlength="22"><br /> <div> password must have 1 number upper case and minimum of 6 charcters</div> <label>password</label> <input type="text" name="pw2" size="10" maxlength="12"><br /> <label>select gender type</label> <select name="sex" size="1" <br /> <option>male</option> <option>female</option> <option>timelord</option> </select> <label>date of birth</label> <input type="text name="dob" size="8" maxlength="8"/> <div> would you like to know know more</div> <label> yes</label> <input type="checkbox" checked="checked" name="check" /> </fieldset> <input type="submit"/></form> </form> <div id="footer"> <img src="laps2.jpg"> <img src="orange.jpg"><img src="ok.jpg"> </div> </body> </html>

Search Results

Search found 1909 results on 77 pages for 'gif'.

Page 75/77 | < Previous Page | 71 72 73 74 75 76 77 | Next Page >

- by user1813605

- by osc2nuke

- by MickyScion

- by oompa_l

- by Eric

- by user1763986

- by Rick Strahl

- by srkirkland

- by Stephen.Walther

- by PRajkumar

- by Stephen Walther

- by Rick Strahl

- by kumar

- by sandeep

- by stephenbayer

- by Mariam

- by pedalpete

- by craigmoliver

- by mefiX

- by Kevin Burke

- by Yousui

- by Jon Hanson

< Previous Page | 71 72 73 74 75 76 77 | Next Page >