ubuntu commands

ubuntu commands

http://bondseo.com/traffic/

cd / - for going inside folder

cd var/

is – to show files

sudo chmod 777 -R /var/www/webdav - to give permission

link for marquees link java script tool box

http://www.fillster.com/htmlcodes/marquees.html


http://www.javascripttoolbox.com/lib/popup/example.php

chmod 777 <directory>

This will give you execute/read/write privileges. You can play with the numbers to finely tune your desired permissions.

http://minimable.fedeweb.net/docs/


http://demo.enginethemes.com/oneengine/   - free parallox theme

http://www.maia-damianovic.com/ORIGINAL/Selected_projects.html

get reverse of a string

   $s = "appsmaven";
   echo $s

   echo "<br/>";
   for($i=7;$i>=1;$i--){
     
  //echo $i;
 // echo "<br/>";
  echo $s[$i];
 
   }

chld theme making whole process discussed here

http://www.presscoders.com/wordpress-theme-customization-guide/#chapterfive

http://www.presscoders.com/wordpress-theme-customization-guide/#chapterseven

Css layouts discussed nice link to learn - - http://learnlayout.com/margin-auto.html

http://buildnewgames.com/
http://jqfundamentals.com/
http://learnlayout.com/

no layout

Having no layout whatsover is almost ok if all you want is one big column of content. However, if a user makes the browser window really wide, it gets kind of annoying to read: after each line your eyes have a long distance to travel right-to-left to the next line. Try resizing your browser to see what I mean!

Before we fix this problem, let's make sure we're clear on the very important display property.

the "display" property

display is CSS's most important property for controlling layout. Every element has a default display value depending on what type of element it is. The default for most elements is usually block or inline. A block element is often called a block-level element. An inline element is always just called an inline element.

block

<div>

div is the standard block-level element. A block-level element starts on a new line and stretches out to the left and right as far as it can. Other common block-level elements are p and form, and new in HTML5 are header, footer, section, and more.

</div>

inline

span is the standard inline element. An inline element can wrap some text inside a paragraph <span> like this </span> without disrupting the flow of that paragraph. Thea element is the most common inline element, since you use them for links.

none

Another common display value is none. Some specialized elements such as scriptuse this as their default. It is commonly used with JavaScript to hide and show elements without really deleting and recreating them.

This is different from visibility. Setting display to none will render the page as though the element does not exist. visibility: hidden; will hide the element, but the element will still take up the space it would if it was fully visible.

other display values

There are plenty of more exotic display values, such as list-item and table. Here is an exhaustive list. We'll discuss inline-block and flex later on.

extra credit

As I mentioned, every element has a default display type. However, you can alwaysoverride this! Though it wouldn't make sense to make an inline div, you can use this to customize the display of elements that have particular semantics. A common example is making inline li elements for horizontal menus.

Finding nth highest salary example and explanation

Let’s step through an actual example to see how the query above will actually execute step by step. Suppose we are looking for the 2nd highest Salary value in our table above, so our N is 2. This means that the query will look like this

SELECT *
FROM Employee Emp1
WHERE (1) = (
SELECT COUNT(DISTINCT(Emp2.Salary))
FROM Employee Emp2
WHERE Emp2.Salary > Emp1.Salary)

You can probably see that Emp1 and Emp2 are just aliases for the same Employee table – it’s like we just created 2 separate clones of the Employee table and gave them different names.

Understanding and visualizing how the query above works

Let’s assume that we are using this data:
Employee

Employee ID
Salary
3
200
4
800
7
450




For the sake of our explanation, let’s assume that N is 2 – so the query is trying to find the 2nd highest salary in the Employee table. The first thing that the query above does is process the very first row of the Employee table, which has an alias of Emp1.

The salary in the first row of the Employee table is 200. Because the subquery is correlated to the outer query through the alias Emp1, it means that when the first row is processed, the query will essentially look like this – note that all we did is replace Emp1.Salary with the value of 200:
SELECT *
FROM Employee Emp1
WHERE (1) = (
SELECT COUNT(DISTINCT(Emp2.Salary))
FROM Employee Emp2
WHERE Emp2.Salary > 200)


