WordPress Blog Byline Zoom Fix Tutorial
That’s it! We’re doing something today regarding …
How on non-mobile, with this blog, the byline …
A “Dot Dot Dot” Information Technology Blog
… can mal-align as a user zooms in or out.
And we were doing things for the first time we can remember, regarding the fix, which we weren’t expecting. So …
For the first time we can remember …
- for a position: absolute “overlay” scenerio … we did not use a left: 123px style of positioning … but, rather …
- used a right: 45.6% style of positioning …
- lining the byline’s right with the blog title’s right … more or less …
- making the byline more central …
- giving it more “wander room” as a user zooms in or out
Ever since the advent of “mobile” platforms, the idea of “zoom” has become more and more of a “mute point”, but not for “non-mobile”, as with this “kind of unusual” adding, via “overlay” idea, regarding HTML elements.
On this topic, we’d like to thank this excellent link which reminded us that “responsive design”‘s biggest friend is the percent (ie. “%”) unit of webpage measure!
By the way, even on “non-mobile”, the window.onresize event is triggered we found, but once there we struggled to do much about the mal-alignment zooming in or out was sometimes doing to the byline off to the left.
The new code (intervention, that made the difference), in good ol’ header.php?
<?php echo ”
function bylinedo() {
var ahuhrect=document.getElementById('access').getBoundingClientRect();
var huhrect=document.getElementById('ahomeis').getBoundingClientRect();
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) {
document.getElementById('ahomeis').innerHTML=document.getElementById('ahomeis').innerHTML.replace(' Blog', ' <span id=sbyline><font size=2><i><strong>... I.T.</strong></i></font></span> Blog');
} else {
//document.getElementById('hdgspan').innerHTML+='<span id=sbyline style="position:absolute;left:' + ahuhrect.left + 'px;top:' + eval(53 + eval('' + huhrect.top)) + 'px;"><font size=2><i><strong>A "Dot Dot Dot" Information Technology Blog</strong></i></font></span>';
//alert('sw=' + screen.width + ' al=' + ahuhrect.left + ' ... ' + eval(100 * eval('' + screen.width) / eval('' + ahuhrect.left)));
// Thanks to https://stackoverflow.com/questions/995914/catch-browsers-zoom-event-in-javascript
document.getElementById('hdgspan').innerHTML+='<span id=sbyline style="position:absolute;right:' + eval(100 * eval('' + huhrect.right) / eval('' + screen.width)) + '%;top:' + eval(53 + eval('' + huhrect.top)) + 'px;"><font size=2><i><strong>A "Dot Dot Dot" Information Technology Blog</strong></i></font></span>';
//window.onresize=function(){ alert(65); var bhuhrect=document.getElementById('access').getBoundingClientRect(); document.getElementById('hdgspan').style.left='' + bhuhrect.left + 'px'; };
}
}
“; ?>
If this was interesting you may be interested in this too.
