Search Results

Search found 2033 results on 82 pages for 'absolute'.

Page 34/82 | < Previous Page | 30 31 32 33 34 35 36 37 38 39 40 41  | Next Page >

  • Dynamic Scoped Resources in WPF/XAML?

    - by firoso
    I have 2 Xaml files, one containing a DataTemplate which has a resource definition for an Image brush, and the other containing a content control which presents this DataTemplate. The data template is bound to a view model class. Everything seems to work EXCEPT the ImageBrush resource, which just shows up white... Any ideas? File 1: DataTemplate for ViewModel <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:vm="clr-namespace:SEL.MfgTestDev.ESS.ViewModel" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <DataTemplate DataType="{x:Type vm:PresenterViewModel}"> <DataTemplate.Resources> <ImageBrush x:Key="PresenterTitleBarFillBrush" TileMode="Tile" Viewbox="{Binding Path=FillBrushDimensions, Mode=Default}" ViewboxUnits="Absolute" Viewport="{Binding Path=FillBrushPatternSize, Mode=Default}" ViewportUnits="Absolute" ImageSource="{Binding Path=FillImage, Mode=Default}"/> </DataTemplate.Resources> <Grid d:DesignWidth="1440" d:DesignHeight="900"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="192"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="120"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <DockPanel HorizontalAlignment="Stretch" Width="Auto" LastChildFill="True" Background="{x:Null}" Grid.ColumnSpan="2"> <Image Source="{Binding Path=ImageSource, Mode=Default}"/> <Rectangle Fill="{DynamicResource PresenterTitleBarFillBrush}"/> </DockPanel> </Grid> </DataTemplate> </ResourceDictionary> File 2: Main Window Class which instanciates the DataTemplate Via it's view model. <Window x:Class="SEL.MfgTestDev.ESS.ESSMainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:vm="clr-namespace:SEL.MfgTestDev.ESS.ViewModel" Title="ESS Control Window" Height="900" Width="1440" WindowState="Maximized" WindowStyle="None" ResizeMode="NoResize" DataContext="{Binding}"> <Window.Resources> <ResourceDictionary Source="PresenterViewModel.xaml" /> </Window.Resources> <ContentControl> <ContentControl.Content> <vm:PresenterViewModel ImageSource="XAMLResources\SEL25YearsTitleBar.bmp" FillImage="XAMLResources\SEL25YearsFillPattern.bmp" FillBrushDimensions="0,0,5,110" FillBrushPatternSize="0,0,5,120"/> </ContentControl.Content> </ContentControl> </Window> And for the sake of completeness! The CodeBehind for the View Model using System; using System.Collections.Generic; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Shapes; namespace SEL.MfgTestDev.ESS.ViewModel { public class PresenterViewModel : ViewModelBase { public PresenterViewModel() { } //DataBindings private ImageSource _imageSource; public ImageSource ImageSource { get { return _imageSource; } set { if (_imageSource != value) { _imageSource = value; OnPropertyChanged("ImageSource"); } } } private Rect _fillBrushPatternSize; public Rect FillBrushPatternSize { get { return _fillBrushPatternSize; } set { if (_fillBrushPatternSize != value) { _fillBrushPatternSize = value; OnPropertyChanged("FillBrushPatternSize"); } } } private Rect _fillBrushDimensions; public Rect FillBrushDimensions { get { return _fillBrushDimensions; } set { if (_fillBrushDimensions != value) { _fillBrushDimensions = value; OnPropertyChanged("FillBrushDimensions"); } } } private ImageSource _fillImage; public ImageSource FillImage { get { return _fillImage; } set { if (_fillImage != value) { _fillImage = value; OnPropertyChanged("FillImage"); } } } } }

    Read the article

  • creating a tooltip for a line drawn on cartesiandatacanvas in flex

    - by Guru
    I am trying to draw a line on cartesiandatacanvas. While I am able to draw lines easily using the canvas.moveTo and canvas.lineTo methods, I cannot provide a tooltip to the line if I use that functionality. I have tried creating a label(when ever I draw a line) and adding a tooltip to it but since I show the lines in a 10*10 grid both vertical and horizontal there is a overlap and it is confusing. So now I am trying to create a line object that extends shape or UIComponent. I cannot add this object to canvas using the addChild method it does not work. The addDataChild method works but it messes with the positioning of the line. Can someone help with a solution to this. Simply put I want to draw lines on a datacanvas and add tooltips to them. Here is my code for the line object: package model { import flash.display.CapsStyle; import flash.display.JointStyle; import flash.display.LineScaleMode; import mx.core.UIComponent; public class Line extends UIComponent { public var x1:Number; public var x2:Number; public var y1:Number; public var y2:Number; public var color:Number; public function Line(x1:Number, y1:Number, x2:Number, y2:Number,color:Number) { super(); this.graphics.lineStyle(4, color, 1, true, LineScaleMode.NORMAL, CapsStyle.ROUND, JointStyle.MITER, 1 ); this.graphics.moveTo(x1,y1); this.graphics.lineTo(x2,y2); } } } Here is a sample MXML that has a canvas and tries to use the line object above: <?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()"> <mx:Script> <![CDATA[ import model.Line; import mx.charts.chartClasses.CartesianCanvasValue; private var accidImage:Image = new Image(); public function init():void { var line:Line = new Line(10,10,40,40,0XFF0000); // canvas.addChild(line); *Does not Work* canvas.addDataChild(line,10,10,null,null,null,null); } ]]> </mx:Script> <mx:Panel x="60" y="53" width="517" height="472" layout="absolute"> <mx:PlotChart x="48" y="10" id="plotchart1"> <mx:series> <mx:PlotSeries displayName="Series 1" yField=""/> </mx:series> <mx:annotationElements> <mx:CartesianDataCanvas id="canvas" includeInRanges="true"/> </mx:annotationElements> <mx:verticalAxis> <mx:LinearAxis id="axis11" minimum="0" maximum="100" interval="10" padding="10"/> </mx:verticalAxis> <mx:horizontalAxis> <mx:LinearAxis id="axis21" minimum="0" maximum="100" interval="10" padding="10"/> </mx:horizontalAxis> </mx:PlotChart> <mx:Legend dataProvider="{plotchart1}"/> </mx:Panel> </mx:WindowedApplication>

    Read the article

  • Clickonce downloading the deploy files via HTTP and not HTTPS

    - by Scott Manning
    I am working on a project to deploy a project via clickonce. The website where these files are housed will only accept HTTPS traffic and if you attempt to connect via HTTP, our siteminder agent will redirect you to a HTTPS login form. We cannot disable the siteminder agent or enable HTTP for security reasons. In the application file, I have a codebase that references an absolute path to the manifest and it is via HTTPS <dependency> <dependentAssembly dependencyType="install" codebase="https://psaportal.ilab.test.com/testprinting/Application_Files/testprint_1_0_0_1/testprint.exe.manifest" size="10147"> <assemblyIdentity name="testprint.exe" version="1.0.0.1" publicKeyToken="9a078649ee05e0e7" language="neutral" processorArchitecture="msil" type="win32" /> <hash> <dsig:Transforms> <dsig:Transform Algorithm="urn:schemas-microsoft-com:HashTransforms.Identity" /> </dsig:Transforms> <dsig:DigestMethod Algorithm="http://www.w3.org/2000/09/xmldsig#sha1" /> <dsig:DigestValue>2nch1T0SmlAycmePobtg9F1qF7c=</dsig:DigestValue> </hash> </dependentAssembly> </dependency> In running wireshark and decoding the SSL traffic (I am using the server’s private key in wireshark to decrypt the SSL traffic). I see the request to the application’s manifest file is via HTTPS (This is a good thing). But when the clickonce tries to download the testprint.exe.deploy and the other respective files, it is always via HTTP and the siteminder jumps in and redirects the requests which kills the clickonce install with errors. I have tried to specific an absolute codebase reference in the manifest file, but then I start getting entrypoint errors when the manifest is downloaded by the Clickonce installer. The current dependency section from the manifest file looks like the following: <dependency> <dependentAssembly dependencyType="install" allowDelayedBinding="true" codebase="testprint.exe" size="107008"> <assemblyIdentity name="testprint" version="1.0.0.1" language="neutral" processorArchitecture="msil" /> <hash> <dsig:Transforms> <dsig:Transform Algorithm="urn:schemas-microsoft-com:HashTransforms.Identity" /> </dsig:Transforms> <dsig:DigestMethod Algorithm="http://www.w3.org/2000/09/xmldsig#sha1" /> <dsig:DigestValue>dm2nJsu/5UyaEXSDmnISwfnE9MM=</dsig:DigestValue> </hash> </dependentAssembly> </dependency> I have verified that the website where the application, manifest and deploy files are all under the same URL and the SSL certificate is a valid certificate. We have tried about every combination of generating application and manifest files as we a dream up and are looking for other solutions. The application is using .NET 3.5 and we have tried building the application and manifest files via VS2008, VS2010 and mage with no success. Does anyone know how to get all of the deploy files to always download via HTTPS?

    Read the article

  • Cross Browser Issue

    - by dazedandconfused
    My background is in WinForms programming and I'm trying to branch out a bit. I'm finding cross-browser issues a frustrating barrier in general, but have a specific one that I just can't seem to work through. I want to display an image and place a semi-transparent bar across the top and bottom. This isn't my ultimate goal, of course, but it demonstrates the problem I'm having ina a relatively short code fragment so let's go with it. The sample code below displays as intended in Chrome, Safari, and Firefox. In IE8, the bar at the bottom doesn't appear at all. I've researched it for hours but just can't seem to come up with the solution. I'm sure this is some dumb rookie mistake, but gotta start somewhere. Code snippet... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" language="javascript"> </script> <style type="text/css"> .workarea { position: relative; border: 1px solid black; background-color: #ccc; overflow: hidden; cursor: move; -moz-user-focus: normal; -moz-user-select: none; unselectable: on; } .semitransparent { filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; background-color: Gray; } </style> </head> <body style="width: 800px; height: 600px;"> <div id="workArea" class="workarea" style="width: 800px; height: 350px; left: 100px; top: 50px; background-color: White; border: 1px solid black;"> <img alt="" src="images/TestImage.jpg" style="left: 0px; top: 0px; border: none; z-index: 1;" /> <div id="topBar" class="semitransparent" style="position: absolute;width: 800px; height: 75px; left: 0px; top: 0px; min-height: 75px; border: none; z-index: 2;" /> <div id="bottomBar" class="semitransparent" style="position: absolute; width: 800px; height: 75px; left: 0px; top: 275px; min-height: 75px; border: none; z-index: 2;" /> </div> </body> </html>

    Read the article

  • how to make google-maps info window editable ..

    - by zjm1126
    i want to do this : the info window can be editable when i click the info window. this is my code: <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=0.3,maximum-scale=5.0,user-scalable=yes"> </head> <body onload="initialize()" onunload="GUnload()"> <style type="text/css"> *{ margin:0; padding:0; } </style> <!--<div style="width:100px;height:100px;background:blue;"> </div>--> <div id="map_canvas" style="width: 500px; height: 300px;"></div> <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA-7cuV3vqp7w6zUNiN_F4uBRi_j0U6kJrkFvY4-OX2XYmEAa76BSNz0ifabgugotzJgrxyodPDmheRA&sensor=false"type="text/javascript"></script> <script type="text/javascript"> var aFn; //********** function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); var center=new GLatLng(39.9493, 116.3975); map.setCenter(center, 13); aFn=function(x,y){ var point =new GPoint(x,y) point = map.fromContainerPixelToLatLng(point); //console.log(point.x+" "+point.y) var marker = new GMarker(point,{draggable:true}); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("<b>wwww</b>"); }); map.addOverlay(marker); /********** var marker = new GMarker(point, {draggable: true}); GEvent.addListener(marker, "dragstart", function() { map.closeInfoWindow(); }); GEvent.addListener(marker, "dragend", function() { marker.openInfoWindowHtml("????..."); }); map.addOverlay(marker); //*/ } $(".b").draggable({ revert: true, revertDuration: 0 }); $("#map_canvas").droppable({ drop: function(event,ui) { //console.log(ui.offset.left+' '+ui.offset.top) aFn(event.pageX-$("#map_canvas").offset().left,event.pageY-$("#map_canvas").offset().top); } }); } } </script> </body> </html>

    Read the article

  • background image disappears when position relative used in firefox

    - by toomanyairmiles
    So I'm trying to add a badge to the top right corner of a site I'm doing some work on. z-index works to float the object above the page content but each time i try to use position relative the background image disappears only position absolute shows the image. I don't really want to use absolute as the image needs to be positioned on the right hand side of the sites menu bar not the right hand side of the viewport. Any thoughts or advice appreciated <div class="badge-box"> <a href="http://www.google.com" class="badge">Book Now!</a> </div> <div id="header"> <a href="index.php"><img src="images/pixel.gif" width="378" height="31" alt="Welcome to Gwynfryn Farm Cottages" /></a> </div> <div id="main-menu"> <div> <a href="/">Home</a> <a href="/cottages.php">Our Cottages</a> <a href="/gwynfryn.php">Bed &amp; Breakfast</a> <a href="/rates.php">Price Guide</a> <a href="/llanbedr.php">Location &amp; Local Attractions</a> <a href="/news.php">News &amp; Special Offers</a> <a href="/contact.php">Contact Us</a> </div> </div> .badge-box { width: 1030px; margin-left: auto; margin-right: auto; border: 0px solid red; } .badge { background: url(../images/badge.png) 0px 0px no-repeat; width: 148px; height: 148px; text-indent: -10000px; position: relative; z-index: 999; } #header { width: 960px; height: 40px; margin-left:auto; margin-right:auto; margin-top:20px; padding: 20px 0px 0px 20px; background: #58564f url(../images/header-top-background.png); } #main-menu { width: 980px; margin-left: auto; margin-right: auto; height: 35px; /*background: red;*/ background: #58564f url(../images/header-bottom-background.png); font-family: Georgia, "Times New Roman", Times, serif; } #main-menu div { width: 776px; height: 35px; margin-left: auto; margin-right: auto; background: blue; } #main-menu div a { display: block; float: left; padding: 5px 10px 0px 10px; height: 30px; color: #FFFFFF; font-size: 1.2em; text-align: center; background: green; } #main-menu div a:hover { background-color: #333333; }

    Read the article

  • Smooth Div Scroll jquery not scrolling

    - by Razor
    The Smooth Div Scroll is great but for some reason the area no longer scrolls when I edit or remove the #makeMeScrollable or #makeMeScrollable div.scrollableArea * When I leave it as is it works. Which is a problem for customization. and it won't work after I take the "*" out of div.scrollableArea * If I edit the part with the It's been frustrating figuring out why that part which is supposed to be editable not work at all. Any help with this jquery would be helpful! Thanks in advance! /* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */ /* Invisible left hotspot */ div.scrollingHotSpotLeft { /* The hotspots have a minimum width of 75 pixels and if there is room the will grow and occupy 10% of the scrollable area (20% combined). Adjust it to your own taste. */ min-width: 75px; width: 10%; height: 100%; /* There is a big background image and it's used to solve some problems I experienced in Internet Explorer 6. */ background-image: url(../images/big_transparent.gif); background-repeat: repeat; background-position: center center; position: absolute; z-index: 200; left: 0; /* The first cursor url is for Firefox and other browsers, the second is for Internet Explorer */ cursor: url(../images/cursors/cursor_arrow_left.cur), url(images/cursors/cursor_arrow_left.cur),w-resize; } /* Visible left hotspot */ div.scrollingHotSpotLeftVisible { background-image: url(../images/arrow_left.gif); background-color: #fff; background-repeat: no-repeat; /* Standard CSS3 opacity setting */ opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */ -moz-opacity: 0.35; /* Opacity for Internet Explorer. */ filter: alpha(opacity = 35); /* Use zoom to Trigger "hasLayout" in Internet Explorer 6 or older versions */ zoom: 1; } /* Invisible right hotspot */ div.scrollingHotSpotRight { min-width: 75px; width: 10%; height: 100%; background-image: url(../images/big_transparent.gif); background-repeat: repeat; background-position: center center; position: absolute; z-index: 200; right: 0; cursor: url(../images/cursors/cursor_arrow_right.cur), url(images/cursors/cursor_arrow_right.cur),e-resize; } /* Visible right hotspot */ div.scrollingHotSpotRightVisible { background-image: url(../images/arrow_right.gif); background-color: #fff; background-repeat: no-repeat; opacity: 0.35; filter: alpha(opacity = 35); -moz-opacity: 0.35; zoom: 1; } /* The scroll wrapper is always the same width and height as the containing element (div). Overflow is hidden because you don't want to show all of the scrollable area. */ div.scrollWrapper { position: relative; overflow: hidden; width: 100%; height: 100%; } div.scrollableArea { position: relative; width: auto; height: 100%; } #makeMeScrollable { width:100%; height: 330px; position: relative; } #makeMeScrollable div.scrollableArea * { position: relative; float: left; margin: 0; padding: 0; } http://www.smoothdivscroll.com/ //^above link to the jquery I am talking about

    Read the article

  • Slider Position

    - by RobinHood
    I had used this code for to create a slider. It's working fine. I want to place the slider next to my label control. Like this (Slidder : Slidder Bar) How to do that? <div> <tr> <td class="aln-rht"> <asp:Label ID="Literal4" runat="server" Text="Slidder :" Font-Bold="true" /> </td> <td> <%=Html.DropDownList("Scale", null, "--Select Scale--", new { id = "speed1" , Style = "display:none"})%> </td> </tr> </div> <script type="text/javascript"> $(function () { var abc = $('select#speed1').selectToUISlider().next(); fixToolTipColor(); }); function fixToolTipColor() { $('.ui-tooltip-pointer-down-inner').each(function () { var bWidth = $('.ui-tooltip-pointer-down-inner').css('borderTopWidth'); var bColor = $(this).parents('.ui-slider-tooltip').css('backgroundColor') $(this).css('border-top', bWidth + ' Solid ' + bColor); }); } </script> The ui.slider.extras.css, selectToUISlider.JQuery.js and ui.slider.js files I had used This is JQuery-ui-1.7.1.custom.css, which i am using... .ui-slider { position: relative; text-align: left; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; border-color: Maroon; background-color: Olive} .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; } .ui-slider-horizontal { height: .8em; border-color: Olive;} .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } .ui-slider-vertical { width: .8em; height: 100px; border-color: Olive; } .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } .ui-slider-vertical .ui-slider-range-min { bottom: 0; } .ui-slider-vertical .ui-slider-range-max { top: 0; }/* Tabs

    Read the article

  • CSS menu items flickering in IE6

    - by Quick Joe Smith
    Edit #1: I have just discovered this flicker bug affects IE8 (and therefore most likely IE7) as well. I am putting together a pure-CSS dropdown menu (mostly a learning exercise) and have hit a point in IE where the submenu items are flickering as the mouse moves around within the <li> but outside the inner <a>. Source code is as follows: The included csshover3.htc is downloadable from Peter Nederlof's page for Whatever:hover <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Menu</title> <style type="text/css"> body { behavior: url("csshover3.htc"); } div#navbar { background-color:#333; font-size:1.4em; overflow:auto; } div#navbar ul { display:inline-block; /* ie6 float container bug */ list-style:none; margin:0px; padding:0px; } div#navbar ul.menu li { float:left; display:inline; /* ie6 double-margin bug */ } div#navbar ul.menu a { display:block; text-decoration:none; color:#fff; padding:5px 10px; } div#navbar ul li a:link, div#navbar ul li a:visited { text-decoration:none; } div#navbar ul li a:hover { color:#333; background-color:#f6c323; } div#navbar ul.menu ul { display:none; } div#navbar ul.menu li:hover ul { display:block; position:absolute; background-color:#333; } div#navbar ul.menu li:hover ul li { float:none; } div#navbar ul.menu li:hover ul ul { display:none; } div#navbar ul.menu li:hover li:hover { position:relative; } div#navbar ul.menu li:hover li:hover ul { display:block; position:absolute; left:100%; top:0; } </style> </head> <body> <h1>CSS Menu</h1> <div id="navbar"> <ul class="menu"> <li><a href="#">A</a></li> <li> <a>B</a> <ul> <li><a href="#">123</a></li> <li><a href="#">2</a></li> <li> <a>Tweee</a> <ul> <li><a href="#">Phwoar</a></li> <li><a href="#">Gr</a></li> </ul> </li> </ul> </li> <li><a href="#">C</a></li> </ul> </div> </body> </html> Live demo: http://jsfiddle.net/4q6Vw/ Any help is appreciated.

    Read the article

  • how to change php functions send result to jquery ajax

    - by OpenCode
    I have many codes for user notifications, it do many mysql works, so it needs waiting times. jquery ajax works for php files. how can i use jquery for send php result to web page? current code : <? echo db_cache("main_top_naver_cache", 300, "naver_popular('naver_popular', 4)"))?> wanted code : but it shows errors... <div id='a'> <div id='b'> <script type="text/javascript"> $("#test1").html( " <? echo htmlspecialchars(db_cache("main_top_naver_cache", 300, "naver_popular('naver_popular', 4)"))?> " ); </script> IE debuger shows error ... SCRIPT1015:... <script type="text/javascript"> $("#test1").html( " &lt;style&gt; /* http://html.nhncorp.com/uio_factory/ui_pattern/list/3 */ .section_ol3{position:relative;border:1px solid #ddd;background:#fff;font-size:12px;font-family:Tahoma, Geneva, sans-serif;line-height:normal;*zoom:1} .section_ol3 a{color:#666;text-decoration:none} .section_ol3 a:hover, .section_ol3 a:active, .section_ol3 a:focus{text-decoration:underline} .section_ol3 em{font-style:normal} .section_ol3 h2{margin:0;padding:10px 0 8px 13px;border-bottom:1px solid #ddd;font-size:12px;color:#333} .section_ol3 h2 em{color:#cf3292} .section_ol3 ol{margin:13px;padding:0;list-style:none} .section_ol3 li{position:relative;margin:0 0 10px 0;*zoom:1} .section_ol3 li:after{display:block;clear:both;content:&quot;&quot;} .section_ol3 li .ranking{display:inline-block;width:14px;height:11px;margin:0 5px 0 0;border-top:1px solid #fff;border-bottom:1px solid #d1d1d1;background:#d1d1d1;text-align:center;vertical-align:top;font:bold 10px Tahoma;color:#fff} .section_ol3 li.best .ranking{border-bottom:1px solid #6e87a5;background:#6e87a5} .section_ol3 li.best a{color:#7189a7} .section_ol3 li .num{position:absolute;top:0;right:0;font-size:11px;color:#a8a8a8;white-space:nowrap} .section_ol3 li.best .num{font-weight:bold;color:#7189a7} .section_ol3 .more{position:absolute;top:10px;right:13px;font:11px Dotum, ??;text-decoration:none !important} .section_ol3 .more span{margin:0 2px 0 0;font-weight:bold;font-size:16px;color:#d76ea9;vertical-align:middle} &lt;/style&gt; &lt;div class=&quot;section_ol3&quot;&gt; &lt;ol style='text-align:left;'&gt; &lt;li class='best'&gt;&lt;span class='ranking'&gt;1&lt;/span&gt;&lt;a href='http://search.naver.com/search.naver?where=nexearch&amp;query=%B9%AB%C7%D1%B5%B5%C0%FC&amp;sm=top_lve' onfocus='this.blur()' title='????' target=new&gt;????&lt;/a&gt;&lt;span class='num'&gt;+42&lt;/span&gt;&lt;/li&gt;&lt;li class='best'&gt;&lt;span class='ranking'&gt;2&lt;/span&gt;&lt;a href='http://search.naver.com/search.naver?where=nexearch&amp;query=%B1%E8%C0%E7%BF%AC&amp;sm=top_lve' onfocus='this.blur()' title='???' target=new&gt;???&lt;/a&gt;&lt;span class='num'&gt;+123&lt;/span&gt;&lt;/li&gt;&lt;li class='best'&gt;&lt;span class='ranking'&gt;3&lt;/span&gt;&lt;a href='http://search.naver.com/search.naver?where=nexearch&amp;query=%C0%CC%C7%CF%C0%CC&amp;sm=top_lve' onfocus='this.blur()' title='???' target=new&gt;???&lt;/a&gt;&lt;span class='num'&gt;+90&lt;/span&gt;&lt;/li&gt;&lt;li &gt;&lt;span class='ranking'&gt;4&lt;/span&gt;&lt;a href='http://search.naver.com/search.naver?where=nexearch&amp;query=%BA%D2%C8%C4%C0%C7%B8%ED%B0%EE2&amp;sm=top_lve' onfocus='this.blur()' title='?????2' target=new&gt;?????2&lt;/a&gt;&lt;span class='num'&gt;+87&lt;/span&gt;&lt;/li&gt; &lt;/ol&gt; </div> " );

    Read the article

  • CSS - Can't get the z-index to apply correctly in Internet Explorer

    - by peaki
    I've written a jQuery script to replace <select /> elements with some DIV's and UL's allowing my to simulate the original SELECT but also allow me to style it. So far, aside from a few minor bugs, it works rather nicely. However, in Internet Explorer, the 'options' div is getting rendered underneath the elements below the div. Here's the HTML: <div class="styledSelect-parent" style="display: inline-block; width: 59px;"> <div class="styledSelect-newSelect" style="position: relative;"> <input class="styledSelect-newSelect-selector" style="width: 59px;" readonly="readonly" name="hello" value="Test1" type="text"> <div class="styledSelect-newSelect-options" style="display: none; z-index: 20; width: 59px; position: absolute; left: 0px; top: 18px;"> <ul> <li>Test1</li> <li>Test2</li> <li>Test3</li> <li class="styledSelect-active">Test4</li> <li>Test1</li> <li>Test2</li> </ul> </div> </div> </div> <br /><br /> <div class="styledSelect-parent" style="display: inline-block; width: 59px;"> <div class="styledSelect-newSelect" style="position: relative;"> <input class="styledSelect-newSelect-selector" style="width: 59px;" readonly="readonly" name="hello" value="Test1" type="text"> <div class="styledSelect-newSelect-options" style="display: none; z-index: 20; width: 59px; position: absolute; left: 0px; top: 18px;"> <ul> <li class="styledSelect-active">Test1</li> <li>Test2</li> <li>Test3</li> </ul> </div> </div> </div> If I open the first select, the LI list sits underneath the second select box rather than above it. I can't get the z-indexes to work properly. What am I missing? :/

    Read the article

  • How do I make the info window editable in the Google Maps API?

    - by zjm1126
    I would like to make the info window editable when i click on it. This is my code: <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=0.3,maximum-scale=5.0,user-scalable=yes"> </head> <body onload="initialize()" onunload="GUnload()"> <style type="text/css"> *{ margin:0; padding:0; } </style> <!--<div style="width:100px;height:100px;background:blue;"> </div>--> <div id="map_canvas" style="width: 500px; height: 300px;"></div> <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA-7cuV3vqp7w6zUNiN_F4uBRi_j0U6kJrkFvY4-OX2XYmEAa76BSNz0ifabgugotzJgrxyodPDmheRA&sensor=false"type="text/javascript"></script> <script type="text/javascript"> var aFn; //********** function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); var center=new GLatLng(39.9493, 116.3975); map.setCenter(center, 13); aFn=function(x,y){ var point =new GPoint(x,y) point = map.fromContainerPixelToLatLng(point); //console.log(point.x+" "+point.y) var marker = new GMarker(point,{draggable:true}); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("<b>wwww</b>"); }); map.addOverlay(marker); /********** var marker = new GMarker(point, {draggable: true}); GEvent.addListener(marker, "dragstart", function() { map.closeInfoWindow(); }); GEvent.addListener(marker, "dragend", function() { marker.openInfoWindowHtml("????..."); }); map.addOverlay(marker); //*/ } $(".b").draggable({ revert: true, revertDuration: 0 }); $("#map_canvas").droppable({ drop: function(event,ui) { //console.log(ui.offset.left+' '+ui.offset.top) aFn(event.pageX-$("#map_canvas").offset().left,event.pageY-$("#map_canvas").offset().top); } }); } } </script> </body> </html>

    Read the article

  • Elements of website don't work in IE

    - by mjcuva
    On the site I'm working on for my high school basketball team, certain elements don't work in Internet Explorer. The site is hermantownbasketball.com. The boys basketball sidebar should have nested drop down menus, one when you mouse over the team, such as "High School" and then another when you mouse over the grade under the team, such as 9th grade. This works perfectly fine in chrome, however, I can't get it to work in any version of Internet Explorer. Below is the part of the html and the corresponding css I am using. Unfortunately, I don't know enough css to know which part of my code IE doesn't like or how to fix it. Any help is greatly appreciated! HTML <span class = "boyItem"> <h3>High School</h3> <li class="group"> <h4>9th Grade</h4> <div class = "nested">Schedule</div> <div class = "nested">Events</div> <div class ="nested">Forms</div> <div class ="nested">Calendar</div> </li> <li class="group"> <h4>JV/Varsity</h4> <div class = "nested">Schedule</div> <div class = "nested">Events</div> <div class = "nested">Forms</div> <div class = "nested">Calendar</div> </li> </span> /* Creates the box around the title for each boy section. */ .boyItem h3 { background:#1C23E8; color:#EFFA20; padding-right:2px; padding:10px; font-size:18px; margin-left:-30px; margin-top:-10px; } ###CSS .boyItem h3:hover { background:#2A8FF5; } /* Prevents the boy sub-sections from being visable */ .boyItem li h4 { position: absolute; left:-9999px; font-size:15px; list-style-type:none;} /* Shows the boy sub-sections when user mouses over the section title. */ .boyItem:hover li h4 { position:relative; left:10px; background:#1C23E8; color:#EFFA20; padding-left:20px; padding:5px; } .boyItem:hover li h4:hover { background:#2A8FF5;} .nested { position:absolute; left:-9999px; background:#352EFF; color:#EFFA20; padding-right:2px; padding:4px; font-size:14px; margin:2px; margin-left:30px; margin-top:0px; margin-right:0px; margin-bottom:-2px;} .group:hover .nested {position:relative; left:0px; } .group:hover .nested:hover { background:#2A8FF5}

    Read the article

  • How to hide the div on any click outside

    - by user1720527
    I am starting up on jquery and was tryin to create a simple div hide and show effect. The effects seem to work fine but i need that when user clicks on any other part of the document(i. except the hide/show box), the box should hide back. This is the jsfiddle : http://jsfiddle.net/39DzJ/. I have not styled it properly. I wanted the effects to work first. Can anyone help me out ? Here's the HTML code : <style> #mail_floater { background:#fce8bd; height:88px; width:342px; border:1px solid #b7ad02; border-radius:5px; position:absolute; left:200px; top:50px; border-top:none; z-index:100; padding:0; } #subscribe_user { width:248px; height:16px; border:1px solid #b7ad02; } #cust_care_floater { background:#fce8bd; height:12px; width:108px; border:1px solid #b7ad02; border-radius:2px; border-bottom-left-radius:2px; position:absolute; left:450px; top:30px; border-top:none; z-index:100; clear:both; font-family:Tahoma, Geneva, sans-serif; font-size:10px; font-weight:bold; color:#036f05; box-shadow:1px 1px 3px #ccc inset; } #closer { float:right; margin-right:5px; margin-top:2px; width:19px; height:19px; background:url(../images/close.png) no-repeat; } </style> </head> <body> <a href="#" id="subscribe">Subscribe</a> <a href="#" id="customer_care">Customer care</a> <div id="mail_floater"> <h5>Email</h5> <div id="closer"></div> <div id="email_input"><form><label>Enter E-mail : </label><span><input type="text" id="subscribe_user" /></span> <input type="submit" id="subscribe_me" value="Done" /></form></div> </div> <div id="cust_care_floater"> <span style="padding:0px 10px 0 10px;">033-993-99920</span> </div> </body>? The javascript code : $(document).ready ( function() { var disp_box=$('#mail_floater'); var sub_link=$('#subscribe'); var disp_box_2=$('#cust_care_floater'); var sub_link_2=$('#customer_care'); disp_box.hide(); disp_box_2.hide(); sub_link.click ( function() { disp_box.show(); }); disp_box.find('#closer').click ( function() { disp_box.hide(); }); sub_link_2.click ( function() { disp_box_2.show(); }); });

    Read the article

  • #twitter for Windows Phone 7 protips (#wp7)

    - by Laurent Bugnion
    I started tweeting a list of “protips” (or whatever you want to call that) related to the Twitter for Windows Phone 7 application. Since I worked as integrator on this app, my tasks involved integrating design assets in all screens, and so I had an insider view on all the screens (and that is really a LOT of screens :) Seeing some comments about the app made me understand that most users out there don’t realize how rich the application is, and how many features are available. So without further ado, here we go, a list of Twitter for WP7 protips: (note: I will extend the list if I think of new stuff, and maybe add some screenshots later). Check the dark theme in the application settings! Select a tweet, menu, Translate. Search, Nearby looks for tweets near you Custom searches can be saved. They synch up with web twitter too! Multi language support, independant from OS. supports EN, FR, DE, IT, ES Multiple accounts are supported, simply define them in the Settings Even without a Twitter account, experience is super rich. Trends, Suggested, Nearby, searches etc... Select a tweet, then press Replies To to see the whole conversation Compose, menu, Hashtags. Enter a hashtag and press Add. List is saved for the next time. Select a tweet with location info (like my own). Press the location name to see all Nearby tweets Want to remove location information just for one tweet? Press on the Places button in app bar then Clear Place Settings, General to toggle between Username/Fullname display, Relative/Absolute date/time and more Upload a picture directly from compose screen to TwitPic, yFrog or TweetPhoto (service selection in Settings) Settings, About, Support to see a log of app errors and email it to support (use wisely please) Tap your username to see your profile. Then Menu, Edit Profile to edit your info, including your picture Tap on any user's name to see his profile, tweets, mentions and favorites in a Pivot Happy Tweeting! Laurent   Laurent Bugnion (GalaSoft) Subscribe | Twitter | Facebook | Flickr | LinkedIn

    Read the article

  • Social Business Forum Milano: Day 1

    - by me
    div.c50 {font-family: Helvetica;} div.c49 {position: relative; height: 0px; overflow: hidden;} span.c48 {color: #333333; font-size: 14px; line-height: 18px;} div.c47 {background-color: #ffffff; border-left: 1px solid rgba(0, 0, 0, 0.098); border-right: 1px solid rgba(0, 0, 0, 0.098); background-clip: padding-box;} div.c46 {color: #666666; font-family: arial, helvetica, sans-serif; font-weight: normal} span.c45 {line-height: 14px;} div.c44 {border-width: 0px; font-family: arial, helvetica, sans-serif; margin: 0px; outline-width: 0px; padding: 0px 0px 10px; vertical-align: baseline} div.c43 {border-width: 0px; margin: 0px; outline-width: 0px; padding: 0px 0px 10px; vertical-align: baseline;} p.c42 {color: #666666; font-family: arial, helvetica, sans-serif} span.c41 {line-height: 14px; font-size: 11px;} h2.c40 {font-family: arial, helvetica, sans-serif} p.c39 {font-family: arial, helvetica, sans-serif} span.c38 {font-family: arial, helvetica, sans-serif; font-size: 80%; font-weight: bold} div.c37 {color: #999999; font-size: 14px; font-weight: normal; line-height: 18px} div.c36 {background-clip: padding-box; background-color: #ffffff; border-bottom: 1px solid #e8e8e8; border-left: 1px solid rgba(0, 0, 0, 0.098); border-right: 1px solid rgba(0, 0, 0, 0.098); cursor: pointer; margin-left: 58px; min-height: 51px; padding: 9px 12px; position: relative; z-index: auto} div.c35 {background-clip: padding-box; background-color: #ffffff; border-bottom: 1px solid #e8e8e8; border-left: 1px solid rgba(0, 0, 0, 0.098); border-right: 1px solid rgba(0, 0, 0, 0.098); cursor: pointer; margin-left: 58px; min-height: 51px; padding: 9px 12px; position: relative} div.c34 {overflow: hidden; font-size: 12px; padding-top: 1px;} ul.c33 {padding: 0px; margin: 0px; list-style-type: none; opacity: 0;} li.c32 {display: inline;} a.c31 {color: #298500; text-decoration: none; outline-width: 0px; font-size: 12px; margin-left: 8px;} a.c30 {color: #999999; text-decoration: none; outline-width: 0px; font-size: 12px; float: left; margin-right: 2px;} strong.c29 {font-weight: normal; color: #298500;} span.c28 {color: #999999;} div.c27 {font-family: arial, helvetica, sans-serif; margin: 0px; word-wrap: break-word} span.c26 {border-width: 0px; width: 48px; height: 48px; border-radius: 5px 5px 5px 5px; position: absolute; top: 12px; left: 12px;} small.c25 {font-size: 12px; color: #bbbbbb; position: absolute; top: 9px; right: 12px; float: right; margin-top: 1px;} a.c24 {color: #999999; text-decoration: none; outline-width: 0px; font-size: 12px;} h3.c23 {font-family: arial, helvetica, sans-serif} span.c22 {font-family: arial, helvetica, sans-serif} div.c21 {display: inline ! important; font-weight: normal} span.c20 {font-family: arial, helvetica, sans-serif; font-size: 80%} a.c19 {font-weight: normal;} span.c18 {font-weight: normal;} div.c17 {font-weight: normal;} div.c16 {margin: 0px; word-wrap: break-word;} a.c15 {color: #298500; text-decoration: none; outline-width: 0px;} strong.c14 {font-weight: normal; color: inherit;} span.c13 {color: #7eb566; text-decoration: none} span.c12 {color: #333333; font-family: arial, helvetica, sans-serif; font-size: 14px; line-height: 18px} a.c11 {color: #999999; text-decoration: none; outline-width: 0px;} span.c10 {font-size: 12px; color: #999999; direction: ltr; unicode-bidi: embed;} strong.c9 {font-weight: normal;} span.c8 {color: #bbbbbb; text-decoration: none} strong.c7 {font-weight: bold; color: #333333;} div.c6 {font-family: arial, helvetica, sans-serif; font-weight: normal} div.c5 {font-family: arial, helvetica, sans-serif; font-size: 80%; font-weight: normal} p.c4 {font-family: arial, helvetica, sans-serif; font-size: 80%; font-weight: normal} h3.c3 {font-family: arial, helvetica, sans-serif; font-weight: bold} span.c2 {font-size: 80%} span.c1 {font-family: arial,helvetica,sans-serif;} Here are my impressions of the first day of the Social Business Forum in Milano A dialogue on Social Business Manifesto - Emanuele Scotti, Rosario Sica The presentation was focusing on Thesis and Anti-Thesis around Social Business My favorite one is: Peter H. Reiser ?@peterreiser social business manifesto theses #2: organizations are conversations - hello Oracle Social Network #sbf12 Here are the Thesis (auto-translated from italian to english) From Stress to Success - Pragmatic pathways for Social Business - John Hagel John Hagel talked about challenges of deploying new social technologies. Below are some key points participant tweeted during the session. 6hRhiannon Hughes ?@Rhi_Hughes Favourite quote this morning 'We need to strengthen the champions & neutralise the enemies' John Hagel. Not a hard task at all #sbf12 Expand Reply Retweet Favorite 8hElena Torresani ?@ElenaTorresani Minimize the power of the enemies of change. Maximize the power of the champions - John Hagel #sbf12 Expand Reply Retweet Favorite 8hGaetano Mazzanti ?@mgaewsj John Hagel change: minimize the power of the enemies #sbf12 Expand Reply Retweet Favorite 8hGaetano Mazzanti ?@mgaewsj John Hagel social software as band-aid for poor leadtime/waste management? mmm #sbf12 Expand Reply Retweet Favorite 8hElena Torresani ?@ElenaTorresani "information is power. We need access to information to get power"John Hagel, Deloitte &Touche #sbf12http://instagr.am/p/LcjgFqMXrf/ View photo Reply Retweet Favorite 8hItalo Marconi ?@italomarconi Information is power and Knowledge is subversive. John Hagel#sbf12 Expand Reply Retweet Favorite 8hdanielce ?@danielce #sbf12 john Hagel: innovation is not rational. from Milano, Milano Reply Retweet Favorite 8hGaetano Mazzanti ?@mgaewsj John Hagel: change is a political (not rational) process #sbf12 Expand Reply Retweet Favorite Enterprise gamification to drive engagement - Ray Wang Ray Wang did an excellent speech around engagement strategies and gamification More details can be found on the Harvard Business Review blog Panel Discussion: Does technology matter? Understanding how software enables or prevents participation Christian Finn, Ram Menon, Mike Gotta, moderated by Paolo Calderari Below are the highlights of the panel discussions as live tweets: 2hPeter H. Reiser ?@peterreiser @cfinn Q: social silos: mega trend social suites - do we create social silos + apps silos + org silos ... #sbf12 Expand Reply Delete Favorite 2hPeter H. Reiser ?@peterreiser @cfinn A: Social will be less siloed - more integrated into application design. Analyatics is key to make intelligent decisions #sbf12 Expand Reply Delete Favorite 2hPeter H. Reiser ?@peterreiser @MikeGotta - A: its more social be design then social by layer - Better work experience using social design. #sbf12 Expand Reply Delete Favorite 2hPeter H. Reiser ?@peterreiser Ram Menon: A: Social + Mobile + consumeration is coming together#sbf12 Expand Reply Delete Favorite 2hPeter H. Reiser ?@peterreiser Q: What is the evolution for social business solution in the next 4-5 years? #sbf12 Expand Reply Delete Favorite 2hPeter H. Reiser ?@peterreiser @cfinn Adoption: A: User experience is king - no training needed - We let you participate into a conversation via mobile and email#sbf12 Expand Reply Delete Favorite 2hPeter H. Reiser ?@peterreiser @MikeGotta A:Adoption - how can we measure quality? Literacy - Are people get confident to talk to a invisible audience ? #sbf12 Expand Reply Delete Favorite 2hPeter H. Reiser ?@peterreiser Ram Meno: A:Adoption - What should I measure ? Depend on business goal you want to active? #sbf12 Expand Reply Delete Favorite 2hPeter H. Reiser ?@peterreiser Q: How can technology facilitate adoption #sbf12 Expand Reply Delete Favorite 2hPeter H. Reiser ?@peterreiser #sbf12 @cfinn @mgotta Ram Menon at panel discussion about social technology @oraclewebcenter http://pic.twitter.com/Pquz73jO View photo Reply Delete Favorite 2hPeter H. Reiser ?@peterreiser Ram Menon: 100% of data is in a system somewhere. 100% of collective intelligence is with people. Social System bridge both worlds Expand Reply Delete Favorite 2hPeter H. Reiser ?@peterreiser #sbf12 @MikeGotta Adoption is specific to the culture of the company Expand Reply Delete Favorite 2hPeter H. Reiser ?@peterreiser @cfinn - drive adoption is important @MikeGotta - activity stream + watch list is most important feature in a social system #sbf12 Expand Reply Delete Favorite 2hPeter H. Reiser ?@peterreiser @MikeGotta Why just adoption? email as 100% adoption? #sbf12 Expand Reply Delete Favorite 2hPeter H. Reiser ?@peterreiser @MikeGotta Ram Menon respond: there is only 1 questions to ask: What is the adoption? #sbf12 @socialadoption you like this ? #sbf12 Expand Reply Delete Favorite 3hPeter H. Reiser ?@peterreiser @MikeGotta - just replacing old technology (e.g. email) with new technology does not help. we need to change model/attitude #sbf12 Expand Reply Delete Favorite 3hPeter H. Reiser ?@peterreiser Ram Menon: CEO mandated to replace 6500 email aliases with Social Networking Software #sbf12 Expand Reply Delete Favorite 3hPeter H. Reiser ?@peterreiser @MikeGotta A: How to bring interface together #sbf12 . Going from point tools to platform, UI, Architecture + Eco-system is important Expand Reply Delete Favorite 3hPeter H. Reiser ?@peterreiser Q: How is technology important in Social Business #sbf12 A:@cfinn - technology is enabler , user experience -easy of use is important Expand Reply Delete Favorite 3hPeter H. Reiser ?@peterreiser @cfinn particiapte in panel "Does technology matter? Understanding how software enables or prevents participation" #sbf #webcenter

    Read the article

  • How to programatically retarget animations from one skeleton to another?

    - by Fraser
    I'm trying to write code to transfer animations that were designed for one skeleton to look correct on another skeleton. The source animations consist only of rotations except for translations on the root (they're the mocap animations from the CMU motion capture database). Many 3D applications (eg Maya) have this facility built-in, but I'm trying to write a (very simple) version of it for my game. I've done some work on bone mapping, and because the skeletons are hierarchically similar (bipeds), I can do 1:1 bone mapping for everything but the spine (can work on that later). The problem, however, is that the base skeleton/bind poses are different, and the bones are different scales (shorter/longer), so if I just copy the rotation straight over it looks very strange: I've tried multiplying by the original bone's absolute rotation, then by the inverse of the target, and vice-versa... kind of a shot in the dark, and indeed it didn't work. (Tried relative transformations too)... I'm not sure where to go from here, so if anyone has any resources on stuff like this (papers, source code, etc), that would be really helpful. Thanks!

    Read the article

  • How to learn ASP.NET MVC without learning ASP.NET Web forms

    - by Naif
    First of all, I am not a web developer but I can say that I understand in general the difference between PHP, ASP.NET, etc. I have played a little with ASP.NET and C# as well, however, I didn't continue the learning path. Now I'd like to learn ASP.NET MVC but there is no a book for a beginner in ASP.NET MVC so I had a look at the tutorials but it seems that I need to learn C# first and SQL Server and HTML, am I right? So please tell me how can I learn ASP.NET MVC directly (I mean without learning ASP.NET Web forms). What do I need to learn (You can assume that I am an absolute beginner). Update: It is true that i can find ASP.NET MVC tutorial that explain ASP.NET MVC, but I used to find ASP.NET web forms books that explain SQL and C# at the same time and take you step by step. In ASP.NET MVC I don't know how can I start! How can I learn SQL in its own and C# in its own and then combine them with ASP.NET MVC!

    Read the article

  • Crashplan Is Offering Free Yearly Plans [Black Friday]

    - by Jason Fitzpatrick
    Even if you’re eschewing Black Friday and all the shopping that goes with it, we’ve got a deal for you that’s too good to pass up: a free year of remote backup from CrashPlan. CrashPlan is running a fantastic Black Friday promotion. Starting at 6AM EST they’re offering all their plans for 100% off–we just picked up a family plan, normally $119 a year, for $0. Every two hours they’ll be incrementally decreasing the discount until Monday evening when the sale ends (even if you miss the early part of the sale the discount will still be 42% off come Monday). This is an absolute fantastic deal on a service everyone can use. If you followed along with our guide to using CrashPlan to backup your data at a friend’s house for free, this is a perfect time to add in a year of backup service to add another player to your backup routine. CrashPlan Why Does 64-Bit Windows Need a Separate “Program Files (x86)” Folder? Why Your Android Phone Isn’t Getting Operating System Updates and What You Can Do About It How To Delete, Move, or Rename Locked Files in Windows

    Read the article

  • A Closable jQuery Plug-in

    - by Rick Strahl
    In my client side development I deal a lot with content that pops over the main page. Be it data entry ‘windows’ or dialogs or simple pop up notes. In most cases this behavior goes with draggable windows, but sometimes it’s also useful to have closable behavior on static page content that the user can choose to hide or otherwise make invisible or fade out. Here’s a small jQuery plug-in that provides .closable() behavior to most elements by using either an image that is provided or – more appropriately by using a CSS class to define the picture box layout. /* * * Closable * * Makes selected DOM elements closable by making them * invisible when close icon is clicked * * Version 1.01 * @requires jQuery v1.3 or later * * Copyright (c) 2007-2010 Rick Strahl * http://www.west-wind.com/ * * Licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php Support CSS: .closebox { position: absolute; right: 4px; top: 4px; 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: 0.95; filter: alpha(opacity="100"); } Options: * handle Element to place closebox into (like say a header). Use if main element and closebox container are two different elements. * closeHandler Function called when the close box is clicked. Return true to close the box return false to keep it visible. * cssClass The CSS class to apply to the close box DIV or IMG tag. * imageUrl Allows you to specify an explicit IMG url that displays the close icon. If used bypasses CSS image styling. * fadeOut Optional provide fadeOut speed. Default no fade out occurs */ (function ($) { $.fn.closable = function (options) { var opt = { handle: null, closeHandler: null, cssClass: "closebox", imageUrl: null, fadeOut: null }; $.extend(opt, options); return this.each(function (i) { var el = $(this); var pos = el.css("position"); if (!pos || pos == "static") el.css("position", "relative"); var h = opt.handle ? $(opt.handle).css({ position: "relative" }) : el; var div = opt.imageUrl ? $("<img>").attr("src", opt.imageUrl).css("cursor", "pointer") : $("<div>"); div.addClass(opt.cssClass) .click(function (e) { if (opt.closeHandler) if (!opt.closeHandler.call(this, e)) return; if (opt.fadeOut) $(el).fadeOut(opt.fadeOut); else $(el).hide(); }); if (opt.imageUrl) div.css("background-image", "none"); h.append(div); }); } })(jQuery); The plugin can be applied against any selector that is a container (typically a div tag). The close image or close box is provided typically by way of a CssClass - .closebox by default – which supplies the image as part of the CSS styling. The default styling for the box looks something like this: .closebox { position: absolute; right: 4px; top: 4px; 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: 0.95; filter: alpha(opacity="100"); } Alternately you can also supply an image URL which overrides the background image in the style sheet. I use this plug-in mostly on pop up windows that can be closed, but it’s also quite handy for remove/delete behavior in list displays like this: you can find this sample here to look to play along: http://www.west-wind.com/WestwindWebToolkit/Samples/Ajax/AmazonBooks/BooksAdmin.aspx For closable windows it’s nice to have something reusable because in my client framework there are lots of different kinds of windows that can be created: Draggables, Modal Dialogs, HoverPanels etc. and they all use the client .closable plug-in to provide the closable operation in the same way with a few options. Plug-ins are great for this sort of thing because they can also be aggregated and so different components can pick and choose the behavior they want. The window here is a draggable, that’s closable and has shadow behavior and the server control can simply generate the appropriate plug-ins to apply to the main <div> tag: $().ready(function() { $('#ctl00_MainContent_panEditBook') .closable({ handle: $('#divEditBook_Header') }) .draggable({ dragDelay: 100, handle: '#divEditBook_Header' }) .shadow({ opacity: 0.25, offset: 6 }); }) The window is using the default .closebox style and has its handle set to the header bar (Book Information). The window is just closable to go away so no event handler is applied. Actually I cheated – the actual page’s .closable is a bit more ugly in the sample as it uses an image from a resources file: .closable({ imageUrl: '/WestWindWebToolkit/Samples/WebResource.axd?d=TooLongAndNastyToPrint', handle: $('#divEditBook_Header')}) so you can see how to apply a custom image, which in this case is generated by the server control wrapping the client DragPanel. More interesting maybe is to apply the .closable behavior to list scenarios. For example, each of the individual items in the list display also are .closable using this plug-in. Rather than having to define each item with Html for an image, event handler and link, when the client template is rendered the closable behavior is attached to the list. Here I’m using client-templating and the code that this is done with looks like this: function loadBooks() { showProgress(); // Clear the content $("#divBookListWrapper").empty(); var filter = $("#" + scriptVars.lstFiltersId).val(); Proxy.GetBooks(filter, function(books) { $(books).each(function(i) { updateBook(this); showProgress(true); }); }, onPageError); } function updateBook(book,highlight) { // try to retrieve the single item in the list by tag attribute id var item = $(".bookitem[tag=" +book.Pk +"]"); // grab and evaluate the template var html = parseTemplate(template, book); var newItem = $(html) .attr("tag", book.Pk.toString()) .click(function() { var pk = $(this).attr("tag"); editBook(this, parseInt(pk)); }) .closable({ closeHandler: function(e) { removeBook(this, e); }, imageUrl: "../../images/remove.gif" }); if (item.length > 0) item.after(newItem).remove(); else newItem.appendTo($("#divBookListWrapper")); if (highlight) { newItem .addClass("pulse") .effect("bounce", { distance: 15, times: 3 }, 400); setTimeout(function() { newItem.removeClass("pulse"); }, 1200); } } Here the closable behavior is applied to each of the items along with an event handler, which is nice and easy compared to having to embed the right HTML and click handling into each item in the list individually via markup. Ideally though (and these posts make me realize this often a little late) I probably should set up a custom cssClass to handle the rendering – maybe a CSS class called .removebox that only changes the image from the default box image. This example also hooks up an event handler that is fired in response to the close. In the list I need to know when the remove button is clicked so I can fire of a service call to the server to actually remove the item from the database. The handler code can also return false; to indicate that the window should not be closed optionally. Returning true will close the window. You can find more information about the .closable class behavior and options here: .closable Documentation Plug-ins make Server Control JavaScript much easier I find this plug-in immensely useful especial as part of server control code, because it simplifies the code that has to be generated server side tremendously. This is true of plug-ins in general which make it so much easier to create simple server code that only generates plug-in options, rather than full blocks of JavaScript code.  For example, here’s the relevant code from the DragPanel server control which generates the .closable() behavior: if (this.Closable && !string.IsNullOrEmpty(DragHandleID) ) { string imageUrl = this.CloseBoxImage; if (imageUrl == "WebResource" ) imageUrl = ScriptProxy.GetWebResourceUrl(this, this.GetType(), ControlResources.CLOSE_ICON_RESOURCE); StringBuilder closableOptions = new StringBuilder("imageUrl: '" + imageUrl + "'"); if (!string.IsNullOrEmpty(this.DragHandleID)) closableOptions.Append(",handle: $('#" + this.DragHandleID + "')"); if (!string.IsNullOrEmpty(this.ClientDialogHandler)) closableOptions.Append(",handler: " + this.ClientDialogHandler); if (this.FadeOnClose) closableOptions.Append(",fadeOut: 'slow'"); startupScript.Append(@" .closable({ " + closableOptions + "})"); } The same sort of block is then used for .draggable and .shadow which simply sets options. Compared to the code I used to have in pre-jQuery versions of my JavaScript toolkit this is a walk in the park. In those days there was a bunch of JS generation which was ugly to say the least. I know a lot of folks frown on using server controls, especially the UI is client centric as the example is. However, I do feel that server controls can greatly simplify the process of getting the right behavior attached more easily and with the help of IntelliSense. Often the script markup is easier is especially if you are dealing with complex, multiple plug-in associations that often express more easily with property values on a control. Regardless of whether server controls are your thing or not this plug-in can be useful in many scenarios. Even in simple client-only scenarios using a plug-in with a few simple parameters is nicer and more consistent than creating the HTML markup over and over again. I hope some of you find this even a small bit as useful as I have. Related Links Download jquery.closable West Wind Web Toolkit jQuery Plug-ins © Rick Strahl, West Wind Technologies, 2005-2010Posted in jQuery   ASP.NET  JavaScript  

    Read the article

  • How to style this form using CSS ? [closed]

    - by Rafael
    Hi all ,i'm a beginner at CSS and trying to do a NETTUTS , but there's a portion in the webpage that i don't know what exactly to do in CSS to make it look right ... I just can't get this input text boxes, textarea and the button to be aligned like that , and to be honest the tutor isn't doing a great job to clearing stuff out Using alternative and absolute positioning, and setting top and right spacing is kinda no a good idea i think ... I'm trying to align them using FlexBox feature but don't know why those elements are not moving at all ... Here's my HTML & CSS3 code (for chrome) : <section id="getAfreeQuote"> <h2>GET A FREE QUOTE</h2> <form method="post" action="#"> <input type="text" name="yourName" placeholder="YOUR NAME"/> <input type="email" name="yourEmail" placeholder="YOUR EMAIL"/> <textarea name="projectDetails" placeholder="YOUR PROJECT DETAILS."></textarea> <input type="text" name="timeScale" placeholder="YOUR TIMESCALE"/> <button>Submit</button> </form> #getAfreeQuote form { display:-webkit-box; -webkit-box-orient:vertical; height:500px; } #getAfreeQuote input[name="yourName"]{ -webkit-box-ordinal-group:1; } #getAfreeQuote input[name="yourEmail"]{ -webkit-box-ordinal-group:1; } #getAfreeQuote textarea{ -webkit-box-ordinal-group:2; } #getAfreeQuote input[name="timeScale"]{ -webkit-box-ordinal-group:3; } #getAfreeQuote button { -webkit-box-ordinal-group:4; } and the result :

    Read the article

  • Menu widget - no jQuery nor Javascript required - pure CSS

    - by Renso
    Goal: Create a menu widget that does not require any javascript, extremely lightweight, very fast, soley based on CSS, compatible with FireFox and Chrome. Issues: May have some rendering issues in some versions of IE, sorry :-) Instruments: css file html with specific menu format jQuery-ui library - optional if you want to use your own images/colors Implementation Details: HTML: <div id="header">   <div id="header_Menubar">     <ul class="linkList0 ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">         <li class="first more ui-state-default ui-corner-top ui-tabs-selected"><a title="Home" href="/Home">Home</a>             <ul class="linkList01 ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">                 <li class="ifirst ui-state-default ui-corner-top"><abbr title="Go Home"></abbr><a title="Home" href="/Home">Home</a></li>             </ul>         </li>         <li class="more ui-state-default ui-corner-top ui-tabs-selected"><a title="Menu 2" href="/Menu2a">Menu 2</a>             <ul class="linkList01 ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">                 <li class="ifirst ui-state-default ui-corner-top"><abbr title="Menu 2 a"></abbr><a title="Menu 2 a" href="/Menu2a">Menu 2 a</a></li>                 <li class="ilast ui-state-default ui-corner-top"><abbr title="Menu 2 b"></abbr><a title="Menu 2 b" href="/Menu2b">Menu 2 b</a></li>             </ul>         </li>         <li class="more red ui-state-default ui-corner-top ui-tabs-selected"><a title="Menu 3" href="/Menu3 d">Menu 3</a>             <ul class="linkList01 ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">                 <li class="ifirst ui-state-default ui-corner-top"><abbr title="Menu 3 a"><a title="Menu 3 a" href="/Menu3a">Menu 3 a</a></abbr></li>                 <li class="ui-state-default ui-corner-top"><abbr title="Menu 3 b"><a title="Menu 3 b" href="/Menu3b">Menu 3 b</a></abbr></li>                 <li class="ui-state-default ui-corner-top"><abbr title="Menu 3 c"><a title="Menu 3 c" href="/Menu3c">Menu 3 c</a></abbr></li>                 <li class="ilast ui-state-default ui-corner-top"><abbr title="Menu 3 d"><a title="Menu 3 d" href="/Menu3d">Menu 3 d</a></abbr></li>             </ul>         </li>     </ul>     </div> </div> CSS: /*    =Menu     -----------------------------------------------------------------------------------------    */ #header #header_Menubar {     margin: 0;     padding: 0;     border: 0;     width: 100%;     height: 22px; } #header {     background-color: #99cccc;     background-color: #aaccee;     background-color: #5BA3E0;     background-color: #006cb1; } /* Set menu bar background color     */ #header #header_Menubar {     background-attachment: scroll;     background-position: left center;     background-repeat: repeat-x; } /*    Set main (horizontal) menu typology    */ #header .linkList0 {     padding: 0 0 1em 0;     margin-bottom: 1em;     font-family: 'Trebuchet MS', 'Lucida Grande',           Verdana, Lucida, Geneva, Helvetica,           Arial, sans-serif;     font-weight: bold;     font-size: 1.085em;     font-size: 1em; } /*    Set all ul properties    */ #header .linkList0, #header .linkList0 ul {     list-style: none;     margin: 0;     padding: 0;     list-style-position: outside; } /*    Set all li properties    */ #header .linkList0 > li {     float: left;     position: relative;     font-size: 90%;     margin: 0 0 -1px;     width: 9.7em;     padding-right: 2em;     z-index: 100;    /*IE7:    Fix for IE7 hiding drop down list behind some other page elements    */ } /*    Set all li properties    */ #header .linkList01 > li {     width: 190px; } #header .linkList0 .linkList01 li {     margin-left: 0px; } /*    Set all list background image properties    */ /*#header .linkList0 li a {     background-position: left center;     background-image: url(  '../Content/Images/VerticalButtonBarGradientFade.png' );     background-repeat: repeat-x;     background-attachment: scroll; }*/ /*    Set all A ancor properties    */ #header .linkList0 li a {     display: block;     text-decoration: none;     line-height: 22px; } /*    IE7: Fix for a bug in IE7 where the margins between list items is doubled - need to set height explicitly    */ *+html #header .linkList0 ul li {     height: auto;     margin-bottom: -.3em; } /*    Menu:    Set different borders for different nested level lists     --------------------------------------------------------------    */ #header .linkList0 > li a {     border-left: 10px solid Transparent;     border-right: none; } #header .linkList0 > li a {     border-left: 0px;     margin-left: 0px;     border-right: none; } #header .linkList0 .linkList01 > li a {     border-left: 8px solid #336699;     border-right: none;     border: 1px solid Transparent;     -moz-border-radius: 5px 5px 5px 5px;     -moz-box-shadow: 3px 3px 4px #696969; } #header .linkList0 .linkList01 .linkList001 > li a {     border-left: 6px solid #336699;     border-right: none;     border: 1px solid Transparent;     -moz-border-radius: 5px 5px 5px 5px;     -moz-box-shadow: 3px 3px 4px #696969; } #header .linkList0 .linkList01 .linkList001 .linkList0001 > li a {     border-left: 4px solid #336699;     border-right: none;     border: 1px solid Transparent;     -moz-border-radius: 5px 5px 5px 5px;     -moz-box-shadow: 3px 3px 4px #696969; }     /*    Link and Visited pseudo-class settings for all lists (ul)    */ #header .linkList0 a:link, #header .linkList0 a:visited {     display: block;     text-decoration: none;     padding-left: 1em; } /*    Hide all the nested/sub menu items    */ #header .linkList0 ul {     display: none;     padding: 0;     position: absolute;    /*Important: must not impede on other page elements when drop down opens up    */ } /*    Hide all detail popups    */ #header .detailPopup {     display: none; } /*    Set the typology of all sub-menu list items li    */ /*#header .linkList0 ul li {     background-color: #AACCEE;     background-position: left center;     background-image: url(  '../Content/Images/VerticalButtonBarGradientFade.png' );     background-repeat: repeat-x;     background-attachment: scroll; }*/ #header .linkList0 ul li.more {     background: Transparent url('../Content/Images/ArrowRight.gif') no-repeat right center; } /*    Header list's margin and padding for all list items    */ #header .linkList0 ul li {     margin: 0 0 0 1em;     padding: 0; } #header .linkList01 ul li {     margin: 0;     padding: 0;     width: 189px; } /*    Set margins for the third li sibling (Plan a Call) to display to the right of the parent menu     to avoid the sub-menu overlaying the menu items below    */ #header .linkList0 li.more .linkList01 li.more > ul.linkList001 {     margin: -1.7em 0 0 13.2em;    /*Important, must be careful, if tbe EM since gap increases too much bewteen nested lists the gap will make the nested-list collapse prematurely    */ } /*    Set right hand arrow for list items with sub-menus (class-more)    */ #header li.more {     background: Transparent url('../Content/Images/ArrowRight.gif') no-repeat right center;     padding-right: 48px; } /*    Menu:    Dynamic Behavior of menu items (hover, visted, etc)     -----------------------------------------------------------    */ #header .linkList0 li a:link, #header .linkList01 li a:link {     display: block; } #header .linkList0 li a:visited, #header .linkList01 li a:visited {     display: block; } #header .linkList0 > li:hover { } #header .linkList01 > li:hover a ,#header .linkList001 > li:hover a {     text-decoration: underline; } #header .linkList0 > li abbr:hover span.detailPopup {     display: block;     position: absolute;     top: 1em;     left: 17em;     border: double 1px #696969;     border-style: outset;     width: 120%;     height: auto;     padding: 5px;     font-weight: 100; } #header .linkList0 > li:hover ,#header .linkList0 .linkList01 > li:hover { } #header .linkList0 .linkList01 .linkList001 > li:hover { } #header .linkList0 .linkList01 .linkList001 .linkList0001 > li:hover { } /*    Display the hidden sub menu when hovering over the parent ul's li    */ #header .linkList0 li:hover > ul {     display: block; } /*    Display the hidden sub menu when hovering over the parent ul's li    */ #header .linkList0 .linkList01 li:hover > ul {     display: block;         background: -moz-linear-gradient(top, #1E83CC, #619FCD);     /* Chrome, Safari:*/     background: -webkit-gradient(linear,                 center top, center bottom, from(#1E83CC), to(#619FCD)); } /*    Display the hidden sub menu when hovering over the parent ul's li    */ #header .linkList0 .linkList01 .linkList001 li:hover > ul {     display: block; } /*    Set right hand arrow for list items with sub-menus (class-more) on hover    */ #header li.more:hover { } Also some CSS for global settings that will affect this menu, you of course will have some other styling, but included it here so you can see how/why some css properties were set here: /* Neutralize styling:    Elements we want to clean out entirely: */ html, body {     margin: 0;     padding: 0;     font: 62.5%/120% Verdana, Arial, Helvetica, sans-serif; } /* Neutralize styling:    Elements with a vertical margin: */ h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address {     margin: 0;    /*    most browsers set some default value that is not shared by all browsers    */     padding: 0;        /*    some borowsers default padding, set to 0 for all    */ } /* Apply left margin:    Only to the few elements that need it: */ li, dd, blockquote {     margin-left: 1em; }

    Read the article

  • Watson Ties Against Human Jeopardy Opponents

    - by ETC
    In January we showed you a video of Waton in a practice round against Jeopardy champions Ken Jennings and Brad Rutter. Last night they squared off in a real round of Jeopardy with Watson in a tie with Rutter. Watson held his own against the two champions leveraging the 90 IBM Power 750 servers, 2,880 processors, and the 16TB of memory driving him to his full advantage. It was impressive to watch the round unfold and to see where Watson shined and where he faltered. Check out the video below to footage of Watson in training and then in action on Jeopardy. Pay special attention to the things that trip him up. Watson answers cut and dry questions with absolute lighting speed but stumbles when it comes to nuances in language–like finis vs. terminus in the train question that Jennings answered correctly. Watch Part 2 of the video above here. Latest Features How-To Geek ETC Internet Explorer 9 RC Now Available: Here’s the Most Interesting New Stuff Here’s a Super Simple Trick to Defeating Fake Anti-Virus Malware How to Change the Default Application for Android Tasks Stop Believing TV’s Lies: The Real Truth About "Enhancing" Images The How-To Geek Valentine’s Day Gift Guide Inspire Geek Love with These Hilarious Geek Valentines MyPaint is an Open-Source Graphics App for Digital Painters Can the Birds and Pigs Really Be Friends in the End? [Angry Birds Video] Add the 2D Version of the New Unity Interface to Ubuntu 10.10 and 11.04 MightyMintyBoost Is a 3-in-1 Gadget Charger Watson Ties Against Human Jeopardy Opponents Peaceful Tropical Cavern Wallpaper

    Read the article

  • How To Make Hundreds of Complex Photo Edits in Seconds With Photoshop Actions

    - by Eric Z Goodnight
    Have a huge folder of images needing tweaks? A few hundred adjustments may seem like a big, time consuming job—but read one to see how Photoshop can do repetitive tasks automatically, even if you don’t know how to program! Photoshop Actions are a simple way to program simple routines in Photoshop, and are a great time saver, allowing you to re-perform tasks over and over, saving you minutes or hours, depending on the job you have to work on. See how any bunch of images and even some fairly complicated photo tweaking can be done automatically to even hundreds of images at once. When Can I use Photoshop Actions? Photoshop actions are a way of recording the tools, menus, and keys pressed while using the program. Each time you use a tool, adjust a color, or use the brush, it can be recorded and played back over any file Photoshop can open. While it isn’t perfect and can get very confused if not set up correctly, it can automate editing hundreds of images, saving you hours and hours if you have big jobs with complex edits. The image illustrated above is a template for a polaroid-style picture frame. If you had several hundred images, it would actually be a simple matter to use Photoshop Actions to create hundreds of new images inside the frame in almost no time at all. Let’s take a look at how a simple folder of images and some Image editing automation can turn lots of work into a simple and easy job. Creating a New Action Actions is a default part of the “Essentials” panel set Photoshop begins with as a default. If you can’t see the panel button under the “History” button, you can find Actions by going to Window > Actions or pressing Alt + F9. Click the in the Actions Panel, pictured in the previous illustration on the left. Choose to create a “New Set” in order to begin creating your own custom Actions. Name your action set whatever you want. Names are not relevant, you’ll simply want to make it obvious that you have created it. Click OK. Look back in the layers panel. You’ll see your new Set of actions has been added to the list. Click it to highlight it before going on. Click the again to create a “New Action” in your new set. If you care to name your action, go ahead. Name it after whatever it is you’re hoping to do—change the canvas size, tint all your pictures blue, send your image to the printer in high quality, or run multiple filters on images. The name is for your own usage, so do what suits you best. Note that you can simplify your process by creating shortcut keys for your actions. If you plan to do hundreds of edits with your actions, this might be a good idea. If you plan to record an action to use every time you use Photoshop, this might even be an invaluable step. When you create a new Action, Photoshop automatically begins recording everything you do. It does not record the time in between steps, but rather only the data from each step. So take your time when recording and make sure you create your actions the way you want them. The square button stops recording, and the circle button starts recording again. With these basics ready, we can take a look at a sample Action. Recording a Sample Action Photoshop will remember everything you input into it when it is recording, even specific photographs you open. So begin recording your action when your first photo is already open. Once your first image is open, click the record button. If you’re already recording, continue on. Using the File > Place command to insert the polaroid image can be easier for Actions to deal with. Photoshop can record with multiple open files, but it often gets confused when you try it. Keep your recordings as simple as possible to ensure your success. When the image is placed in, simply press enter to render it. Select your background layer in your layers panel. Your recording should be following along with no trouble. Double click this layer. Double clicking your background layer will create a new layer from it. Allow it to be renamed “Layer 0” and press OK. Move the “polaroid” layer to the bottom by selecting it and dragging it down below “Layer 0” in the layers panel. Right click “Layer 0” and select “Create Clipping Mask.” The JPG image is cropped to the layer below it. Coincidentally, all actions described here are being recorded perfectly, and are reproducible. Cursor actions, like the eraser, brush, or bucket fill don’t record well, because the computer uses your mouse movements and coordinates, which may need to change from photo to photo. Click the to set your Photograph layer to a “Screen” blending mode. This will make the image disappear when it runs over the white parts of the polaroid image. With your image layer (Layer 0) still selected, navigate to Edit > Transform > Scale. You can use the mouse to resize your Layer 0, but Actions work better with absolute numbers. Visit the Width and Height adjustments in the top options panel. Click the chain icon to link them together, and adjust them numerically. Depending on your needs, you may need to use more or less than 30%. Your image will resize to your specifications. Press enter to render, or click the check box in the top right of your application. + Click on your bottom layer, or “polaroid” in this case. This creates a selection of the bottom layer. Navigate to Image > Crop in order to crop down to your bottom layer selection Your image is now resized to your bottommost layer, and Photoshop is still recording to that effect. For additional effect, we can navigate to Image > Image Rotation > Arbitrary to rotate our image by a small tilt. Choosing 3 degrees clockwise , we click OK to render our choice. Our image is rotated, and this step is recorded. Photoshop will even record when you save your files. With your recording still going, find File > Save As. You can easily tell Photoshop to save in a new folder, other than the one you have been working in, so that your files aren’t overwritten. Navigate to any folder you wish, but do not change the filename. If you change the filename, Photoshop will record that name, and save all your images under whatever you type. However, you can change your filetype without recording an absolute filename. Use the pulldown tab and select a different filetype—in this instance, PNG. Simply click “Save” to create a new PNG based on your actions. Photoshop will record the destination and the change in filetype. If you didn’t edit the name of your file, it will always use the variable filename of any image you open. (This is very important if you want to edit hundreds of images at once!) Click File > Close or the red “X” in the corner to close your filetype. Photoshop can record that as well. Since we have already saved our image as a JPG, click “NO” to not overwrite your original image. Photoshop will also record your choice of “NO” for subsequent images. In your Actions panel, click the stop button to complete your action. You can always click the record button to add more steps later, if you want. This is how your new action looks with its steps expanded. Curious how to put it into effect? Read on to see how simple it is to use that recording you just made. Editing Lots of Images with Your New Action Open a large number of images—as many as you care to work with. Your action should work immediately with every image on screen, although you may have to test and re-record, depending on how you did. Actions don’t require any programming knowledge, but often can get confused or work in a counter-intuitive way. Record your action until it is perfect. If it works once without errors, it’s likely to work again and again! Find the “Play” button in your Actions Panel. With your custom action selected, click “Play” and your routine will edit, save, and close each file for you. Keep bashing “Play” for each open file, and it will keep saving and creating new files until you run out of work you need to do. And in mere moments, a complicated stack of work is done. Photoshop actions can be very complicated, far beyond what is illustrated here, and can even be combined with scripts and other actions, creating automated creation of potentially very complex files, or applying filters to an entire portfolio of digital photos. Have questions or comments concerning Graphics, Photos, Filetypes, or Photoshop? Send your questions to [email protected], and they may be featured in a future How-To Geek Graphics article. Image Credits: All images copyright Stephanie Pragnell and author Eric Z Goodnight, protected under Creative Commons. Latest Features How-To Geek ETC How To Make Hundreds of Complex Photo Edits in Seconds With Photoshop Actions How to Enable User-Specific Wireless Networks in Windows 7 How to Use Google Chrome as Your Default PDF Reader (the Easy Way) How To Remove People and Objects From Photographs In Photoshop Ask How-To Geek: How Can I Monitor My Bandwidth Usage? Internet Explorer 9 RC Now Available: Here’s the Most Interesting New Stuff Smart Taskbar Is a Thumb Friendly Android Task Launcher Comix is an Awesome Comics Archive Viewer for Linux Get the MakeUseOf eBook Guide to Speeding Up Windows for Free Need Tech Support? Call the Star Wars Help Desk! [Video Classic] Reclaim Vertical UI Space by Adding a Toolbar to the Left or Right Side of Firefox Androidify Turns You into an Android-style Avatar

    Read the article

  • A Closable jQuery Plug-in

    - by Rick Strahl
    In my client side development I deal a lot with content that pops over the main page. Be it data entry ‘windows’ or dialogs or simple pop up notes. In most cases this behavior goes with draggable windows, but sometimes it’s also useful to have closable behavior on static page content that the user can choose to hide or otherwise make invisible or fade out. Here’s a small jQuery plug-in that provides .closable() behavior to most elements by using either an image that is provided or – more appropriately by using a CSS class to define the picture box layout. /* * * Closable * * Makes selected DOM elements closable by making them * invisible when close icon is clicked * * Version 1.01 * @requires jQuery v1.3 or later * * Copyright (c) 2007-2010 Rick Strahl * http://www.west-wind.com/ * * Licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php Support CSS: .closebox { position: absolute; right: 4px; top: 4px; 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: 0.95; filter: alpha(opacity="100"); } Options: * handle Element to place closebox into (like say a header). Use if main element and closebox container are two different elements. * closeHandler Function called when the close box is clicked. Return true to close the box return false to keep it visible. * cssClass The CSS class to apply to the close box DIV or IMG tag. * imageUrl Allows you to specify an explicit IMG url that displays the close icon. If used bypasses CSS image styling. * fadeOut Optional provide fadeOut speed. Default no fade out occurs */ (function ($) { $.fn.closable = function (options) { var opt = { handle: null, closeHandler: null, cssClass: "closebox", imageUrl: null, fadeOut: null }; $.extend(opt, options); return this.each(function (i) { var el = $(this); var pos = el.css("position"); if (!pos || pos == "static") el.css("position", "relative"); var h = opt.handle ? $(opt.handle).css({ position: "relative" }) : el; var div = opt.imageUrl ? $("<img>").attr("src", opt.imageUrl).css("cursor", "pointer") : $("<div>"); div.addClass(opt.cssClass) .click(function (e) { if (opt.closeHandler) if (!opt.closeHandler.call(this, e)) return; if (opt.fadeOut) $(el).fadeOut(opt.fadeOut); else $(el).hide(); }); if (opt.imageUrl) div.css("background-image", "none"); h.append(div); }); } })(jQuery); The plugin can be applied against any selector that is a container (typically a div tag). The close image or close box is provided typically by way of a CssClass - .closebox by default – which supplies the image as part of the CSS styling. The default styling for the box looks something like this: .closebox { position: absolute; right: 4px; top: 4px; 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: 0.95; filter: alpha(opacity="100"); } Alternately you can also supply an image URL which overrides the background image in the style sheet. I use this plug-in mostly on pop up windows that can be closed, but it’s also quite handy for remove/delete behavior in list displays like this: you can find this sample here to look to play along: http://www.west-wind.com/WestwindWebToolkit/Samples/Ajax/AmazonBooks/BooksAdmin.aspx For closable windows it’s nice to have something reusable because in my client framework there are lots of different kinds of windows that can be created: Draggables, Modal Dialogs, HoverPanels etc. and they all use the client .closable plug-in to provide the closable operation in the same way with a few options. Plug-ins are great for this sort of thing because they can also be aggregated and so different components can pick and choose the behavior they want. The window here is a draggable, that’s closable and has shadow behavior and the server control can simply generate the appropriate plug-ins to apply to the main <div> tag: $().ready(function() { $('#ctl00_MainContent_panEditBook') .closable({ handle: $('#divEditBook_Header') }) .draggable({ dragDelay: 100, handle: '#divEditBook_Header' }) .shadow({ opacity: 0.25, offset: 6 }); }) The window is using the default .closebox style and has its handle set to the header bar (Book Information). The window is just closable to go away so no event handler is applied. Actually I cheated – the actual page’s .closable is a bit more ugly in the sample as it uses an image from a resources file: .closable({ imageUrl: '/WestWindWebToolkit/Samples/WebResource.axd?d=TooLongAndNastyToPrint', handle: $('#divEditBook_Header')}) so you can see how to apply a custom image, which in this case is generated by the server control wrapping the client DragPanel. More interesting maybe is to apply the .closable behavior to list scenarios. For example, each of the individual items in the list display also are .closable using this plug-in. Rather than having to define each item with Html for an image, event handler and link, when the client template is rendered the closable behavior is attached to the list. Here I’m using client-templating and the code that this is done with looks like this: function loadBooks() { showProgress(); // Clear the content $("#divBookListWrapper").empty(); var filter = $("#" + scriptVars.lstFiltersId).val(); Proxy.GetBooks(filter, function(books) { $(books).each(function(i) { updateBook(this); showProgress(true); }); }, onPageError); } function updateBook(book,highlight) { // try to retrieve the single item in the list by tag attribute id var item = $(".bookitem[tag=" +book.Pk +"]"); // grab and evaluate the template var html = parseTemplate(template, book); var newItem = $(html) .attr("tag", book.Pk.toString()) .click(function() { var pk = $(this).attr("tag"); editBook(this, parseInt(pk)); }) .closable({ closeHandler: function(e) { removeBook(this, e); }, imageUrl: "../../images/remove.gif" }); if (item.length > 0) item.after(newItem).remove(); else newItem.appendTo($("#divBookListWrapper")); if (highlight) { newItem .addClass("pulse") .effect("bounce", { distance: 15, times: 3 }, 400); setTimeout(function() { newItem.removeClass("pulse"); }, 1200); } } Here the closable behavior is applied to each of the items along with an event handler, which is nice and easy compared to having to embed the right HTML and click handling into each item in the list individually via markup. Ideally though (and these posts make me realize this often a little late) I probably should set up a custom cssClass to handle the rendering – maybe a CSS class called .removebox that only changes the image from the default box image. This example also hooks up an event handler that is fired in response to the close. In the list I need to know when the remove button is clicked so I can fire of a service call to the server to actually remove the item from the database. The handler code can also return false; to indicate that the window should not be closed optionally. Returning true will close the window. You can find more information about the .closable class behavior and options here: .closable Documentation Plug-ins make Server Control JavaScript much easier I find this plug-in immensely useful especial as part of server control code, because it simplifies the code that has to be generated server side tremendously. This is true of plug-ins in general which make it so much easier to create simple server code that only generates plug-in options, rather than full blocks of JavaScript code.  For example, here’s the relevant code from the DragPanel server control which generates the .closable() behavior: if (this.Closable && !string.IsNullOrEmpty(DragHandleID) ) { string imageUrl = this.CloseBoxImage; if (imageUrl == "WebResource" ) imageUrl = ScriptProxy.GetWebResourceUrl(this, this.GetType(), ControlResources.CLOSE_ICON_RESOURCE); StringBuilder closableOptions = new StringBuilder("imageUrl: '" + imageUrl + "'"); if (!string.IsNullOrEmpty(this.DragHandleID)) closableOptions.Append(",handle: $('#" + this.DragHandleID + "')"); if (!string.IsNullOrEmpty(this.ClientDialogHandler)) closableOptions.Append(",handler: " + this.ClientDialogHandler); if (this.FadeOnClose) closableOptions.Append(",fadeOut: 'slow'"); startupScript.Append(@" .closable({ " + closableOptions + "})"); } The same sort of block is then used for .draggable and .shadow which simply sets options. Compared to the code I used to have in pre-jQuery versions of my JavaScript toolkit this is a walk in the park. In those days there was a bunch of JS generation which was ugly to say the least. I know a lot of folks frown on using server controls, especially the UI is client centric as the example is. However, I do feel that server controls can greatly simplify the process of getting the right behavior attached more easily and with the help of IntelliSense. Often the script markup is easier is especially if you are dealing with complex, multiple plug-in associations that often express more easily with property values on a control. Regardless of whether server controls are your thing or not this plug-in can be useful in many scenarios. Even in simple client-only scenarios using a plug-in with a few simple parameters is nicer and more consistent than creating the HTML markup over and over again. I hope some of you find this even a small bit as useful as I have. Related Links Download jquery.closable West Wind Web Toolkit jQuery Plug-ins © Rick Strahl, West Wind Technologies, 2005-2010Posted in jQuery   ASP.NET  JavaScript  

    Read the article

< Previous Page | 30 31 32 33 34 35 36 37 38 39 40 41  | Next Page >