If the border colors needed to be different, or if the requirement is like - I need left, right, and top borders but not the bottom border. To this, I used the property as:
I just googled for jQuery Modal dialog window and to my surprise, I saw some links that redirected me to some jQuery plugins which is not necessary for such a small task. I didn't see a pain and easy to understand solution to it. So I decided to put it up in this post.
Here's a simple jQuery Modal Dialog Popup Window that even works in IE7: Demo
AngularJS is becoming more popular in web application development day by day. And it is not as simple as jQuery. Its main focus is not DOM manipulation, but it's more in Data manipulation, and is more logical. It teaches all jQuery developers a more sophisticated way of coding where the developers understand the next level of OOP.
I miss jQuery a lot. Especially, the handy methods like show() hide(). If we want to get the same effect with AngularJS, we have to put some logic in controllers and implement it with ng-click, ng-class, ng-show, ng-hide. In this post I will write some simple and easy to understand examples for this most needed ng-hide and ng-show methods .
It's a general expectation that the web application you are working on must be supported in all major browsers. Since the implementation of CSS properties in different browsers varies, they force front-end developers to write specific properties separately for them. There are some CSS properties that don't give similar result in all browsers. The most popular one is vertical-align; it behaves differently in chrome/firefox and in IE. The situation becomes even tougher when the client asks support for different versions of the same browser.
Here are some tricks that help developers serve separate CSS files/classes for different browsers and browser versions depending on the requirements.
Separate CSS for Mozilla Firefox - CSS only solution:
@-moz-document url-prefix(){
div{ color: red; }
}
Separate CSS for IE version - with conditional comments:
The traditional code:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
These conditional classes get appeneded in the <html> tag depending on the version you are using. For example, if you are using IE9, the '.ie9' class will get appeneded in the <html> tag which gives you an option to write CSS only for IE9 with '.ie9' class as a parent class - .ie8 .className{ color: green; } /* This css will be applied to IE8 only*/ .ie9 .className{ color: red; } /* This css will be applied to IE9 only*/
Separate CSS for IE version - with jQuery:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Separate CSS for Windows OS Versions using javascript:
If you are supporting all versions of windows OS, these tricks can help you write separate CSS files for Windows OS versions.
For Windows 8:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
There are several ways of adding a class to an element in angularJS which varies in different situations. I want to put the solutions without much of explanation in angularJS terminology, because sometimes it scares to the HTML developers, so I won't get into that. I will just post some plane code which will be useful to most of the developers and designers.