How to make 1 css value dependent on another? - javascript

Im trying to make a header with three sections. (all section are lined up horizontally) I want the middle section to adjust depending on the size of the content (text) within it. When I adjust this middle size, I want the other two to adjust accordingly so that the three sections always take up the full width of the site and stay even. my site width is 1000px, this is how I have it set up
< div .side_header> < div #header> < div .side_header>
I want to make a script that says something along the lines of:
"the width of .side_header equals (1000px minus the width of #header)*.5"
This is what I wrote but my syntax is off:
<script>
$(document).ready(function () {
$(".side_header").css("width", "$("#header_text").css("width") * .5");
})
</script>
css:
#title{
}
.side_header{
display:inline-block;
background-color:#999;
}
#header_text{
display:inline-block;
background-color:#3FF;
}
html:
<div id="title">
<div class="side_header"> </div>
<div id="header_text"> Header text</div>
<div class="side_header"> </div>
</div>
RESOLUTION:
Using javascript to make dependent values can be troublesome and can result in errors easily. It is better to use a css perpricessor like .less or .sass

You are trying to set the width to a string. Try
<script>
$(document).ready(function () {
$(".side_header").css("width", ($(document).css("width") - $("#header_text").css("width")) * .5);
})
</script>

Didn't get what you exactly want to do but just keep in mind that $.css("width") returns the CSS width of an element and not the actual width of it. So if you are trying to set the sidebars width as to occupy the rest of the page width available to them you should use $.width() to read the middle div width.
$(".side_header").css("width",((1000 - $("#header_text").width())/2) + 'px');
It is even better to use .outerWidth() as CSS wise they can be different. You can find docs about them on the following pages:
http://api.jquery.com/width/
http://api.jquery.com/outerwidth/
But after all if you want to position some div horizontally this is not a really good strategy. the width() method also works somehow not satisfactory as your CSS styling might be in a way that affects the middle div width itself. Using solid percentage width is more stable than using JS to achieve this.

Related

Flexbox causes adsense error: "adsbygoogle.push() error: No slot size for availableWidth=0"

I have a website which uses angular-material and flexbox for it's layouts. I'm trying to include a Google Adsense snippet inside one of these flexbox containers, but it gives me the error: "adsbygoogle.push() error: No slot size for availableWidth=0". However, it runs properly if I put the same snippet outside of a flexbox container.
This is not ideal, since my entire site is made with flexbox. So I'd like to find a way to make this work within a flexbox container.
Here's a snippet of my code:
<div layout="column" layout-align="center center" layout-padding="" flex="flex" class="scroller container">
<div flex="" hide-xs="" show-gt-xs="">
<h1>My Account</h1>
</div>
<welcome></welcome>
<script async="" defer="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- responsive ad-->
<ins flex="grow" style="width:100%;min-width:100px;height:100px;" data-ad-client="ca-pub-IDISHEREONMYSITE" data-ad-slot="IDISHEREONMYSITE" data-ad-format="auto" class="adsbygoogle"></ins>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
(adsbygoogle = window.adsbygoogle || []).push({})
});
</script>
</div>
I've also tried replacing all references to flex in the google ads to just display:block; I've tried using width, no width, min width, max width, all of them together. I've tried putting it wrapped in a div that is a flexbox column, I've tried putting it in a div that is display:block; with fixed widths, etc.
None of it seems to work.
Any ideas?
Is there a way to report this (possible) bug to Google?
I just came across this problem and came searching for help.
Only finding information on setting fixed widths (in PX?).
I knew this wasn't correct, I currently had a box with width 90% and worked fine.
One thing that annoyed me was on larger displays google ads never center.
I tried turning it in to a flexbox to align content and that's where my problems started.
I fixed this by setting a setTimeOut and addclass.
function centerAd() {
$( "#adBlock" ).addClass( "adBlock" );
}
var timeoutID;
$(function() {
timeoutID = window.setTimeout(centerAd, 1000);
})
with the class:
.adBlock {display: flex; justify-content:center; align-items:center; align-content:center} /* We call this after page has loaded to center ad */
It gives google ads enough time to sniff the width of the element, and then centers it nicely. Often seamlessly.
Adsense's responsive code determines the width of the iframe it inserts based on the width of the parent element in which it is placed. Normally this works fine because even when the parent element has no content yet, it still has a width because it fills the available width.
However, if your parent element is within a flexbox row which determines the width of its members based on their content, the width of this will be zero until content is added. So of there is nothing else in the box other than the Adsense code, at the time Adsense calculates the available width, it's zero.
You need to get around this by setting the box to have a flex basis other than auto, or to apply a width or min-width property to the box, so that in the initial state before Adsense has run its code, it'll have a nonzero width.
So on the specific flex member, either set a flex basis other than auto (eg a percentage or px)
flex: 1 0 30%
Or set a width or min-width
min-width: 30%
You can't use a flex basis that determines width based on content when the only content is an Adsense ad, as the ad is inserted afterwards by JavaScript.
You need to define your width in px instead of %.
Try to look here it may can hep you.

