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!
Related
I noticed on some screens and initial load my website content jumps up to meet up with the bottom of the banner. When you resize the window the banner seamlessly resizes to fit. However while resizing the window you will notice the content jumping up and down. I feel like it has something to do with the header height but not sure why it would be delayed in meeting up with the bottom of the banner.
I have posted code question on here without asking this question direclty trying to solve the issue. (For example making a script that changes the header height when the banner size changes.) But was unsuccessful in getting it to work the way i needed and think it was the wrong route anyways.
You can see the site HERE - Resize your browser window to see the content jump and and down.
Any help in the right direction where I could solve this issue would be great! Thanks!
You are using a CSS layout which tries to 'fit' everything perfectly. This is known as a reponsive design (on each 'breakpoint' defined in your css it even tries to use a different height). While this is nice for a website to have (it means that on any device it looks good, to fit) it does put some stress onto the css.
Unfortunately, it is very hard in a comment to help you out. Since it requires some basic refactoring to get a much better performance. If you are interested in fixing it however, a good place to start learning what to take on is: https://developers.google.com/web/fundamentals/performance/rendering/
Also, and this might help allot if you are interested, you can actually 'see' how hard your computer (or device) is working for the drawing performance. When in Chrome (OS X or Windows, doesn't matter) you can open the inspect view (ctrl+shift+j) and go to the timelime tab in the upper bar. When you have opened your website, press the leftmost 'record button', then resize the browser and press stop recording. You will end up with a screen similar to this: https://i.stack.imgur.com/6lS3I.png (this is just an example, not your site).
In the timeline view you can keep track of your performance, you want to avoid purple (layout) bars since that 'costs' a lot performance wise (also the link mentioned earlier explains this very well). As developers we tend to aim for 60fps drawing performance, however this takes quite some effort to reach (especially on full responsive websites). Currently the layout trashing alone takes about 15ms and 10ms paint on your website (on my game pc!). As I 'strip down' the site (leaving only the header) the resizing is fast enough to render smoothly. Clearly the solution to your problem can be found in optimizing your CSS.
On a side note, other than the resizing, you don't seem to have many issues regarding performance it seems. No heavy scripts run around scrolling or anything. Which is a GOOD thing already. And I am quite sure most of your visitors won't be resizing all the time ;-) Hope this helped!
I'm not sure but i think it's because of your responsive design has no min-width and max-width defined.
It's used to limit an element that has responsive design to not get too big or too small.
sample:
.header {
opacity: 0.7;
font-size: 8pt;
color: grey;
width: 100%;
min-width: 150px;
vertical-align: top;
}
you could try reading bit bout it here, good luck trying to fix that page :)
http://www.w3schools.com/cssref/pr_dim_min-width.asp
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.
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'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/
I have the weirdest of problems.
I have a jQuery function that animates the result bars of a poll.
function displayResults() {
$(".q_answers1 div").each(function(){
var percentage = $(this).next().text();
$(this).css({width: "0%"}).animate({
width: percentage}, 'slow');
});
}
As you can see it is a simple animation that elongates a couple of divs. It works OK until I embed it on my main page. The problem seems to be that there is too much OTHER content that breaks the beauty of the smooth animation. I was thinking of me being lame in implementing the JavaScript, CSS etc. but after a couple of tests and reverse engineering I found out that THE MORE CONTENT (images, text, video) I HAVE ON THE PAGE, THE WORSE THE QUALITY OF THE ANIMATION IS. I can only guess what the reason is... I really like my animation :)! Appreciate the help!
This demo shows how it should look like. I get it to work like this when the page has less content on it. By bad quality I mean not smooth flow of the bars. The worst case is when the bars appear in their final width in an instant.Tested it on Mozilla and Chrome and IE7 - no difference.
Edit: It seems that without the actual examples your hands are tied so here is something to work on. Just look for the red border, pick one answer and click the button. The language is Bulgarian if you are wondering.
A desirable behavior here
I can live with that here
Starting to look weird here
I don't get this here
If all of them look the same to you then my computer is to blame and I don't have to worry about this particular problem anymore, which already took 2 much effort. Use Mozilla if possible.
Edit 2: I found this SO answer that answers some of my questions about the animate() function and how it works, but the problem remains unsolved, at least for my computer.
How much content are we talking here?
If the page is large enough, the browser engine may simply not have enough power to re-render the contents quickly enough to provide a smooth display.
The way jQuery does it's animation is that it periodically updates inline CSS attributes. If the elements you're changing style's of are floated or have other complex interactions with the other elements on the page then the animation wont be smooth.
In short, put less stuff on your page. You might also attempt some sort of iFrame solution or switch to using flash to display the results.
This is just a limitation of the system, unfortunately.