So, what exactly is happening when that first row is processed? Well, if you pay special attention to the subquery you will notice that it’s basically searching for the count of salary entries in the Employee table that are greater than 200. Basically, the subquery is trying to find how many salary entries are greater than 200. Then, that count of salary entries is checked to see if it equals 1 in the outer query, and if so then everything from that particular row in Emp1 will be returned.

PHPmyAdmin importing csv file to MySql database

This is pretty easy once you work out a couple of the idiosyncrasies involved in the process. These are my tips to help if you are experiencing difficulties.

1. When you develop your excel file save it out as a csv file. This means do not save it as a work book or any other format. When it has been saved take a look at it with a text reader such as notepad or similar. You will probably notice that each column is separated by a comma (,). This is important when we look at importing the file with PHPmyAdmin.

2. Cleanse your CSV file. Get rid of column headings. Ensure that there is an entry of some form in each row and column. Get rid of blank areas.

3. You must ensure that the table you are importing your data into is represented identically in the CSV file. This means that if your table has 10 columns you must have 10 corresponding columns in your CSV file. There is one exception to this however, if your first column is an id autoincrement column this does not need to be one of the included columns in your CSV. For example if you have a table structure like this:

MySql Table: Competitors
id,eventID,imageID,raceNumber,firstName,lastName,raceTime,category,
catPosition,gender,cap

CSV File:
eventID,imageID,raceNumber,firstName,lastName,raceTime,category,
catPosition,gender,cap

The id column is not represented in the CSV file.

4. If you do not have data for some of the columns in the CSV file enter 0 for each line.

5. In PHPmyAdmin click on the import tab. Click on the browse button and select your csv file. It will automatically select the CSV in Format or Imported File area.

6. In the Format of Imported File area:

Fields terminated by ,
Fields enclosed by (leave blank)
Fields escaped by
Lines terminated by auto
Column names eventID,imageID,raceNumber,firstName,lastName,raceTime,category,
catPosition,gender,cap (this is the example above used again here)

7. The category names above are separated by a comma (,) and there are no spaces after or before each word.

8. Click on Go

If everything went well you should have a fully populated table.

PHP MySQL – Joining tables in PhpMyAdmin

Lets suppose we have a database called Prints with several tables. The two tables we want to join are called ‘prints’ and ‘artists’. When we join the two we will create a new table which we will call ‘printdetails’.

We want to join both tables into one by using  a combination of columns from each table.

From the PRINTS table we will use id, title, price, size, description and src.

From the ARTISTS table we will use givenname, family name and aka.

Click on the SQL tab at the top of the page while you are in the main database which for us is PRINTS (Don’t confuse this with the PRINTS table) Take a look at the breadcrumb trail in the images to see what I am talking about.

We are going to create a new table called PRINTDETAILS which will be a table that has all the elements from two table in the one.

Type the following as your SQL command:


CREATE VIEW printdetails AS
SELECT prints.id,title,price,size,description,src,givenname,familyname,aka
FROM prints INNER JOIN artists ON prints.artistid = artists.id

NB: The prints.id (above) just defines that the id from the prints table should be used as both tables have an id. The capitals denotes that this is SQL command rather than the lowercase which is referring to columns and tables.

PHP Function for creating Thumbnails for both portrait and landscape images

I had need recently to create thumbnails from a directory after I had uploaded images. I found a function that worked somewhere but found that it was unable to handle portrait images.  I did  a little bit of tweeking and this is the final result.  It will open a directory where images are kept and look for the .jpg images.  It will then create thumbnails of the images and save them in the designated directory.  The thumbnails will be sized according to the set width or height you specify when calling the function.

