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;
}
Related
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>
I have inherited somebody else's problem. The HTML is all DIVs with floats, displays and positioning tweaks. The one thing I cannot change is the structured of the HTML DIVs. Nor do I wish to add any new javascript libraries. But I can add all the CSS I need to the existing DIVs.
Currently 3 DIVs are embedded as:
<DIV id="firstrow"> 1 </DIV>
<DIV id="secondrow">
<DIV> 2 </DIV>
<DIV> 3 </DIV>
</DIV>
Take a look at the graphic below. The problem with this is that as DIV1 grows down, the DIV3 gets bumped down. I wish to keep DIV3 fully justified from the top to bottom (as if STRETCH).
Without getting into how the current code combines DISPLAYS, FLOATS, and POSITIONING -- I think I need to erase all the CSS and replace with some FLEXBOX. But I cannot seem to get the right combination of FLEX properties to make DIV3 behave to stretch (instead of getting bumped down).
Fortunately, this only has to work for Chrome on Desktop (no mobile nor other browsers).
There you go IF width of div 3 is known and fixed value:
https://codepen.io/AugustinF/pen/qYBpmR
.wrapper {
position: relative;
border: 2px solid black;
}
#firstrow {
height: 100px;
margin-right: 200px;
background: green;
}
#secondrow {
}
#div2 {
float:left;
background: blue;
}
#div3 {
width: 200px;
position: absolute;
top:0;
right:0;
height: 100%;
background: red;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
HTML:
<div class="wrapper clearfix">
<DIV id="firstrow"> 1 </DIV>
<DIV id="secondrow clearfix">
<DIV id="div2"> 2 </DIV>
<DIV id="div3"> 3 </DIV>
</DIV>
</div>
Using #Pete solution you can modify the HTML structure using javascript by placing this code at the end of the body tag:
<script>
document.getElementById('firstrow').appendChild(
document.getElementById('div2')
);
</script>
I'm using Jquery slide panels for some images. The problem I'm having is when the slide panel shows it moves the image next to it down. I do not want this to happen. Is there a way to show the slider panel but not move the image next to it? There are questions similar to this but there are no answers to them on the site.
Here's the jsfiddle without the image files:
https://jsfiddle.net/amyspod/q2obknwt/
Here's my code:
<div class="images">
<div class="image1">
<img class="myImg" id="heroimage" src="heros website.jpg" alt="www.heros.com" width="300" height="200">
<div class="panel" id="hero">PSD to responsive website</div>
</div>
<div class="image2">
<img class="myImg" id="oakimage" src="oak website.jpg" alt="www.oak.com" width="300" height="200">
<div class="panel" id="oak">PSD to responsive website 2</div>
</div>
</div>
.myImg {
border-radius: 5px;
cursor: pointer;
display: inline-block;
margin-top: 40px;
}
/*slider panels*/
.image1, .image2{
display:inline-block;
margin-left: 10%;
}
.panel {
padding: 10px;
text-align: center;
background-color: white;
font-size: 20px;
display: none;
}
$(document).ready(function(){
function slidepanel(x,y){
$(x).mouseenter(function(){
$(y).slideToggle("slow");
});
$(x).mouseleave(function(){
$(y).slideToggle("slow");
});
}
slidepanel("#oakimage", "#oak");
slidepanel("#heroimage", "#hero");
});
Inline (or inline-block) elements align to the baseline. Try this:
.image1,
.image2 {
...
vertical-align: top;
}
Demo
Also note that CSS classes, by design, are intended to be reusable. I see no reason to have two of them in this case, and they should have semantic values that describe their use or function.
How can I condition my text to become left-aligned if hits the end of its contained space and has to switch to the next line? Is there something inherent within CSS that can detect it, or does it have to be a JavaScript solution?
Here's the fiddle so you can see how it should behave: https://jsfiddle.net/fj4ddmey/2/
.text.container {
margin: 0 auto;
text-align: center;
width: 350px;
border: 1px solid black;
}
.text.container.two {
text-align: left;
}
<div class="text container">
<p>This is how short sentences should look</p>
</div>
<div class="text container">
<p>This text should be left aligned because it hits a line break</p>
</div>
<div class="text container two">
<p>This is how it should look, but it needs to be a fluid solution</p>
</div>
Use flexbox like that
.container {
display: flex;
justify-content: center;
}
<div class="container">
<p>This is how it should look, but it needs to be a fluid solution</p>
</div>
Here is JSFiddle demo
You can set the <p> as inline block, so that text-align:center on the container will center the <p> tag first, rather than the text. And inline-block has the shrink-to-fit feature, means the width is determined by the content, and never goes beyond the container, with text-align:left, text inside will be left aligned when it wraps.
.container {
width: 350px;
margin: 0 auto;
text-align: center;
outline: 1px solid black;
}
.container p {
display: inline-block;
text-align: left;
outline: 1px dotted red;
}
<div class="container">
<p>This is how short sentences should look</p>
</div>
<div class="container">
<p>This text should be left aligned because it hits a line break</p>
</div>
You can use jQuery to determine the element height, and if its greater than one line, add a class to justify the text appropriately.
Something like this should work:
function countLines(e) {
var elementHeight = e.innerHeight();
var lineHeight = parseInt(e.css('line-height'));
var lines = elementHeight / lineHeight;
return(lines > 1);
}
$('p').each(function() {
if(countLines($(this))) {
$(this).addClass('two'); //class to left justify
}
})
You can see it working here: https://jsfiddle.net/igor_9000/fj4ddmey/1/
I have the following page:
HTML:
<div class="spacer">
<div id="conversation"></div>
</div>
<div class="colorbox">
</div>
<div class="box">
<div id="message"> XXXX </div>
</div>
CSS:
body {padding: 0; margin: 0; overflow: hidden; font-family: Helvetica;}
.box {
background-color: #FFFFFF;
height:200px;
width: 700px;
border-top-style:solid;
border-top-width: 2px;
border-top-color: #EEEEEE;
display: inline-block;
}
.spacer {
background-color: #FFFFFF;
height:40px;
}
.colorbox{
display: inline-block;
height:120px;
width:120px;
border:1px solid #000;
background-color:blue;
}
#message{
margin:5px;
}
JS Fiddle: http://jsfiddle.net/qtv4c10o/5/
I would like to be able to delete the XXX text without moving the line in that border box, but unfortunately that's not working. When I remove it the line moves to look like this:
http://jsfiddle.net/qtv4c10o/6/
I am eventually going to be updating the XXX text using javascript and don't want the border line to move as well.
The reason your line goes under the blue square is:
You gave a fixed width of 700px to the box class.
So if you reduce the size of the window, your line cannot reach 700px: it has to go where there is more space, ie below the box.
Solution: give it a width that can be achieved within the remaining space
The issue was resolved in chat. Here is a working solution:
Let's first wrap colorbox and box with an outer div.
<div class="outer">
<div class="colorbox"></div>
<div class="box">
<div id="message"> XXXX </div>
</div>
</div>
The outer class is so:
.outer {
width:100%;/* the whole width available */
height:120px;/* same height as blue square */
display:table;
}
We'll give outerbox the following property:
display:table-cell;
and add to box:
width: 100%; //the remaining width, actually
margin-top:105px; // blue square height minus height of message
Here is a working fiddle: http://jsfiddle.net/xzxn4rzf/1/