Responsive Images using CSS

Its a short tutorial to make your images responsive in your website.

The HTML code would be as follows:

<img alt="" src="..your_im_path.." />

To make the image responsive lets enclose it a div with a class “img_wrapper”:

<div class="img_wrapper">
<img alt="" src="..your_im_path.." />
</div>

So now we will add our css to make it responsive:

.img_wrapper{
max-width:100% !important;
height:auto;
display:block;
}

This little code makes your image responsive!
Enjoy! ^_^

Advertisements

Enhancing your Vim in Ubuntu!

NOTE: This tutorial is for the people using Ubuntu 12.04 or above.

Hello and welcome to this tutorial for enhancing your favourite text editor Vim. ^_^
For those who don’t know what Vim is, check out its official website or this wikipedia page.

And those who are already familiar with it, lets advance to enhance. ๐Ÿ˜€
Lets see what we are going to do today. We will be updating our VIm with a plugn known as YouCompleteMe (YCM).

YouCompleteMe is a fast, as-you-type, fuzzy-search code completion engine for Vim. It has several completion engines: an identifier-based engine that works with every programming language, a semantic, Clang-based engine that provides native semantic code completion for C/C++/Objective-C/Objective-C++ (from now on referred to as “the C-family languages”), a Jedi-based completion engine for Python, an OmniSharp-based completion engine for C# and an omnifunc-based completer that uses data from Vim’s omnicomplete system to provide semantic completions for many other languages (Ruby, PHP etc.).
Source:ย http://valloric.github.io/YouCompleteMe/

Ok now moving on first we ensure that our Vim is compatible for this plugin.
Open your Vim, if not installed then you can skip this step, type
:version

If the version of the Vim is atleastย 7.3.584 then its fine otherwise you may have to build it from source which is very easy to do.
So if you found out that your version of Vim is not upto-the-mark, then we have to remove it first before building it again.
Run the following commands in your terminal:
sudo apt-get remove vim vim-runtime gvim
and also
sudo apt-get remove vim-tiny vim-common vim-gui-common
These will remove the Vim installation from your system.

Now the next step is to build it from the source. Run these commands:
cd ~
hg clone https://code.google.com/p/vim/
cd vim
./configure --with-features=huge \
--enable-rubyinterp \
--enable-pythoninterp \
--enable-perlinterp \
--enable-gui=gtk2 --enable-cscope --prefix=/usr
make VIMRUNTIMEDIR=/usr/share/vim/vim74a
sudo make install

We have now successfully build the newer version of Vim on our system and now the next step is to install YCM plugin.
Type :echo has('python') in Vim. The output should be 1. This tells us that our Vim has Python support which is required for our plugin.

Now we will install YCm using Vundle. Its a Vim plugin manager.
To download Vundle run the following commands:
git clone https://github.com/gmarik/vundle.git ~/.vim/bundle/vundle
and then we must configure our bundles in .vimrc file. If you can’t find the file in your home folder then you may need to create it with following content:

set nocompatible ” be iMproved
filetype off ” required!

set rtp+=~/.vim/bundle/vundle/
call vundle#rc()

” let Vundle manage Vundle
” required!
Bundle ‘gmarik/vundle’

” My Bundles here:

” original repos on github
Bundle ‘tpope/vim-fugitive’
Bundle ‘Valloric/YouCompleteMe’
Bundle ‘Lokaltog/vim-easymotion’
Bundle ‘rstacruz/sparkup’, {‘rtp’: ‘vim/’}
Bundle ‘tpope/vim-rails.git’
” vim-scripts repos
Bundle ‘L9’
Bundle ‘FuzzyFinder’
” non github repos
Bundle ‘git://git.wincent.com/command-t.git’
” git repos on your local machine (ie. when working on your own plugin)
Bundle ‘file:///Users/gmarik/path/to/plugin’
” …

filetype plugin indent on ” required!

” Brief help
” :BundleList – list configured bundles
” :BundleInstall(!) – install(update) bundles
” :BundleSearch(!) foo – search(or refresh cache first) for foo
” :BundleClean(!) – confirm(or auto-approve) removal of unused bundles

