I am trying to create a website in which the navigation is based on zoomable contents.
For instance, here is a screenshot of what you can see just after opening the webpage:
Then, I am using zoom.js for "zooming" the page and be able to read the text. However, after the magnification I got this:
The font-size is set to 9.4%, and as you can see it causes characters to be overlapped and not correctly positioned.
I tried to use some jQuery plugin like FitText.js or jQuery TextFill, just to see if they changed the font-size in some "magic" way that solve this issue; unfortunately they had effect in solving this visualization issue.
So my question is: how can I make the font looking "normal"? Is there any jQuery plugin or other JS library to manage this problem?
I am using Firefox, and I prefer to focus on using just this browser for the moment.
As suggested by Nico O and Ed Plunkett in the comments, the solution to my problem was to start with a very big page, in which everything is 20 times bigger than the desired page size. Then I added the following CSS to scale everything 20 times smaller:
body {
transform: scale(0.05);
transform-origin: 0 0;
}
When I need to zoom on a point, I simply add new transformation parameters in the CSS, by changing the transform property (I used jQuery, but it can be done in many other ways):
$("body").css("transform", "scale("+scale_factor+") translate("+translate_data+")");
Note also that I didn't need any additional library (with the exception of jQuery) to do this.
Related
Checking this site: http://themes.framework-y.com/codrop/chat/
Those small images in the patch bounching horizontally. I would see the parameters, how much is the maximum left right limit in the bounce. I would see the Javascript which moves the images. I think this is not a css / #keyframes animation, but Javascript / jQuery does it. But I do not know how to identify the script which works the indicated html elements.
Selected rs-loop-wrap has no animation attribute. Nor its parent elements.
What is the right way to get the background logic which is responsable for the animation?
this site is powered by the framework for wordpress
http://wordpress.framework-y.com/
This slider is used there
https://www.sliderrevolution.com/examples/
This is a pretty flexible slider with a lot of settings, so looking for this specific code would be a very thankless task. I looked at one of the pictures and saw that it moved from -15px to 15px. Perhaps others are slightly larger or smaller. You should follow them in the developer panel:
Dev Tools Screenshot
If you still want to look inside this slider, take a look at these files:
Dev Tools Network tab Screenshot
Have luck!
I know this was asked before, but my situation is somewhat... weird. I am building an iframe for later use in a slideshow element on the website.
I have a long content-adaptive flexbox that goes way beyond the screen and I want to use the css trick of
left:50%;
transform:translateX(-50%);
To horizontally center the currently viewed area of the page, so when you resize the window, the middle of currently viewed element, will still remain horizontally in the middle of the screen.
As my flexbox is content-adaptive it's like 5K px long so I obviously can't use css %. So I went to jQuery and used $(window).width() to determine current viewport size and adjust the elements with .css({}) method. Here is the jQuery code:
$(document).ready(function(){
$(window).resize(function(){
var winWidthHalf = ($(window).width())/2;
$("#ss_home").css({
"left":"-"+winWidthHalf+"px",
"-webkit-transform":"translateX("+winWidthHalf+"px)"
});
});
});
And here's the puzzle: it worked. And then I restarted the PC and it didn't work since. Whatever I did didn't seem to help. Can you help? I have NO idea what could have happened...
Here is the page preview, please don't mind other comments in the code, they are irrelevant for now: http://users.metropolia.fi/~staniss/test/slideshow/
All content is just sample.
I would also love to know how to group the $(document).ready and $(window).resize properly, since I execute the same code, but don't wanna copy paste it twice just to change the events, since that's a bad practice. I haven't been able to find the right syntax for this.
Also sorry, the sample is for chrome only, it's very early in dev so I didn't bother with compatibility yet.
It was a browser vendor extension issue (had to add -webkit- prefix to transform) :P.
I have a simple table with css. When I add a bottom border to the middle row, the next row has a really weird border. it happens only in chrome, and I have no idea why.
I should say the I apply the bottom border to the middle row using javascript (because I don't know the size of the table beforehand). I tried to apply without javascript, and it works without the weird problem.
here is an example of the table, notice the borders in the middle:
http://ri-cloud.appspot.com/super_tacticko?create
here is the javascipt I'm using to create the middle line:
// add the middle line
var half = height / 2; // it has to be zugi anyway
var $middle = $('tr').slice(half-1, half);
$middle.find('td').addClass('middle-td');
If resizing the window fixes the issue (as it does in my case also) it is most likely a rendering bug... Chrome has a number of these that spring up from time to time, mainly because it tries to be faster than everything else by cutting corners (imo).
The only way to work around a bug is to keep trying different approaches until you find one that doesn't trigger the issue, either that or try programatically resizing your table/body after it's been created and then put it back to the right size again — this may force Chrome to redraw correctly... and should occur quickly enough that the users wont notice. A third approach could be to build the table entirely in JavaScript and once properly formed, embed it into the page.
The reason why the CSS method probably works is because it will be using Chrome's rendering methods at a different point in the rendering process to that of the JavaScript style modifications.
Basically, I have seen Chrome do some pretty strange things. The hacks I've used in the past to get around odd Chrome problems have been:
Use decimals in dimension calculations — i.e. 30.1px instead of 30px
Not setting opacity to full — i.e. 0.99 instead of 1.0
Not to use an ip address prefixed with a . when setting a cookie
Use overflow: hidden to repair strange renderings in certain situations.
Oh just for the record I'm viewing on Windows 7 via Chrome v25.0.1364.97
I have run into similar problems in Chrome on Windows 10. The cause of this problem is that Chrome is not working correctly with Windows text-size settings feature (IMHO changing DPI in Win OS). When I have switched from 125% text size to 100% text size, Chrome was rendering my HTML table correctly. As far as I have been testing, other browsers are working with this feature OK.
Finally I made a quick fix to this issue as follows:
table {
tr td {
border-color: transparent !important;
outline: 1px solid #666;
}
}
It is not bullet-proof, the sizes of borders are 2px, but better something than nothing.
I'm working on a project that requires that the vertical borders, which are currently calculated based on page size or the length of the page depending on which one is longer, but there is a slight issue.
I am using Firefox and for example if my noscript plugin kicks in and I for example allowed the script the vertical borders will have a gap at the bottom of the page.
That as an example, is there any way I am able to use javascript to detect a viewport change across multiple browsers?
I found somewhere watch() but was unable to find solid documentation on it and what browsers support this. Is what I am trying to do possible? Is watch() the proper way? If so, can anyone point me to some documentation, if not, what should I be looking at?
window.onresize is the event you're looking for, I think. Here's a link: https://developer.mozilla.org/en/DOM/window.onresize
However, you should be able to get full-height elements using only CSS, and then you won't need any javascript
Maybe you can solve this problem with Media Queries and window.matchMedia
https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/
This video explains the problem best: http://www.screencast-o-matic.com/watch/cQ1Oc9f1L
Basically the directory is located here: http://www.ipalaces.org/uploaderprogress/grrrrrr.html
Is the problem piece using YUI.js as the uploading script. The YUI updates the table's row with new information on every event. So I have it update it with some CSS/HTML so that it does a progress loading bar. It works fine for all browsers but IE. I am not sure if this is a known rendering bug or what, and if there is even a fix for it?
the working-demo.html basically shows that if you just resize the div using javascript, IE renders it fine. Its just updated the table's row with new div information seems to cause rendering issues.
I couldn't reproduce the bug because you applied that fix. But I did take a look at the source. The way you are animating that progress bar just begs for bugs. Try compatibility mode in IE8 and you will see that it's shrinking instead of growing (because the element is centred) and that progressbar-completed element is 2x bigger then container. Same in Chrome and probably Safari.
This is how I would do it:
(source: maikumori.com)
Make A constant for example 250px. Then you have to make a background image with same size as A containing progress bar as if it was at 100%.
Then:
background-position = B = -1 * Math.Round(A * UploadedSize / FileSize)
Pros:
Takes less markup
If you make background image 2*A and B = B + A then you can have custom image for "blank" space therefore you can make fancier progress bars easily
Should work in most modern and not so modern browsers
Doesn't make a mess if user has css/javascript disabled
Cons:
A must be constant
Haven't tested =(
P.S.
Sorry for blinding colours, couldn't change them afterwards ... mspaint
I found a solution.
If I include this in the HTML then it will work fine:
<div class='progressbar-completed' style='visibility: hidden;'></div>
It seems like IE is having trouble maintaining the "memory" of the background file when its dynamically created in javascript.
Putting the DIV in the html itself seems to make the memory of the background file persistent in IE.