I am implementing a facebook messenger bot on a website and need to
change its position (bottom at least) and potentially with JS on
scroll too.
Since it's implemented using a <body> script I don't see how to add CSS that would be active on it. I guess that a conditional JS would be even hard to achieve.
Here is the simplest version of CSS I tried to implement :
.fb_dialog {
bottom: 50px
}
Css Position
There are five value of Positions:
static
relative
fixed
absolute
sticky
First set your Position properties and the properties:Top, Bottom, Right, Left. I put your class to understand
Small explanation of values
Position: Static;
It can't move, it is positioned to the normal page.
Example:
<style>.fb_dialog {
position: static;
Left:30px;
}
<style>
Position: relative;
If you set right, left, bottom, top properties, your element will adjust away from the normal position
Example:
<style>.fb_dialog {
position: relative;
left: 30px;
}
<style>
position: fixed;
Your element will stay in the same place, no matter how far away you position it will not adjust away
Example;
<style>.fb_dialog {
position: fixed;
bottom: 0;
right: 20;
}
<style>
Position:Absolute;
The element must be positioned with Position:Relative; that's make the element to move only into relative position
but if you use only the Position Absolute without relative ancestor, the element will move on the viewport of page.
Example:
<style>.fb_dialog1 {
position: relative;
bottom:o;
right: 20px;
}
.fb_dialog{
position: absolute;
top: 80px;
right: 20;
}
</style>
Position:Sticky;
This position set the element to stick as you scroll the page. The Position sticky value works for upgrade version Internet Explore and Safari
Example:
<style>.fb_dialog {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
</style>
There is another way to put css using Css#idselector. Whatever elements you use like div ,p and etc.
You can style your element using id
Example:
<style> #fb_dialog {
position:absolute;
right: 20;
}
</style>
<p id="fb_dialog">some text here.</p>
Related
https://codepen.io/diana-larussa/pen/OJgjLqj
the code looks basically like that:
contact-section
svg-container
footer
I think the image is pretty self-explanatory... I also tried to solve it by using :before but it just doesn't work... Please help.
You can remove the svg container from the document flow (so that it can't be pushed by the form) and position it at the top relative to a parent element.
First enclose both elements in a common parent:
<div class="main-wrapper">
<div class="main-container"></div>
<div class="svg-container"></svg>
</div>
Set the svg container to be absolutely positioned (absolutely relative to its parent, that's why main-wrapper has position:relative).
.main-wrapper {
position: relative;
overflow: hidden;
}
.main-container {
/* ... */
position: relative; /* necessary for z-index */
z-index: 1; /* keep the content above svg-container */
}
.svg-container {
position: absolute;
top: 0;
left: 0;
right: 0;
}
I'm currently trying something out which i saw on another website.
Imagine many pictures at the same position at the bottom of the website. Now when you scroll up - it will scroll every picture one bye one up - when done you will get eventually to the footer.
I already tried position: sticky etc. but it did not worked as I wanted.
Can someone help me? I would be so happy!
.poster-middle {
width: 100%;
height: 100%;
top: 0;
position:-webkit-sticky;
position:sticky;
}
.poster-middle-img {
margin-top: 500px;
}
.poster-left {
width: 100%;
height: 100%;
top: 0;
position:-webkit-sticky;
position:sticky;
}
.poster-left-img {
margin-top: -700px;
}
.poster-right {
width: 100%;
height: 100%;
top: 0;
position:-webkit-sticky;
position:sticky;
}
.poster-right-img {
margin-top: -700px;
}
<div class="poster-middle"><div class="poster-middle-img"><img src="img/1.jpg"></div></div>
<div class="poster-left"><div class="poster-left-img"><img src="img/2.jpg"></div></div>
<div class="poster-right"><div class="poster-right-img"><img src="img/3.jpg"></div></div>
right now everything is scrolling up together
You can achive this with pure css.
The trick is to use the sticky attribute of the position property and define the bottom property. This way all images are sticking to the bottom of the page. If the value of the bottom property is less than the image height, the top of all the images are visible all the time. The images below the first one are outside of view (technically) but will be visible because of the sticky attribute. Margin-bottom defines the margin between the images.
When the user starts scrolling, one image after the other is scolling into the view and is released from the position at the bottom and will scroll freely to the top.
position: -webkit-sticky;
position: sticky;
bottom: -200px;
margin-bottom: 300px;
The rest is normal positioning.
I created a little fiddle to show a full example. You can build your solution from there very easily.
I said CSS only, but used javascript in the fiddle. The code is only to give all elements a z-index. You can do this when generating the page or with nth-child in the css. But I didn't want to do that. Call it laziness ;)
You can use jquery to do this
var src = ['url_image1.jpg', 'url_imafe2.jpg'];. // Array of source of images
var i = 0;
$(document).ready(function() {
$(window).bind('mousewheel',function() {
$('#imgs').hide().delay(1000).fadeIn();
if (i==1){
$('#imgs').attr('src', src[i]);
i=0;
}
else {
$('#imgs').attr('src', src[i]);
i=1;
}
});
});
<style>
div{height:500px}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img id="imgs" style="display: none;margin-left: 100px;margin-top: -150px; position: relative" src="https://i.ytimg.com/vi/vl8IxeB0ss4/maxresdefault.jpg">
</div>
I am trying to make a simple html site:
http://www.williamcharlesriding.com/test/index3.html
The problem is the buttons, which are png's and I am trying to position over the various areas of the background image, using css like this:
.but1 {
opacity:0;
filter:alpha(opacity=0);
position:fixed;
top:463px;
left:36px;
}
However I have noticed in different browsers and depending on the zoom factor the buttons can be way off their intended mark. Any advice on this would be appreciated,
Thanks
Set your .content container to position: relative and change each button div from position: fixed to position: absolute. The relative position on the container will make the absolute position relative to your div, rather than the browser.
.content {
padding: 10px 0;
background-color: #5a5958;
margin-left: auto;
margin-right: auto;
position: relative;
}
I would probably add another class to each, so you could do something like this:
<div class="but but1">
<div class="but but2">
.but { position: absolute; }
.but1 { top: 463px; left: 36px; }
Normalize.css might help, it contains default CSS for all browsers. Be sure to include it before your main CSS. Sorry, as the other answer states the problem is that you are positioning relative to the browser window, not the parent element.
I'm building a web application that occupies all the browser's visible area without scrollbars. The window is divided into panes that will have their own scrollbars when necessary.
I've laid out the elements neatly with absolute positioning. Demo: http://jsbin.com/adozul/6/edit
Extract:
<body>
<header id="header"></header>
<div id="main">
<section class="pane"></section>
<section class="pane"></section>
<section class="pane"></section>
<section class="pane"></section>
</div>
</body>
#header, #main, .pane {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
#header {
bottom: none;
height: 35px;
}
#main {
top: 36px;
}
.pane:nth-child(1) {
left: 0;
right: 75%;
}
.pane:nth-child(2) {
left: 25%;
right: 50%;
}
.pane:nth-child(3) {
left: 50%;
right: 25%;
}
.pane:nth-child(4) {
left: 75%;
right: 0;
}
Everything looks fine except that a wild horizontal scrollbar appears (both in Firefox and Chrome).
The weird thing is that according to FireBug, the blank space at the right side does not belong to any element on the page, and no element has any margins either.
UPD: as Passerby pointed out, there IS an element that exceeds the width, it's inside the fourth pane, so the solution is pretty obvious.
I've tracked the issue down to this rule:
.pane:nth-child(4) {
left: 75%;
}
When i disable this very rule, the horizontal scrollbar disappears. Disabling any other panes' positioning rules doesn't affect the scrollbar.
I can get rid of the scrollbar with html { overflow: hidden; }. But why does the scrollbar appear in the first place and how do i prevent it from appearing (rather then dealing with it when it's already there) without breaking the four-pane layout?
PS If you feel that the task could be solved in a more elegant way, please don't hesitate to point that out. But please take into consideratoin that i'm going to let the user resize panes with jQuery UI Resizable.
It looks like it's your <iframe> inside 4th panel that exceeds the width;
Add this
.pane:nth-child(4) iframe {
width:100%;
}
seems to solve the problem on my 1024 width screen.
http://jsbin.com/onotur/1/edit
Edit:
Seems this would be better:
.pane .editor {
width:100%;
}
What I have now is this page.
And I want the section title block "Employer Information" to be 40px wider than it naturally is, breaking out of its parent, as shown in this image.
Thus far I tried:
.content form ol {
position: relative;
z-index: 50;
}
.content form ol .section {
position: absolute;
left: -20px;
width: 110%;
z-index: 100;
}
And tried several other parent elements to be position:relative but it never worked.
Any idea? Thanks!
Your main class has overflow: hidden, so it's masking the parts that are outside of it. Try your code with overflow: visible on .main.
Also Use position: relative in .section, or else it will be taken out of natural flow and the rest of the content jumps up behind it.
As "freejost" said, remove overflow:hidden in the class main and add the style position:relative for li
i.e
#submit_form li{
position:relative;
}
#empInfo {
left: 0;
position: absolute;
right: -20px;
top: 0;
}
The HTML edits are :
<div id="empInfo" class="description section" >
<h2>Employer Information</h2>
<div>General information regarding the employer business or organization.</div>
</div>
This should fix it.. there are a few other edits which u have to make to make it work,but this should get you at a comfortable level