Perl -Grep and Hash

Posted on by admin

Grep with Array

Grep returns a list, bracket will return the actual value. The first argument needs to evaluate as true or false to return the match.

if (my ($matched) = grep $_ eq $match, @array) {
    print "found it: $matched\n";
}

Convert Array into hash

Converting array to hash with array elements as the hash keys amd values are simply 1.

my %hash = map {$_ => 1} @array;

# check if the hash contains $match
if (defined $hash{$match}) {
    print "found it\n";
}

 

Right way to use grep

This is smart match will match the exact word.

if (grep /$match/, @array) {
    print "found it\n";
}

vs

This will return the number of elements in match which is not correct to use with if to match a specific match.

if (grep($match, @array)) 
{ print "found it\n"; }

Multiple Arrays

Using multiple array to match.

if (grep /$match/, @array, @array1, @array2, @array3)
{
    print "found it\n";
}

 

Css Tips #3 :Stop floating divs from wrapping

Posted on by admin

If you want to display divs in a row horizontally, sometimes we use float:left. This has problems with wrapping to container div. This can work if the parent container has width or min-width defined. But the width of the parent needs to be equal to the total of its children including the margins/paddings/borders. And also overflow:auto. The reason to use overflow:auto is that to match the height of its child.

Such as:

.row {
  float: left;
  border: 1px solid yellow;
  width: 100%;
  overflow: auto;
}
.cell {
  float: left;
  border: 1px solid red;
  width: 200px;
  height: 100px;
}

//solution
.row{
  width:600px;
  overflow:auto
}



A

Alternative way to do this is to use the display:inline-block . Where row element has white-space:nowrap.

.row {
    float:left;
    border: 1px solid yellow;
    width: 100%;
    overflow: auto;
    white-space: nowrap;
}

.cell {
    display: inline-block;
    border: 1px solid red;
    width: 200px;
    height: 100px;
}
</style>

=“row”>

class=“cell”>a

class=“cell”>b
class=“cell”>c

 

 

inline-block

inline-block makes the element inline but preserves the settings such as width, height, top and bottom margins, paddings.

This article tells more about inline-block.

Repaint vs Reflow

Posted on by admin

Repaint vs Reflow

Repaint is just affect the DOM itself, but reflow affect the whole page. Repaint occur when some changes which only its skin styles, such as color and vibility. Reflow occur when the page of DOM changes its layout.

This link provides list of css triggers attribute will trigger repaint or reflow.

jQuery – adding CSS with jquery

Posted on by admin
  1. css(height)
  2. height()
  3. cssText

 

jQuery adding height

$('.ui-widget-overlay').css("height", "985px !important");
$j("#wowslider_2542").height(new_height+'px');

height() – can be use to set or get the height of the selected element. If you need height for calculation reason than height() is best option to use because it returns in pixels. Height  in css returns value in units. Sometimes the css(height) returns something else than the value return with height().

Reference:

Using jQuery you can use the following methods:
  • .height (element height, without padding , margins or borders)
  • .innerHeight (element height + padding)
  • .outerHeight (element height + padding and borders)
  • .outerHeight(true) (element height + padding + borders + margin)
  • .width (element width, without padding , margins or borders)
  • .innerWidth (element width + padding)
  • .outerWidth (element width + padding and borders)
  • .outerWidth(true) (element width + padding + borders + margin)

Link to fiddle

Using cssText

cssText will append css styles as string and not as a variable. The issue I came across where css(height) with important tag was not working than I tried to use cssText and it worked fine. cssText helps to improve browser reflows. But need to use cssText carefully as it sets or clears everything in the css for that particular element. Note: cssText doesnt need important as it is going to modify the inline css. Inline css is more powerful that css in stylesheet.

$j(".scrolling_img_cont img").css('cssText','height:'+new_height');

var csstxt = "top:100;left:100;border:1px solid #000;color:#f00";
$('#selector').css('cssText', csstxt);


inputObj.css('cssText', inputObj.attr('style')+'padding-left: ' + (width + 5) + 'px !IMPORTANT;');

Using Attribute

$(this).attr('style', 'height:1167px !important');