Wednesday, September 23, 2015

Steps on How to make Facebook Page Plugin Responsive

Posted on 10:54 AM
Quick Overview

The Facebook Page Plugin is by default not responsive even if you click the option "Adapt to plugin container width". The purpose of "Adapt to plugin container width" is to fit the plugin perfectly in any container such as sidebar, footer and so on; however, in mobile devices everything becomes smaller and Facebook page plugin has a minimum of 180 pixels width. The plugin will overlap if you view your website on mobile devices with a screen less than 180 pixels width such as iphone 4s and so on which has 58.6 mm (2.31 in) screen width dimension.

Result:

Steps on How to make Facebook Page Plugin Responsive

You can see on the overlap area on the right side. Now to fix this issue all you need to do is follow the simple steps below:

1. Integrate your Facebook Page plugin anywhere on your website. Make sure to check "Adapt to plugin container width" before installing your Facebook page plugin.

Steps on How to make Facebook Page Plugin Responsive
Click the image to view original size


2. Copy the code below.

<link href="http://webtester.acoxi.com/widgets/fblikebox.css" rel="stylesheet">

3. Paste the code just below the <head> tag of the page where you installed the Facebook Page Plugin.

4.  Save the changes and done.

Result after adding it:

Steps on How to make Facebook Page Plugin Responsive

No matter how small the screen you have, the plugin will automatically adjust.

For Blogger users please see screenshot below:

Steps on How to make Facebook Page Plugin Responsive
Click the image to view full size

Hope this helps.

Friday, July 24, 2015

Simple Responsive Menu using CSS

Posted on 12:08 AM
Below is a simple demo on how to create a basic responsive menu, the menu expands if you view the page on mobile devices. See screenshot below.

Desktop View:

Simple Responsive Menu using CSS


Mobile View:

Simple Responsive Menu using CSS

You can download the file by clicking the button below to test.

Click here to download

Sunday, July 5, 2015

Prevent back button after logging out

Posted on 4:28 AM
Adding the script below at the top of each PHP page will prevent user from using the back button after logging out.

<?php
session_start();

// Check if session is active or not
if(!isset($_SESSION['session_variable_here'])) { 
$_SESSION['session_variable_here']=NULL;

//Display message below if there is no more active session
echo "Sorry you are no longer active. Please <a href='index.php'>login</a> again.";
die();
}

else

//Your action here if session is active

}
?>

Friday, July 3, 2015

Adding icon before the text using the Pseudo element ::before

Posted on 12:54 AM
HTML

<div class="text_element">HOME</div>

CSS

<style>
.text_element::before {
    display: inline-block;
    width: 16px;
    height: 14px;
    margin-right: 5px;
    content: "";
    background: url("you_icon.png") no-repeat 0 0;
    background-size: 100%;
}
</style>

Box shadow at the bottom of the element or div tag only

Posted on 12:51 AM
HTML

<div class="box"></div>

CSS

<style>
.box {
height: 200px;
width: 200px;
box-shadow: 0 4px 4px -2px #232323;
-moz-box-shadow: 0 4px 4px -2px #232323
-webkit-box-shadow: 0 4px 4px -2px #232323;
}
</style>

Box shadow at the top of the element or div tag only

Posted on 12:46 AM
HTML

<div class="box"></div>

CSS

<style>
.box {
height: 200px;
width: 200px;
box-shadow: 0 -5px 5px -4px #000000;
-moz-box-shadow: 0 -5px 5px -4px #000000;
-webkit-box-shadow: 0 -5px 5px -4px #000000;
}
</style>

Triggering 5 elements or more at the same time in one hover

Posted on 12:40 AM
HTML

<div class="triggered_element"></div>
<div class="affected_element1"></div>
<div class="affected_element2"></div>
<div class="affected_element3"></div>
<div class="affected_element4"></div>
<div class="affected_element5"></div>

CSS

<style>
.triggered_element:hover, .triggered_element:hover + .affected_element1 + .affected_element2 + .affected_element3 + .affected_element4 + .affected_element5
{
/**YOUR ACTION HERE**/
}
</style>

Triggering two elements at the same time in one hover in CSS

Posted on 12:31 AM
HTML

<div class="triggered_element"></div>
<div class="affected_element"></div>

CSS

<style>
.triggered_element:hover,  .triggered_element:hover  +  .affected_elemen
{
/**then your action here**/
}
</style>

Sunday, June 28, 2015

Div Tag horizontal and vertical alignment in uniform size

Posted on 5:19 AM
A demo on how to display Div Tag elements in horizontal and vertical alignment in line using CSS. The demo is a good reference for beginners in creating a vertical or horizontal menu. The code can be downloaded at the bottom of this page.

Screenshot:

Div Tag horizontal and vertical alignment in uniform size

Div Tag horizontal and vertical alignment in uniform size

Download:

Click here to download

Saturday, June 27, 2015

CSS Roll-over effect using transition

Posted on 6:53 AM
I created a pure CSS code that demonstrates on how to create a roll-over effect using transition. The code also shows on how to activate two div tag elements at the same time in one mouse hover.

In the sample below I created something like a gallery blog, if you hover your mouse over to the image, the information of that image will show up in transition from bottom up to the middle. See images below:

CSS Roll-over effect using transition
Without mouse hover
CSS Roll-over effect using transition
When you hover your mouse

The demo and code on how to do this can be downloaded below.

Download


Click here to download

Subscribe to: Posts (Atom)