Desktop like Transition effect in HTML - javascript

Im wanting to create a navigation slide animation effect in my HTML web application. Im just wondering if it is possible.
Scenario is: Page 1 = Contacts Listing, Page 2 = Contact Details.
When the user selects a contact in the listing and clicks details I want the contact listing to slide off to the left and the Contact Details slides in from the right (like an iOS navigation app).
Is this possible? The Contact Listing and Details are two seperate web pages.
Any advice would be appreciated.
Thanks

My first thought is to use Jquery mobile transitions. That framework is really close to the UI of iOS
http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-transitions.html
But you have to be more clear what you mean by separate webpages.
You can use iframes,anchor tags, or even ajax calls if you are using dynamic content.
Personally I really prefer the Jquery's mobile approach.
Each "page" is wrapped in divs with page markups in a single html document, also it is possible to load additional html pages with different transition effects
Take a look at this example
http://jsfiddle.net/4Bgx7/2648/

Related

Changing the contents of HTML page depending on options on navbar

I'm making an administrator portal for a band-website. The design is as follows:
There is a side navigation bar(on the left of the page), with things to be done (such as verify reservation requests, answer fanmails, modify band info, upload photographs to the gallery etc.). Clicking on these options should populate a form in the empty space on the right. I don't want to create a separate page for every one of them.
I have checked hell lot of websides for side navs, but i see they all redirect to links to different pages. If anybody could suggest me what all i should explore.
What you are asking about is called 'Single Page Application'. You need to use JavaScript for this. Best way is using JavaScript MVC frameworks like Angular, Ember, React etc.

Single Page MVC Navigation

I am building a single page scrolling MVC website that needs to be able to move to different sections of the page when a link is clicked, preferably without refreshing the page, just scrolling to said location on click event. My question is whether this would be some JavaScript or whether I can do so with just some regular and some C#.
As Alexei Darmin said in a comment try to use #id's in divs and refer to those id's in your links, that's the tipical way to do it and you shouldn't have any problem unless you load the content dinamically, in that case you should implement a method in your angular control that force the async load to, at least, that point and move the user to it.
For single Page application, Angular Js is more efficient and you can achieve the performance also. And also if you use this script, your app is like Web Api,you can control your resolutions for different devices.
Angular Js is best , so you can use in your app. hope it will useful to you. Thanks.
just refer its useful to you :
Link1
Link2

Best approach to showing multiple html without reloading page

I have a "server" that serves up individual html pages for each associated item in the server. I've done a lot of looking around but I'm afraid I just don't know enough to ask the right question. How I'd like it to work is as follows:
Static Sidebar (boostrap simple-sidebar)
Ordered list of links to associated html docs
When the associated link is pressed to display that content in my main container field.
From what I've read some use iframe in the main html container and make the clicked link the active link.
Others use bootstrap modal, but modals no longer support remote content.
Any hints toward how to ask the right question would be great!

Where does WordPress store custom post types?

I've downloaded a theme on WordPress, installed it and added a few pages etc. I'm wanting to add a bit of functionality to it so i've decided to add a sticky menu using jQuery. I've installed the relevant scripts and got the plugin working.
The theme I downloaded off themeforest allows end users to create a 'section', Which is basically a custom content type that can break parts of the page up. So on my homepage I've broken up parts of the page in to sections, but I want to add the sticky to a particular section, so when you scroll down to it, the section remains in view at all times.
To use the sticky plugin i either need to apply a class to the parent div or wrap the parent div in tags. So my question is, is there any way to actually edit the code of a custom content type? I know that WordPress works on a template basis, so every time you create a page, post etc. it's just stored in the database. But surely there must be a way to edit the code of a particular page.
I hope i've made sense. For anyone wanting to know what i'm on about heres the link -
www.gogoblondie.com
The website is still in development, but it's the black section with that i want to stick as the user scrolls.
Arran
Based on your markup structure and needs :
jQuery('nav').closest('.section').sticky({topSpacing:0});
Will work.

Using Lightbox for the whole web site

I was wondering if using Lightbox all over the site would be a smart idea.
We are developing an eCommerce site and the idea is to keep the user on the main page all the time and show all the content (Product Page, About us etc) in a Lightbox way.
I understand that in order to use Lightbox you'll need Prototype/JavaScript which are widely supported at most browsers, I'm also aware that Ligthbox on mobile is not really fun but we are going to create a mobile version anyhow, A few Qs:
Do you think Lightbox might be heavy somehow? will it reduce site performance?
Do you think there are going to be big compability issues?
Any other thoughts why that not such a good idea? Again, the main idea is to keep the user at the main page while he can browse 'less important'.
Thanks in advance.
I think it's not a good idea to use lightbox massively to show relevant content for many reason
Accessibility: you cannot rely only on javascript to access the information so you need to put much more effort to develop with progressive enhancement. How if I navigate products through the browser history?
SEO: have you thought how to make your products retrievable by search engines? To make dynamic content indexable you will need again more extra effort. Consider also the possibility of being penalized for hidden contents on the page.
Usability: How would you deal with multiple devices and screen resolution? What if you show the image product in a lightbox and then your customer ask to also show the zoom images in a lightbox too? Will you open nested lightbox?
Social Network : "like" and "+1" are common functions on almost every modern e-commerce: but these actions can be performed only on a single URL, so if your products are not associated to a specific url (1 to 1 relation) you won't be able to share a specific item.
So, It's better to avoid all these complications
Use instead lightbox for giving alerts, show modal window and tell the user about the result of some server operation (e.g. Login/logout messages, alert the end of stock for an item during checkout...) and, in general, everywhere it's better not to completely change or break the navigation flow (e.g. registration, checkout,...), but definitely avoid to organize the entire site in lightboxes.
If you are developing an e-commerce site, then its not a good idea to use lightbox style ajax for loading all pages, because then search engines will not be able to index your products and display to people on search results.
In the past, I've used Fancybox over Lightbox mainly because I found it to be more flexible for my needs.
I too have created a online store using Fancybox with embedded popups to give the user more information on a popup.
What I would say is that to ensure page performance is not hindered, do not render a Fancybox popup through a hidden div on the page. If the hidden div contains a lot of images and content, this will cause some overhead.
The way I've used Fancybox is by loading an external page as its content source:
$("#product-info").fancybox({
titleShow : false,
width: 500,
height: 600,
autoDimensions: false,
overlayOpacity: 0.6,
href: 'product-info.aspx?ID=9' // External page source
});
I think just use a Fancybox/lightbox with caution. Only add basic product content. Keep the detailed for the product page itself. This will help Google searches (as other people have commented).
I agree with all of F.Calderan's points except maybe the last. I think there is a common use case in the "Quick View" seen on many clothing sites that could work for you. It provides a similar experience to the one you describe while not replacing all the benefits of having multiple pages.
See Old Navy for an example.

Categories

Resources