Can't figure out either box-sizing, media queries or javascript - javascript

Can't for the life of me figure this one out. I'm building a site: http://ingenious.jit.su/ and I've set up a sidebar that follows you down part of the page. I was pretty damn happy with it until I discovered this bug.
If you open in in Chrome on a Windows machine, and you resize the browser width to between 781 and 798 ish, the sidebar becomes fixed over the content of the page : (
For some reason it seems my media query is activating before dropping below the max-screen width of 780px.
Any help would rock!

Well there's a couple ways to tackle this. Your JavaScript is causing your #followbarto be fixed, and you could either make edits there, or just add this to your css under your #media screen and (max-width: 780px)
#followbar
{
position:static !important;
}
That's just a quick fix. Your JavaScript could probably use a bit of tweaking, but this will handle it.

Related

Website content jumping up and down when resizing window?

I noticed on some screens and initial load my website content jumps up to meet up with the bottom of the banner. When you resize the window the banner seamlessly resizes to fit. However while resizing the window you will notice the content jumping up and down. I feel like it has something to do with the header height but not sure why it would be delayed in meeting up with the bottom of the banner.
I have posted code question on here without asking this question direclty trying to solve the issue. (For example making a script that changes the header height when the banner size changes.) But was unsuccessful in getting it to work the way i needed and think it was the wrong route anyways.
You can see the site HERE - Resize your browser window to see the content jump and and down.
Any help in the right direction where I could solve this issue would be great! Thanks!
You are using a CSS layout which tries to 'fit' everything perfectly. This is known as a reponsive design (on each 'breakpoint' defined in your css it even tries to use a different height). While this is nice for a website to have (it means that on any device it looks good, to fit) it does put some stress onto the css.
Unfortunately, it is very hard in a comment to help you out. Since it requires some basic refactoring to get a much better performance. If you are interested in fixing it however, a good place to start learning what to take on is: https://developers.google.com/web/fundamentals/performance/rendering/
Also, and this might help allot if you are interested, you can actually 'see' how hard your computer (or device) is working for the drawing performance. When in Chrome (OS X or Windows, doesn't matter) you can open the inspect view (ctrl+shift+j) and go to the timelime tab in the upper bar. When you have opened your website, press the leftmost 'record button', then resize the browser and press stop recording. You will end up with a screen similar to this: https://i.stack.imgur.com/6lS3I.png (this is just an example, not your site).
In the timeline view you can keep track of your performance, you want to avoid purple (layout) bars since that 'costs' a lot performance wise (also the link mentioned earlier explains this very well). As developers we tend to aim for 60fps drawing performance, however this takes quite some effort to reach (especially on full responsive websites). Currently the layout trashing alone takes about 15ms and 10ms paint on your website (on my game pc!). As I 'strip down' the site (leaving only the header) the resizing is fast enough to render smoothly. Clearly the solution to your problem can be found in optimizing your CSS.
On a side note, other than the resizing, you don't seem to have many issues regarding performance it seems. No heavy scripts run around scrolling or anything. Which is a GOOD thing already. And I am quite sure most of your visitors won't be resizing all the time ;-) Hope this helped!
I'm not sure but i think it's because of your responsive design has no min-width and max-width defined.
It's used to limit an element that has responsive design to not get too big or too small.
sample:
.header {
opacity: 0.7;
font-size: 8pt;
color: grey;
width: 100%;
min-width: 150px;
vertical-align: top;
}
you could try reading bit bout it here, good luck trying to fix that page :)
http://www.w3schools.com/cssref/pr_dim_min-width.asp

CSS/JavaScript - Mobile JavaScript stops working under 771px

I have very strange problem.
I am developing mobile version to my website and i have very strange problem.
When i open my page with mobile that is having screen height over 770px everything is working well. So when i open it with 771px it's works.
But if i change the screen height to 770px the javascripts is not working any more.
First of all i found all #media only screen and (min-width: 771px) { rules in my CSS files and replaced them to #media only screen and (min-width: 350px) { but even with that change it is not working.
I've searched for any occurence of 770 or 771 in all my CSS files and style rules and there is none like that, but still the javascript is not working.
Here is my complete javascript: http://pastebin.com/HJyDrVYd
Here is my complete css: http://pastebin.com/M3Cu5qfF
Here is my HTML output of the page on which i have this problem: http://pastebin.com/CBgedJmZ
I run out of suggestions from where the problem may come and why the mobile version have working js with screen height 771px or higher but not lower.
Can you give any suggestion and help ?
Thanks in advance!

Where in the HTML/CSS/JavaScript is Mobile Formatting Handled?

