We can control the visual order of HTML elements using CSS as described below-
1) Using CSS-Order Property :
2) Using display:box Property :
References –
http://tanalin.com/en/articles/css-block-order/
Programming is Easy…
Advertisements
DIV
How to slide HTML element using only JavaScript ?
If you are looking for, how to slide HTML elements using only JavaScript then this article may can help you. Below is an idea to do this-
<html>
<head>
<style>
.carousel-container {
margin: 10px;
width: 1240px;
}
.item {
width: 200px;
background-color: red;
height: 100px;
display: inline-block;
position: relative;
}
</style>
<script>
function MoveRight() {
var containerWidth = document.getElementsByClassName('carousel-container')[0].offsetWidth;
var itemWidth = document.getElementsByClassName('item')[0].offsetWidth;
var widthToMove = containerWidth - itemWidth;
var temp = 0;
var time = window.setInterval(function () {
if (temp >= widthToMove) {
window.clearInterval(time);
}
else {
document.getElementsByClassName('item')[0].style.left = temp + 'px';
temp += 1;
}
}, 10);
}
</script>
</head>
<body>
<div class="carousel-container">
<div class="item"></div>
</div>
<button class="btnMove" onclick="MoveRight();">MoveRight</button>
</body>
</html>
We can use properties like left, right, top, bottom, margin-left, margin-right, margin-top and margin-bottom as per need.
Programming is Easy…
How to create mouse over menu without jQuery/Javascript in HTML?
Sometime, we need to display a mouse over menu like in grid to edit/delete rows etc…
It can be done easly by just creating required menu options and set default display style to none and show menu on item’s/rows mouse over in css.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mouse over menu using div/css without jQuery and JavaScript</title>
<style type="text/css">
.itemsContainer
{
border: 1px solid red;
height: 300px;
width: 600px;
}
.item
{
height: 100px;
width: 100px;
float: left;
margin: 10px;
}
.itemsContainer .item:nth-child(odd)
{
border: 1px solid green;
background-color: gainsboro;
}
.itemsContainer .item:nth-child(even)
{
border: 1px solid gold;
background-color: lavender;
}
.menu
{
list-style-type: none;
margin-top: 0px;
margin-left: 15px;
display: none;
}
.menu li a
{
color: red;
text-decoration: none;
}
.itemsContainer .item:hover .menu
{
display: block;
}
</style>
</head>
<body>
<div class="itemsContainer">
<div class="item">
<ul class="menu">
<li>
<a href="#">Edit</a>
</li>
<li>
<a href="#">Delete</a>
</li>
</ul>
</div>
<div class="item">
<ul class="menu">
<li>
<a href="#">Edit</a>
</li>
<li>
<a href="#">Delete</a>
</li>
</ul>
</div>
<div class="item">
<ul class="menu">
<li>
<a href="#">Edit</a>
</li>
<li>
<a href="#">Delete</a>
</li>
</ul>
</div>
<div class="item">
<ul class="menu">
<li>
<a href="#">Edit</a>
</li>
<li>
<a href="#">Delete</a>
</li>
</ul>
</div>
<div class="item">
<ul class="menu">
<li>
<a href="#">Edit</a>
</li>
<li>
<a href="#">Delete</a>
</li>
</ul>
</div>
<div class="item">
<ul class="menu">
<li>
<a href="#">Edit</a>
</li>
<li>
<a href="#">Delete</a>
</li>
</ul>
</div>
<div class="item">
<ul class="menu">
<li>
<a href="#">Edit</a>
</li>
<li>
<a href="#">Delete</a>
</li>
</ul>
</div>
<div class="item">
<ul class="menu">
<li>
<a href="#">Edit</a>
</li>
<li>
<a href="#">Delete</a>
</li>
</ul>
</div>
</div>
</body>
</html>
Programming is easy….
