Show nothing but the background image/colour above a fixed element - javascript

On our page we have a position: fixed header that stays at the top of the page as you scroll. Our product team wishes to have a gap/margin between this fixed element and the top navbar.
However, once we add in this gap, when the user scrolls, they can then see the elements scrolling away above the fixed header. I have created a jsfiddle to show the problem:
https://jsfiddle.net/9n50o567/
If you scroll down, the grey sections appear above the light-blue header while you are scrolling.
Is there anyway to hide this from the user? So all that would show above the fixed element is the background colour, or the background image if there is one (as it will vary from user to user). Essentially masking the elements?
We have tried creating a div that takes on the same colour as the body's background colour, however this just doesn't work when there is a background image. Also we tried using jQuery to detect what elements are present in that section and hiding them as they scroll through, but if the element is bigger than the header, it would dissapear prematurely.
I'm not sure if any of this is making sense, so if you have any more questions, please don't hesitate to ask below.

This is not perfect, certainly it works for colors, but background-images may be a little harder.
A positioned pseudo-element on the <body> which inherits the body bg color seems to work.
body {
background: red;
position: relative;
}
body::before {
content: '';
height: 25px;
display: block;
width: 100%;
background: inherit;
position: fixed;
top: 0;
left: 0;
}
.header {
background-color: #ccffff;
height: 300px;
width: 500px;
border: 1px solid black;
position: fixed;
top: 25px;
left: 8px;
}
.push {
height: 335px;
}
.section {
background-color: #cccccc;
height: 300px;
width: 500px;
border: 1px solid black;
margin-bottom: 15px;
z-index: 10;
}
<div class="header"></div>
<div class="push"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
JSfiddle Demo
Background image fiddle (with background-attachment:fixed) - Fiddle

Use a div to act as the gap (.headergap) see below.
Css:
.headergap{
background-color: #cccccc;
position:fixed;
top:0px;
height: 25px;
width: 100%;
}
.header {
background-color:#ccffff;
height:300px;
width:500px;
border:1px solid black;
position:fixed;
top:25px;
left:8px;
}
.push {
height:335px;
}
.section {
background-color: #cccccc;
height:300px;
width:500px;
border:1px solid black;
margin-bottom:15px
}
Html:
<div class="headergap"></div>
<div class="header"></div>
<div class="push"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
See fiddle:
https://jsfiddle.net/6bhhn869/

Updated code
I have used vh for timing you may use jquery to calculate height and apply it to in-wrap.

Related

Scroller isn't displaying on the screen

I am having an issue with the position-fix; top 100px;. when I use position-fix; top 100px; and run the program, the result will be "google scroller doesn't show up on the screen". when I don't use when I use position-fix; top 100px; then google scroller shows up on the screen.
Here is the HTML code.
<body>
<section class="container">
<div style="position:fixed; top:180px" class="First">
<ul id="ListName" class="">
<li><a style="text-decoration:none" href="interest.html"> Interest </a></li>
</ul>
</div>
<div style="position:fixed; top:180px;" class="Second">
<h1 align="center"> sport</h1>
<p>
<ul>
<li> soccer and,</li>
<li> football </li>
</ul>
</p>
</div>
</section>
<div id="" class="" style="clear:both;"></div>
</body>
Here is the CSS code.
<style>
.container {
width: 99%;
height: auto;
margin: auto;
padding: 10px;
font-family: Verdana,Geneva,Tahoma,Arial,Helvetica,sans-serif!important;
}
.First {
height: auto;
width: 20%;
background: white;
border:1px solid #666;
float: left;
}
.Second {
margin-left: 21%;
height: auto;
width:640px;
border:1px solid #666;
background: white;
}
</style>
Your requirement is bit confusing, it's not clear that whether you want to make the second div inside the section element scrollable then you can do it by adding a height or max-height property to the Second class.
Same holds true for any container scroll bar appear only when the content inside a div or any container exceeds the height specified.
If you want to make second div scrollable, you need to do following.
.Second {
height:100px !important;
overflow-y: scroll !important;
margin-left: 21%;
height: auto;
width: 640px;
border: 1px solid #666;
background: white;
}
If you want to make body element scrollable then you can set a height property or when your content increases the automatically body will be scrollable.
checkout the fiddle here.
I have added a width property to the second div in order to make it fit in the fiddle window.You may remove it. Also pasted some sample text inside body to demonstrate that body is scrollable when it has enough text or if you want a set a fix height you can do that as well.
NOTE: you need to set the property value with !important so that it overrides and forces browser to apply that css.
height:100px !important;
Hope it helps!!