function createThumbs( $pathToImages, $pathToThumbs, $thumbWidth, $thumbHeight )
{
  // open the directory
  $dir = opendir( $pathToImages );
 
  // loop through it, looking for any/all JPG files:
  while (false !== ($fname = readdir( $dir ))) {
    // parse path for the extension
    $info = pathinfo($pathToImages . $fname);
    // continue only if this is a JPEG image
    if ( strtolower($info['extension']) == 'jpg' )
    {
      //echo "Creating thumbnail for {$fname} ";
 
      // load image and get image size
      $img = imagecreatefromjpeg( "{$pathToImages}{$fname}" );
      $width = imagesx( $img );
      $height = imagesy( $img );
 
   if ($width > $height){ // Create a landscape thumbnail
 
      // calculate thumbnail size
      $new_width = $thumbWidth;
      $new_height = floor( $height * ( $thumbWidth / $width ) );
 
      // create a new temporary image
      $tmp_img = imagecreatetruecolor( $new_width, $new_height );
 
      // copy and resize old image into new image
      imagecopyresampled( $tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height );
 
      // save thumbnail into a file
      imagejpeg( $tmp_img, "{$pathToThumbs}{$fname}" );
 
      imagedestroy($tmp_img);
      imagedestroy($img);
 
   }else { // Create new portrait sized thumbnail
    // calculate thumbnail size
      $new_width = $thumbHeight;
      $new_height = floor( $height * ( $thumbHeight / $width ) );
 
      // create a new temporary image
      $tmp_img = imagecreatetruecolor($new_width, $new_height );
 
      // copy and resize old image into new image
      imagecopyresampled( $tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height );
 
      // save thumbnail into a file
      imagejpeg( $tmp_img, "{$pathToThumbs}{$fname}" );
 
      imagedestroy($tmp_img);
      imagedestroy($img);
   }
 
    }
  }
  // close the directory
  closedir( $dir );
}

To call the function from within your php code:
Path to images is the path to where the images are kept and path to thumbnails is the where the thumbnails will be kept, tumbnail width is the width of the landscape images while thumbnail height is the height of the protrait images.

createThumbs( "images/", "images/thumbs/", 200, 150 );


If you have any comments or ways to make this better leave a comment below.

How to take your WordPress website and replicate it on wamp

I had a situation recently where I had a fully operational website running on the web and I needed / wanted to make some radical changes to the theme and I wanted to interact with the current database. I use wamp for a local test server and wanted to replicate the entire website to my local machine. It took a little stuffing around so I have made a short list to help others out wanting to do the same or in case I forget and need to remember how.

Step One

Get the latest version of WordPress from wordpress.org
Unzip the package and add it to the www directory in wamp.

Step Two

Run the activation of WordPress from scratch to make the database and config.php page. Check http://localhost/yoursite/

Step Three

Assuming it is all working locally we can now start to make the conversion. Copy the entire wp-content directory from your working site into your local site files (e.g Delete the local wp-content and replace it with the website version)

Step Four

Open up phpMyAdmin for your live site. Your hosting provider should give you access to this through cpanel or something similar. Open the database that relates to your live site and then click on the Export tab at the top of the page. The default settings are usually fine. Just make sure that you are exporting and sql file. Save it to your desktop where you can easily locate it later. This may take a while depending on the amount of data you have stored.

Step Five

Open phpMyAdmin for your local wamp server. The green W in system tools will allow you to do this quickly. Open the new database that you just created in Step Two. Click on the Structure tab at the top of the page and all the tables within your database will then be displayed. Select all the tables withthe select all link at the bottom or click on each checkbox. Use the drop down menu at the bottom of the tables and select drop. This will delete all the tables that you have in your database on the local server. NOTE: Ensure you are dropping the localhost tables not your live site ones.

Step Six

When your live database download has finished check the size of the file. If it is over 2 megabytes you will have to zip the file in order to allow phpMyAdmin to upload the data. Zip it with you favourite zipping program. If it is still over 2 mb after zipping you will have to make changes to the post_max_size = 8M
upload_max_filesize = 2M
in the php.ini file within wamp. Just ensure that the post_max_size is larger or the same as the upload_max_filesize.

Step Seven

In your local phpMyAdmin while still in the database that you created and have just deleted the files from import the new database information. Click on the import tab and select the sql file or zip file and click on go.

Step Eight

If all went well you will have a whole new set of tables in your new database. In order to be able to access the localhost now click on the wp-options table. The fist entry in the table should be siteurl under the heading of option name. Click on the pencil to edit this. Change the http://yoursite.com to http://localhost/yoursite.

Step Nine

Go to http:/localhost/yoursite/wp-admin/ and log in the same as you would in your live site. When you reach the dashboard check the address bar of the browser to ensure you are in the right site. Go to Settings>General in the dashboard area. Change ‘site address url’ to the same as ‘WordPress Address URL’ e.g. http:/localhost/yoursite.

Step Ten

Check the front end to see if everything is working ok. If you have changed how your permalinks work you may not be able to view pages or posts etc. Go to Settings>Permalinks and select ‘default’ which should rectify any problems.

