I have a script that as soon as the user starts to scroll a box shadow is added that looks very nice. However, this box shadow is added instantly. I would prefer that it fade in using CSS 3. I have tried creating keyframes that change the opacity from 0 - 1 over 1 second but that doesn't work.
Here is the script I am using:
$(function() {
$(window).scroll(function() {
var top_offset = $(window).scrollTop();
if (top_offset) {
$('.top_head_separator').addClass('fixed-top fade-in');
}
});
CSS:
.fixed-top {
background:#FFFFFF;
box-shadow: 0 7px 15px 4px rgba(0,0,0,0.38);
height: 90px;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
#keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.fadeIn {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: fadeIn;
}
How do I have the box shadow fade in?
Note: I omitted vendor prefixes in this question but they are in my code.
I think you just have a spelling mistake and a syntax error or two, otherwise you're fine. Two things:
Close both functions in your jQuery.
Your CSS mentions fadeIn, but jQuery had fade-in
Here's the new, fixed jQuery code:
$(function() {
$(window).scroll(function() {
var top_offset = $(window).scrollTop();
if (top_offset) {
$('.top_head_separator').addClass('fixed-top fadeIn'); // <<<< "fadeIn"
}
}); // <<<< ADDED
});
See this -webkit- demo for a working example.
Related
I am trying to find some userChrome.css to cause Firefox HTML5 video tags to always display the control bar:
Looking at the source code I see that the video controls are defined in videocontrols.xml, and it seems like the CSS file is videocontrols.css
So I've added variations on the following to my userChrome.css but I am not seeing any effect on the controlBar display.
.controlsContainer [hidden="true"],
.controlBar[hidden] {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
}
.controlBar[size="hidden"] {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
}
.controlBar:not([immediate]) {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
}
.controlBar[fadeout] {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
}
Any suggestions for why this doesn't seem to be applying to the interface?
This question isn't about an addon to firefox, but a built in feature. I tried moving the styles to userContent.css and that had no effect either after restarting Firefox. Any other suggestions?
I've tried adding the red style to userChrome.css, and the blue one to userContent.css and there was no sign of either when viewing an HTML5 video tag:
/* userChrome.css */
#videoControls .controlBar,
.controlBar,
.controlBar * {
color: red !important;
background-color: red !important;
border: 1px solid red !important;
outline: 1px solid red !important;
}
/* userContent.css */
#videoControls .controlBar,
.controlBar,
.controlBar * {
color: blue !important;
background-color: blue !important;
border: 1px solid blue !important;
outline: 1px solid blue !important;
}
As this thread demonstrates, utilization of:
// ==UserScript==
// #name HTML5 video controls
// #namespace http://tampermonkey.net/
// #version 0.1
// #include http://*
// #include https://*
// #grant none
// ==/UserScript==
(function() {
'use strict';
function addVideoControls(videoNode) {
videoNode.setAttribute("controls", "");
console.log("*** Enabled HTML 5 video controls for", videoNode);
}
for (let el of document.getElementsByTagName("video")) {
addVideoControls(el);
}
const observer = new MutationObserver(mutations => {
for (let i = 0, mLen = mutations.length; i < mLen; ++i) {
let mutation = mutations[i];
if (mutation.type === "childList") {
for (let j = 0, aLen = mutation.addedNodes.length; j < aLen; ++j) {
let addedNode = mutation.addedNodes[j];
if (addedNode.nodeType === 1 && addedNode.tagName === "VIDEO") {
addVideoControls(addedNode);
}
}
}
}
});
observer.observe(document.body, {childList: true, subtree: true});
})();
...via Greasemonkey should be adequate (or via Tampermonkey, because as "http://stackoverflow.com/questions/47317983" demonstrates, the scripts should be interchangeable).
I would like to achieve the effect where one image is revealed over the other when scrolling the page.
You can see an example on livearealabs.com (new york / seattle). Does anybody know how to create it using CSS3?
Check out this jsfiddle to create the sliding effect.
The trick is to have one div rotated 60 degrees. You position it so that it covers the entire wrapper and the overflow is hidden. Then with javascript you just have to move the slice container either by changing the left property or by changing the translate-X property.
Here is the code:
HTML:
<div class="wrapper">
<div class="bg"></div>
<div class="slice" data-show="true"></div>
</div>
CSS:
.wrapper {
position: relative;
overflow: hidden;
width: 20em;
height: 10em;
}
.bg {
background-color: red;
width: 100%;
height: 100%;
}
.slice {
position: absolute;
top: -12em;
left: -8em;
width: 30em;
height: 30em;
background-color: blue;
-webkit-transform: rotate(-60deg);
}
JS:
var hidden = false;
$('.wrapper').click(function() {
console.log('click');
if (hidden) {
$('.slice').stop().animate({left: '-8em'}, 2000);
hidden = false;
} else {
$('.slice').stop().animate({left: '-34em'}, 2000);
hidden = true;
}
console.log('click end');
});
Also check out this jsfiddle for a similar sliding effect that can be achieved with CSS only.
I am creating a custom pie chart using jqPlot's PieRenderer. My only problem is that I can either show the label or the percentage on the dataLabels. I want to do a mix and show both like <label>\n<percentage>. Explanation:
By setting this.dataLabels = 'percent', I can do this:
By setting this.dataLabels = 'label', I can do this:
I want to do this:
Do you have any ideas?
According to the source code, dataLabels doesn't support rendering label together with percent at the same time.
I think you can easily create a list of labels using JavaScript and make sure you use <br/> instead of \n if you want to render 2 lines for each part.
#sza's solution is tidier, so I will have to accept it. I wanted to post my own though, because it is easier and it may help someone.
What I did is, put two pieCharts on each other, where the first one is visible and has the percentage values and the second one has no fill and is invisible except for the labels.
My XHTML code:
<p:pieChart value="#{chartBean.pieModel}" legendPosition="" fill="true" showDataLabels="true"
title="MyPieChart" style="width:100%; height:350px" sliceMargin="2"
diameter="300" dataFormat="percent" shadow="false" extender="pieChartExtender"
seriesColors="7eb75b,c2715e,6367c2,9b6ece,5cc2c1,c0c216" styleClass="mainPieChart" />
<p:pieChart value="#{chartBean.pieModel}" legendPosition="" fill="false" showDataLabels="true"
title="MyPieChart" style="width:100%; height:350px" sliceMargin="2"
diameter="300" dataFormat="label" shadow="false" extender="pieChartLabelExtender"
seriesColors="7eb75b,c2715e,6367c2,9b6ece,5cc2c1,c0c216" styleClass="pieLabels" />
extender.js:
function pieChartExtender() {
this.cfg.seriesDefaults.rendererOptions.dataLabelFormatString = '%#.2f%%';
this.cfg.seriesDefaults.rendererOptions.dataLabelThreshold = 5;
this.cfg.seriesDefaults.rendererOptions.dataLabelPositionFactor = 0.8;
this.cfg.seriesDefaults.rendererOptions.startAngle = -90;
}
function pieChartLabelExtender() {
this.cfg.seriesDefaults.rendererOptions.dataLabelThreshold = 5;
this.cfg.seriesDefaults.rendererOptions.dataLabelPositionFactor = 0.8;
this.cfg.seriesDefaults.rendererOptions.startAngle = -90;
}
CSS file:
.chartContainer {
position:relative;
margin: 0 auto;
top: 10px;
width: 350px;
height: 350px;
}
.chartLegend {
border: 1px solid #d7d7d8;
margin: 40px 40px;
width: 80%;
}
.pieExtra {
position:absolute;
left: 17px;
top: 13.5px;
}
.pieLabels { position:absolute !important; }
.mainPieChart { position:absolute !important; }
.jqplot-title { display:none !important; }
.jqplot-grid-canvas { display:none !important; }
.jqplot-series-shadowCanvas { display:none !important; }
.mainPieChart .jqplot-event-canvas { z-index: 10 !important; }
.jqplot-data-label { color: #fff; font-weight: bold; font-size: 14px; }
.pieLabels .jqplot-data-label { margin-top: -9px !important; }
.mainPieChart .jqplot-data-label { margin-top: 8px !important; }
.pieLabels .jqplot-series-canvas { display:none !important; }
Notice that:
both pieCharts (called pieLabels and mainPieChart) are absolutely positioned, in order to be placed on each other
jqplot-data-label of pieLabels is placed 9px above and jqplot-data-label of mainPieChart is placed 8px below to create the label-percentage label
jqplot-series-canvas for pieLabels is not displayed, in order to make it invisible.
I am trying create nice animation during loading content using ajax. I want to use display icon during reloading div with "Content", however I can't figured out is it possible to do that only with CSS.
Icon should:
horizontally always in the center of div with "Content"
vertically always in the center of "visible part of content"
should stay during whole animation in the vertically center of "visible part of content" during slide animation which hides Menu.
If vertical centering according to "visible part of content" is not possible, it would be ok to center image according to viewport of the browser.
[EDIT]:
Here is my fiddle: http://jsfiddle.net/QWB9x/74/ and the part which probably should be changed:
.loading #img_loading {
position: fixed;
top: 50%;
left: 50%;
display: block;
}
This works best for me :)
function loadNewContent(){
$(".loaderCont").removeClass("loading")
}
$(document).ready(function () {
$("#hide_button").on("click", function () {
$(this).closest(".bottom").toggleClass("left_hided");
$(".loaderCont").toggleClass("left_hided2");
});
$("#filter1,#filter2,#filter3,#filter4").on("click", function() {
$(".loaderCont").addClass("loading");
setTimeout(loadNewContent, 2000);
});
});
CSS:
.header {
background-color: Green;
width: 100%;
margin-bottom: 20px;
height: 100px;
}
.left {
background-color: Red;
float: left;
width: 100px;
}
.left_hided .left{
margin-left: -85px;
}
.right {
background: Aqua url("http://i.imgur.com/ifyW4z8.png") 50% repeat-y;
width: calc(100% - 140px);
float: right;
}
.left_hided .right{
width: calc(100% - 55px);
}
input{
float:right;
}
.loaderCont {
background-color: rgba(255, 0, 0, 0.6);
height: 100%;
width: calc(100% - 140px);
position: fixed;
right: 0;
top: 0;
z-index: -1;
}
.left_hided2 {
width: calc(100% - 55px);
}
#loader {
background: url(http://i.stack.imgur.com/FhHRx.gif) no-repeat center center;
position: relative;
top: calc(50% - 16px);
left: calc(50% - 16px);
display: block;
height: 32px;
width: 32px;
}
.loading {
z-index: 9001;
}
JSFiddle: http://jsfiddle.net/ZRwzr/1/
For this to work to your requirements you will need to use JavaScript to determine where the loading image needs to be placed over the visible part using a fixed position div and then reposition it when the user resizes the window or scrolls the window so it is always in the desired position.
$(window).scroll(function() {
scrolling();
});
$(window).resize(function() {
scrolling();
});
scrolling();
function scrolling() {
var windowHeight = $(window).height();
var scrollTop = $(window).scrollTop();
var offsetTop = $('#thediv')[0].offsetTop;
var offsetHeight = $('#thediv')[0].offsetHeight;
var offsetWidth = $('#thediv')[0].offsetWidth;
var top = offsetTop - scrollTop;
top = top < 0 ? 0 : top;
var bottom = (scrollTop + windowHeight) - (offsetHeight + offsetTop);
bottom = bottom < 0 ? 0 : bottom;
$('.image').css('top', top);
$('.image').css('bottom', bottom);
$('.image').css('width', offsetWidth);
}
Please note that if you change the width of the div you will always need to call the scrolling() function so that it can recalculate the position.
I also added the loading image as a background image to the fixed div so that we can use CSS to centre it.
.image {
position: fixed;
text-align:center;
background-image:url('http://i.stack.imgur.com/FhHRx.gif');
background-repeat:no-repeat;
background-position:center center;
background-color:rgba(255,255,255,.4);
}
Here is the JSFiddle http://jsfiddle.net/QWB9x/89/
You do not need to do so much of scripting to assign it a position. You can do it with simple css.
Just make the loader relative to its parent. Assign a height and width and do the following css part.
.loader{
position: relative;
top: -half of the height;
left: -half of the width;
margin-top: 50%;
margin-left: 50%;
}
works with every device
use z-index example:-
<div style="z-index:100;">loading image</div>
.loading #img_loading {
position: fixed;
top: 50%;
left: calc(50% + 55px);
display: block;
}
The above will solve the half of the problem, you need to update the left dynamically with javascript.
How does one make a div/input flash or 'pulse'? Say for example a form field has an invalid value entered?
With CSS3 something like on this page, you can add the pulsing effect to a class called error:
#-webkit-keyframes error {
from {
-webkit-transform: scale(1.0);
opacity: 0.75;
}
50% {
-webkit-transform: scale(1.2);
opacity: 1.0;
}
to {
-webkit-transform: scale(1.0);
opacity: 0.75;
}
}
.error {
opacity: 0.75;
-webkit-animation-name: error;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: 10;
}
A YouTube demo if you're not on Safari, Chrome or another browser the above works on. The demo makes use of :hover to start the animation.
You can add the above class to invalid entries.
For example, this is very simple with the jQuery validation plugin:
$(function() {
$("form").validate();
});
jsFiddle example