Dots on this img should be filling background. Only jquery animation. How to create this? Canvas? Any ideas?
Try this jsfiddle.net, simply change your logic by defining how and when to change opacity.
CSS
.circleBase {
border-radius: 50%;
behavior: url(PIE.htc);
/* remove if you don't care about IE8 */
opacity: 0;
// filter: alpha(opacity=0); /* For IE8 and earlier */
}
.type1 {
width: 100px;
height: 100px;
background: yellow;
border: 3px solid red;
}
.type2 {
width: 50px;
height: 50px;
background: #ccc;
border: 3px solid #000;
}
.type3 {
width: 500px;
height: 500px;
background: aqua;
border: 30px solid blue;
}
JS
$('.circleBase').each(function(index){
// add your opacity logic here - when and how to change it
var el = this;
setTimeout(function(){
$(el).fadeTo('slow', 0.8);
}, Math.floor(Math.random() * 1000))
})
HTML
<div class="circleBase type1"></div>
<div class="circleBase type2"></div>
<div class="circleBase type2"></div>
<div class="circleBase type3"></div>
Related
I have a masonry layout (using the library from here), that when a user clicks a tile, only one tile should be able to expand at a time. If the user clicks another tile, the previously opened tile should close. How can I check for any previously opened tiles, close them, and then open the newly selected tile?
// external js: masonry.pkgd.js
var grid = document.querySelector('.grid');
var msnry = new Masonry( grid);
grid.addEventListener( 'click', function( event ) {
// don't proceed if item was not clicked on
if ( !matchesSelector( event.target, '.grid-item' ) ) {
return;
}
// change size of item via class
event.target.classList.toggle('grid-item--gigante');
// trigger layout
msnry.layout();
});
.grid {
background: #eee;
width: 1200px;
margin: 0 auto;
}
.grid-holder {
background: #fff;
margin: 0 auto;
display: block;
}
.grid-item {
width: 375px;
height: 375px;
margin-bottom: 4%;
float: left;
border: 1px solid #ddd;
margin-right: 10px;
background-color: #eee;
box-shadow: 2px 2px 2px 2px #eee;
}
.grid-item--gigante {
max-width: 600px;
min-width: 100px;
width: 63%;
min-height: 375px;
height: auto;
margin-left: 8px;
background-color: rgba(215, 210, 203, 0.3) !important;
color: #666;
border: 1px solid #ddd;
padding: 0.5% 8% 2.5% 5%;
z-index: 2; /* above other items */
}
.grid-item:hover {
background: #a2c;
border-color: white;
cursor: pointer;
}
<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>
<div class="grid">
<div class="grid-holder">
<div class="grid-item">Jim</div>
<div class="grid-item">Joe</div>
<div class="grid-item">John</div>
<div class="grid-item">James</div>
<div class="grid-item">Jack</div>
<div class="grid-item">Joseph</div>
</div>
</div>
You need to keep a reference to previously enlarged grid item.
Whenever the click event occurs, check if current event target is equal to previously enlarged grid item or not. If it is not, remove .grid-item--gigante class from previously enlarged grid item and update the reference to previously enlarged grid item to now point to event.target.
P.S. removed some CSS to make the example code snippet easy to understand.
var grid = document.querySelector('.grid');
var msnry = new Masonry(grid);
var previouslyEnlarged;
grid.addEventListener('click', function(event) {
if ( !matchesSelector( event.target, '.grid-item' ) ) {
return;
}
if (previouslyEnlarged == event.target) {
return;
} else if (previouslyEnlarged) {
previouslyEnlarged.classList.remove('grid-item--gigante');
}
previouslyEnlarged = event.target;
event.target.classList.toggle('grid-item--gigante');
msnry.layout();
});
.grid-holder {
background: #fff;
margin: 0 auto;
display: block;
}
.grid-item {
width: 50px;
height: 50px;
margin-bottom: 4%;
float: left;
border: 1px solid #ddd;
margin-right: 10px;
background-color: #eee;
box-shadow: 2px 2px 2px 2px #eee;
}
.grid-item--gigante {
width: 100px;
height: 100px;
margin-left: 8px;
background-color: rgba(215, 210, 203, 0.3) !important;
color: #666;
border: 1px solid #ddd;
padding: 0.5% 8% 2.5% 5%;
z-index: 2;
}
.grid-item:hover {
background: #a2c;
border-color: white;
cursor: pointer;
}
<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>
<div class="grid">
<div class="grid-holder">
<div class="grid-item">Jim</div>
<div class="grid-item">Joe</div>
<div class="grid-item">John</div>
<div class="grid-item">James</div>
<div class="grid-item">Jack</div>
<div class="grid-item">Joseph</div>
</div>
</div>
I'm trying to create a simple calendar component with a variable amount of rows and columns. Each row and column has a minimal height/width though, so it should be possible for scrollbars to appear when it won't fit the screen.
I would like the header (which shows days and resources) and sidebar (which shows the hours) to always be visible.
I got it working perfectly in the following example in Chrome:
http://plnkr.co/2zCEiY9ssLCWLXY3teBN
HTML:
<body onload="init()">
<div id="grid">
<div id="corner"></div>
<div id="head"></div>
<div id="side"></div>
<div id="content"></div>
</div>
</body>
Javascript:
function init() {
var grid = document.getElementById("grid");
var corner = document.getElementById("corner");
var head = document.getElementById("head");
var side = document.getElementById("side");
grid.addEventListener("scroll", function(event) {
corner.style.top = grid.scrollTop+'px';
corner.style.left = grid.scrollLeft+'px';
head.style.top = grid.scrollTop+'px';
side.style.left = grid.scrollLeft+'px';
});
}
CSS:
* {
box-sizing: border-box;
}
body {
width: 700px;
height: 700px;
border: 1px solid black;
}
#grid {
position: relative;
width: 100%;
height: 100%;
background: purple;
overflow: auto;
}
#corner {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: white;
border: 1px solid black;
z-index: 200;
}
#head {
position: absolute;
top: 0;
left: 100px;
height: 100px;
width: 1000px;
background: linear-gradient(135deg, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%);
border: 1px solid black;
z-index: 100;
}
#side {
position: absolute;
top: 100px;
left: 0;
height: 1000px;
width: 100px;
background: linear-gradient(135deg, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%);
border: 1px solid black;
z-index: 100;
}
#content {
width: 1000px;
height: 1000px;
margin-left: 100px;
margin-top: 100px;
background: linear-gradient(135deg, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
border: 1px solid black;
}
However, when i open this example in IE11 or firefox, the header jitters when scrolling with the mousewheel. (dragging scrollbars seems fine) This appears to be an issue with the smooth scrolling functionality of the browsers.
I could listen to a scroll event and prevent the default behavior and manually scroll the content. This would basically prevent smooth scrolling in all browsers. However it would be nice to have a solution that doesn't do that.
So in short, i want the example in the link above to work correctly in IE. Without the jittering header when scrolling with the mousewheel.
How can i show and hide div outline? I want the content inside the div to display at all times but the outline of the div display only on mouseover.
function show_sidebar() {
document.getElementById('boxes').style.visibility = "visible";
}
function hide_sidebar() {
document.getElementById('boxes').style.visibility = "hidden";
}
.container5 {
background-color: transparent;
width: 220px;
height: 320px;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid red;
position: absolute;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" onMouseOver="show_sidebar()" onMouseOut="hide_sidebar()">
<div class="container5" id="boxes">some thing</div>
</div>
The simplest way to achieve what you want is by using just CSS:
#boxes {
border-color: transparent;
}
#wrapper:hover #boxes {
border-color: red;
}
Snippet:
.container5 {
background-color: transparent;
width: 160px; /* resized it to fit inside the screen */
height: 200px; /* resized it to fit inside the screen */
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid;
position: absolute;
overflow: hidden;
}
#boxes {
border-color: transparent;
}
#wrapper:hover #boxes {
border-color: red;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="container5" id="boxes">some thing</div>
</div>
Alternatively, you can use JavaScript to set the border-color property to transparent on mouseout and back to red on mouseover:
JavaScript:
document.getElementById('wrapper').onmouseover = function () {
document.getElementById('boxes').style.borderColor = "red";
}
document.getElementById('wrapper').onmouseout = function () {
document.getElementById('boxes').style.borderColor = "transparent";
}
jQuery:
$("#wrapper").hover(function() {
$("#boxes").css("border-color", "red");
},
function() {
$("#boxes").css("border-color", "transparent");
});
Snippet:
$("#wrapper").hover(function() {
$("#boxes").css("border-color", "red");
},
function() {
$("#boxes").css("border-color", "transparent");
});
.container5 {
background-color: transparent;
width: 160px; /* resized it to fit inside the screen */
height: 200px; /* resized it to fit inside the screen */
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid transparent;
position: absolute;
overflow: hidden;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="container5" id="boxes">some thing</div>
</div>
You can either use a separate class to conditionally toggle it, or use the :hover property. In the interest of JavaScript, I'll show the former. Demo: https://jsfiddle.net/h8c33x9d/
CSS
.container5 {
background-color: transparent;
width: 220px;
height: 320px;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid red;
position: absolute;
overflow: hidden;
}
.my-border {
border: 1px solid red;
}
JavaScript
function show_sidebar() {
$('#boxes').addClass('my-border');
}
function hide_sidebar() {
$('#boxes').removeClass('my-border');
}
You don't need Javascript for that, as suggested by #KarthikeyanSekar, you only need a :hover effect to your container element.
An example to help you visualize can be found on this fiddle, but essentially it goes like this:
The css:
/* Remove the border from the .container5 style */
.container5 {
background-color: transparent;
width: 220px;
height: 320px;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
overflow: hidden;
}
/* Add only the border when the mouse is hover it */
.container5:hover {
border: 1px solid red;
}
And the HTML remains the same, only removing the javascript binds:
<div id="wrapper">
<div class="container5" id="boxes">some thing</div>
</div>
Hope it helps,
Cheers!
/*Change border to transparent */
.container5 {
background-color: transparent;
width: 220px;
height: 320px;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
overflow: hidden;
border: 1px solid transparent;
}
/*Add border color*/
.container5:hover {
border: 1px solid red;
}
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>
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