html

using Regular expressions

This article solves the following challenge: 

How to convert WORD to HTML inside any application

Although HTML is not a regular language, the easiest solutions involves regular expressions. Copying word documents already returns a html code. The problem is that it is very dirty and full of bad and illegal formatting, that can only be processed using the program word or any other specialized type of software.
The following regular expressions translate a WORD input to a HTML output:

// 0. remove all empty p's when
var output = input.replace(/(|<\/p>)/g, '');

// 1. remove line breaks / Mso classes
var stringStripper = /(\n|\r| class=(")?Mso[a-zA-Z]+(")?)/g;
output = output.replace(stringStripper, '');
// 2. strip Word generated HTML comments
var commentSripper = new RegExp('', 'g');
output = output.replace(commentSripper, '');
var tagStripper = new RegExp('<(/)*(meta|link|\\?xml:|st1:|o:)(.*?)>', 'gi');
// 3. remove tags leave content if any
output = output.replace(tagStripper, '');
// 4. Remove everything in between and including tags ''
var badTags = ['script', 'applet', 'embed', 'noframes', 'noscript'];
for (var i = 0; i < badTags.length; i++) {
tagStripper = new RegExp('<' + badTags[i] + '.*?' + badTags[i] + '(.*?)>', 'gi');
output = output.replace(tagStripper, '');
}

Evaluate complexity of present statement:

Select ratingCancelGuessingPassing knowledgeKnowledgeableExpert

Your rating: 3 Average: 3.3 (3 votes)

Taggings:

CSS solution

This article solves the following challenge: 

<div> centering

One solution to the problem would be to apply the following CSS to the inner object:
#inner {
display: table;
margin: 0 auto;
}

Evaluate complexity of present statement:

Select ratingCancelGuessingPassing knowledgeKnowledgeableExpert

Your rating: None Average: 4 (1 vote)

Taggings:

Magento site had weird characters in the top of Magento Connect

