Hope there's someone here that have done what I'm currently trying to accomplish. I'm learning some new JS frameworks and I've got an idea to make full screen calendar with topbar fixed as my homepage. This calendar should take full width and full height available on normal monitors.
I've managed to make it full width using Foundation SCSS by changing this in _settings.scss:
$row-width: 100%;
$total-columns: 7;
My main question is - what's the optimal way for creating 5 rows (it's always 5 rows for single month) that will always take full remaining height of the screen? (remaining because of that topbar navigation that is fixed).
I'm ok with SCSS so all suggestions are welcome.
Thanks!
Ok, solution that works is:
// Get client height (screen height)
var maxHeight = window.innerHeight;
var topbarHeight = $('div.fixed').height();
var columnHeight = (maxHeight - topbarHeight - 10) / 5;
$('.calendar-row .column').height(columnHeight);
I personally think there must be more "elegant" solution but maybe I'm wrong. If someone find better solution please reply.
Thanks.
Related
I've got a simple Bootstrap3 page, with some existing rows, and I want to insert a single new row that is full screen height.
What's the best (most clean & compatible) way to do this? I'd say using CSS3's new "height:100vh" would do the trick, but it still doesn't seem to be supported in quite some browsers.
Upon searching I came accross all sorts of tricks and wizardry, including using jquery, or plugins, but I wonder if there is just a simple css attribute or Bootstrap3 class that I can use for this?
Note that my page does not consist of just this one full-height row, I've got several dynamically sizes rows with random content, and now I want to insert one new row that has to be full screen height.
height:100vh
Should do the trick like you said, IE 9 support it very well.
EDIT :
For android user then forget CSS use Javascript :
var h = document.getElementById("container").offsetHeight; //the parent container or body
document.getElementById("my_100_percent_row").style.height = h + "px"; //the row that must have 100% height
There is one simple task I want to achieve.
I have an image in a variable width container.
The container can have a width of 300, 400, 700, or 900 pixels. This is done by the means of media-queries
The image should take up all the width of that container. So it will be also 300, 400, 700, or 900 pixels wide.
The image should have different sources for all that width values. So I can serve smaller images on mobile phones.
I thought that this could be done with the srcset attribute of the img element, maybe under help of the sizes attribute. width something like this
<img src="http://dummyimage.com/300x200/abc/000"
alt="dummy"
srcset="
http://dummyimage.com/900x200/abc/000 900w,
http://dummyimage.com/700x200/abc/000 700w,
http://dummyimage.com/400x200/abc/000 400w,
http://dummyimage.com/300x200/abc/000 300w
"
/>
But it's not working in that way, because the browser chooses the image in proportion to the width of the display port and not to that of the image itself.
Example with use of picturefill polyfill from http://scottjehl.github.io/picturefill/: http://codepen.io/HerrSerker/pen/itBJy . This does not work, because it will take the one image that is the next size.
I could of course take that into account and change my srcset to this
srcset="
http://dummyimage.com/900x200/abc/000 999999w,
http://dummyimage.com/700x200/abc/000 900w,
http://dummyimage.com/400x200/abc/000 700w,
http://dummyimage.com/300x200/abc/000 400w
"
This will work on the desktop, but fails on retina displays, because the device pixel ratio is taken into account here, but in a different way than with the media queries. And it is not useful, because the image should know about the width of the viewport and of the same width and that at compile time? No way. Image I use the image in a grid system. The image has different widthes if I'm in a 3 column grid on desktop devices and a 1 column grid on smart phones. That should not be in the responsibility of the image to calulate the ratio of width and viewport-width.
I did not have any luck with the sizes attribute as well (no example here). The reason is tha same as above. In the sizes attibute I say which amount of the viewport width should my image be wide according to media queries. This is so off. How should the image know?
So I came around with this solution. I setup a data-srcset attribute with the same syntax as the srcset attribute itself, but with a custom JavaScript programming. Example here: http://codepen.io/HerrSerker/pen/tCqJI
jQuery(function($){
var reg = /[\s\r\n]*(.*?)[\s\r\n]+([^\s\r\n]+w)[\s\r\n]*(,|$)/g;
var regw = /(.*)w/;
var sets, $set, set, myMatch, i, w, that, last;
var checkData = function() {
$('img[data-srcset]').each(function() {
that = $(this);
$set = that.data('srcset');
sets = [];
while(myMatch = reg.exec($set)) {
set = {};
set.src = myMatch[1];
set.w = (myMatch[2].match(regw))[1];
sets[set.w] = set;
}
w = that.width();
last = 0;
for (i in sets) {
last = i;
if (w <= i) {
that.attr('src', sets[i].src);
return;
}
}
that.attr('src', sets[last].src);
});
};
checkData();
$(window).on('resize', checkData);
});
This works, but it feels wrong. But maybe not, as the specifications says for responsive images to behave just in the way that it does. But I feel that it's the wrong way. 90 % of use cases for responsive images won't work with the spec.
So am I wrong? Didn't I use the srcset in the defined way? Did I understand the spec incorrectly? And do the W3C and Responsive Images Community Group think in such a way apart from reality?
Are the smaller images scaled down versions of the bigger image? Or are they cropped (art direction)? If the latter, you should use picture and source media.
The reason the browser only uses the viewport for deciding which image to download is that it's the only thing that is available when the browser wants to download an image. The CSS (probably) isn't downloaded yet. So if you use srcset+sizes, you have to repeat the breakpoints and image widths in sizes.
This question seems like a duplicate of Responsive full width image banner with fixed height using srcset
Like zcorpan said, what you are trying to do falls under the "art-direction" use-case (since the different images have different proportions), so you should use the <picture> element, rather than srcset. See the other question's answers for a syntax example.
Can anyone point me in the right direction? I have a DIV with a background image that is fixed, but I'd like it to scroll at a slower rate when scrolling down the page. I'm not great with jQuery or CSS3 so asking for some help.
Thanks in advance.
This may help: http://stephband.info/jparallax/
It turns nodes into absolutely positioned layers that move in response to the mouse.
http://potentpages.com/parallax-scroll-tutorial/
Here is a tutorial that my company and I created describing how to make a webpage like you are talking about. It doesn't require any jQuery or advanced CSS.
There are numerous libraries and tutorials on how to create parallax websites. We listed some here:
http://potentpages.com/parallax-tutorials/
The relevant javascript is:
var topDiv = document.getElementById("topDiv");
var speed = 1.5;
window.onscroll = function()
{
var yOffset = window.pageYOffset;
topDiv.style.backgroundPosition = "0px "+ (yOffset / speed) + "px";
}
Where "topDiv" is the element that you want to move slower than the "regular scrolling speed." To make the element move slower, increase the speed variable. To make it move slower, decrease it.
There are multiple tutorials around the web regarding parallax effect. Here area two just form a simple google search for "parallax effect tutorial":
http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/
http://richardshepherd.com/smashing/parallax/
http://stephband.info/jparallax/
window.onscroll = function(e)
{
var val = document.body.scrollTop / your_scroll_factor;
document.getElementById('your_background_image').style.posTop = -val;
}
I have a design in mind which I'm struggling to convert to a GWT layout.
Basically I need a header and footer which have a fixed pixel height and full browser width, the snag is they must both always be visible to the user.
I've been playing around with the DockLayoutPanel with north and south panels and then adding a scroll panel to the center, this works great when I use Unit.PCT but I need to fix the north and south panels so that they are always a set height in pixels but still allow the center scroll panel to automatically fill the gap between the two.
A picture is worth a thousand words so I drafted up this quickly:
draft design
If you have any ideas how this could be solved I'd be very grateful to hear from you!
final DockLayoutPanel dPanel = new DockLayoutPanel(Unit.PX);
dPanel.addNorth(new FlowPanel(), 48);
dPanel.addSouth(new FlowPanel(), 48);
final Panel centerPanel = new FlowPanel();
for (int i = 0; i < 100; i ++)
centerPanel.add(new Label("Lorem ipsum"));
dPanel.add(new ScrollPanel(centerPanel));
RootLayoutPanel.get().add(dPanel);
Maybe it's a little bit off topic, BUT, I would suggest for you to use this if it is still not too late and if you have the freedom to choose a design:
http://gwtbootstrap.github.com/
Twitter Bootstrap looks nice and it is easy to use, and the kind folks at gwt-bootstrap have ported it into GWT in a way that you can use it in a similar fashion to using standard GWT components. This thing has really simplified our design/layouting problems.
I have recently created this WordPress site and have used pixels and margins to create the layout of the two semi-transparent content boxes. However, as I'm sure those more experienced than me are aware this is not at all responsive and not very cross browser friendly either! So I have been advised to swap to percentages rather than pixels but can't work out where to start with my existing CSS!
Will I need to make a layout with 5 columns to achieve this?
first column blank to create left hand blank space
second column to include larger blue content box
third column blank to create space between two columns
fourth column smaller blue content box
fifth column to create far right hand blank space
Is there an easier way?
Here is a link to my existing stylesheet
Any help would be greatly appreciated, or if I've forgotten to pass on some required information please just let me know!
Simplest way to do this:
Find the widest element. It's width, XXXpx, is going to be your new 100%.
Find every other element with a px value, YYYpx. It's width is going to now be (YYY/XXX * 100)px.
Visually go over your site and make sure everything looks right. Not all styles are meant to be percentage based, so you will need to revert a few here and there.
You can take a look to http://adapt.960.gs if you want something more responsive ;)
It's quite easy to use:
You have to add the JS file at first:
<script src="js/adapt.min.js" type="test/javascript"></script>
Then CSS (as a fallback in case of JS is deactivated on user browser):
<link type="text/css" rel="stylesheet" href="css/960.min.css" />
At last some JS lines to tell browser to switch the CSS file depends on browser width:
<script type="text/javascript">
var ADAPT_CONFIG = {
path: 'assets/css/',
range: [
'0px to 760px = mobile.css',
'760px to 980px = 720.css',
'980px to 1280px = 960.css',
'1280px to 1600px = 1200.css',
'1600px to 1920px = 1560.css',
'1920px = fluid.css'
]
};
</script>
Then you will be able to use a standard grid in your HTML and it will adapt itself for every uses.
The page http://adapt.960.gs/ will provide you additional instruction and demo (try to resize your browser's window or visit it through your mobile) ;)