Simple Menu Active with Jquery

Standard

When you create a one page website, the section goes scroll around the page.
but you need to make a menu active for every section you click.

Let’s say we have 4 section. Home, Features, Colors and Price.
Home section is already on active mode when we load the page.

Screen Shot 2014-01-09 at 7.14.27 PM

HTML

<div class="menu-top">
      <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#features">features</a></li>
        <li><a href="#colors">colors</a></li>
        <li><a href="#price">price</a></li>
      </ul>
    </div>

CSS


.menu-top ul, .menu-top li
{
	list-style: none;
	display: inline;
	margin: 0;
	padding: 0;
}

.menu-top li a
{
	color: #666666;
	float: left;
	text-decoration: none;
	text-transform: capitalize;
	font-family:"Montserrat", "Helvetica Neue",  Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size:14px; 
	margin-right: 1px;
	padding: 7px 10px;
	text-align: center;
	letter-spacing: -1px;
	

}

.menu-top li a:hover,
.menu-top li a.active
{
	
	color: #FFFFFF;
	background: #029ecf;
	text-decoration: none;
	-webkit-border-radius: 3px;
  	-moz-border-radius: 3px; 
  	border-radius: 3px; 
  	text-shadow:0 1px 0 #111;
	
}

Features is active when it clicked
Screen Shot 2014-01-09 at 7.19.16 PM

Jquery

<script type="text/javascript">
$(document).ready(function(){

 //active link clicked
  $(".menu-top ul li a").click(function() {
      $(".menu-top ul li a").removeClass("active");
      $(this).addClass("active");
  });
});
</script>

You should load the Jquery Library first.
With this code above, the menu you clicked will get class=”active” meanwhile the others menu will remove the class=”active”

Disable Fancybox Box Close with button, overlay click and escape key

Standard

Disable Closing in Fancybox to prevent user close the modal box,
these code below will prevent user for :
1. Prevent from user click the close button
2. Prevent from user click overlay or outside the fancybox.
3. Prevent from user press ESC key in keyboard.

<script type="text/javascript">
$(document).ready(function() {
			
   $('.fancybox').fancybox({

	closeBtn    : false, // hide close button
	closeClick  : false, // prevents closing when clicking INSIDE fancybox
	helpers     : { 
		// prevents closing when clicking OUTSIDE fancybox
		overlay : {closeClick: false} 
	},
	keys : {
		// prevents closing when press ESC button
		close  : null
	}
   });

});
</script>

Pyro CMS Folder Permission

Standard

Make sure the following folders are writable

These folders need to be writable (chmod 777) or “Writable by Everyone”, and may have had their permissions reset when you uploaded them to your server. Make sure they are still writable, along with all of their contents.

  1. assets/cache
  2. system/cms/logs
  3. system/cms/cache
  4. system/cms/config
  5. uploads

Magic Doctype for IE7 +

Standard 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

it will fixed problem in IE7 like:
– Margin auto not working
– different padding
– positition fixed
– and many more.

Rounded corners do not work in Firefox 13.0

Standard

If you update your firefox to firefox 13, you will find out your css code below doesn’t make rounded anymore

.box
{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

#testID
{
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
}

Firefox remove that in version 13 for some reason.
The proper usage of particular border radiuses CSS definition according to the W3C specification are as follows:

    border-radius
    border-top-left-radius
    border-bottom-left-radius
    border-top-right-radius
    border-bottom-right-radius

I suggest you, don’t remove your previous code. Just add with a new line, like example below.
Just in case for firefox user version 13 below.

.box
{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;

    border-radius: 3px;
}

#testID
{
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
   
    border-radius: 10px 0px 0px 10px;
    /* border-radius: topLeft topRight bottomRight bottomLeft; */
}

.httaccess bermasalah di MWN Hosting

Standard

anda menggunakan Code Igniter? memakai .httacces untuk clean URL?

apakah .httaccess anda seperti ini.

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule .* index.php/$0 [PT,L]

Di Localhost lancar2 saja, tapi ketika di hosting error?

coba ubah jadi seperti ini, tiba-tiba secara ajaib jadi normal kembali.

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php?$1 [L]

Jangan tanya kenapa?
Tanya langsung aja ke orang MWN nya. 😛

Submit Form With Link

Standard

Do you don’t want to use submit button in your form?
Do you want to use link to submit your form?
This is a way to do it.

<form name="namaForm" method="POST" action="process.php">
<input type="text" name="nama" value="">
...
</form>

<a href="javascript:void(0);" onclick="document.namaForm.submit();return false;">