I am using this awesome Skrollr libary: https://github.com/Prinzhorn/skrollr (animations on scrolling)
So far I have this as my implementation:
<div class="band2 landing">
<div class="container">
<div id="inside" style="position:relative;height:700px" data-0="margin-top:0px" data-1000="margin-top:800px">
<img src="/static/images/snappie.png" width="280px">
<img src="/static/images/iphonehand.png" width="400px" style="float:right;margin-top:50px" data-0="margin-right:0px;" data-150="margin-right:190px" data-300="margin-right:0px;">
</div>
</div><!-- end container -->
</div><!-- end band landing -->
basically I am moving the entire "inside" div downwards when the user scrolls down. I increase the top margin by a certain amount when the user has scrolled a certain number of pixels.
While this technically works, it produces some really weird scrolling, as you can see here on the test site: http://snappiesticker.pythonanywhere.com/splash
see how the scrollbar quivers and shakes and how its hard to scroll past the yellow bar?
I feel like hard coding these pixel values is generally not the best way to go about this and will fall apart especially when using a variety of screen sizes, browsers, etc.
What is the correct way to do this? Any skrollr experts?
Instead of using margin-top, margin-right etc.
Try using the transform:translate3d(0, 0, 0).
The first two 0's are the x and y coordinates and should be adjusted to match the effect of the margins you were setting. The third 0 is the z coordinate, which should stay at 0.
This way you are killing two birds with one stone. The transform:translate property is a lot easier for the browser to handle and the 3d enables hardware acceleration. Hopefully this will smooth things out for you.
Related
Please look at the official navbar example:
https://getbootstrap.com/examples/navbar/
If you try to resize your browser you see this:
Today I found the same problem on my website.
How to easily fix this behavior?
This menu has not enough space in one row. The right side part just does not fit in the same line. You can:
reduce the number of menu items
(for example, hide one of them by adding the hidden-sm class)
make names of items shorter
hide a word from the name:
<li>Something else<span class="hidden-sm"> here</span></li>
reduce the distance between menu items
reduce the width of the logo for this screen width
expand the container or use container-fluid instead
I am new to BS3 and i'm trying to use a responsive image with the img-responsive class that spans the width of the container across all screen sizes and devices. What I have so far works apart from screen break points between 768px and 992px where the image doesn't retain its 100% width. I'm not quite sure where I am going wrong. plus I can not seem to remove left/right padding so it covers the complete width of the container. Ive tried using Jumbatron with no success.
I simply have an image in my outer container like so: -
<div class="container-fluid wrapper">
<img class="img-responsive" src="../images/home/hands-and-key.jpg" alt=""/>
</div>
Do I need to use rows and column classes for this?
Think I'm missing the obvious here, but I have a Bookstrap 3 navbar that works great in desktop view but as I squeeze the width and it gets to tablet size rather than collapsing into the toggle menu it's jumping the menu onto two lines:
http://www.doorsets.org.uk/
I've tried reducing the text size in the navbar via a media query but that isn't solving it.
What am I missing?
Appreciate it. Thank you.
NJ
One solution might be to change the point at which the navbar collapses, you can do this by creating a customized Bootstrap and setting the #grid-float-breakpoint to a larger number.
This variable unfortunately also influences the dt and dd inside a .dl-horizontal which might be a problem.
If you want to use a media query to reduce the font-size you can use the .navbar-default .navbar-nav > li > a selector. It however needs to become 9px at the smallest viewport size to still stay on a single row which is quite unreadable.
From the Bootstrap documentation:
Overflowing content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
Reduce the amount or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.
It goes on to say:
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
<div class="col-lg-1">hi</div>
<div class="col-lg-10">hi</div>
<div class="col-lg-1">hi</div>
v/s
<div class="col-xs-1">hi</div>
<div class="col-xs-10">hi</div>
<div class="col-xs-1">hi</div>
From what i'm seeing if you use .col-lg- to define the grid system in an app. For smaller screen sizes the app does not hold up. So much so, that even if you magnify the browser by ctrl +, the width becomes 100% of each .col-lg- div.
On the contrary if you use .col-xs- the behavior is as expected (great) on large screen sizes also. (so far as i've seen). Is there any drawback of using .col-xs- or .col-md- grid system for a web app? (even when it is intended for large screen sizes also)
unexpected behavior and expected behavior just because the screen size of the fiddle is smaller than .col-lg can handle. So it makes each div 100% width
The large grid (with .col-lg) only becomes horizontal with a screensize of >=1200. The extra small grid (with .col-xs) always remain horizontal (and never stack).
if you magnify the browser by ctrl +, the width becomes 100% of each
.col-lg- div.
True cause ctrl + doesn't change the screen size.
Is there any drawback of using .col-xs- or .col-md- grid system for a
web app?
No. The col-xs will be the same for all screen sizes. In fact only using col-xs makes your app non-responsive. (When you use a navbar you will also set the #grid-breaking-point to 0).
In your case the medium grid .col-md will have the same "unexpected behavior" (unexpected for you) but for an screen size of >= 992 pixels.
So i am looking to do something like what the apple inspector tool does, but with CSS for a project i am working on.
So, the idea is on a certain page of the site, the site is shaded out (much like a lightbox or thickbox) but certain Divs, & other elements are still visible. This is similar to what Safari does when you inspect an element. It blacks out the rest of the page, apart from that element.
So, any idea?
Cheers!
J
In working with Dojo Javascript widgets, it implements modal dialogs by having one large element be hidden (display:none; background-color:#000; opacity:0.5;) most of the time, though positioned to cover the screen (position:absolute; top:0; left:0; and width and height set by Javascript to the full window size). Then it is given a z-index value and all elements that are intended to be visible are given a z-index above it. If you can relative-ly or absolute-ly position all the elements you want to highlight, this method would work for you.
With just CSS? If so, the best I could come up with is this:
<style>
a:hover *:not(#except)
{
background:green;
}
</style>
<a href="#">
Link
<p>
green
</p>
<p id="except">
black
</p>
</p>
Unfortunately the :not() selector is part of CSS3 and most browsers do not yet support it (but Safari 4 does).
That is one possibility, but not so nice.
Another option would be with Javascript. If you are only working with rectangular block elements how about getting the x and y value of the element to stay normal, then cutting out four pieces (up, down, left, right) of that element. Absolutely position some divs whose background is some semi-transparent PNG.
ie.
------------------
|lef|---up---|rig|
|t--|________|ht-|
|---| normal |---|
|---|________|---|
|---|-down---|---|
------------------