How would I fix elements moving due to an element animating above? - javascript

I am getting an error with my website. I cannot seem to figure out why the 3 buttons below the title images are moving while the 2nd title picture is animating. My goal is to get the 3 buttons below the titles to stay where they are when the title2 is animating. The animation is a constant shrink/grow and is called pulse. Here is all of my code, its messy but this is just for me to learn.
<!DOCTYPE html>
<html>
<head>
<title>Test Website</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="scripts/snow.js"></script>
<style type="text/css">
body
{
background-color: black;
background-image: url("res/bg.png");
background-repeat: no-repeat;
}
div.button1
{
width: 600px;
position: static;
height: 150px;
margin: 30px 50px;
background-image: url("res/button1.png");
border: 1px solid #FF0030;
border-radius: 55px;
/*opacity:0.4;*/
/*filter:alpha(opacity=40);*/
}
div.button2
{
width: 600px;
height: 150px;
margin: 30px 50px;
background-image: url("res/button2.png");
border: 1px solid #00B7FF;
border-radius: 55px;
/*opacity:0.4;*/
/*filter:alpha(opacity=40);*/
}
div.button3
{
width: 600px;
height: 150px;
margin: 30px 50px;
background-image: url("res/button3.png");
border: 1px solid #00FFD5;
border-radius: 55px;
/*opacity:0.4;*/
/*filter:alpha(opacity=40);*/
}
div.button1:hover
{
transition: all 0.2s ease-in;
-webkit-stroke-width: 5.3px;
-webkit-stroke-color: #FFFFFF;
-webkit-fill-color: #FFFFFF;
box-shadow: 1px 0px 20px #000000;
border: 2px solid #FF0030;
}
div.button2:hover
{
transition: all 0.2s ease-in;
-webkit-stroke-width: 5.3px;
-webkit-stroke-color: #FFFFFF;
-webkit-fill-color: #FFFFFF;
box-shadow: 1px 0px 20px #000000;
border: 2px solid #00B7FF;
}
div.button3:hover
{
transition: all 0.2s ease-in;
-webkit-stroke-width: 5.3px;
-webkit-stroke-color: #FFFFFF;
-webkit-fill-color: #FFFFFF;
box-shadow: 1px 0px 20px #000000;
border: 2px solid #00FFD5;
}
#seventyfive{
font-size:100px;
font-weight:bold;
}
</style>
</head>
<body>
<center>
<img src="res/title.png"</img>
<img id="seventyfive"; src="res/title2.png"</img>
</br>
<div class="button1">
</div>
<div class="button2">
</div>
<div class="button3">
</div>
</center>
</body>
</html>
<script>
$(document).ready( function(){
$.fn.snow({ minSize: 8, maxSize: 15, newOn: 390, flakeColor: '#C800FF' });
});
(function pulse(back) {
$('#seventyfive').animate(
{
'font-size': (back) ? '100px' : '160px',
height: (back) ? "60%" : "50%",
width: (back) ? "60%" : "50%",
}, 700, function(){pulse(!back)});
})(false);
</script>
Thank you for reading my question, I am open to any answers/suggestions. Thank you all!

The vertical placement is going to be based on the size of whatever is above the items. So, if the item above it is 100px, then the button below will be at position 100px + margin-bottom. When that item is 200px, the button below will start at 200px + margin-bottom.
What you want is a div around your image tag that doesn't change size.
<div style="width: 500px; height: 500px">
<img id="seventyfive"; src="res/title2.png"</img>
</div>
PS, look into css animations vs. jquery.

Try
#seventyfive{
font-size:100px;
font-weight:bold;
position:absolute;
}
I'm not making any promises on it. Tried to run it through a fiddle first, but the pulse wasn't working. If that doesn't work then you could also try
CSS
.seventyfive {
position:absolute;
}
HTML
<div class="seventyfive">
<img src="res/title.png">
<img id="seventyfive"; src="res/title2.png">
</div>

Related

Horizontal Div Scroll

