there Stack Overflow community. I'm sure there's just something simple that I am missing but for the life of me I cannot figure out what it is.
I have a simple animation that is just transposing some divs. The animation runs and everything but I am getting some weird behaviour that I am not sure exactly why it is.
In my jQuery, there is a method show_dots(integer milliseconds). The only thing this function does is to call $.toggle() on the 4 elements that I am animating. I would like the function to behave like this. The page is loaded, the 4 elements are not visible. They become visible and then the animation runs.
When I include a method call to show_dots before the animation, the dots do not appear and the animation runs(I opened up the dev tools of the browser and I can see the values changing). Just for the hell of it, I threw in a method call to show dots AFTER the animation.
In that case, the behaviour was... the page loaded (the dots were visible), the animation ran, and then the dots disappeared after the method call. I'm not certain why this is the behaviour.
I've also tried animating the capacity to no avail. I'm not sure why it isn't working but I'm not sure where to start. I'm sure it's just some inherent feature that I'm unaware of, but thus far, I'm not sure what it is
Code is as follows:
let tl = $("#square-animation-div-tl");
let tr = $("#square-animation-div-tr");
let bl = $("#square-animation-div-bl");
let br = $("#square-animation-div-br");
$(window).on('load', function() {
animation_loop(1300, tl, tr, bl, br);
$("#journey-link").on("click", pause_animation);
});
function show_dots(dur) {
tl.toggle(250);
tr.toggle(250);
bl.toggle(250);
br.toggle(250);
};
function animation_loop(dur, tl, tr, bl, br) {
//toggle_dots(250) //this line does not make the dots toggle in or out
tl.animate({
left: ($("#journey-link").width() - 18),
borderRadius: "50%",
backgroundColor: "#ffffff"
}, dur)
.animate({
top: ($("#journey-link").height() - 18),
borderRadius: "0%",
backgroundColor: "#0000ff"
}, dur)
.animate({
left: -12,
borderRadius: "50%",
backgroundColor: "#ffffff"
}, dur)
.animate({
top: -12,
borderRadius: "0%",
backgroundColor: "#0000ff"
}, dur);
tr.animate({
top: ($("#journey-link").height() - 18),
borderRadius: "50%"
}, dur)
.animate({
right: ($("#journey-link").width() - 18),
borderRadius: "0%"
}, dur)
.animate({
top: -12,
borderRadius: "50%"
}, dur)
.animate({
right: -12,
borderRadius: "0%"
}, dur);
bl.animate({
bottom: ($("#journey-link").height() - 18),
borderRadius: "50%"
}, dur)
.animate({
left: ($("#journey-link").width() - 18),
borderRadius: "0%"
}, dur)
.animate({
bottom: -12,
borderRadius: "50%"
}, dur)
.animate({
left: -12,
borderRadius: "0%"
}, dur);
br.animate({
right: ($("#journey-link").width() - 18),
borderRadius: "50%",
backgroundColor: "#ffffff"
}, dur)
.animate({
bottom: ($("#journey-link").height() - 18),
borderRadius: "0%",
backgroundColor: "#0000ff"
}, dur)
.animate({
right: -12,
borderRadius: "50%",
backgroundColor: "#ffffff"
}, dur)
.animate({
bottom: -12,
borderRadius: "0%",
backgroundColor: "#0000ff"
}, dur);
toggle_dots(250);
//animation_loop(dur,tl,tr,bl,br);
};
.square-animation-container {
width: 100%;
height: 100%;
z-index: 3;
}
.square-animation-div {
height: 24px;
max-height: 24px;
min-height: 24px;
width: 24px;
max-width: 24px;
min-width: 24px;
z-index: 2;
position: absolute;
}
#square-animation-div-tl {
top: -12px;
left: -12px;
background-color: blue;
}
#square-animation-div-tr {
top: -12px;
right: -12px;
background-color: white;
}
#square-animation-div-bl {
bottom: -12px;
left: -12px;
background-color: white;
}
#square-animation-div-br {
bottom: -12px;
right: -12px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square-animation-container">
<div id="square-animation-div-tl" class="square-animation-div">
</div>
<div id="square-animation-div-tr" class="square-animation-div">
</div>
<div id="square-animation-div-bl" class="square-animation-div ">
</div>
<div id="square-animation-div-br" class="square-animation-div ">
</div>
</div>
Related
I have a MUI styled component that renders a green circular badge.
const StyledGreenBadge = styled(Badge)(({ theme }) => ({
'& .MuiBadge-badge': {
backgroundColor: '#44b700',
color: '#44b700',
width: '15px',
height: '15px',
borderRadius: '100%',
boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
'&::after': {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
borderRadius: '50%',
animation: 'ripple 1.2s infinite ease-in-out',
border: '1px solid currentColor',
content: '""',
},
},
'#keyframes ripple': {
'0%': {
transform: 'scale(.8)',
opacity: 1,
},
'100%': {
transform: 'scale(2.4)',
opacity: 0,
},
},
}));
Now, I want my code to be DRY, so I want to create a StyledYellowBadge.
All I have to do is somehow just change the color property of StyledGreenBadge.
Yet, I could not figure out how for 3 hours.
I have tried something like this:
color: { desiredColor === 'yellow' ? 'yellow' : #44b700'},
where desiredColor is a second argument, after
{ theme }
How can I make achieve this?
You can add custom properties to your styled MUI component by describing the type:
const StyledGreenBadge = styled(Badge)<{ badgeColor?: string }>(
Then, you can pass described property (badgeColor in this case) to your styled Badge component:
<StyledGreenBadge badgeColor="red" badgeContent={4} color="primary">
and assign it to the property you want:
backgroundColor: props.badgeColor ?? "#44b700",
Full code:
const StyledGreenBadge = styled(Badge)<{ badgeColor: string }>(
({ theme, ...props }) => {
console.log(props);
return {
"& .MuiBadge-badge": {
backgroundColor: props.badgeColor ?? "#44b700",
color: "#44b700",
width: "15px",
height: "15px",
borderRadius: "100%",
boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
"&::after": {
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
borderRadius: "50%",
animation: "ripple 1.2s infinite ease-in-out",
border: "1px solid currentColor",
content: '""'
}
},
"#keyframes ripple": {
"0%": {
transform: "scale(.8)",
opacity: 1
},
"100%": {
transform: "scale(2.4)",
opacity: 0
}
}
};
}
);
export default function SimpleBadge() {
return (
<StyledGreenBadge badgeColor="red" badgeContent={4} color="primary">
<MailIcon color="action" />
</StyledGreenBadge>
);
}
Demo
I have a reusable component that contains an animation called AnimationLoader. This component is a reusable component for loading states. I'm simply trying to take this component and use it inside of another component, UnpublishBlogBtn as the loader after a button click - that all works fine. However, I'd like to change the height and width of the animation inside of UnpublishBlogBtn and cannot for the life of me get that to work properly.
I've tried implementing Object.assign to bring in the CSS from the other file and just change the height and width. I've also tried just changing the CSS by doing <style={{}}> as well as wrapping the component in a div that has a style added(this appears to just change the button and not the animation itself).
<Button type="main" className="blogBtn">
{currentlyUnpublishingBlog ? <AnimatedLoader css={{ height: 1, width: 1 }}/> :
'Unpublish Blog'}
</Button>
const AnimatedLoader = () => {
return (
<div
css={{
height: 45,
width: 45
}}
>
<AnimatedIcon
css={{
animationDelay: '0.7s',
height: 35,
left: 10,
position: 'absolute',
top: 10,
width: 35
}}
/>
<AnimatedIcon
css={{
animationDelay: '0.7s'
display: 'none',
height: 45,
left: 0,
top: 0,
width: 45,
}}
/>
<div
css={{
borderRadius: 20,
borderStyle: 'solid',
borderWidth: 3,
height: 45,
position: 'absolute',
width: 45,
}}
/>
</div>
)
};
export default AnimatedLoader;
After user clicks on Unpublish Blog button, the loader should display as a smaller width and height on top of the button. Currently, it maintains the same size as what is listed inside of AnimatedLoader component and I'd like the size to change inside of the UnpublishBlogBtn component.
You can pass your css in as a prop to your AnimatedLoader
const AnimatedLoader = ({css={
height: 45,
width: 45
}}) => {
return (
<div
{...css}
>
<AnimatedIcon
css={{
animationDelay: '0.7s',
height: 35,
left: 10,
position: 'absolute',
top: 10,
width: 35
}}
// ....
If you need to do more complex things, it's probably more sensible to pass in a prop that describes the different style options as a group. So isSmallSize as a boolean or different sizes as an enum etc.
Then in your component you adjust the styles depending on the prop.
const AnimatedLoader = ({ isSmallSize = false }) => {
const outerSize = isSmallSize ?
{ height: 45, width: 45 } : { height: 1, width: 1 }
const iconSize = isSmallSize ?
{ height: 35, width: 35 } : { height: 1, width: 1 }
return (
<div css={{ ...outerSize }}>
<AnimatedIcon
css={{
animationDelay: '0.7s',
left: 10,
position: 'absolute',
top: 10,
...iconSize
}}
/>
<AnimatedIcon
css={{
animationDelay: '0.7s',
display: 'none',
left: 0,
top: 0,
...iconSize
}}
/>
<div
css={{
borderRadius: 20,
borderStyle: 'solid',
borderWidth: 3,
position: 'absolute',
...iconSize
}}
/>
</div>
)
}
I am trying to make a small jQuery plugin that is able to create an overlay to create a tinting effect. To create this overlay is simple enough using plain js & jQuery, but when I try to wrap it all up into a jQuery plugin I get the error message that append (and appendTo) are not functions. The plugin works if I use extend instead of append, but the it is simply changing the existing css code, while I want to create an actual overlay over any div or object.
(function ($) {
$.fn.tint = function( options )
{
var overlay = $.append(
{
backgroundColor: "black",
opacity: 0.5,
width: "100%",
height: "100%",
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
//"z-index": 1000,
}, options
);
return this.css(
{
backgroundColor: overlay.backgroundColor,
opacity: overlay.opacity,
width: overlay.width,
height: overlay.height,
position: overlay.position,
top: overlay.top,
left: overlay.left,
right: overlay.right,
bottom: overlay.bottom,
//z-index: overlay.z-index,
}
);
}
} ( jQuery ));
I guess you are trying to do $.extend (not $.append):
(function ($) {
$.fn.tint = function( options )
{
if($(this).find(".overlay").length > 0) return $(this);
var overlay = $.extend({
backgroundColor: "black",
opacity: 0.5,
width: "100%",
height: "100%",
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
//"z-index": 1000,
}, options);
$("<div class='overlay'>").css(
{
backgroundColor: overlay.backgroundColor,
opacity: overlay.opacity,
width: overlay.width,
height: overlay.height,
position: overlay.position,
top: overlay.top,
left: overlay.left,
right: overlay.right,
bottom: overlay.bottom,
//z-index: overlay.z-index,
}
).appendTo(this);
return $(this);
}
} ( jQuery ));
$(".overlay-target").on("click", function(){
$(this).tint({backgroundColor: "green"});
});
.overlay-target {
border: 1px solid red;
margin: 20px;
padding: 50px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='overlay-target'>I want an overlay</div>
Hi guys this Queryloader is working on my page but what i want now is to put image inside the loader(ex. company logo). Please help
<script src="loader/queryloader2.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
new QueryLoader2(document.querySelector("body"), {
barColor: "#e7c665",
backgroundColor: "#111",
percentage: true,
barHeight: 1,
minimumTime: 300,
fadeOutTime: 1000
});
});
</script>
http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/
The plugin loads preloads all the images in the HTML. There is no provision to load only a subset of images. At least none as far as the documentation goes.
It automatically fetches all your images and background images and preloads them before showing the webpage
-from the QueryLoader2 site
All you need to do is add some CSS code...
If you want to add custom text:
#qLoverlay::after {
position:absolute;
content:'your custom text here';
left:0;
right:0;
bottom:40%;
font-size:14px;
color:#FFF;
}
If you want to add an image:
#qLoverlay::before {
position:absolute;
content:url(exampleimage.png);
left:0;
right:0;
top:30%;
}
You can just use the following CSS rule:
#qLoverlay {
background: url(images/logo.png) no-repeat center 25%;
}
Modify the css this way:
#qLoverlay{
position: relative;
}
Only change the top for adjust the image.
#qLoverlay::before {
position:absolute;
content:url('images/logoedit1.png');
text-align: center;
top: 25%;
width: 100%;
}
I added the following where it creates the loading text, bar, and percentage
// CODE TO INSERT
this.loaderLogo = $("<div id='loader-logo'></div>").css({
background: 'url("http://chrisrocco.net/elegantearth/res/images/logo.png") no-repeat',
backgroundSize: '100%',
height: "400px",
width: "900px",
margin: "25px auto",
fontSize: "60px",
textAlign: "center",
color: this.parent.options.barColor
}).appendTo(this.container);
It belongs here, on line ~31 of queryloader2.js
if (this.parent.options.percentage == true) {
this.percentageContainer = $("<span id='qLpercentage'></span>").text("0%").css({
height: "80px",
width: "115px",
position: "absolute",
fontSize: "60px",
fontFamily: this.parent.options.fontFamily,
top: "75%",
left: "50%",
marginTop: "-" + (59 + this.parent.options.barHeight) + "px",
textAlign: "center",
marginLeft: "12px",
marginTop: "-120px",
color: this.parent.options.barColor
}).appendTo(this.container);
this.nameElem = $("<span id='elem-title'></span>").text("Loading ").css({
height: "80px",
width: "258px",
position: "absolute",
fontSize: "60px",
fontFamily: this.parent.options.fontFamily,
top: "75%",
left: "50%",
marginTop: "-" + (59 + this.parent.options.barHeight) + "px",
textAlign: "center",
marginLeft: "-270px",
marginTop: "-120px",
color: this.parent.options.barColor
}).appendTo(this.container);
// LINE 31
// INSERT HERE
}
You will, of course, have to tweak the css to your project
Picture of Result
I have the following code for a menu system which includes a lot of parts which are common in every menu item.
I'm struggling to put the common code into functions which I can then call as needed - so I don't need to have hundreds of lines of identical code.
Can anyone help point me in the right direction?
$("#test1").hover( function() {
$(this).animate({
width: "599px",
left: "0px",
height: "168px",
backgroundColor: "#d7df23",
opacity: 0.95
}, 100).css({'z-index': "10", 'border-top': 'none'});
// Start of common code
$(this).find(".thumb").animate({
width: "150px",
height: "150px",
marginTop: "8px",
marginRight: "0px",
marginBottom: "0px",
marginLeft: "12px"
}, 100).attr('src','images/home/animatedMenu/1IMG.jpg').css({'border': '1px solid #FFF'});
// End of common code
$(this).find("h2").animate({
left: "600px"
}, 100).hide();
$(this).find(".moredetail").delay(150).animate({
left: "0px"
}, {
duration: 150,
easing: 'easeInBounce'
});
}, function() {
$(this).clearQueue().animate({
width: "246px",
left: "9px",
height: "83px",
backgroundColor: "#222",
opacity: 0.90
}, 100).css({'z-index': "1", 'border-top': '1px solid #444'});
// Start of common code
$(this).find(".thumb").animate({
width: "68px",
height: "68px",
marginTop: "6px",
marginRight: "0px",
marginBottom: "0px",
marginLeft: "13px"
}, 100).attr('src','images/home/animatedMenu/1IMGup.jpg').css({'border': '1px solid #000'});
// End of common code
$(this).find("h2").show().animate({
left: "0px"
}, {
duration: 350,
easing: 'easeOutBounce'
});
$(this).find(".moredetail").animate({
left: "600px"
}, 100);
});
Factor each reused piece of code in a function. You'll have two functions like this one:
function thumbHoverStart(element) {
$(element).find(".thumb").animate({
width: "150px",
height: "150px",
marginTop: "8px",
marginRight: "0px",
marginBottom: "0px",
marginLeft: "12px"
}, 100)
.attr('src','images/home/animatedMenu/1IMG.jpg')
.css({'border': '1px solid #FFF'});
}
Call each function from the appropriate event:
// ...
opacity: 0.95
}, 100).css({'z-index': "10", 'border-top': 'none'});
thumbHoverStart(this);
$(this).find("h2").animate({
left: "600px"
// ...
If the image number is based off the id just use that when setting the src:
.attr('src','images/home/animatedMenu/' + this.id.replace('test','') + 'IMG.jpg')
Then you can have one set of code based on a class selector, $(".hoverable").hover(...
Just initialize the function below which will be containing the common code -
Try below code -
$(document).ready(function(){
$("#test1").hover( function() {
$(this).animate({
width: "599px",
left: "0px",
height: "168px",
backgroundColor: "#d7df23",
opacity: 0.95
}, 100).css({'z-index': "10", 'border-top': 'none'});
// call common code function
common1(this);
$(this).find("h2").animate({
left: "600px"
}, 100).hide();
$(this).find(".moredetail").delay(150).animate({
left: "0px"
}, {
duration: 150,
easing: 'easeInBounce'
});
}, function() {
$(this).clearQueue().animate({
width: "246px",
left: "9px",
height: "83px",
backgroundColor: "#222",
opacity: 0.90
}, 100).css({'z-index': "1", 'border-top': '1px solid #444'});
// call common function 2.
common2(this)
$(this).find("h2").show().animate({
left: "0px"
}, {
duration: 350,
easing: 'easeOutBounce'
});
$(this).find(".moredetail").animate({
left: "600px"
}, 100);
});
});
function common1(obj){
$(obj).find(".thumb").animate({
width: "150px",
height: "150px",
marginTop: "8px",
marginRight: "0px",
marginBottom: "0px",
marginLeft: "12px"
}, 100).attr('src','images/home/animatedMenu/1IMG.jpg').css({'border': '1px solid #FFF'});
}
function common2(obj){
$(obj).find(".thumb").animate({
width: "68px",
height: "68px",
marginTop: "6px",
marginRight: "0px",
marginBottom: "0px",
marginLeft: "13px"
}, 100).attr('src','images/home/animatedMenu/1IMGup.jpg').css({'border': '1px solid #000'});
}
if you don't mind loading a minimal configuration of the jQueryUI Core, you can clean up a ton of code and transfer the needed settings to css classes:
http://jqueryui.com/docs/Effects/Methods
with it, you can define all your transitions in your site's css file, and then just use jQueryUI's addClass, removeClass, toggleClass, and switchClass methods:
so then your jQuery gets simplified down to something like:
$(this).find(".thumb").toggleClass('animatedClass', 100);
where the actual visual styling of each transition is in a separate css file:
mysite.css
.animatedClass {
width: 150px;
height: 150px;
margin: 8px 0px 0px 12px;
background: url(images/home/animatedMenu/1IMG.jpg);
border: 1px solid #FFF;
}
would also definitely make tweaking the effect easier, as you won't have to touch the javascript and you'd just adjust the CSS... throw in firebug, and you can even tweak the effects in real time w/o reloading.
jQuery has the posibility to be extended by plug ins, you could write one to be able to do:
$("#test1").mySpecialHover();
To write a plug in you will need to do:
(function($){
$.fn.mySpecialHover = function() {
//.. some code
}
})(jQuery);
Yo can check a good tutorial from the guys at doctype.tv http://doctype.tv/plugin