I have multiple eventlisteners to my div: dragstart, dragenter, dragover, dragleave, drop and dragend.
To attach them to my div, I use the body onload function:
function addListeners()
{
var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, function(col) {
col.addEventListener('dragstart', handleDragStart, false);
col.addEventListener('dragenter', handleDragEnter, false);
col.addEventListener('dragover', handleDragOver, false);
col.addEventListener('dragleave', handleDragLeave, false);
col.addEventListener('drop', handleDrop, false);
col.addEventListener('dragend', handleDragEnd, false);
});
}
but this code adds the eventlistener to the whole div. I only want the header of the div to respond to these events:
Now I can click on any part of the div and drag it, but I only want to be able to click on the black part (header) of the div to move it. The black part is a simple header in CSS.
HTML
<body onload="addListeners()">
<div id="columns">
<div class="column" draggable="true"><header>A</header>Textual information inside div A</div>
<div class="column" draggable="true"><header>B</header>Textual information inside div B</div>
<div class="column" draggable="true"><header>C</header>Textual information inside div C</div>
</div>
</body>
A JSFiddle of my full page can be found here.
How can this be done?
You need to add EventListeners to your header elements.
but those event listeners will work only when your headers are draggable=true
so by adding EventListeners to the header and making it draggable=true you can start to drag it.
But there is one problem now, you don't want to drag just the header, but its entire content i.e its parent div. and you want to swap it with the parentNode.innerHTML of the other header(upon which you are dropping).
so, you need to do this:
add events to the header element,
perform all the other operation i.e. grabbing and then swapping innerHTML on the parent of the header i.e. this.parentNode
also when you perform the innerHTML swap, all the event listeners are lost,because now, the very draggable element is recreated, so you will have to call your event binding function addListeners() again.
working fiddle
Related
Using w3css with a pinned navbar (ie enclosed in a with class w3-top) how can I know the height of the navbar (which will vary with screen size) so I can leave this much space at the top of my non-pinned content so the navbar doesn't overwrite content?
My best solution so far is to duplicate the navbar in javascript and insert that at the top of the page without the w3-top class so that there is a hidden element which is always the same size at the top of the page.
...
<div id="pinned_nav" class="w3-top">
<ul class="w3-navbar w3-light-grey w3-border">
<li>
...
<script type="text/javascript">
//Duplicate the nav without pinning it to the top - this means that the other content will adjust to height of pinned nav
var nav = document.getElementById("pinned_nav");
var nav_copy = nav.cloneNode(true);
nav_copy.classList.remove("w3-top");
nav.parentElement.insertBefore(nav_copy, nav);
</script>
...
Since this seemed less error prone than just copy and pasting the HTML block.
But it's still rather clunky and I just wondered if there was a simpler way I was missing.
Other questions like this one which are not w3css specific suggest using a fixed margin to skip a pinned toolbar but I can't see how to determine this margin height with a responsive navbar.
You could use a Javascript script to get the height and append it however you want to use it.
function getHeight() {
var nav = document.getElementById("pinned_nav");
var nav_height = nav.offsetHeight; //append this var where you need to.
alert(nav_height);
};
window.onload = getHeight();
window.onresize = getHeight(); //edit, added for if you resize the page
#pinned_nav {
height: 100px;
/*as example */
background-color: red;
}
<div id="pinned_nav" class="w3-top"></div>
EDT
Added resize event subscription.
See http://jsfiddle.net/u9qj0k9t/10/ for an example.
I'm trying to create a context-menu tied to a generic element on a page. I have no control over how that element is laid out on the page however. The context menu works fine if whatever element wrapping it does not have a position:absolute/relative attached to it, but when it does the popup shows up relative to the top-left corner of the element instead of the page. I realize this is by design, but I was hoping there was some css trick to absolutely position an element on a page REGARDLESS of how how it is contained.
<div>
Comment<br/>
Comment<br/>
Comment<br/>
<div style="position:relative;"> <!-- have no control over this-->
<div id="customUIElement">
<span id="placeHolder">Click Me</span>
</div>
</div>
</div>
$("#placeHolder").bind("click", function(e){
var m = $("#popup");
if(!m.length){
var m = $("<div id='popup'></div>");
$("#customUIElement").append(m);
}
m.css("height",100);
m.css("width",100);
m.css("background-color","#ff0000");
m.css("zindex",9999999);
m.css("position","absolute");
m.css("top", e.pageY);
m.css("left", e.pageX);
m.html("Hello, world");
m.fadeIn("fast");
});
fiddle demo
I would simply not append the popup to that element,
but to the page:
$("#placeHolder").on("click", function(e){
var m = $("#popup");
if(!m.length){
m = $("<div id='popup' />");
$('body').append(m);
}
m.css({
height:100,
width:100,
backgroundColor:"red",
zIndex:9999999,
position:"absolute",
top: e.pageY,
left: e.pageX
}).html("Hello, world").fadeIn("fast");
});
I need little help from you in order to set the position of div dynamically.
I have two divs and I want to position 2nd div below the first one. Currently it is overlapping both of them. And my content of 1st div changes dynamically, how it could be possible. Please help. I believed, it could be done with jQuery, but not able to get idea how can I get the position of first div and set the next div position.
<div id="firstDiv">
</div>
<div id="secondDiv" style="position:absolute;">
</div>
you asked for a jQuery solution, so:
var first_div_top = $("#top_div").offset().top;
var first_div_height = $("#top_div").height();
$("#bottom_div").top = first_div_top+first_div_height;
// or this
$("#bottom_div").css({
"top":first_div_top+first_div_height
});
Try specifying position for element..Like specify position from left and top
#secondDiv{
position:absolute;
left:100px;/*your left position*/
top:150px;/*your top position*/
}
I am creating a division, in which there are some elements. For the example below, there is a sentence inside a division. However when the sentence becomes very long when I insert something through ajax, it seems like the height of the division does not change.
<div style="width:300px;min-height:10px;background:red">
<div style="width:100px;height:inherit;background:blue;float:left"></div>
<a style="width:100px;height:10px;float:left">The length of this sentence is always changing.</a>
</div>
you have to set the height for the div using javascript or using jquery
assign a ID to div e.g
<div style="width:300px;min-height:10px;background:red" id="test">
<a>The length of this sentence is always changing.</a>
</div>
$.ajax({
$(function() {
$("#test").width(100).height(200);//set height or width here
});
});
try to set the height here...
In my page I use ajax loader gif. When the button is clicked the ajax loader is shown, however the text below it moves to upwards and I want them to be constant I mean not to move.
Is there a way to do this? Thanks for help.
It can be seen from here as well:
http://www.dilyurdu.com
function AjaxLoader()
{
document.getElementById("translation").innerHTML="<img src='ajax-loader.gif' />"
$.ajax({
type: "POST",
url: "test1.php",
success: function(response) {
$("#translation").html("hello");
}
});
}
<div class="informationArea">
<h2><span id="infoaream">caballo</span></h2>
<div id="wordDetailArea">
<h2>Translation:</h2><p><span id="translation">dog</span></p>
<h2>Context:</h2><p><span id="context">I have got a dog.</span></p>
</div>
</div>
This is because the height of <p> tag changes according to its content.
The fix is to use a fixed height.
<p style="height: 25px;"><span id="translation">dog</span></p>
Note: As of ajax request the length of your content may not be consistent. So you should choose a highest value for height
What happens is that your #translation span has a height of 18px, however the ajax-loader.gif has a height of 16px causing the jump, spans and p are inline elements and expand and contract depending on the information that's in them
<div id="translation" style="height: 18px;">hello</div>
or
<span id="translation" style="display:block;height: 18px;">hello</span>
should do the trick.