Problem setting parent div width the same as child div width - javascript

I have the following markup:
<div class="head_title">
<img src="/path/to/image.png">
<h1 id="entryTitle">
<!--Cufon Font-->
</h1>
</div>
I want the img element to stretch to the full width of the 'head_title' div. The trouble arrives when I try and set the 'head_title' div to be as wide as the 'entryTitle' child h1 tag. Here's the CSS I'm using:
.head_title {
display:block;
float:left;
position:relative;
height:40px;
}
.head_title img {
height:100%;
width:100%;
display:block;
}
.head_title h1 {
color:#fff;
position:absolute;
top:0;left:0;
z-index:1;
padding:0 0 0 5px;
}
The underlying img element contains the background for the parent div - I don't want to use the CSS background-image attribute because the parent div's width will constantly be changing and I don't want it to cut off a static background image.
I tried using JavaScript's outerWidth and jQuery's .css("width") and .width() methods but nothing seems to work.

These elements have a width of 0px, because you assigned the float:left property to div.head_title. Because of this float definition, the div doesn't stretch to the full width.
The image has a width of 100%, 100% of zero is still zero. The h1 element is positioned absolutely, so that element doesn't increase the width either.
To increase the width of div.head_title, you have to specify a width (width:!00%, for example), or remove the float property.

or you could also do this....
<div class="head_title">
<img src="/path/to/image.png">
<h1 id="entryTitle">
<!--Cufon Font-->
</h1>
</div>
.head_title{
float: left;
position:relative;height:40px;
}
.head_title img {
position:absolute;top:0;left:0;z-index:-1; width: 100%; height: 100%;
}
.head_title h1{color:#999;padding:0 0 0 5px;}
sample here

Related

Dynamic equal height responsive image gallery

I need to display thumbnails of various images of different sizes. I wanna display them in equal height and width of responsive divs. But the problem is the images are of different sizes. I have also tried jquery but couldn't reach to a solution.
HTML Code:
<div class="gallery">
<div class="pic">
<img src="http://img.autobytel.com/car-reviews/autobytel/11827-cool-luxury-cars/2015-Tesla-Model-S-90D-black-profile-in-front-of-modern-house.jpg">
</div>
<div class="pic">
<img src="https://imgct2.aeplcdn.com/img/800x600/news/Nissan_XTrail_2015/nissan-x-trail-1.jpg">
</div>
<div class="pic">
<img src="http://media.caranddriver.com/images/14q3/612034/best-sports-cars-2015-editors-choice-for-premium-and-exotic-sports-cars-car-and-driver-photo-634605-s-450x274.jpg">
</div>
</div>
CSS:
.gallery{
max-width:800px;
overflow:hidden;
width:100%;
}
.gallery .pic{
width:33%;
float:left;
max-height:200px;
height:100%;
}
.gallery img{
height:100%;
width:100%;
}
Jquery
var maxHeight = 0;
$('.gallery .pic').each(function(index){
if ($(this).height() > maxHeight)
{
maxHeight = $(this).height();
}
});
$('.gallery .pic').height(maxHeight);
Fiddle: https://jsfiddle.net/1rooxnko/
Note: I am looking for a solution that is without fixed height to pic class.
try this updated responsive code may be it can help you
JSfiddle
HTML:
<div class="gallary">
<div class="pic">
<img src="http://img.autobytel.com/car-reviews/autobytel/11827-cool-luxury-cars/2015-Tesla-Model-S-90D-black-profile-in-front-of-modern-house.jpg">
</div>
<div class="pic">
<img src="https://imgct2.aeplcdn.com/img/800x600/news/Nissan_XTrail_2015/nissan-x-trail-1.jpg">
</div>
<div class="pic">
<img src="http://media.caranddriver.com/images/14q3/612034/best-sports-cars-2015-editors-choice-for-premium-and-exotic-sports-cars-car-and-driver-photo-634605-s-450x274.jpg">
</div>
</div>
CSS:
.gallary{
width:100%;
overflow:hidden;
display:flex;
}
.pic{
width:33.33%;
}
.gallary img{
width:100%;
height:100%;
}
The problem I could find was in your .gallery element, you've set the max-height, but you also need to specify height too.
have a look at this https://jsfiddle.net/ya2za6d1/
Change this
.gallary .pic{
width:33%;
float:left;
max-height:200px;
height:100%;
}
to this
.gallary .pic{
width:auto;
float:left;
max-height:200px;
}
EDIT: I've seen that your code works. But also that images looks distorted.
One suggest that I can give you is to use (if you can) background images to avoid this problem.
You can do this with flexbox (no js required) as follows:
.gallary{
width:100%;
display: flex;
}
.pic {
flex: 1;
}
.pic img {
width: 100%;
}
I've set .gallary's width to 100% so that we can see it's responsive.
As gallery is the parent element I've set this to flex.
I've then added flex: 1 to each .pic element so that they are each the same width. Finally, I've set the width of each image to 100% so that they scale to fit the width of each .pic element.
Using flexbox like this means that each child element (in this case the .pic elements) is automatically the same height.
I've set up a codepen http://codepen.io/alexmagill/pen/ggGVwL with some background colours in place so that you can play around with it and get a sense of what is happening.
Support for it is pretty solid now but you might want to add in fallbacks for older browsers.
Please refer this link https://github.com/liabru/jquery-match-height
1.Apply match height class for the outer div of the image.
2.Then apply this css for the image
<style>
.img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
}
</style>

