I've created a page using squares. The squares combine to make a particular word. But when I resize the window, the squares disrupt their place in a haphazard way. How I can change my CSS or javascript so that the squares retain their original positions on window resize?
You can view the page at : http://www.tryst-iitd.com/13/beta
I've included the following code to take care of the resizing, still the problem remains unsolved.
<script type="text/javascript">
$(function () {
var screenWidth = $(window).width() + "px";
var screenHeight = $(window).height() + "px";
$("#container").css({
width: screenWidth,
height:screenHeight,
});
$(window).resize( function () {
var screenWidth = $(window).width() + "px";
var screenHeight = $(window).height() + "px";
$("#container").css({
width: screenWidth,
height:screenHeight,
});
});
});
</script>
The square is disrupted because the width of the container is adjusted automatically whenever you resize your window. Set a fix value or set a minimum width for the square and container should fix the problem. The square width is in %.
Also, the window resize event itself is useless because the div (id=container) is adjusted according to the width of the body tag
Set the position and size of your squares in percentages and your resize code will works fine.
Also, set the min-width/min-height CSS properties will prevent your squares from being too small.
Your problem is that your css margins are fixed width, so even if squares width are in %, margins causes this issues.
As an example, try disabling wrap1 and wrapalphabet css classes, you will see that your design will be much more responsive.
You probably have to rethink the way you deal with margin/padding to get the results you expect.
Related
Please bear with me as I attempt to explain the issue I'm having. It's kinda tricky!
I have a fixed header that includes a responsive image, because of this, the height of the header depends on the width of the device. I also have a fixed footer sitting on the bottom of the screen. In-between the header and footer I have a fixed div with scrollable overflow positioned towards the left side of the screen. I need the fixed div in-between the header and footer to have a HEIGHT that is the following:
calc(100% - the header's height in px - the footer's height in px)
To do this, I know I need to use Javascript or jQuery, but I'm unsure how to go about setting that up. Furthermore, I need that styling to only be applied on a specific media query.
I have similar code that adds padding to the top and bottom of another div that is centered between the header and footer. This is the code that I'm using and it works perfectly (in the fiddle I've provided at the bottom, I don't use "DOMContentLoaded" because it doesn't quite work with JSFiddle like it should. same idea slightly different syntax in the fiddle) :
document.addEventListener("DOMContentLoaded", function() {
var headerHeight = document.getElementById('header').clientHeight;
document.getElementById("content").style.paddingTop = headerHeight + "px";
var footerHeight = document.getElementById('footer').clientHeight;
document.getElementById("content").style.paddingBottom = footerHeight + "px";
}, true);
window.addEventListener('resize', function() {
var headerHeight = document.getElementById('header').clientHeight;
document.getElementById("content").style.paddingTop = headerHeight+ "px";
var footerHeight = document.getElementById('footer').clientHeight;
document.getElementById("content").style.paddingBottom = footerHeight + "px";
}, true);
I need to use code similar to that, but instead of styling the div "content", I need to be styling a div titled "description" and instead of styling the padding, I need to be styling the height. The last difference is that the styling should only be applied to this media query:
#media screen and (orientation: landscape)
I've created a JSFiddle: http://jsfiddle.net/yg7mjhvn/
Thank you guys so much! I really appreciate it.
If I get it correctly, you just need to set the height of content/description div calc(100% - <header-height> - <footer-height>) with javascript.
So, to do that add a function setDescriptionHeight to your js code which sets the height of description div and add it as a load and resize event handler. All this will be done like this.
function setContentHeight() {
if (window.innerWidth > window.innerHeight) { // window.orientation === 90 for checking the real orientation
var headerHeight = document.getElementById('header').clientHeight;
var footerHeight = document.getElementById('footer').clientHeight;
document.getElementById("description").style.height = `calc(100% - ${headerHeight}px - ${footerHeight}px)`;
} else{
document.getElementById("description").style.height = "";
}
document.getElementById("description").style.top = `${headerHeight}px`;
}
window.addEventListener('load', setContentHeight, true);
window.addEventListener('resize', setContentHeight, true);
Now, you see that it has a condition window.orientation === 90. That is there to check whether the device is in landscape orientation, and if it is then the styling is done.
note that window.innerHeight < window.innerWidth simply detects whether the width is greater than the height. And, window.orientation === 90 checks the device orientation and it won't be 90 for a laptop or a dekstop screen. Moreover, it is deprecated now and you can see more about it here
So if have this function in order to dynamically set a div's height based on the browser height:
$(window).resize(function() {
$('#slideshow').height($(window).height() - 110);
});
$(window).trigger('resize');
This works like a charm. As you can see, there's a 110px margin (that belongs to my header height).
This code is not optimal since, a header height might vary based on the current viewport.
Is there a way to set this up dynamically as well? Or at least set some conditions like:
If browser width is more than 768px then set a 110px margin. If less than 767, then the margin should be 80px.
This is my edited code so far, but I'm not sure if I'm on the right path:
$(window).resize(function() {
var set_width = $(window).width();
if(set_width <= 767)
$('#slideshow').height($(window).height() - 110);
});
$(window).trigger('resize');
Thanks a lot!
EDIT:
Now that I think of it better, this 110px are not a margin, it's a subtraction I'm doing in order for my header and the slideshow to fill the entire window. If I don't do this subtraction then I end up with my header height + slideshow height (which takes take browser height) making it scroll.
So I don't think I can do this with CSS. That's why I was thinking on a Javascript solution.
So, you'd need something like the following. I hope the code is straightforward.
$(window).on("resize", function() {
var winHeight = $(window).height();
var headerHeight = $("header").height();
$('#slideshow').height(winHeight - headerHeight);
});
$(window).trigger('resize');
The sample HTML I'd used as a model is:
<body>
<header>my header</header>
<div id="slideshow"></div>
</body>
You can do something like this:
$(window).resize(function() {
var buffer = ($(window).width()<768)?80:110;
$('#slideshow').height($(window).height() - buffer );
});
$(window).trigger('resize');
As Halcyon suggested in comments, use css. That is the neatest way to do it.
I want to create div which would behave in a following way:
it would always resize his height to 100% of browser window height.
it will adjust his width to maintain constant proportions (so that his width would be allays equal to 3/5 of his height for an instance)
There are some examples here which do opposite thing - maintain width at some fixed % value of browser window size, and adjust height accordingly but its not what i need.
Try the below jQuery:
$(window).resize(function(){
$('#resizable').width($('#resizable').height()*3/5);
});
$(window).trigger('resize');
Demo:
$(window).resize(function(){
$('#resizable').width($('#resizable').height()*3/5);
});
$(window).trigger('resize');
html,body,#resizable{
height:100%;
}
#resizable{
border:1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="resizable"></div>
I use jquery here:
window.onresize = function() {
var el_height = $(element).height(window.innerHeight);
$(element).width((el_height*3)/5);
}
What you could do is get the height of the browser window with jQuery and set the width of the div accordingly.
function changeDivSize(){
var wHeight = $(window).height();
var newDivWidth = height * 0.6;
$("#divId").height(wHeight);
$("#divId").width(newDivWidth);
};
$(document).ready(changeDivSize);
$(window).resize(changeDivSize);
i was going to support Nocky Tellekamp's answer but it misses couple of things :
first, in order to get window Hieght in cross browser you need to use $(window).innerHeight();
Proper code view :
$(document).ready(function() {
var WindowHeight = $(window).innerHeight(); //$(window).height() not working in I.E and part of other wierd browsers not based on mozila engine
$("#divId").css { //proper and more orgenized code view of css changing
hieght : WindowHeight,
width : WindowHieght * 0.6
};
});
you dont have to call method on window.resize (causes very bad performance issue if bigger algorithem involved), if it does bother's you, i would suggest to use different css properties such as clear:both when setting the div so actually it will spread on the entire window height and width.
I'm trying to make a fluid layout for my site but the problem is that if a window is re-sized to be small before the page loads and then they maximize their window, the page is a small size, my question here is how would i get the width and height of a window at its full size even if the page is small.
$(document).ready(function()
{
var Height = $(document).height();
var Width = $(document).width();
});
This gives me the window height and width, i want the maximized size even if the window is small.
Sounds like what you actually need to do is listen to the window's resize event and rearrange content as needed.
Alternatively, do it the modern way and use CSS Media Queries:
#media all and (max-width:480px) {
/* styles for when the window is less than or equal to 480px wide */
}
var Height = $("html").height();
var Width = $("html").width();
You could also try body, and it may even depend on the browser. It is possible for some specially positioned elements to extend past the body, I believe.
Here's an example of how to listen for window resize events:
HTML:
<body>
<p>Resize result window to see updated dimensions</p>
Dimensions: <div id="debug"></div>
</body>
JavaScript:
function updateSize() {
var $win = $(window);
$('#debug').html($win.height() + ' x ' + $win.width());
}
$(window).resize(updateSize); // listen for window resize
$(updateSize); // call on page load to get initial size
Try it on jsFiddle:
http://jsfiddle.net/TKAFc/
If you need the screen size, you should use screen.width and screen.height.
You can subtract the "window borders" so you will have the useful area:
screen.width - (window.outerWidth - window.innerWidth)
And the same for the height.
My overall goal is make a margin between content with 100% height and a sticky footer; one that shows the body background through it.
As of now, I'm using jQuery to figure out the height of the document and subtract the height of the footer plus a margin, then apply that new size to a DIV with the ID of "content".
I then use jQuery's resize() function to also size the div if the size of the viewport changes so if a user resizes his or her browser window, or zooms in, the size of the DIV will update automatically.
Unfortunately, when I switch directions in zooming (i.e. zoom out after zooming in, and vice versa), the Javascript doesn't recognize the viewport resizing, leaving me with a too-long or too-short background on the content. In addition, this resizing does not recognize content. I'm considering setting a min-height in the CSS, but if there's a way to do it in Javascript, I'm all ears.
I will accept pure CSS-and-HTML solutions, as it seems like it should be possible, but I have exhausted myself looking for for an answer.
My current Javascript (running jQuery library 1.7.2):
$(document).ready(function(){
var height1 = $(document).height(); // height of full document
var height2 = 100; // height of footer plus margin
var height_diff = height1 - height2 +"px";
document.getElementById('content').style.height = height_diff; // Set the remaining height in test DIV.
});
$(window).resize(function () {
var height1 = $(document).height(); // height of full document
var height2 = $("#footer").height(); // height of footer
var height_diff = height1 - height2 +"px";
document.getElementById('content').style.height = height_diff; // Set the remaining height in test DIV.
});
Any direction is greatly appreciated.
EDIT
Got it, all without Javascript. http://jsfiddle.net/Rpdr9/610/
I made something on fiddle.
Looks to me like that is what you want.
Check it out: http://jsfiddle.net/XbXDn/
Orange color: content
grey color : footer
The important thing is to also give your body and html the height:100%; property.
As you will see, the content div auto grows (even over 100%) as you add more text,
though the 25em margin between content and footer is always kept.
I deliberately took a huge margin between content and footer, just so you can see it works :)