I am trying to program a website with multiple independent pages and I would like to use the slide transition effect between pages as it can be done with the jquery mobile Framework but WITHOUT using this one. My goal is to make a desktop web site and not a mobile app.
The fluidity and the speed of execution are my objectives. I saw that you can use the jQuery Easing plugin (version 1.3) but I'm not able to place this code for having a fluid transition effects between independent pages.
I intended to do this transition page effect with the TerrenceRyan.com solution but it doesn't work correctly.
I don't want to do a navigation with jquery anchor or hidden divs placed in a long one page, but many independent pages that arrive at their click sliding.
To give you an example of what I am trying to achieve, here are some links:
http://www.craigandkarl.com/
http://www.ultranoir.com/
If performance is key and you don't want to use jQuery maybe have a look at the new greensock javascript library
They have a test page which shows that it performs really well against other similar libraries:
speed test page
I have been using their AS2, AS3 engine for flash for many years now and if the JS version is nearly as good, then I'm sure it will be of use to you.
Related
I am building web-apps using Ratchet, replicating the look of native APPs.
Ratchet is doing a great job at replicating the look of iOS, but there is a feature which I really miss from iOS which is the ability to "move" an element to the next page by moving and zooming it.
Example: I have a list of articles. Upon clicking the thumbnail of the article, the thumbnail image gets bigger as the articles open, in a seamless transition.
The following gif. from Facebook "paper" illustrates well the effect I want to achieve:
http://d24njcbunk2gp2.cloudfront.net/assets/2014/02/Facebook-Paper-008.gif
My questions would be:
- Is this type of transition possible using only web-technologies?
- Is it possible, in general, to have one element moving in a continuous way from one page to another without any flickering effect?
- Would such effect be possible only with single-page applications? (say a single-page website built with angularJS)
- Would any framework / tool (PhoneGap?) be useful in achieving this result
Thanks so much.
Thomas
I'm building a responsive site and I have it set so that when the site is viewed on a mobile phone, I will hide certain code via Bootstrap's "hidden-phone" class. I am using this feature for a heavy slider that I don't to be shown on a mobile phone. But, does the code actually not load or does it load but is not visible? If it does load but does not become visible, I don't see what the point of that is...
Thank you.
Maybe you should think of replacing your slider with a different element instead of hiding it.
Also,this might help you:
how to use responsive features of bootstrap 2.0
I'm very new to web design and just made a simple one page website for my iOS app here. I now want to make it so that when this page is opened on an iPhone, the whole thing is zoomed out enough because right now the right half of the page doesnt show. From my understanding and research so far, I need to use media queries and create a separate CSS stylesheet for mobile. However I feel like for such a simple page there should be an easier solution with some plug-and-play code. Something consisting of a simple conditional-type statement checking if the user is on mobile, and if so, gives the new dimensions of the page. I don't really know anything except for the very basics of html, css, and javascript when it comes to web development, so simple explanations would be highly appreciated.
I think you have to go for http://www.jquerymobile.com it is very good framework for mobile web.
Instead of creating a mobile-specific page you might want to experiment with the viewport meta-tag. The tag isn't used by desktop browsers, but it scales the size of what you see on a mobile device's screen. You can also check out Apple's guidelines for more information.
I am designing a web page for mobile devices. I know jquery is awesome but I dont want to use it. I want to achieve smooth page transitions like this http://jquerymobile.com/demos/1.0a4.1/ but without using jquery. How can I achieve that? There are web service being called between page transtitions, hence there will be delay. I want it to be as smooth as possible.
Face it: You're going to have to use JavaScript, and it'll be very tedious without using some framework or other. To get smooth page transitions, you have two options:
1) Run the site as a single page. That is what is used in the site you link to. The whole thing has no page transitions; it's all one page with some click events used to animate the content and load it dynamically with AJAH.
2) Run a multi page site, but using local storage. You would have a small number of pages, and cache the resources needed for them. The JavaScript would run instantly when the page was loaded, and draw a nice load screen while the ordinary content was loaded and displayed by AJAX.
Personally, I wouldn't be too concerned about page transitions; it's just how websites work. Don't be put off by jQuery either, because by the time you've written all this JavaScript you will be wanting it. Even for mobile sites, the size of the library is just about acceptably small (you can use a CDN-cached copy).
I am still very much in the planning phase on this but here is the basic idea of what I want to do. I also have not done much/any web development in the past few years so I am a little out of the loop on what will/wont work.
I want to have a video playing essentially on a background layer with various widgets on top of it. The widgets will all be fairly simple HTML based text and maybe a few images. The widget also need to be movable (eg. I need to be able to drag and drop the widgets to move them). Finally I would really like it to work on a tablet (iPad or Android).
Am I going to need to use flash or silverlight for something like this? I would rather not because I know that makes it hard to get tablets working. I know HTML5 is supposed to be the new hotness but I don't really have a good idea of its capabilities.
Flash or Silverlight will rule out tablets (the iPad anyway), not just make them hard.
I'd start with jQueryUI it supports easily making elements moveable.