How do I make an inline element take up space when empty?

I have an h1 and h3 tag that will erase itself and type, using theater.js. The problem is that when it erases itself to empty, the height of the div it's in get smaller, then snaps bigger when it has content again.
I want to make the h1 and h3 tag (or change the tag completely) keep its height even while empty.
Any idea?
Just wrap your h2/h3 tag in a div with display: inline-block; like this:
<div class="header2"><h2>ABCD</h2></div>
and then add this to your css:
.header2 {
min-width: 100px;
width: auto;
min-height:45px;
background-color:#333;
color:#FFF;
display:inline-block;
padding:10px;
}
Here's a jsfiddle of two h2 tags with the above properties: https://jsfiddle.net/AndrewL32/e0d8my79/21/
two possible solutions:
1) you can set min-height to the div
For example:
div{min-height:50px;}
2) or to set min-height of h2 and p1 tags
h1,p1 {
min-height:5px;
}
Demo for 2nd approach :
h1{
background:yellow;
min-height:5px;
}
<h1></h1>
Note: as paulie_D mentioned, h1 ,p and div are block level elements by default
You may use a pseudo element to force an empty space within the element and swip it away with text-indent
h1.fixed:before {
content:' ';
display:inline-block;
width:1em;
}
h1 {
background:lightgray;
box-shadow:inset 0 0 0 1px;
}
h1.fixed {
text-indent:-0.8em; /* swip off the pseudo element */
}
<h1 contenteditable="true"></h1>
<h1 class="fixed" contenteditable="true"></h1>
else, use the :empty pseudo-class
h1:empty:before {
content:'|';
}
<h1 contenteditable="true"></h1>

Overflow hidden property is not working with parallax scrolling

The overflow hidden property is not working as expected when trying it with parallax scrolling.
I am trying to accomplish parallax scrolling with JavaScript everything should work fine but when i try to set the overflow to hidden the image still appearing outside the div
Here is the HTML
<div id="page2">
<p id="bb">The title</p> //Some title
<div id="bg"></div> //Blue box in front of the image(design decision)
<img src="img/Food.jpg" alt="prlx" id="prlx"/> //The image which has the proprety
</div>
Here is my JavaScript eventListener and the function :
window.addEventListener("scroll",func,false);
function func(){
prlx_lyr_1 = document.getElementById("prlx");
prlx_lyr_1.style.top = (window.pageYOffset/4)+"px"
}
And this is my CSS for the image which i am trying to hide the overflowing parts :
#page2 img{
position:relative;
top:-300px;
}
And this is the CSS of the div which contain the image
#page2{
overflow:hidden;
height:250px;
}
There is some extra CSS for the #bg
Update:
here is a
You can notice that the overflow is not hidden the container div is the blue side in the page
Here is a js fiddle
So the issue is position: fixed breaks the element out of the flow of the document and unlike absolute it can't be contained by using relative on a parent. Instead you should set this image as a background set to fixed on a div that is position: absolute:
HTML
<div id="page2">
<p id="bb">The chef</p>
<div id="bg"></div>
<div id="bg-image"></div>
</div>
CSS
#page2{
overflow:hidden;
height:250px;
position: relative;
}
#bg{
background: #33c1c9;
height:250px;
width:100%;
position:relative;
z-index:74897;
opacity:0.4;
}
#bg-image{
background: url("http://im47.gulfup.com/1Y5tcL.jpg") no-repeat fixed;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
FIDDLE

