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>

Fabric js canvas border affects mouse offset

Using Fabric JS, I have a 100px border as an inline style for my canvas
<canvas id='c' style = 'border: solid red 100px;'></canvas>
This is causing issues with selecting objects as the mouse position seems to be offset by the border width
FIDDLE
I have tried to fix the issue using
obj.setCoords();
and
canvas.calcOffset();
with no joy?..

Try jsFiddle. FabricJs generates 2 canvases and they are not placed coreectly inside .canvas-container class
#c{
border: 100px solid #AAA;
}
.upper-canvas{
top: 100px !important;
left: 100px !important;
}

-webkit-transform not working in JavaScript rotation animation(no JQuery)

I made a animation function for a simple game I am making, the animation rotates some text 360degrees 4 times, to give it the appearance that the text is spinning. I looked for similar issues to the one I'm experiencing, but the suggestions did not solve my problem. The animation method is part of my view-object:
rotateText : function(deg, message) {
this.gameState.innerHTML = message;
var animationStepsLeft = this.STEPS;
requestAnimationFrame(setStyle);
function setStyle() {
if(animationStepsLeft > 0) {
Perfection.view.gameState.style =
"-ms-transform: rotate(" + deg + "deg);" +
"-webkit-transform: rotate(" + deg + "deg);" +
"-moz-tranfsform: rotate(" + deg + "deg);" +
"transform: rotate(" + deg + "deg);";
deg += 28.8;
console.log("Rotated");
animationStepsLeft--;
requestAnimationFrame(setStyle);
};
};
},
The "gameState" is a paragraph element in HTML, which is a property of the view object. The method is supposed to take a starting point for the degrees (0) and the message you want to spin - is passed as a string. The amount of steps it's executing is 50, and each time the animation is called the text is rotated 28.8 degrees. My issue is that the animation works flawlessly in Firefox but does not seem to work in webkit based browsers (It's not working in Chrome or Safari). I should mention that the method is being called, as I've attached a console.log in the attempt to debug, and it's being logged 50 times, and the text appears on the screen, but does not rotate. I read in a similar post that in webkit browsers the elements need to be displayed as an inline-block, so I had my CSS styles set as:
#game-state {
display: inline-block;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
z-index: 2;
font-family: "Tahoma", Geneva, sans-serif;
text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black;
font-size: 100px;
color: rgb(213,40,8);
}
But it is still not working!
Can anyone help me pls!

I suggest that you should open console and see what inside element.style. Style is a set of properties. EG: style.height, style.visible... not style="".
You should change your code to <element>.style.transform='rotate(' + deg + 'deg)'. For -ms-transform you can try to use .style['-ms-transform'].
Using raw javascript then you must detect your browser for supported style.

Absolute position after zooming

I have divs with class="myDiv". I need to do this logic: on mouse over, I want to show a popup in the middle of the div.
For that I have the following:
$(".myDiv").mouseover(function () {
positionDiv($(this).position().left + $(this).width() / 2, $(this).position().top + $(this).height() / 2);
});
function positionDiv(xPosition ,yPosition ) {
$("#popupWindow").css("left", xPosition + "px");
$("#popupWindow").css("top", yPosition + "px");
$("#popupWindow").show();
}
The CSS:
.popupWindow{
position:absolute;
width:313px;
height:383px;
display:none;
}
This will position the popup window in the middle of the div on mouse over. Everything works great at this point.
However, if the website is zoomed in (using the browser zoom functionality), tHe position will get messed up. The popup window no longer appears in the middle of myDiv.
Any idea what might be the problem?
Edit:
For more info, if it is created and I zoom it, it is fine. But when I move my mouse to another myDiv and the new popup appears in a weird position. The left and top attribute of the Div are messing up.

