I have a problem with a layout im building. Page zoom works in every browser without errors, but in IE7 it does not. Even a little zoom makes the page looks wierd - background colors of elements does not follow the text inside those elements (text floating outside the box) and son and son on - have tried to find a solution, and been debugging a bit, but nothing seems to be working so far.
The previous version of the site i am building, works fine with Page zoom in IE7, so there most be some css setting i am doing/using, that makes it looking wierd. Any suggestions?
As I recall, the page zoom feature in IE7 is actually a text-resize feature, not a true zoom.
As with IE6, in order to have the layout resize in conjunction with the resize, elements must be sized using a non absolute value such as em or %. Absolute sizes such as px do not resize with the text increase.
The ie7 zoom functionnality has some issues. They are listed here and some solutions are described too :
IE7 problem with zoom and position:relative
IE7 problems with Zoom and inline elements
IE7 problem with Zoom and background image on body
Related
I hope this is not a "big ask" but I'm stuck. I asked this issue on github issues#1334 but I have not got any responsive from the maintainers of the project. Hopefully I can get help here.
Overview
My issue is that I'm trying to adjust the variable width slider (from react-slick documentation) in order to be:
finite
responsive (to different viewports) (if possible to display as many slides according to viewport width)
scroll only 100% visible slides
slides should fill the div display area
Observations
So far, I have managed to make it:
finite
Regarding responsive, breakpoints don't work well for variable width slides.
scroll only 100% visible slides, This is very important when it comes to variable viewport width and when using variable width slides.
slides should fill thedivdisplay area, finite variable width slides when they reach the last slide, even though it was already visible by the previous scroll, the user can still scroll and what is visible is a huge area of blank slides, for example:
The Code
The issue can be replicated and tested in code sandbox
...
...
Any help is welcome.
http://www.akaskyness.com/
This is in the early stages of development. I want this "cover" page to be non-scrollable, with the height of the white|black background adjusting to the height of the browser window. At the moment, when reducing the height of the browser window, the headers don't shift up proportionally and a scrollbar appears. I'm not really concerned about browser width at the moment because I haven't added any code for that yet.
I think I see what you mean - you want the <h1> and <h2> elements to shift vertically as the viewport height is resized, so that they don't end up off the screen (when it gets too short) and create a scrollbar.
In your current CSS, you try to do this using margin-top:17% on <header>. This seems like a logical approach, except something curious happens: the margin-top never changes, regardless of how you resize the browser vertically.
I'll be honest, this stumped me for a while, so I did some searching around about margin behaviour and found out this critical piece of information: "The percentage is calculated with respect to the width of the generated box's containing block." So the browser height is completely ignored in the calculation! If you resize the width of your browser, you can actually see how your headers move up and down on your webpage.
Well, that completely invalidates using a percentage margin to attempt to vertically align <header> relative to the viewport height. What now? Vertical alignment of elements is actually something lots of other developers have tackled in various ways. Here's a simple one that uses absolute positioning, by only rewriting the styles for <header>:
header {
margin-top:-3em;
position:absolute;
width:100%;
top:50%;
}
Here's a JSFiddle demonstration of this new CSS. Note that margin-top:-3em; is a bit of a guess on (half of) how tall your headers are, so if you don't want to hard-code that value, you'll probably have to look at a different approach for vertical alignment (this is just one of the easiest). Also, if you don't want it vertically centered, just change top:50%; to a different percentage value.
Hope this helps! Let me know if you have any questions.
I know very little about programming, but I'm excited about the prospect of Polymer making these advanced objects as simple as working in an HTML doc. Anyway, there's some basic stuff I can't figure out, like how to get a section to scroll to fit nested content, like a bunch of cards.
Here's an example
In a full, widescreen monitor, all 8 cards on the "100 years" tab are displayed fine. But as soon as you resize the window to something much narrower, like a smartphone screen, you realize you can't scroll, and thus can't access all of the content.
How do I enable scrolling for this?
The core-animated-pages element is overflow: hidden, and all the visible elements are children of that element.
If you set the core-animated-pages element to overflow: auto, then it will be scrollable.
I've created a deep zoom image with nearly 200 SubImages. I just loaded the main image into Deep Zoom Composer and loaded all the SubImages and exported. I then used code to position and scale the SubImages by editing the dzc_output.xml.
All seems fine apart from when I show the image. Only the SubImages from mid way down up the image show.
When I zoom in on areas where I know there should be SubImages, they do appear.
I'm I hitting some kind of limit with MultiScaleImages or is there a way to control the 'zoom' level that an image shows in the control?
I Worked it out.
Using Fiddler2 I noticed several 404, Silverlight was looking for image files in a path with /dzc_output_out_images/ as part of the path. Which didnt exist.
I'd changed the name of the dzc_output.xml file to dzc_output_out.xml.
Change the name back, all images are appearing now.
Is it possible to resize a silverlight/flash video player on the fly? I would like to create a video where I can drag the bottom left corner to resize the player (maintaining aspect ratio) or at least eliminate the possibility of doing so I could move on to other methods.
Thanks in advance...
EDIT: // forgot to mention
Sorry forgot to mention, this would also mean that the actual video itself resizing right?
Silverlight: Absolutely. Just set the the Stretch property to Uniform and then alter either the Width or Height as you resize.
Flash: Yes, you can alter the size of a flash object through JavaScript. Using a YUI, jQuery, or a Mootools JavaScript library, this should not be too difficult to prototype.
Here is a posts which explains how to resize flash from within your flash code.
Proportional resizing - here is an example of that as well using jQuery.
I'm not sure if the same is true for Silverlight browser objects, although I'd be surprised if you couldn't do the same.
This is a CSS solution for resizing videos on the fly.
The video can even resize itself according to the user settings if it is styled using EMs. This demo shows how a video resize itself according to the width of the user agent.
Here is an example of the silverlight scaling. This photo retouching and restoration site has a couple of silverlight controls that scale with browser resizing. There is quite a nice photo gallery that shows the photos before and after the retouch.
JWPlayer
As of version 5.3 they added a resize() method to the javascript API which allows you to resize a player - and all the control bar etc. will resize correctly too.
http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12540/javascript-api-reference
resize(width, height) Resizes the
player to the specified dimensions.
width:Number: the new overall width of
the player.
height:Number: the new
overall height of the player. Note: If
a controlbar or playlist is displayed
next to the video, the actual video is
of course smaller than the overall
player.