I have 2 questions.
On some WordPress themes, they apply JQuery effects only on the
visible contents. For example, 3 div blocks in bottom of the page
are hidden at the beginning and fade in slowly when I scroll to the
bottom. What technique they used or what event they catch whenever
the content is visible?
I saw some websites having multiple slideshows, text scrolling...
How can they run so many tasks at once? To my way of thinking, they
must assign the tasks to many background worker. Each worker have
different timer to take care of the effects. Am I right? I asked
this question because based on what I read, JavaScript is single
threaded so running multiple tasks is not possible.
I'm not trying to do something with WordPress, just want to know how they can do that so I can try to rebuild it and apply to my own project.
Related
I can find a few thousand examples of creating new windows with electron, and how to change out the current main windows to a new file, But I'm really stumped when it comes to being able to smoothly transition between pages.
I could build all the functionality into the index and swap it out, but that seems overly complex and load heavy.
I could use one of the react bootstraps but this seems rather heavy on learning and counter intuitive to Electron (Plus a massive amount of messing around with multiple package loaders and other such things I've seen).
I've seen some things in the docs for child windows and seem someone suggest the use of those, or hidden windows to pre-load content, append onto the existing page, animate then remove the old. But that just sounds like a nightmare when it comes to adding event listeners.
I just need a way to be able to transition nicely between say a splash page and a load page, then the app page
Then say in the app transition in a modal
Personally I use multiple windows and if the user clicks on the close button for one of them I do not perform a window.close() but a hide(). In addition on every close button press I check if at least one window is left to keep the app alive. If not I exit the application. For ipc calls I introduced a naming convention like: "settings_win-operation1", "splash_win-operation1" and so forth.
There exist a number of CSS and JavaScript packages, such as turn.js, for creating beautiful page flip effects which make it look as if one were leafing through an actual physical book. However, as far as I can see, all of these seem to require that the contents of the complete set of "book pages" be put into a single HTML file.
That way of going about things is, of course, no big deal for small booklets, but for lengthy books with lots of content, it becomes utterly impractical. For one thing, the loading time would simply be too long.
So, my question is: is it possible to engineer a book page flip effect where the flip occurs upon loading a different page than the one presently being shown? I would prefer every new page spread (i.e., every verso-recto pair) to have its own webpage. Also, the flip should, of course, be delayed until the new page has finished loading.
Many thanks for reading and for any suggestions!
I am learning web-workers and found that we can run multiple scripts now on web pages. This is quite interesting but one thing again came in to my mind was If we can't run multiple scripts before html web-workers, How did I run several slideshows on a single html page without using above technology.
I may not properly understand this concept. Can anyone explain how I ran several slideshows which was designed from only JavaScript without web-workers?
Slideshows will typically use a setTimeout() to show the next slide. You can simply have multiple slideshows each using their own setTimeout().
The first slideshow shows it's initial image, then sets a setTimeout() for a particular time in the future when it wants to switch to the next slide. The second slideshow then shows it's initial image and set a setTimeout() for a particular time in the future when it wants to switch to the next slide.
Then, both slideshow are done executing for now until one of their setTimeout() fires. They never technically "execute at the same time". Only one ever actually has code running at a time. Using short enough timer intervals, it may appear they are both operating at the same time, but technically they aren't.
Javascript without WebWorkers is single threaded. There is only ever one thread of execution running at a time. Timers are often used to simulate multiple things happening at the same time (such as multiple javascript-based animations running at the same time). But, that is only a simulation (sometimes a very effective one).
Slideshows may also use CSS3 animations or transitions to show slide transitions from one slide to the next which are controlled by the browser and don't use javascript to execute the animations (they use native code which may or may not be multi-threaded or may even use the GPU - that's browser implementation dependent).
You may find this answer and the references it contains helpful in understanding the javascript event model and single threading: How does JavaScript handle AJAX responses in the background?.
I'm working on a music editor/sequencer app that will be written in JavaScript+HTML5 and will make use of the canvas element and Chrome's Web Audio API (I already have a simple prototype working).
One of the things I'm not so sure about is how to implement the GUI for this. It will need to have many different views, and I'd like to perhaps have each view in a different clickable "tab", with one tab in the foreground at a given time and all the others hidden. I'm just not sure how to go about implementing all these tabs.
Would it be better to implement each tab as a different HTML layer and have buttons control which layer shows up on top? Would it be better instead to (re)generate HTML on the fly when the tab buttons are pressed?
Your advice is appreciated.
Would it be better to implement each tab as a different HTML layer and
have buttons control which layer shows up on top? Would it be better
instead to (re)generate HTML on the fly when the tab buttons are
pressed?
I would lean towards generating the content once and showing/hiding it on demand especially if the majority of work is done in the browser and there are no synchronous requests being made to a server when interacting with elements on the page.See footnote 1
When showing a tab's contents...
Assuming the content of each tab generates quickly, you can make your application more efficient by only creating the content for the tab when it is requested the first time. This way, if the tab is never accessed no resources are used.
When hiding a tab's contents...
When working with multimedia you may need to perform additional actions when you hide content. For example, a video won't stop playing just because you hide it. For your audio application you may need to stop playback of the current sequence.
There are many tab controls available such as jQuery UI tabs (free) and Sliding Tabs (licensed but inexpensive).
Other Scenarios
Tabs should be used for switching between major blocks of content like documents (e.g. browser tabs) and/or regularly used functionality (e.g. a personnel form which has a tab for contact information and another for employment history). Other scenarios may be better suited to a dialog (modal or non-modal).
Using the audio example, if you had a button labeled "tempo", I would expect it to open a small dialog window on top of my current view rather than taking me to a new tab. Roland's workstation keyboards use this paradigm. Major content replaces the current view, but settings/configuration windows usually popup atop the existing view.
jQuery UI also has a dialog plugin for this purpose. If you are JavaScript savvy and targeting newer browsers, it's not that hard to write your own simple dialog.
1 Generating content on the fly may still be perfectly acceptable with an interactive client-server relationship, but it introduces additional considerations, such as the synchronization of what is in the browser with the data model on the server (if any), the submission of unneeded form fields (increasing the size of the request), overall page size, etc.
I would suggest checking out the JQuery UI library. More specifically, the tabs functionality that it provides, http://jqueryui.com/demos/tabs/.
Simple rule of thumb for loading data into your tabs. Small and Simple, load it up front. Large and Complex, load it on demand. When in doubt, load it on demand.
if you're looking for a complex UI, I recommend you check out Dojo or Ext JS. They both provide you with a UI framework closer to Java's Swing framework.
However, if you're looking for tabs, and tabs only, jQuery UI is great.
If you're working on a canvas, do your GUI on your canvas. Seriously. Using divs in front of a canvas is just boring. I tried both, and I prefer using canvas.
The easiest way is to create a "button" class which will take an image and define a clickable zone on your canvas for this image (if you want pixel-detect there is a way which uses offscreen canvas and getpixel to check colors under the mouse and stuff, too long to explain here).
Then once you have your button or whatever gui class, you can put them on your canvas and you won't have to manage multiple html elements.
Also, some html elements in front of a canvas often have weird behaviours. That's why I prefer creating my gui directly on the canvas. Harder at the beginning but proper.
Of and please, make it possible to place multiple squares without having to reclick (just use a mouseDown variable)
ive seen the plugins etc to create a carousel of images etc, but what i want to achieve is having a content slider.
The content would be approx 500x400px, i was hoping to just give the content a div with unique id, and have it show for, say 6 seconds but if your mouse enters then for animation to hold.
I was thinkin along the lines of using:
$(#id).fadeOut(*time*);
Im on my mobile so its not the best example of code. Id be using set Interval for timeouts, however, do you think i should opt for a plugin? I already use many on my site, so would prefer just this page to use some simple jQuery.
This can be done in jQuery without too much work. You already know about setInterval() and the jQuery animation functions. All you'll need to do is implement mouseenter() and mouseleave() to properly pause and continue the animations. Perhaps a setInterval() every time mouseleave() and a clearInterval() every time mouseenter().
I agree with marcosfromero that plug-ins are great so you don't have to develop the whole thing again, but you stated that you have a lot of plug-ins already, so it could be better to write it yourself so that you gain more experience and have more control over it. I would say the choice to go with a plug-in depends on whether you find one that fits your needs and the size of it (even with minify, size does matter and one must consider blocking while JS files load).
If a plugin works for you, I don't see the point in developing the whole thing again.
Recall that most plugins offer a minified version so size wouldn't be a matter.
You can also use some automatic tool to minify code and join several JavaScript source files to prevent lots of requests.
If you still think the plugin is too big for your needs, consider inspiring yourself with the plugin's source code.