Quick question : is it possible to put a refresh less than 1 second in a
My goal is to test the display of images at 1/24 or 1/30 a second to do "moving pictures"...
Thanks again for your help.
Use setTimeout or something like that, and do all of this in one page, because a page cannot load 24 times per second with different images...
You could make effect using something like:
cubic-bezier(0.5, 0.2, 0.3, 1.0))
See http://css-tricks.com/snippets/css/keyframe-animation-syntax/
Related
Is there any way of adding some kind of automatic margin between two or more fillText()?
I have a set of fillText() that is changing every frame, they become longer and shorter, but I would want them to to have a fixed space between the text. I don't know how else I can explain this. I created a fiddle to show what I mean.
Example, if you look at the seconds counter, when there is only 1 character in there, the 'S' character is longer away from the seconds than it should.
How would I fix this? I'm pretty new to canvas. Thanks in advance.
Okay, so I found a solution. I'm now grabbing the width of each text element and using that, plus some more in the second argument of fillText().
https://jsfiddle.net/9tv44ja5/3/
^ Updated solution. It's a bit messy atm., will try to clean it up abit later.
Playing with impress.js
I'm trying to acheive a Reveal.js like slide transition, but using impress.js.
The basic effect did come, but i feel, the slides are taking a 'wider' turn making it look a lil slower.
Note : In the fiddle, maximize the output section to see the said problem more clearly
I dont know how else to put it, but if you see http://lab.hakim.se/reveal-js/#/fragments and
http://jsfiddle.net/8ukwex3x/1/, you will be able to make out the difference.
<div id = "impress">
<div class = "step">
Slide 1
</div>
<div class = "step" data-x = "500" data-z="-400"
data-rotate-y="90">
Slide 2
</div>
</div>
What should I do to make it work just like Reveal.js' transition.
Unfortunately your fiddle is completely missing the JavaScript (where I assume you had intended to put just the standard impress.js code) and in any case, just reading from the source code I don't see how your example is in any way similar to what the reveal-js example does. So, with the risk that I might be completely off here, I have one thing that may hopefully be helpful...
The reveal.js transitions are indeed pretty slick and fast. Did you know that you can set the duration of a transition in impress.js? The attribute is data-transition-duration:
<div id="impress" data-transition-duration="1000">
A demo slide show that uses it here.
The default is 1000 ms. A value at about 400-600 ms should give you the reveal.js experience in terms of speed.
PS: Note that in my impress.js repo, where the above link is to, you can also set a duration for each individual step/slide. For the upstream impress.js, all slides have the same duration, set in the root div element.
Will I have to face any problem if i have large number of hidden divs in my page ??
i mean that in my page there is a loop which contains some hidden divs and some buttons which when clicked shows one of the hidden div...
i just want to ask that will i have to face any problem with these hidden div..
the code here is just an example ....
any help will be appreciated..
thanks in advance
<?php
for ( $a = 1; $a < 10; $a++ ) {
<div style='display:none'>
content goes here....
</div>
}
?>
I have many pages with over half a million divs that work fine. Probably the most important thing with many hidden divs is that you enclose the hidden divs within another element which is of fixed layout. If you have a massive amount of html and a fluid layout and you change the visibility of an element, the browser must calculate all the layout again which can be slow and give the user poor responsiveness.
No problem! but It will be indexed but can be frowned upon by Google if you are hiding/showing content for SEO reasons. In other words, what Google sees should be what the user sees when clicking the link.
No problem! But if you are having more and more your websites load will be heavy. That might cause slower performance and perhaps hangs up. It would take loading time too..
That depends on what you try to do.
If you fill your hidden divs with images and other heavy stuff, it all will be loaded immediately with page and may slow things down. Also, browsers would still take time for parsing everything you hid (but that is actually not much time).
So, if you are talking about like 1000x1000 grid of buttons or something like that (for making kind of a game maybe), it will result in sad performance.
If you are talking about dynamic loading of a lot of heavy content, like a whole facebook timeline, it won't work well neither.
But if you just want to show users some blocks, which would work okay if you didn't hide it at all, you will have no problems.
Quick couple of questions just to clarify the likebox setup - Does the Likebox have a min height without Faces?
Secondly - does the url need to be presice as in
https://www.facebook.com/ConistonBoatingCentre
rather than
https://www.facebook.com/ConistonBoatingCentre?fref=ts
or does it not matter - just because it doesn't make it clear on the form and I need to send the code over to a large client and want to make sure its foolproof!
Cheers
Ofcourse it Wont Work!!
check it https://developers.facebook.com/docs/plugins/like-button/
23 pixels is the height without faces.
I have a dynamically generated form that needs to gather several numerical values from a user that totals 100 (%). I thought about writing a script/algorithm that adjusts the remaining values of several text fields - so that when the user changes one value, the remaining values dynamically change (so that the values always total 100).
However, instead of text fields, I would really prefer something more user-friendly like sliders that move when one slider is adjusted or some other user-friendly widget (like an adjustable pie chart(?) that always totals 100%).
The script needs to work in late version of Firefox, Chrome and IE. I read somewhere that HTML5 sliders don't work in Firefox.
I am open to different solutions.
Am not getting your question clearly, assuming that you need a value slider which a person will slide and automatically the bar will increment every time by 1, so try using jQuery and Ajax, will suit your requirements, you can check out few over here.
Sliders work fine in FireFox - try http://www.colorpicker.com/
You can use the jQuery UI slider, if you like. You can register a custom function on change event which easily adjusts the other sliders.
So in the end you got something like this (some pseudo-code in it):
$( "#slider1" ).slider({
change: function(event, ui) {
var i = 100 - value_of_slider1 / number_of_sliders_remaining;
$("#slider2).setValue(i);
$("#slider3).setValue(i);
}
});
Of course this can be implemented a lot more sophisticated. Just to give you the basic idea. Depends on your markup.
I have not had problems with sliders in FireFox.
You can have the various sliders/input devices calculate on each other to get the output by division or whatever, then have the last/smallest number be subtracted rather than divided from the total. This way your other calculations will be accurate to the accuracy and the least significant value can make up the rest.