When I embed a long gist (in this case of a Jupyter Notebook), the resulting box on my website has vertical scrollbars. I'd like to avoid these scrollbars and just have a longer page (in the same way it's on the actual gist website). Is there any way to do this, with CSS or otherwise?
I'm basically looking for the exact opposite to
Make Gist embed scrollable
Note that specifying a minimum height in CSS does not work: It produces a white box of the correct size, but the content is still scrolling in the top part of that box only
As I can check, the embed code inserts an iframe and there is no simply way to detect the height of that document (cross-domain).
This might help: Resize Cross Domain Iframe Height
But keep in mind that the workarounds are overkill, I think.
Related
I've designed and coded an interactive SVG that I've had to implement as HTML in WordPress because it only acts as a useless static image if it's entered as an SVG in an image block.
So far, that means that it's not responsive and loads at full size on a phone. I want people to see it in full, straight away, not zoom out to see it.
Is there another way to make it work without being an HTML dump? And even as code, how would I reduce it to fit screen sizes? Bearing in mind that my brain may implode if you suggest coding breakpoints or something like that.
I'm using a Blocksy child theme with no page builder.
The code itself works fine so there seems no point in me pasting a shortened version of the code. The page is here, if that helps.
Www.orderaround.co.uk
Right, I've fixed it myself. All I needed to do was remove the width and height specifications from the beginning of the svg code. It now fits to whatever container it's being displayed in.
I have a site that I'm working that has navigation bar with secondary block-level elements (images in my case) inside the <a> tags which respond to the window size by either floating or not floating. As long as a user never resizes their browser window after loading the page, the issue would never occur, but it appears as though if the page is stretched wide, and then scaled down without reloading the page, the float style attached to the main CSS declaration (not inside a #media query) fails to activate.
http://jsfiddle.net/MrPickle/ace1rtrq/
Here's an example the behavior that I'm seeing (with the same css code I'm using for layout). If you play with the size of the result panel, you can see what I'm talking about.
I know that I could use javascript to monitor the width of the page and add or remove a .left class to the inner element as needed, but I don't think that's the most elegant solution possible. Has anyone ever run into this kind of an issue?
If you view this site and reduce the size of your browser window, the top two primary blocks (image carousel and "Latest News") will overlap: http://africanstudies.stanford.edu/
I have tried a number of methods to fix this, but I can't come up with anything that doesn't overlap and look awful. (I also had to add some width/height settings to the carousel because I think there may be a bug with jCarousel where the entire image is not displayed if you don't specify the height for example.)
What I'd really like to happen is both the blocks scale down as the browser scales, but I'm afraid that's beyond my current capabilities.
Anyone have any thoughts on how to handle this? I can post HTML/CSS, but it's pretty ugly.
You've set the height on #views_slideshow_singleframe_main_home_banner_cycle-block_1 to 270px, if you remove that then it seems to be fine. Btw, you have essentially the same issue in the horizontal direction, i.e. at a certain width the slide show overlaps the Latest News.
What is the best way to dynamically change the width and height of an HTML5 video within a webpage? The kind of behaviour I'm referring to is the same thing in the intro video of http://flipboard.com/
When the window is resized, the video still takes up 100% of the viewable size (without scrolling). I noticed that the video gets resized to a certain degree, but stops resizing and gets cropped at some point.
What is the best way to get the same behaviour? I want to have a video take up the entire viewable area of the browser without scroll bars. This is only on a desktop/laptop, I am not considering any mobile devices ATM.
What I have in mind right now is to dynamically change the width/height properties of the video to fit the viewable area using javascript, but also set a minimum size such that the video doesn't get distorted. The video can be placed in a container that is always centered, so if the browser gets to a size that is too small, it effectively gets cropped. I'm not sure if this is too long-winded and if there is an easier way.
Thank you.
It looks like they have the css properties of height and width set to 100%. If you use an element inspector like the one built into chrome or firebug for Firefox, you should be able to see exactly how they structured the html/css for the video element as well as the div its nested in. Then, as you said, also set a min-width/min-height property.
Unless I'm misreading your question, it should be that simple. Hope this helps!
you could do it with "Responsive CSS", there are some ways to do that,
you could set the viewport, max-width, min-width, etc.
This link have a nice explanation how to do that : http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/
In other topics I've found that IE/FF doesn't print background images by default. Now that's a shame, because background images add some possibilities that are very difficult to reproduce with classical <img> tags:
You can align them both horizontally and vertically
You can crop them if they are larger than the target element (which also enables the idea of CSS sprites)
Now, it's not impossible to do, but it will require me to have different HTML layouts for printing and normal page, and the printing layout will be quite overcomplicated (since I'll have to use <table>s to achieve vertical alignment). Also, the benefits of CSS sprites will be lost.
Is there any hope? I gather that #media print doesn't help, but isn't there something else, maybe browser-specific, that would allow one to say: "Yes, this isn't a normal background, it really needs to be there even in print view"?
Not possible. You would have to some how convert your background images to img or use Canvas. Of course using canvas depends on which IE you supporting.
Its a browser setting which restricts the printing of background images. I think the logic behind it was that the vendors wanted to give the users the option of printing background images and ensure that the web developer could not alter these settings through some sort of script.
As a general rule, background images should be reserved for adding to the page design but aren't essential to understanding the content. Therefore it shouldn't matter if they are missing when the page is printed. If something (such as a product shot) is important, then it should be included as an actual image (which has the added bonus of being more accessible).
Could you look at including the image, then hiding it using CSS and duplicating is as a background image (perhaps dynamically using JS)? That way, you can ensure the image itself shows in your print stylesheet, and you get the benefits that having a background image brings. I've created a very simple example here.