How to set two divs side-by-side with the same height?

I have some trouble making my design work. I looked around the web a lot, but I can't find what I'm looking for.
I'm trying to make something like that: concept design
The thing is that I started by doing that with CSS only, but it's not the good solution, because if my picture has a different ratio or another reason, it will not work at all.
What I'm trying to achieve is that inside a div, I have one big image and in the other div (floating left or right), I want two small images, one over the other, taking the same height as the big one. All this (the two divs) should take 100% width of the body, but I don't really know how to achieve that. I'm not sure to understand how to make height responsive with the width...
I also have some weird margin between my images... Can you help me delete them as well?
So my code is via this link: http://codepen.io/anon/pen/MygaEB
Someone (Giovanni Perillo) suggested me to have this Javascript code:
var div1 = document.getElementById("colonne-gauche");
var div2 = document.getElementById("colonne-droite");
var height1 = div1.offsetHeight;
var height2 = div2.offsetHeight;
if (height1 > height2) {
div2.style.height = height1;
}
else {
div1.style.height = height2;
}
The thing is that it's not working at all. I'm sure it's a code I could use, but I'm not sure how to make it work in my code.
EDIT : I tried to look what I was able to do with Flexbox, but it doesn't seem to work. Flexbox allow two box to be side by side, with the same height, but it need to be the same width as well. What I want is something more responsive like the big image is taking 3/4 width and the two images (in the same div) are taking 1/4 width, but they have the same height in total as the big image. I'm sure it's totally possible to do that like all masonry layout, but me it's not really a masonry, but something that stay the same : One big image and two little, but responsive depending of image size.
EDIT 2 : The code needed should allow to change the width of each divs to make sure that they have the same height (without changing image aspect ratio). It should work with different images aspect ratio as well. The example bellow show a div with three images, but that's just to say that div should change width dynamically to have the same height.
Javascript is not necessary. You can accomplish this with just CSS. To make side by side divs equal in height you need to make html and body have a height of 100% then you have to specify a height for your container div (this can be a percentage or a specified length). In this case I used a height of 500px for the .section class. Then for the inner containers you need to specify a height of 100%. Then each image within that container needs a specified height, for one image use 100%, for two use 50%, etc. I also removed your inline styles. I also removed the section tag.
Here is the updated codepen.
Update:
To preserve aspect ratio change the height of the img tags to auto. Also, change the height of the .section class to auto. I also change the width of .colonne-gauche back to 65% and the width of .colonne-droite back to 35%.
divs are block elements. you can set display:inline-block; to make them align side by side.

Can I expand a div so the overflow-y:auto scrollbar doesn't clip the div content?

Similar question, without a great answer:
How can I include the width of "overflow: auto;" scrollbars in a dynamically sized absolute div?
I have a <div> of fixed height that acts as a menu of buttons of uniform width. Users can add/remove buttons from the menu. When there are more buttons than can fit vertically in the <div>, I want it to become scrollable - so I'm using overflow-y:auto, which indeed adds a scrollbar when the content is too large in y. Unfortunately, when the scrollbar shows up it overlaps the menu buttons, and adds a horizontal scroll bar as a result - the big problem is it just looks horrible.
Is there a "right" way to fix this? I'd love to learn some style trick to make it work right (i.e. the scrollbar sits outside the div rather than inside, or the div automatically expands to accommodate the scroll bar when necessary). If javascript is necessary, that's fine - I'm already using jQuery - in that case, what are the right events are to detect the scrollbar being added/removed, and how do I make sure to use the correct width in a cross-browser/cross-style way?
JSFiddle: http://jsfiddle.net/vAsdJ/
HTML:
<button type="button" id="add">Add a button!</button>
<div id="menu">
</div>
CSS:
#menu{
background:grey;
height:150px;
overflow-y:auto;
float:left;
}
Script:
$('#add').button().click(function(){
var d = $('<div/>');
var b = $('<button type="button">Test</button>');
d.appendTo($('#menu'));
b.button().appendTo(d);
});
First: To remove the horizontal scrollbar set overflow-x: hidden; as Trent Stewart has already mentioned in another answer.
CSS Approach:
One thing I have done in the past is to add a wider wrapping div around the content div to make room for the scrollbar. This, however, only works if your container width is fixed... and may need to be adjusted (by serving different styles) in various browsers due to variable rendering of scrollbars.
Here a jsfiddle for your case. Note the new wrapper <div id="menu-wrap"> and its fixed width width: 95px;. In this case the wrapper div is doing the scrolling.
You could probably also solve this by giving the wrapper some padding on the right, and thereby avoid the fixed width problem.
jQuery Approach:
Another option is to detect the overflow using jquery as described here, and then increasing the width or padding of the div to make space. You may still have to make browser-specific adjustments though.
Here a jsfiddle with a simplified version for your example. This uses your click function to check the div height after every click, and then adds some padding to make room for the scrollbar; a basic comparison between innerHeight and scrollHeight:
if($('#menu').innerHeight() < $('#menu')[0].scrollHeight){
$('#menu').css( "padding", "0 15px 0 0" );
}
To make this more cross-browser friendly you could check for the scrollbar width (as outlined here) and then add the returned value instead of the fixed padding. Here another jsfiddle to demonstrate.
There are probably many other methods, but this is how I would go about it.
Have you tried simply using overflow-x: visible; or hidden

