Skip to main content

Posts

Showing posts with the label Snippet

Styling Sort Icons Using Font Awesome for Primefaces' Data Table

So far, Primefaces has used image sprites for displaying the sort icons. This leads to a problem if we want to make a different style for these icons; for example, I would make the icon "arrow up" more blurry at the first time the table loading because I want to highlight the icon "arrow down". I found a way that I can replace these icons with Font Awesome icons.


We will use "CSS Pseudo-classes" to achieve it. The hardest thing here is that we should handle displaying icons in different cases. There is a case both "arrow up" and "arrow down" showing and other case is only one of these icons is shown.

.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s { background-image: none; margin-left: 5px; font-size: 1.1666em; position: relative; } .ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s:not(.ui-icon-triangle-1-s)::before { content: "\f106"; font-family: "FontAwesome"; position: absolut…

Adding a default text to the beginning of an text area

I have a text area where I can enter a SQL statement. The text "SELECT TOP 1" is used at the begining of the sql statement as a default prefix that can not be removed.


In order to archive this functionality, I found three options:

1. Use an inputMask and build a pattern for the entered text. We can use the prefix inside the text area:

http://jsfiddle.net/SEXAj/2130/

2. Create an javascript event listener on event "input" and calculate to prevent the prefix is removed

http://jsfiddle.net/sarbbottam/TUc94/

3. Use another html tag like "div"/"span" that contains the prefix and calculate the suitable position

+ Tag "span": http://jsfiddle.net/4YzZy/
+ Tag "div": http://jsfiddle.net/215b34fs/

I chose the 3rd approach with tag "div" because it's the most easiest solution and suitable for me at that monment.

References:
[1]. http://stackoverflow.com/questions/24846041/how-do-i-add-a-default-text-to-the-beginning-of-an-htm…

[Snippet] CSS - Child element overlap parent

I searched from somewhere and found that a lot of people says a basic concept for implementing this feature looks like below:
HTML code:
<div id="parent">  <div id="child">  </div> </div> And, CSS:
#parent{   position: relative;   overflow:hidden; } #child{   position: absolute;   top: -1;   right: -1px; }
However, I had a lot of grand-parents in my case and the above code didn't work. Therefore, I needed an alternative. I presumed that my app uses Boostrap and AngularJs, maybe some CSS from them affects mine. I didn't know exactly the problem, but I believed when all CSS is loaded into my browser, I could completely handle it.

www.tom-collinson.com

I tried to create an example to investigated this problem by Fiddle. Accidentally, I just changed: position: parent; to position: static; for one of parents -> the problem is solved.
Look at my code:

<div class="modal-body dn-placeholder-parent-position"> <div clas…

[Snippet] Generate a new unique "name" string from an existing list

Suppose that we have a list of employees. Everytime, we want to add new employee into this list, the name of the employee will be generated with the following rules:
- the name of the new one is set to "[originalname] 1" - in case the name already exist, "[originalname] 2" is used, and so on.
Here is my code snippet by Javascript:
var employees =[ {id: 1, name: 'name'}, {id: 2, name: 'name 1'}, {id: 3, name: 'name 2'}, {id: 5, name: 'name 4'} ]; var commonUtils = { isExistName: function(_name, _collection, _prop) { for(var i = 0; i< _collection.length; i++){ if(_collection[i][_prop].localeCompare(_name)==0){ return true; } } return false; }, generateNewName: function(_name, _collection, _prop){ var i = 1; var searching = true; while (searching) { var newName = _name+ " " + i; if (!this.isExistName(newName, _collection, _prop)) { …

JQuery - Fixed Element during Scroll

I want to keep the position of an element likes a component on right side when I scroll down because of a very long content. Please take look at the code by visit the following link:

http://jsfiddle.net/p3unbmdy/

Javascript function:
$("#container").bind('scroll', function() { var fromTop = 50; var scrollVal = $("#container").scrollTop(); var top = 0; if ( scrollVal > fromTop) { top = scrollVal - fromTop; $('#rightElement').css({'position':'absolute','right':'1em','top' :top+'px'}); } else { $('#rightElement').css({'position':'static','top':'0px'}); } });