manage selected jquery elements based on their relative child - javascript

i am showing content with php and mysql and there is a field for a photo
which has a % kinda width and i set the height with jquery to have a square
and then give the images with bigger width a bigwidth class and the ones with bigger height a bigheight class so i can give them diffrent styles the one with the bigger width gets 100% width and auto height
and the one with the bigger height gets height 100% and auto width
but with the bigger width images there is a vertical alignment problem for the photos and i cant use display table cell so i though to use padding top with jquery to fix this but since images with bigger width have diffrents ratios there should be diffrent amount of padding for each
so i want to select the parent of each bigwidth photo then get its child height then set the needed padding but i dont know how
<div class="imgpro"><img src="<?php echo("admin/uploads/".$rowpro["propic"]) ?>" class="<?php $size=getimagesize("admin/uploads/".$rowpro["propic"]);
$wsize=$size[0];$hsize=$size[1];
if($hsize>$wsize){echo("bigheight");}
else{echo("bigwidth");}
?> "/>
</div>
var a=$(".product .imgpro").css("width");
$(".product .imgpro").css("height",a);
.product .imgpro img.bigheight{height: 100%;width: auto;}
.product .imgpro img.bigwidth{width: 100%;height: auto;}
im trying to select all images parents and give them padding based on the image size in them

Related

Element in container with overflow:hidden; has width same as parent, despite the overflowed width being wider

Given:
<div class=gallery>
<div class=slider>...</slider>
</div>
with gallery having main css as overflow:hidden; positon:relative; and as an example width:1000px;
The slider then has "wider" content, stretching far beyond the width of the gallery which has a set width to 1000px here.
The problem is, calculating the slider width (using jQuery('.slider').outerWidth()) gives the same width as .gallery element, when overflow:hidden is used.
The only way to get slider to show it's actual width, is to use position: absolute on .slider
Problem with that is that now, .gallery will no longer expand it's height.
I have to somehow manually calculate (and keep track of) height to set on gallery. I do not know the height in advance of the contents of .slider.
Frankly, I don't get why .slider width can not be calculated unless position:absolute is used.
There might be a way to iterate child elements of .slider and possibly calculate the width of each child, but risks are the overflown children have width set to zero as well.
Anyone know a good workaround for this?
You could set slider width to
width:100%
with that, it will never go out of its parent width
slider.scrollWidth seems to do the trick and returns the same value as:
var total = 0;
$slider$.children().each(function(i, e){
e = jqr(e);
total += e.outerWidth(true)
})
return total;

maintain the height of the content floating right same as the sibling div floating left, responsive

I have the below structure:
<div class="wrapper1">
<div class="left">some img here with 100% width and some text which dispaly on hovering over the image</div>
<div class="right">some content here</div>
</div>
<div class="items">
<ul><li></li></ul>
</div>
The above layout is used for a responsive site. so on resizing the window or on page load on different devices the content in the right div should always remain of the same height as that of the left div.
Also, I have to append a link "more >>" responsively where the last character of the content in the right div ends.
I have used overflow hidden property for the right div and I am trying to give some height to the right div based on the window width using media queries. Have tried different things but since the text amount changes responsively it is becoming difficult to append more link to the last character.
Also, i tried using jquery/jscript to detect the height of the left div on page load so as to set the height of the right div same as that using .outerheight() property but on initial load of the page I am not able to get the height in pixels since the width of the image inside the left div is set to 100%.
Also, there are 2 main issues here,
1)I set the height of the left div same as that of the right div responsively. Here the extra content to be displayes in the right div should always be hidden.
2) append more link just where last last charcter of the last visible line of the content on the left div is responsively.
Could anyone please suggest some solution.
With flexbox the columns share the same height automatically, without any javascript.
.wrapper {
display: flex;
}
.left {
background: yellow;
flex: 1;
}
.right {
background: red;
flex: 1;
}
<div class="wrapper">
<div class="left">some img here with 100% width and some text which dispaly on hovering over the image</div>
<div class="right">some content here</div>
</div>
I believe all your problem will be solved if and only if you use bootstrap css rules the grid system and furthermore make a class with specific height and assign it to the div . And more advice get familiar with media query in css3
Create a div with relative position for appending links and make it in the bottom of the container div

HTML/JavaScript/CSS/PHP code to update width % to height in pixels [duplicate]

This question already has answers here:
Change height on div with javascript
(4 answers)
Closed 7 years ago.
I don't know which will be needed if not all but here's my problem.
I want to make 5 div squares spanding across the page. Obviously I would make the width 20% for each but if I change the height to 20% then it won't be a square. I need a command that will find out how many pixels the width is then change the height to that number. I need it to update live. It's for an article page on my website.
Also I'm a newbie at Javascript & PHP but I'm fairly good at HTML & CSS
If you have an easier way to do this please do tell :)
Thanks for helping out a junior coder!
width = jQuery('#container div').width();
jQuery('div').css('height', width);
https://jsfiddle.net/b8aw4jbv/1/
it can be done by css only using padding-bottom:
.square{
width:20%;
padding-bottom:20%;
background-color:green;
display:inline-block;
position:relative;
}
.square .content{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
}
<div class="square">
<div class="content">
Lorem ipsum
</div>
</div>
its responsive, and no need to run js or load jQuery
EDIT: padding with percentage value calculate its value from parent's width so padding-bottom take 20% of parent width. .content need position:absolute and be stretched to whole div to ignore this padding and show content in it on proper place
You can do this with javascript jquery like:
$('div').each({
$(this).height($(this).width());
});
What does this code:
- it loops over the divs in your page
- it sets the height of the div to the width of the div (in pixels)
So, basically, what you want to do is having divs with an aspect ratio of 1:1.
It is possible to accomplish that with only CSS.
Here's how:
http://codepen.io/DisColow/pen/pJKZOb
I simply set all my squares to have a width and to be floating left.
Then, I add a :before pseudo element for each of those squares which has the following CSS rule:
padding-bottom: 100%;
When you specify a percentage to a padding-bottom, it's relative to the parent container width. Therefore, I simple tell my square to be as tall as it is wide.
Hope it helped.
You then can write your content inside the square-inner div.
$( "div" ).each(function() {
var divWidth = $(this).width(); // Get Width
$(this).height(divWidth); // Set height
});

