We Keep Coding

element.animate on svg viewbox in native js

I'm currently trying to animate the svg viewbox with the .animate method,
i tried
obj.animate([
{ viewbox: 'min-x(' + viewBoxX0 + ') min-y(' + viewBoxY0 + ') width(' + viewBoxSize0 + ') height(' + viewBoxSize0 + ')' },
{ viewbox: 'min-x(' + viewBoxX1 + ') min-y(' + viewBoxY1 + ') width(' + viewBoxSize1 + ') height(' + viewBoxSize1 + ')' }
], {
duration: time,
iterations: 1
});
which didn't work, afterwards i tried to animate the viewbox defining base rectangle by setting obj to
var obj = document.querySelector('#svg0').viewBox.baseVal;
trying to animate it like a normal rect, which also didn't work.
Is there any way to do it with .animate? Or am i forced to use other methods for animating it?
jsfiddle for the problem: https://jsfiddle.net/juwd29s0/

Responsive Smooth Scroll CSS3 Animation?

I've been trying to get a smooth scroll animation for a while now, but mainly in JS..
This hasn't been working out that well so I decided to try in CSS3.
Now I want to make this animation responsive by calling a JS function which adds the CSS rules for the animation responsive to the object the animation is for. Here is the JS code I've got so far. I'll also leave a Fiddle, but I'm new to that so things might not work right away.
function getTexts() {
var element = document.getElementsByClassName('toplink');
for (x = 0, len = element.length; x < len; x++){
var ID = element[x].textContent.toLowerCase();
var object = document.getElementById(ID);
console.log(object);
addCSSAnimator(ID);
}
}
function addCSSAnimator(el) {
var sheet = document.styleSheets[0];
var DOM = document.getElementById(el);
var Class = DOM.getAttribute("class");
var Parent = DOM.parentElement.getAttribute("id");
var rect = DOM.getBoundingClientRect();
var rule = ".toplink[ id= '"+el+"' ]:target - #"+Parent+" div."+Class+" {\n" +
"-webkit-transform: translateY( +"+rect.y.toPrecision(4)+'px'+" );\n" +
"transform: translateY( +"+rect.y.toPrecision(4)+'px'+" );\n" +
"}";
console.log("Stylesheet: ",sheet," object: ",DOM," Class: ",Class," offset X&Y:",rect.x," ",rect.y);
console.log(rule);
sheet.insertRule("body { background-color: 0; }", 1);
}
https://jsfiddle.net/dtj46c64/

You may try moving to jquery for this solution. Use document.ready and window.resize functions to handle the animation and also instead of for loop. use the jquery .each() function to get the elements. Try working around the following code i changed for you to go along with. Hope this puts you in the right direction to achieve your goal:
<script>
function getTexts() {
$(".toplink").each(function () {
let ID = $(this)
console.log(ID);
addCSSAnimator(ID);
});
}
function addCSSAnimator(el) {
var sheet = document.styleSheets[0];
var DOM = el;
var Class = DOM.attr("class");
var Parent = DOM.parent().attr("id");
var rect = DOM[0].getBoundingClientRect();
var rule = ".toplink[ id= '" + el + "' ]:target - #" + Parent + " div." + Class + " {\n" +
"-webkit-transform: translateY( +" + rect.top.toPrecision(4) + 'px' + " );\n" +
"transform: translateY( +" + rect.top.toPrecision(4) + 'px' + " );\n" +
"}";
console.log("Stylesheet: ", sheet, " object: ", DOM, " Class: ", Class, " offset X&Y:", rect.left, " ", rect.top);
console.log(rule);
sheet.insertRule("body { background-color: 0; }", 1);
}
$(window).on('resize', function () {
getTexts();
});
$(document).ready(function () {
getTexts();
});
</script>
Notice i changed the rect.y to rect.top as on some browsers the getBoundingClientRect fucntion does not return x and y values but left and top are always filled.
Also dont know why you are getting id of the parent of the object as there is no id set to the parent of the anchor class="toplink" so it will always return as null or empty.
Sorry for not a 100% answer as got busy but i hope the solution so far i suggested will help you tweak and find what your looking for.

jQuery selector as parameter is not working

