I am trying to have my facebook like button stay in the top left corner and as the user scrolls down it follows them... What is wrong with my code? It shows but as I scroll down it does not move with the scroll. Tested locally on both of the latest versions safari and firefox. Please help!
topleft{
position: fixed;
top: 0;
left: 0;
}
<top> FACEBOOK "LIKE BUTTON" IFRAME CODE HERE </top>
You aren't selecting your like button properly. You need to add a class attribute for css selection.
Try something like
<div class="facebook">FACEBOOK IFRAME</div>
Notice the ".facebook" rather than just "facebook".
.facebook {
position: fixed;
top: 0;
left: 0;
}
There's no top tag in HTML.
CSS class name selectors should be preceded by a . (period).
topleft{
position: fixed;
top: 0;
left: 0;
}
should be
.topleft{
position: fixed;
top: 0;
left: 0;
}
Assigning the style you've created to the iframe should work.
<iframe class="topleft" ...>
...
</iframe>
JSFiddle
problem with this could be
for topleft class
.topleft{
position: fixed;
top: 0;
left: 0;
}
for topleft id
#topleft{
position: fixed;
top: 0;
left: 0;
}
otherwise it should work.
Related
I want to block users to click anywhere on the page except just on top div with a button.
.topdiv {
height: 90px;
}
.divBlocking {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
cursor: wait;
}
<div class="topdiv" *ngIf="!blockContent">
<button>Cancel</button>
</div>
<div class="divBlocking" *ngIf="blockContent"></div>
<div class="divApp">
//application content/form/inputs
</div>
So whole screen is not clickable including the tobdiv than I don't want to. Changing divBlocking=>top: 90; seems not work
Update topdiv class with position: fixed; and z-index: 999;
.topdiv {
height: 90px;
position: fixed;
z-index: 999;
}
.divBlocking {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
cursor: wait;
}
<div class="topdiv" *ngIf="!blockContent">
<button>Cancel</button>
</div>
<div class="divBlocking" *ngIf="blockContent"></div>
<div class="divApp">
//application content/form/inputs
</div>
You can simply add z-index: -1 to .divBlocking.
This means send .divBlocking to the back.
To show case the difference, I add some background color.
Your original code result like this
Add z-index: -1 to .divBlocking
Edited code
.topdiv{
height:90px;
background-color: red;
}
.divBlocking{
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
cursor: wait;
background-color:rgba(201, 76, 76, 0.3);
z-index: -1;
}
<div class="topdiv" *ngIf="!blockContent">
<button>Cancel</button>
</div>
<div class="divBlocking" *ngIf="blockContent"></div>
<div class="divApp">
//application content/form/inputs
</div>
My understanding of CSS is that you can determine the stack order of elements by using the z-index
In the most basic cases, HTML pages can be considered two-dimensional,
because text, images, and other elements are arranged on the page
without overlapping. In this case, there is a single rendering flow,
and all elements are aware of the space taken by others. The z-index
attribute lets you adjust the order of the layering of objects when
rendering content.
Understanding the z-index
I've used technique described by fcalderan here to prevent body scrolling, but allow overlay scrolling.
I've used first method which "works by changing the aria-hidden attribute of the overlay in order to show and hide it and to increase its accessibility."
It works, however some of the body images are appearing on top of overlay(overlay is not working completely). Can't figure our what's the problem. Could you please help?
Here is codepen. I've included practically all page cause I don't know here the problem is. (Also on codepen the body background is still scrolling, but on local host it's working correctly)
To trigger pop-up click "POP-UP TRIGGER BLOCK"
CSS
.noscroll {
overflow: hidden;
}
.overlay {
position: fixed;
overflow-y: scroll;
top: 0; right: 0; bottom: 0; left: 0; }
[aria-hidden="true"] { display: none; }
[aria-hidden="false"] { display: block; }
Add the z-index property with some high enough value to the .overlay div, e.g.:
.overlay {
position: fixed;
overflow-y: scroll;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999999;
}
so I'm coding my site and I need the DIV to fill the height of the page completely
However when someone zooms out, it goes like this:
http://imgur.com/0hqWl0d
I was wondering if there was a fix to this? I know I can use height: 100% or something but I prefer to keep it on auto as it makes the site responsive.
http://hastebin.com/ikoyefumif.xml < If you need part of the code, here it is. Thanks.
Whilst min-height: 100vh works in some cases, it does not in all.
Have a go at using this:
#parent {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
I advise you play around with the directional values depending on what you wish, and you may have to alter the value too.
Here's a demonstation: https://jsfiddle.net/joshcrowe/u1wc7zcn/1/
body {
padding: 0;
margin: 0;
}
div {
background-color: purple;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 1em;
}
<body>
<div></div>
</body>
I am trying to set elements stay on the edge of left and right hand side of the screen no matter what device or screen size is.
I am using bootstrap and have something like
<a href='#' id='prev' class='btn btn-primary'>left button</a>
<a href='#' id='next' class='btn btn-primary'>right button</a>
My css is like
#prev{
position: fixed;
top: 50%;
left: 0%;
}
#next{
position: fixed;
top: 50%;
left: 95%;
}
I want something like
left button(edge of screen) right button(edge of screen)
Left button seems fine but my problem is right button.
My css only works for certain screen size but not all. Can someone help me to solve this issue? Thanks a lot!
Try setting the right property:
#prev{
position: fixed;
top: 50%;
left: 0;
}
#next{
position: fixed;
top: 50%;
right: 0;
}
JS Fiddle: http://jsfiddle.net/6gw3K/
Use right: 0 for #next
#prev{
position: fixed;
top: 50%;
left: 0;
}
#next{
position: fixed;
top: 50%;
right: 0;
}
Assuming that position fixed is not a hard requirement, you might look into using floating. E.g.:
#pref{ float:left; }
#next{ float: right; }
See this jsfiddle.
This is killing me for hours. Just a simple Anchor tag is not working.
<div id="navigator">
<div class="show">
<span>PORTFOLIO</span><span class="carat"></span>
</div>
</div>
Wherever I am trying to put an anchor tag, its not working
CSS is :
#navigator {
position: fixed;
top: 199px;
left: 0;
}
The page is here.. http://myingage.com/?page_id=25
Add z-index in #navigator in style.css,
#navigator {
display: none;
font-family: 'Titillium Web',sans-serif;
left: 0;
position: fixed;
top: 199px;
z-index: 100;
}
your navigator is behind the page
just add z-index: 1000 (anything bigger than z-index of your content) or move your navigator code behind the code of content
try giving a higher z-index
This works for me.
#navigator {
position: fixed;
top: 199px;
left: 0;
z-index: 10001;
}