These files are mostly likely meta-data files for OS X's HFS+ file system. See this entire thread on the Apple Stack Exchange for some good starting points if you're interested in the details.
Oversimplifying things, when you create a tar archive on OS X these files are included along with the "real" file. This allows Macintosh specific meta data to survive the trip into a file format that wasn't created specifically for the Mac. If you untar the files on a Mac, the meta-data is preserved. If you untar the files on a non-Mac, the ._ files are generated in case the meta data is needed.
My guess is, at some point someone tared up those files to move them to the production server from their Mac, which brought along the the ._ files for the ride. You can avoid this in the future by running
export COPYFILE_DISABLE=true
from the terminal prior to copying the files. Details on this here.
(It's pretty bizarre that PHP would attempt to include those files instead of the correct files — did you debug this far enough to know why/what connect through it was doing?)

Designing a website using Twitter Bootstrap

Twitter Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.
The difference between Bootstrap and standard CSS designing, and also the reason of bootstrap's popularity, is that the person designing the page does not have to write CSS rules. He uses a set of predefined classes and styles and implements it and combines it.
The easiest way to learn it is to start form some examples provided at http://getbootstrap.com/ and combine it with other componenets provided in the documentation

Another useful solution-link

I do not really have much experiences with Spring.
Nevertheless the following link is quite helpful as well. It seems to be a little bit more complete as the one posted originally.
http://www.javacodegeeks.com/2011/04/spring-mvc3-hibernate-crud-sample.html

Dismantling a simple theme into more php files for easier organisation

Download the free simple theme online and copy it to your work folder.There will be only one index file in which all html is contained starting from header to footer.Doing a php programming in that file would be pretty difficult and unorganised and the code would be very untidy.So,the challenge is to dismantle the theme into more pieces using simple php. Sollution is attached bellow

Taggings:

Create android application with phonegap using HTML5, CSS3, JavaScript

PhoneGap allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform development, avoiding each mobile platforms' native development language. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device's sensors, data, and network status.
Since the front end of the application is built using web technologies, a PhoneGap application with the exact same source code can be deployed across different platforms. It should be considered that phonegap has also some limitations as the front end of the application is built in JavaScript. A large number of applications rely on background threads to provide a smooth user experience, but as PhoneGap APIs are built using JavaScript which is not multi-threaded background processing is not supported. In addition a number of native APIs are not yet supported by PhoneGap’s APIs

A "Hello World" application can be created as follows:

1. Install SDK + Cordova

Download and install Eclipse Classic (Eclipse 3.4+) from http://www.eclipse.org/downloads/
Download and install Android SDK from http://developer.android.com/sdk/index.html
Download and install ADT Plugin http://developer.android.com/sdk/eclipse-adt.html#installing
Download the latest copy of PhoneGap from "http://phonegap.com/download" and extract its contents. We will be working with the Android directory.

2A. Setup your PATH environment variable on Mac OS

Open the Terminal program (this is in your Applications/Utilites folder by default).
Run the following command

touch ~/.bash_profile; open ~/.bash_profile

This will open the file in the your default text editor.
You need to add the path to your Android SDK platform-tools and tools directory. In my example I will use "/Development/android-sdk-macosx" as the directory the SDK is installed in. Add the following line:

export PATH=${PATH}:/Development/android-sdk-macosx/platform-tools:/Development/android-sdk-macosx/tools

Save the file and quit the text editor.
Execute your .bash_profile to update your PATH.

source ~/.bash_profile

Now everytime you open the Terminal program you PATH will included the Android SDK.

2B. Setup your PATH environment variable on Windows

From the Desktop, right-click My Computer and click Properties.
Click Advanced System Settings link in the left column.
In the System Properties window click the Environment Variables button.
Select the PATH variable from the System variables section.
Select the Edit button.
You need to add the path to your Android SDK platform-tools and tools directory. In my example I will use "C:\Development\android-sdk-windows" as the directory the SDK is installed in. Append the following text into the text box:

;C:\Development\android-sdk-windows\platform-tools;C:\Development\android-sdk-windows\tools

Save your edit. Close the Environment Variables dialog.
Additionally, you may need to include %JAVA_HOME%\bin to your PATH as well. To check to see if this is required, run a command prompt and type java. If the program can not be found add %JAVA_HOME%\bin to the PATH. You may need to specify the full path instead of using the %JAVA_HOME% environment variable.
Finally, you may need to include %ANT_HOME%\bin to your PATH as well. To check to see if this is required, run a command prompt and type ant. If the program can not be found add %ANT_HOME%\bin to the PATH. You may need to specify the full path instead of using the %ANT_HOME% environment variable.

3. Setup New Project

In a terminal window, navigate to the bin directory within the android subfolder of the Cordova distribution.

Type in ./create then press "Enter"

is the path to your new Cordova Android project
is the package name, e.g. com.YourCompany.YourAppName
is the project name, e.g. YourApp (Must not contain spaces)

Launch Eclipse, and select menu item New Project
Select the directory you used for
Click Finish.

4. Hello World

Create and open a new file named index.html in the assets/www directory. Paste the following code:

Cordova

Hello World

5. Deploy to Emulator

Right click the project and go to Run As > Android Application
Eclipse will ask you to select an appropriate AVD. If there isn't one, then you can create one as follows from the Android Virtual Device Manager:
- click "New" button from the Android Virtual Device Manager
- fill up the required information and click OK

6. Deploy to Device

Make sure USB debugging is enabled on your device and plug it into your system. (Settings > Applications > Development)
Right click the project and go to Run As > Android Application

The instalation tutorial can be found also under:
http://docs.phonegap.com/en/2.2.0/guide_getting-started_android_index.md...

Taggings:

Create android application by using standard web technologies such as HTML5, CSS3, and JavaScript

The goal is to build applications for mobile devices using well known standard web technologies like JavaScript, HTML5, and CSS3, instead of device-specific languages such as Java or Objective-C.

Solution: Adding Social Media Buttons to jQuery colorbox

An appropriate solution for this task is shown with the following code example.

Add the following code into the footer of your website on which the colorbox is displayed (inside the HTML script-tag):


// when document is loaded, start
jQuery(document).ready(function() {

// make variables for each "like" button from social media services you want to display (e.g. facebook, google+, twitter)
var facebook = '*** facebook button code ***';
var twitter = '*** twitter button code ***';
var google = '*** google plus button code ***';

// append the social media buttons to each #cboxContent, the Id of the line below of the Colorbox
jQuery("#cboxContent").append(''+facebook+twitter+google+'');
});

After doing so you will see the social media buttons being displayed inside of the colorbox, however the positioning will be not as you like as the buttons are displayed below the actual line. As you may know, CSS supports negative margins for cases like that. Copy the following CSS into your stylesheet and the buttons will be positioned properly (adjust to your needs):


#cboxSocials {
margin-top:-43px;
}

.cb_social_elem {
float:left;
margin-right:20px;
width:120px;
}

How can I add social Media Buttons (Facebook, Twitter & Co.) to jQuery colorbox?

The aim is to display social media buttons on each image in the jQuery colorbox view. As displaying something other than text in the lightbox is not possible by default (<a href="http://www.jacklmoore.com/colorbox/">jQuery colorbox</a>) (see documentation, demo), we need a custom solution to do the job. Note: As jQuery colorbox is a Plugin for certain content management systems, it is important that the change should be done WITHOUT changing the code of the lightbox and WITHOUT accessing the HTML directly, as Plugins for CMS should not be modified as they will loose update compatibility. The result should look like in attachment 1 (sample.png).

Pages

Subscribe to html