Am I stuck with forcing fixed image size for image tags?

I have a website that contains a side bar and sometimes an image of a very large size (about 800 pixels wide) but I scripted the code so that if a screen resolution is too small, the image shrinks and scales into the small space perfectly according to multiple browsers I tested the site on. I tested the site with the demo version of sortsite by powermapper at:
http://try.powermapper.com/Demo/
It then goes on to complain that "Omitting IMG WIDTH or HEIGHT attributes means page text jumps about as images load. Usability.gov 14:3"
I understand that and I try to include those attributes, the image does not scale correctly.
This is the CSS I use on the image itself to scale it if I had a monitor with a max screen width of 800 pixels:
#media screen and (max-width: 600px){#X IMG{width: 100%}}
I specify 600px because I reserved 200 pixels for the sidebar.
I don't think javascript will be an answer because during the page load, the image placeholder will jump to the new size, and if I placed the code near the beginning, it will delay the the rest of the page from loading somewhat.
I was also thinking using div tags and setting the background to the image, but the problem there is that users won't be able to save it and the rest of the images on my site are part of a CSS sprite sheet.
I also am looking for a solution that will work with as many web browsers as possible even if javascript is disabled.
Any ideas for an answer?
This rule, while correct, went out the window when responsive design came into being:
Omitting IMG WIDTH or HEIGHT attributes means page text jumps about
as images load. Usability.gov 14:3
If you're always going to be using a given aspect ratio, then you can set up your code as below. If you set your width and height attributes on your img tag and you set max-width: 100% (or similar) in your CSS, as people often do when developing responsive sites, then your text will still jump around when the image loads, because it's initial height will be what you specify in your markup, and then when the image loads, the browser will maintain the aspect ratio required for max-width: 100% to work and end up shrinking the height - so that doesn't really help you adhere to your usability rule either.
.img {
background-size: cover;
background: center no-repeat;
}
.ar {
height:0;
padding: 0 0 56.25% /* 16:9 aspect ratio */
}
<div class="img" style="background-image: url(https://placekitten.com/g/500/500);">
<div class="ar"></div>
</div>
Try setting the width and height and then just adjusting width and height with your media queries (rather than max-width and percent width). You shouldn't encounter any scaling problems then.
#media screen and (max-width: 600px){#X IMG{width: 100%}}
This means that IMG will have full width of it's first parent. That parent might not be X element. Are you sure you want that?
Example:
<div id='X'>
<div><div><div><div>
<img src=''>
</div></div></div></div>
</div>
If you are trying to fix x:y img ratio that put height:auto; after width:100%;
Calculate width or height and always use auto for other property to preserve image scaling.

CSS/Javascript Solution to automatically apply height/width attributes based on image orientation

So I'm designing a Wordpress theme and I have four divs (380x400) that I'm using thumbnails from the posts to fill as a background, the problem is, if the picture is landscape it leaves a gap at the bottom so I can't use width:100% in the CSS, same problem with the height on a portrait image if I use height:100%.
What I was looking to do was to assign a width property of 100% if the height of the images is greater than the width(e.g. style.width='100%') and the height if the width is greater than the height. I'm looking for simplicity, I don't mind using a jQuery solution but I'm really not familiar with jQuery. I also have no problem if the image is cropped off the edges just so long as the aspect ratio remains intact.
Attached is the Screenshot of the situation I'm describing.
Here's the relevant code:
<?php $thumbnail = '';
$post_image_id = get_post_thumbnail_id($post_to_use->ID);
if ($post_image_id) {
$thumbnail = wp_get_attachment_image_src( $post_image_id, 'post-thumbnail', false);
if ($thumbnail) (string)$thumbnail = $thumbnail[0];
}
if (!empty($thumbnail)) { ?>
<div class="item" id="post-<?php the_ID(); ?>">
<img class="background" src="<?php echo $thumbnail; ?>" onload="changeWidth(this);">
<div class="date">
<?php the_date(); ?>
</div>
CSS:
.item, .no-thumbnail{
width:380px;
height:400px;
margin:5px 0px;
border:1px solid black;
float:left;
position:relative;
margin:5px;
display:inline;
}
.item img.background{
position:absolute;
left:0px;
z-index:-500;
width:150%;
}
Since you display thumbnails and text in a grid, the both good and easy way out is to make all the thumbnails the same size. You can and either trim the photos when you generate the thumbnails, or hide the rest with css. This will make your grid look cleaner and it is easier on the eyes if text and photos all line up.
If you still want to show the entire thumbnail, you could use CSS/javascript/jQuery to show it when hovering over the "fixed size" thumbnail in the grid.
Edit: created an example to show clipping centered thumbnails of different orientation/aspect ratios. All it takes is a container (mainly to set the width of the gallery), and to both show the thumbnail and provide a link for the full photo.
I didn't include title nor photographer in this example. The <a /> tag acts as a container - should be possible to add text within it and then position it as needed.

Categories