You don't need JS for this:
http://jsfiddle.net/coma/6VUpS/1/
The key is to play with CSS and avoid JS calculations. The container div (myDiv) should be position: relative, the popup must be inside and position: absolute, top and left to 50% and using negative margins to center it (http://www.css-101.org/negative-margin/06.php).
Try avoiding JS for visual fanciness, only CSS ensures the correct position even on zoom since it's rendered by the browser.
HTML
<div class="myDiv">
Hi!
<div class="popupWindow">you are welcome!</div>
</div>
CSS
div.myDiv {
padding: 10px;
background-color: #eee;
margin: 50px 0;
position: relative;
}
div.popupWindow {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -100px;
width: 200px;
line-height: 100px;
background-color: #111;
color: #fff;
text-align: center;
display: none;
pointer-events: none;
}
div.myDiv:hover > div.popupWindow {
display: block;
}
Bonus track using a checkbox to click/tap/toggle popup and some fade in:
http://jsfiddle.net/coma/6VUpS/3/
More hacky:
http://jsfiddle.net/coma/6VUpS/
More complex example:
http://jsfiddle.net/coma/dHTHG/

I understand your problem and my solution is to put every object containing a pop up in pos relative and then set your pop up with those CSS :
.myPopUp{
position:absolute;
display : none;
width:400px;
height : 100px;
margin-top : -50px;
margin-left:-200px;
background-color: red;
top : 50%;
left: 50%;
}
It will alway be centered.
Now i understand you have only 1 pop up for all your hoverable div. My trick is to save the pop up in a var and remove it from its parent container to append it in the hovered div like this :
var popUp = $('.myPopUp');
$('.myDiv').mouseover(appendPopUp);
$('.myDiv').mouseout(function(){popUp.css('display', 'none')});
function appendPopUp(){
console.log(popUp.parent(), $(this))
if(popUp.parent()[0] != $(this)[0]){
popUp.remove();
$(this).append(popUp);
}
popUp.css('display', 'block')
}
That should work, here's my fiddle : http://jsfiddle.net/7EEZT/

$(window).on('resize', function(){
var $md = $('.myDiv');
positionDiv($md.position().left + $md.width() / 2, $md.position().top + $(this).height() / 2);
});

I have a simple css solution if you have a div with known height and width you can do same task with help of css only
.popupWindow {
position:absolute;
width:313px;
height:383px;
left:50%;
top:50%;
margin-left:-156px;/*half of width*/
margin-top:-191px;/*half of height*/
display:none;
}

Go with position:relative and try this. It will solved your problem relate to position.
$(".myDiv").mouseover(function () {
positionDiv( $(this).width() / 2, $(this).height() / 2);
});
function positionDiv(xPosition ,yPosition ) {
$("#popupWindow").css("left","-" + xPosition + "px");
$("#popupWindow").css("top", "-" + yPosition + "px");
$("#popupWindow").show();
}
The CSS:
.popupWindow{
position:relative;
width:313px;
height:383px;
display:none;
}
http://jsfiddle.net/kishan6446/PdNkg/13/

How can I create Javascript Buttons with Themes?

I have a button which is attached to a js action. It currently uses <a onMouseUp="..."><img.... The problem is that I want the buttons to be able to change the images depending on the theme (i.e. css file). Since the image is specified in the html itself, this doesnt work. Does anyone know how to implement this?

Instead of having the image in the HTML, you should assign it as a background on the anchor element, as defined in a stylesheet.
a.example {
display:inline-block;
height:20px;
width:20px;
background-image:url(/images/buttonExample.png)
}

That's an easy one (assumed I understood your question):
a) Create your images for the states you want:
a.1 - standard display;
a.2 - mouse over; (hover)
a.3 - mouse down; (active)
b) Define the many different buttons in your css:
b.1 - themeCities
.tcButton { width:100px; height:24px;
background-image: transparent url(theurl) no-repeat top left; }
.tcButton:hover {
background-image: transparent url(thehoverurl) no-repeat top lef; }
.tcButton:active {
background-image: transparent url(theactiveurl) no-repeat top left; }
b.2 - themeNature
.tnButton { width:100px; height:24px;
background-image: transparent url(theurl) no-repeat top left; }
.tnButton:hover {
background-image: transparent url(thehoverurl) no-repeat top lef; }
.tnButton:active {
background-image: transparent url(theactiveurl) no-repeat top left; }
and so fourth.
You should consider sprites otherwise you are going to end up with an unmanageable amount of images. Another consideration is on the size of the buttons: width and height.
I can help on sprites, ... if needed. There are free websites that manage that for you. I am a control freak and use Adobe Fireworks for all my sprites needs as far as creating the sprite images.
Then, still with the images or sprites in mind, you might want to use a css-ninja suggestion on how to accelerate the images pre-loading:
.body:after {
content: url(image-url-1) url(image-url-2) url(image-url-n);
display:none;
}
Trick on creating sprites:
a) make sure background is transparent and save them either as gif or png32;
b) make sure they are the same sizes for the three states otherwise you are going to have jittery displays;
c) once all the images are done, assemble them in a large transparent background image;
d) space them in that new large transparent image; aligning them top and left;
e) give some space between each image. Some suggest 50 pixels between images side-by-side and top-down. I don't follow that. I just give some space between them.
f) the most difficult task in hard coding sprites: write down it's coordinates in the large transparent image: top, left, width, height.
To use a sprite image you go like this (as one of many variations):
.msSprites { background: transparent url(url-of-the-sprite-image.gif) no-repeat;
top left; } /* msSprites = my site sprites */
.tcButton { background-position: 0 0; width:100px; height: 24px; }
.tcButtonHover { background-position: 0 -150px; width:100px; height: 24px; }
/* margin-left at 0px; margin-top:150px ... in the large transparent image */
.tcButtonActive { background-positon: 0 -300px; width:100px; height: 24px; }
/* margin-left at 0px; margin-top:150px ... in the large transparent image */
.tnButton { background-position: -150px 0; width:100px; height:24px; }
/* margin-left at 150px; margin-top at 0 px .. in the large transparent image */
... and so fourth
Application:
Regular images:
<button class='tcButton' onClick ....>This is fun</button>
Sprites:
<button class='msSprites tcButton' onClick ...>This is even more fun</button>
The sprite, in this case, is formed of the big transparent image and the location of the button you want to use.
I hope I have really confused the heck out of you .... or opened your thinking cap wide open.
Good luck!

If you are using jQuery you could change the image tags source attribute.
<img src="oldImageSrc.jpg" />
Then in the javascript method:
function changeButton() {
$("img", this).attr("src", "newImageSrc.jpg");
}