ajax, JavaScript, jquery

live updating select option with chosen


If you guys have ever used chosen plugin. you might have end up trying dynamically changing selection option with javascript.
Here is code below, that you can update option dynamically with javascript for chosen plugin.

 

<select name="names" id="names" >
    <option value="1"> Niraj </option>
    <option value="2" >Buddha</option>
    <option value="3">Dino</option>
    <option value="4">AL</option>
</select>

$("#name").chosen();

// updating again with javascript
document.getElementById('names').value = 4;
$('#names').trigger('liszt:updated');
CSS 3, Design Inspiration, JavaScript, jquery

Basic jquery plugin developement / css3 round image


Note:

-----------------------------------------

1. Just a quick plugin development, to fix my work. You may extend it use it distribute it and what ever....................

Objective of the post

--------------------------------------

1. Basic Plugin development

2. implementing css3 round image style

-------------------------------------------------

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

// plugin start from here

// this hooks a new function to jquery [ $.fn.circle_me = function ]

/*

plugin name : circle_me

author : Jumper

email : neerooze@gmail.com

*/
$.fn.circle_me = function(options) {
console.log('Init circle me');

// default styles

var _style = {
             border: '1px solid #DDD',
             borderRadius: '50%',
             display: 'inline-block',
             height:"200px",
             width:"200px"
};
// over ridding the default style with users style
_style = $.extend( _style, options);

/*
Here   "  return "  is so important if you want to add changeable function.

eg:         $(".circle_now").circle_me().hide();

if you do not add return, here hide function will not work but still plugin will work  fine. If you do not want to add chain function you may ignore return function.

*/
return $(this).each(function(){
              $(this).css(_style);
              var _bg = $(this).attr('src');
              $(this).css({"backgroundImage":_bg});
        });

}

// plugin ends here
$(document).ready(function(){

     // initializing plugin basic

     $('.circle').circle_me();

    // initializing plugin with custom options

     $('.circle').circle_me( {  height: "300px", width: "400px", borderRadius:" 70%"});
});
</script>

// html part

<img class="circle"  src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-ash3/67563_10151525052674927_2120163905_n.jpg" />

DEMO
Cheers..
JavaScript

Small lib to save in localStorage


var storage= {
  setItem: function(key, val) {
   if (!val) { val  = null; return;}
 if (typeof val == "object") {
 val = JSON.stringify(val); // type casting object into string
 }
 localStorage.setItem(key, val);
 },
 getItem: function(key) {
 var val = localStorage.getItem(key);

 if (!val) {return;}

 // parsing stringified object back to object
 len = val.length;
 if (val[0] == "{" && val[len-1] == "}") {
 val = JSON.parse(val);
 }

 return val;
 }
}

// TESTING IN CONSOLE.

storage.setItem("ID",{name:"Jumper"});
var id = storage.getItem("ID");
console.log("name : "+id.name);


drupal

Overriding Page Templates per Content Type in Drupal 7

As we know drupal have few  template files: html.tpl.php, page.tpl.php and node.tpl.php. There are few more which controlling the display of more specific elements . For overrriding other templates you may search more now let me show you how to override the page tempates per content type.

We can implement it by adding additional tempalte suggestions to the “theme_hook_suggestions” array in template.php

  1. Open the template.php file in your theme for editing.
  2. Look for a function called yourthemename_preprocess_page (replace the yourthemename with your theme’s name).
  3. If this function already exists, you will need to add the if statement to the end of the function just before the closing bracket. Otherwise you’ll need to create a new function to look like this:

function yourthemename_preprocess_page(&$vars) {
  if (isset($vars['node']->type)) {
    $vars['theme_hook_suggestions'][] = 'page__' . $vars['node']->type;
  }
}

Now you can create a template file called page–content-type.tpl.php and all nodes with that type will use the new template file.

Filename Notes:

  • Use two dashes after the word ‘page’ in the filename.
  • If your content type is two or more words, replace the underscore ( _ ) with a short dash ( – ) in the content type machine name.
drupal, ubuntu

installing drupal 7 in ubuntu 12.10


while installing drupal in my machine i faced some unexpected permission problem something like below:

OK
Web server Apache/2.4.3 (Unix) OpenSSL/1.0.1c PHP/5.4.7
OK
PHP 5.4.7
OK
PHP register globals Disabled
OK
PHP extensions Enabled
OK
Database support Enabled
OK
PHP memory limit 128M
Error
File system
The directory sites/default/files is not writable. An automated attempt to create this directory failed, possibly due to a permissions problem. To proceed with the installation, either create the directory and modify its permissions manually or ensure that the installer has the permissions to create it automatically. For more information, see INSTALL.txt or the online handbook.
OK
Unicode library PHP Mbstring Extension
OK
Settings file The ./sites/default/settings.php file exists.
Error
Settings file The settings file is not writable.
The Drupal installer requires write permissions to ./sites/default/settings.php during the installation process. If you are unsure how to grant file permissions, consult the online handbook.

Check the error messages and proceed with the installation.

so don’t worry, its just simple permission issue all we need to do is give sufficient permission to drupal
  1. create a folder named “files” in /opt/lampp/htdocs/drupal/sites/default/
  2. enter this command in the terminal sudo chmod 777 -R /opt/lampp/htdocs/drupal/sites/default/files
  3. rename the default.settings.php to settings.php inside /opt/lampp/htdocs/drupal/sites/default/default.settings.php
  4. sudo chmod 777 -R /opt/lampp/htdocs/drupal/sites/default/settings.php

you are now all ready to go now.

Cheers

</ niroze >

refernces: