Monthly Archives: September 2015

Live html compiler – PHP

Live HTML compiler using PHP is very simple one like as w3schools editor. In here we are going to run the textarea code in the iframe.Main difference from w3schools try editor,the w3schools try editor used asp.net but, here PHP with iframe is used.Visitors are need to edit their code for their own need, and they want to check it lively HTML live compiler support this operation. We have two files for this opeation .

demo_html_compiler.html(Put the php code)

demo_html_compiler.php (The action will performs,get the code from demo_html_compiler.html and respond in iframe.)

LIVE DEMO

Live html compiler, it’s simple and easy can understand. Two pages are used for this functions, main page (demo_html_compiler.html) and action page(demo_html_compiler1.php).

 

 Input 


<html>
<head>
<style>
p {
    font-family: "Times New Roman";
    font-size: 20px;
	color:red;
}
</style>
</head>
<body>
<p>Welcome to Live HTML compiler</p>
</body>
</html>

The above code, this is one of the main part in live html compiler. All html or php code and style(css) are specified here. The form action page is demo_html_compiler1.php. All input codes are written in textarea ‘id=’enter_your_code’. And fetch the code from main page to action page using ‘@$_REQUEST[“enter_your_code”]’. And print the output to particular div like:


 Output

Download Code

Rounded Image with CSS Shadows

Hi friends,
This article shows “Rounded Image with CSS Shadows”.

Any rectangular image into a circular one with drop shadows and borders without editing the original images.

In here, simple replace the background-image URL in the DIV with your own image. Perfect for display the author photos in your blog’s sidebar,display team members, testimonial etc. The height and width attributes of the .imagedisplay class may have to be adjusted based on the size of the orginal image.





Rounded Image With CSS shadows

DEMO

Search and replace text in Vim

Describe the basic fundamental uses of the text substitution inside the Vim editor. When you want a specific text(search) to be replaced with another text in the entire file, then you can use the following sequence:
(1) Replace with information:

:%s/search/replace/gc

(2) Without Confirmation:

:%s/search/replace/g

(3) Replace only in the line 1-10:

:1,10s/search/replace/g

JQuery for Mobile App Development

Hi Guys,
Here I share one useful and helpful information related to “JQuery for Mobile App Development”.
JQuery mobile is a touch-friendly Web UI development framework that is used to develop mobile web applications that work across smartphones and tablets. The jquery mobile framework builds on top of the jquery core and provides a number of features including HTML and XML document object model(DOM) traversing and manipulation, event handling, performing server communication using Ajax, as well as animation and image effects for web pages.

Features of JQuery Mobile

Overall Simplicity:This framework is easy to use, and you can develop many pages using markups driven by minimal or no Javascript
Progressive enhancement and graceful degradation:Jquery mobile leverages the latest versions of HTML5,CSS3 and javascript all mobile not such support.
Accessibility:Jquery mobile has support for accessible rich internet applications (ARIA) to help create web pages that are accessible to visitors.

Small Size: The overall size of the jquery mobile framework is relatively small at 12KB
Theming:It provide a theme based system for develop the styling of your application.

The structure of a JQuery Mobile Page

Header Bar:This is used for displaying the page title and back button. This part contain both these two(title and back button)
Content:This is the body part of the application. This part contain the entire contents of the application or the body part of the application
Footer bar:This part is the navigational part, copyright information of the application and whatever we wish to add.

Events and Methods

The jquery mobile framework that extends the jquery core is available using $.mobile, which also provides access to jquery mobile specific events and methods.

We need to bind events to jQuery mobile using Live() and Bind() methods like touch events including tap, tap-hold and various swipe and virtual mouse events.

JQuery mobile provides many methods with the $.mobile object such as:

$.mobile.changePage: This is used to change one page to another programmatically

Example:If we need to go to the page test.php using a slide transaction, then we will use the following command:

$.mobile.changePage(“test.php”,”slide”)

$.mobile.loadPage: This is used for load an external pages
$mobile.showPageLoadingMsg: This is used for show the page load message
$.mobile.hidePageLoadingMsg: This is used for hide the page load message
$.mobile.path.isSameDomain: This is a utility method that is used to compare the domain of two URLs.

$.mobile.activePage: This is used to get a reference to the page that is currently being viewed.

Forms

Forms are a common web artifact for posting information. Jquery mobile provides a ruch set of form elements.There are many form UI components like inputs, search input, sliders, flip toggle switches, radio buttons, check boxes, select menu ect.These can be created easily.

The code for a form that has a ‘submit’ button below:

<form method=”get” action=”formaction.php”&gt
<fieldset&gt
<div data-role=”fieldcontain”&gt
<label for=”select-option” class=”select”&gtChoose option:</label&gt
<select name=”select-option” id=”select-option”&gt
<option value=”option1”>Option1</option&gt
<option value=”option2”>Option2</option&gt
<option value=”option3”>Option3</option&gt
</select&gt
</div&gt
<button type=”submit”>Submit</button&gt
</fieldset&gt
</form&gt

Page transition

Jquery mobile support CSS based page transition.These are applied when navigation to a new page and back.

How to make Blinking the text/button/div in html5 and Javascript

The blinker() function helps to blink text/div/button etc.. Set the fadein and fadeout time in blinker(). Also set the timeinterval.

Blinking code

<button class=”blink_me” >This will blink </button>
<script src=”http://code.jquery.com/jquery-1.9.1.js”></script>
<script>
function blinker()
{
$(‘.blink_me’).fadeOut(500);
$(‘.blink_me’).fadeIn(500);
}
setInterval(blinker,1000);
</script>

CSS Button Style

Hi all,
Here i share related to CSS button style.
CSS helps different style and effect on HTML button.Create nice buttons that work purely using CSS, and that are cross-browser compatible. That means that they do not use images at all, and they should format nicely in almost any browser.Below I have given some button styles.
You’ll find a style of all coded with just pure CSS3 code. And button styles can change in style tag .

Preview:

Code

Preview:

Code


Click Me

Preview:

Code


Submit

Preview:

Code

Buy

Preview:

Code:

Preview:

Code:

Preview:

Code

Preview:

Code

Use the ‘Up’ arrow key to search through the bash command history

You can enable the ‘Up’ arrow of your keyboard to search through commands that you have used in the past, on the terminal. Just type the initial few letters of the desired command and press ‘Up’ arrow, and you will get the commands that start with the letters you have typed.

To enable this search, you have to add the following lines at the end of your .bashrc file, which is stored in your home directory.

$bind ‘”e[A”: history-search-backward’
$bind ‘”e[B”:history –search-forward’

And them run thye following command:

$source _/.bashrc

For example, if your bash history contains the following:

python2.7 script.py
Perl script.pl
Php sample.php
Perl test.pl
Pytho2.7 sample.py
Python2.7 very_long_file_name.py

And if you want to search for a python2.7 command, then enter ‘py’ and press ‘Up’ arrow. The terminal will show commands that start with py, one at a time. You can keep pressing the ‘Up’ arrow to search until the terminal shows the desired command.

Center Image in div with overflow hidden

Here’s a simple CSS in HTML solution to have fullscreen backgrounds vertical and horizzontal centering respective image, image overflow hidden.Here you can center the image horizontally by adding a negative margin and left portion. If you want to you can also center the image vertically by adding a negative margin and top portion.

CODE

Simple Textarea text Counter using AngularJS

This little and useful, textarea character counter using Javascript ang AngularJS. Here is one of the simple method use the textarea counter. This is useful to limited character field in forms.This demonstrates using AngularJS for a live character count input.

The <html> element is the container of the AngularJS application ‘ng-app=”myappnote”‘

A <div> in the HTML page is the scope of a controller: ng-controller=”myctrlnote”.The ng-controller directive helps to defines the application controller.

ng-model directive binds the value of HTML controls (input, select, textarea) to application data.Here ng-model directive binds a <textarea> to the controller variable message.

The two ng-click events invoke the controller functions clear() and save().

<button ng-click=”save()”>Save</button>
<button ng-click=”clear()”>Clear</button>

An ng-bind directive binds the controller function left() to a <span> displaying the characters left

Number of characters left: <span ng-bind=”left()”>&lt/span>

Full Code

My Textarea

Number of characters left: