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...
Related
I have a server application which I am querying for a layout and get the following information - the coordinates of the top left corner of the object and it's width and height. The data is presented as a 2D array.
Using ng-repeat I have tried to iterate over the array as in the following plunk.
This is the HTML template code:
<div ng-controller="PositionDemoCtrl" width="1000px" height="1000px">
<div data-ng-repeat="option in options track by $index">
<div width="{{option[0]}}" height="{{option[1]}}" top="{{option[2]}}px" left="{{option[3]}}px"> </div.
</div>
</div>
and my array in the controller:
$scope.options = [[26,33,36,891],[25,29,72,341],
[17,20,145,0],[1,4,181,288],[17,25,363,0],[11,33,363,262],[30,54,399,944],[23,29,508,524],[17,16,690,236]];
Each sub-array represents the layout data in the order of width, height, top and left.
I find that all my divs are of equal height and the attributes though rendered in the HTML are not applied.
Am I missing something basic here or should I be trying a different approach?
The width, height, left and top aren't meaningful HTML attributes. Although you can set them, they won't have any stylistic effect on the DOM element. Instead, you should set the corresponding CSS attributes. You can do that with the ng-style directive.
<div ng-style="{
'width': option[0] + 'px',
'height': option[1] + 'px',
'top': option[2] + 'px',
'left': option[3] + 'px'
}"></div>
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 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
I am doing a div that needs to display the whole content of a text field and adjust the text size dynamically so that it will not overflow.
To get an idea of the problem, look here http://sandbox.littlegraffyx.com/bible/
You can try entering verses at lower left text box using the format GEN 1:1 for "Genesis 1:1"
My problem is when I try to display long verses, they get truncated. I need to change the size based on how long the current text is. Is there some css that can be applied based on text field size?
As mentioned in the comments, it isn't possible to scale text based on the height of its containing element using pure CSS. But here's a small jQuery script I have used in the past when I needed to achieve what you want. It also adjusts the text size when the user resizes the browser window.
HTML:
<p class="quote">
Really long text goes here...
</p>
CSS:
.quote {
// The largest size to display text at.
font-size: 36px;
}
JS:
$(window).bind('resize',function(e){
scaleQuote();
});
function scaleQuote(){
var quote = $('.quote');
var winH = $(window).height();
// Reset font size.
quote.css('font-size', '');
// If quote is larger than viewport, reduce font-size until it fits.
while (winH < (quote.height())){
var fontSize = parseInt(quote.css('font-size'), 10);
quote.css('font-size', fontSize-1+'px');
}
}
scaleQuote();
Demo: http://jsfiddle.net/eCBmc/2/
You can try something like this. It will set input field to 10 character, and if it's bigger it increase it's size.
http://jsfiddle.net/4qjjf/1/
<html>
<body>
<textarea cols="10" rows="1" id="shit"
onkeyup="this.cols=this.value.length>10?this.value.length:10;"></textarea>
</body>
</html>
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.