When we execute this code, a small box appears at the top left corner of a big box at start and at the end it is at the bottom right corner of the big box and i want that a diagonal line must be shown from the top left corner to the bottom right corner since it is the path traveled by the small box(or i can say i want to highlight the path traveled by the small box) . Can someone help me with this ?
function slider()
{
var t=setInterval(display,3);
var pos=0;
var x=document.getElementById("a1");
function display()
{
if(pos==350)
clearInterval(t);
else
{
pos++;
x.style.top=pos+'px';
x.style.left=pos+'px';
}
}
}
h2{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial,
sans-serif;
text-align: center;
font-size: 50px;
color: rgb(100, 158, 13);
background-color: bisque;
border: 5px red groove;
}
body{
background-color: cornflowerblue;
}
.container{
background: black;
height: 400px;
width: 400px;
position: relative;
}
.box{
background: whitesmoke;
height: 50px;
width: 50px;
position: absolute;
}
<h2>This is my first animation code</h2>
<center>
<div class="container">
<div id="a1" class="box">
</div>
</div>
<p>
<button type="button" onclick="slider()">click here</button>
</p>
</center>
CSS is not really made for that but…
… You could fake this effect, using another element:
function slider() {
var t = setInterval(display, 3);
var pos = 0;
var a1 = document.getElementById("a1");
var path = document.getElementById("path");
function display() {
if (pos == 350)
clearInterval(t);
else {
pos++;
a1.style.top = pos + 'px';
a1.style.left = pos + 'px';
path.style.height = pos + 'px';
path.style.width = pos + 'px';
}
}
}
body {
background-color: cornflowerblue;
}
.container {
background: black;
height: 400px;
width: 400px;
position: relative;
}
.box {
position: absolute;
background: whitesmoke;
height: 50px;
width: 50px;
}
#path {
position: absolute;
height: 0;
width: 0;
margin: 25px;
background: linear-gradient(to top right, transparent 49%, red 50%, transparent 51%);
}
<div class="container">
<div id="path"></div>
<div id="a1" class="box"></div>
</div>
<button type="button" onclick="slider()">click here</button>
Of course, if you want the box to move again after that first move, you must use another element, and so on…
Hope it helps.
Related
I am using the following HTML/Javascipt code to make the classic percentage bar.
function update() {
var element = document.getElementById("myprogressBar");
var width = 1;
var identity = setInterval(scene, 10);
function scene() {
if (width >= 70) {
clearInterval(identity);
} else {
width++;
element.style.width = width + '%';
element.innerHTML = width * 1 + '%';
}
}
}
#Progress_Status {
width: 50%;
background-color: #ddd;
}
#myprogressBar {
width: 1%;
height: 35px;
background-color: #4CAF50;
text-align: center;
line-height: 32px;
color: black;
}
<!DOCTYPE html>
<html>
<body>
<h3>Example of Progress Bar Using JavaScript</h3>
<p>Download Status of a File:</p>
<div id="Progress_Status">
<div id="myprogressBar">1%</div>
</div>
<br>
<button onclick="update()">Start Download</button>
</body>
</html>
What I would like to obtain and I am trying to achieve with .innerHTML is the following situation
The vertical line has to appear at the same level of the specified percentage.
For the vertical bar I used an added div nested inside the #Progress_Status container. It's styled to be absolute positioned and to change its offset in % in sync with the progress bar width.
For it to work, its container was set to position:relative as the reference frame.
function update() {
//fetches the vertical bar elements
var vbar = document.querySelector("#Progress_Status .percverticalbar");
var element = document.getElementById("myprogressBar");
var width = 1;
var identity = setInterval(scene, 10);
function scene() {
if (width >= 70) {
clearInterval(identity);
} else {
width++;
//updates the left offset of the vertical bar
vbar.style.left = `${width}%`;
element.style.width = width + '%';
element.innerHTML = width * 1 + '%';
}
}
}
#Progress_Status {
width: 50%;
background-color: #ddd;
position: relative;
}
.percverticalbar{
position: absolute;
height: 100px;
width: 5px;
background: gray;
top: -25px;
left: 0;
}
#myprogressBar {
width: 1%;
height: 35px;
background-color: #4CAF50;
text-align: center;
line-height: 32px;
color: black;
margin: 50px 0;
}
<h3>Example of Progress Bar Using JavaScript</h3>
<p>Download Status of a File:</p>
<div id="Progress_Status">
<div id="myprogressBar">1%</div>
<div class="percverticalbar"></div>
</div>
<br>
<button onclick="update()">Start Download</button>
You could just add an :after pseudo element and add the following styles to it. Keep in mind that the parent, in the case #myprogressBar should be relatively positioned.
#myprogressBar {
width: 1%;
height: 35px;
background-color: #4CAF50;
text-align: center;
line-height: 32px;
color: black;
position: relative;
}
#myprogressBar:after {
width: 5px;
height: 80px;
background: #333;
content: '';
position: absolute;
right: -5px;
top: 50%;
transform: translateY(-50%);
border-radius: 5px;
}
I am wanting to make a website that uses a background that moves based on the position that the curser is on the website. I have found this website that gives a visual representation of what I want to do. http://www.alexandrerochet.com/I just need to know how to make the letters move. I will replace them with images later.
You can achieve that using css properties.
Based on Lea Verou's talk
const root = document.documentElement;
document.addEventListener("mousemove", evt => {
let x = evt.clientX / innerWidth;
let y = evt.clientY / innerHeight;
root.style.setProperty("--mouse-x", x);
root.style.setProperty("--mouse-y", y);
});
html {
height: 100%
}
:root {
--mouse-x: .5;
--mouse-y: .5;
}
body {
height: 100%;
background-image: radial-gradient( at calc(var(--mouse-x) * 100%) calc(var(--mouse-y) * 100%), transparent, black);
}
You may want to try using parallax.js to achieve the desired effect.
Demo site.
Quick jsfiddle.
var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);
parallaxInstance.friction(0.2, 0.2);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
background-color: #F9F871;
width: 100vw;
height: 100vh;
}
.scene {
top: 30%;
}
.layer {
width: 100%;
height: 200px;
}
.item {
width: 50px;
height: 50px;
border-radius: 200px;
background-color: red;
position: relative;
}
.item-1 {
background-color: #FF9671;
left: 30%;
}
.item-2 {
background-color: #D65DB1;
left: 60%;
}
.item-3 {
background-color: #FF6F91;
left: 40%;
}
.item-4 {
background-color: #FFC75F;
left: 70%;
}
<div class="container">
<div id="scene" class="scene">
<div data-depth="0.2" class="layer layer-1">
<div class="item item-1"></div>
<div class="item item-2"></div>
</div>
<div data-depth="0.6" class="layer layer-2">
<div class="item item-3"></div>
<div class="item item-4"></div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
So, I'm creating a piece of code so the images in my div are automatically centered and adjusted, so they fit in a squared box.
Currently, I've managed to do so, but, something is wrong with the first iteration, because I get the wrong result, let me show you the code.
// news section height calculator
$(window).load(function () {
$('.news-picture').find('img').each(function () {
var screenImage = $(this);
var theImage = new Image();
theImage.src = screenImage.attr("src");
// Get accurate measurements from that.
var imageWidth = theImage.width;
var imageHeight = theImage.height;
var $imgClass = (imageWidth / imageHeight);
var $imgPos = -((imageWidth - $(window).width()) / 2);
console.log(imageWidth);
console.log($(window).width());
if ($imgClass >= 1) {
$(this).addClass('wide').css("left" , $imgPos);
} else {
$(this).addClass('tall');
}
});
});
<div class="news-picture">
<?php the_post_thumbnail('large'); ?>
<div class="news-title">
<h1><?php the_title(); ?></h1>
<div class="datetime"><span><time datetime="<?php the_time('l, F j, Y'); ?>"><?php the_time('l, F j, Y'); ?></time></span></div>
</div>
</div>
As you may notice, I'm working with Wordpress, and specifically with post images.
The case; The iteration runs 3 times, it is supposed to assign a class, and a left value, which will center the image.
But, the first iteration gets the height value of the second iteration, which in first place should be getting the width, of its own iteration. Weird huh.
I'll attach an image of what i'm trying to accomplish, maybe you have suggestions as to how to approach this dilemma.Structure
Thank you for paying attention, I actually fixed by adding two lines only, specifying the current and rendered width and height of the image.
// news section height calculator
$(window).load(function () {
$('.news-picture').find('img').each(function () {
var screenImage = $(this);
var theImage = new Image();
theImage.src = screenImage.attr("src");
theImage.width = screenImage.attr("width");
theImage.height = screenImage.attr("height");
// Get accurate measurements from that.
var imageWidth = theImage.width;
var imageHeight = theImage.height;
var $imgClass = (imageWidth / imageHeight);
var $imgPos = -((imageWidth - $(window).width()) / 2);
console.log(imageWidth);
console.log($(window).width());
if ($imgClass >= 1) {
$(this).addClass('wide').css("left" , $imgPos);
} else {
$(this).addClass('tall');
}
});
});
body {
margin:0;
}
.news-content {
background-color: #fff;
margin: 25px auto;
}
.news-picture {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
position: relative;
overflow: hidden;
width: 100vw;
height: 100vw;
margin: 0 auto;
}
.news-picture:after {
-moz-box-shadow: 0 0 10em #000 inset;
-webkit-box-shadow: 0 0 10em #000 inset;
box-shadow: 0 0 10em #000 inset;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
}
.news-picture a {
border: 0;
display: block;
}
.wide {
height: 100vw;
width: auto;
max-width: initial;
position: relative;
}
h1 {
}
.news-title {
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
position: absolute;
bottom: 0;
width: 100%;
}
.news-title h1 {
padding: 15px 10px 0 10px;
margin: 0;
text-align: center;
line-height: 22px;
font-size: 16px;
}
.news-title h1 a {
color: #fff;
margin: 0;
text-decoration: none;
font-family: "Oswald", sans-serif;
}
.datetime {
font-family: "Titillium Web", sans-serif;
font-size: 10px;
padding: 5px;
margin-bottom: 5px;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news-container">
<div class="news-content">
<div class="news-picture">
<img width="1298px" height="934px" src="http://www.elliotjaystocks.com/assets/article_digest_1.png">
<div class="news-title">
<h1>First Iteration of the problem</h1>
<div class="datetime"><span><time datetime="Sunday, October 23, 2016">Sunday, October 23, 2016</time></span></div>
</div>
</div>
</div>
<div class="news-content">
<div class="news-picture">
<img src="https://guides.area17.com/app/uploads/sites/2/2015/10/05.08_AI_smart_guides-680x301.png">
<div class="news-title">
<h1>Second Iteration of the problem</h1>
<div class="datetime"><span><time datetime="Sunday, October 23, 2016">Sunday, October 23, 2016</time></span></div>
</div>
</div>
</div>
<div class="news-content">
<div class="news-picture">
<img src="https://s-media-cache-ak0.pinimg.com/736x/d6/05/49/d60549cbc19204feee1a672f71e43cee.jpg">
<div class="news-title">
<h1>Third Iteration of the problem</h1>
<div class="datetime"><span><time datetime="Sunday, October 23, 2016">Sunday, October 23, 2016</time></span></div>
</div>
</div>
</div>
</div>
I made a diagram that changes its size based on the screen width (recreated (poorly) in the fiddle), but when I use this code on my page, the final circle/glyph falls to the following line when I decrease the screen width, when it should stay on the same line (as in the fiddle).
My fiddle
Here's my code:
html
<div class="glyphicon-belt">
<div id="rectangle"></div>
<div class="container circle-container circle-1">
<i class="icon-steak" style="font-size: 60px"></i>
</div>
<div class="container circle-container circle-2">
<i class="icon-brain" style="font-size: 60px"></i>
</div>
<div class="container circle-container circle-3">
<i class="icon-happy" style="font-size: 60px"></i>
</div>
</div>
css
.circle-container {
background-color: #FDA220;
width: 100px;
height: 100px;
border-radius: 100px;
text-align: center;
display: inline-block;
line-height: 100px;
margin-top: -60px;
}
.glyphicon-belt {
width: 50%;
left: 25%;
position: absolute;
text-align: center;
margin-top: 100px;
// background-color: black;
}
#rectangle {
width: 80%;
margin-left: 10%;
height: 20px;
background: #E7292A;
}
.circle-1 {
margin-right: 26%;
}
.circle-2 {
margin-right: 26%;
}
.circle-3 {
// margin-right: -5%;
}
.glyph-connect {
// left-margin: 25%;
text-align: center;
padding: 0px;
background-color: black;
}
jQuery
var screen = $(window).width();
var fontRatio = 60 / screen;
var circleRatio = 100 / screen;
var barRatio = 20 / screen;
$(window).on('resize', function() {
var screen = $(window).width();
var fontSize = screen * fontRatio;
var circleSize = screen * circleRatio;
var lineHeight = circleSize + "px";
var barHeight = screen * barRatio
$(".icon-steak").css("font-size", fontSize);
$(".icon-brain").css("font-size", fontSize);
$(".icon-happy").css("font-size", fontSize);
$(".circle-container").css("width", circleSize);
$(".circle-container").css("height", circleSize);
$(".circle-container").css("line-height", lineHeight);
$("#rectangle").css("height", barHeight);
});
If I understand your question right and playing around with it, it looks like you need to fix the circle-3:
.circle-3 {
margin-right: 1%;
}
Not sure why you had it commented out, but that it seems to fix the problem when you uncomment it and play with the %'s.
I'm currently working on this small project that randomly displays a div (#box) of 100px width and height. I want this div to appear ONLY in another div (#boxBorder) so it appears to be limited to a specific area on the page.
Here is the content of my HTML:
<h1>Test your reactions!</h1>
<p id="directions">Click the shape as fast as you can!</p>
<p id="scoreC">Click score: <span id="cScore">0</span>s</p>
<p id="scoreT">Total score: <span id="tScore">0</span>s</p>
<div id="boxBorder"></div>
<div id="box"></div>
Here is the CSS:
#boxBorder {
height: 500px;
width: 500px;
margin: 20px auto;
left: 0;
right: 0;
background-color: white;
border: 1px black solid;
position: absolute;
z-index: 0;
}
#box {
margin: 0 auto;
height: 100px;
width: 100px;
background-color: red;
display: none;
border-radius: 50px;
position: relative;
z-index: 1;
}
h1 {
margin: 15px 0 0 0;
}
#directions {
margin: 0;
padding: 5px;
font-size: 0.8em;
}
#scoreT, #scoreC {
font-weight: bold;
margin: 10px 50px 0 0;
}
#tScore, #cScore {
font-weight: normal;
}
h1, #directions, #scoreT, #scoreC {
width: 100%;
text-align: center;
}
And lastly, the javascript function for random position:
//Get random position
function getRandomPos() {
var pos = Math.floor((Math.random() * 500) + 1);
console.log("POS: " + pos + "px");
return pos + "px";
}
Which I call within a timeout method:
setTimeout(function() {
createdTime = Date.now();
console.log("make box: " + createdTime);
document.getElementById("box").style.top=getRandomPos();
document.getElementById("box").style.left=getRandomPos();
document.getElementById("box").style.backgroundColor=getRandomColor();
document.getElementById("box").style.borderRadius=getRandomShape();
document.getElementById("box").style.display="block";
}, rTime);
I'm not very skilled in positioning and I can't seem to get these two divs to align so that the #box div can recognize the size of the #boxBorder div and stay within those limits. Any help would be appreciated!
Couple things wrong here:
You need the box div nested inside the borderBox div if you want to use the relative positioning.
<div id="boxBorder">
<div id="box"></div>
</div>
The randomPos function needs to take into account the size of the box, so only multiply by 400 instead of 500.
function getRandomPos() {
var pos = Math.floor((Math.random() * 400));
return pos + "px";
}
Set the style to inline-block, not block for the box.
Use setInterval instead of setTimeout to have it repeat.
var rTime = 1000;
function getRandomPos() {
var pos = Math.floor((Math.random() * 400));
console.log("POS: " + pos + "px");
return pos + "px";
}
function getRandomColor() {
return ['#bf616a', '#d08770', '#ebcb8b', '#a3be8c', '#96b5b4', '#8fa1b3', '#b48ead'][(Math.floor(Math.random() * 7))];
}
function randomizeBox() {
createdTime = Date.now();
console.log("make box: " + createdTime);
document.getElementById("box").style.top = getRandomPos();
document.getElementById("box").style.left = getRandomPos();
document.getElementById("box").style.backgroundColor = getRandomColor();
}
setInterval(randomizeBox, rTime);
#boxBorder {
height: 500px;
width: 500px;
margin: 20px auto;
left: 0;
right: 0;
background-color: white;
border: 1px black solid;
position: absolute;
z-index: 0;
}
#box {
margin: 0 auto;
height: 100px;
width: 100px;
border-radius: 50px;
position: relative;
z-index: 1;
display: inline-block;
}
h1 {
margin: 15px 0 0 0;
}
#directions {
margin: 0;
padding: 5px;
font-size: 0.8em;
}
#scoreT,
#scoreC {
font-weight: bold;
margin: 10px 50px 0 0;
}
#tScore,
#cScore {
font-weight: normal;
}
h1,
#directions,
#scoreT,
#scoreC {
width: 100%;
text-align: center;
}
<h1>Test your reactions!</h1>
<p id="directions">Click the shape as fast as you can!</p>
<p id="scoreC">Click score: <span id="cScore">0</span>s</p>
<p id="scoreT">Total score: <span id="tScore">0</span>s</p>
<div id="boxBorder">
<div id="box"></div>
</div>