make textarea height expand to container div's height (on resize)

Is there a way to make these two textareas that are floated next to one another always be the same height. The height of their container, which expands when one of them is resized. I've tried putting them in a container div and setting their height to 100%. I've tried making a jquery function to resize them (you can see it commented out in the fiddle) which failed.
http://jsbin.com/IkESUli/6/edit
How can I make them always the same height after a resize?
textarea{
min-height:150px;
float:left;
display:inline-block;
overflow:auto;
}
#t2{
width:30px;
overflow:hidden;
text-align: right;
white-space:nowrap;
}
div.container{
min-height:150px;
border:1px solid black;
display:inline-block;
}
This will works:
$(".t").mouseup(function(){
$(".t").not($(this)).css("height", parseInt($(this).css("height"),10));
});
You could use mousemove instead of mouseup for "real time" effect.
try setting textarea's height to 100% and container's height to 150px. when textarea is in 100% it will automatically fits into your parent div's height, hope this helps.
textarea {
height: 100%;
width: 100%;
display: block;
}
div.container{
height: 150px;
min-height:150px;
border:1px solid black;
display:inline-block;
}
You can use javascript to implement the following scenario. Once the parent element changes its dimentions, for instance, height, you call the functios (ES6 Javascript version):
const makeDimensionsEqual = (someTextareaSelector, someParentElementSelector) => {
document.querySelectorAll(someTextareaSelector)[0].style.height =
document.querySelectorAll(someParentElementSelector)[0]
.getBoundingClientRect().height + "px"
}
const someTextareaSelector = '...'
const someParentElementSelector = '...'
makeDimensionsEqual(someTextareaSelector, someParentElementSelector)

How do I keep an image inside a div with a set width and height, but keep the rest of the image hidden?

It's kind of difficult to word... So I made a picture!
(source: tumblr.com)
I tried giving the div that has a set width and height overflow:hidden; but that didn't work... I searched all over and I probably just didn't word it right.
I gave the tag 'javascript' just because this may require javascript, if it doesn't please comment and tell me to remove the tag! Thankyou!
HTML
<div class="trigger" id="photoTile">
<img id="photoSmall" src="{PhotoURL-500}">
<h5>Photo</h5>
{MonthNumber} {DayOfMonth} {Year}
<br>
{block:NoteCount}{NoteCount} <img
src="http://static.tumblr.com/ux4v5bf/2Z0lf9580/heart.png">{/block:NoteCount}
</div>
CSS
.trigger {
margin:0 20px 20px 0;
float:left;
background:#6f7f7a;
width:115px;
height:105px;
padding:5px;
}
#photoTile {
width:115px;
height:105px;
overflow:hidden;
background:none;
}
#photoSmall {
opacity:0.4;filter:alpha(opacity=40);
position:absolute;
z-index:-1;
}
Putting the image in a <div> with fixed height and width, and "overflow: hidden", most definitely will crop an included <img>.
edit Here is a jsfiddle showing an image much larger than 100x100 in a 100x100 <div> styled with "overflow: hidden". Here's the CSS for the <div>:
#w { height: 100px; width: 100px; overflow: hidden; }
I didn't have to do anything interesting with the <img> at all; it's just lexically nested inside the <div>.

Categories