I'm porting chrome extension to Firefox and I'm testing on Nightly 51a.. version.
When I click the popup options icons it opens and scrollbars appear and after half a second those disappear.
How to correct this?
At the moment I've given a hyperlink in the top in the optins popup with this code which when clicked opens full view html in a new tab and this works just fine:
<a style="font-size:1.5em;" href="options.html" target="_blank">Open Full Window</a>
The popup that is being shown for a browser_action is, currently, being set to a maximum of 800x600 pixels (at least in my testing). However, your content is being rendered at a much larger size while having the scroll bars not shown to the user (either not rendered at all, or positioned outside of the view into the document provided by the panel).
There are multiple ways to solve this. However, I was not able to find one that did not result in specifying an explicit height and width for the <body>, or a sub element (e.g. a <div> enclosing all content). Several ways showed the scroll bars, but left them disabled.
The simplest way to get the scroll bars to show up, is to change your HTML from:
<body>
to:
<body style="height:580px;width:800px;">
Obviously, you could also change this in your CSS (banks/options.css). From:
body{
min-width:500px;
min-height: 500px;
}
To:
body{
height: 580px;
width: 800px;
min-width: 500px;
min-height: 500px;
}
However, neither of those allow for the possibility that the panel will be shown with different dimensions (e.g. on other sized screens, or if Firefox changes what it is doing).
Thus, my prefered solution is to use JavaScript. In options.js add something like:
function setBodyHeightWidth(){
let width=window.innerWidth;
let height=window.innerHeight;
height -= 20; //Adjust for Save button and horizontal scroll bar
//document.body.style.width=width; //Does not work
//document.body.style.height=height; //Does not work
document.body.setAttribute('style','height:' + height + 'px;width:' + width + 'px;');
}
function onDOMLoaded(){
setBodyHeightWidth();
//Anything else you need to do here.
}
document.addEventListener('DOMContentLoaded', onDOMLoaded);
Using a significantly trimmed down version of the code for your extension (i.e. I removed all your JavaScript, and most of the non-visible HTML), the above code makes it look like:
Related
I need to make a classic full screen landing page with a h1 title, a h2 sub-title and a call-to-action button to slide the content to the first div of the website. I really hope you can help me because the website should go online soon and this is the one thing that's stopping me from saying it's finished, I'll try to tell you everything so you have a better understanding on what's going on.
Here's my Fiddle: jsfiddle.net/daghene/szp7yf7h/1/
And this is an online version of the real page with the first bit of
content below it http://andreacordioli.com/macwip2
I'm using Skeleton Framework and the div containing the fullscreen image is outside the .container who's wrapping the grid, while the h1, h2 and button are inside it. Right now I have two problems:
for some reason, only in this part of the website, text bigger than a certain point exceeds the page width making the website scrollable horizontally under a certain point
I made it so the text gets smaller under the 550px mark which is where the Skeleton grid comes into play. I tested it on my Motorola Moto X which has around 1280x720 resolution and noticed if I check the website in landscape it doesn't trigger the smaller resolution text propieties and the text exceeds the width of the windo again: this happens on iPhones in Chrome tester too
What I wonder right now is: as of today, what's the best practise to make a 100% responsive landing page with such simple content that is always centered, works on all possible resolutions and device orientations withou exceeding borders and has the text always at a decent size never being too big?
For instance, the text exceeding the width is 8rem which equals to 80px in Skeleton. Here's the page I'm trying to achieve, which I'll need to serve a different image for on mobile when aspect ratio is X:Y where Y gets bigger than X somehow:
If you try it it kinda works and I even tested it on my old, first Samsung Galaxy Tab which has the super old Android 2 or 3 browser which gives me more problems than IE but actually centers everything correctly with this code...but the main issue is that the text isn't scaling properly and if the window is too narrow it either disappears on the right, making the window scrollable on the right and part of the big title unreadable, or if it gets too small(say my 1280x720 4,7" Moto X) the call to action button disappears since the screen window is too short and there's the browser bar too. I put overflow: hidden to this windows to be sure there's no horizontal scroll but the real problem is not the scroll, it's the text exceeding the div instead of getting smaller.
LAST NOTES!
If you check the css there's a "-1rem margin" on the H1 because as I
said for some reason in this specific section the H1, and just that,
doesn't center. The H2 and Button are centered, the H1 is not and
only here...don't get why.
If you try to make the window horizontally smaller you can see the text touches the window on the right side first(both in the Fiddle and in the other link where there's no html and body margins), still can't get why and I feel that's what's preventing the text to stay centered while getting smaller.
It looks to me that some of the problems you describe are because at viewport 550px wide, your h1 font jumps in size from 5rem to 8rem. But at this viewport size there isn't enough horizontal space to hold your h1 text and so it exceeds the width of its parent div, and hence appears to be off-centre.
I think a solution would be to tweak your CSS in http://andreacordioli.com/macwip2/css/includes.css starting around line 1047 to something like the following:
#media (max-width: 625px) {
.bigImage h1 {
font-size: 5rem;
}
...
}
Hope this helps!
We are working to make one of our responsive sites more accessible, but are struggling to get our heads around ARIA as it seems to go against the core principle of separating design elements from the HTML.
For example if an element is hidden in aria one would indicate it as aria-hidden="true". However most visibility is determined by media queries depending on screen size etc.
In other cases elements work completely different based on media queries. So at some sizes aria-haspopup="true" would be appropriate while on other resolutions the navigation is always visible.
Am I missing something, or are we at font tags all over again with this standard? Are we supposed to add / remove aria tags using javascript as appropriate?
Actually Kenneth, your question makes a lot of sense, and, yes - tooling for responsive sites is not ideal. I don't have an answer for you, but what I have to say is too long to be a comment...
Consider the following example:
You app has a menu button that opens a side drawer using a short sliding animation. Without a11y considerations, your job is easy (lets assume the drawer is on the left and has a width of 250px):
#media ... (min-width: 1000px)
#drawer {
left: 0;
}
#media ... (max-width: 999px)
#drawer {
left: -250px;
}
#drawer.opened {
left: 0;
}
(Not an exact syntax, add your own wizardy for the sliding animation)
To make this accessible, you'd have to do one of the following:
option 1
Don't use aria-hidden='true'. It's generally enough to hide the drawer using visibility:hidden or display:none. Of course, now you need to wait for the end of the sliding out animation to hide the drawer (or you
lose the animation).
option 2
Use aria-hidden='true'. You'll have to catch window resize and add / remove aria-hidden='true' when switching sizes (you lose the media query magic).
To sum things up, you're right. There's definitely room for improvement. This is especially true, considering the general shift to move stuff off of JS to keep things 60fps smooth.
You have to use the window.matchMedia function
For instance:
var mm = window.matchMedia("(min-width: 600px)");
mm.addListener(updateAriaHidden);
updateAriaHidden(mm);
var updateAriaHidden= function (obj) {
if (obj.matches) {
// set aria-hidden true/false when width >= 600px
}
else {
// set aria-hidden true/false when width < 600px
}
}
Using jQuery for instance, you can use the :hidden selector with a custom CSS class to set the aria-hidden attribute dynamically:
$(".toggleable:hidden').attr('aria-hidden', true);
$(".toggleable:visible').attr('aria-hidden', false);
The use of the custom class make it easy to match the elements which would change based on your media queries
I am creating a reporting system and i am having a bit trouble with my printing functionallity.
My plan was to place a div in my body element in the index.html
<div class="print" id="printcontainer"></div>
with the following css
#printcontainer{
z-index: -50;
position: absolute;
top: 0;
left: 0;
overflow: visible;
}
Then on print i'll render all report panels in my printcontainer somthing like this:
for (var reportCfg in reports) {
reportCfg.renderTo = 'printcontainer';
createReportPanel(reportCfg);
}
so far so good. If the Browser window is big enough it all works fine. But on a small screen or if you make your browser window smaller the panels are not rendered big enough and the reports are cropped. It only renders the width which the body element has. which is the size of the browser window.
I know i could just add a width to my reportCfg (so my panel gets a fixed width). The problem is these reports all could have different widths depending on their columns.
Is there a solution i could render them bigger than the body width ???
For now i came up with the following hack though im not very happy about it.
I am overwriting the afterRender fn of my report panel and then i check if the grid header has a bigger scrollwidth than the width of the panel.
afterRender: function() {
this.callParent(arguments);
//hack for printing page so panel gets rendered big enough
if (this is panel for printing) {
Ext.resumeLayouts(true);
var header = this.down('[id^="gridpanel"] [id^="headercontainer"]');
if (header && header.el.dom.scrollWidth > this.getWidth()) {
this.setWidth(header.el.dom.scrollWidth);
}
}
},
Is there a better solution to accomplish such a thing? Imo there must be a better solution.
If you need more information, dont hesitate to ask.
I have fitVids working on my site. However, I'm wondering if it is possible to prevent fitVids from enlarging a video beyond its defined height/width. For example, if a video is 600px wide, but the container is 800px, fitVids enlarges the video to 800px wide and it is blurry. I'd only like fitVids to shrink the video when the container shrinks for smaller devices. Is that possible?
jQuery(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$("#thing-with-videos").fitVids();
});
helgatheviking's solution constrains the width of the video, but not the height. If your container is wider than the video, you end up with a really tall, letter-boxed video. The height is easy to fix, using the same technique to constrain the width. But, there's a third variable.
fitVids wraps the iframe in a div, with the class "fluid-width-video-wrapper", and sets padding-top equal to the aspect ratio of the video. Even if height and width are constrained, the fluid-width-video-wrapper will still be as tall as the video could be, if it didn't have a max-height. So, you end up with a bunch of white-space below the video.
Rather than set all three values (width, height, and padding), you can simplify everything by wrapping the iframe in a div with a max-width, before initializing fitvids.
var vidFrame = $('#fitvids_container').find('iframe');
var vidWidth = vidFrame.attr('width');
if (typeof vidWidth !== undefined) {
// Wrap the iframe in a Div with max-width defined
vidFrame.wrap('<div style="max-width:' + vidWidth + 'px;"></div>');
}
// Initialize fitVids
$('#fitvids_container').fitVids();
Like helgatheviking's solution, if you have more than one video per page, you'll have to calculate the max-width for each video.
One option is to make a small modification to the fitvids code which checks for a data-maxwidth attribute and if found wraps a div with a max-width style to limit the resized iframe.
This allows each videos max width behaviour to be specified independently.
For example. Add the data-maxwidth attribute to the iframe.
<iframe width="560" height="315" data-maxwidth="560" src="https://www.youtube.com/embed/L-UIiRlydow" frameborder="0" allowfullscreen=""></iframe>
Then add the following code snippet to the fitvids.js file, at the end of the $allVideos.each function, just after $this.removeAttr('height').removeAttr('width');
if ($this.data("maxwidth"))
$this.parent('.fluid-width-video-wrapper').wrap('<div></div>').parent().css('max-width', $this.data("maxwidth"));
It simple!
Assuming "thing-with-videos" is the ID of the wrapper on which you are calling .fitvids()
So just set the max width css property for this container.
Example:
#thing-with-videos {
max-width: 600px;
margin: 0px auto;
}
This wont let your video width go beyond 600px. Margin property will center your video container.
Live Edit Demo -
http://bitconfig.com/fit-vids/bitconfig_fitvids.html
Set your custom width in the "Video container width" textbox and watch the preview!
-Patrick
Patrick's answer eventually made me realize that I could put a max-width on the iframe itself.
#fitvids_container {
max-width: 600px;
}
#fitvids_container iframe {
max-width: 500px;
}
However, if you were using a lot of videos (of different sizes), you might want to do this dynamically. With jQuery we can get the width from the iframe attribute and make it a max-width style rule. This only works if you've included the width attribute in your embed code though. This is a single example, but could be adapted to an .each() loop or at least renaming the container div to a class.
var width = $('#fitvids_container').find('iframe').attr('width');
if (typeof width !== undefined) {
$('#fitvids_container').find('iframe').css('maxWidth', width + 'px');
}
See my example: http://jsfiddle.net/Qd4FW/2/
this is pretty frustrating...
basically i'm creating a menubar on a site, and have used css sprite to have a hover effect where the image changes as you hover over it. this is working fine, but i can't display multiple images inline because i have to use display:block in the css for the sprite/hover class for it to work.
here is some of the css code i have:
.x a {display:block; width:100px; height:100px; overflow:hidden;}
.x a:hover img {margin-left:-100px;}
/* ie6 needs this fix*/
.x a:hover {zoom:1;}
and then here is the code in the php file (it's part of a wordpress theme, this bit going in the header.php file):
<div class='x'><a href='#' alt='#'><img src='#' /></a></div>
note: the image used is a horizontal sprite, so two images merged into one (100x100 turned into 200x100).
this alone works fine, but then when i add something to it like:
<div class='x'><a href='#' alt='#'><img src='#' /></a></div>
<div class='x'><a href='#2' alt='#2'><img src='#2' /></a></div>
it makes it go to a new line. i thought it may be a padding issue where it's overflowing on the line, but i've tried doing just two images (total area taken up maybe 210px) and it's in a 911px container area and still goes to a new line.
i've tried using < span> tags, tables, inline-block, and several other things but still no success. at one point i got it to stay inline but then the image was placed beneath all the others, in the correct horizontal position but wrong vertical position.
the goal is to have about 8 100x100 images all in a row in the menu bar, with one spacing in between each one, in a container with width 911px. they all will be in the 'x' class so that the image changes when hovered over.
sorry for writing so much but wanted to get it clear. please help!
The divs are rendering as blocks, which is why the images aren't sitting beside eachother.
If I understand what you're trying to achieve correctly, adding a rule
.x { display: inline-block }
will do what you want.
I made a JSFiddle to try it out: http://jsfiddle.net/XZWzW/