waybloggy: tutorials

Showing posts with label tutorials. Show all posts

Thursday, 4 December 2014

Editable div in Html 5 with contenteditable attribute

We use input or textarea are use to edit or input text. But now a days when we need design as well as editable things we need more than that.

The contenteditable attribute specifies whether the content of an element is editable or not.

Any elements with the contenteditable attribute set will have a grey outline as you hover over. Feel free to edit and change their contents. I'm using local storage to maintain your changes.

contenteditable="" or contenteditable="true"

Indicates that the element is editable.

contenteditable= "false"

Indicates that the element is not editable.

contenteditable= "inherit"

Indicates that the element is editable if its immediate parent element is editable. This is the default value.

This is div with 'contenteditable' true.

Editable text

Simple popup box in Jquery

While building dynamic web pages popups are useful for showing information of inputs other than content that is shown on page. Mostly html alert popup is used to some info like 'alerts or information for website'. But when development needs popup that do multiple things with multiple formats, alert box is not enough.

In this case we need a custom pop up that satisfy our need. We can see that there are many jquery plugin that provide custom popup. But they come with external js & css files with complex format to implement. That is why I want to built my own custom popup.

We will build this with ‘div’ in html, which will be hidden on page load. After clicking on link this popup will be shown by jquery. The code is given below

<!DOCTYPE html>

<head>

<style>

.popup-back {

float: left;

background-color: rgba(51, 51, 51, 0.71);

position: fixed;

width: 100%;

height: 100%;

top: 0;

left: 0;

display:none;

z-index:10000;

}

.popup-con {

margin: auto;

width: 600px;

position: relative;

}

.popup-body {

background-color: #fff;

padding: 10px;

position: absolute;

width: 100%;

top: 100px;

}

a.close-popup {

font-family: arial;

text-decoration: none;

background-color: #333;

color: #fff;

border-radius: 50%;

height: 21px;

position: absolute;

width: 20px;

text-align: center;

right: 5px;

top: 5px;

}

</style>

</head>

<body>

<a href="#" class="link-class popup-link" rel="my_popup1">popup 1</a>

<a href="#" class="link-class popup-link" rel="my_popup2">popup 2</a>

<h1>this is my 1st popup</h1>

<p>Simple way for popup</p>

</div>

<h1>this is my 2nd popup</h1>

<p>Simple way for popup</p>

</div>

$(".popup-link").click(function () {

var popupId = "#" + $(this).attr("rel");

$(popupId).fadeIn();

});

$(".close-popup").click(function () {

$(".popup-spclass").fadeOut();

});

</script>

</body>

</html>

Monday, 29 September 2014

Simple Jquery Accordion div for your website

Accordion is expandable and collapsible content holder that is broken into sections and probably looks like tabs. On net you will get plenty of Accordion plug-ins which are with their complicated structure and heavy js files. So they are hard to modify as per your requirement.

I am writing here a simple and light weight jquery accordion. This is basic structure with scope of modifications. So try this out.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Accordion</title>

$(document).ready(function () {

$(".accordiondiv h1").click(function () {

$('.active').removeClass('active');

$(this).addClass('active');

$(this).siblings('.accordionbody').slideToggle();

});

</script>

<style>

.accordionbody

{

display: none;

border: 1px solid;

padding: 8px;

}

.accordiondiv h1

{

background-color: #333;

color: #fff;

font-weight: normal;

padding: 10px;

font-size: 17px;

margin: 0;

border: 1px solid;

}

</style>

</head>

<body>

<h1>

accordion 1</h1>

some text here

</div>

<h1>

accordion 3</h1>

some text here

</div>

<h1>

accordion 4</h1>

some text here

</div>

</body>

</html>