We Keep Coding

How to make top border animated where color goes from left to right

I finished my idea and it works as it is, but it's static and as all developer like, we want to make it better. I have a script where user choose his own top border color for posts(self-developed forum feature).
There is forum post and top border is colored in some color. How can I make it animated. You know when there is a circle and color goes around (it can be different colors) and makes that cool effect (never ending). I don't want something complex as that. I would like a very "simple" concept. Top border color is red (example). Animation starts from left all the way to the right and then repeats. It works like a pulse when heart beats. Like some different color going in that single line, reaching end, stops, repeat.
This is my code:
$(document).ready(function() {
var postDivs = $(".post");
$.each(postDivs, function(index, div) {
var color = ($(".post .postprofile-info")[index].firstChild.nextSibling.data[0] == "#") ? $(".post .postprofile-info")[index].firstChild.nextSibling.data : "#d4d4d4";
$(this).css("border-top", "15px solid " + color);
var element1 = $(".post .postprofile-info ")[index].firstChild;
$(".post .postprofile-info")[index].firstChild.nextSibling.data = "";
element1.style.visibility = "hidden";
});
I know it's quite messy and very badly written but it works :D
Focus here on this line:
$(this).css("border-top", "15px solid " + color);
How can I animate that? I hope I managed to explain myself as best as I could. :)

You can't change the border in the way you would like on the actual element, but you can get the effect using pure CSS (without having to add extra elements to the DOM) by using a before pseudo element.
Here's a simple example in pure HTML/CSS:
div {
height: fit-content;
width: fit-content;
position: relative;
}
div::before {
content: '';
width: 100%;
height: 2px;
background: red;
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 0;
animation: grow 2s infinite;
}
#keyframes grow {
to {
width: 100%;
}
}
<div>some info</div>

Analogue of zoom in css? Transform: scale() property as zoom property

There is a zoom property in css, it does what it needs, but there is no support in browsers (Firefox in particular). There is also a transform: scale () property, but the fact is that the main_div block becomes visible when using transform: scale (), which is not when using the zoom property. I need exactly this behavior.
Can the transform: scale() property be applied in such a way that it works like a zoom? Or what analogs does the zoom property have? How to be in this situation?
Here is my code. You need to check in Google Chrome, since Firefox's zoom property does not work
https://jsfiddle.net/tj2349f5/1/
html
<div id='main_div'>
<div id="second_div">Hello</div>
</div>
<input class="test_button" type="button" name="button_name" value="test">
JavaScript
let test_button = document.querySelector('input.test_button');
test_button.addEventListener('click', () => {
//second_div.style.transform = 'scale(0.5)';
second_div.style.zoom = 0.5;
});

The difference between a 'real' CSS zoom and a scale is that a scaled element does not change the space it takes up whereas a zoomed one does.
I am not absolutely sure whether this code does what you want as on my device I don't see the red appearing as described in the question [I think this is because my device is narrower]. What it does is change the width and height of the zoomed element alongside the scaling.
The effect on Chrome that I see is that the scrollbars change the same amount whether using this code or the real CSS zoom whereas using scale only the scrollbars don't change at all.
let test_button = document.querySelector('.test_button');
test_button.addEventListener('click', () => {
second_div.style.height = second_div.offsetHeight * 0.5 + 'px';
second_div.style.width = second_div.offsetWidth * 0.5 + 'px';
second_div.style.transform = 'scale(0.5)';
test_button.style.display = 'none';
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
display: flex;
}
div#main_div {
display: block;
margin: 10px auto;
height: 80vh;
width: 80vw;
background: red;
overflow: scroll;
}
div#second_div {
height: 3000px;
width: 3000px;
background: green;
transform-origin: 0% 0%;
}
<div id='main_div'>
<div id="second_div">Hello</div>
</div>
<button class="test_button">CLICK TO MAKE IT LOOK LIKE A REAL CSS ZOOM BUT USING SCALE AND DIMENSION SETTING</button>
Note: if you scale back up remember to restore the dimensions as well.

Adjusting a div based on the size of the container

I have an HTML video player with Javascript generated controls(with background images of SVG graphics). I'm having an issue using the css calc() function, and need to resize the div's based on the video controls bar. So when the window is expanded/contracted, the controls need to adjust accordingly.
The controls div:
//Controls Wrapper
videoObj.controlsWrapper = document.createElement("div");
videoObj.controlsWrapper.className = "video-controls";
The controls are generated dynamically, so for instance, the play button is generated by this:
videoObj.playBtn = document.createElement("button");
videoObj.playBtn.className = "play btn";
So the question is how to adjust the size of the play button(which is a background of an SVG graphic), to a percentage(about 25%) of the height of the controls wrapper div.
jsfiddle

