I currently have some code for a website I am creating for myself. I am working on making the website adjust to changes in the browser window size. I can not seem to be able to change my header height according to the browser window size. For my pictures it works very easy in css:
#logoArea
{
width: 15.625%;
height: auto;
position: absolute;
left: 10%;
}
but when I use the same code for my header it does not work:
#header
{
background-color: black;
width: 100%;
height: auto;
}
The height of header does not appear all together and a height of 0px is given when I inspected the element.
I tried using .resize() in jQuery as follows:
<script>
$(document).ready(function(){
$(window).resize(function(){
AdjustHeader();
});
});
function AdjustHeader(){
if (jQuery(window).width() = 1600) {
jQuery("#header").height(200);
}
else
{
jQuery("#header").height(150);
}
}
</script>
This was merely to test out whether I could change the header size using jQuery. I know you can do it using jQuery.
Question If someone could help me out and tell me how to make the header size adjust with changes in browser window size that would be great. Whether it be in css or jQuery.
you can use media query for this.. Demo
CSS:
#media only screen and (max-width: 1600px) {
#header {
height:200px;
}
}
#media handheld, only screen and (max-width: 940px) {
#header {
height:150px;
}
}
Updated Demo
CSS:
#header {
background: black;
width: 100%;
height: auto;
display:block;
-webkit-transition: .2s height linear;
-moz-transition: .2s height linear;
-o-transition: .2s height linear;
transition: .2s height linear;
}
use media queries and set the desired styles for each breakpoints.
For example:
#media (max-width: 480px) {
...
}
#media (min-width: 481px) and (max-width: 768px) {
...
}
try to add window re-size listener in jquery. This event will call each time window re-sized. Take a look
$(window).resize(function(e) {
var old_width = e.old.width;
var old_height = e.old.height;
var new_width = $(this).width();
var new_height = $(this).height();
// your stuff here
});
If your header is showing up with height 0 in the inspector, all of its children are likely floated.
In any case, if you want to decrease the height of your header, you probably want to go to the source and decrease the height of its children. You would do this as sarbbottam suggested, using media queries.
If you want to know more about media queries, and all you can do with them, you might want to check out this article on CSS-Tricks.
Related
I have an unordered list <ul> that I would like to add an event listener too
if it fits a certain media query.
The original css :
#media (max-width: 414px) {
transition: all 3s ease-out;
height: 0px;
display: none;
}
the eventlistener function :
if(window.matchMedia("max-width: 414px")) {
console.log(list.style.height);
console.log(list.style.display);
list.style.height = 'auto'
list.style.display = 'unset'
}
HELP : the transition seems not to be working & the console log for list.style.height & list.style.display is both empty ''
The transition won't work because you are changing display from/to none. In addition, you need to transition the height between numeric values (auto doesn't count).
CSS:
#media (max-width: 414px) {
transition: all 3s ease-out;
height: 0;
}
JS:
if (window.matchMedia("(min-width: 414px)").matches) {
list.style.height = list.style.height + 'px'; // set the exact height
}
Its not working and your console is empty because of this line
if(window.matchMedia("max-width: 414px")) {
It must be
if (window.matchMedia("(max-width: 414px)").matches) {
And transition is not working with display:none and height:auto..
You can try opacity instead of display.
I made a sample fiddle..
And try to look at the console you can see that its not empty anymore.
Hi I'm trying to change an image as the window width changes without refreshing the page.
$(document).ready(function(){
if($(window).width() <= 600) {
$('#img').attr('src','images/image.png');
$('#img').css({"width": "50px"});
};
});
This is the Jquery code that I've written but it only works when I refresh the page. how do I change the image when the width of window reaches 600px responsively?
I'm not sure if I should use css, ajax or jquery. thank you
This will work..
function adjustImage(){
if($(window).width() <= 600) {
$('#img').attr('src','images/image.png');
$('#img').css({"width": "50px"});
};
}
$(document).ready(function(){
adjustImage();
});
$( window ).resize(function() {
adjustImage();
});
But we can do with CSS also as follow..
#media screen and (max-width: 600px) {
#img{
width:50px;
}
}
The #media rule can be used for the desired effect.
Although I would add that unless you are using different images, it's better to let CSS resize the image. It does it very well.
Open snippet in full-screen mode and resize your window from very small to big to see the effect
body {
background: #111;
margin: auto
}
#media screen and (max-width: 599px) {
.simages {
display: block
}
.bimages {
display: none
}
}
#media screen and (min-width: 600px) {
.simages {
display: none
}
.bimages {
display: block
}
}
<body>
<img class="simages" src="https://files.graphiq.com/stories/t2/The_16_Dogs_That_Won8217t_Make_You_Sneeze_2060_2848.jpg">
<img class="bimages" src="https://s-media-cache-ak0.pinimg.com/736x/f0/26/05/f0260599e1251c67eefca31c02a19a81.jpg">
</body>
This is always achieve with css media query
you can use css to do this. Give max-width : xxx px; to set maximum width of image and width in percent. so it will automatically resize according to screen size.
img
{
max-width : 550px;
width : 75%;
}
refer : http://www.w3schools.com/css/css_rwd_images.asp
I created this demo:
http://cristiantraina.altervista.org/boxfall/
When you click, it creates a red falling box.
The problem is that using only css there are no ways to detect the size of the screen, in fact in my demo I specify that the box has to fall for 1000px, regardless of the actual height of the screen.
This is the code of the keyframe:
#include keyframes("fall"){
to{
top: 1000px;
}
}
I can't use bottom:0px; because I wouldn't know from where to start the fall, and I didn't solve my main problem.
This is the FallBox.js script:
function FallBox(x, side, parent){
this.x = x;
this.parent = parent || $("body");
this.side = side || Math.random()*200;
this.createBox();
this.fall();
}
FallBox.prototype.createBox = function(){
box = document.createElement('div');
$box = $(box); // I hate brackets
$box.addClass("box");
$box.css({
width: this.side+"px",
height: this.side+"px",
left: this.x+"px",
top: "-"+(this.side+5)+"px"
});
this.box = $box;
}
FallBox.prototype.fall = function(){
this.parent.append(this.box);
this.box.addClass("fall");
}
I know that I could use overflow:hidden; in the parent div, but I don't think that this is the ideal solution. First because a user can have got a screen with a superior height, then because I want to the box stops when it meets the edge, as the border was ground and it shouldn't pass through.
Another solution that I found on the web, it's to use the CSSOM API, but not even mozilla developers are sure of the compatibilty of these.
So, how can I stop an animation when it meets the screen edge, since javascript fails to inject properties?
Thank you.
If you're looking for a css-only solution, you could use the css calc feature (http://caniuse.com/#feat=calc) in combination with vh (http://caniuse.com/#search=vh).
document.querySelector(".box").addEventListener("click", function() {
this.classList.toggle("is-dropped");
})
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.box {
position: absolute;
top: 0;
left: 200px;
width: 100px;
height: 100px;
background: red;
transition: top 2s;
}
.box.is-dropped {
top: calc(100vh - 100px);
}
<div class="box"></div>
You coul use the translatey() CSS transform function to shift each div up by 100% of its own height. That way you would just need 2 rules to change the value of the top position without having to worry about height in each case.
(function(d,M){
var div=d.createElement("div"),
wait=0,size;
d.body.addEventListener("click",function(){
if(!wait){
wait=1;
div=div.cloneNode(1);
div.classList.remove("go");// necessary so that newly created divs don't just get added to the bottom of the page
size=M.max(M.floor(M.random()*200),50);
div.style.height=div.style.width=size+"px";
div.style.left=M.max(M.floor(M.random()*this.offsetWidth)-size,0)+"px";
this.appendChild(div);
setTimeout(function(){
div.classList.add("go");// adding this class starts the animation.
wait=0;
},5);
}
},0);
})(document,Math);
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%}
div{
background:#000;
border:1px solid #fff;
transition:top 2s linear;
position:absolute;
top:0;
transform:translatey(-100%);
}
div.go{
top:100%;
}
ORIGINAL SOLUTION
As the height of the box is being set dynamically in your JavaScript, your CSS isn't going to know the height of each box but that doesn't stop you using the CSS calc() function to set the top position you want to animate each to, much like you currently do to set its starting top position. Here's a quick, rough example, with an alternative solution in the comments that doesn't use calc(), if you'd prefer.
var div=document.createElement("div"),
wait=0,size;
document.body.addEventListener("click",function(){
if(!wait){
wait=1;
div=div.cloneNode(0);
size=Math.max(Math.floor(Math.random()*200),50);
div.style.height=div.style.width=size+"px";
div.style.left=Math.max(Math.floor(Math.random()*this.offsetWidth)-size,0)+"px";
div.style.top="-"+size+"px";
this.appendChild(div);
setTimeout(function(){
div.style.top="calc(100% - "+size+"px)"; /* This is the important bit */
// div.style.top=document.body.offsetHeight-size+"px"; /* Alternative solution, without using calc() */
wait=0;
},5);
}
},0);
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%}
div{
background:#000;
border:1px solid #fff;
transition:top 2s linear; /* Using a transition instead of an animation */
position:absolute;
}
I am trying with the following style:
.scrollDiv {
height:auto;
max-height:100%;
overflow:auto;
}
My Requirement is:
max-height of div is equal to screen height
If the content in the div exceeds screen size, then scroll bars should come in div.
Use CSS Viewport units for this.
Example:
.scrollDiv {
max-height: 100vh;
overflow: auto;
}
More info: https://www.w3schools.com/cssref/css_units.asp
You can use $(window).height() to set the max-height to screen height:
$('.scrollDiv').css('max-height', $(window).height());
UPDATE
As mentioned in the John's answer. With the latest CSS3 API you can use vh's(View port unit for height)
.scrollDiv {
max-height: 100vh;
overflow: auto;
}
Scroll bar appears only when content is overflown.
If max-height of your inner div is equal to the height of its container, scroll bar will never appear. if you want to see scroll bar use this.
.scrollDiv {
height:auto;
max-height:150%;
overflow:auto;
}
I am developing a site and I want to make a script that will detect when the page is more than 500px and when it is below so I can make changes to the code. My current code has some links at the end of the page, like a footer, and when it is below 500px I want them to come close to each other for example;
<div class="footer-titles">
<ul class="footer-titles-ul">
<li><h class="titles">Link 1</h></li>
<li><h class="titles">Link 2</h></li>
<li><h class="titles">Link 3</h></li>
</ul>
</div>
And my css
.footer-titles{width: auto; min-width: 800px; left: 0px; right: 0px; position: absolute; bottom: 210px;}
.footer-titles-ul {list-style: none; padding-left: 120px;}
.footer-titles-ul li {padding-right: 90px; display: inline;}
So when the page is below 500px I want the padding-right from the .footer-titles-ul li to be 30px but, if the page gets back to over 500px to revert back to normal.
You don't need JavaScript for this and you shouldn't use JavaScript for this. You want CSS3 Media Queries (Unless you need old browser support that's not possible with a polyfill).
You would want something like this to get the change:
#media screen and (max-width: 500px) {
/* UNDER 500px CSS here */
.class{
color: red;
}
}
Using media queries is the way to go. Just add this to the bottom of your CSS file:
#media only screen and (max-width: 500px) {
.footer-titles-ul {padding-right: 30px;}
}
If you want jQuery, I think this would work for you. But then again, I would recommend CSS media queries as the others say.
$(document).ready(function(){
var detectViewPort = function() {
var Wwidth = $(window).width();
if (Wwidth < 500){
$('.footer-titles-ul li').css('padding-right', '30px');
}
if (Wwidth > 500){
$('.footer-titles-ul li').css('padding-right', '90px');
}
};
$(function(){
detectViewPort();
});
$(window).resize(function () {
detectViewPort();
});
});