Foundation orbit slider inside reveal modal has no height

Orbit slider inside foundation reveal modal sets height 0 some reason. Here is the simple way to fix that issue:

$(document).on('opened.fndtn.reveal', '[data-reveal]', function(){
  $(window).trigger('resize');
});

Foundation data orbit open specific slide on load

Here is the simple way to open the the particular slide on page load:

$.fx.off = true;
$("[data-orbit-slide='"+index+"']").trigger("click");
$.fx.off = false;

Above code will first disable the jquery effects & then triggers the particular slide and then enables the jquery effect. This way we can open any slide without animation.

Note: Here index is slide number(index always starts with 0).

How to add different styles to last row of css grid layouts

Here is the simple way to add different styles for last row elements of css grid layout.

li:nth-child(Xn):nth-last-child(-n+Y) ~ li {
}

X is the no.of columns in the grid and Y is the (no.of columns+1)

For example, we have 3 column grid layout with border bottom for each grid item, and we don't want to border bottom for last row items.

li:nth-child(3n):nth-last-child(-n+4) ~ li {
    border-bottom: 0px;
}

Ex: 4 column grid layout

li:nth-child(4n):nth-last-child(-n+5) ~ li {
    border-bottom: 0px;
}

Ex: 5 column grid layout

li:nth-child(5n):nth-last-child(-n+6) ~ li {
    border-bottom: 0px;
}

Note: Above code will only work, if you have two or more than two rows.

get url parameters and values using jquery

Here is the simple method to get url parameters & values using jquery.

function getUrlParams() {
    var url = document.location.href;
    var params = {},hash;
    var params_arr = url.slice(url.indexOf('?') + 1).split('&');
    for(var i=0; i  < params_arr.length; i++){
      hash = params_arr[i].split("=");
      params[hash[0]] = hash[1];
    }
    return params;
  }

Above method gets the current page URL and split into parameters and their values object. For example:

http://faqspoint.blogspot.in?src=google&module=bottom

Result:

{ src : "google", module : "bottom" }

To get the values of parameters:

var source = getUrlParams()["src"];    //It will return "google"
var module = getUrlParams()["module"];    //It will return "bottom"

How to remove index.php from codeigniter url?

Codeigniter defaultly add index.php in the url because that file is responsible for processing all requests to the system. But, we can easily remove index.php by using URL Rewriting.

Here are the simple steps:

1. Update general configuration:

Open config.php from system/application/config directory and replace

$config["index_page"] = "index.php";

with

$config["index_page"] = "";

2.Create an .htaccess file

Create a new file named .htaccess in the root directory and write below code in that file:

RewriteEngine on
RewriteCond $1 !^(index\.php|css|images|js|robots\.txt)
RewriteRule ^(.*)$ /index.php?/$1 [L]

Horizontal line with text in the middle using CSS

Here is the simple example to create horizontal line with text in the middle. The line is created by setting a border-bottom on the containing h2 then giving the h2 a smaller line-height. The text is then put in a nested span with a non-transparent background.

HTML:

<h2><span>This is main header</span></h2>

CSS:

h2 {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #000; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
} 

h2 span { 
    background:#ffffff; 
    padding:0 10px; 
}

OUTPUT:

This is main header

PX to EM to PT Conversion

Here is the list of px to em conversions. These conversions are based on 16px browser default size.

PX	EM	Percent	Points
5px	0.3125em	31.25%	4pt
6px	0.375em	37.5%	5pt
7px	0.438em	43.8%	5pt
8px	0.500em	50.0%	6pt
9px	0.563em	56.3%	7pt
10px	0.625em	62.5%	8pt
11px	0.688em	68.8%	8pt
12px	0.750em	75.0%	9pt
13px	0.813em	81.3%	10pt
14px	0.875em	87.5%	11pt
15px	0.938em	93.8%	11pt
16px	1.000em	100.0%	12pt
17px	1.063em	106.3%	13pt
18px	1.125em	112.5%	14pt
19px	1.188em	118.8%	14pt
20px	1.250em	125.0%	15pt
21px	1.313em	131.3%	16pt
22px	1.375em	137.5%	17pt
23px	1.438em	143.8%	17pt
24px	1.500em	150.0%	18pt