I have this little function to print the image size.
while it works when I just call the function
with size('#prototype); for example, it is not working anymore on resize('#protoimg).
Why? Can anyone help me out, please?
$(document).ready(function(){
function size(a){
var height = $(a).height();
var width = $(a).width();
$('#picbox').find('p.size').remove();
$('#picbox').append('<p class="size">' + width + '-' + height + '</p>');
}
size('#protoimg');
$(window).resize(size('#protoimg'));
)};

Try this:
$(function() {
size('#protoimg')
});
$(window).resize(function() {
size('#protoimg');
});
function size(a){
var height = $(a).height();
var width = $(a).width();
$('#target').html('<p class="size">' + width + '-' + height + '</p>');
}
If #protoimg is an image file, make sure you set attribute width="100%"to avoid overflow.

Try to put to remove the function size(a) out of the $(document).ready(); and put the $(window).resize(); inside
Like this:
function size(a){
var height = $(a).height();
var width = $(a).width();
$('#picbox').find('p.size').remove();
$('#picbox').append('<p class="size">' + width + '-' + height + '</p>');
}
$(document).ready(function(){
$(window).resize(function() {
size('#protoimg');
});
});

Just remember,the $(window).resize(parameter) need a function as the parameter.But the size('#protoimg') is a result of function.so the correct code is:
$(document).ready(function(){
function size(a){
var height = $(a).height();
var width = $(a).width();
$('#picbox').find('p.size').remove();
$('#picbox').append('<p class="size">' + width + '-' + height + '</p>');
}
size('#protoimg');
$(window).resize(function(){
size('#protoimg');
});
)};

jQuery browser height is not accurate

I am trying to determine the actual height of the browser in relationship to the screen height in jQuery. For some reason, the readings are far from accurate and I'd like to know why.
Basically the issue I'm having is that
The window.innerHeight and window.outerHeight are always exactly the same even though the tabs bar is being shown and there is an obvious (visual) difference between the 2...
Each of the readings above are always smaller than screen.height and screen.availHeight. I was under the impression that this should not be the case if the browser is maximized vs full screen vs sized vs minimized?
My requirement is to change the class of an element on the window.scroll event when that element reaches the top of the browser viewport. However, I am also mandated to change to a different class if the browser window is sized instead of maximized or full screen.
Here's the code that performs this operation however, like I mentioned above, the "maximized" if statement is never true... why?
function SetFloatingDivCheck(ContainerName, StartingClassName, FixedClassNameSized, FixedClassNameMaximized) {
$(document).ready(function () {
var ElemY = $('#' + ContainerName).offset().top - parseFloat($('#' + ContainerName).css('margin-top').replace(/auto/, 0));
$(window).scroll(function () {
var YPosition = $(window).scrollTop();
if (YPosition >= ElemY) {
$('#' + ContainerName).removeClass(StartingClassName);
//the following alert/debug shows this: 1050, 949, 949, 1010 when fired.
//alert("screen.height = " + screen.height.toString() + "\nwindow.innerHeight = " + window.innerHeight.toString() + "\nwindow.outerHeight = " + window.innerHeight.toString() + "\n screen.availHeight = " + screen.availHeight.toString());
if (screen.height == window.outerHeight || screen.availHeight == window.outerHeight)
{
$('#' + ContainerName).addClass(FixedClassNameMaximized);
}
else
{
$('#' + ContainerName).addClass(FixedClassNameSized);
}
}
else {
$('#' + ContainerName).removeClass(FixedClassNameSized);
$('#' + ContainerName).removeClass(FixedClassNameMaximized);
$('#' + ContainerName).addClass(StartingClassName);
}
});
});
}

Your testing is bugged. Your alert states window.outerHeight = " + window.innerHeight.toString()

Find a Div's margin value

I want to be able to rightclick a Div, and then find it's margin's value. The Div's are created like this.
//create spaces//
var addLeft=75;
var addTop=105;
var vert = 1;
var horz = 1;
var selectedunit = "";
for (var i = 1; i<26; i++) {
$("#background").append("<div class='areas' id = 'space" + vert + horz + "' style ='position: absolute; LEFT: " + addLeft + "px; Top:" + addTop + "px'></div>");
if (addLeft < 600) {
addLeft += 150;
vert+=1;
} else {
horz+=1;
addTop += 150;
addLeft = 75;
vert=1;
}
}
And I try to find the div's margin with this.
$('.areas').mousedown(function(e) {
if(e.button === 2 ){
var style = window.getComputedStyle(this);
var futureleft = style.marginLeft;
$('#Status').append(futureleft);
}
})
Status is just a box that should give me the Div's left value, but it always gives 0PX. Any suggestions?

Since you're using jQuery, why not do
var futureleft = $(this).css("marginLeft");

You are not setting any margin. You are assigning a left value:
"LEFT: " + addLeft + "px;
But asking for the marginLeft value, which was not defined in the generated divs:
var style = window.getComputedStyle(this);
var futureleft = style.marginLeft;
Either you set the margin-left on the generated divs, or you request the correct property:
var style = window.getComputedStyle(this);
var futureleft = style.left;