Changing color of fixed image based on background

So I´m working on a landing page (test site here: http://kingdomhousedev.cloudaccess.host/) that has a fixed pgn logo. Since it´s white and some of the background is also white it disapears over those sections.
So what I´m wanting to do is change the logo to black when it´s over white or light sections.
Can this be achived using javascript and css? I´ve searched and found some one example (like:http://www.kennethcachia.com/background-check/) but I want it to happen at scroll and not after. If possible it would be nice if it would be so that for example if only half the logo was over white only that part would be black.
Thanks in advance for the help!
Edit:
I was asked for an example not from a live site. So here is one: https://jsfiddle.net/57Legkq3/9/
HTML:
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="logo"></div>
CSS:
.white{
background-color:white;
height: 400px;
}
.black{
background-color:black;
height: 400px;
}
.logo {
width: 100px;
height: 100px;
width: 100px;
height: 100px;
background-color:white;
position: fixed;
top: 20px;
left: 20px;
}
.white {
background-color: white;
height: 400px;
}
.black {
background-color: black;
height: 400px;
}
.logo {
width: 100px;
height: 100px;
width: 100px;
height: 100px;
background-color: white;
position: fixed;
top: 20px;
left: 20px;
}
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="logo"></div>
Also to clarify. I want the white box (representing the logo) to change color to black when going over the white areas. But without me knowing where the white areas are. So I need to check somehow what is under the logo and change color based on that, and preferably only the part of the logo that is over the white area.
Here is a basic idea using JQuery. The code below demonstrates the general principal you'd apply.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
$("body").addClass("blue");
} else {
$("body").removeClass("blue");
}
});
Note in the above code sample, the scroll is a measurment indicating the windows top! Hence when scroll changes, appropriate class entries are added to, in this case, body element. Hope this helps.

How to restrict draggable element into particular element

In JQuery UI, I am trying to restrict draggable element into particular elements which are present inside the container (.container).
Even I have tried with containment as array of values it is working but in my case I will be unaware of the .container height and width. Please suggest me which will the right approach to do this one.
<div class="container">
<div class="restricted-field-1">should be restricted here</div>
<div class="dragme">DRAG ME</div>
<div class="restricted-field-2">should be restricted here</div>
</div>
$(".dragme").draggable({
containment: ".container"
});
JSFIDDLE
You can move the .container div to wrap .dragme, remove position: relative of .container and set following style changes.
body {
position:relative;
}
Modify as follows.
.container {
position: absolute;
height: 362px;
}
.restricted-field-2 {
top: 400px;
}
Here is the jsfiddle link.
Edited:
There are options in jquery draggable to set x-axis and y-axis positions for the containment and we need to calculate based on our requirement.
Here is the updated js fiddle link.
$(".dragme").draggable({
containment: ".mini"
});
.container{
position:relative;
width: 500px;
height: 400px;
background: #FFF;
}
.dragme{
width: 100px;
cursor: move;
background: black;
color:white;
text-align:center;
}
.restricted-field-1{
width:480px;
background: silver;
padding:10px;
user-select:none;
height: 20px;
}
.restricted-field-2{
position:absolute;
width:480px;
bottom:0;
padding:10px;
background: silver;
user-select:none;
height:20px;
}
.mini{
position: absolute;
top: 40px;
left: 0px;
bottom: 40px;
width: 100%;
}
<div class="container">
<div class="restricted-field-1">should be restricted here</div>
<div class="mini">
<div class="dragme">DRAG ME</div>
</div>
<div class="restricted-field-2">should be restricted here</div>
</div>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

