This is a super weird problem. Probably caused by something stupid in my HTML or CSS. I'm learning javascript currently, and I'm making a super simple webpage that demonstrates the dragging ability of javascript. I have two divs, one that floats left and one right, and a p element that should be below the divs. The problem is, I can't separate them. The border of the p element extends into the divs for some reason. I've tried messing with the height of the p element, but then the border isn't even around the text—it's in the divs. I've also tried separating them with margin-top on the p element and that brings the divs down with it. So the elements seem stuck together and I truly don't know why. Here is my code:
var dropzone = document.getElementById("dropzone");
var dropzone2 = document.getElementById("dropzone2");
var text = document.getElementById("text");
var dragging = null;
var wheredrop = null;
function dragover(e){
wheredrop = e.target;
}
function dragend(e){
wheredrop.appendChild(dragging);
wheredrop = null;
dragging = null;
}
function drag(e){
dragging = e.target;
}
text.ondragstart = drag;
text.ondragend = dragend;
dropzone.ondragenter = dragover;
dropzone2.ondragenter = dragover;
document.body.ondragenter = dragover;
<!DOCTYPE html>
<html>
<head>
<title>Test Drag</title>
</head>
<body>
<div id="dropzone" style="border: 1px solid black; width: 49.85%; height: 300px; float: left; margin-top: -50px;"></div>
<div id="dropzone2" style="border: 1px solid green; width: 49.85%; height: 300px; float: right; margin-top: -50px;"></div>
<p id="text" draggable="true" style="border: 1px solid pink; margin-top: 150px;">This is text to drag.</p>
</body>
</html>
You can add a property into your styles display:inline-block .I think it will solve both your issue it will be below div and the border of p would only take the size of the text
You can solve this by clearing the float. Add this <div style="clear: both;"></div> between second/last div and p element. This will clear the effect of float after the divs.
<div id="dropzone" style="border: 1px solid black; width: 49.85%; height: 300px; float: left; margin-top: -50px;"></div>
<div id="dropzone2" style="border: 1px solid green; width: 49.85%; height: 300px; float: right; margin-top: -50px;"></div>
<div style="clear: both;"></div>
<p id="text" draggable="true" style="border: 1px solid pink; margin-top: 150px;">This is text to drag.</p>
Related
I've tried to show the element div then get the offset and hide it again, also tried to left -9999 in style but neither is working.
var spaceBelow = $(this)[0].getBoundingClientRect().bottom;
console.log("Before: " spaceBelow);
$(this).show();
var spaceBelow = $(this)[0].getBoundingClientRect().bottom;
$(this).hide();
console.log("After: " spaceBelow);
Your proposed solution works fine for me in Vanilla JS.
Code:
function run(){
var test = document.getElementById("test");
test.style.display = "block";
alert(test.getBoundingClientRect().bottom);
test.style.display = "none";
}
<div style="display:none;" id="test"></div>
<button onclick="run();">Run</button>
You can not retrieve the position of a hidden element with "display: none" but you can use the property "visibility: hidden".
Here is the demo of the issue :
console.log($('div > div:eq(0)')[0].getBoundingClientRect().bottom);
console.log($('div > div:eq(1)')[0].getBoundingClientRect().bottom);
console.log($('div > div:eq(2)')[0].getBoundingClientRect().bottom);
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="border: 1px solid black; padding: 50px">
<div style="border: 1px solid grey; height: 100px; width: 100%;"></div>
</div>
<div style="border: 1px solid black; padding: 50px">
<div style="border: 1px solid grey; height: 100px; width: 100%; display: none"></div>
</div>
<div style="border: 1px solid black; padding: 50px">
<div style="border: 1px solid grey; height: 100px; width: 100%; visibility: hidden"></div>
</div>
</html>
You should also use the methods provided by jQuery.
Finding the position of bottom of a div with jquery
I'm using AngularJS to add divs to a section, and I want the div to have a static start width and to grow dynamically when I add more divs, How can I do this?
This code doesn't work:
<body ng-app="plunker" ng-controller="MainCtrl">
<section>
<div ng-repeat="div in divs track by $index">
<div class="square"></div>
</div>
</section>
<button ng-click="add()">add</button>
</body>
section {
border: 1px solid red;
overflow: hidden;
padding: 10px 0;
width: 400px;
}
.square {
width: 100px;
height: 100px;
background: #000;
margin-right: 10px;
float: left;
margin-top: 1em;
}
Link for Plunker:
http://plnkr.co/edit/SqGXBh9zXK2P3LCIVOPG?p=preview
All you need to do is:
for section:
min-width: 450px; //min width of all blocks that inside your section
display: inline-block; //to make width "grow" with content
and for square:
display: inline-block; //instead of float, because float makes height to 0
http://plnkr.co/edit/azOKubY7b371u2Pt7JbD?p=preview
//note: I moved square class to parent node of ng-repeat, but it's not necessary, you just need to add display: inline-block; if you want to have previous structure.
You can accomplish this by also using float:left on the section:
section {
border: 1px solid red;
padding: 10px 0;
float:left;
}
And making the squares direct descendants, which will actually fill up the section:
<section>
<div class="square"ng-repeat="div in divs track by $index"></div>
</section>
Plnkr
I am using CKEditor for content management.I want to position the toolbar to the right side of my page where i have floated image on left and the content on the right side.
Content has to wrap around the image and hence i am floating the image.
This is the only link i can found when i researched but that doesn't help me .
CKEditor inline toolbar position
Can anyone please help?
Here's my jsfiddle link: http://jsfiddle.net/n8WJ2/7/
HTML:
<div class="fl">
<img src="http://www.destination360.com/north-america/us/montana/images/s/great-falls.jpg" height="300" width="300" />
</div>
<div>
<div class="section-title">Section title</div>
<div id="editable">
</div>
</div>
Javascript:
var j = jQuery.noConflict();
j(document).ready(function () {
var editArea = j('#editable');
editArea.attr('contenteditable', 'true');
CKEDITOR.inline(editArea.get(0), {}, '');
});
CSS:
.fl {
float: left;
}
#editable {
min-height: 300px;
border: solid 1px #ccc;
}
Thanks in Advance
Well, you shouldn't be positioning your wrapper to the left. You also have extra </div> tags.
Change your HTML to this:
<div class="section-title">Section title</div>
<div id="editable">
</div>
And since your CKEditor has a margin (from the page margin), you should add a margin to your image.
.fl {
float: left;
margin: 40px;
}
#editable {
min-height: 500px;
border: solid 1px #ccc;
}
Updated fiddle: http://jsfiddle.net/n8WJ2/8/
CKEditor do not allows you to configure the position of the toolbar, there are some workarounds like the one provided by josh.
But I think the best option is to create a container div for your image and editable content, so the CKeditor can adjust the bar to the best position.
Here is the Fiddle
HTML:
<div class="edit-container">
<div id="editable" contenteditable="true">
</div>
</div>
CSS:
.edit-container {
border: solid 1px #ccc;
min-height: 340px;
}
#editable {
margin: 20px;
margin-left: 340px;
}
Here is my contenteditable element:
#editor {
width: 200px;
height: 30px;
border: 1px solid red;
overflow: hidden;
}
<div id="editor" contenteditable="true"></div>
I want it can autosize according to the user's content. I try to listen to keyup event:
editor.addEventListener("keyup", function (){
newheight = editor.scrollHeight;
editor.style.height = newheight + "px";
})
this could work when the div grow higher, but when user delete all content, the div can't be shorter.
How can I let it be autosize?
DEMO here
Add "display: inline-block;" to your CSS and and "min-" to width and height.
Your DIV will automatically grow the innerHTML content.
<html>
<style type="text/css">
#Test
{
display: inline-block;
min-width: 30px;
min-height: 30px;
border: 1px solid red;
overflow: hidden;
}
</style>
<div id="Test" >
Nothing But Bigger
And <br />
Taller
</div>
</html>
Look at this fiddle:DEMO
This is working fine...
you just use the following HTML tag in your code
<div contenteditable="true" style= "border: 1px solid red; min-height:30px;width:200px"></div>
I am trying to create something like this:
But I have problems beacuse it has to be made inside a foreach loop.
This is how I have it right now but it aint like the image I dont know how to do it like my image.
#{
int counter = 1;
#foreach (IconsViewModel items in Model.AllIconsModel)
{
<p>#(counter++)</p>
}
}
CSS:
.box
{
border: 1px solid black;
width: 65px;
height: 65px;
float: left;
}
I will be very thankful if somone would help me.
You have to define html like this:
HTML
<div class="wrapper">
<div class="parent">
<a href="" ></a>
<p></p>
</div>
<div class="parent">
<a href="" ></a>
<p></p>
</div>
</div>
CSS
.wrapper{
text-align:center;
}
.parent{
display:inline-block;
*display:inline;/*For IE*/
*zoom:1;
text-align:center;
}
.box
{
border: 1px solid black;
width: 65px;
height: 65px;
display: block;
}
JS
#{
int counter = 1;
#foreach (IconsViewModel items in Model.AllIconsModel)
{
<div class="parent" >
<p>#(counter++)</p>
</div>
}
}
I think your problem is in the <p> paragraph tag. It includes a new line after each box.
Wrap the two together in a box.
Like this:
#{
int counter = 1;
#foreach (IconsViewModel items in Model.AllIconsModel)
{
<div class="lefty" >
<p>#(counter++)</p>
</div>
}
}
CSS:
.lefty
{
float: left;
}
.box
{
border: 1px solid black;
width: 65px;
height: 65px;
}
The rest is up to you, e.g. to align the text in the middle.
I'm not sure if you need the <p> tag, but you can put the counter inside the <a> tag (I guess that would be just an index for the boxes) and just put a display:block; in the .box CSS to have the tag appear as a square.
To clarify it, you need the following CSS
.box
{
border: 1px solid black;
width: 65px;
height: 65px;
display: block;
}
Edit: Sorry, I just realised the counters underneath the squares. In this scenario, it's easier to wrap the tags with a div wrapper, like this:
<div class="wrapper">
<p>#(counter++)</p>
</div>
And give the wrapper class a text-align:center, like this:
.wrapper
{
text-align:center;
float: left;
}
(All these next to having the .box class above.)
I hope this helps.
Edit: by sandeep's comment, you need to also move the float to the wrapper from the box class.