I want to create a circular page transition as shown in the navigation of this site I know I need to use barba.js however I have no idea where to start I've spent all day looking for a tutorial on how to achieve this but I have found nothing. Can anyone please suggest where to start looking on how to create this I have never used javascript before and am quite new to HTML and css
EDIT: apologies I should've mentioned I already have my site done with separate pages now I would like to sort out the transitions between them.
to use a javascript library is a difficult thing if you have never seen javascript, but if you are familiar with coding in other languages you could start by scripting simple tests and see how it works, watch some short tutorial or see examples, and then look to specific documentation on how to use barba.js
Instead if you haven't programmed anything yet start from the basis, learn about the logic of programming (using tutorials for beginners and trying small projects yourself), at some point you'll be ready to create using a library :)
I would recommend getting a solid fundamental understanding of HTML, CSS, and JavaScript before implementing a JavaScript library like barba.js. barbra.js is implemented in JavaScript so it will be confusing to try to understand where the library ends and pure Javascript starts. https://www.w3schools.com/js/default.asp is a great resource to get a solid fundemental in js. Here is the link to a barba.js tutorial if you still want to go ahead with it https://barba.js.org/docs/getstarted/basic-transition/
Perhaps make a new page, then transition from there. I haven't been doing HTML for a bit, so I've lost the code. Perhaps, use from transfering one page to another.
Related
Are Scrollr and WOW just plain javascript? If so, why does everyone refer to it as if it's its own thing?
I've looked at a few tutorials, but at this point, it's all over my head, but I'm getting there. I've just started learning basic javascript (learning about arrays right now), and in my javascript handbook, it doesn't mention anything about Scrollr.
Welcome to the world of javascript. Skrollr is a javascript library for doing scrolling animations. A javascript book probably wouldn't mention Skrollr if it's talking about pure javascript. Skrollr is a tool that you can use to make your webpages have some fancy animations when you scroll on the page. There a literally hundreds, if not thousands of these kinds of libraries all over the web. However, some are known more than others. Similar libraries using jQuery can do the same things. Who knows, once you get the hang of javascript, maybe you'll be making your own.
They are both JavaScript libraries. Which means that yes, it's made of plain JavaScript. In the same way you make a .js file of function declarations and call them in another .js file. They are a bit more complicated than that, but the idea is the same.
We are developing an API, and that API injects HTML code in the user's code. The main idea is that the user has to define a couple of divs and the API just inject the HTML code within them. The idea is simple and it's already developed. It works nice.
The problem is that we are using jQuery and Bootstrap in that HTML code, and we are a little lost in how to treat those frameworks regarding the user's code. Should we inject them inside of his ? We think that could cause some kind of trouble if the user is already using them in his own code... or are we wrong?
Anyway, in my opinion, i consider this solution inelegant and even a little bit crappy. Any smarter way to accomplish it?
Thanks!
If you have to have jquery and bootstrap, the only acceptable solution for an embeddable widget would be an iframe.
You could write a loader script which places the iframe with your main content onto the page.
I've written a quite extensive article about how to build embeddable widgets and their best practices on my blog here:
http://codeutopia.net/blog/2012/05/26/best-practices-for-building-embeddable-widgets/
(based on a Stack Overflow answer I gave some time ago, but couldn't find the link to it)
First post, but I've been lurking around this site for a long while now, and I know how good some of you guys are at this development game.
So, I'm trying to figure out how to develop a gallery/mainnav widget for the top of a landing page, but the page cannot include the jQuery library or any flash objects. I haven't explicitly checked yet, but I don't think mootools will work either. Having said that, I am by far most familiar with building stuff like this using jQuery than any other libraries out there right now, so having had that taken away is proving a difficult obstacle for me.
I'm looking for ideas/suggestions/direction on possibly trying to build something like this using a canvas element (my canvas skills are not that well developed yet, fyi) or if a pure-javascript solution is available somewhere... or really any input that I may not have considered yet.
Thanks guys.
You're probably conflicting with another library, in which case you can use jQuery in .noConflict() mode.
Developing something so UI-heavy without jQuery or some other framework is really not advisable. It will likely take much longer to build, with much longer and less maintainable code that works across fewer browsers.
i want to develop a one page application where it should utilize AJAX to a full extent like the one used in Gmail and Facebook. i am aware of the light JS Framework called Sammy.js which does the work. the only thing why i don't want to use this is it is built on top of jQuery. i know jQuery is awesome and nice and i should start using it right away. but FYI i tend to learn things from scratch and later on i would want to adopt for Frameworks.
here is the link to what exactly i want to do..
http://nettuts.s3.amazonaws.com/763_sammyJSIntro/demo/index.html#/compose
is there any alternative so that i can achieve the same using plain Javascript?
thank you...
Since you'll be using jQuery, have a look at this plugin:
http://benalman.com/projects/jquery-bbq-plugin/
Edit: Oops, misread your question. I thought you do want jQuery.. but you don't.
Well.. still use it (or another javascript library if you don't like jQuery). First of all, you'll most likely not be aware of all browser-specific issues. Then your code will be much less readable if you use classic plain JavaScript for everything. If someone else will be working with your code he'll also have a hard time to get into it unless you document it really well.
So as you see, there's no good reason not to use jQuery in your app. If you want it for learning purposes ok - but then don't do that in a real application but with some small testcases.
using plain JavaScript to accomplish what you're looking to do is nice and educational and all, but using jQuery to accomplish it is soooo much quicker and effective. You could do XmlHttpRequests with callbacks etc., or you could $.ajax.
My advice, start learning jQuery now and start simple with a basic ajax request. You'll pick it up very quickly!
You can do it without JQuery, what you'll learn though is the million and one differences between each browser's javascript engine, and you'll have to account for all of them. Personally I think there's better things you could be learning, but up to you. If you want to, check out document.getElementById and go from there.
The question is: Is it bad to learn how to do special effects, table sorting, etc, using jQuery instead of learning the bits of code that bring that alive with pure javascript?
I have previously addressed a similar problem in a question, but I missed adding this extra inquiry!
Yes you can. Doing it in JQuery isn't bad. Everyone uses some sort of Javascript library. I love JQuery. Your odds of making things that work in all browsers go up quite a bit, you get the UI done quicker, etc.
Though having a bit of Javascript knowledge is good, because when things go wrong you want to be able to debug the problem.
JQuery.com has lots of good tutorials.
You really should use jQuery; it will allow you to spend more time adding features instead of trying to make your code work in every browser (Note that even jQuery is not a silver bullet; you'll still have some cross-browser headaches in any non-trivial web app, especially if you need to support IE6).
There's no point in turning your back on new tools and libraries just to "stay close to the metal".
If you're afraid of lowering your value in your boss' eyes, look at it a different way. Would you prefer to hire a programmer who spends all of his time working around browser bugs, or a programmer who uses jQuery and finishes his projects faster because of it? Remember that managers are trying to ship products and make money, not simply hire elite programmers.
Personally I was recommended to learn JS before learning jQuery. But started off with jQuery, and can make pretty much with it without to much JS experience. What you do need to know of JS you can just google it and learn it when needed ;)
jQuery is fantastic for us that doesn't take the time to learn everything about JS
Personally, until the beginning of this year, I used to limit my use of javascript to only helping aid the user with things like web forms.
However, after playing around with jQuery for no more than a few days, I realised how much easier it made achieving javascript effects and functionality. Now I pretty much use jQuery on most web pages, a lot of the time, just to add nicer UI effects.
A background knowledge of raw javascript will never go amiss and you will almost certainly still have to mix it in with your jQuery scripts, but when you run into troubles, nearly every problem I've had, had a solution already posted on Stack Overflow or just on Google.
Not a very technical answer, but as an intermediate programmer, and javascript newbie I've had no problems learning to work with jQuery. The documentation and community are very helpful.
I think you should set yourself a goal of knowing javascript well enough to be able to author a plugin if you need it in your favorite framework. While using a framework is almost always the right way to go, there will be times when you can't find a plugin that does exactly what you need. At that point you need to know javascript well enough to be able to adapt a plugin to your needs or write your own.