Sticky menu depending on the specified height

In this tutorial i will show you how to create a menu that will stick if a certain height is triggered using jquery.
We will also assume that we have a 1st layer that is dynamically changing its height.
HTML example

<div id='div1'> Scroll Down </div>
<div id='menuLayer'>Home , About us , Contact Us</div>
<div id='content'>
The quick brown pusa
</div>

CSS example

#div1{
    width:100%;
    height:800px;
    background:#333;  
    text-align:center;
    Color:#fff;
}

#menuLayer{
    width:100%;
    height:50px;
    background:#4679BD;    
    top:0px;
    text-align:center;
    line-height:50px;
}

#content{
    width:100%;
    min-height:2000px;
    background:#D8E5CE;    
}

First we will compute the 1st div

//get the height of div1 
firstLayer = $('#div1').height();

After that we will determine if a user is scrolling

$(window).on('scroll', function() {
    //get the current location of the page
    var y_scroll_pos = window.pageYOffset;
});

Then we will determine if it reaches the end of our first div, we will change the css of the menu making it relative to fixed

    //change to fixed if it reaches the bottom of #menuLayer
    if(y_scroll_pos > firstLayer) {
        $('#menuLayer').css( "position", "fixed" );         
    }
     //change to relative if it reaches the top most of #menuLayer
    if(y_scroll_pos < firstLayer) {
        $('#menuLayer').css( "position", "relative" );
    
    }

Check the demo to see all codes sum up.

LIVE DEMO

Youtube auto convert to embed code and thumbnail

I created an script that will auto generate all the links and the different types of thumbnail that is generated by youtube.
just simply copy and paste the youtube link in the input field.

Change selected input of a radio button using jquery

Change selected input of a radio button using jquery

Html

<form action="">
    <input type="radio" name="option" value="option1">1<br>
    <input type="radio" name="option" value="option2">2<br>
    <input type="radio" name="option" value="option3">3<br>
    <input type="radio" name="option" value="option4">4
</form>

Jquery code

$("input[value='option3']").prop("checked", true);

Note that you can also add events to change the selected option like OnClick.

Live Demo

Auto generate youtube thumbnail on wordpress article when sharing on facebook

This tutorial will show you how to make your wordpress article looks like the image that is shown when shared on facebook without doing any screen capture.





On wordpress 4.0, Youtube embedding has been made easy. You can simply paste the link of  a youtube video and it will show immediately, however the wordpress social sharing preview on facebook is not yet optimize.

I will show you how to generate youtube thumbnail on facebook without doing any screen capture.

Facebook uses og meta tags to display the title, image and description on its timeline. In order for our wordpress article to show the correct  info on facebook timeline we need to generate og meta tags on our article.

Install Wordpress Plugin

In this tutrorial We will use Wordpress Social Graph Plugin to generate our og meta tags.

after installation and activation of the plugin, we can now see the new meta box in our post create.

Insert Thumbnail from youtube

We will use youtube automated thumbnail and pass it on facebook. By default there are 4 images that youtube generates.

http://img.youtube.com/vi/[youtube id]/0.jpg
http://img.youtube.com/vi/[youtube id]/1.jpg
http://img.youtube.com/vi/[youtube id]/2.jpg
http://img.youtube.com/vi/[youtube id]/3.jpg

we will use thelargest image of the 4 http://img.youtube.com/vi/[youtube id]/0.jpg

To verify if our meta image works. visit the article and view its page source.

We can still add several meta tags but for now i will only show the meta image to cut it short.

Use facebook lint to check the output

Facebook Lint is a tool to help us test our content sharing output. It also gives us recommendation on fixing and improving our content.

And The Result :

Change selected input of radio button using jquery

Change selected input of radio button using jquery.

$("input[value='option3']").prop("checked", true);

Live Sample

Check if data exist in Yii

We can use findByAttributes to verify or check if a certain data exist in our database.

$id = 12;//We are going to check if id = 12 exist
$checkData = User::model()->findByAttributes(array('id'=> $id));
if (isset($checkData)) {
 echo 'record  exist';
} else {   
 echo 'record does not exist';
} 

note that you must change

User::model()->findByAttributes(array('id'=> $id));
 

to your proper target model, for example you are going to find data in Post, the code must look like this

 Post::model()->findByAttribute(array('author_id'=> $id));

note: you must also change the id to the proper attribute that you are looking for in the database , for example the codes above shows that we are finding the author_id that has an id of 12.

Redirect if user is not loggin in Yii

This code shows how to redirect a user that is not loggin.

if(Yii::app()->user->isGuest){
 $this->redirect(array('/post/index')); 
}

change /post/index to your proper model path where you want the user to be redirected if not loggin

 $this->redirect(array('/post/index')); 

Yii::app()->user->isGuest is a built in function of yii to determine if a user is not loggin.
we can put this code in our view but i prefer to put it inside action controller so that it is more easy to maintain and separate the logic between view and controller. ex

public function actionView($id)
{ 
 if(Yii::app()->user->isGuest){
  $this->redirect(array('/post/index')); 
 }
 
 $this->layout = 'column1';
 $this->render('view',array(
  'model'=>$this->loadModel($id),
 ));
}