I have tried almost every answer in similar thread, but could find anything that works for me.
I have following site:
A header (div span over the full width).
A left column.
A right column.
The header and the right column are fixed.
I would like the text in the left column to disappear beneath the header when scrolling.
Something like I see on many websites where a header with a message (ex. "accept cookies") stays on a fixed place.
Any ideas?
HTML:
<div id="head">
<!-- here is the code of our header -->
</div>
<div id="content">
<!-- The next block for example with the main content -->
</div>
CSS:
#head{
width: 1000px;
height: 60px;
position: fixed;
background: #fff;
z-index: 1000;
}
/* So that our next block does not run under the header, as soon as the page is loaded, add an indent. */
#content {
margin-top: 60px;
}
Everything works now.
Left column scrolling with fixed header:
.header {
overflow: hidden;
background-color: black;
position: fixed;
top: 0;
width: 100%;
}
Right column fixed (responsive):
#media (min-width: 1200px) {
.rightcolumn {position: fixed;}
}
Related
I need mix-blend-mode element in my project, so I use mix-blend-mode property.
It looked fine at first, but as the screen narrowed, it changed to an unexpected appearance.
Also overflow: hidden doesn't work, so blue comes out of the corner.
I run this code in Chrome browser.
Looks different depending on screen width
.card{
position: relative;
width: 300px;
height: 50vh;
background-color: pink;
margin: auto;
overflow: hidden;
border-radius: 24px;
}
.blend{
width: 100%;
height: 100%;
background-color: blue;
mix-blend-mode: color-dodge;
will-change: transform;
}
<div class="card">
<div class="blend"></div>
</div>
Here's my code.
Please let me know why this problem happen.
Thank you!
I think border-radius, overflow, mix-blend-mode and will-change properties seems to be contributing to this problem, but still I don't know ★why★ this happens.
QUESTION:
Using the Gamepad API, i am having a problem when re-sizing the window; namely, a finite padding-bottom appears between the bottom of the #gameBoard and the bottom edge of the Browser window -- which I do not want:
Please note that I have tried a Sticky Footer which depends on position: absolute; which I would prefer to avoid.
EG,
with a padding-bottom > 0
I am looking for this with each window re-size:
padding-bottom = 0
HTML:
<div id="gameEnclosure">
<div id="header">
stuff here
</div>
<div id="gameBoard">
<canvas id="game">
game piece img's here
</canvas>
</div>
</div> <!-- gameEnclosure -->
CSS
/* COMMON RESET */
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
body {
background-color: blue;
}
#gameBoard {
display: block;
position: relative;
width: 100%;
height: auto;
background-color: #fff;
background-image: url("../images/room.gif");
background-size: cover;
}
As already stated, I have tried using a Sticky Footer and I just do not like using position: absolute. Also, the individual game piece images do not maintain their proper aspect ratio with window re-sizing = another no-no.
JS
function doBodyOnResize() {
let gameHeight = $('#gameBoard').outerHeight();
$('body').css('padding-bottom', gameHeight);
$('#gameBoard').css('height', gameHeight);
}
This is the onresize function I used to have with the Sticky Footer.
Without a Sticky Footer, game pieces zoom in and zoom out just great -- if I could just get keep padding-bottom = 0 upon window resizing.
I have a problem with my parallax scrolling website. I need to create a fixed header at the top of the site, but it wont remain "fixed".
Link to full code here:
http://jsfiddle.net/ressy0101/sx4ukc1c/5/
#header{
position: fixed;
background-color: black;
height: 50px;
width: 100%;
z-index: 9999;
color:white;
text-align:center;
font-size:40px;
}
This is working for me, hope it will resolve your issue.
change position:sticky;
& add
top:0px;
i.e
#header{
top:0px;
position:sticky;
}
I use Twitter Bootstrap in one of my projects, but I have the problem that my content goes out of the browser view. Normally you see the scrollbar on the right side of the screen, but not in my case. I searched in bootstrap css file after overflow: hidden; or something like that and deleted it, but that didn't solve the problem.
Does someone know how to enable scrollbar in bootstrap css? (without bootstrap css the bars are showed)
edit:
I have find out that the problem the navbar-fixed in the black navbar which you can add. Without postition: fixed it works fine.
Make sure all the <div> from the navbar are closed. If not, the fixed property is inherited by the descending tags and the scroll bars disappears.
I found removing the "position: fixed" for the navbar resolved this problem for me:
.navbar-fixed-top, .navbar-fixed-bottom {
/*position: fixed;*/
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
}
This guy also has some more useful info: http://davidlains.com/strange-twitter-bootstrap-scrolling-issue
Override it with your last stylesheet.
( Probably your own theme stylesheet. )
html, body {
overflow: visible;
}
<style type="text/css">
body, html {
height: 100%;
overflow: hidden;
}
.navbar-inner {
height: 40px;
}
.scrollable {
height: 100%;
overflow: auto;
}
.max-height {
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.pad40-top {
padding-top: 40px;
}
</style>
Hope this is what you are looking for
You are missing a closing </div> in your HTML code. For every <div class="foobar"> you must have a closing </div>. This (scrolling issue) can happen when using twitter bootstrap and not closing your divs.
I want to change JQGrid "Loading..." message to something with animated gif image. Looked everywhere but couldn't find a way. Anyone please.
Try to use
.ui-jqgrid .loading { background: url(ajax-loader.gif); }
it should work. Some animated gifs can be loaded for example from here. By the way, the div having "Loading..." message has the form
<div id="load_list" class="loading ui-state-default ui-state-active">Loading...</div>
where the id "load_list" will be constructed from the prefix "load_" and the id of the table element.
UPDATED: To remove the text "Loading..." you can either use loadtext:'' jqGrid option or overwrite $.jgrid.defaults.loadtext global setting from the grid.locale-en.js:
$.jgrid.defaults.loadtext='';
If you need to adjust width, height or any other CSS parameter of the loading div you can do it in the same way. For example,
.ui-jqgrid .loading
{
left: 45%;
top: 45%;
background: url(ajax-loader.gif);
background-position-x: 50%;
background-position-y: 50%;
background-repeat: no-repeat;
height: 20px;
width: 20px;
}
This is perhaps a more modern answer to the question using FontAwesome rather than a gif. I couldn't find where this has been answered anywhere and had to piece it together from various places including the answer above by #oleg.
Hopefully this will be helpful to others searching.
<style>
.ui-jqgrid .loading {
background-color: transparent;
border: 0px;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
.ui-jqgrid .loading:before {
content: "\f110";
font-family: FontAwesome;
font-size:40px;
}
</style>
And then place the following (exactly like this) after $(document).ready(function() {
$.jgrid.defaults.loadtext='';