Consider the following site: 200minus.com
This site looks good on both a mobile phone and a desktop. It's as if when you view the site on a mobile phone, everything is appropriately shrunken. Where in the source code (HTML/CSS/JavaScript) is this being dealt with (or is this typically dealt with)?
In the CSS as media queries.
You can adapt the layout of CSS styling, depending on what size the browser window it's being viewed with is.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries, and
the official W3C documentation: http://www.w3.org/TR/css3-mediaqueries/
Theres 2 typical approaches to page design in mobile/desktop situations.
Adjust the page to suit the size of the display at load.
or...
Make the page respond to it's size dynamically( This is referred to as responsive design).
It is considered good form to use responsive design, as it has obvious advantages for screen resizes. Such as if a tablet/mobile was rotated or if a desktop user resized their window.
A good design should be implemented predominately in css as it is the fastest part of the page to update/ evaluate, and is simpler to implement than modifying the page style than JS. Proportional layout and forward planning help considerably when it comes to producing a layout that works well on many screen sizes and many guides will instruct you to design for mobiles first, then adjust for desktop sites. Personally I try to think of them as one part that is never a fixed size.
The bread and butter of responsive design is media queries; they allow you to only active certain css rules under one or more conditions. For example:
#media (min-width:650px){
.about_tablet{height:175px;}
}
#media (min-width:650px) and (max-width: 675px){ /* both conditions must be met */
.about_tablet{height:175px;}
}
#media (min-width:650px) , (max-width: 675px){ /* one or both conditions must be met */
.about_tablet{height:175px;}
}
Another very useful trick is viewports
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width" />
They can be a little strange, behaviour isn't uniform across older mobile devices and they don't work at all on desktops, but they are quite useful. You can force a page width and scale the page on a pixel by pixel basis (800 px image on a 400px wide screen for instance). Prevent the user from being able to zoom in, or limit the zoom. Most useful is the width=device-width" which prevents the horrible zoomed out effect you get on non optimised webpages when you view them on a phone.
If theres a more specific concept you want to talk about I'm happy to help, a vast majority of my work is done for mobiles.
This is simple Bootstrap. Just try it out! I think it's really good. Also mentioned in the answer above this is everything done with CSS. For example this:
#media (min-width:768px){.container{width:750px}
}
#media (min-width:992px){.container{width:970px}
}
#media (min-width:1200px){.container{width:1170px}
}
When the width is smaller than 992 px the container will be set to 750px.
Greetings
In CSS using media queries, as explained here:
http://css-tricks.com/css-media-queries/
For example:
#media screen and max-width:600px { /* CSS here */ }
Is a common brakepoint that I use.
For some specific handling I've found I have to use javascript or jQuery to really get the effect I want, but generally CSS media queries and some intelligent and creative use of showing/hiding objects with the display property will get you 99% of the way there.

CSS+JS: webkit-calc or alternative method to animate things in a responsive environment

I'm coding a web app with PhoneGap for smartphones so I need to have responsive CSS to adapt to the various width, but most important in my case, heights
So I have a main #wrapper with style height:100% and I want to tap a button and slide it up all the way to the top, but 50px.
If I would know the exact height of the screen, let's assume 480px, I would simply do translateY(-430px), done.
I tried using webkit-calc, but beside it's supported only by few browser, I got crashes everytime I use it. dunno why.
What's the best practice to solve this simple problem?

bad css causing really bad layout on small devices

I built a website with Foundation 4 and having some issues (lots of them) with the responsive part of it, decided to get rid of the viewports in the CSS which I thought would cause the website to render normally on small devices but the result is really bad and I'm not sure what's causing it. I have no more #media targetting small devices in the CSS and yet it still very very messed up.
You can look at the results on different devices there:
http://www.viewlike.us/
This is my website
http://broadcasted.tv/
Can anyone tell me what's wrong ? (Javascript or something ? I don't know, but it's bad...)
Is there a way to tell the browser to ignore diffferent width and handle everything the same way ?
Thanks
don't delete the #media queries, they are what is used to display things differently for each device. If you're trying to ignore different screen resolutions, you're not using responsive design.
EDIT: looking at your website, it seems to be fine for resolutions 1041+... with that knowledge, use those #media queries to get rid of that giant bar on the side.
Use a min-width for your header and divs so they don't become smaller than the desired size, I see something like that happens to your header.
For example, I just tried adding min-width:1100px; to your top-bar div, and there seems to be less of a problem in that part.
I'm not saying having a 1100px header is recommended (because it's not) but I'm just using it as an example.

Categories