I'm trying to create a login system like http://us.battle.net/en/. The page is fully functional, then when you click on the "Log In" link, the page becomes dark and you can no longer interact with any of the images or links from the original page. A square box comes up, which you can interact with to login to the site, put you can still see everything from the original page.
I've been searching and searching and I can't find what I'm looking for. I just need some ideas to get me pointed in the right direction and I can go from there.
Thanks everyone!
Maybe something like jQuery UI Dialog could help you. Checkout the modal example.
Have a look into Colorbox - it's a jQuery plugin, very easy to use, and does exactly what you want.
The effect of graying out the page and showing a popup dialogue box is called a "modal" dialogue box.
I believe the functionality you are referring to is called a lightbox.
There are dozens of jQuery lightbox plugins around, a quick Google search suffices; FancyBox, for example, is a pretty nice one.
Related
I would love to know what is used to have an effect such as this website template: http://www.templatemonster.com/demo/43491.html
I would like to have a single menu and background while once I click on the menu link it triggers the new page to slide into view without being redirected to a new page causing the browser to reload the new page, etc. Something smooth and nice.
I'm not looking for code (other than the functions to use (if JQuery)) and what effects should I be looking for to make this possible?
Just point me in the right direction :)
There are many ways to achieve what you wish, but this is my suggestion on how to go about it conceptually:
Animate the content by animating the position of your content container, that should give a nice smooth feeling to your page. The jQuery documentation should be pretty clear on that. Remember that you want to intercept the normal behaviour of the anchor, so either preventDefault() or return false, or both.
Get your content using an AJAX request. You can use the href attribute that you put in your link in order to fetch the correct content. Then bind an event to that <a> element with a the .on() method. The reason why you leave the href is to have a graceful fallback: should something go wrong with the code, should the user have javascript disabled, or simply navigating on a non-javascript friendly browser, he will still be able to access your content.
These are the two essential steps to achieve what you are looking for. If you want to fine tune your site a bit more, try to think about those things as well:
Make your website look more responsive by the cautious use of loading .gifs.
Don't double serve content: check whether the user is clicking to the link of the currently displaying page and don't fetch the content again; besides looking silly to your user, it will make a useless server load (probably insignificant, but still). Always consider your user, though! Tell him that that link is disabled by clever use of UI.
Manipulate browser history: using the history API. Your site will be more accessible, more user-friendly, more SEO-friendly, and will also look much more advanced.
now there can be tons of ways .. the easy way (but it's not much of a maintainable way )
is to all your website content in one page and wrap every section that you consider a page in a div like so
<div class="home-page">content of home page goes here </div>
<div class="contact-us-page">content of contact us page goes here </div>
etc...
and with jquery hide them all except the home page
$(function(){
$('.contact-us-page').hide();
$('.other-page').hide();
})
and when the user clicks on the link to other page let's say the contact us page you will hide the parent and slide the contact us page instead
$('.contact-us-link').click(function(){
$('.home-page').hide(1000);
$('.contact-us-page').show(1000);
})
and thats it :)
the down fall of this is that there will be no routing ..
so to solve this you have to use something like backbone.js
which takes a while to know it well ...
this is just a quick idea on how this works ..
I'm trying to accomplish something that might be relatively simple, but I don't know what I would call it (if there is a specific name for it), hence my searches have proved useless.
What I'm trying to accomplish is simple: I have a page built off off the Masonry jquery plugin (similar to http://designshack.net/tutorialexamples/masonry/demos/masonry.html). All I want to do is that when I click on a specific picture, it creates a "box" that fills up part of the screen and can contain another webpage (to describe the picture) while fading out most of the background. Then when I click outside of the box, it returns to all of my pictures.
I've seen this before, as I'm sure everybody else has, but for the life of me I cannot remember an example to look at or how best to do this. I don't have too much experience with javascript or jquery (which is why I'm asking this), but any help to point me in the right direction, whether it is using javascript or html/css, would be great.
If anybody does get the gist of what I'm describing and can explain it better, then you're more than welcome to edit..
What you need are modal windows.
I know the twitter bootstrap has built a pretty good framework for this:
http://getbootstrap.com/javascript/#modals
If you aren't using the bootstrap directly you might be able to pick out what you need.
I'm currently trying to look at Twitter's code to see how they created their popup login window within the same page. I wanted to know if anyone knew how to create something like this or could point me in different directions? I've already tried using Google but with no real luck.
Here's a tutorial: http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/ Hope this helps you!
What you want is commonly referred to as a Lightbox. There are many examples revealed through search engines.
I want to have 4 boxes that can be clicked and pop out with text and can scroll.
Similar to the projects page here: http://www.visionslighting.com
However i would like it to be in html/javascript or similar instead of flash.
i have found this: http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm
which is exactly what i want only with images.
any help is greatly appreciated.
This is easily accomplished with the jquery-ui. They have a function called dialog that you can tell to be a modal(the box that floats on the screen).
I think you're looking for a javascript lightbox. Check out this one: http://defunkt.io/facebox/
You can find even more here: http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts
I want to create an in-window pop up that darkens the entire window with a semi-transparent black overlay and there is a popup in the middle that warns the user about something. I have seen something like this on att web site
http://www.att.com/wireless/iphone/?wtSlotClick=1-003G93!CIWM01-3-1&rel=nofollow
and if you click on the order now button it will give a pop up and darkens the entire window. I know very little of javascript (close to 0) and I am currently using Rails to find the answer. Does anyone know a quick way for me to achieving this effect?
If you are using prototype and don't want to roll your own, check out the excellent http://www.nickstakenburg.com/projects/lightview/. note that it will cost you 50 bucks, but its probably the nicest implementation I have seen
If you don't mind including jquery, I usually use http://defunkt.github.com/facebox/ when I need similar functionality.
http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
That are called lightboxes, and can be done using only CSS (but if you want it activated onclick then javascript is required).