I simply can not animate the background-size property.
<div class="bar">
<div class="intern-bar">
R$ <span id="funds">000,00</span>
</div>
</div>
JS (with jQuery):
$(".intern-bar").animate({backgroundSize: "100% 100%, 100%"}, function(){
console.log("done")
});
CSS (SCSS):
body {
background-color: black;
}
.bar {
border-radius: 100px;
background-color: #ffffff;
padding: 7px;
box-sizing: border-box;
.intern-bar {
padding: 6px 15px;
box-sizing: border-box;
border-radius: 100px;
background: linear-gradient(to right, #00C1EB, #00c1eb)
no-repeat, linear-gradient(to right, rgba(182, 182, 182,
0.54), rgba(121, 121, 121, 0.40)) no-repeat;
background-size: 56% 100%, 100%;
background-position: 0%, 10%;
height: 100%;
min-width: 155px;
width: 100%;
font-size: 30px;
text-align: center;
font-weight: 200;
line-height: 1;
transition: 0.8s ease;
#funds {
font-weight: 500;
}
}
}
I've stumble upon this answer:
Because background-size is a CSS3 property that is not supported by jQuery yet as it's still a candidate for recommendation.
From this question: jQuery - Animate css background-size?
And none of the answers that I've come across worked for me, and I need to use the callback function of animate, to do something when it's finished, like a confetti animation, etc
Pen: https://codepen.io/Malganis/pen/MvXLxY
Here's my working jsFiddle, I used CSS animations.
I just modified your CSS and the JQUERY :) hope this can help you.
Solutions:
(jQuery) Attach an event handler function for one or more events to the selected
elements.
$(element).on();
(Standard JS) The transitionend event occurs when a CSS transition has completed
element.addEventListener("transitionend", function () {
console.log("Done");
}, false);
jsFiddle
Related
Hi I want to make a bar which scrolls the text like this one in the news.
I have a text which is too long for its maximal width and its overflow property is set to overflow-x: auto; so it's cutted. But I'm looking for such a bar which automatically scrolls my text (to the right) and when he finish, scrolls back in other direction (left). This is my text in css:
#text {
display: block;
color: white;
position: absolute;
width: 50%;
left: 0%;
text-align: center;
font-size: 8vw;
margin-top: 8.5%;
font-variant: small-caps;
text-shadow: 0 0 20px #000;
text-align: center;
z-index: 2;
overflow-x: auto;
white-space: nowrap;
line-height: 100%;
}
Any ideas? Actually answer can be in css, js or jquery. It doesn't matter.
The <maerquee>tag is obsolete as you can see here: https://developer.mozilla.org/de/docs/Web/HTML/Element/marquee
You can use pure css, here is a fiddle:
.marquee {
width: 450px;
background-color: yellow;
color: black;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee p {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
text-transform: uppercase;
}
#keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
<div class="marquee">
<p>Lorem Ipsum</p>
</div>
Some of these CodePen examples may be useful to you or others:
http://codepen.io/search/pens?q=marquee&limit=all&type=type-pens
One I think may match most of what you are looking for is: http://codepen.io/jaredkc/pen/bmAph
It uses very simple jQuery to achieve the scrolling and on-hover pause
$('.twitter-scroll').marquee({
duration: 15000,
pauseOnHover: true
});
The only exception is that it doesn't 'bounce back' when i hits the left side.
as mentioned before there is the native marquee element:
<marquee scrollamount="2" behavior="alternate" direction="right" width="350">TEXT TO SCROLL</marquee>
& there is the jQuery Marquee plugin that can be configured to run the text infinitely without a gap. [example: https://codepen.io/aamirafridi/pen/qgutw ]
$('.marquee').marquee({
gap: 50,
duplicated: true
});
you can also use any carousel plugin to make use of a list & not a one line string. something as this one
This jsfiddle..
https://jsfiddle.net/9e1wd245/12/
..demonstrates a browser behavior I'd like to understand better than I do.
If you remove the positioning from the crumbtray and the crumb, the hover- selected CSS is applied when the crumb is hovered and mouseover events are triggered when the mouse enters the crumb.
With the positioning in place, neither of those things happen; but if you hover over the top border, the hover CSS is applied and the mouseover event is triggered.
(In this situation, the approach used uses positioning to enable z-indexing so that the curved right border will appear over the left side of the adjacent elements.)
Note that you can take the negative right margin off the crumb, and the problem persists, so it isn't being caused by the negative margin.
I realize I could use an svg for a crumb, or maybe use a couple of separator elements over a shared background rather than using positioning and z-indexing, but why doesn't this work? Is there something in the spec that says hover and mouseover events aren't expected to work for positioned elements? Is there something else entirely that I'm overlooking?
html:
<div class="crumbtray">
<span class="crumb">USA</span>
<span class="crumb">California</span>
<span class="crumb">Sacremento</span>
</div>
css:
.crumbtray {
position: relative;
top: 0px;
left: 0px;
display: inline;
z-index: -10;
font-family: ariel, sansserif
font-size: 12px;
}
.crumb {
position: relative;
top: 0px;
left: 0px;
display: inline;
border: solid 1px gray;
border-left: none;
border-radius: 0px 10px 10px 0px;
padding: 0px 8px 0 12px;
margin-right: -10px;
cursor: pointer;
background: #c3f4c6;
background: -moz-linear-gradient(top, #c3f4c6 0%, #96f788 8%, #98e0a4 92%, #419330 96%, #188700 100%);
background: -webkit-linear-gradient(top, #c3f4c6 0%,#96f788 8%,#98e0a4 92%,#419330 96%,#188700 100%);
background: linear-gradient(to bottom, #c3f4c6 0%,#96f788 8%,#98e0a4 92%,#419330 96%,#188700 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3f4c6', endColorstr='#188700',GradientType=0 );
}
.crumb:hover {
background: none;
background-color: yellow;
}
.crumb:first-child {
border-left: solid 1px gray;
z-index: 60;
padding-left: 2px;
}
.crumb:nth-child(2) {
z-index: 50;
}
.crumb:nth-child(3){
z-index: 40;
}
JavaScript:
var ViewModel = {
init: function(){
console.log("ViewModel.init called");
$('.crumbtray').on('mouseover','span',function(){
console.log('mouseover crumb: ', this);
});
}
};
$(ViewModel.init);
Your problem is here:
z-index: -10;
This puts the element behind the background, which means although you can see it, the mouse can't "see" it because it is behind the (transparent) background, so it does not recieve mouseover events.
Now, it should still work, because the .crumbs have a positive z-index, above the background. It's likely that there is simply a bug, I do not believe this behaviour is documented anywhere.
It doesn't work, because you've set a negative z-index to parent element (Why did you do that?). Just remove it from there or change it to some positive value, like 1, for example.
When you set a negative z-index to element, it creates negative stacking context of all children element, so z-index width 40, 50, 60 just make sense inside it's parent, but main z-index will be negative (under body element).
So the main problem is negative z-index, you can cut it and search some information with 'negative z-index hover' keywords to clear the situation
.crumbtray {
position: relative;
top: 0px;
left: 0px;
display: inline;
z-index: -10;
font-family: ariel, sansserif
font-size: 12px;
}
I am building an iOS7 WebApp with a template that I found here:
http://c2prods.com/2013/cloning-the-ui-of-ios-7-with-html-css-and-javascript/
I have written some JavaScript/jQuery that fades a picture out and fades a toolbar in, toolbar first. I have a blank test page where I tested the script. It works perfectly. Then I copy and paste the EXACT SAME code into the real page and the jQuery never seems to load for whatever reason. It gives me an error saying the following:
Uncaught TypeError: Object # has no method 'fadeOut'
The fading is supposed to occur after 3 seconds. The idea is that this is a splash screen.
Here is my JS/jQuery:
$(document).ready(function() {
fadeAwaySplash();
navFadeIn();
//Insert More Functions Here
});
function fadeAwaySplash() {
//setTimeout(function() {
$("#splash-screen").fadeOut();
//}, 3000);
}
function navFadeIn(){
setTimeout(function() {
$("nav").fadeIn();
}, 3000);
}
Here is my CSS:
nav {
position: fixed;
bottom: 0;
width: 100%;
height: 49px;
text-align: center;
background-color: rgba(248, 248, 248, 0.9);
background-image: linear-gradient(180deg, rgb(200, 199, 204), rgb(200, 199, 204) 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: top center;
z-index: 100;
display: none;
}
#splash-screen {
position: absolute;
z-index: 999999;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
max-width: 100%;
max-height: 100%;
}
Here is my HTML:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<img src="/img/ipadSplash.png" id="splash-screen">
Any help is greatly appreciated.
Thanks in advance,
Emanuel
Great! scragar's answer worked! All I had to do is replace the $'s with "jQuery" (without the quotation marks). Although I had to replace the setTimeout with .delay(3000) Thanks!
i have a bar that is fixed to the bottom of the browser. i want to make the bar displayed as 'none', so that when a user hovers over the bar it is displayed until they hover out.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
html {
background: #34495e;
}
#pagebottom {
width: 92%;
height: 20px;
background: rgba(255, 255, 255, 0.80);
margin-left: 4%;
margin-right: 4%;
bottom: 0;
position: fixed;
color: #3498db;
text-align: center;
}
</style>
</head>
<body>
<div id="pagebottom">
random text
</div>
</body>
</html>
try this css solution
#pagebottom {
width: 92%;
height: 20px;
background: rgba(255, 255, 255, 0.80);
margin-left: 4%;
margin-right: 4%;
bottom: 0;
position: fixed;
color: #3498db;
text-align: center;
opacity:0;
}
#pagebottom:hover{
opacity:1;
transition:all .5s linear;
}
You can accomplish this with CSS. No JavaScript needed.:
#pagebottom {
opacity: 0;
width: 92%;
height: 20px;
background: rgba(255, 255, 255, 0.80);
margin-left: 4%;
margin-right: 4%;
bottom: 0;
position: fixed;
color: #3498db;
text-align: center;
}
#pagebottom:hover {
opacity: 1;
}
EDIT This is a jQuery solution. There are some great CSS only solutions above.
You can't display your div as none, as it will have no width or height, and therefore be un-hoverable. However, you can use the opacity attribute, and modify the footer's CSS accordingly.
Take a look at this JSFiddle
Here are the changes I made:
I added opacity: 0; to the #pagebottom CSS so it is invisible by default.
I added the following jQuery:
$('#pagebottom').mouseenter(function(){
$('#pagebottom').css('opacity','1');
});
$('#pagebottom').mouseleave(function(){
$('#pagebottom').css('opacity','0');
});
This code waits until the mouse enters the div area, and sets the opacity to 1. When the mouse leaves, it sets the opacity to 0 again, making the element invisible.
If you want a nice tradition so the div fades in and out, you can use CSS transitions or a jQuery plugin like Transit, or even the animate feature that Felix describes in his answer.
You can use:
1) css() to set the opacity of your div:
2) hover() to keep track of when the mouse pointer enters and leaves your div
3) animate() to apply fadeIn() and fadeOut animation when changing the opacity
$('#pagebottom').css('opacity','0');
$( "#pagebottom" ).hover(
function() {
$('#pagebottom').stop().animate({opacity: 1}, 500);
}, function() {
$('#pagebottom').stop().animate({opacity: 0}, 500);
}
);
Fiddle Demo
I want to have a sliding switch. On the left would be Off and on the right would be On. When the user toggles the switch, I want the 'slider' portion to slide to the other side and indicate it is off. I could then have a callback that takes as input the state of the toggle switch so I can act accordingly.
Any idea how to do this?
check out this generator: On/Off FlipSwitch
you can get various different style outcomes and its css only - no javascript!
You mean something like IPhone checkboxes?
Try Thomas Reynolds' iOS Checkboxes script:
Once the files are available to your site, activating the script is very easy:
...
$(document).ready(function() {
$(':checkbox').iphoneStyle();
});
Results:
Using plain javascript
<html>
<head>
<!-- define on/off styles -->
<style type="text/css">
.on { background:blue; }
.off { background:red; }
</style>
<!-- define the toggle function -->
<script language="javascript">
function toggleState(item){
if(item.className == "on") {
item.className="off";
} else {
item.className="on";
}
}
</script>
</head>
<body>
<!-- call 'toggleState' whenever clicked -->
<input type="button" id="btn" value="button"
class="off" onclick="toggleState(this)" />
</body>
</html>
Using jQuery
If you use jQuery, you can do it using the toggle function, or using the toggleClass function inside click event handler, like this:
$(document).ready(function(){
$('a#myButton').click(function(){
$(this).toggleClass("btnClicked");
});
});
Using jQuery UI effects, you can animate transitions: http://jqueryui.com/demos/toggleClass/
Initial answer from 2013
If you don't mind something related to Bootstrap, an excellent (unofficial) Bootstrap Switch is available.
It uses radio types or checkboxes as switches. A type attribute has been added since V.1.8.
Source code is available on Github.
Note from 2018
I would not recommend to use those kind of old Switch buttons now, as they always seemed to suffer of usability issues as pointed by many people.
Please consider having a look at modern Switches like those.
You can achieve this using HTML and CSS and convert a checkbox into a HTML Switch.
input.cmn-toggle-round + label {
padding: 2px;
width: 100px;
height: 30px;
background-color: #dddddd;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
}
input.cmn-toggle-round + label:before, input.cmn-toggle-round + label:after {
display: block;
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
content: "";
}
input.cmn-toggle-round + label:before {
right: 1px;
background-color: #f1f1f1;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
-webkit-transition: background 0.4s;
-moz-transition: background 0.4s;
-o-transition: background 0.4s;
transition: background 0.4s;
}
input.cmn-toggle-round + label:after {
width: 40px;
background-color: #fff;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-webkit-transition: margin 0.4s;
-moz-transition: margin 0.4s;
-o-transition: margin 0.4s;
transition: margin 0.4s;
}
input.cmn-toggle-round:checked + label:before {
background-color: #8ce196;
}
input.cmn-toggle-round:checked + label:after {
margin-left: 60px;
}
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
.cmn-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<div class="switch">
<input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
<label for="cmn-toggle-1"></label>
</div>
Outline: Create two elements: a slider/switch and a trough as a parent of the slider. To toggle the state, switch the slider element between an "on" and an "off" class. In the style for one class, set "left" to 0 and leave "right" the default; for the other class, do the opposite:
<style type="text/css">
.toggleSwitch {
width: ...;
height: ...;
/* add other styling as appropriate to position element */
position: relative;
}
.slider {
background-image: url(...);
position: absolute;
width: ...;
height: ...;
}
.slider.on {
right: 0;
}
.slider.off {
left: 0;
}
</style>
<script type="text/javascript">
function replaceClass(elt, oldClass, newClass) {
var oldRE = RegExp('\\b'+oldClass+'\\b');
elt.className = elt.className.replace(oldRE, newClass);
}
function toggle(elt, on, off) {
var onRE = RegExp('\\b'+on+'\\b');
if (onRE.test(elt.className)) {
elt.className = elt.className.replace(onRE, off);
} else {
replaceClass(elt, off, on);
}
}
</script>
...
<div class="toggleSwitch" onclick="toggle(this.firstChild, 'on', 'off');"><div class="slider off" /></div>
Alternatively, just set the background image for the "on" and "off" states, which is a much easier approach than mucking about with positioning.
You can take a look at Shield UI's Switch widget. It is as easy to use as this:
<input id="switch3" type="checkbox" value="" />
<script>
jQuery(function ($) {
$("#switch3").shieldSwitch({
onText: "Yes, save it",
ffText: "No, delete it",
cls: "large"
});
});
</script>