I'm quite new to Jquery, I'm trying to implement horizontal scrolling on a div using the scrollLeft property, I'm not getting any error messages and nothing seems to be working, could someone explain why? Thanks in advance
this is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
$(document).ready (function(){
var pos = $("#container").scrollLeft();
$(".prev").click(function(){
$("#container").animate({
scrollLeft: pos - 200;
});
});
});
</script>
<style>
#container{
max-width: 938px;
height: 500px;
border: 2px solid black;
margin-left: auto;
margin-right: auto;
overflow: scroll;
/*display: table;*/
}
.picsdiv{
display: table-cell;
min-width: 286px;
padding-right: 80px;
height: 508px;
border: 2px solid pink;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 250px;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
border: 2px solid pink;
}
.next {
right: 170px;
border-radius: 3px 0 0 3px;
}
.prev{
left: 170px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
</style>
<body>
<div id="container">
<div class="picsdiv">
</div>
<div class="picsdiv">
</div>
<div class="picsdiv">
</div>
<div class="picsdiv">
</div>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
</body>
take out the semi-colon on this line and it should work
scrollLeft: pos - 200;
firstly you must close script tag that include jquery file and also open another script tag for your jquery code
I just added a seperate script tag for the Jquery code and used the first one to only refer to the library and it now works. Thanks for all your help
You have done 2 mistakes in your code:
scrollLeft: pos - 200; should be like scrollLeft: (pos - 200), because you are passing an object as parameter
Write two <script> tags, one for jQuery, like below
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js" type="text/javacsript"></script>
And another for your custom java-script
<script type="text/javascript">
$(document).ready (function(){
var pos = $("#container").scrollLeft();
$(".prev").click(function(){
$("#container").animate({
scrollLeft: (pos - 200)
});
});
});
Because you can not write code inside element if you are using ths element as external reference.
Here is your complete running code
<html>
<head>
<style>
#container{
max-width: 938px;
height: 500px;
border: 2px solid black;
margin-left: auto;
margin-right: auto;
overflow: scroll;
/*display: table;*/
}
.picsdiv{
display: table-cell;
min-width: 286px;
padding-right: 80px;
height: 508px;
border: 2px solid pink;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 250px;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
border: 2px solid pink;
}
.next {
right: 170px;
border-radius: 3px 0 0 3px;
}
.prev{
left: 170px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<div id="container">
<div class="picsdiv">
</div>
<div class="picsdiv">
</div>
<div class="picsdiv">
</div>
<div class="picsdiv">
</div>
<a class="prev"><</a>
<a class="next">></a>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready (function(){
var pos = $("#container").scrollLeft();
$(".prev").click(function(){
$("#container").animate({
scrollLeft: (pos - 200)
});
});
});
</script>
</html>

Border disappears, when I use rotateX on element

I am trying to create a rotating ellipse (<div> with border-radius: 100%;) and I would like to border has a same width always. However, border disappears when element rotating:
It could be border to have the same width regardless of the rotateX? Thank you for your answers.
EDIT:
GCyrillus, I thought something similar, but I cannot write values of border-width ​​manually. Ellipse rotates lineary using JavaScript:
window.onload = function() {
var ellipse = document.getElementById('ellipse');
var angle = 0;
setInterval(function() {
angle++;
ellipse.style.transform = 'rotateX(' + angle + 'deg)';
}, 20);
};
section {
perspective: 1000px;
}
#ellipse {
border: 1px solid black;
border-radius: 100%;
height: 300px;
margin-bottom: 20px;
position: relative;
width: 500px;
}
<section>
<div id="ellipse"></div>
<section>
Because of rotation, everything becomes thinner, so do the borders.
You can give a test increasing them. Example with a shadow:
section {
perspective: 1000px;
}
div {
background-color: lightgreen;
border: 1px solid black;
border-radius: 100%;
height: 100px;
margin-bottom: 20px;
position: relative;
width: 200px;
}
#rotate45 {
transform: rotateX(70deg);
box-shadow:0 2px 1px , 0 -2px 1px;
}
#rotate90 {
transform: rotateX(90deg);
box-shadow:0 7px 2px , 0 -7px 2px;
}
<section>
Rotate 0°, it's OK:
<div id="rotate0"></div>
Rotate 45°, border is dashed:
<div id="rotate45"></div>
Rotate 90°, border is almost invisible:
<div id="rotate90"></div>
<section>
edit from your comment.
If you include border thickness (or shadow) as well while rotation happens, it should help :
section {
perspective: 1000px;
}
div {
background-color: lightgreen;
border: 1px solid black;
border-radius: 100%;
height: 100px;
margin-bottom: 20px;
position: relative;
width: 200px;
transition:1s;
}
#rotate45:hover {
transform: rotateX(70deg);
box-shadow:0 2px 1px , 0 -2px 1px;
}
#rotate90:hover {
transform: rotateX(90deg);
box-shadow:0 7px 2px , 0 -7px 2px;
}
<section>
Rotate 0°, it's OK:
<div id="rotate0"></div>
Rotate 45°: <i>hover it to see transition on transition and shadow</i>
<div id="rotate45"></div>
Rotate 90°: <i>hover it to see transition on transition and shadow</i>
<div id="rotate90"></div>
<section>

