Search Results

Search found 369 results on 15 pages for 'moz morris'.

Page 9/15 | < Previous Page | 5 6 7 8 9 10 11 12 13 14 15  | Next Page >

  • Cross-Browser CSS3 Rule

    - by Alexander Corotchi
    I have a stupid question, If I want to add round corner for an element in browsers which support some stuff of CSS3, I have to repeat style several time for each browser, because it is different ? For ex : -moz-border-radius: 12px; /* FF1+ */ -webkit-border-radius: 12px; /* Saf3+, Chrome */ border-radius: 12px; /* Opera 10.5, IE 9 */ It means, that I have to add 3 styles for this radius border, doesn't it ?

    Read the article

  • Curvey Redraw tabs working fine on Firefox , problem with IE

    - by Rohit
    Hi, I have used curvey redraw library from google code(http://code.google.com/p/curvycorners/) & it has solved my purpose, though now as per new req i am struggling with IE. I want to have two tab rows each containing 2 tabs. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>curvyCorners - Tab demo</title> <style type="text/css">/*<![CDATA[*/ /* tab styles */ #tabrow { margin:0; padding-left:1ex; min-width:800px; font-size:small; letter-spacing:0.3pt; line-height:1; height:24px; } #tabrow ul { margin:0; padding:0; list-style:none; position:absolute; z-index:2; } #tabrow li { float:left; background-color:#E0DFE3; color:#000; margin-right:5px; padding:5px; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; border-top:solid #9B9B9B 1px; border-left:solid #9B9B9B 1px; border-right:solid #9B9B9B 1px; border-bottom-width:0; border-bottom-color:transparent; cursor:pointer; font-family:verdana;font-weight:bold;font-style:italic } #tabrow li.select { background-color:#ffffff; color:#2470c4; height:14px; } /* page styles */ #midbox { width:220px; height:305px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #midbox { border: solid #9b9b9b 1px; background-color:#ffffff; } #midbox p { margin:0; padding-bottom:1ex; } h1, #topbox h2 { margin:0 15pt; padding: 5pt 0; } div.subpage { padding:1em; } /*]]>*/ </style> <script type="text/javascript" src="curvs.js"> </script> <script type="text/javascript">//<![CDATA[ var selectedTab = 0; function tabclick(n) { if (n === selectedTab) return; // nothing to do. var li = document.getElementById('tab' + selectedTab); curvyCorners.adjust(li, 'className', ''); // Remove the 'select' style li = document.getElementById('page' + selectedTab); li.style.display = 'none'; // hide the currently selected sub-page li = document.getElementById('page' + n); li.style.display = 'block'; // show the new sub-page li = document.getElementById('tab' + n); // get the new (clicked) tab curvyCorners.adjust(li, 'className', 'select'); // and update its style curvyCorners.redraw(); // Redraw all elements with className curvyRedraw selectedTab = n; // store for future reference } var selectedTab1 = 2; function tabclick1(n) { if (n === selectedTab1) return; // nothing to do. var li = document.getElementById('tab' + selectedTab1); curvyCorners.adjust(li, 'className', ''); // Remove the 'select' style li = document.getElementById('page' + selectedTab1); li.style.display = 'none'; // hide the currently selected sub-page li = document.getElementById('page' + n); li.style.display = 'block'; // show the new sub-page li = document.getElementById('tab' + n); // get the new (clicked) tab curvyCorners.adjust(li, 'className', 'select'); // and update its style curvyCorners.redraw(); // Redraw all elements with className curvyRedraw selectedTab1 = n; // store for future reference } //]]> </script> </head> <body> <div id="tabrow"> <ul> <li id="tab0" onclick="tabclick(0);" class="select curvyRedraw">Categories</li> <li id="tab1" onclick="tabclick(1);" class="curvyRedraw">Services</li> </ul> </div> <div id="midbox" class="curvyRedraw"> <div id="page0" class="subpage"> Category details </div> <div id="page1" class="subpage" style="display:none"> Service details </div> </div> <br/><br/> <div id="tabrow"> <ul> <li id="tab2" onclick="tabclick1(2);" class="select curvyRedraw">Recent Activiites</li> <li id="tab3" onclick="tabclick1(3);" class="curvyRedraw">News</li> </ul> </div> <div id="midbox" class="curvyRedraw"> <div id="page2" class="subpage"> Activities </div> <div id="page3" class="subpage" style="display:none"> News </div> </div> </body> </html> Can you please help me out in this? Thanks, Rohit.

    Read the article

  • HTML: order of divs and a tags for href

    - by user2962389
    I'm busy with HTML and CSS and got stuck with this. I have created a button with :hover and :active options, which is centered on the page. Clicking on this button needs to lead to a website. My HTML is: <div> <a href="website"><div id="button">Text</div></a> </div> The CSS is: body, html { height: 100%; } a { text-decoration: none; } #button { text-transform: uppercase; font-size: 18px; text-align: center; padding: 1em 0.5em 0.8em; background-color: white; font-family: Myriad Pro, Source Sans Pro, Helvetica, Arial, sans-serif; color: #ff4700; cursor: pointer; width: 150px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #ff4700; margin-left: auto; margin-right: auto; margin-bottom: 50px; -webkit-transition: all .1s ease; -moz-transition: all .1s ease; -ms-transition: all .1s ease; -o-transition: all .1s ease; transition: all .1s ease; } #button:hover { background-color: #ff4700; color: white; border: 1px solid white; } #button:active { background-color: #cc3900; } The problem lies in the fact that the whole width of the page is clickable at the height of the button and not only the button itself that is 150px wide and is centered on the page. I think I have my divs mixed up and it needs other formatting and precedence, but I'm not sure. Thanks for your help! P.S. First time on StackOverflow, sorry if I formatted something wrong.

    Read the article

  • Positions fixed doesn't work when using -webkit-transform

    - by iSenne
    Hello everybody I am using -webkit-transform (and -moz-transform / -o-transform) to rotate a div. Also have position fixed added so the div scrols down with the user. In Firefox it works fine, but in webkit based browsers it's broken. After using the -webkit-transform, the position fixed doesn't work anymore! How is that possible?

    Read the article

  • CSS Rounded border for div works on chrome and ff, but not on IE

    - by Jean
    Hello, I have this CSS style that does a rounded corners for div border, but for some reason IE does not like this code. #selector{ background-color:#DBDBDB; margin-top:-23px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; background-color:rgba(255,255,255,0.5); } How can do rounded div border on IE. Thanks Jean

    Read the article

  • Equivalant of this gradient code in ie css filter

    - by Wiika
    Hi All, i need an equivalent or an alternative for this code in internet explorer using the filter method background: -moz-linear-gradient(center bottom , rgb(132, 133, 132) 0%, rgb(35, 35, 35) 49%, rgb(104, 104, 104) 100%) repeat scroll 0% 0% transparent; the most important thing in the code is the points ( 0% - 49% - 100% ) i believe that the filter method doesn't have points and doesn't accpect more than two parms for the colors , Is there a way to do it in filter or a javascript script for that ? Thanks.

    Read the article

  • How does CSS 3 border-image work exactly?

    - by Tower
    Hi, I have an image of 4x4 in size and I want to use it all around a DIV's border. The following: -moz-border-image: url("../images/window/side.png") 4 4 4 4 / 4px 4px 4px 4px repeat repeat will place left and right borders, but not bottom and top. What's wrong with it? I think I have misunderstood the syntax and if that is so, how does this syntax really work?

    Read the article

  • [css only gradient background] problems with ff < 3.6

    - by Luca
    hi! :) anyone know if is possible to reproduce this effect background-image: -moz-linear-gradient(top, #666666, #000000); background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #666666)); also on ff < 3.6? im tryin' to generate a gradient background without images! thanks a lot in advance for any advice.

    Read the article

  • How to give cross browser transparency to element's background only?

    - by metal-gear-solid
    How to give cross browser transparency to background only? I want to give transparency to background of ul { background: } only don't want to make text inside ul li a {} transparent. ul { filter: alpha(opacity=50); /* internet explorer / -khtml-opacity: 0.5; / khtml, old safari / -moz-opacity: 0.5; / mozilla, netscape / opacity: 0.5; / fx, safari, opera */ } this code make everything transparent http://perishablepress.com/press/2009/01/27/cross-browser-transparency-via-css/

    Read the article

  • Tooltip arrow right

    - by Tabatha M
    I'm trying to make this tooltip arrow point to the right towards the link. CSS .tooltipside { position: relative; cursor: help; display: inline-block; outline: none; } .tooltipside span { visibility: hidden; position: absolute; bottom: -22px; z-index: 999; width: 52px; margin-left: -63px; padding: 2px; border: 1px solid #80a7ba; background-color: white; -moz-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; text-shadow: 0 1px 0 rgba(255,255,255,.4); } .tooltipside:hover { border: 0; /* IE6 fix */ } .tooltipside:hover span { visibility: visible; } .tooltipside span:before, .tooltipside span:after { content: ""; position: absolute; z-index: 1000; bottom: -7px; left: 50%; margin-left: -8px; border-top: 8px solid #80a7ba; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 0; } .tooltipside span:before { border-top-color: #ccc; bottom: -8px; } ? The html is <a href='#' class='tooltipside'><span> <img src='http://cdn2.iconfinder.com/data/icons/32pxmania/misc_57.png' border='0' width='52' height='52'></span>LINK</a> TEST TEST TEST</b>? It currently points down in the center of the tooltip I need it to point right towards the link. How would I do this? Thanks

    Read the article

  • CodePlex Daily Summary for Saturday, March 13, 2010

    CodePlex Daily Summary for Saturday, March 13, 2010New Projects[Experiment] vczh DBUI: EXPERIMENT. Auto UI adaptor for a specified data base[SAMPLE PROJECT] Branch and Patch with GIT: I'll paste more here later...BlogPress: This web application provides a content management system. Coot: Facebook Photos Screensaver.DotNetNuke® JDMenu: dnnJDMenu makes it easy to use the open source JDMenu component in your DotNetNuke skin.DotNetNuke® RadRotator: dnnRadRotator makes it easy to add telerik RadRotator functionality to your site or custom module. Licensing permits anyone to use the components ...DotNetNuke® RadTabStrip: DNNRadTabStrip makes it easy to add telerik RadTabStrip functionality to your module or skin. Licensing permits anyone to use the components (incl...DotNetNuke® RadTreeView: DNNRadTreeView makes it easy to add telerik RadTreeView functionality to your module or skin. Licensing permits anyone to use the components (incl...DotNetNuke® Skin Garden: A DotNetNuke Design Challenge skin package submitted to the "Out of the box" category by Mark Allan of DnnGarden. Concise and semantic HTML 5 stru...ElmasFC: Elmas Facebook CheckerFront Callback Protocol: Front Callback Protocol make it easier for developers to create a network application in the .Net Language. It provide the flexibility of using TCP...Glass UI: A Windows Forms Control Library built specifically for Aero Glass. This will consist of existing controls, modified to render on glass, as well as ...Guitarist Tools: Some tools for guitarists.HomeUX: HomeUX is home control software featuring a Silverlight-based touch screen user interface.Homework Helper: Homework Helper help students to train simpler homework like "What's the name of the capital of France?" - Question - Answear based. It's made i...IGNOU Mini Project Allocation: A mini project allocation system.Images Compiler: Images Compiler is pretty small wpf application for users who want to resize, rename, disable colors... for too much images in very short time. It...InstitutionManagementSystem: Institution Management System prototypeManagedCv: ManagedCv is the library for C#/VB/ to use the OpenCV librarymanagement joint ownership: Application pour la gestion des actions réalisées au sein d’une copropriété. Application for management actions within a joint ownershipMapWindow6: MapWindow 6.0 is an open source geographic information system (GIS) and library of geospatial software development tools for .NET, written in C#. T...Morris Auto: Morris Auto is a social application build templateMouse control with finger detection: The aim of this project is to design an application for recognition of the movement of a finger through a webcam and then control the mouse. The pr...ORAYLIS BI.Quality: ORAYLIS BI.Quality makes it easier to develop BI Solutions in an agile environment. It adapts Unit Tests to BI Development. Propositional Framework: Different sales propositions are presented to the user using data collected from marketing intelligence, browser history or user behaviour as they ...ServStop: ServStop is a .NET application that makes it easy to stop several system services at once. Now you don't have to change startup types or stop them ...shatkotha web portal: source code of web portal shatkothaSurvey and Registration tools: Two Silverlight tools for add Survey and Registration in your websiteTable Storage Backup & Restore for Windows Azure: Allows various backup & restore options for Windows Azure Table Storage accounts: - Backup from one storage account to another - Backup a storag...Topsy Lib: This project provides wrapper methods to call Topsy's web services from C#.twNowplaying: twNowplaying is a small and handy utility that allows you to tweet your currently playing track from Spotify to Twitter. Followed by the #twNowplay...XOM: XOM: Xml Object Mapper Automatically populate your objects with data from XML via an XML map. Never do this again: if(e.GetElementsByTagName("us...YS Utils: The library contains set of useful classes which may solve common tasks for different applications.ZabViewer: CS ProjectNew ReleasesAppFabric Caching Admin Tool: AppFabric Caching Admin Tool (0.8): System Requirements:.NET 4.0 RC AppFabric Caching Beta2 Test On:Win 7 (64x)ASP.Net Routing Configuration: mal.Web.Routing v0.9.2.0: mal.Web.Routing v0.9.2.0DotNetNuke IM Module of Facebook Like Messenger: DNN IM Module of Facebook Like Messenger: Empower DNN Website with a 1-to-1 Chat Solution named Free Facebook Messenger Style Web Chat Bar of 123 Web Messenger. 1. If you need to use the c...DotNetNuke® Form and List (formerly User Defined Table): 05.01.02: Form and List 05.01.02 (Release Candidate 2)5.1.2 will be the next stabilzation release. Major Highlights fixed Cancel action in a form, it don't ...DotNetNuke® JDMenu: DNN jdMenu 1.0.0: dnnJDMenu makes it easy to use the open source JDMenu component in your DotNetNuke skin. Many thanks to Jonathan Sharp of Outwest Media for creati...DotNetNuke® RadTabStrip: DNNRadTabstrip 1.0.0: DNNRadTabStrip makes it easy to add telerik RadTabStrip functionality to your module or skin. Licensing permits anyone to use the components (inclu...DotNetNuke® RadTreeView: DNNRadTreeView 1.0.0: DNNRadTreeView makes it easy to create skins which use the Telerik RadTreeview functionality. Licensing permits anyone (including designers) to use...DotNetNuke® Skin Garden: Garden Package 1.0.0: A DotNetNuke Design Challenge skin package submitted to the "Out of the box" category by Mark Allan of DnnGarden. Concise and semantic HTML 5 struc...ElmasFC: Elmas FC: This porgram is checking your facebook account automaticly.Free DotNetNuke IM of 123 Web Messenger -- Web-based Friend List: Free Download DNN IM Module and Source Code: 123 Web Messenger offers free DotNetNuke Instant Messaging to help you embed a IM Software into DNN Website by integrating 123 Web Messenger with D...Free Silverlight & WPF Chart Control - Visifire: Visifire SL and WPF Charts 3.0.4 Released: Hi, Today we have released the final version of Visifire v3.0.4 which contains the following major features: * Zooming * Step Line chart ...Home Access Plus+: v3.1.0.0: Version 3.1.0.0 Release Problem with this release, get Version 3.1.1.1 Change Log: Fixed ampersand issue Added Unzip Features Added Help Desk ...Home Access Plus+: v3.1.1.1: Version 3.1.1.1 Release Change Log: Fixed the Help Desk File Changes: ~/App_Data/Tickets.xml ~/bin/CHS Extranet.dll ~/bin/CHS Extranet.pdbHomework Helper: Homework Helper 1.0: The first release of Homework Helper. It got basic functionality. Check the Documentation or press F1 while using the program.Homework Helper: Homework Helper v1.0: This is the latest version of Homework Helper. Just a few updates since the latest one (a couple of minutes ago). Now it saves your settings! Instr...IBCSharp: IBCSharp 1.02: What IBCSharp 1.02.zip unzips to: http://i39.tinypic.com/28hz8m1.png Note: The above solution has MSTest, Typemock Isolator, and Microsoft CHESS c...InfoService: InfoService v1.5 RC 1: InfoService Release Canidate Please note this is a RC. It should be stable, but i can't guarantee that! So use it on your own risk. Please read Pl...IntX: IntX 0.9.3.3: Fixed issue #7100IronRuby: 1.0 RC3: The IronRuby team is pleased to announce version 1.0 RC3! As IronRuby approaches the final 1.0, these RCs will contain crucial bug fixes and enhanc...MAISGestão: LayerDiagram (pdf): This is the final version of the layer diagramMapWindow6: MapWindow 6.0 msi (March 12): After some significant trouble with svn, this site represents a test of using Mercurial for our version control. Hopefully the choice of this new ...MSBuild Mercurial Tasks: 0.2.0 Beta: This release realises the Scenario 2 and provides two MSBuild tasks: HgCommit and HgPush. This task allows to create a new changeset in the current...NLog - Advanced .NET Logging: NLog 2.0 preview 1: This is very experimental first build of NLog from 2.0 branch is available for download. It’s not alpha, beta or even gamma, just a preview of upco...Open NFe: Fonte DANFE v1.9.5: Código-fonte para a versão 1.9.5 do DANFEOpiConsole (XNA): OpiConsole 0.3: OpiConsole 0.3 OpiConsole includes: * PC & Xbox support. * Default commands (cvar, quit etc.) * Ability to add custom commands. *...ORAYLIS BI.Quality: Release 1.0.0: Release 1.0.0Pcap.Net: Pcap.Net 0.5.0 (38141): Pcap.Net - March 2010 Release Pcap.Net is a .NET wrapper for WinPcap written in C++/CLI and C#. It Features almost all WinPcap features and include...PhysX.Net: PhysX.Net 0.12.0.0 Beta 1: This is beta release of 0.12.0.0 for people to test and provide feedback on. It targets 2.8.3.21 of PhysXPólya: Pólya 2010 03 13 alpha: Pólya is a collection of generic data structures; as generic as C#/.Net allows them to be. In this first release the focus has been on some fundam...Prolog.NET: Prolog.NET 1.0 Beta 1.3: Installer includes: primary Prolog.NET assembly Prolog.NET Workbench Prolog.NET Scheduler sample application PrologTest console applicatio...Propositional Framework: USP: The initial code drop was based on the Autocomplete demo and the neural network approach used by Jeff Heaton (@ http://www.heatonresearch.com/) - e...Protocol Transition with BizTalk: Source: Stable buildRoTwee: RoTwee (7.1.0.0): Now picture of your friend is shown in RoTwee. Place mouse cursor to the tweet !ServStop: 0.5.0.0: Initial Release Contents of ServStop0500.zip ServStop.exe 0.5.0.0 Initial Release. 32,768 bytes. Other files None. Source code available on "...SkeinLibManaged: Release 1.0.0.0 (Beta): This is the compiled DLL with XML documentation, so there should be plenty of context sensitive help and Intellisense. This is the Release version...sPWadmin: pwAdmin v0.9a: Added: LiveChat Plugin Shows the latest 150 chat messages from "/Your PW Server/logservice/logs/world2.chat" Refresh chat every 5 seconds Allow...sPWadmin: pwAdmin v0.9b: Some minor fixes to style, layout & different browser support Merged the forms in server configuration tab to a single form that can now save mul...Topsy Lib: Initial release: Initial Debug and Release versions.twNowplaying: twNowplaying: Press the Twitter icon to get started, don't forget to submit bugs to the issue tracker. What's new This release has some minor UI fixes.twNowplaying: twNowplaying Alpha 1.0: Press the Twitter icon to get started, don't forget to submit bugs to the issue tracker. Thank you , and enjoy! =)VCC: Latest build, v2.1.30312.0: Automatic drop of latest buildWPF Dialogs: Version 0.1.3: The FolderBrowseDialog / FolderBrowseDialog - Deutsch was improved and extended.XOM: XOM 0.1A: Just a release of the code I have so far. In order to get your objects to work, you need to create an XML file to define your objects. Here is a ...Xpress - ASP.NET MVC 个人博客程序: xpress2.1.1.0312.beta: 最新beta版,注意:此版本和2.1.0不兼容 更改内容: 将主题文件发放在 Views 文件夹下 主题文件支持强类型Model 主题资源文件放在Resouces目录下YS Utils: V 1.0.0.0: This is first release. The YSUtils library contains first set of classes. ZIP files contains documentation.Most Popular ProjectsMetaSharpWBFS ManagerRawrAJAX Control ToolkitMicrosoft SQL Server Product Samples: DatabaseSilverlight ToolkitWindows Presentation Foundation (WPF)ASP.NET Ajax LibraryASP.NETMicrosoft SQL Server Community & SamplesMost Active ProjectsRawrN2 CMSBlogEngine.NETFasterflect - A Fast and Simple Reflection APIpatterns & practices – Enterprise LibraryFarseer Physics EngineSharePoint Team-MailerCaliburn: An Application Framework for WPF and SilverlightCalcium: A modular application toolset leveraging PrismjQuery Library for SharePoint Web Services

    Read the article

  • Car animations in Frogger on Javascript

    - by Mijoro Nicolas Rasoanaivo
    I have to finish a Frogger game in Javascript for my engineering school degree, but I don't know how to animate the cars. Right now I tried to manipulate the CSS, the DOM, I wrote a script with a setTimeout(), but none of them works.Can I have some help please? Here's my code and my CSS: <html> <head> <title>Image d&eacute;filante</title> <link rel="stylesheet" type="text/css" href="map_style.css"/> </head> <body onload="start()"> <canvas id="jeu" width="800" height="450"> </canvas> <img id="voiture" class="voiture" src="car.png" onload="startTimerCar()"> <img id="voiture2" class="voiture" src="car.png" onload="startTimerCar()"> <img id="voiture3" class="voiture" src="car.png" onload="startTimerCar()"> <img id="bigrig" class="bigrig" src="bigrig.png" onload="startTimerBigrig()"> <img id="bigrig2" class="bigrig" src="bigrig.png" onload="startTimerBigrig()"> <img id="bigrig3" class="bigrig" src="bigrig.png" onload="startTimerBigrig()"> <img id="hotrod" src="hotrod.png" onload="startTimerHotrod()"> <img id="hotrod2" src="hotrod.png" onload="startTimerHotrod()"> <img id="turtle" src="turtles_diving.png" onload="startTimerTurtle()"> <img id="turtle2" src="turtles_diving.png" onload="startTimerTurtle()"> <img id="turtle3" src="turtles_diving.png" onload="startTimerTurtle()"> <img id="small" src="log_small.png" onload="startTimerSmall()"> <img id="small2" src="log_small.png" onload="startTimerSmall()"> <img id="small3" src="log_small.png" onload="startTimerSmall()"> <img id="small4" src="log_small.png" onload="startTimerSmall()"> <img id="med" src="log_medium.png" onload="startTimerMedium()"> <img id="med2" src="log_medium.png" onload="startTimerMedium()"> <img id="med3" src="log_medium.png" onload="startTimerMedium()"> <script type="text/javascript"> var X = 1; var timer; function start(){ setInterval(init,10); document.onkeydown = move; var canvas = document.getElementById('jeu'); var context = canvas.getContext('2d'); var frog = document.getElementById('frog'); var posX_frog = 415; var posY_frog = 400; var voiture = [document.getElementById('voiture'),document.getElementById('voiture2'),document.getElementById('voiture3')]; var bigrig = [document.getElementById('bigrig'),document.getElementById('bigrig2'),document.getElementById('bigrig3')]; var hotrod = [document.getElementById('hotrod'),document.getElementById('hotrod2')]; var turtle = [document.getElementById('turtle'),document.getElementById('turtle2'),document.getElementById('turtle3')]; var small = [document.getElementById('small'),document.getElementById('small2'),document.getElementById('small3'),document.getElementById('small4')]; var med = [document.getElementById('med'),document.getElementById('med2'),document.getElementById('med3')]; function init() { context.fillStyle = "#AEEE00"; context.fillRect(0,0,800,50); context.fillRect(0,200,800,50); context.fillRect(0,400,800,50); context.fillStyle = "#046380"; context.fillRect(0,50,800,150); context.fillStyle = "#000000"; context.fillRect(0,250,800,150); var img= new Image(); img.src="./frog.png"; context.drawImage(img,posX_frog, posY_frog, 46, 38); } function move(event){ if (event.keyCode == 39){ if( posX_frog < 716 ){ posX_frog += 50; } } if(event.keyCode == 37){ if( posX_frog >25 ){ posX_frog -= 50; } } if (event.keyCode == 38){ if( posY_frog > 10 ){ posY_frog -= 50; } } if(event.keyCode == 40){ if( posY_frog <400 ){ posY_frog += 50; } } } } </script> </body> And my map_css: #jeu{ z-index:10; width: 800px; height: 450px; border: 2px black solid; overflow: hidden; position: relative; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ } #voiture{ z-index: 100; position: absolute; top: 315px; left: 48px; transition-timing-function: linear; -webkit-transition-timing-function: linear; -moz-transition-timing-function: linear; } #voiture2{ z-index: 100; position: absolute; top: 315px; left: 144px; } #voiture3{ z-index: 100; position: absolute; top: 315px; left: 240px; } #bigrig{ z-index: 100; position: absolute; top: 365px; left: 200px; } #bigrig2{ z-index: 100; position: absolute; top: 365px; left: 400px; } #bigrig3{ z-index: 100; position: absolute; top: 365px; left: 600px; } #hotrod{ z-index: 100; position: absolute; top: 265px; left: 200px; } #hotrod2{ z-index: 100; position: absolute; top: 265px; left: 500px; } #hotrod3{ z-index: 100; position: absolute; top: 265px; left: 750px; } #turtle{ z-index: 100; position: absolute; top: 175px; left: 50px; } #turtle2{ z-index: 100; position: absolute; top: 175px; left: 450px; } #turtle3{ z-index: 100; position: absolute; top: 175px; left: 250px; } #small{ z-index: 100; position: absolute; top: 125px; left: 20px; } #small2{ z-index: 100; position: absolute; top: 125px; left: 220px; } #small3{ z-index: 100; position: absolute; top: 125px; left: 420px; } #small4{ z-index: 100; position: absolute; top: 125px; left: 620px; } #med{ z-index: 100; position: absolute; top: 75px; left: 120px; } #med2{ z-index: 100; position: absolute; top: 75px; left: 320px; } #med3{ z-index: 100; position: absolute; top: 75px; left: 520px; } I had to say that I'm in the obligation to code in HTML5, CSS3, and Javascript but not jQuery, who is way more easier, I already created games in jQuery... It takes me too much time and too much code lines right here.

    Read the article

  • How can I edit unuusal clipboard content? [on hold]

    - by Peter Jaric
    I'd like to edit application specific clipboard content, with an application specific format. There are clipboard managers that let me edit the plain text content, but I'd like to access clipboard content that application use for internal cut and paste. An example would be when you copy something from a web page in Firefox. When you look at the different formats in a clipboard viewer, there are three or so formats starting with "moz", with content that is not plain text. I'd like to edit that content before pasting it back into Firefox. Can this be done?

    Read the article

  • HTML5 Form Validation

    - by Stephen.Walther
    The latest versions of Google Chrome (16+), Mozilla Firefox (8+), and Internet Explorer (10+) all support HTML5 client-side validation. It is time to take HTML5 validation seriously. The purpose of the blog post is to describe how you can take advantage of HTML5 client-side validation regardless of the type of application that you are building. You learn how to use the HTML5 validation attributes, how to perform custom validation using the JavaScript validation constraint API, and how to simulate HTML5 validation on older browsers by taking advantage of a jQuery plugin. Finally, we discuss the security issues related to using client-side validation. Using Client-Side Validation Attributes The HTML5 specification discusses several attributes which you can use with INPUT elements to perform client-side validation including the required, pattern, min, max, step, and maxlength attributes. For example, you use the required attribute to require a user to enter a value for an INPUT element. The following form demonstrates how you can make the firstName and lastName form fields required: <!DOCTYPE html> <html > <head> <title>Required Demo</title> </head> <body> <form> <label> First Name: <input required title="First Name is Required!" /> </label> <label> Last Name: <input required title="Last Name is Required!" /> </label> <button>Register</button> </form> </body> </html> If you attempt to submit this form without entering a value for firstName or lastName then you get the validation error message: Notice that the value of the title attribute is used to display the validation error message “First Name is Required!”. The title attribute does not work this way with the current version of Firefox. If you want to display a custom validation error message with Firefox then you need to include an x-moz-errormessage attribute like this: <input required title="First Name is Required!" x-moz-errormessage="First Name is Required!" /> The pattern attribute enables you to validate the value of an INPUT element against a regular expression. For example, the following form includes a social security number field which includes a pattern attribute: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Pattern</title> </head> <body> <form> <label> Social Security Number: <input required pattern="^d{3}-d{2}-d{4}$" title="###-##-####" /> </label> <button>Register</button> </form> </body> </html> The regular expression in the form above requires the social security number to match the pattern ###-##-####: Notice that the input field includes both a pattern and a required validation attribute. If you don’t enter a value then the regular expression is never triggered. You need to include the required attribute to force a user to enter a value and cause the value to be validated against the regular expression. Custom Validation You can take advantage of the HTML5 constraint validation API to perform custom validation. You can perform any custom validation that you need. The only requirement is that you write a JavaScript function. For example, when booking a hotel room, you might want to validate that the Arrival Date is in the future instead of the past: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Constraint Validation API</title> </head> <body> <form> <label> Arrival Date: <input id="arrivalDate" type="date" required /> </label> <button>Submit Reservation</button> </form> <script type="text/javascript"> var arrivalDate = document.getElementById("arrivalDate"); arrivalDate.addEventListener("input", function() { var value = new Date(arrivalDate.value); if (value < new Date()) { arrivalDate.setCustomValidity("Arrival date must be after now!"); } else { arrivalDate.setCustomValidity(""); } }); </script> </body> </html> The form above contains an input field named arrivalDate. Entering a value into the arrivalDate field triggers the input event. The JavaScript code adds an event listener for the input event and checks whether the date entered is greater than the current date. If validation fails then the validation error message “Arrival date must be after now!” is assigned to the arrivalDate input field by calling the setCustomValidity() method of the validation constraint API. Otherwise, the validation error message is cleared by calling setCustomValidity() with an empty string. HTML5 Validation and Older Browsers But what about older browsers? For example, what about Apple Safari and versions of Microsoft Internet Explorer older than Internet Explorer 10? What the world really needs is a jQuery plugin which provides backwards compatibility for the HTML5 validation attributes. If a browser supports the HTML5 validation attributes then the plugin would do nothing. Otherwise, the plugin would add support for the attributes. Unfortunately, as far as I know, this plugin does not exist. I have not been able to find any plugin which supports both the required and pattern attributes for older browsers, but does not get in the way of these attributes in the case of newer browsers. There are several jQuery plugins which provide partial support for the HTML5 validation attributes including: · jQuery Validation — http://docs.jquery.com/Plugins/Validation · html5Form — http://www.matiasmancini.com.ar/jquery-plugin-ajax-form-validation-html5.html · h5Validate — http://ericleads.com/h5validate/ The jQuery Validation plugin – the most popular JavaScript validation library – supports the HTML5 required attribute, but it does not support the HTML5 pattern attribute. Likewise, the html5Form plugin does not support the pattern attribute. The h5Validate plugin provides the best support for the HTML5 validation attributes. The following page illustrates how this plugin supports both the required and pattern attributes: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>h5Validate</title> <style type="text/css"> .validationError { border: solid 2px red; } .validationValid { border: solid 2px green; } </style> </head> <body> <form id="customerForm"> <label> First Name: <input id="firstName" required /> </label> <label> Social Security Number: <input id="ssn" required pattern="^d{3}-d{2}-d{4}$" title="Expected pattern is ###-##-####" /> </label> <input type="submit" /> </form> <script type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="Scripts/jquery.h5validate.js"></script> <script type="text/javascript"> // Enable h5Validate plugin $("#customerForm").h5Validate({ errorClass: "validationError", validClass: "validationValid" }); // Prevent form submission when errors $("#customerForm").submit(function (evt) { if ($("#customerForm").h5Validate("allValid") === false) { evt.preventDefault(); } }); </script> </body> </html> When an input field fails validation, the validationError CSS class is applied to the field and the field appears with a red border. When an input field passes validation, the validationValid CSS class is applied to the field and the field appears with a green border. From the perspective of HTML5 validation, the h5Validate plugin is the best of the plugins. It adds support for the required and pattern attributes to browsers which do not natively support these attributes such as IE9. However, this plugin does not include everything in my wish list for a perfect HTML5 validation plugin. Here’s my wish list for the perfect back compat HTML5 validation plugin: 1. The plugin would disable itself when used with a browser which natively supports HTML5 validation attributes. The plugin should not be too greedy – it should not handle validation when a browser could do the work itself. 2. The plugin should simulate the same user interface for displaying validation error messages as the user interface displayed by browsers which natively support HTML5 validation. Chrome, Firefox, and Internet Explorer all display validation errors in a popup. The perfect plugin would also display a popup. 3. Finally, the plugin would add support for the setCustomValidity() method and the other methods of the HTML5 validation constraint API. That way, you could implement custom validation in a standards compatible way and you would know that it worked across all browsers both old and new. Security It would be irresponsible of me to end this blog post without mentioning the issue of security. It is important to remember that any client-side validation — including HTML5 validation — can be bypassed. You should use client-side validation with the intention to create a better user experience. Client validation is great for providing a user with immediate feedback when the user is in the process of completing a form. However, client-side validation cannot prevent an evil hacker from submitting unexpected form data to your web server. You should always enforce your validation rules on the server. The only way to ensure that a required field has a value is to verify that the required field has a value on the server. The HTML5 required attribute does not guarantee anything. Summary The goal of this blog post was to describe the support for validation contained in the HTML5 standard. You learned how to use both the required and the pattern attributes in an HTML5 form. We also discussed how you can implement custom validation by taking advantage of the setCustomValidity() method. Finally, I discussed the available jQuery plugins for adding support for the HTM5 validation attributes to older browsers. Unfortunately, I am unaware of any jQuery plugin which provides a perfect solution to the problem of backwards compatibility.

    Read the article

  • HTML5 Form Validation

    - by Stephen.Walther
    The latest versions of Google Chrome (16+), Mozilla Firefox (8+), and Internet Explorer (10+) all support HTML5 client-side validation. It is time to take HTML5 validation seriously. The purpose of the blog post is to describe how you can take advantage of HTML5 client-side validation regardless of the type of application that you are building. You learn how to use the HTML5 validation attributes, how to perform custom validation using the JavaScript validation constraint API, and how to simulate HTML5 validation on older browsers by taking advantage of a jQuery plugin. Finally, we discuss the security issues related to using client-side validation. Using Client-Side Validation Attributes The HTML5 specification discusses several attributes which you can use with INPUT elements to perform client-side validation including the required, pattern, min, max, step, and maxlength attributes. For example, you use the required attribute to require a user to enter a value for an INPUT element. The following form demonstrates how you can make the firstName and lastName form fields required: <!DOCTYPE html> <html > <head> <title>Required Demo</title> </head> <body> <form> <label> First Name: <input required title="First Name is Required!" /> </label> <label> Last Name: <input required title="Last Name is Required!" /> </label> <button>Register</button> </form> </body> </html> If you attempt to submit this form without entering a value for firstName or lastName then you get the validation error message: Notice that the value of the title attribute is used to display the validation error message “First Name is Required!”. The title attribute does not work this way with the current version of Firefox. If you want to display a custom validation error message with Firefox then you need to include an x-moz-errormessage attribute like this: <input required title="First Name is Required!" x-moz-errormessage="First Name is Required!" /> The pattern attribute enables you to validate the value of an INPUT element against a regular expression. For example, the following form includes a social security number field which includes a pattern attribute: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Pattern</title> </head> <body> <form> <label> Social Security Number: <input required pattern="^\d{3}-\d{2}-\d{4}$" title="###-##-####" /> </label> <button>Register</button> </form> </body> </html> The regular expression in the form above requires the social security number to match the pattern ###-##-####: Notice that the input field includes both a pattern and a required validation attribute. If you don’t enter a value then the regular expression is never triggered. You need to include the required attribute to force a user to enter a value and cause the value to be validated against the regular expression. Custom Validation You can take advantage of the HTML5 constraint validation API to perform custom validation. You can perform any custom validation that you need. The only requirement is that you write a JavaScript function. For example, when booking a hotel room, you might want to validate that the Arrival Date is in the future instead of the past: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Constraint Validation API</title> </head> <body> <form> <label> Arrival Date: <input id="arrivalDate" type="date" required /> </label> <button>Submit Reservation</button> </form> <script type="text/javascript"> var arrivalDate = document.getElementById("arrivalDate"); arrivalDate.addEventListener("input", function() { var value = new Date(arrivalDate.value); if (value < new Date()) { arrivalDate.setCustomValidity("Arrival date must be after now!"); } else { arrivalDate.setCustomValidity(""); } }); </script> </body> </html> The form above contains an input field named arrivalDate. Entering a value into the arrivalDate field triggers the input event. The JavaScript code adds an event listener for the input event and checks whether the date entered is greater than the current date. If validation fails then the validation error message “Arrival date must be after now!” is assigned to the arrivalDate input field by calling the setCustomValidity() method of the validation constraint API. Otherwise, the validation error message is cleared by calling setCustomValidity() with an empty string. HTML5 Validation and Older Browsers But what about older browsers? For example, what about Apple Safari and versions of Microsoft Internet Explorer older than Internet Explorer 10? What the world really needs is a jQuery plugin which provides backwards compatibility for the HTML5 validation attributes. If a browser supports the HTML5 validation attributes then the plugin would do nothing. Otherwise, the plugin would add support for the attributes. Unfortunately, as far as I know, this plugin does not exist. I have not been able to find any plugin which supports both the required and pattern attributes for older browsers, but does not get in the way of these attributes in the case of newer browsers. There are several jQuery plugins which provide partial support for the HTML5 validation attributes including: · jQuery Validation — http://docs.jquery.com/Plugins/Validation · html5Form — http://www.matiasmancini.com.ar/jquery-plugin-ajax-form-validation-html5.html · h5Validate — http://ericleads.com/h5validate/ The jQuery Validation plugin – the most popular JavaScript validation library – supports the HTML5 required attribute, but it does not support the HTML5 pattern attribute. Likewise, the html5Form plugin does not support the pattern attribute. The h5Validate plugin provides the best support for the HTML5 validation attributes. The following page illustrates how this plugin supports both the required and pattern attributes: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>h5Validate</title> <style type="text/css"> .validationError { border: solid 2px red; } .validationValid { border: solid 2px green; } </style> </head> <body> <form id="customerForm"> <label> First Name: <input id="firstName" required /> </label> <label> Social Security Number: <input id="ssn" required pattern="^\d{3}-\d{2}-\d{4}$" title="Expected pattern is ###-##-####" /> </label> <input type="submit" /> </form> <script type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="Scripts/jquery.h5validate.js"></script> <script type="text/javascript"> // Enable h5Validate plugin $("#customerForm").h5Validate({ errorClass: "validationError", validClass: "validationValid" }); // Prevent form submission when errors $("#customerForm").submit(function (evt) { if ($("#customerForm").h5Validate("allValid") === false) { evt.preventDefault(); } }); </script> </body> </html> When an input field fails validation, the validationError CSS class is applied to the field and the field appears with a red border. When an input field passes validation, the validationValid CSS class is applied to the field and the field appears with a green border. From the perspective of HTML5 validation, the h5Validate plugin is the best of the plugins. It adds support for the required and pattern attributes to browsers which do not natively support these attributes such as IE9. However, this plugin does not include everything in my wish list for a perfect HTML5 validation plugin. Here’s my wish list for the perfect back compat HTML5 validation plugin: 1. The plugin would disable itself when used with a browser which natively supports HTML5 validation attributes. The plugin should not be too greedy – it should not handle validation when a browser could do the work itself. 2. The plugin should simulate the same user interface for displaying validation error messages as the user interface displayed by browsers which natively support HTML5 validation. Chrome, Firefox, and Internet Explorer all display validation errors in a popup. The perfect plugin would also display a popup. 3. Finally, the plugin would add support for the setCustomValidity() method and the other methods of the HTML5 validation constraint API. That way, you could implement custom validation in a standards compatible way and you would know that it worked across all browsers both old and new. Security It would be irresponsible of me to end this blog post without mentioning the issue of security. It is important to remember that any client-side validation — including HTML5 validation — can be bypassed. You should use client-side validation with the intention to create a better user experience. Client validation is great for providing a user with immediate feedback when the user is in the process of completing a form. However, client-side validation cannot prevent an evil hacker from submitting unexpected form data to your web server. You should always enforce your validation rules on the server. The only way to ensure that a required field has a value is to verify that the required field has a value on the server. The HTML5 required attribute does not guarantee anything. Summary The goal of this blog post was to describe the support for validation contained in the HTML5 standard. You learned how to use both the required and the pattern attributes in an HTML5 form. We also discussed how you can implement custom validation by taking advantage of the setCustomValidity() method. Finally, I discussed the available jQuery plugins for adding support for the HTM5 validation attributes to older browsers. Unfortunately, I am unaware of any jQuery plugin which provides a perfect solution to the problem of backwards compatibility.

    Read the article

  • Not use CSS definitions for one <FORM>

    - by Svisstack
    I have template from themeforest and i dont want edit css from this template, because i don't have time for it. But i want integrate paypal buttons to my webpage, problem is paypal button use tag for selection payment option. I have overloaded style for tag and this not look like should. How to not use CSS for this element. I dont want use and if i don't must then i dont want edit this CSS;-) This css look wired, i must edit her to solve this problem? What is best solution for this? /*//// - Forms - ////*/ form { margin-bottom:20px; } body.ie7 form, body.ie8 { margin-bottom:40px; } form p { margin-bottom:15px; } form label { float:left; width:140px; margin-top:5px; } form input, form textarea, form select { padding:10px 5px; background:#fff url(../img/bg-input.gif) repeat-x top; border:1px solid #D9D9D9; width:448px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } form input.small { width:35px; } html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } Can anyone help me?

    Read the article

  • Is it possible to render and style a <title> element from within the <head> of an html document?

    - by Brian Z
    Is it possible to render and style a <title> element from within the <head> of an html document? I thought it was impossible to render information from the <head>, but the system status page for 37signals.com seems to be doing just that - http://status.37signals.com/. If you inspect the element at the very top of the page, the text that reads "37signals System Status", you'll see that the part of the DOM that is generating the text is the <head>'s <title>, and the css is as follows: title { display: block; margin: 10px auto; max-width: 840px; width: 100%; padding: 0 20px; float: left; color: black; text-rendering: optimizelegibility; -moz-box-sizing: border-box; box-sizing: border-box; } Can someone confirm that the <title> info from the <head> is indeed what is being rendered? If so, can someone point to documentation that defines this capability as I have not found any? I have applied the above css to an html document on my local web server using the same browser (chromium, os x 10.8.5) as the 37signals site was viewed on, yet my file did not display the <head>'s <title>.

    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

  • Dynamically alter outter div as inner one gets bigger.

    - by Razor Storm
    I have two divs, one inside another. The outter one is called #wrapper, while the inner one is called #pad. Now #pad allows user input, and I have a javascript (jQuery) function that changes the content of #pad based on what the user input is. Sometimes, because of this function, #pad's content will cause the div to become more elongated than before. Now obviously I would wish for #wrapper to grow longer as well to accommodate this change in #pad's length. However, this does not occur. #wrapper { clear:both; padding-top:0.5em; /*padding-left:50px;*/ height: 100%; background-color: rgba(255,255,255,0.4); -moz-border-radius: 20px 20px 0px 0px; -webkit-border-radius: 20px 20px 0px 0px; border-radius: 20px 20px 0px 0px; } #pad { margin-top: 25px; -moz-border-radius: 5px; border: solid 1px #DDD; margin-left:25px; padding-left:25px; margin-right:25px; padding-right:25px; margin-bottom:2em; } This is the javascript function: function preview() { var id1=$("#input1").val(); var id2=$("#input2").val(); var id3=$("#input3").val(); var id4=$("#input4").val(); var id5=$("#input5").val(); if(id1!= null && id1!="") { if( $("#preview1").attr("src")!=id1) { $("#preview1").attr("src",id1); $("#preview1").fadeIn("slow"); } } else { $("#preview1").attr("src",""); $("#preview1").fadeOut("slow"); } if(id2!= null && id2!="") { if( $("#preview2").attr("src")!=id2) { $("#preview2").attr("src",id2); $("#preview2").fadeIn("slow"); } } else { $("#preview2").attr("src",""); $("#preview2").fadeOut("slow"); } if(id3!= null && id3!="") { if( $("#preview3").attr("src")!=id3) { $("#preview3").attr("src",id3); $("#preview3").fadeIn("slow"); } } else { $("#preview3").attr("src",""); $("#preview3").fadeOut("slow"); } if(id4!= null && id4!="") { if( $("#preview4").attr("src")!=id4) { $("#preview4").attr("src",id4); $("#preview4").fadeIn("slow"); } } else { $("#preview4").attr("src",""); $("#preview4").fadeOut("slow"); } if(id5!= null && id5!="") { if( $("#preview5").attr("src")!=id5) { $("#preview5").attr("src",id5); $("#preview5").fadeIn("slow"); } } else { $("#preview5").attr("src",""); $("#preview5").fadeOut("slow"); } setTimeout("preview()",1000); $("#wrapper").attr("height",$(document).attr("height")); } http://surveys.mylifeisberkeley.com/

    Read the article

  • CSS optimization - extra classes in dom or preprocessor-repetitive styling in css file?

    - by anna.mi
    I'm starting on a fairly large project and I'm considering the option of using LESS for pre-processing my css. the useful thing about LESS is that you can define a mixin that contains for example: .border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -o-border-radius: @radius; -ms-border-radius: @radius; border-radius: @radius; } and then use it in a class declaration as .rounded-div { .border-radius(10px); } to get the outputted css as: .rounded-div { -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } this is extremely useful in the case of browser prefixes. However this same concept could be used to encapsulate commonly-used css, for example: .column-container { overflow: hidden; display: block; width: 100%; } .column(@width) { float: left; width: @width; } and then use this mixin whenever i need columns in my design: .my-column-outer { .column-container(); background: red; } .my-column-inner { .column(50%); font-color: yellow; } (of course, using the preprocessor we could easily expand this to be much more useful, eg. pass the number of columns and the container width as variables and have LESS determine the width of each column depending on the number of columns and container width!) the problem with this is that when compliled, my final css file would have 100 such declarations, copy&pasted, making the file huge and bloated and repetitive. The alternative to this would be to use a grid system which has predefined classes for each column-layout option, eg .c-50 ( with a "float: left; width:50%;" definition ), .c-33, .c-25 to accomodate for a 2-column, 3-column and 4-column layout and then use these classes to my dom. i really mislike the idea of the extra classes, from experience it results to bloated dom (creating extra divs just to attach the grid classes to). Also the most basic tutorial for html/css would tell you that the dom should be separated from the styling - grid classes are styling related! to me, its the same as attaching a "border-radius-10" class to the .rounded-div example above! on the other hand, the large css file that would result from the repetitive code is also a disadvantage so i guess my question is, which one would you recommend? and which do you use? and, which solution is best for optimization? apart from the larger file size, has there even been any research on whether browser renders multiple classes faster than a large css file, or the other way round? tnx! i'd love to hear your opinion!

    Read the article

  • Ann Arbor Day of .NET 2010 Recap

    - by PSteele
    Had a great time at the Ann Arbor Day of .NET on Saturday.  Lots of great speakers and topics.  And chance to meet up with friends you usually only communicate with via email/twitter. My Presentation I presented "Getting up to speed with C# 3.5 — Just in time for 4.0!".  There's still a lot of devs that are either stuck in .NET 2.0 or just now moving to .NET 3.5.  This presentation gave highlights of a lot of the key features of 3.5.  I had great questions from the audience.  Afterwards, I talked with a few people who are just now getting in to 3.5 and they told me they had a lot of "A HA!" moments when something I said finally clicked and made sense from a code sample they had seen on the web.  Thanks to all who attended! A few people have asked me for the slides and demo.  The slides were nothing more than a table of contents.  90% of the presentation was spent inside Visual Studio demo'ing new techniques.  However, I have included it in the ZIP file with the sample solution.  You can download it here. Dennis Burton on MongoDB I caught Dennis Burton's presentation on MongoDB.  I was really interested in this one as I've missed the last few times Dennis had given it to local user groups.  It was very informative and I want to spend some time learning more about MongoDB.  I'm still an old-school relational guy, but I'm willing to investigate alternatives. Brian Genisio on Prism Since I'm not a Silverlight/WPF guy (yet), I wasn't sure this would interest me.  But I talked with Brian for a couple of minutes before the presentation and he convinced me to catch it.  And I'm glad he did.  Prism looks like a very nice framework for "composable UI's" in Silverlight and WPF.  I like the whole "dependency injection" feel to it.  Nice job Brian! GiveCamp Planning I spent some time Saturday working on things for the upcoming GiveCamp (which is why I only caught a few sessions).  Ann Arbor's Day of .NET and GiveCamp have both been held at Washtenaw Community College so I took some time (along with fellow GiveCamp planners Mike Eaton and John Hopkins) to check out the new location for Ann Arbor GiveCamp this year! In the past, WCC has let us use the Business Education (BE) building for our GiveCamp's.  But this year, they're moving us over to the Morris Lawrence (ML) building.  Let me tell you – this is a step UP!  In the BE building, we were spread across two floors and spread out into classrooms.  Plus, our opening and closing ceremonies were held in the Liberal Arts (LA) building – a bit of a walk from the BE building. In the ML building, we're together for the whole weekend.  We've got a large open area (which can be sectioned off if needed) for everyone to work in:   Right next to that, we have a large area where we can set up tables and eat.  And it helps that we have a wonderful view while eating (yes, that's a lake out there with a fountain): The ML building also has showers (which we'll have access to!) and it's own auditorium for our opening and closing ceremonies. All in all, this year's GiveCamp will be great! Stay tuned to the Ann Arbor GiveCamp website.  We'll be looking for volunteers (devs, designers, PM's, etc…) soon! Technorati Tags: .NET,Day of .NET,GiveCamp,MongoDB,Prism

    Read the article

  • Are There Specific CSS Selectors Targeting IE10?

    - by kunambi
    Since IE is getting rid of conditional comments in version 10, I'm in dire need to find a "CSS hack" targeting IE10 specifically. NB! It has to be the selector that's getting "hacked" and not the CSS-properties. In Mozilla, you can use: @-moz-document url-prefix() { h1 { color: red; } } While in Webkit, you usually do: @media screen and (-webkit-min-device-pixel-ratio:0) { h1 { color: blue; } } How would I do something similar in IE10? TYIA.

    Read the article

  • jQuery Block UI: node is undefined

    - by stef
    I'm close to finishing an app that uses quite a bit of JS. Recently Firebug started throwing an error that says "node is undefined", referring to data.parent = node.parentNode; on line 209 of jQuery blockUI plugin Version 2.31 (06-JAN-2010) @requires jQuery v1.2.3 or later. I'm using jQuery 1.4.2 When I remove the code from my page that triggers the Block UI action, the error is still there. So it does not seem to be an issue in my code but an "error" in the file itself, or perhaps some kind of conflict with another file? For info my code is below. My IDE is highlighting some syntax errors in here but it does that even when there are none. Perhaps I'm missing it? $.blockUI({ css: { border: 'none', padding: '25px', backgroundColor: '#fff', '-webkit-border-radius': '10px', '-moz-border-radius': '10px', opacity: 1, color: '#000' , cursor: 'auto' }, message: $('#block_ui_msg'), }); EDIT: I just replaced the block UI file with the latest version 2.33 (29-MAR-2010), error still occurs but this time on line 210.

    Read the article

< Previous Page | 5 6 7 8 9 10 11 12 13 14 15  | Next Page >