I have this JS code that I use to create a new div (I create several, dynamically). I want my text to be in the centered vertically and aligned to the left side of the div. Any suggestions on what to do? Here is my code:
var leftDiv = document.createElement("div"); //Create left div
leftDiv.id = "left"; //Assign div id
leftDiv.setAttribute("style", "float:left;width:70%;vertical-align:middle; height:26px;"); //Set div attributes
leftDiv.style.background = "#FFFFFF";
leftDiv.style.height = 70;
user_name = document.createTextNode(fullName + ' '); //Set user name
One other thing. This code will center the text horizontally and it seems to gravitate to the top of the div instead of the middle.
If the height of div is constant (seems like it is 70px) than you can use line-height: 70px; to render any text vertically centered.
<style type="text/css">
#myoutercontainer { position:relative }
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
...
...
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
Set margin-top:-yy where yy is half the height of the child container to offset the item up.
Source : http://www.vanseodesign.com/css/vertical-centering/
It is not possible to vertical align text inside div with out making it table cell, or you have to insert a span inside div & give it 50% height.
Check below code.
http://jsbin.com/agekuq/edit#preview
<div
id="left"
style="background:red;
display:table-cell;
width:150px;
height:150px;
vertical-align:middle;"
> My full name</div>
Related
Im trying to right align the Title on top of the last Div. As per the below image , the text should be on top of "Hello 5 / 4 / 3". When we resize the window button will float which is working and the text should be always be on top of the last button.
Unsure why the wrapper div is adding extra space to the right of the button and not aligning to the edge of the right most div. Extra space is coming even if the Title is not there , any insights about Div width calculation would be great.
I tried calculating the number of buttons in the top row using javascript and added offset to the title , but it seems tedious and not aligning at certain resolution.
http://jsbin.com/nonexegiqa/embed?html,css,console,output
HTML
<div class="wrapper">
<div class="title">Title</div>
<div class="clear"/>
<div class="btn">Hello 1</div>
<div class="btn">Hello 2</div>
<div class="btn">Hello 3</div>
<div class="btn">Hello 4</div>
<div class="btn">Hello 5</div>
<div class="btn">Hello 6</div>
<div class="clear"/>
</div>
CSS
.wrapper{
border:solid gray 1px;
}
.btn{
width:96px;
height:46px;
float:left;
border:solid gray 1px;
margin-left : 11px;
margin-bottom : 11px;
text-align:center;
}
.title{
float:right;
}
.clear{
clear:both;
}
You need to find count of .btn in first row when page resizing, Then set position of .title to last .btn in first row.
$(window).on("resize", function(){
var parWidth = $(".wrapper").innerWidth();
var chiWidth = $(".wrapper .btn").first().outerWidth(true);
var childCount = 0;
while(parWidth >= chiWidth){
parWidth -= chiWidth;
childCount ++;
}
var left = $(".btn:eq("+(childCount-1)+")").position().left;
$(".title").css("margin-left", left);
});
To better understanding, i create demo but because you can't change demo page size in here, i create it in JSFiddle.
yes, display:flex may be very helpful. As a work around you could set the width of the .wrapper to 70vw, or something similar. The .wrapper div width is creating the "extra space."
Please refer this http://54.66.151.166/
=> Go to Canvas->Split Image->Select Size and Shape.
=> Refer various sizes given and proceed for next step.
=> Upload any image and check for the canvas effect for various sizes.
If I to develop the same kind of functionality with the using only jquery or canvas, does any have idea how can I implement this?
we are going to make an image splitting effect
HTML
<!--START THE IMAGE PARTS HOLDER-->
<div class='images_holder'>
<!--INSERT THE SAME IMAGE IN 2 DIVS, THEY BOTH HAVE image_div CLASS AND left OR right CLASS DEPENDING ON POSITION-->
<div class='image_div left'><img class='box_image' src='img.jpg' style='width:300px'/></div>
<div class='image_div right'><img class='box_image' src='img.jpg' style='width:300px'/></div>
<!-- WE USED CSS FLOAT PROPERY, SO WE NEED TO CLEAR NOW-->
<div class='clear'></div>
</div>
<!--END THE IMAGE PARTS HOLDER-->
<!--START THE TEXT-->
Just some dummy text.
<!--END THE TEXT-->
</div>
<!--END THE MAIN CONTAINER-->
CSS
.box_container{
position:relative; /* important */
width:300px; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */
height:220px; /* important */
overflow:hidden; /* hide the content that goes out of the div */
/*just styling bellow*/
background: black;
color:white;
}
.images_holder{
position:absolute; /* this is important, so the div is positioned on top of the text */
}
.image_div {
position:relative; /* important so we can work with the left or right indent */
overflow:hidden; /* hide the content outside the div (this is how we will hide the part of the image) */
width:50%; /* make it 50% of the whole images_holder */
float:left; /* make then inline */
}
.rightright img{
margin-left: -100%; /* 100% is in this case 50% of the image, so this is how we show the second part of the image */
}
.clear{
clear:both;
}
JQUERY
$(document).ready(function() {
//when the user hovers over the div that contains our html...
$('.box_container').hover(function(){
//... we get the width of the div and split it by 2 ...
var width = $(this).outerWidth() / 2;
/*... and using that width we move the left "part" of the image to left and right "part"
to right by changing it's indent from left side or right side... '*/
$(this).find('.left').animate({ right : width },{queue:false,duration:300});
$(this).find('.right').animate({ left : width },{queue:false,duration:300});
}, function(){
//... and when he hovers out we get the images back to their's starting position using the same function... '
$(this).find('.left').animate({ right : 0 },{queue:false,duration:300});
$(this).find('.right').animate({ left : 0 },{queue:false,duration:300});
//... close it and that's it
});
});
I have 2 Divs, side by side. By default, only the left one shows, and it centered in the page content horizontally. But when the user click's a button on the first div, it would slide to the left, and show the other div.
I already have the visibilty setup. But The problem is, I need my js to detect that the div's display:none attribute, and adjust the first div accordingly (float:left or float:right)
If possible, a fiddle would be nice also.
This should work for you if I got your problem completely:-
HTML
<div id="left">
<button onclick="showDiv()">Show</button>
</div>
<div id="right">
</div>
JS
function showDiv(){
var leftDiv = document.getElementById('left');
var rightDiv = document.getElementById('right');
leftDiv.style.float = 'left';
rightDiv.style.float = 'right';
rightDiv.style.display = 'block';
}
CSS
div{
width:200px;
height:200px;
background:gray;
margin:10px;
}
#left{
float:right;
}
#right{
display:none;
}
Fiddle
I am looking for a solution to re-scaling the contents of a div with a fixed width and height.
Right now i have a div like so :
<div id="editor_preview" style="width:360px !important;
color:gray;
margin-top:40px;
position:absolute;
overflow:auto;
height:190px !important">
</div>
I am loading dynamic HTML content into this div, by the use of CKEditor ( http://ckeditor.com/ )
Since the input text may contain different font sizes, I am looking for a way to downscale the contents on overflow.
The way I'm trying right now is using javascript and the zoom function like so :
document.getElementById(ev.editor.name + '_preview').innerHTML = ev.editor.getData();
var container = document.getElementById(ev.editor.name + '_preview');
var i = 99.9;
if (container.scrollHeight > container.clientHeight) {
while (container.scrollHeight > container.clientHeight) {
container.style.zoom = i + "%";
i -= 0.1;
}
}
However ; this also decreases the size of the div to match the content. So in short what i want is :
Keep the div size
Downscale the content
No overflow
Just a shot in the dark here. Seems like you're doing things above my skill level, but what about using rem? Then controlling it with font-size: 50%;?
CSS
body{
font-size: 1rem;
}
#editor_preview{
font-size: 50%; // control text size here
}
i have a link which is placed ontop of a site. when it is clicked , a DIV will be shown. the div will sit just below the LINK. if the link position from left is 215px , the DIV position from left will also be 215px. How can i track the position of the link to determine the position of the DIV so it could stick to it.
Link
<div id="float" style="display:none;">Some text</div>
jQuery:
$('#link').click(function(){
$('#float').css('display','block');
});
Thanks.
The best way to stick something absolute positioned to something on the page is to wrap it with relative positioned element.
You can try this:
<div style="position: relative">
Link
<div id="float" style="display:none; position: absolute; top: 10px; left: 0;">Some text</div>
</div>
Then you can position your floating element as you wish relative to the corners of the wrapping div (or other wrapping element) using left, top, right or bottom.
Serious advantage of that approach is that floating div will always be tied to the parent even if the window size is changed.
JQuery has built in functions for getting positions of elements.
See Offset for position related to document, or Position for position related to element's parent
Example to get the position of the link element...
$('#link').click(function () {
var link = $(this);
var linkOffset = link.offset();
var xPos = linkOffset.left;
var yPos = linkOffset.top;
$('#float').css('display', 'block');
});
<style>
#float {
display:none;
position:absolute;
border:1px solid red;
padding:5px;
margin:0;
}
</style>
Link
<div id="float">Some text</div>
<script>
$(function() {
$("#link").click(function() {
$("#float")
.css("left", $(this).offset().left)
.css("top", $(this).offset().top + $(this).height())
.show();
});
});
</script>