Jquery animation property not working on my prefered CSS style

I am making a small video game where I want the avatar picture glow red as if taking damage from a npc. To do this effect i'm trying to animate a red shadowBox over my player, but its not working. Can someone help me figure out what i'm dong wrong in particular? I tried using .css but that does not animate it. It only changes it right away.
$(document).ready(function() {
$('#usercontainer').click(function() {
$(this).animate({
boxShadow: '10px 10px 10px red'
},'slow');
});
});
Extra CSS + HTML
#usercontainer {
float: left;
border: 1px solid;
background-color: rgb(255,255,255);
height: 200px;
width: 200px;
overflow: hidden;
}
#userimage {
background-color: rgb(0,255,255);
height: 200px;
width: 200px;
}
<div id="usercontainer">
<div id="userimage">
<img src="images/wingedwarrior.jpg" alt="warrior" style="width:200px; height:200px">
<div id="userHitSplat"> </div>
</div> <!--END OF USER IMAGE-->
</div><!--END OF USER CONTAINER-->
This is probably easier with css animations:
#usercontainer {
float: left;
border: 1px solid;
background-color: rgb(255,255,255);
height: 200px;
width: 200px;
overflow: hidden;
transition: 1s;
}
#usercontainer.glow {
box-shadow: 10px 10px 10px red;
}
#userimage {
background-color: rgb(0,255,255);
height: 200px;
width: 200px;
}
And then to animate:
$(document).ready(function() {
$('#usercontainer').click(function() {
$(this).addClass('glow');
});
});
The reason the js animation doesn't work is that jquery can't animate colors. Jquery-ui includes the ability to do this, but it's probably not woth it for this when you can use css animations instead.
Demo

css: cut corner of box

So I have created a box in css like this:
#box
{
background-color: #5d5d5d;
border-radius: 2px 2px 2px 2px;
box-shadow: 5px 5px 2px #767676;
height: 200px;
width: 1100px;
}
with the result of
What I want to do without overlaying a smaller whitebox, and without messing up the shadow effect is something like this:
Is this possible, or am I going to have to just add a smaller whitebox over the top and play with the layering and shadow effects until they're about right?
Or maybe there is a way using JavaScript or something like that?
NB: What I don't want to do is just create the box in photoshop as this will slow overall load time of the page
option:1 boxshadow
body{padding:40px}
#box
{
background-color: white;
border-radius: 2px 2px 2px 2px;
box-shadow: 14px -88px 0px white,5px 5px 2px #767676,inset 199px -88px 0 #5d5d5d;
height: 200px;
width: 510px;
}
<div id=box />
option:2 pseudo element see #Fahad Hasan
You can use the :before pseudo-element to achieve what you're trying to do like this: DEMO. This is the CSS which I've added:
div#box:before {
content:'';
background: white;
width: 700px;
display: block;
height: 100px;
float: right;
}
You can create an ::after pseudo-element with a white background, float it right and offset it to move over the shadow:
#box::after{
content:'';
width:500px;
height:100px;
position:relative;
float:right;
top:0px;
right:-7px;
background-color:#fff;
}
You should try with pseudo elements, this is an example:
HTML:
<div id="mydiv"></div>
CSS:
div#mydiv{
width:300px;
height:300px;
background-color:red;
}
div#mydiv::after {
content: ' ';
display: block;
background-color: blue;
width: 270px;
height: 100px;
float: right;
}
Here is a demo

