I just found out about position sticky in CSS. I thought this is really cool and eliminates the need of writing a JS function for this simple behaviour.
So, I thought I give it a try. In the following example the header is sticking to the top, but I don't understand why the footer is not sticking to the bottom:
body {
height: 180vh;
padding: 0;
margin: 10px 0;
}
header,
footer {
position: -webkit-sticky;
position: sticky;
padding: 10px;
color: #ffffff;
text-align: center;
}
header {
top: 0;
background-color: brown;
}
footer {
bottom: 0;
background-color: #2d3142;
}
<header>I'm sticking to the top of the page</header>
<footer>I'm sticking to the Bottom of the page</footer>
Why is that?
I'm not sure about sticky but if all you are trying to do is put your footer at the bottom you can try this.
.alwaysBottom {
position: absolute;
bottom: 0;
}
Related
Please how can we set the map div to be height: 100% of its container?
I have tried this within a bootstrap template content section, but all I get is height of 0px. Even Google-Dev tools shows #map height as 0px.
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
Set
#map{
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
and give its container position: relative.
The above answer didn't work for me, but this did:
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
..from A full screen leaflet.js map
Leaflet needs an absolute height, and height: 100% only refers to the height of the parent element - if this isn't set, it will default to 0.
If your map is the only element in the body, use height: 100vh to match the height of the viewport (Example).
If your map is inside a container, set height: 100vh on the container (or other desired height) and height: 100% on the map element (Example).
So i have a simple button with a shiny effect run through using ::after and transform.
.shiny {
background-color: #000000;
padding: 10px;
color: white;
border-radius: 5px;
position: relative;
}
#keyframes sheen {
/* make the sheen run forward for 1.5s then back for the last 0.5s */
75% {
transform: rotateZ(60deg) translate(1em, -9em);
}
}
.shiny::after {
content: '';
position: absolute;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
transform: rotateZ(60deg) translate(-5em, 7.5em);
}
.shiny:hover::after, .shiny:focus::after {
animation: sheen 2s;
}
<button class="shiny">Shiny Button</button>
In original code, the percent in #keyframe was 100% and 'sheen' effect ran forward in exactly 2s.
Here i set the percent to below 100% (75% for example), the effect will run forward for 75% of the animation-duration, then runs backward for the last 25%.
Does that behavior have anything to do with 'transform' property? can anyone explain it to me
As a matter of fact, the animation does not repeat itself. Animation begins-and-ends. It just emulates properties that give it a reference value when you not define what to do animation.
Here, you basically define that moment by giving concrete properties such as where it will be at the 75%th moment of 2s, what color it will be, what its opacity will be. But from 75.1% you haven't defined what to do until the animation is complete (100%).
If CSS Animations are not defined at any instant of the frames, they accept parent properties that refer to it.
.dummy {
animation: dummy ... ... ...;
opacity: .75;
}
#keyframes dummy {
50% {
opacity: .5;
}
}
In the example above, the element will animate with an opacity of typically .75, .50 and .75 respectively.
If we didn't specify the property opacity: .75;, it would also animate the 1.0, .50 and 1.0 animation with default values.
You can imagine this for the opposite situation as well.
In other words, if I define where an element will be initially in the animation and this position is different from the values it actually references, the element will be animated by moving from the point I defined to the reference values.
Here is a simple example,
p {
animation-duration: 3s;
animation-name: slidein;
}
#keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
}
<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>
Returning to the example in your question, it would suffice to define that it should exhibit the same behavior between 75% and 100%. Here is the example;
.shiny {
background-color: #000000;
padding: 10px;
color: white;
border-radius: 5px;
position: relative;
}
#keyframes sheen {
/* make the sheen run forward for 1.5s then back for the last 0.5s */
75%, 100% {
transform: rotateZ(60deg) translate(1em, -9em);
}
}
.shiny::after {
content: '';
position: absolute;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
transform: rotateZ(60deg) translate(-5em, 7.5em);
}
.shiny:hover::after, .shiny:focus::after {
animation: sheen 2s;
}
<button class="shiny">Shiny Button</button>
So i've installed the facebook customer chat messenger plugin on my website and it works fine, but i need to align it to the left of the website and if possible also change the size of the button (it's huge).
my code is:
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/pt_PT/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fmessengerBtn">
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml: true,
version : "v3.2"
});
};
</script>
<div id="fb-root"></div>
<div class="fb-customerchat"
attribution=setup_tool
page_id="372545293082246"
theme_color="#0b9bb8"
greeting_dialog_display="fade"
greeting_dialog_delay="60"
ref="home"
logged_in_greeting="Fale conosco"
logged_out_greeting="Fale conosco">
</div>
</div>
i've tried just using CSS to align the container div but then the chat window will stay on the right side of the website... Is there some sort of attribute or option to set the thing to go to the left side instead? Surely this is something lots of other people have needed to do
also, the greeting_dialog_delay option doesn't seem to be working
The following CSS seems to work for now (since the classes may change) :
/* ***************
* FB on left side
******************/
/* This is for the circle position */
.fb_dialog.fb_dialog_advanced {
left: 18pt;
}
/* The following are for the chat box, on display and on hide */
iframe.fb_customer_chat_bounce_in_v2 {
left: 9pt;
}
iframe.fb_customer_chat_bounce_out_v2 {
left: 9pt;
}
I tweaked the code a bit in case you want to keep the widget on the bottom right but just move it over to the left some (e.g., it is blocking another element)
.fb_dialog.fb_dialog_advanced {
right: 18pt;
margin-right: 50px;
}
iframe.fb_customer_chat_bounce_in_v2 {
right: 9pt;
margin-right: 50px;
}
iframe.fb_customer_chat_bounce_out_v2 {
right: 9pt;
margin-right: 50px;
}
To add to #Cubakos' answer to get the bounce in and bounce out animation:
#keyframes fb_bounce_in_v2 {
0% {
opacity: 0;
transform: scale(0, 0);
transform-origin: bottom left;
}
50% {
transform: scale(1.03, 1.03);
transform-origin: bottom left;
}
100% {
opacity: 1;
transform: scale(1, 1);
transform-origin: bottom left;
}
}
#keyframes fb_bounce_out_v2 {
0% {
opacity: 1;
transform: scale(1, 1);
transform-origin: bottom left;
}
100% {
opacity: 0;
transform: scale(0, 0);
transform-origin: bottom left;
}
}
Try Below Code
.fb_dialog {
position: -webkit-sticky !important;
position: fixed !important;
bottom: 95px !important;
right: 30px !important;
}
Combining #Cubakos & #Kuttoosan answers + made an adjust for positing the chat bubble as the posted methods here no longer work for me.
/* The following is for the chat bubble */
.fb_dialog_content>iframe {
left: 18pt;
}
/* The following are for the chat box, on display and on hide */
iframe.fb_customer_chat_bounce_in_v2 {
left: 9pt;
}
iframe.fb_customer_chat_bounce_out_v2 {
left: 9pt;
}
/* The following are for the bounce in/out animations */
#keyframes fb_bounce_in_v2 {
0% {
opacity: 0;
transform: scale(0, 0);
transform-origin: bottom left;
}
50% {
transform: scale(1.03, 1.03);
transform-origin: bottom left;
}
100% {
opacity: 1;
transform: scale(1, 1);
transform-origin: bottom left;
}
}
#keyframes fb_bounce_out_v2 {
0% {
opacity: 1;
transform: scale(1, 1);
transform-origin: bottom left;
}
100% {
opacity: 0;
transform: scale(0, 0);
transform-origin: bottom left;
}
}
After a while, I realize that we couldn't customize this plugin by CSS because
"it isn’t possible to style the elements contained within an iframe as
you would with normal HTML elements on your site due to HTML
limitations"
https://wordpress.org/support/topic/resize-messenger-icon/
You can customize your chat plugin from Facebook Business Page only 3 things:
Alignment
Color
Bottom Spacing (For mobile and desktop)
In the right page, there are preview pages for you to know how your customization will be like.
After customizing, don't forget to click on the button PUBLISH to save your changes.
It's a pain that you cannot resize the logo or styling it more easily, I hope that Facebook in the future can give us more power to do what we want with this.
Was Simple as below.
.fb_dialog.fb_dialog_advanced iframe {
right: auto !important;
left: 2rem;
bottom: 2rem !important;
}
Here's how I edited it properly. Get ready for a fun navigation run! (learn from our wasted 4h)
Switch or login as your facebook professional account
Go to your facebook page
Click "Manage"
On the left menu, under "Your Tools" click "Messaging Settings"
(Now it takes you to a new dashboard)
On the left menu click inbox again (even though you are already on it)
Click top gear icon.
Under "Inbox Modes", click "View all settings"
Select Chat plugin on the left
Scroll down and voila... now you can edit the chat positioning
As the title says, I'm wondering how to get this image to span the whole browser window/page instead of having the gray margins.
Im using this theme:
https://raw.githubusercontent.com/olleota/themes/master/paperweight/main.html
And, its in action here:
http://fvcking5hit.tumblr.com/
where you see the gray borders and I just want it to span the whole page wile keeping the fade effect.
OK thank you for the additional comment, this should be all the code you need.
Find this code in your theme (it's showing at around line 226):
#masthead {
margin: 0 10%;
padding: 15% 0;
width: 80%;
}
Change it to:
#masthead {
margin: 0;
padding: 15% 0;
width:100%;
}
There are several references to #masthead in your css, so you will need to target the last reference for this to work (or tidy up the css by removing the old properties).
UPDATE
As you pointed out there is a media query changing the properties of the masthead.
Find this code:
#media (min-width: 1500px){
.theme-name-Paperweight #masthead {
margin: 0 20%;
width: 60%;
padding: 10% 0;
}
}
And change to:
#media (min-width: 1500px) {
.theme-name-Paperweight #masthead {
margin: 0;
width: 100%;
padding: 10% 0;
}
}
I'm using Chartist for browser visualization.
The requirement here is that I need to add title to the X and Y axis, so that viewers know what does each axis represent. However I went through the online document of Chartist and found no documentation about this. Did I miss something, or this feature is not supported in Chartist? If it's not supported, is there any way to work this out?
You can download and use the Axis Title Plugin developed by Alex Stanbury. This is the code you must add to your existing chart options.
plugins: [
Chartist.plugins.ctAxisTitle({
axisX: {
axisTitle: 'X title',
axisClass: 'ct-axis-title',
offset: {
x: 0,
y: 50
},
textAnchor: 'middle'
},
axisY: {
axisTitle: 'Y title',
axisClass: 'ct-axis-title',
offset: {
x: 0,
y: 0
},
textAnchor: 'middle',
flipTitle: false
}
})
]
I used css for this, try if this help you.
HTML:
<div id="chartist" class="chartist" data-x-axis="X axis label" data-y-axis="Y axis label"></div>
CSS:
[data-x-axis]::before {
content: attr(data-x-axis);
position: absolute;
width: 100%;
text-align: center;
left: 0;
bottom: 0;
font-size: 11px;
color: #777;
}
[data-y-axis]::after {
content: attr(data-y-axis);
position: absolute;
top: 50%;
left: -20px;
font-size: 11px;
color: #777;
text-align: center;
transform: rotate(-90deg)translateY(50%);
}
Titles are currently (June 2015) not supported.
The issue for this suggests that the Chartist authors want you to label the graph outside of Chartist but does include a way to do this in your HTML though with some notable caveats.