javascript - How to make a div be to the right of selected element? -
i have 2 panels, left , right. once user hovers mouse on elements of right panel, new div (called box) should visible right of hovered element.
i design it, problem width fixed position of popup panel changes based on size of screen. not work on jsfiddle did not put there, however, complete code provided works fine in browser.
- please notice both panels in 'container'.
- even if screen size changed red box should stay on right panel. (where shown in screen shots)
- red box wont shown mobile devices due small screen.
positions
left panel right panel element1 |box1 element2 |box2 the box elements overlap right panel.
code
<!doctype html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-7" style="background-color: blue;"> <div class="row"> <div class="col-md-12" style="padding-right: 0;"> <div class="mytarget" style="background-color: white;"> <p>this element 1 of panel left </p> <p>this element 1 of panel left </p> <p>this element 1 of panel left </p> <p>this element 1 of panel left </p> <p>this element 1 of panel left </p> <p>this element 1 of panel left </p> <p>this element 1 of panel left </p> <p>this element 1 of panel left </p> <p>this element 1 of panel left </p> <div id="box" class="col-md-8 hidden-xs" style="display: none; z-index: 1000; background-color: red; border-color: blue;"> <p>this third panel of element 1 need re-positioned.</p> </div> </div> <div class="mytarget" style="background-color: white;"> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <div id="box" class="col-md-8 hidden-xs" style="display: none; z-index: 1000; background-color: red; border-color: blue;"> <p>this third panel of element 2 need re-positioned.</p> </div> </div> </div> </div> </div> <div id="rightpanel" class="col-md-4" style="background-color:green;padding-left: 0"> <p>this panel right</p> <p>this panel right</p> <p>this panel right</p> <p>this panel right</p> <p>this panel right</p> <p>this panel right</p> <p>this panel right</p> </div> </div> </div> <script> $(".mytarget").hover(function() { var temp= $(this).children("#box"); var templeft = $('#rightpanel').offset().left; temp.css({ display : "block", position : "absolute", left : templeft + "px", top : 0 + "px", }); }, function() { $(this).children("#box").hide(); }); </script> </body> </html> i suppose daniel wants
none of elements hovered
element 1 hovered, red box of element 1 shown on right.
element 2 hovered, red box of element two shown on right.
firstly, have 2 elements same id. bad, i've changed them classes. i've removed nasty inline styles , used proper css declaration. i've changed boxes spans. you'll see why in moment.
here's jsfiddle if below code snippet doesn't work.
from understand, want box positioned relative p tags. based upon suggest changing box element span , using jquery clone() function so:
$('.mytarget').on('mouseover', 'p', function () { $(this).parent().children('.box').clone().appendto($(this)); }); $('.mytarget').on('mouseout', 'p', function () { $(this).children('.box').remove(); });.col-md-7 { background-color: blue; } .col-md-12 { padding-right: 0; } #rightpanel { background-color:green; padding-left: 0; } .mytarget { background-color: white; } .box { display:none; z-index: 1000; background-color: red; border-color:blue; } .mytarget p { position:relative; } .mytarget p .box { display: block; position: absolute; left: 100%; top: 0; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> <div class="container"> <div class="row"> <div class="col-md-7"> <div class="row"> <div class="col-md-12"> <div class="mytarget"> <p>this element 1 of panel left</p> <p>this element 1 of panel left</p> <p>this element 1 of panel left</p> <p>this element 1 of panel left</p> <p>this element 1 of panel left</p> <p>this element 1 of panel left</p> <p>this element 1 of panel left</p> <p>this element 1 of panel left</p> <p>this element 1 of panel left</p> <div class="box" class="col-md-8 hidden-xs"> <p>this third panel of element 1 need re-positioned.</p> </div> </div> <div class="mytarget"> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <span class="box" class="col-md-8 hidden-xs"> <p>this third panel of element 2 need re-positioned.</p> </span> </div> </div> </div> </div> <div id="rightpanel" class="col-md-4"> <p>this panel right</p> <p>this panel right</p> <p>this panel right</p> <p>this panel right</p> <p>this panel right</p> <p>this panel right</p> <p>this panel right</p> </div> </div> </div>you can play css positioning of .mytarget p .box position see fit.
edit 1
now you've clarified need image, i've updated code. comment should explain it, , here's fiddle in case snippet doesn't work:
// loop through each box , set width same #rightpanel $('.box').each(function() { var newwidth = $('#rightpanel').outerwidth(); $(this).outerwidth(newwidth); });.col-md-7 { background-color: blue; } .col-md-12 { padding-right: 0; } #rightpanel { background-color:green; padding-left: 0; } .mytarget { background-color: white; position:relative; } .box { display:none; z-index: 1000; background-color: red; border-color:blue; /* position box top right of .mytarger */ position: absolute; left: 100%; top: 0; } .mytarget:hover .box { /* show box on hover */ display: block; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> <div class="container"> <div class="row"> <div class="col-md-7"> <div class="row"> <div class="col-md-12"> <div class="mytarget"> <p>this element 1 of panel left</p> <p>this element 1 of panel left</p> <p>this element 1 of panel left</p> <p>this element 1 of panel left</p> <p>this element 1 of panel left</p> <p>this element 1 of panel left</p> <p>this element 1 of panel left</p> <p>this element 1 of panel left</p> <p>this element 1 of panel left</p> <div class="box" class="col-md-8 hidden-xs"> <p>this third panel of element 1 need re-positioned.</p> </div> </div> <div class="mytarget"> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <p>this element 2 of panel left</p> <span class="box" class="col-md-8 hidden-xs"> <p>this third panel of element 2 need re-positioned.</p> </span> </div> </div> </div> </div> <div id="rightpanel" class="col-md-4"> <p>this panel right</p> <p>this panel right</p> <p>this panel right</p> <p>this panel right</p> <p>this panel right</p> <p>this panel right</p> <p>this panel right</p> </div> </div> </div>
Comments
Post a Comment