Calculating exact window height using jQuery

So I am redesigning my website: http://staging.slackrmedia.com/keenanpayne/, but I am coming across a small issue. I want each "pane" of the website to be the exact height of the window, no matter what the size. I also want the content therein to be exactly positioned in the center.
I am trying to accomplish this with jQuery at the moment:
function setSectionHeight() {
// Set section heights
windowHeightPadding = $(window).height() / 2;
firstSectionPadding = ($(window).height() - $('header').height()) / 2;
// Apply proper styling
$('section').css({"padding-top":windowHeightPadding,"padding-bottom":windowHeightPadding});
$('section.home').css({"padding-top": firstSectionPadding,"padding-bottom":windowHeightPadding});
}
setSectionHeight();
// Adjust section heights on window resize
$(window).on('resize', function(){
setSectionHeight();
});
So what this is doing is calculating the window height and dividing it by 2, so I can set the top and bottom padding on each section.
However, for the first section, to get the proper top and bottom padding, I need to subtract the height of the header, which is why I have a firstSectionPadding variable.
Then I just add the CSS to each section tag on my website, with separate styling for the home section tag.
This works pretty well, but as you can see when you visit my site, for some reason the heights are not correct.
Right now it looks like:
And it should look like:
I have absolutely no idea where this extra padding or space is coming from on the top. I think my equations are right, but perhaps there isn't something I'm taking into consideration?
This could be done with CSS. One div set to 100% height and width, with text-align:center; A second div within set to display:table and 100% height and width. Finally, a third div set to display:table-cell and vertical-align:center;

Position an element at the bottom of a floating div with unknown height

I am currently trying to position an element in a way that it always is at the bottom of it's parent. What's special here is that none of the heights or widths are known. I'd like to do this without tables, if at all possible (my superior is against using those. In a very religious way).
I tried the approach of using position:relative on the parent and position:absolute; bottom:0; on the box I want to have at the bottom. This, however, causes the box to overlap with the other content of the parent div since absolute positioning causes the parent to ignore the height of the positioned element. Some JavaScript is used to align the heights of the floating divs to each other. But disabled JavaScript should not completely break the layout (as in: cause content to overlap or break the "flow" of the page).
Here's the fiddle with the exact structure of my markup: http://jsfiddle.net/vbeC2/27/
I did read the "float: bottom" question on SO, but none of the answers really adressed my problem, hence the new question.
It's not the cleanest solution, but since you were already using the maxHeight bit to calculate the sizes, I just added a second each loop to check the max-height of the bottom section, and added it, so that the relative, absolute positioning would work.
http://jsfiddle.net/robsterlini/svcGB/ or http://codepen.io/robsterlini/pen/BcDyt
EDIT When you resize your browser it won't work, but you could just add a resize event that recalculated it, and you'd need to think about creating some javascript-less fallbacks, either using modernizr, or just some simple
Please find the working demo here: JS Enabled
Modified the jquery logic to calculate the height of the maximum height of the container as shown below:
$(document).ready(function(){
//Set the height of the columns to the highest value of all columns
var maxHeight = 0;
$(".same-height").each(function(){
var k = $(this).children('.headline').innerHeight() + $(this).children('.description').innerHeight()+$(this).children('.bottom').innerHeight();
maxHeight = Math.max(maxHeight,k);
});
$(".same-height").css({"height" : maxHeight});
});
If JavaScript is disabled then you should apply different styles as shown in demo here:
JS Disabled
Here is something similar to what you want to atchive but the demo is centering the
http://css-tricks.com/centering-in-the-unknown/
You should use the same trick : using css ::after/::before pseudo classes to set your footer content in your parent div

Categories

Resources