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*/
}
Related
Anybody know how I could wrap the text in reverse order, from bottom to top?
I attached an example image.
[][http://i.stack.imgur.com/RVsIG.jpg]
Instead of breaking the line after it is full and having an incomplete line at the end, I need to brake somehow from bottom to top, so bottom lines are full and top line is incomplete.
I would not recommend using exotic CSS attributes which aren't even in Chrome & Firefox yet. The best cross-browser solution is to handle this in Javascript when the document loads. Here's a sketch of how to do that:
$(function() {
$(".title").each(function(i,title) {
var width = 0;
var originalHeight = $(title).height();
var spacer = $('<div style="float:right;height:1px;"/>').prependTo(title);
while (originalHeight == $(title).height()) {
spacer.width( ++width );
}
spacer.width( --width );
});
});
Working JSFiddle is here: http://jsfiddle.net/zephod/hfuu3m49/1/
6 years later, but fret not! I have found a pure CSS solution!
Turns out you can achieve this result with flexbox, but it's not obvious or very straight forward. This is what I started out with:
I want the header to be "bottom-heavy", the same effect as you describe in the question.
I began by splitting up my string by whitespace and giving them each a <span> parent. By using flex-wrap: wrap-reverse, and align-content: flex-start. You will achieve this:
Oh no! Now the order is messed up! Here comes the trick. By reversing both the order in which you add spans to the HTML and the direction order of flex with 'flex-direction: row-reverse', you actually achieve the "pyramid-shaped" upwards overflow effect you desire.
Here is my (simplified) code, using react and react-bootstrap:
<Row className='d-flex flex-wrap-reverse flex-row-reverse align-content-start'>
{props.deck.name
.split(' ')
.reverse()
.map(word => (
<span className='mr-1'>{word}</span>
))}
</Row>
There is no general css solution for it. You must have to utilize help of any language.
This is one of the solution using PHP:
<?php
$str= "This is what I want to achieve with your help";
$str = strrev($str);
$exp = str_split($str,18);
$str = implode(">rb<", $exp);
echo strrev($str);
?>
Well, if that is depending on the text, then you can try something like a word replacer. For example
var words = "This is what I want to achieve";
var newWords.replace("what", "what <br />"); // note the line break
document.write(newWords);
Here is a fiddle for you: http://jsfiddle.net/afzaal_ahmad_zeeshan/Ume85/
Otherwise, I don't think you can break a line depending on number of characters in a line.
Wrap and Nowrap will be rendered by the client-browser, so you can not force the browser to wrap from bottom to top. but you can do that with javascript or asp.
This is not a formal solution for this problem. But see if this helps.
The HTML CODE
<div id="mydiv">
I can imagine the logic behind the code having to detect what is the last line, detect the div size, and the font size... then measure how many characters it can fit and finally go to the above line and insert the break where necessary. Some font families might make this harder, but trial and error should solve the issue once the basic code is set..
</div>
CSS:
#mydiv
{
width:1000px;
line-height:18px;
font-size:20px;
text-align:justify;
word-break:break-all;
}
Here setting the div width around 50 times that of the font-size will give you the precise result. Other width values or font values might slightly disorient the last line, giving some blank space after the last character.(Could not solve that part, yet).
JQuery:
$(document).ready(function(){
//GET the total height of the element
var height = $('#mydiv').outerHeight();
//Get the height of each line, which is set in CSS
var lineheight = $('#mydiv').css('line-height');
//Divide The total height by line height to get the no of lines.
var globalHeight = parseInt(height)/parseInt(lineheight);
var myContent = $('#mydiv').html();
var quotient = 0;
//As long as no of lines does not increase, keep looping.
while(quotient<=globalHeight)
{
//Add tiny single blank space to the div's beginning
$('#mydiv').html(' '+myContent);
//Get the new height of line and height of div and get the new no of lines and loop again.
height = $('#mydiv').outerHeight();
lineheight = $('#mydiv').css('line-height');
quotient = parseInt(height)/parseInt(lineheight);
myContent = $('#mydiv').html();
}
//get the final div content after exiting the loop.
var myString = $('#mydiv').html();
//This is to remove the extra space, which will put the last chars to a new line.
var newString = myString.substr(1);
$('#mydiv').html(newString);
});
If you already know where you want your breaks to take place just use simple HTML breaks to break your content and have it display the way you want.
<p>This is what<br/>
want to acheive with your help</p>
If you set the breaks manually (and you know where you want them to break) then create them yourself.
You could also try setting separate css width adjustments based on the dimensions of the screen you are seeing the breaking you are not liking and set an #media reference to make the div width smaller to break the text so it doesn't run unevenly across the top of certain size devices.
Use display: inline-block; on the text div.
Is there an elegant way to set breakpoints, of sorts, on height of containers.
Example:
Say you have a div and a min-height is set at say 100px. As soon as the content gets too much it doesn't just grow, but grows by another 100px and when the content eventually gets to the bottom of the 200px extend the height by another 100px.
Has anyone do anything like this before?
I don't think this is possible only using CSS, but you can use javascript:
html:
<div id='div'>hello</div>
javascript:
var div = document.getElementById('div');
var height = 0;
div.style.height = height + "px";
while(div.scrollHeight > div.clientHeight){
height += 50;
div.style.height = height+"px";
}
http://jsfiddle.net/fa7d0/JkT7R/
I found your question very interesting so i took the grow bit literally and created a fiddle where content changes is handled and the containing div is increased either in width or height by a defined threshold.
Fiddle: http://jsfiddle.net/Tvswj/1/
The main idea is that you'll only have to listen for DOM changes and then run a jQuery function as such:
// Trigger the resize function on content change
$(myDiv).bind('DOMNodeInserted DOMSubtreeModified DOMNodeRemoved', function () {
$(this).breakpointResize(threshold);
});
If you find it useful, please go ahead and use it and modify as you want.
Credits for DOM events: How to alert ,when div content changes using jquery
You can use container style height: auto ! Important; and min-height: 100px; width: 100%;
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...
I have a responsive fluid design portfolio with 3 columns. Something is wrong with the CSS that I am having trouble pinpointing.
If I have exactly 3 items on a row, it appears fine. However, if the last item ends on a line with only 1 or 2 columns, then the whole format gets distorted. This can be seen by resizing the browser.
If you can help me pinpoint the CSS fix for this, I will appreciate it GREATLY.
The example page is here: http://bit.ly/KzfN2g
I believe this is the main css style that is the culprit of the problem, however I could be wrong:
.mosaic-block-three {
margin-right:3%;
width:29.3%;
background:url("../img/progress.gif") no-repeat scroll center center #F5F5F5;
border:1px solid #FFFFFF;
box-shadow:0 0 4px 0 #888888;
float:left;
margin:10px 40px 30px 0;
overflow:hidden;
position:relative;
width:291px;
}
whoa, holy registered trademark batman! i would put a
<sup>®</sup>
if i were you :) but to the question at hand...
why do you have so many lists with only one item? you've also got some styles in there that aren't defined, but i think your biggest problem is that you have items within
<li>
that are floated while the containing elements are not.
try floating .portfolio-three-item then clearing the contents within it. having floated elements inside non-floated elements (without using a clearing class or
<br clear="all" />
confuses the browser and it doesn't look as though any of the contents need to be floated.
I was able to accomplish this using simple jQuery to get the height of the image on page load and declare the height in css, then get the height of the image on window resize and redeclare it in css
$j(document).ready(function() {
// Set portfolio image item height after images load,
$j(".mosaic-backdrop img").load(function(){
var portfolioItemHeight = $j(".mosaic-backdrop img").height();
$j(".portfolio-three-item").css("height", portfolioItemHeight);
});
// reset portfolio image item height each time window is maximized
if(screen.width > 1200) {
$j(".mosaic-backdrop img").load(function(){
var portfolioItemHeight = $j(".mosaic-backdrop img").height();
$j(".portfolio-three-item").css("height", portfolioItemHeight);
});
}
// reset portfolio image item height each time window is resized
$j(window).resize(function() {
var portfolioItemHeightReized = $j(".mosaic-backdrop img").height();
$j(".portfolio-three-item").css("height", portfolioItemHeightReized);
});
});
Thank you, #kristina childs, for helping me realize it was that the height was not set properly!
I've got a list with list-style-none which needs to be able to add new items to itself via Ajax and have the background expand appropriately when it does. Adding via Ajax is easy, but every solution I try for the background fails me. I don't know if it's even possible; is it? I'm using a grid like this one:
http://jqueryui.com/demos/sortable/#display-grid
Both WebKit and Firebug are showing me skinny, empty bars when I hover over the enclosing divs and/or the enclosing ul tag. It appears that the minute you set a list loose with list-style-none and float:wherever, you give up control over its background. But that can't be right.
This is something I've run into a number of times. The problem is that floated elements aren't part of the normal box model, so they don't cause their parent elements to expand unless their parent elements are also floated. So if possible, float the ul or containing div.
Edit:
See quirksmode for another css-only workaround.
Could you provide a sample of your code? Also, why does the list have display:none set?
For instance, should be as simple as this:
HTML:
<ul id="dest"></ul>
JS:
// Simplified example, most likely wrapped in $.ajax
// This is the AJAX response function
function(data, response) {
var items = json.parse(data);
$.each(items, function() {
// Assumes item has a name property
$('#dest').append($('<li>' + this.name + '</li>'));
});
}
Should be just that simple. You shouldn't need the hide the list initially, as you can simply append list items and have the display update appropriately.
Hope that helps.
You need to explicitly set the width and height for the area.
Check out this link for Horizontal Scrolling: http://valums.com/scroll-menu-jquery/
Here is the script:
$(function(){
//Get our elements for faster access and set overlay width
var div = $('div.sc_menu'),
ul = $('ul.sc_menu'),
// unordered list's left margin
ulPadding = 15;
//Get menu width
var divWidth = div.width();
//Remove scrollbars
div.css({overflow: 'hidden'});
//Find last image container
var lastLi = ul.find('li:last-child');
//When user move mouse over menu
div.mousemove(function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
div.scrollLeft(left);
});
});
Basically, you need to update the ulWidth and divWidth when you add the new item.
Then just set the background image to repeat horizontally and you should be set.
ul.sc_menu {background:transparent url(image.png) repeat scroll 0 0;height:100px}
Note: You will need to set the height; otherwise you will not see the background because the li are floated.
For dealing with the float element, maybe you should know it's characteristic, gotcha, and how to deal with it.
See the links below, it also have demo, so you can understand the concept:
http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
http://aloestudios.com/2009/12/goodbye-overflow-clearing-hack/
and
http://aloestudios.com/misc/overflow/