how to make a sticky div be on top of other content

i have a little css problem. i've got a div whit an input in it that will stick to the top of the page when page is scrolled down. it works great except images from the page get over it and it looks awfull. i need to make it "on top" of the other content if i can. or at least have an overflow of some sort that will push the scroll just from it, if that makes any sense.
i have to say my css skills are below avarage. here's what ive got so far
HTML:
<div class="searchbox" id="sticky" style="width:60%; padding-left:20%; background-color:white; padding-top:5px; margin-bottom:25px; padding-right:20%; height:35px;">
<form method="get">
<input style="width:80%;" name="title" placeholder="Search..." type="search">
</form>
</div>
the searchbox is not initially on the top of the page so to make it stick when it gets there i have this javascript that adds / removes position fixed
Javascript:
<script>
var header = document.querySelector('.searchbox');
var origOffsetY = header.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? header.classList.add('sticky') :
header.classList.remove('sticky');
}
document.addEventListener('scroll', onScroll);
</script>
CSS:
<style>
.sticky {
position: fixed;
top: 0;
}
</style>
If somethign else jumps on top of your content, use
css z-index to order things according to how you would like.
_ quick edit for potential future visitors_
hover slides to bring the slide under the mouse on top of others.
fiddle: Fiddle demo
Html
<div id="slides">
<div id="obj1">obj 1</div>
<div id="obj2">obj 2</div>
<div id="obj3">obj 3</div>
</div>
Css:
#slides {
position: relative
font-size: 20px;
}
#slides > div {
border: 1px solid gray;
min-height: 3em;
position: absolute;
top: 1em;
background: green;
cursor: pointer;
text-align: center;
min-width: 4em;
}
#slides > div#obj2 {
top: 2em;
background: red;
left: 2em;
}
#slides > div#obj3 {
top: 3em;
background: blue;
left: 4em;
}
JavaScript:
$("#slides > div").mouseover(function(evt) {
$("#slides > div").css("z-index", "inherit");
$(evt.target).css("z-index", 4);
});

CSS window width resize issues

I am having problems with some content not fixed into one place when I resize the window on a browser, I basically have 3 div id box elements placed next to each other.
They are positioned fine however when I resize the screen they seem to fall below one another.
I have min-width: 947px; in the body of the CSS however this does not do anything.
HTML:
<div id ="featured1">
</div>
<div id ="featured3">
</div>
<div id ="featured2">
</div>
CSS:
#featured1{
float:left;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
margin-left:150px;
border:1px solid black;
width:250px;
height:150px;
}
#featured2 {
display: inline-block;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
}
#featured3 {
float:right;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
margin-right:200px;
}
For some reason when I try resizing the screen with this code the elements fall below each other, I am looking for the content to completely remain the same and not resize at all.
Here is the working example: jsFiddle link
use
display: inline-block;
on all 3 divs, then they wont go down.
Note: this property will not work on IE7 and smaller versions.
You have given your body a min-width:947px but the actual width occupied by all divs including the margin and borders, etc is 1150px.
Thats why its breaking.
Please add vertical-align: top; property on all the divs
This should help. FYI. When writing in CSS make sure you minify the code. Google developer has a great section on this (https://developers.google.com/speed/pagespeed/service/MinifyCSS).
HTML:
<div id="container">
<div id="featured1">
Featured 1
</div>
<div id="featured2">
Featured 2
</div>
<div id="featured3">
Featured 3
</div>
</div>
CSS:
#container {
position: absolute;
width: 836px;
height: 190px;
}
#featured1, #featured2, #featured3 {
position: relative;
font-family: 'Lobster13Regular';
font-size: 35px;
float: left;
left: 20px;
top: 20px;
width: 250px;
height: 150px;
border: 1px solid #000;
overflow: hidden; /*Remove if you are not going to overflow text in each element*/
}
#featured2, #featured3 {
margin-left: 20px;
}

Categories