I am trying to make my own custom drag and drop with html and Javascript drag and drop I have prepared a snippet:
/* draggable element */
var tempParentContainer = '';
var placeholder = document.createElement('div');
placeholder.className = 'drag-state-placeholder';
function enableDragDrop(containerClass, draggableClass) {
let tempElem = document.querySelectorAll(draggableClass);
tempElem.forEach(item => {
item.addEventListener('dragstart', dragStart);
});
let tempContainer = document.querySelectorAll(containerClass);
tempContainer.forEach(box => {
box.addEventListener('dragenter', dragEnter)
box.addEventListener('dragover', dragOver);
box.addEventListener('dragleave', dragLeave);
box.addEventListener('drop', drop);
});
}
function dragStart(e) {
tempParentContainer = e.target.parentNode;
e.dataTransfer.setData('text/plain', e.target.id);
setTimeout(() => {
e.target.classList.add('hide');
placeholder.style.height = e.target.clientHeight + 'px';
tempParentContainer.appendChild(placeholder);
}, 0);
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
}
function dragEnter(e) {
e.preventDefault();
}
function dragOver(e) {
e.preventDefault();
e.currentTarget.appendChild(placeholder);
}
function dragLeave(e) {
e.preventDefault();
}
function drop(e) {
placeholder.remove();
// get the draggable element
const id = e.dataTransfer.getData('text/plain');
const draggable = document.getElementById(id);
// add it to the drop target
e.currentTarget.appendChild(draggable);
// display the draggable element
draggable.classList.remove('hide');
}
.view_container {
width: 100%;
}
.data-container {
transform: scale(1);
width: fit-content;
background: rgb(255, 255, 255);
display: flex;
flex: 0 0 100%;
height: 100%;
min-width: 1px;
overflow: auto;
position: relative;
margin: 0 10px;
transform-origin: left top;
transition: 0.3s;
}
.table-main {
position: relative;
border-collapse: separate;
display: table;
white-space: normal;
width: 100%;
}
.table-head {
display: table-header-group;
vertical-align: middle;
}
.table-tr {
display: table-row;
vertical-align: inherit;
height: 100%;
}
.table-body {
display: table-row-group;
vertical-align: middle;
}
.table-th {
min-width: 330px;
background-color: #607d8b;
color: #fff;
border-right: 2px solid rgb(255, 255, 255);
border-bottom: 0px solid rgb(255, 255, 255);
z-index: 3;
padding: 0;
height: 30px;
line-height: 30px;
vertical-align: top;
display: table-cell;
padding: 10px;
}
.table-td {
display: table-cell;
vertical-align: top;
border-bottom: 4px solid rgb(255, 255, 255);
border-right: 4px solid rgb(255, 255, 255);
padding: 10px;
min-height: 153px;
background-color: rgb(243, 243, 243);
min-width: 301px;
max-width: 301px;
}
.drag-state-placeholder {
background-color: #fbf9ed;
border: 1px dashed rgb(177, 147, 59) !important;
}
.resourceDropLi {
border: 1px solid #e7e7e7;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<div class="view_container">
<div class="data-container" id="board-container">
<div class="table-main h-100">
<div class="table-head">
<div class="table-tr" id="laneContainer">
<div class="table-th">
<label>first</label>
</div>
<div class="table-th">
<label>Second</label>
</div>
<div class="table-th">
<label>third</label>
</div>
<div class="table-th">
<label>fourth</label>
</div>
<div class="table-th">
<label>fifth</label>
</div>
<div class="table-th">
<label>sixth</label>
</div>
<div class="table-th">
<label>seventh</label>
</div>
<div class="table-th">
<label>eirght</label>
</div>
</div>
</div>
<div class="table-body" id="storyContainer">
<div class="table-td ui-sortable">
<div class="resourceDragDrop" draggable="true">
<p>
item f1
</p>
</div>
<div class="resourceDragDrop" draggable="true">
<p>
item f2
</p>
</div>
<div class="resourceDragDrop" draggable="true">
<p>
item f3
</p>
</div>
<div class="resourceDragDrop" draggable="true">
<p>
item f4
</p>
</div>
</div>
<div class="table-td ui-sortable">
<div class="resourceDragDrop" draggable="true">
<p>
item s1
</p>
</div>
<div class="resourceDragDrop" draggable="true">
<p>
item s2
</p>
</div>
<div class="resourceDragDrop" draggable="true">
<p>
item s3
</p>
</div>
</div>
<div class="table-td ui-sortable">
<div class="resourceDragDrop" draggable="true">
<p>
item t1
</p>
</div>
<div class="resourceDragDrop" draggable="true">
<p>
item t2
</p>
</div>
</div>
<div class="table-td ui-sortable">
<div class="resourceDragDrop" draggable="true">
<p>
item f1
</p>
</div>
</div>
<div class="table-td ui-sortable">
<div class="resourceDragDrop" draggable="true">
<p>
item fi1
</p>
</div>
<div class="resourceDragDrop" draggable="true">
<p>
item fi2
</p>
</div>
<div class="resourceDragDrop" draggable="true">
<p>
item fi3
</p>
</div>
<div class="resourceDragDrop" draggable="true">
<p>
item fi4
</p>
</div>
<div class="resourceDragDrop" draggable="true">
<p>
item fi5
</p>
</div>
</div>
<div class="table-td ui-sortable">
<div class="resourceDragDrop" draggable="true">
<p>
item s1
</p>
</div>
</div>
<div class="table-td ui-sortable">
<div class="resourceDragDrop" draggable="true">
<p>
item sev1
</p>
</div>
</div>
<div class="table-td ui-sortable">
<div class="resourceDragDrop" draggable="true">
<p>
item e1
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
enableDragDrop('.table-td', '.resourceDragDrop');
});
</script>
</html>
I want drag an item from one container to another and in the same container as well like jQuery sortable plugin.
when I drag an item from one container to another is working fine but I am able to drop it at the last position of the container.
Here I am facing an issue while I am dragging an item I want to place it any where I want, like between elements or the first position or between other elements.
I don't know how to make it work anyone please help me
Thanks
I think the problem is that you only have 1 element with the ability to accept a drop: the container. That element cannot "tell" any more granular position than you've already done.
You should enable the singular items to handle dragover and/or drop, and create a rule, like: if the element is dropped on another element, then it goes before that element; if it's dropped on the container, then it goes at the end. This rule handles all positions in your list.
function dragStart({
originalEvent: e
}) {
e.dataTransfer.setData("text/plain", e.target.id)
e.dataTransfer.effectAllowed = 'move'
}
jQuery(document).ready(function($) {
$('.draggable').on('dragstart', dragStart);
$('.droppable').on('dragover', function(e) {
e.preventDefault()
$(this).css('background', 'rgba(0, 0, 0, 0.25)')
})
$('.droppable').on('dragenter', function(e) {
e.preventDefault()
$(this).css('background', 'rgba(0, 0, 0, 0.25)')
})
$('.droppable').on('dragleave', function(e) {
e.preventDefault()
$(this).css('background', 'white')
})
$('.droppable').on('drop', function(e) {
// stop propagation so you don't trigger drop more than once
// if the drop zone is inside another drop zone
e.stopPropagation()
const draggedId = e.originalEvent.dataTransfer.getData("text")
// here's the rule I wrote: if it's a column, then
// the dragged item is appended, if it's not a column
// then the dragged item is inserted before
// the item it's dropped on
if (!$(e.target).hasClass('column')) {
$(e.target).before($(`#${ draggedId }`))
$(this).parent().css('background', 'white')
} else {
$(e.target).append($(`#${ draggedId }`))
}
$(this).css('background', 'white')
})
});
#container {
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
background: white;
}
.column {
border: 1px solid black;
display: flex;
flex-direction: column;
padding: 8px 16px;
}
.draggable {
border: 1px solid black;
padding: 8px 16px;
display: block;
background: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="column droppable">
<div id="left-1" class="draggable droppable" draggable="true">
left 1
</div>
<div id="left-2" class="draggable droppable" draggable="true">
left 2
</div>
</div>
<div class="column droppable">
<div id="center-1" class="draggable droppable" draggable="true">
center 1
</div>
<div id="center-2" class="draggable droppable" draggable="true">
center 2
</div>
</div>
<div class="column droppable">
<div id="right-1" class="draggable droppable" draggable="true">
right 1
</div>
<div id="right-2" class="draggable droppable" draggable="true">
right 2
</div>
</div>
</div>
Related
I am using javascript drag and drop API to recreate a similar board from this website: http://en.battleship-game.org/
The below code shows how I tried implementing it
const ship = document.querySelector('.ship');
const cells = document.querySelectorAll('.cell');
ship.addEventListener("dragstart",(e)=>{
e.dataTransfer.setData('text/plain',e.target.id);
});
cells.forEach((cell)=>{
cell.addEventListener('dragenter',dragEnter);
cell.addEventListener('dragover',dragOver);
cell.addEventListener('dragleave',dragLeave);
cell.addEventListener('drop',drop);
});
function dragEnter(e){
e.preventDefault();
e.target.classList.add('drag-over');
console.log('drag enter');
}
function dragOver(e) {
e.preventDefault();
e.target.classList.add('drag-over');
}
function dragLeave(e) {
e.target.classList.remove('drag-over');
}
function drop(e) {
e.target.classList.remove('drag-over');
// get the draggable element
const id = e.dataTransfer.getData('text/plain');
const draggable = document.getElementById(id);
// add it to the drop target
e.target.appendChild(draggable);
}
.row{
display: flex;
}
.cell{
background-color: lightblue;
width: 32px;
height: 32px;
border: 1px solid black;
user-select: none;
position: relative;
}
.ship{
z-index: 2;
display: flex;
position: absolute;
top: 0;
left: 0;
cursor: move;
}
.ship>div{
background-color: rgb(255, 221, 226);
border: 1px solid black;
width: 32px;
height: 32px;
}
.drag-over {
border: dashed 3px red;
}
<div class="row">
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
</div>
<div class="row">
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell">
<div class="ship" draggable="true" id="ship">
<div> </div>
<div> </div>
<div> </div>
</div>
</div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
</div>
<div class="row">
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
</div>
When I drag and drop the 3rd pink box I want it to not drop with respect to the first pink box. How can this be done?
Dashed red border shows wrt to which box the pink div will be placed
As you can see I have a number of dots lined vertically! On scrolling down it works, as one scrolls the next dot gets a class thats chnages the style of the ball, I want the exact same to happen when i scroll up but it is not working! Please any input is appreciated!
Here is a code pen for your reference!
below the html, css and javascript:
var activeMilestone = function() {
var milestoneBalls = $('.dot');
milestoneBalls[0].classList.add("active");
window.onscroll = function() {
milestoneBalls.each(function(i, v) {
var thisBall = $(this);
var nextBall = milestoneBalls[i + 1];
var prevBall = milestoneBalls[i - 1];
var thisPositionTop = thisBall.offset().top + ($(this).parent().height() / 3);
var winScroll = window.scrollY;
if (thisPositionTop <= winScroll) {
nextBall.classList.add("active");
thisBall.addClass("inactive");
}
if (thisPositionTop >= winScroll) {
//this.classList.add("inactive_ball");
}
});
}
}
$(document).ready(activeMilestone);
.wrapper {
height: 1000px;
background-color: wheat;
}
.info_wrapper {
margin-top: 70px;
}
.container {
height: 50%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.dot {
width: 30px;
height: 30px;
border-radius: 20px;
background-color: maroon;
border: solid 4px green;
}
.active {
border: solid 4px yellow;
background-color: red;
}
.inactive {
background-color: maroon;
border: solid 4px green;
}
.text {}
.header {
width: 100%;
height: 50px;
background-color: lightblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header"></div>
<div class="container">
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
</div>
</div>
So this logic performs the same that you were doing already. With the added logic of, if the element should not advance, and we are not the first element, we check to see if the previous ball should be active. And if so, we make it active.
var activeMilestone = function() {
var milestoneBalls = $('.dot');
milestoneBalls.eq(0).addClass('active');
window.addEventListener('scroll', function() {
var activeBall = milestoneBalls.filter('.active');
var activeBallIndex = milestoneBalls.index( activeBall );
var activeBallPositionTop = activeBall.offset().top + (activeBall.parent().height() / 3);
if (activeBallPositionTop <= window.scrollY) {
activeBall.removeClass('active');
milestoneBalls.eq( activeBallIndex + 1).addClass('active');
} else if ( activeBallIndex ) {
var previousBall = milestoneBalls.eq( activeBallIndex - 1 );
var previousBallPositionTop = previousBall.offset().top + (previousBall.parent().height() / 3);
if (previousBallPositionTop > window.scrollY) {
activeBall.removeClass('active');
previousBall.addClass('active');
}
}
});
}
$(document).ready(activeMilestone);
.wrapper {
height: 1000px;
background-color: wheat;
}
.info_wrapper {
margin-top: 70px;
}
.container {
height: 50%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.dot {
width: 30px;
height: 30px;
border-radius: 20px;
background-color: maroon;
border: solid 4px green;
}
.active {
border: solid 4px yellow;
background-color: red;
}
.inactive {
background-color: maroon;
border: solid 4px green;
}
.text {}
.header {
width: 100%;
height: 50px;
background-color: lightblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header"></div>
<div class="container">
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
</div>
</div>
You can use on wheel from jQuery.
$(window).on('wheel',function(e) {
var mov = e.originalEvent.deltaY;
if(mov > 0) {
alert("up");
}else {
alert("down");
}
});
This will sort out your problem regarding detection of scrolling direction.
I have 5 div elements, all with class='item'.
Im catching them with: var x = document.getElementsByClassName("item");
Now I want to make disappear that div, which was mouseovered.
https://jsfiddle.net/LqsLbrco/1/
But it doesn't work as it supposed to do. Because all elements are disappearing, not only this which was hovered.
Edit: My point is that the modal div appear (the pink box) when the item div is hovered. Check out the new jsfiddle: https://jsfiddle.net/LqsLbrco/10/
There's a div behind the blue boxes, I want him to appear when the user hovers the blue box.
If you do it in jQuery, you could just do this.
Modified the markup to accommodate the requirements.
$(function() {
$(".container .item").bind("mouseover", function(event) {
$(event.target).find(".modal").show();
});
$(".container .modal").bind("mouseleave", function(event) {
$(event.target).hide();
})
});
.item {
height: 100px;
width: 100px;
background-color: blue;
display: inline-block;
margin: 5px;
}
.container {
display: inline-block;
}
.modal {
height: 100px;
width: 100px;
background-color: pink;
display: inline-block;
margin: 0px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
When I click on one of the smaller divs on the left (inside of the div with the class "smallitems", I want for the div on the right (with the class "items") to auto-scroll to the appropriate larger div.
HTML:
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col"> 3</div>
<div class="col">4</div>
<div class="col"> 5 </div>
<div class="col">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">5</div>
</div>
JavaScript (with JQuery):
$('.smallitems .col').on("click", function(){
//how use scroll items show
});
Example:
This is before I click on a div in the left div ("smallitems").
I've now clicked on the number 5 (<div class="col">5</div>) in the left div. As you can see the right div has scrolled to the 5th div (<div class="item">5</div>).
Similar to the above, I've clicked on the number 4, and subsequently have had the right div auto-scroll to the 4th div.
see jfiddle http://jsfiddle.net/h7bLK/
This can be done with anchors. If you replace your div.cols with anchor tags and add an ID to your div.items like this:
<div class="smallitems">
<a class="col" href="#item1">1</a>
<a class="col" href="#item2">2</a>
. . .
</div>
<div class="items">
<div class="item" id="item1">1</div>
<div class="item" id="item2">2</div>
. . .
</div>
Fiddle link
BONUS: You'll be able to link externally to the correct item.
CONS: If the content is smaller than the frame it is rendered in, the whole frame will scroll.
According to requirement, no-need to use javascript or jquery. Its done only using css.
<div class="main-container">
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col last-child">3</div>
<div class="col">4</div>
<div class="col">5 </div>
<div class="col last-child">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items">
<div class="scroll">
<div class="item" id="one">1</div>
<div class="item" id="two">2</div>
<div class="item" id="three">3</div>
<div class="item" id="four">4</div>
<div class="item" id="five">5</div>
<div class="item" id="six">6</div>
<div class="item" id="seven">7</div>
<div class="item" id="eight">8</div>
</div>
</div>
</div>
**Css** :
.main-container{
margin: 20px auto;
width:960px;
overflow: hidden;
border: 1px solid #bababa;
padding: 5px;
}
.smallitems{
overflow: hidden;
float: left;
width:330px;
border: 1px solid #bababa;
display: table;
padding: 10px;
}
.col a{
display: block;
padding: 41px 0;
text-decoration: none;
}
.col{
float:left;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 14px;
font-weight: 700;
cursor: pointer;
border: 1px solid #bababa;
height: 100px;
width: 100px;
margin: 0 10px 10px 0;
}
.items{
float: right;
width:580px;
border: 1px solid #bababa;
overflow-y: hidden;
white-space: nowrap;
padding: 10px;
}
.col:nth-child(3),.last-child{
margin-right: 0;
}
.item{
display: inline-block;
text-align: center;
position:relative;
font-size: 14px;
font-weight: 700;
border: 1px solid #bababa;
height: 440px;
width: 180px;
margin: 0 10px 10px 0;
}
$('.smallitems .col').on("click", function(){
var index = $(this).index();
var items = $('.items');
var item = items.children().eq(index);
items.scrollLeft((item.width() - 50) * index);
});
When you add a new div to the items play around with the value of 50.
<div class="container">
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col"> 3</div>
<div class="col">4</div>
<div class="col"> 5 </div>
<div class="col">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items" id="maindiv"> // set id
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">5</div>
</div>
</div>
$('.smallitems').on("click", function(e){
// get click element text and calculate scrollLeft
var scrollLeft = (parseInt($(e.target).text())-1) * 200;
// use jquery animation function
$('#maindiv').animate({scrollLeft :scrollLeft},1100)
});
I have created 2 menus:prod & prod2, I find when the mouse focus on prod2, the background color is changed but when the mouse focus on prod1 the background color doesn't change.
Why it doesn't change?
Styles:
ul.hMenu {
margin: 0;
padding: 0;
z-index: 1;
}
ul.hMenu > li {
margin: 0;
padding: 0;
list-style: none;
float: left;
width:140px;
}
ul.hMenu li a {
display: block;
text-align: left;
text-decoration: none
}
ul.hMenu li > div {
position: absolute;
display: none;
}
ul.hMenu div a {background: yellow;
}
div.lay1{ float:left;}
div.lay1 br{line-height:50%}
.topMenu{font:bold 12px arial;color:#169e39;text-decoration: none;}
.secondMenu{font:12px arial;color:#000000;text-decoration: none;}
.arrow_box {
position: relative;
background: red;
border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(149, 213, 53, 0);
border-bottom-color: red;
border-width: 13px;
left: 10%;
margin-left: -13px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 19px;
left: 10%;
margin-left: -19px;
}
Script:
function showMenu(obj){
var a=obj.children[0];
a.style.color="blue";
var div = obj.children[1];
obj.style.backgroundColor="yellow";
div.style.display="block";
}
function hideMenu(obj){
var a=obj.children[0];
a.style.color="red";
var div = obj.children[1];
div.style.display="none";
obj.style.backgroundColor="";
}
HTML:
<ul class="hMenu">
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod</a>
<div><br/>
<!-- here-->
<div class="arrow_box" >
<div class="lay1">
<div>Manage Content<br> Message </div>
<br><br>
<div>Manage Assignment<br> User Inquiry</div>
</div>
</div>
</div>
</li>
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod2</a>
<div class="arrow_box">
<div class="lay1">
<div>Manage Content<br> Message <br> Help </div>
<br><br>
<div>Manage Assignment<br> User Inquiry</div>
</div>
</div>
</li>
</ul>
<br/><br/><br/><br/><br/>
Test
Problem In JsFiddle
I tested your code and it worked! what is your browser? please place a demo and also add this code as well
a.setAttribute('style','background-color:blue');
some browsers have incompatibility with element.style
give CSS Like this
.arrow_box{ position:absolute; white-space:nowrap}
Check this
http://jsfiddle.net/zz5XJ/2/
try the below HTML:
<body>
<ul class="hMenu">
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod</a>
<div class="arrow_box" >
<div class="lay1">
<div>Manage Content<br> Message </div>
<br><br>
<div>Manage Assignment<br> User Inquiry</div>
</div>
</div>
</li>
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod2</a>
<div class="arrow_box">
<div class="lay1">
<div>Manage Content<br> Message <br> Help </div>
<br><br>
<div>Manage Assignment<br> User Inquiry</div>
</div>
</div>
</li>
</ul>
<br/><br/><br/><br/><br/>
Test
</body>
Please check your HTML :
Because you execute same function for both Pord or Pord2 but the Inner html is different for both li. so function showMenu() works different for both Pord or Pord2:
HTML:
<ul class="hMenu">
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);"><a style="color: red;"
href="javascript:void(0);">prod</a>
<div class="arrow_box">
<br />
<div class="lay1">
<div>
Manage Content<br>
Message
</div>
<br />
<br />
<div>
Manage Assignment<br>
User Inquiry</div>
</div>
</div>
</li>
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);"><a style="color: red;"
href="javascript:void(0);">prod2</a>
<div class="arrow_box">
<br />
<div class="lay1">
<div>
Manage Content<br>
Message
<br>
Help
</div>
<br />
<br />
<div>
Manage Assignment<br>
User Inquiry</div>
</div>
</div>
</li>
</ul>
Try This
UPDATED
Put <br /> before arrow_box div for both li and some change into Javascript:
var div = obj.children[2];
Javascript -
function showMenu(obj){
var a=obj.children[0];
a.style.color="blue";
var div = obj.children[2];
obj.style.backgroundColor="yellow";
div.style.display="block";
}
function hideMenu(obj){
var a=obj.children[0];
a.style.color="red";
var div = obj.children[2];
div.style.display="none";
obj.style.backgroundColor="";
}
Updated Jsfiddle