This is the easiest way... try resizing the box :)
The parent is relative. The child is absolute. Setting the top, left, right and bottom all to 0 will actually create a spider web effect ( or stretch effect ). I used different pixels so you could see the reaction. otherwise the child will cover the parent. Hope this helps.
http://jsfiddle.net/m5wm1rLs/
.parent{
position: relative;
width: 100px;
height: 100px;
background-color: red;
}
.child{
position: absolute;
top: 3px;
bottom: 20px;
left: 3px;
right: 20px;
background-color: green;
}
<div class="parent">
<div class="child"></div>
</div>
To test that this works, you can make parent resizable:
$('.parent').resizable();

Resizing it to 25% of the parent div height is relatively easy, but only doable with a scripting language. As far as CSS has come by allow calc(), it has no support for pulling the sizes of designated elements.
Here's a simple script I threw together for you:
window.onload = function() {
resize();
}
window.onresize = function() {
resize();
}
function resize() {
document.getElementsByClassName('play')[0].style.width = (document.getElementsByClassName('timeline')[0].offsetHeight * .25) + 'px';
}
JSFiddle: http://jsfiddle.net/zq2vzkk5/
I recommend you use ids to identify the elements you want to pull the values from, but if the positions of the elements won't change on the page, then classes are fine. You just have to update which instance of the class you want to pull the value from if it does change.
If you want a jQuery variation, I can supply that, too.
I hope this helps.
Edit:
Here's the jQuery variation:
$(function() {
resize();
$(window).resize(function() {
resize();
});
});
function resize() {
$('.play').first().width($('.timeline').first().outerHeight() * .25);
}
JSFiddle: http://jsfiddle.net/s51vrca2/

You can do this without JS :
.play {
height: 25%;
}

Creating a filling animation on transparent image in JavaScript

Given a div that has an image in its background, if this image is transparent (this is an important detail), how can I change its color? Is it possible?
HTML
<body>
<div>
<hr/>
<div id ='imagediv' class="ornament"></div>
</div>
</body>
CSS
body {
margin-top: 100px;
background: url('http://hostmypicture.com/images/fundokairo.png') repeat;
}
hr {
height: 30px;
color: #578daf;
background: url('http://hostmypicture.com/images/barrapreta.png') repeat-x 0 50%;
border: 0;
padding: 0;
margin: 9px 0 0 0;
}
.ornament {
width: 169px;
height: 169px;
background: url('http://s23.postimg.org/6prq112g7/mascara_Fundo_Branco_Kairos.png') 0 50%;
margin: -104px auto 0 auto;
}
ornament is the class of the div.
JavaScript
var divImage = document.getElementById('imagediv');
var divStyle = divImage.currentStyle || window.getComputedStyle(divImage, false);
var divBackImage = divStyle.backgroundImage;
How can the image be filled?
I tried without success to fill the image using fillStyle and fill() of JavaScript. But it seems that using canvas is a possibility.
Fiddle: http://jsfiddle.net/9EFdF/21/
Note: I want the effect of a progress bar, so the color needs to come from underside.

You can simply set a new style for the element like this - note: it will be the transparent parts of the image that will change so in this case if you want the inner part to change color change transparency so that part is transparent:
imagediv.style.backgroundColor = '#000'; //new color
You can chose to use getElementById first, however, elements that has an ID can be referenced directly, but for example's sake:
var el = document.getElementById('imagediv');
el.style.backgroundColor = '#000'; //new color
UPDATED FIDDLE
If you want to keep the image as-is and fill it's inner part the only other option is to use canvas and its composite modes.

If the div is the same size as the background image, you could add a background-color style to the div and the colour would show through the transparent image.

Set background position of image with Javascript

When a user clicks a link which has an image as a background, I need an onClick event that changes the background position of it. This is the link:
Favorite
It's already set in css and there are two states, regular and hover, with hover being shifted by 12px.
a.favorite {
width: 15px;
height: 12px;
background: url(img/icon-fav.png) no-repeat;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
text-indent: -300px;
}
a.favorite:hover {
background-position: 0 -12px
}
When I click the image once, I need the background position to be set the same as the hover state.
I'm doing that like this, and it works:
document.getElementById("favorite_1").style.backgroundPosition = "0 -12px";
But when the link is clicked again, I need it to switch back to the normal background position and I can't get that to work. This is the function I'm trying but it only works for moving the background to "0 -12px", not for moving it back to its original position.
function favoriteBusiness(id){
if(document.getElementById("favorite_1").style.backgroundPosition == "0 -12px")
document.getElementById("favorite_1").style.backgroundPosition = "";
else
document.getElementById("favorite_1").style.backgroundPosition = "0 -12px";
}
Can someone point me in the right direction here?

Unless you're making calculations, you're better off adding and removing classes that contain the new position. This is usually what's done for manipulating CSS sprites.