” see :h vundle for more details or wiki for FAQ
” NOTE: comments after Bundle command are not allowed..

You can see that I’ve added a bundle for YCM too.
Now open your Vim and run
:BundleInstall

This will install all the bundles. ๐Ÿ™‚

And we are done! ^_^
Enjoy!
Note:
If you get the ycm_core library not compiled error then you need to recompile it by following commands.
cd ~/.vim/bundle/YouCompleteMe
./install.sh --clang-completer

Also ensure that you have python headers installed if not then install by
sudo apt-get install python-dev

Setting up!

Its been 2-3 days since I wrote my diary. Well basically I didn’t had anything to write per say but now I think I should write nonetheless.
These days I’ve been setting up Ubuntu on my desktop. I’ve installed Ubuntu 13.04 and installed many softwares that are installed on my laptop.
Installing them now seems much easier than installing them for the first time on my laptop. You learn a lot from from your mistakes.

And also my website was moved to the main server. But the other links were pointing to the same old server. This needs to be resolved. It can be done by exporting the SQL database file changing the absolute path to the newer one.
I also have a script that can do this.
But before doing this we need to re-transfer some files to the main server.ย  Because the teachers from the sports department had updated some folders with new files.
But it would be done easily.
By tomorrow I’ll have this work done. < Hopefully! ๐Ÿ™‚

CSS and Javascript

Working on that Map website.
I made a javascript function today that improves the functionality of the map display. And tomorrow I’ll add other options that are required to make it bit more dynamic.

But had a little problem with it. The getElementsByClassName method is not working as it should. There’s not even a single error in the web console. And when I use getElementById method, it runs perfectly. Don’t know why. But will search for it.

I also played with CSS a little. Really changed the outlook of the website.

Update:

Found the solution. Well I didn’t actually Vigasdeep did. I didn’t add [0] after the syntax to refer to the correct first object. Now its working fine. ^.^

Mapping The Map

Yesterday, Nadarjot, Kamaljeet and I presented another example for the map website. Actually, after learning about different websites hosting theit own versions of OSM routing services from Khanna Girls, we embedded theses websites in our own web-page using ‘iframe’ tag of HTML5.
You can use the iframe syntax for embedding another website on your own,

But ‘iframe’ tag isn’t allowed to be posted in the wordpress for security purposes, so I can’t write the syntax here.ย 

You can give this tag different attributes as defined here.

So we used 3 different routing services and made 3 different examples for our web-page. The services were

All of these use OpenStreetMaps. And they provide their own little benefits of usage. You can discover them own their websites. This may have helped us very much but still there’s lot to be improved.

A New Task

Yesterday, we (Nivrit and I) finally had our meeting with teachers from Sports Department and got their feedback on the website. Need to change some things. So, all in all maybe by next week, our website will be live on the main server.

And to talk about today, Dr.Rai gave Nadarjot a task to create a web-page with information regarding how to reach GNDEC. There should be Map embedded in that web-page. And we should prefer to use OSM over Google Maps.

Some of us other GD members volunteered to help with this task. We have selected and modified the template for that page. But our Map related work is not done yet. We haven’t been able to successfully work out the full features, only the source to destination feature is running. Lot of scope for improvement.
We have even asked for the help from Khanna Group, since they have already worked with OSM. Hope to hear from them soon.

Progress

Today I created a small Number Guessing Game in HTML5 using Javascript. I made this game in C++ once. So what I learned today was to use Javascript syntax to apply the same logic here. But that’s not it, I also did my first animation using Javascript. In my game, when player enters a number, an arrow displayed over a scale image moves accordingly.
Feeling Excited! ๐Ÿ™‚ Lots of possibilities I can see in the future. ๐Ÿ˜€

Anyway, Nivrit and I discussed with Dr.Rai today about our project. He arranged a meeting for tomorrow with our Client for our project review. Well I’m feeling little relieved that our project’s going to move forward now.