Move divs on a html page via CSS\JQuery

i want to recreate a simple one page web site.
This is a good example of what i want to have in the end:
http://onepagelove.com/demo/?theme=EastJava
I basically have too main divs one is the sidebar and the main container.
By default i want that only the main container is visible. By clicking on the button i want that the sideBar moves in the screen like in the example above.
<html>
<head>
<title>One Page</title>
<meta name="author" content="Me">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="clearfix">
<div class ="sideBar">
</div>
<div class ="mainCon">
<div class ="moreB">
<div class="buttonText">
Learn More
</div>
</div>
</div>
</div>
</body>
</html>
the important css so far:
.sideBar{
width: 20%;
height: 100%;
background-color: #FF0040;
float: left;
}
.mainCon{
height: 100%;
width: 80%;
float: left;
background-color: #F3F781;
}
.moreB{
color: #ffffff;
width: 100px;
height: 50px;
margin-top: 50%;
margin-right: 50%;
margin-left: 50%;
border-radius: 60px 60px 60px 60px;
-moz-border-radius: 60px 60px 60px 60px;
-webkit-border-radius: 60px 60px 60px 60px;
border: 2px solid #ffffff;
}
I guess i need Jquery or something like this to solve the problem but sadly i have no idea how. Any suggestions? I think it shouldnt be that hard. But i have no idea how i can place a div outside of the screen and then move it in the screen after pressing a button.
MC
You're gonna need to change up your CSS a little so the clearfix can be moved in the first place.
.clearfix{
position: absolute;
left: -20%;
top: 0px;
height: 100%;
width: 100%;
}
As for jQuery, it's pretty simple to use.
function toggleSidebar(){
$('.in').animate({left: '0%'}, function(){
$(this).addClass('out').removeClass('in');
});
$('.out').animate({left: '-20%'}, function(){
$(this).addClass('in').removeClass('out');
});
}
$('.moreB').on('click', toggleSidebar);
One more thing to do is to add a semantic class to clearfix named in
<div class="clearfix in">
You can do this primarily with CSS, and use jQuery to toggle a class on the wrapping element to expand/collapse the sidebar.
http://jsfiddle.net/G7K6J/
HTML
<div class="wrapper clearfix">
<div class ="sideBar">
</div>
<div class="mainCon">
<div class="moreB">
<div class="buttonText">
Learn More
</div>
</div>
</div>
</div>
CSS
.clearfix {
clear:both;
overflow:hidden;
}
.sideBar{
width: 0%;
height: 200px;
background-color: #FF0040;
float: left;
-webkit-transition: width 300ms;
-moz-transition: width 300ms;
-o-transition: width 300ms;
transition: width 300ms;
}
.mainCon{
height: 200px;
width: 100%;
float: left;
background-color: #F3F781;
-webkit-transition: width 300ms;
-moz-transition: width 300ms;
-o-transition: width 300ms;
transition: width 300ms;
}
.wrapper.expanded .sideBar {
width:20%;
}
.wrapper.expanded .mainCon {
width:80%;
}
.moreB{
color: #ffffff;
width: 100px;
height: 50px;
margin:0 auto;
border-radius: 60px 60px 60px 60px;
-moz-border-radius: 60px 60px 60px 60px;
-webkit-border-radius: 60px 60px 60px 60px;
border: 2px solid #ffffff;
}
jQuery
$(".moreB").click(function(){
$(".wrapper").toggleClass("expanded");
});

Categories