I wonder if it is possible to create the image below, using css or canvas? It seems possible but do not have the ways to accomplish such a feat.
Grateful for the time spent.
Edit {SOLVED}
With the help of friend # apaul34208, could do as follows:
http://jsfiddle.net/Igaojsfiddle/CcDG7/
#hexagon {
width: 50px;
height: 55px;
background: red;
position: relative;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 25px solid red;
}
Thank you all.
You can use canvas this way:
Demo
HTML
<canvas id="demo" width=90 height=120></canvas>
JavaScript
var ctx = demo.getContext('2d'), /// get canvas element
w = demo.width, /// cache dimensions
h = demo.height,
cw = w * 0.5; /// center hori.
ctx.beginPath(); /// start path
ctx.moveTo(0, 0); /// plot shape
ctx.lineTo(w, 0);
ctx.lineTo(w, h - cw * 0.8);
ctx.lineTo(cw, h);
ctx.lineTo(0, h - cw * 0.8);
ctx.closePath() /// closes and ends last line
ctx.fillStyle ='#f55641';
ctx.fill(); /// fill shape
#square {
width: 90px;
height: 85px;
background: #f55641;
}
#triangle {
width: 0;
height: 0;
border-top: 35px solid #f55641;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
}
<div id="square"></div>
<div id="triangle"></div>
Related
I have problem with some parts of my spinning-wheel component in built-mode when I deploy my application to server.I have no issue if I run the code locally with "npm run dev", but the problems come when run the code with "npm run build" and "npm start".
Here is the snapshots of development mode (picture 1) and built mode (picture 2):
And this is the scss file I used :
.board-arisan-container {
--wheel-size: 300px;
--wheel-slice-spacing: 50px;
--wheel-border-size: 5px;
--wheel-color: #ffad00;
--neutral-color: #ffffff;
--PI: 3.60;
--nb-item: 0;
--item-nb: 0;
--selected-item: 0;
--nb-turn: 5;
--spinning-duration: 4s;
--reset-duration: 0.25s;
transform: rotate(-90deg);
.wheel-container {
display: block;
position: relative;
box-sizing: content-box;
width: calc(var(--wheel-size) + 2 * var(--wheel-border-size));
height: calc(var(--wheel-size) + 2 * var(--wheel-border-size));
padding: 3px;
margin: auto;
background-color: var(--neutral-color);
border: solid var(--wheel-color) 10px;
border-radius: 50%;
user-select: none;
}
.wheel-container::before,
.wheel-container::after {
content: "";
display: block;
position: absolute;
height: 0;
width: 0;
top: 50%;
transform: translateY(-50%);
z-index: 2;
border: solid transparent 20px;
border-left-width: 0;
}
.wheel-container::before {
right: 0px;
border-right-color: var(--wheel-color);
}
.wheel-container::after {
right: -5px;
border-right-color: var(--neutral-color);
}
/* Roue */
.wheel {
display: block;
position: relative;
box-sizing: content-box;
margin: auto;
width: var(--wheel-size);
height: var(--wheel-size);
overflow: hidden;
border-radius: 50%;
border: solid var(--wheel-color) var(--wheel-border-size);
background-color: var(--wheel-color);
transition: transform var(--reset-duration);
transform: rotate(0deg);
cursor: pointer;
}
.wheel.spinning {
transition: transform var(--spinning-duration);
transform: rotate(calc(var(--nb-turn) * 360deg + (-360deg * var(--selected-item) / var(--nb-item, 1))));
}
.wheel::after {}
.wheel-item {
display: block;
position: absolute;
box-sizing: border-box;
/* position de l'item */
top: 50%;
left: 50%;
width: 50%;
transform-origin: center left;
transform: translateY(-50%) rotate(calc(var(--item-nb) * (360deg / var(--nb-item, 1))));
/* texte */
color: var(--neutral-color);
text-align: right;
padding: 0 50px 0 50px;
font-family: var(--wheel-font);
}
/* Background de l'élément = triangle rose plus clair */
.wheel-item:before {
content: " ";
display: block;
position: absolute;
box-sizing: border-box;
z-index: -1;
width: 0;
height: 0;
top: 50%;
left: 50%;
transform: translate(-47%, -50%);
padding-left: 0px;
--slice-max-width: calc(var(--PI) * var(--wheel-size) + var(--wheel-size) / 2);
--slice-width: calc((var(--slice-max-width) / var(--nb-item)) - var(--wheel-slice-spacing));
border: solid transparent calc(var(--slice-width) / 2);
border-left: solid transparent 0;
border-right: solid var(--neutral-color) calc(var(--wheel-size) / 2);
}
}
here is the the component code :
...
const wheelVars = {
'--nb-item': props.items.length,
'--selected-item': selectedItem,
}
const spinning = selectedItem !== null ? 'spinning' : '';
return( <div className="board-arisan-container">
<div className="wheel-container">
<div className={`wheel ${spinning}`} style={wheelVars} onClick={() => clearSelectedItem()}>
{props.items.map((item, index) => (
<div className="wheel-item" key={index} style={{
'--item-nb': index,
color: '#ffad00',
fontSize: 30,
fontWeight: 'bolder',
}}>
<span>{item}</span>
</div>
))}
</div>
</div>
</div>)
Thanks!
my problem is that i have buttons : "view" button that enable OrbitControls , "move" button that disable OrbitControls so i can use DragControls, "cube" button that add a cube (or many cubes) to the scene and everything works fine, but when i added a "remove" button so i can remove the cube, it didnt work it says that the cube is not defined. So what should i do ? `
//variables :
var objects = [];
//scene
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );
//camera
var camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
//renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//adding light
scene.add( new THREE.AmbientLight( 0x0f0f0f ) );
var light = new THREE.SpotLight( 0xffffff, 1 );
light.position.set( 0, 500, 2000 );
scene.add(light);
//controls
const orbitControls = new THREE.OrbitControls( camera, renderer.domElement );
const dragControls = new THREE.DragControls( objects, camera, renderer.domElement );
//fix the window resize problem
window.addEventListener('resize', function(){
renderer.setSize(window.innerWidth,window.innerHeight) ;
camera.aspect = window.innerWidth / window.innerHeight ;
camera.updateProjectionMatrix();
}) ;
//animate
function animate() {
requestAnimationFrame( animate );
renderer.render(scene, camera);
};
//cloning
function createCube () {
var geometry = new THREE.BoxGeometry( 120, 120, 120 );
var cube = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0x00004B } ) );
scene.add( cube );
objects.push( cube );
cube.position.x = 0;
cube.position.y = -30;
}
function createRockCube() {
var texture = new THREE.TextureLoader().load( 'rock.jpg' );
var rock_geometry = new THREE.BoxGeometry( 120, 120, 120 );
var rock_material = new THREE.MeshBasicMaterial( {map: texture} );
var rock_cube = new THREE.Mesh( rock_geometry, rock_material );
scene.add( rock_cube );
objects.push( rock_cube );
rock_cube.position.x = -200;
rock_cube.position.y = -30;
}
function createRobot() {
var objLoader = new THREE.OBJLoader();
objLoader.setPath('/examples/3d-obj-loader/assets/') ;
objLoader.load('r2-d2.obj', function (object) {
object.position.x = 500 ;
object.position.y = -100 ;
object.traverse( ( o )=> {
if ( o.isMesh ) objects.push( o );
} );
scene.add(object);
}) ;
}
function createRobot2() {
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('/examples/3d-obj-loader/assets/') ;
mtlLoader.load('r2-d2.mtl', (materials)=> {
materials.preload();
var objLoader2 = new THREE.OBJLoader();
objLoader2.setMaterials(materials);
objLoader2.setPath('/examples/3d-obj-loader/assets/') ;
objLoader2.load('r2-d2.obj', (object2) =>{
object2.position.x = 300 ;
object2.position.y = -100 ;
object2.traverse( ( o ) => {
if ( o.isMesh ) objects.push( o );
} );
scene.add(object2);
});
})
}
function disableControl(){
orbitControls.enabled = false;
}
function enableControl(){
orbitControls.enabled = true;
}
function removeCube () {
cube.geometry.dispose();
cube.material.dispose();
scene.remove(cube);
}
animate();
body {
margin: 0px;
background-color: rgb(240, 240, 240);
}
canvas {
width: 100%;
height: 100vh ;
position: absolute;
}
/* objects buttons */
#btn-cube {
background-color: rgb(0, 0, 75);
position: absolute;
left: 70px;
height: 50px;
width: 100px;
cursor: pointer;
}
#rock-btn img {
position: absolute;
top: 75px;
left: 70px;
height: 50px;
width: 100px;
cursor: pointer;
}
#robot-btn {
position: absolute;
left: 70px;
height: 50px;
width: 100px;
cursor: pointer;
}
#robot2-btn {
position: absolute;
top: 55%;
left: 70px;
height: 50px;
width: 100px;
cursor: pointer;
}
#move-btn {
position: absolute;
top: 90%;
left: 55%;
height: 50px;
width: 100px;
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
font-size: 20px;
font-family: cursive;
}
#view-btn {
position: absolute;
top: 90%;
left: 45%;
height: 50px;
width: 100px;
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
font-size: 20px;
font-family: cursive;
}
/*menu*/
nav {
width: 250px;
position: absolute;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.1);
border-radius: 10px;
box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.5);
transition: 0.3s ease;
}
nav ul {
position: relative;
top: 50px;
list-style-type: none;
}
nav ul li a {
display: flex;
align-items: center;
font-family: cursive;
font-size: 20px;
text-decoration: none;
text-transform: capitalize;
color:black;
padding: 10px 30px;
height: 50px;
transition: 0.5s ease;
}
nav ul li a:hover {
cursor: pointer;
color: #fff;
}
nav ul .cubes {
position: absolute;
left: 250px;
width: 200px;
top : 0;
display: none;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
background: rgba(0, 0, 0, 0.1);
}
nav ul .robots {
position: absolute;
left: 250px;
width: 200px;
top : 80;
display: none;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
background: rgba(0, 0, 0, 0.1);
}
nav ul span {
position: absolute;
right: 20px;
font-size: 20px;
}
nav ul .dropdown:hover ul{
display: initial;
}
nav ul .dropdown2:hover ul{
display: initial;
}
#open-btn {
display: none;
position: absolute;
top: 12px;
cursor: pointer;
font-size: 30px;
}
.close-btn {
position: absolute;
top: 10px;
right: 5px;
cursor: pointer;
font-size: 36px;
color: rgb(66, 64, 40);
}
#remove-btn {
position: absolute;
top: 90%;
left: 30%;
height: 50px;
width: 100px;
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
font-size: 20px;
font-family: cursive;
}
<html>
<head>
<title>Kitchen Planner Ama Mn Jumia </title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<script src="./three.min.js"></script>
<script src="./DragControls.js"></script>
<script src="./OrbitControls.js"></script>
<script src="./OBJLoader.js"></script>
<script src="./MTLLoader.js"></script>
<script src="./app.js"></script>
<script src="./menu.js"></script>
<nav id="menu" >
<div id="open-btn" onclick="openFunction()"> ☰ </div>
×
<ul>
<li id="dropdown" class="dropdown">Cubes <span>›</span>
<ul class="cubes">
<li><button id="btn-cube" onclick="createCube()"></button>
<li><button id="rock-btn" onclick="createRockCube()" ><img src="./rock.jpg"></button>
</ul>
</li>
<li id="dropdown2" class="dropdown2">Robots <span>›</span>
<ul class="robots">
<li><button id="robot-btn" onclick="createRobot()"> Robot </button>
<li><button id="robot2-btn" onclick="createRobot2()"> Robot 2 </button>
</ul>
</li>
</ul>
</nav>
<button id="move-btn" onclick="disableControl()">move</button>
<button id="view-btn" onclick="enableControl()"> view </button>
<button id="remove-btn" onclick="removeCube()"> remove </button>
</body>
</html>
`
You have to declare your cube variable outside of createCube(). It's then in a scope that can be accessed by removeCube().
I found an excellent solution here to add a spinning GIF during a long (8-12sec) Ajax call, but I can't figure out how to vertically centre some text just above the GIF that will remain in the same relative position no matter the screen size.
Here's what I have so far:
<style>
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modalLoading {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
background: rgba( 255, 255, 255, .8 )
/*url('http://i.stack.imgur.com/FhHRx.gif') */
url('<?php echo BASE_HDR_TAG . "contest/common/img/ajax-loader-red.gif"; ?>')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modalLoading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modalLoading {
display: block;
}
.modalFont {
color:#8B0000;
font-size: 20px;
font-weight:900;
font-family: 'Roboto', sans-serif;
}
</style>
This DIV is at the bottom of my body section:
<div class="modalLoading">
<div style="margin-top:25px">
<span class="modalFont">Please wait while we generate your entry form, including the PDF copy.<br />
Do not click the back button or close this browser tab.</span>
</div>
</div>
What it looks like now:
What I want it to look like:
EDIT
Trying the code from doesn't yield the desired results.
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modalLoading {
display: none; /* if this is set to 'Flex' then the modal blocking appears on page refresh */
position: fixed;
/*z-index: 1000;*/
top: 0;
right: 0;
bottom: 0;
left: 0;
/*height: 100%;
width: 100%;*/
align-items: center;
justify-content: center;
background: rgba( 255, 255, 255, .8 )
/*url('http://i.stack.imgur.com/FhHRx.gif') */
url('<?php echo BASE_HDR_TAG . "contest/common/img/ajax-loader-red.gif"; ?>')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modalLoading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modalLoading {
display: block;
}
.modalFont {
color:#8B0000;
font-size: 20px;
font-weight:900;
font-family: 'Roboto', sans-serif;
text-align: center;
margin-top: 100px;
}
<div class="modalLoading">
<span class="modalFont">Please wait while we generate your entry form, including the PDF copy.<br />
Do not click the back button or close this browser tab.</span>
</div>
EDIT 2
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modalLoading {
display: flex;
position: fixed;
/z-index: 1000;/
top: 0;
right: 0;
bottom: 0;
left: 0;
/height: 100%;
width: 100%;/
align-items: center;
justify-content: center;
background: rgba( 255, 255, 255, .8 )
/*url('http://i.stack.imgur.com/FhHRx.gif') */
url('')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modalLoading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modalLoading {
display: flex;
}
.modalFont {
color:#8B0000;
font-size: 20px;
font-weight:900;
font-family: 'Roboto', sans-serif;
text-align: center;
margin-top: 100px;
}
To center vertically a text, a possible solution is to use flexbox.
With this HTML:
<div class="modalLoading">
<span class="modalFont">Please wait while we generate your entry form, including the PDF copy.<br />
Do not click the back button or close this browser tab.</span>
</div>
You can write this CSS:
.modalLoading{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba( 255, 255, 255, .8 ) url('http://i.stack.imgur.com/FhHRx.gif') 50% 50% no-repeat;
}
.modalFont{
margin-top: 100px; /* margin to move the text a little lower than gif loader. Change this margin with -100px if you want it to appear above the gif */
text-align: center;
}
EDIT 1
To work only after AJAX call, I only edited CSS the previous HTML I wrote doesn't change:
.modalLoading {
display: none; /* hidden when refresh the page */
position: fixed;
z-index: 1000;
top: 0;
right: 0;
bottom: 0;
left: 0;
/*height: 100%;
width: 100%;*/
align-items: center;
justify-content: center;
background: rgba( 255, 255, 255, .8 )
url('http://i.stack.imgur.com/FhHRx.gif')
50% 50%
no-repeat;
}
body.loading .modalLoading {
overflow: hidden;
}
body.loading .modalLoading {
display: flex; /*display using Flexbox */
}
.modalFont{
margin-top: 100px; /* margin to move the text a little lower than gif loader. Change this margin with -100px if you want it to appear above the gif */
text-align: center;
}
I'm trying to put hexagons made with CSS around a circle. I already got the circle and the hexagons (they are stocked on top of each other), I just can't get the code of organizing them to work (it's on the CSS part of the code). http://imgur.com/Sv82DB0 (I'm aiming this effect).
$darkPrimary: #ffa000;
$primaryYellow: #ffc107;
$lightPrimaryColor: #ffecb3;
$darkGray: #212121;
$redOrange: #ff5722;
$lightGray: #757575;
$dividerColor: #bdbdbd;
// $rot // rotation for the current item
$nb-items: 4;
$angle: (360deg / $nb-items); // angle between two items
// $nb-items // number of item
$rot: 0;
$circle-size: 21.875em;
#mixin placingElements () {
#for $i from 1 through $nb-items {
.shapes__circle:nth-child(#{$i}) {
// Rotate the axis
rotate: ($rot * 1);
// Move the item from the center
translate: $circle-size / 2;
// Rotate the item back to its default position
rotate: ($rot * -1);
}
$rot: $rot+$angle;
}
//Increments the '$rot' variable for the next item
}
.shapes {
position: absolute;
display: block;
margin-left: 30px;
&__circle {
#include placingElements();
position: relative;
top: 60px;
border: 19px solid $primaryYellow;
border-radius: 50%;
box-shadow: 0 0 1px 0 rgb(255, 255, 255);
width: 350px;
height: 350px;
z-index: 1;
}
&__hexagon {
width: 120px;
height: 80px;
background: $redOrange;
position: absolute;
top: -50px;
left: 90px;
margin: 10px auto;
z-index: 2;
&::before {
content: "";
width: 0;
height: 0;
position: absolute;
top: -45px;
left: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 45px solid $redOrange;
}
&::after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: -45px;
left: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 45px solid $redOrange;
}
&--inside-img {
position: absolute;
height: 55px;
width: 55px;
left: 25%;
top: 32%;
}
&--inside-text {
position: absolute;
top: -14%;
left: 5%;
font-family: 'Overpass Mono', monospace;
font-size: 1rem;
color: $darkGray;
font-weight: 600;
}
}
}
<div class="shapes__circle">
<div class="shapes shapes__hexagon">
<p class="shapes__hexagon--inside-text">Ferramentas</p>
<img class="shapes__hexagon--inside-img" src="./assets/img/ferramentas.png" alt="">
</div>
<div class="shapes shapes__hexagon">
<p class="shapes__hexagon--inside-text">Ferramentas</p>
<img class="shapes__hexagon--inside-img" src="./assets/img/ferramentas.png" alt="">
</div>
<div class="shapes shapes__hexagon">
<p class="shapes__hexagon--inside-text">Ferramentas</p>
<img class="shapes__hexagon--inside-img" src="./assets/img/ferramentas.png" alt="">
</div>
<div class="shapes shapes__hexagon">
<p class="shapes__hexagon--inside-text">Ferramentas</p>
<img class="shapes__hexagon--inside-img" src="./assets/img/ferramentas.png" alt="">
</div>
</div>
<!-- __section-img--circle -->
I am trying create nice animation during loading content using ajax. I want to use display icon during reloading div with "Content", however I can't figured out is it possible to do that only with CSS.
Icon should:
horizontally always in the center of div with "Content"
vertically always in the center of "visible part of content"
should stay during whole animation in the vertically center of "visible part of content" during slide animation which hides Menu.
If vertical centering according to "visible part of content" is not possible, it would be ok to center image according to viewport of the browser.
[EDIT]:
Here is my fiddle: http://jsfiddle.net/QWB9x/74/ and the part which probably should be changed:
.loading #img_loading {
position: fixed;
top: 50%;
left: 50%;
display: block;
}
This works best for me :)
function loadNewContent(){
$(".loaderCont").removeClass("loading")
}
$(document).ready(function () {
$("#hide_button").on("click", function () {
$(this).closest(".bottom").toggleClass("left_hided");
$(".loaderCont").toggleClass("left_hided2");
});
$("#filter1,#filter2,#filter3,#filter4").on("click", function() {
$(".loaderCont").addClass("loading");
setTimeout(loadNewContent, 2000);
});
});
CSS:
.header {
background-color: Green;
width: 100%;
margin-bottom: 20px;
height: 100px;
}
.left {
background-color: Red;
float: left;
width: 100px;
}
.left_hided .left{
margin-left: -85px;
}
.right {
background: Aqua url("http://i.imgur.com/ifyW4z8.png") 50% repeat-y;
width: calc(100% - 140px);
float: right;
}
.left_hided .right{
width: calc(100% - 55px);
}
input{
float:right;
}
.loaderCont {
background-color: rgba(255, 0, 0, 0.6);
height: 100%;
width: calc(100% - 140px);
position: fixed;
right: 0;
top: 0;
z-index: -1;
}
.left_hided2 {
width: calc(100% - 55px);
}
#loader {
background: url(http://i.stack.imgur.com/FhHRx.gif) no-repeat center center;
position: relative;
top: calc(50% - 16px);
left: calc(50% - 16px);
display: block;
height: 32px;
width: 32px;
}
.loading {
z-index: 9001;
}
JSFiddle: http://jsfiddle.net/ZRwzr/1/
For this to work to your requirements you will need to use JavaScript to determine where the loading image needs to be placed over the visible part using a fixed position div and then reposition it when the user resizes the window or scrolls the window so it is always in the desired position.
$(window).scroll(function() {
scrolling();
});
$(window).resize(function() {
scrolling();
});
scrolling();
function scrolling() {
var windowHeight = $(window).height();
var scrollTop = $(window).scrollTop();
var offsetTop = $('#thediv')[0].offsetTop;
var offsetHeight = $('#thediv')[0].offsetHeight;
var offsetWidth = $('#thediv')[0].offsetWidth;
var top = offsetTop - scrollTop;
top = top < 0 ? 0 : top;
var bottom = (scrollTop + windowHeight) - (offsetHeight + offsetTop);
bottom = bottom < 0 ? 0 : bottom;
$('.image').css('top', top);
$('.image').css('bottom', bottom);
$('.image').css('width', offsetWidth);
}
Please note that if you change the width of the div you will always need to call the scrolling() function so that it can recalculate the position.
I also added the loading image as a background image to the fixed div so that we can use CSS to centre it.
.image {
position: fixed;
text-align:center;
background-image:url('http://i.stack.imgur.com/FhHRx.gif');
background-repeat:no-repeat;
background-position:center center;
background-color:rgba(255,255,255,.4);
}
Here is the JSFiddle http://jsfiddle.net/QWB9x/89/
You do not need to do so much of scripting to assign it a position. You can do it with simple css.
Just make the loader relative to its parent. Assign a height and width and do the following css part.
.loader{
position: relative;
top: -half of the height;
left: -half of the width;
margin-top: 50%;
margin-left: 50%;
}
works with every device
use z-index example:-
<div style="z-index:100;">loading image</div>
.loading #img_loading {
position: fixed;
top: 50%;
left: calc(50% + 55px);
display: block;
}
The above will solve the half of the problem, you need to update the left dynamically with javascript.