Okay so I'm new to javascript but I can handle jquery quite well... but jquery on a small mobile web experience is realy heavy... some time it's even too mutch.
so I have this code that simply pop's up my menu bar and i wondered if there was any light way of geting this?
$(function() {
$('div.menu').hide();
$("img#menu").click(function () {
$("div#menu").toggle("slide", {direction: "right"}, 500);
});
});
Looking at your code, I'd point out the following (see comments):
$(function() {
// here you are searching by class name, that is going to eat CPU
$('div.menu').hide();
$("img#menu").click(function () {
// here you are doing a JavaScript animation, eating more of the CPU
$("div#menu").toggle("slide", {direction: "right"}, 500);
});
});
Using CSS instead of JavaScript piggy backs on native code rather than interpreted JavaScript.
A trick too is that many mobile devices are optomised for 3D CSS transitions (because 3D is used to perform flip and slide functions used by the phone's own UI). So, using 3D transitions will get you even more vroom from the engine.
A jsFiddle of your code using CSS is here:
http://jsfiddle.net/8dQMu/
A nice introduction to CSS transitions is here:
http://css3.bradshawenterprises.com/transitions/#how2use
You can simulate menu using pure CSS and without any JavaScript, just write a css selector for mouse over of item that you want to show the menu through it, but this way you can't have effects like slide. to create that kind of effects you should read their code in jQuery and implement them in JS.
other things can also handled using source code of jquery, but for selector (like 'div.menu') you can use Sizzle from Sizzlejs.com this library is very small(4k gzipped and minified) and its selector engine can do whatever jQuery can( actually jQuery internally use Sizzle )
Related
There are several websites where I see smooth slow scrolling. I have been looking for plugins for react or vue. I basically want to learn how to do it with vanilla Javascript. Also you can suggest plugins libraries and whatever you want. But I want to know how to do it in pure vanilla js. I want to learn to control scroll speed.
here are the websites:
https://nana-asia.com/
https://pelizzari.com/en
https://loerarchitecten.com/en/projects/republica-short-guy
you can tell me what these websites are using also tell me how to do it using pure js.
Please have a look at following demo, might be helpful.
https://css-tricks.com/snippets/jquery/smooth-scrolling/
There is also an opensource library with name 'Smooth-Scroll', pasting link below. They can be used as a starting point.
https://github.com/cferdinandi/smooth-scroll
Hope it helps.
One approach:
Catch the mousewheel and touch events and prevent their orignal behaviour.
Detect direction and speed of touch events or scroll amount for mousewheel events
Use the event values and map those to the desired scroll level
Apply a CSS translate to your page content
If you want the page to scroll smoothly like the first like here is a good plugin
https://jokertattoo.co.uk/js/SmoothScroll.js
You can mess around with these values till you get a result you want:
frameRate : 150, // [Hz]
animationTime : 2000, // [px]
stepSize : 150, // [px]
and here is a demo of it in action:
https://ui-unicorn.co.uk/my-cv/
I am using Sammy.JS for my routes and I can hide and show my pages with its callback, but the transition isn't good. What I wanted is to show the pages from right to left or when going back, it would be left to right.
var app = Sammy('body', function() {
this.get('#/start', function() {
$('.app_page').hide();
$('#start').show();
});
this.get('#/end', function() {
$('.app_page').hide();
$('#end').show();
});
});
Is there any frameworks or Plugins for this?
I assume that you are looking for something like the android transition between pages, in that case you must know that web is not totally ready for that and although it's possible, but you must consider many problems that happen when animation pages, such as the positioning(you must set the positioning as fixed and that might cause a lot of problem) or the performance of the animation for long and heavy pages.
there is not a mature javascript library that I've encountered and everybody just use their own code cause for different webpages, different css stylings are needed.
the best way to have a nice animation is to keep is simple and light, like a fading effect with a little bit of transform and scaling.
and if you really want to do the animation, it's better that you do it yourself, definitely use css animation(not jquery) and remove the animation after it's done(for performance).
and write a javascript function to check if animation is supported if not do it the old fashion way.
if you need more information let me know.
I did try the page transition in my own javascript framework and it works fine but only after I failed the first 100 time.
I recommended to you to use jquery animation to achieve your goal.
First, you can study css transition(for the page right to left effect.)
Second, you can use jquery animation with .show(), Example
You can combine these tricks to satisfied what you want.
So my webpage uses a lot of jquery everywhere, It is a single page javascript application and I pretty much create all the HTML by hand using jquery. I have a lot of divs in which I use draggable and resizable I also use jquery-ui-effects .hide and .show with slide animation to move some divs around.
When I start the application everything works flawlessly but after 10~15 min that the page has been open everything that uses jquery-ui methods gets so slow that it's unusable. When I try to resize one of my divs there is a major slow down when I first mousedown on the corner and after I let go of the click it takes some seconds for the page to become responsive again. Same is true for drag and drop. Calling $().draggable and $().resizable on the divs also takes a lot of time. Strangely the dragging and resizing itself is not slow, only starting/ending it. The longer the page has been open the slower it gets.
All other functionality in the page works just fine even after one hour of the page being open (I even have some basic canvas drawing in place, other jquery but not jquery-ui functionality also works ok). There is no aparent memory leak since the browser never goes over 150mb of memory used.
Some people might say that the problem are my start/stop resize/drag functions.
It's not that because I tried to remove them without any change in speed and also it would not explain the slow down on the animations.
CPU use goes to 100% (I'm using a single core system) when animating, it stays at 0% when not using jquery-ui functions. When profiling the animation function (after the page being open for more than 30 min) I see that there is a method named curCSS (jquery-1.8.1.js line 6672) using 95% of the CPU time. This same function only uses 4.5% if I execute the animation a few seconds after starting the application.
I'm using jquery-1.8.1 and jquery-ui 1.8.22.
I can't post all the code because I don't know what part of it is wrong and the whole code-base is huge. The animation is done this way:
//internal code that prevents updating data on the divs that are part of the animation
var hiding= true;
var showing= true;
containerToHide.$div.hide("slide", {direction: "left"}, 1000, function() {
hiding= false;
if (!showing) { //both animations ended
//internal code to allow update data on div after animation ends
}
});
containerToShow.$div.show("slide", {direction: "right"}, 1000, function() {
showing= false;
if (!hiding) {//both animations ended
//internal code to allow update data on div after animation ends
}
});
I don't think this is the problem though, the animations are pretty standard stuff.
Any hints on what to look for would be greatly appreciated.
After hours of debugging I finally found the culprit. I'm using dojo to create some graphs. Dojo uses SVG to create the graphs, I had some gradient effects on the graphs.
Every time the graph was updated it would clear the old rect tag from the svg tag but it did not clear the lineargradient tag from the defs tag. After a couple of minute I had thousands of lieargradient tags on the graphs which was causing the slowdown when those graphs needed to be re-rendered, since I was sliding the divs that the graphs were inside all the animation would slow down.
I'm trying to find a way to clear the unwanted tags. Preferably through a Dojo method, but if not I will just manually remove them myself.
Is there a way to automatically replace all or certain CSS :hover effects with a smooth hover from jQuery (or plain JavaScript or other library would also be OK)?
E.g. if for an element a :hover style is defined, to replace this without having to manually write the JavaScript for each?
I feel that this approach goes backward in terms of web progression. It's good practice to keep presentation separate from scripting. The same goes for markup: In a perfect world they should all be disparate in implementation.
Having said that, you may be able to accomplish what you need using CSS3 transitions, though they're not supported in most older browsers. See here: https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions?redirectlocale=en-US&redirectslug=CSS%2FCSS_transitions
Otherwise with jQuery:
$('element').hover(function () {
$(this).css({
// styles in JSON
});
});
I would like to imitate the animation happening when switching from one page to another using the menu on the left of this example webpage. This is one of several projects that I am working on to prove JavaScript and associated libraries are capable of producing animations equivalent to Flash.
I can get a simple hide animation going with this but it doesn't quite look the same as the Flash version. It's almost like they've used some easing effect for the slide out and in. I can't seem to figure out the CSS with which to animate it in JavaScript. Any ideas on the CSS I should be looking at or know of any plugins that have already accomplished this style?
http://www.wix.com/flash-templates/artistic-choice
http://www.alphadesigns.com.au/stackoverflow/index.html (updated with opacity option)
Try animating opacity. Note that this doesn't work in IE<9, you'll have to use a filter and a custom animation if IE6-8 must be supported (see http://www.quirksmode.org/css/opacity.html).