We Keep Coding

Why does the animation keep repeating itself even when not hovering over the div?

I am using Javascript & jQuery and I have been trying to make a quick website to show to my music teacher.
When I mouse over an invisible object the animation occasionally starts twice, or repeats forever, then it shows the screen I want it to show.
When I mouse off of it, it just does the normal animation back to 0px, but then for no apparent reason it does the starting animation again, then the off animation, then the start, and so on and so forth.
Here is a snippet of my code. Tell me if you need more.
$(document).ready(function() {
$("#song1").hover(function() {
$(this).css({
'width': '0px',
'height': '0px'
})
$(this).animate({
width: '560px',
height: '315px',
opacity: '100'
})
}, function() {
$(this).animate({
width: '0px',
height: '0px',
opacity: '0'
})
$(this).css({
'width': '560px',
'height': '315px'
})
})
})
body {
background-color: grey
}
p {
color: white
}
#song1 {
background-color: white;
opacity: 0;
width: 560px;
height: 315px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p id="song1tx">1.</p>
<div id="song1">
<p id="song1load" style="color: black">Loading...</p>
</div>

Try selecting the element only if it's animating:
$(document).ready(function() {
$("#song1:not(:animated)").hover(function() {
$(this).css({
'width': '0px',
'height': '0px'
});
$(this).animate({
width: '560px',
height: '315px',
opacity: '100'
});
});
$("#song1").mouseout(function() {
$(this).animate({
width: '0px',
height: '0px',
opacity: '0'
})
$(this).css({
'width': '560px',
'height': '315px'
})
});
});

How to let Material-UI input field fill toolbar

I am struggling to get the material-ui app bar example to work as I would like to. Codesandbox (from Material-UI website).
What I Am Trying To Achieve:
What I am trying to achieve is to get the search field to grow all the way to the right (effectively taking the majority of the app bar no matter what screen size).
What I Have Tried:
I have tried using flexGrow: 1 as follows which only grows the search bar slightly (not till the end):
search: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginRight: theme.spacing(2),
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(3),
width: 'auto',
flexGrow:1
},}
I have also tried setting width: '100%' instead of 'width: auto' but that makes the Material-UI logo disappear.
Image of desired result:

Remove the width: 'auto' from your current code,
Add minWidth with title
title: {
display: 'none',
minWidth: '120px', // Add
[theme.breakpoints.up('sm')]: {
display: 'block',
},
},
search: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginRight: theme.spacing(2),
marginLeft: 0,
width: '100%', // Keep
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(3),
// width: 'auto', // Remove
},
},

jQuery toggle works after an animation but not before it

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>

Trouble centering items within parents in React

I’m having trouble aligning two components within another div in React. I’m using relative positioning for the parent div (snippetButtonHolder) and absolute positioning for its children (snippet and button). I want snippet to be centered in the parent and button to be under snippet and to the right, but for some reason when I use these attributes they are positioned relative to the entire page, not to the parent div. Does anyone have a suggestion as to what I should do differently?
const styles = {
module: {
marginTop: '30px',
padding: '20px',
},
snippet: {
backgroundColor: '#f2f2f2',
border: 'solid 1px #ccc',
borderRadius: '4px',
margin: '0 auto',
padding: '10px',
width: '100%',
position: 'absolute',
left: '50%',
},
snippetButtonHolder: {
width: '95%',
position: 'relative',
},
button: {
float: 'right',
marginTop: '5px',
position: 'absolute',
left: '94%',
},
};
export default class CodeSnippet extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div style={styles.module}>
<div style={styles.snippetButtonHolder}>
<div style={styles.snippet}>
<div
{'text will go here'}
</div>
{this.state.showButton ?
<button
style={styles.button}>
Press me
</button>
: null}
</div>
</div>
</div>
);
}
}

Give this a try:
const styles = {
module: {
marginTop: '30px',
padding: '20px',
},
snippet: {
backgroundColor: '#f2f2f2',
border: 'solid 1px #ccc',
borderRadius: '4px',
display: 'inline-block',
overflow: 'hidden',
padding: '10px',
},
snippetButtonHolder: {
textAlign: 'center',
width: '95%',
},
button: {
float: 'right',
marginTop: '5px',
},
};

How to put image inside QueryLoader by gayadesign

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