Hi, I have used Ace editor a few times in my previous projects. Never did I face this problem before of having my cursor misplaced in my Ace editor. Let me guide you step by step Editor markup Here is a markup where I want my Ace editor to show up. [crayon-641dece4521fc616701375/] Then I have this CSS that applies to the editor element CSS [crayon-641dece452207599337231/] Above CSS allow my editor to take entire space within the document body or relatively positioned container. Then comes the Javascript to do its magic [crayon-641dece452209972411369/] Now the editor will show up and I am able to do my thing. However I now have a unique issue where when I start to type the cursor position is a bit far from the text, so basically I have a gap between the expected and actual cursor position in my Ace Editor as shown below It turned out that Ace editor must use monospace font and I was setting fonts on a not so recommended way as shown below [crayon-641dece45220b426745312/] Just to check things out and enforcing my editor to use monospace font fixed the issue instantly. This is what I changed my styles for my editor instance to which solved it. [crayon-641dece45220d055900573/] I also ended up cleaning the way I was applying my fonts to all my elements by getting rid of * construct. I hope this helps … [Read more...]
Ace editor cursor position has space between expected position and the current position
W3C CSS3 and W3C HTML5 Badge Logos in SVG
Hi Guys, Here are some couple of logos that may come handy when you need them. Bookmark this page if you like because sometimes things become rather hard to find. CSS3 SVG Logo HTML5 SVG logo Share around so that others can benefit too. You can easily save them as JPG or PNG using a graphic tool such as inkscape. If you don't know how to do it let me know and I would gladly help. By the way try imgcake.com as well if you are interested in taking website screenshot. Its a free tool from me and I hope that you will like it. Cheers … [Read more...]
CSS3 Using attr() function with content property
Hi Guys, While working on css3 pseudo classes I came across this beauty, that could be handy just in few cases. You can read more about attr() specs here http://www.w3.org/TR/css3-values/#attr Anyway lets talk a little bit more about this function. Key things you should remember are In CSS3 attr() can return different types in contrast to CSS2 implementation where it would only return string Purpose of attr is data related not presentation related It must be used with attribute names such as data-* There is better way to understand other than when its shown implemented. Consider this example The Markup We will work with a basic markup and will only define a DIV as shown below [crayon-641dece452ece853301525/] [crayon-641dece452ed4562990270/] Nothing complicated in our DIV above. The only thing you should note is that I defined few custom attributes such as data-name, data-href, data-phone The CSS Now lets check the CSS side of things [crayon-641dece452ed6601716010/] As you can see that we are using our attr() with content property and we are making use of our custom attributes and using them as fill values for blanks. Demo See above implementation in action by visiting the example page below http://jaspreetchahal.org/examples/html5/attr.html As you can see that CSS is becoming more powerful with every release with functions such as attr() being added/improved. I still sometimes wonder if that is actually an overhead when performance is something that you are looking for. I hope this helps … [Read more...]
CSS photoshop like selection effect on divs
Hi Guys, I am not sure why you would do it other than to get user attention on specific part of your HTML page. I found those little animated borders annoying anyway but they do work to get attention of your website visitor. This post talk about it. We will be looking at a selection animation using GIFs added as borders to your DIVs First of all much thanks to Mathew James for being such an inspiration and providing free GIF files needed for this effect. Anyway lets get back to the point and start doing some real work The Markup [crayon-641dece453391150496143/] [crayon-641dece453397104330593/] No rocket science understanding the above HTML. its simple and straight forward. The CSS [crayon-641dece453398613632854/] Result [raw] [/raw] Demo can also be reached from this URL Demo on separate page http://jaspreetchahal.org/examples/css-examples/anim-border/css-border-animated.html Download Background Image used is given below for you to download I hope this helps Cheers … [Read more...]
CSS3 form field highlight spotlight on focus HTML5
Hi Guys, Well there are times when you want to add some sort of interactivity to your webpage, one of those is when you introduce modal windows, where user fills up something and take any action "in form" of hitting a button or something. Long story cut short is that you just want to highlight an area which you think is most important to the user. We will do something cool with our form fields today, that will give you an idea what I am talking about. The Markup Below is the basic easy to understand markup that has nothing but form fields as shown below [crayon-641dece453615088848871/] Nothing unusual that you couldn't understand above Now lets check out the CSS part and that is the most important one to introduce our so called dialog mask for textfields/textareas etc The CSS The only CSS bit or style that is required is listed below [crayon-641dece453619913725853/] Result Demo Here is a quick demo to what I am talking about. http://jaspreetchahal.org/examples/html5/formfieldfocus.html Tested on All major Latest browsers I hope this little trick is anyhow useful to you :) Cheers, … [Read more...]
HTML5 Canvas Gradient Transparent Mask Over Image
Just thought I should share this tip with you, Now that I have been playing around with Canvas Object in HTML5 for a while I think more tips like these will flow as they used to in past. I've been working on a jQuery plugin that will offer something cool, stay tuned for that. This post technique is backbone to that plugin. Anyway lets get back to the point without wasting more time. Problem Canvas Gradient transparency that could be used as Mask Step 1 Lets get our Canvas read and draw an Image on it Markup [crayon-641dece4537b5414474368/] Draw Image [crayon-641dece4537ba934947890/] By now you would have something like this Let now add our transparent gradient to out canvas object. Here is the code for that [crayon-641dece4537bc870779969/] Above code should go under where it says CODE SNIPPET 2 in first snippet. Here is the result You can play around with the colours, I've created a Pen at code pen so that you can mess around and find a suitable setting. You can introduce transparency on both or all 4 sides of above image. You can give it a try. I hope this helps, Cheers, … [Read more...]
Pure CSS3 Animated Social Tiles using Fontello social fonts
Hi Guys, First of all I would like to tell you how good Fontello really is. Yeah its awesome. The best thing I like about it is that you download/use what you really want and custom CSS class names is just an icing on the cake. I will show you in a second how I used Fontello and CSS3 to create social icon tiles. Fontello can be browsed through this link http://fontello.com/ I downloaded the following Fonts/CSS gplus linkedin facebook twitter You should be able to search and find by putting in the above text in the search field. The End result to what we are going to produce is shown below (Please note that this is a screenshot, Live demo is provided a little bit below) The Markup Here is the markup that will be required to achieve above result [crayon-641dece453ca3588326992/] Please note that anchor class names, this is where Fontello will kick in. That's pretty basic stuff for HTML gurus like yourself but the CSS stuff is even simpler and can be further simplified. Lets check it out The CSS [geshi lang="css" nums="1" target="_blank" ] [crayon-641dece453ca9017149178/] Nothing much really as you can see we are just making use of CSS transitions to give us that hover effect that we want. Now its time for a Demo, I have hosted the demo at codepen.io as well as here on this site, so If you want to play with the code please do so at codepen Demo http://jaspreetchahal.org/examples/html5/fontello/fonthover.html Playground You can play around with code edits and have fun with my pen hosted on codepen Download Source I hope that this will help you out in some way. Please don't hesitate to correct/improve the above code if you think it can be further simplified. I don't spend much time doing that myself. Cheers. … [Read more...]
CSS3 change text selection color
Hi Guys, There are times when you would like to override default browser text selection color. What I mean can only be shown with example. Try selecting the paragraph above. You will see something like this (chrome) Now say you would like to change that selection color to grey or red or any other color of your choice then how to do it Lets check it out Global selection color change You can add these styles to your page or to your Stylesheet file for page/site wide selection color change [crayon-641dece453eb3551070180/] This will have a page wide effect. Demo A demo can be reached from the link below http://jaspreetchahal.org/examples/css-examples/css-selection.html The result will be similar to the one shown below (chrome) Now that was with changing text color globally lets do the same thing with individual paragraphs say you have a markup as shown below . [crayon-641dece453eb8771985273/] [crayon-641dece453eba379851254/] change selection color for individual elements on page Now to change selection color of above two containers I'll have these style in my spreadsheet or on my page [crayon-641dece453ebb849747079/] The result will be this (chrome) Demo is provided below http://jaspreetchahal.org/examples/css-examples/css-selection-individual.html Browser support All major browsers in the latest versions support this behavior I hope that this help. If you have any questions regarding this post or would like to mend anything please leave your comments cheers, … [Read more...]
Recent Comments