I am fairly new to web development and I have the following in HTML:
<div id="map" style='width: 97vw; height: 76vh;
max-width:100%;
max-height:100%;
left: 0px;
top: 0px;
border-radius: 6px 6px 6px 6px;'></div>
I was trying to make div section automatically adjust itself as discussed many times before and using vw, vh seemed like the simplest solution here.
However when I stretch the width of the page, I get 'jumps', it don't auto adjust itself continuously.
This is before stretching:
This is just after stretching a little:
I am trying to keep the code clean, therefore it would be best if I can solve this using only html (yet I would still use javascript, css etc. if they provide faster/better solutions).
My goal is to have this map always ending from say 10px before the end of the entire screen, and adjust its size continuously when user stretches the page. What would be the best way to do this?
Note: I am aware similar subjects has been discussed several times before and I went through their content. However I don't think this is a duplicate because I am more concerned with the details such as 'jumps' as described in images, and I want to have a specific ending relative to end of the screen rather than just filling the page or having a ratio of it.
Related
I have tried to make my site tokyocomedy.com to be responsive design down to a minimum of 320 pixels wide. Most, if not all, pages, such as this top page look reasonably good down to that size, using Firefox's responsive design view:
However, this one page, the schedule page, is not working:
The width it gets stuck at seems to be around 530 pixels:
The only thing that is different on this page is the calendar, so I could be wrong, but my best guess is that something about the calendar CSS or JavaScript is holding some minimum width or padding space or something. I have gone through all the elements I can find using the Firefox web developer inspector:
Relevant CSS IDs and classes seem to be #calendar, fc-toolbar, fc-header-toolbar, fc-view-container, fc-view, fc-list-month-view, fc-widget-content, and fc-widget-header. However, I can't find any width declarations, padding, margins, or any other sizing declaration that would explain why the page will not shrink horizontally. It's possible that maybe there is JavaScript acting on the styling that is altering it in a way that is less easy to find.
The page uses the fullcalendar v3.9.0 JavaScript library. I've put the CSS in use on PasteBin for reference.
What is preventing this calendar page from shrinking down to 320 pixels like other pages on the site?
There is a small error in your code. You need to use word-break css property here as your email text is big. kindly refer to attached screenshot.
Hope it solves your problem.
please add below two property and check
* {
box-sizing: border-box;
}
#maincontent {
float: left;
width: 100%;
}
You used display:inline-block style.css line no. 60 ,use display:block rather than display: inline-block
#maincontent, #upcomingshows, #recentblog{
display:block;
vertical-align: top;
}
I am writing a responsive web page using a blur filter to full screen blur an image. It is a big image and I use it as background. The point is, I use it as background as a CSS background.
E.g. I don't use
<img src etc.
I use the css property background. This gives me the advantage of using background-size for the responsive layouts. E.g. cutting off edges for mobile devices, and automatic shrinking, depending on landscape and portrait too.
This would be a lot of work, to do by hand.
Problem is, sadly, IE. Internet explorer 11 does not offer a way to use css blurring.
EDIT as mentioned in the comments, I could just blur the image myself in photoshop and am done.
The problem is, for lower resolutions I need different blur levels. If the screen size is 600x400 I cannot use the same blur that I was using for 1920x1200. So I have to blur ALL background images I have for ALL resolutions I am using. Then implement a loading Technic to only load the images that are needed. There are many background images. Around 50 total. New ones should be able to be added by the customer as well. I really don't see me making him do this process.
I read about:
StackBlur
But I can't seem to get it working.
What I tried in a codepen so far
HTML
<canvas id="canv" ></canvas>
CSS
canvas {
width: 100px;
height: 100px;
border: 10px #c0272b outset;
box-shadow: 0px 0px 12px 2px #333;
cursor: default !important;
background: url('data:image/jpeg;base64,...') center center no-repeat;
}
JS
stackBlurCanvasRGB( "canv", 0, 0, 100, 100, 5 );
as a reference the codepen i stole the image from
I implemented a "mini epub reader" in my app. In order to determine how many pages are in a chapter (based on pagination for the underlying UIWebView frame width), I get the scrollWidth via
document.documentElement.scrollWidth
and using the CSS style
-webkit-column-width: (UIWebView's frame width).
and divide it by the UIWebView's frame width. So basically my "get next/previous page" uses the following Javascript
window.scrollTo()
Works fine except when the text fills up basically one viewable page exactly. In that case, it seems the document.documentElement.scrollWidth is one page (UIWebView width) larger than necessary, and what I see are blank pages at the end of a chapter.
Any ideas how to avoid this, or somehow detect "blank" content in the viewable area?
BTW, this is when I'm handling ePub files with Japanese tategaki, so in reality I'm using
document.documentElement.scrollHeight
but the idea should be the same.
Turns out, it was the margins causing the blanks. This CSS did the trick
margin-left: 0%; margin-right: 0%; margin-top: 0%; margin-bottom: 0%;
Here's the site:
http://philly.thedrinknation.com/mobile
On smartphones, the screen is too wide - allowing you to scroll to the right a little bit, rather than being exact fit.
On a desktop you can reproduce this in FF, make your browser about 350 px wide, then use the keyboard arrows to scroll right.
I have narrowed this down to the javascript from sharethis:
http://w.sharethis.com/button/buttons.js
If I take out that call, the page is fine. Add it back in (even on pages not using the widget), and the scrolling comes back.
It looks like they modified their code back in March, and I'm guessing that might be related. I asked them about it, but so far no response.
Can anyone give me pointers on debugging this further? I will copy the .js file locally to edit it if need be, but so far I can't see what is causing the problem.
Strictly speaking, your issue isn't caused by javascript. Rather, it's caused by styles that AddThis is using. The #stwrapper element used by AddThis has an explicit width of 354px that is causing your issue. The problem is caused by this css coming in an AddThis stylesheet (hosted by them):
.stwrapper {
position: absolute;
width: 354px; /* This is causing the issue. The width of this element ensures that the page can never be smaller than 354px */
z-index: 1000000;
margin: 0;
padding: 0;
top: 0;
left: 0;
visibility: hidden;
height: auto;
}
As this stylesheet is coming from AddThis and you don't have control over it, you need to override the styles in your own stylesheet while ensuring that AddThis still works as intended.
I can't see where you're actually using AddThis, so it's hard for me to suggest what style adjustment you should make that will fix the width issue and keep AddThis working, but something like the following would be a good start:
.stwrapper {
width:auto;
}
Here's the problem. I have an image:
<img alt="alttext" src="filename.jpg"/>
Note no height or width specified.
On certain pages I want to only show a thumbnail. I can't alter the html, so I use the following CSS:
.blog_list div.postbody img { width:75px; }
Which (in most browsers) makes a page of uniformly wide thumbnails, all with preserved aspect ratios.
In IE6 though, the image is only scaled in the dimension specified in the CSS. It retains the 'natural' height.
Here's an example of a pair of pages that illustrate the problem:
The list, which should show thumbnails
A single blog post, which shows the full-size image.
I'd be very grateful for all suggestions, but would like to point out that (due to the limitations of the clients chosen platform) I'm looking for something that doesn't involve modifying the html. CSS would also be preferable to javascript.
EDIT: Should mention that the images are of different sizes and aspect ratios.
Adam Luter gave me the idea for this, but it actually turned out to be really simple:
img {
width: 75px;
height: auto;
}
IE6 now scales the image fine and this seems to be what all the other browsers use by default.
Thanks for both the answers though!
I'm glad that worked out, so I guess you had to explicitly set 'auto' on IE6 in order for it to mimic other browsers!
I actually recently found another technique for scaling images, again designed for backgrounds. This technique has some interesting features:
The image aspect ratio is preserved
The image's original size is maintained (that is, it can never shrink only grow)
The markup relies on a wrapper element:
<div id="wrap"><img src="test.png" /></div>
Given the above markup you then use these rules:
#wrap {
height: 100px;
width: 100px;
}
#wrap img {
min-height: 100%;
min-width: 100%;
}
If you then control the size of wrapper you get the interesting scale effects that I list above.
To be explicit, consider the following base state: A container that is 100x100 and an image that is 10x10. The result is a scaled image of 100x100.
Starting at the base state, the
container resized to 20x100, the
image stays resized at 100x100.
Starting at the base state, the
image is changed to 10x20, the image
resizes to 100x200.
So, in other words, the image is always at least as big as the container, but will scale beyond it to maintain it's aspect ratio.
This probably isn't useful for your site, and it doesn't work in IE6. But, it is useful to get a scaled background for your view port or container.
Well, I can think of a CSS hack that will resolve this issue.
You could add the following line in your CSS file:
* html .blog_list div.postbody img { width:75px; height: SpecifyHeightHere; }
The above code will only be seen by IE6.
The aspect ratio won't be perfect, but you could make it look somewhat normal.
If you really wanted to make it perfect, you would need to write some javascript that would read the original picture width, and set the ratio accordingly to specify a height.
The only way to do explicit scaling in CSS is to use tricks such as found here.
IE6 only, you could also use filters (check out PNGFix). But applying them automatically to the page will need javascript, though that javascript could be embedded in the CSS file.
If you are going to require javascript, then you might want to just have javascript fill in the missing value for the height by inspecting the image once the content has loaded. (Sorry I do not have a reference for this technique).
Finally, and pardon me for this soapbox, you might want to eschew IE6 support in this matter. You could add _width: auto after your width: 75px rule, so that IE6 at least renders the image reasonably, even if it is the wrong size.
I recommend the last solution simply because IE6 is on the way out: 20% and going down almost a percent a month. Also, I note that your site is recreational and in the UK. Both of these help the demographic lean to be away from IE6: IE6 usage drops nearly 40% during weekends (no citation sorry), and UK has a much lower IE6 demographic (again no citation, sorry).
Good luck!