Well I am working on an small website.
However I have problem with fixed position.
My header is 770px in width. It contain a couple of elements with it.
position: fixed; works really fine, but when I resize my website to another screen size, something like 640x480 the fixed element (header) cannot be fully visible in width.
I want it to be fixed for scrolling but I want it to be fully visible in width, if user is on smaller screen and cannot see it completely.
Here is an example on an wordpress theme.
http://dvl-den.net/
Same problem is with my small project. Try to open that website on 640x480 (resize browser) and you'll see my problem.
Thanks in advance.
I don't think there is a solution with CSS only properties. I'd try having position: absolute; on my CSS, and playing around JavaScript (my example requires jQuery) like:
jQuery(function($) { // document ready
var $win = $(window),
handler = function() {
// try not to overload browser, creating a throttle
var throttle,
throttleFn = function() {
// this is what happens on window resize
$('#header').css({
top: $win.scrollTop()
});
};
return function() {
clearTimeout(throttle);
throttle = setTimeout(throttleFn, 100);
};
};
$win.resize(handler());
});
It doesn't work really "cool" in mobile, but it's widely know there are mobile issues with fixed headers in web apps (different than native). If you need I can update with a JSFiddle example.
Check demo at: http://jsfiddle.net/qaKT7/ (you can play around with that 100 value to get a better experience, and also use .animate() instead of .css() to make it look fancier)
Try giving
min-width:770px;
or try with media queries
I think there're two ways:
Changing the width "770px" to a percentage.
Detecting the pixel height of screen, then adjusting the width according to this.
Related
I'm using the following script to adjust the height of a container div on my page relative to the browser window's height
function thirty_pc() {
var height = $(window).height();
var thirtypc = (50 * height) / 100;
thirtypc = parseInt(thirtypc) + 'px';
var thirtypc2 = thirtypc * 2;
$("#slider").css('height',thirtypc);
}
$(document).ready(function() {
thirty_pc();
$(window).bind('resize', thirty_pc);
});
The script works fine to scale the #slider div's height relative to the viewport's height. The problem is if I resize the browser window the inside div elements dimensions get distorted. However if I refresh the browser the inside div elements fix themselves. Also if I go into firebug while the inside div's are distorted and I un-check ANY even unrelated elements CSS properties, the inside div's fix themselves.
Would the solution be for javascript to somehow refresh CSS after a browser re-size? If so how do you do that? Or should I be tying in the effected inside div element's dimensions to the function to begin with? I have also tried to do that with no luck.
The fact that a browser or CSS refresh seems to fix the problem makes me lean towards the first solution if it's possible.
Thanks.
First off, I suggest you make a text space... a simplified version to learn with. Here is a jsFiddle as an example how you can make an example that doesn't have all the other site stuff in the way. CSS is read once. the js is writing inline CSS. So you don't want to refresh the CSS. You want to write new inline CSS over the stuff the js already wrote.
Here is an example of a function. Below is how you call it on DOM ready and then, also when the window is resized. Keep in mind that it is going to run that function many many many times while you resize - so this isn't great for all scenarios. Also, - while it's commendable that you want it to resize(I do the same) no one else is going to resize their browser... So pick your battles.
var your_functions_name = function() {
var windowHeight = $(window).height();
$('.box').css('height', windowHeight/2);
};
// run on document ready
$(document).ready(your_functions_name);
// run on window resize
$(window).resize(your_functions_name);
I'm using this CSS-only strategy for responsive background images and responsive background image and contained content ... an example of the type of setup I'm using for background and content:
<div class="fullscreen-cont">
<div class="fullscreen-img"></div>
<div class="cont-content-a">
<div class="cont-content-b">
Example content
</div>
</div>
</div>
.cont-content-a {
display:table;position:relative;z-index:2;
width:100%;
height:100%;
}
.cont-content-b {
display:table-cell;
vertical-align:middle;
text-align:center;
}
I edited the above code to just include the styles for the content. Click the link above to see the full strategy and styles.
The main page I'm working on essentially a logo, text input with inline button, and login button below. Both the logo and login button are positioned absolutely. Everything looks great on a mobile device.
The problem occurs only if the user touches to input text. The keyboard shrinks the viewport and therefore, the background image, squishing and overlapping all the contained content.
Does anyone know if there's a way to disable the viewport resize when the keyboard is opened on mobile devices? And is there a way to accomplish this without mobile jQuery?
Usually if you do not use Jquery mobile then you will have to manually fix all the bugs coming with different phone OSs. If you want to skip this library you will have to listen to viewport resize change event and through listening to it get the remaining height and width of the viewport.
trigger a function according to viewport change like this
$(window).resize(function()
{
});
and inside that get the viewport width height and then adjust the layout accordingly.
$(window).resize(function()
{
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
//do your layout change here.
});
In case someone is actually OK with the jQuery solution:
jQuery(document).ready(function() {
var viewportWidth = jQuery(window).width();
jQuery(window).resize(function(){
var viewportWidthResized = jQuery(window).width();
if (viewportWidth !== viewportWidthResized) {
// do the work
viewportWidth = viewportWidthResized;
}
});
});
It looks like you could simplify your HTML/CSS and that might resolve your problem.
Why not just add your background-image stuff to and then remove all those extra tags. Down forget to set your viewport meta tag. i always start with this and then change it as needed.
https://developer.apple.com/library/ios/DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
I am trying to make chess board type table with 15X15 row and columns. My problem is I need to make this table flexible with all the resolutions of mobile phones. The column of each table should not get abnormal stretch but should be stretch with respect to device resolution. I am very much new in CSS and I want to know if there is any way I can adjust the chess board table with 100% scale on width and height. Here is the normal chess board that I am creating on the resolution of 480X854 and 320X480.
One more thing when I use table width and height in pixel then things works for any specific resolution fine but using percentage on table tr does not give result but shrink everything abnormally. I like to see what would be the best solution you guys will use in this situation or if mobile jQuery has anything related to it. Please let me know if I should explain more
Here is the jsfiddle for preview:
jsfiddle.net/97Nz5
You tagged your question with jQuery so I assume you're using it. I don't think there is way to do it in pure css.
$(function(){
var $gameboard = $('#gameboard-terrain');
var $cells = $gameboard.find('td');
var adjustHeight = function(){
var width = $cells.width();
$cells.height(width);
};
$(window).resize(function(){
adjustHeight();
});
adjustHeight();
});
Demo here http://jsfiddle.net/97Nz5/3/
Edit
You're right my function only adjust cells height to be equal with width. What you should use to output different cells size on different resoultions are css media queries. For example like this:
#media (max-width: 479px) {
table {
width: 480px;
}
}
Demo http://jsfiddle.net/97Nz5/8/
I recently made and hosted Catifier.com.
It's working pretty good, except I have a bug with saving I have to work out, and it stretches images when you set them as the background.
Portrait images look horrible.
Would it be possible to detect the width and height of the image a user pastes in the box, then resize the canvas accordingly?
You have to load your picture in a DOM element to know its size.
So basicly when you want to do it, here are the steps :
Add your picture in an invisible DOM element.
You will be able to get picture width and heignt when onload event is lauched.
Then create your canvas depending those two variables.
All can be done in very few javascript lines.
Just gonna write up a very generic and likely not fully functional way to do this real quick just to give more of an idea.
var img = document.getElementByTagName('img');
for (var i = 0; i < img.length; i++) {
var width = img[i].width,
height = img[i].height;
// do some stuff with the img[i] width and height here if you like. for each image on the page...
}
Not how you'd end up actually doing it but it's just as simple as doing, img.width or height. If that helps more at all.
I've got photo gallery app with a fluid layout. The #header & #controls are set to position:fixed so that when the user scrolls, they stay on the top of the window.
The div that contains all the photos, #people, is positioned below the controls with padding. On a standard 1280 x 1024 window everything looks fine.
However, when the window gets smaller, the controls wrap, and #controls gets taller. Consequently, #people then gets partially hidden.
Is there a CSS only way to make #people move to accommodate the height change? I'm fairly certain there isn't, as fixed elements get taken out of the document flow. I thought I'd ask anyway.
Update Here's an example: http://jsfiddle.net/hbms2/9/. At the default display, all the blue controls are on one line. When you resize the pane narrower, and they jump onto multiple lines, you can see "#1#,"#2",etc get covered.
Well, this is pretty simple. You set #controls to width:100% that means it will only be as wide as the window. What you should do, since it is fixed positioned, is set the sides to left:0; right:0; (so it covers the page) and the min-width wide enough to fit your controls.
body {
min-width:700px
}
#controls {
left:0;
right:0;
min-width: 700px;
}
Now when you resize the window to less than 700px, your controls will not squish together, and you can use the scrollbar to access off-screen content.
Here it is using your jsfiddle: http://jsfiddle.net/hbms2/14/
Note: I only applied the fix to the controls section, content in the other div's will still squish together since you specified their width with a percentage. (You should avoid doing that) However, you can fix it using the same method.
The control elements will still be hidden if the viewport is smaller than their width. There is no way to fix this using CSS; you would have to use javascript (which would be complicated, cumbersome, and probably wouldn't even yield the desired result) or you can make another site designed for smaller viewports. The latter is by far the better option.
Thanks for making the example like I suggested, it makes answering the question a lot easier.
The only pure CSS solution I know that will even come close are media queries, and you'll have to do a lot of trial and error, and eventually the result might not be 100 perfect.
Therefore, I resorted to JavaScript (jQuery for comfort).
You can achieve this by testing $(window).resize and changing the margin-top of the #people element to match #header's height.
Here's an example!
What I did:
$(function() {
$people = $('#people'); //Cache them to not waste
$header = $('#header'); //browser resources.
$(window).resize(function() { //When window size changes
//Check if the height changed
if ($people.css('margin-top') != $header.height() + 5) {
//Change height if it has.
$people.css('margin-top', $header.height() + 5 + 'px');
}
});
});
I am just giving it a try and I am playing around, but would something like this with dynamic heights work?
http://jsfiddle.net/hbms2/10/
Or am I completely on the wrong track here?