That is it hope it helps.

Use Javascript to hide content on a page.

I had cause to require a script to hide and show a map on a page. Javascript for client side convience was required. Here is the code that I used.

Put this code in the head section of your page.

function toggle() {
        var ele = document.getElementById("toggle");
        var text = document.getElementById("display");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "Show Map";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Hide Map";
    }
}

This goes in the body of your code.

<a id="display" href="javascript:toggle();">Show Map</a>

Bootstrap 3 – Get Tooltips Working

The tooltips gave me a little bit of an issues but after nutting it out I thought I might do a brief post to help other that run into the same problem.

First this is for Bootstrap version 3.

The way I am calling the tool tips is via the Markup. This is the part of the code where you want the tool tip.

<a id="example" title="" href="#" data-toggle="tooltip" data-placement="left" data-original-title="Tooltip on left">Hover over me</a>

NOTE: I found that the title=”” needed to go before the data-origial-title for the tooltip to work.

At the bottom of your HTML page just below the Bootstrap Core Javascript add this:

<script type="text/javascript">
        $(document).ready(function() {
            $('#example').tooltip();
        });
 
</script>

You can add an number of customisations to suit your needs here in the code. Your choices are listed here. For anyone just learning it might look like this.

<script type="text/javascript">[

 $(document).ready(function(){
    $("#example").tooltip({
        placement: "left",
        title: "tooltip on left",
    });
 });
</script>

This just makes the tooltip go to the left and places a default title if you have not added it to the code as we previously did with the data-original-title.

Hope that helps.

Submit a form with ajax to database and send results to page without refreshing.

I had a project where I needed to submit a form from an HTML page. The form data would be sent by ajax to a php file which would handle the data. The data could be insterted into a database. A result from the php file is then sent back to the HTML form and inserted into the results div id. The trick with this is to also remove text that was typed into the from in the first place.

 <form id="ajaxform" name="ajaxform" action="assets/ajax/enquiry.php" method="post">                
       <div class="form-group name">
              <label class="sr-only" for="name">Name</label>
              <input name="name" id="name" type="text" class="form-control" placeholder="Name:">
       </div><!--//form-group-->
              <div class="form-group email">
                    <label class="sr-only" for="email">Email</label>
                    <input name="email" id="email" type="email" class="form-control" placeholder="Email:">
              </div><!--//form-group-->
       <div class="form-group message">
                      <label class="sr-only" for="message">Message</label>
                      <textarea name="message" id="message" class="form-control" rows="6" placeholder="Message:"></textarea>
        </div><!--//form-group-->
              <button   class="btn btn-lg btn-theme ">Send Message</button>
   </form><!--//form-->

This is where the results from the form that was submitted will be sent back to after being processed by the php script.

 <!-- Results will be sent back to this div -->
   <div id="result"></div>


This is the javascript / ajax call which is placed at the bottom of the HTML page.
<script type="text/javascript">
    $("#ajaxform").submit(function(e){
 
            var postData = $(this).serializeArray();
            var formURL = $(this).attr("action");
            $.ajax({  
                type: "POST",  
                url: formURL,  
                data: postData,
                dataType: "json",
                success: function(dataType){  
                    // Successful result will be sent to the result div id.
                    $("#result").html(dataType); 
                },
                complete:function(){
                    //Clear the form
                    $('#ajaxform')[0].reset();
               }
            });
            e.preventDefault(); //STOP default action
            e.unbind(); //unbind. to stop multiple form submit.
 
    });
    $("#ajaxform").submit(); //Submit  the FORM
    </script>


The form data is sent to this php script as directed in the form action. The php script receives the form information and then anything is possible. This short piece of code just verifies that the information has been received and sends back the return message to the orginal form.


if(!empty($_POST['name'])){
        $name = $_POST['name'];
 $email = $_POST['email'];
 $message = $_POST['message'];
        //Could insert this into the database.  
 $returnMessage = "The form has been submitted: $name ";
 
 echo json_encode($returnMessage);
}
if(!empty($_POST['name'])){


        $name = $_POST['name'];
 $email = $_POST['email'];
 $message = $_POST['message'];
        //Could insert this into the database.  
 $returnMessage = "The form has been submitted: $name ";
 
 echo json_encode($returnMessage);
}