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
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…
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…
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….