membd

Wednesday, September 2, 2015

DOM manipulation in php - bad practice - only for getting logic

<?php
$heading = true;
$paragraph = true;

if(isset($_POST['heading'])){
$heading = true;
$paragraph = false;
}

if(isset($_POST['paragraph'])){
$paragraph = true;
$heading = false;
}

if(isset($_POST['all'])){
$paragraph = true;
$heading = true;
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
p{
margin-top: 25px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<form method="post" action="">
<br><br>
<input type="submit" name="heading" value="heading" class="btn btn-success btn-lg">
<br><br>
<input type="submit" name="paragraph" value="paragraph" class="btn btn-success btn-lg">
<br><br>
<input type="submit" name="all" value="all" class="btn btn-success btn-lg">
</form>
</div>
<div class="col-md-8">
<div id="main">
<?php if($heading) { ?>
<h1 id="heading">This is heading</h1>
<?php } if ($paragraph) {?>
<p id="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aspernatur assumenda at aut dolor doloremque earum inventore, iure magni nesciunt porro quis veritatis voluptate? Assumenda necessitatibus quidem reprehenderit voluptas? Accusantium? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad architecto aut, dicta laudantium nam quam ratione rem sequi ullam vel? Ad animi delectus est libero maxime odit reiciendis, soluta! Harum!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias beatae deleniti dolore excepturi iste iusto maxime nesciunt nihil, nisi obcaecati placeat quae similique sit soluta! Nemo praesentium qui quod!</p>
<?php } ?>
</div>
</div>
</div>
</div>
</body>
</html>

Tuesday, August 25, 2015

Common Document object model traversing

document.createElement() Creates an Element node
document.createTextNode() Creates a Text node

element.appendChild("new node") Adds a new child node, to an element, as the last child node
element.insertBefore("new node", "Which node before") Inserts a new child node before a specified, existing, child node

element.removeChild("existing node") Removes a child node from an element
element.replaceChild("new node", "Which existing node will be replace") Replaces a child node in an element

to learn more: http://www.w3schools.com/jsref/dom_obj_document.asp

Dom Traversing
================================================
element.parentNode Returns the parent node of an element
element.parentElement Returns the parent element node of an element

element.childNodes Returns a collection of an elements child nodes (including text and comment nodes)
element.childNodes[i] Returns an element child nodes (including text and comment nodes)

element.firstChild Returns the first child node of an element
element.firstElementChild Returns the first child element of an element

element.lastChild Returns the last child node of an element
element.lastElementChild Returns the last child element of an element

element.nextSibling Returns the next node at the same node tree level
element.nextElementSibling Returns the next element at the same node tree level

element.previousSibling Returns the previous node at the same node tree level
element.previousElementSibling Returns the previous element at the same node tree level

to learn more: http://www.w3schools.com/jsref/dom_obj_all.asp

Wednesday, September 2, 2015

DOM manipulation in php - bad practice - only for getting logic

Tuesday, August 25, 2015

Common Document object model traversing

css snippet for blogger code highlighting