So, I am developing the first serious web site. I want to implement the following scenario, but I need guidance and advice. There is a button <input type="submit"> on my web page. When the user clicks it, I want it to open some HTML content which will be shown on top of all page content (and positioned centrally, but I don't care about that detail at the moment). It should act very similar to the way the photos are viewed on Facebook. When the user clicks the photo thumbnail, the photo opens on top of and across all page content.
Now, I've implemented this already, but I think that my approach is not recommendable, as it looks a bit clumsy to me, especially when I think about the maintenance of the site:
I added a <div> as the last element to the <body>; it is positioned absolutely and collapsed and serves as a container. When the button is clicked, that <div> is filled with the content and the state is changed from collapsed to visible.
I would very much appreciate if someone would like to share the standard methods used to achieve this effect and opinions . I am guessing that AJAX and jQuery should be used heavily for this (I used pure JavaScript in my design described previously). I am looking for some code samples and resources. Thank you so much.
What you are looking for is a modal dialog and not a pop-up. Pop-ups are new windows, while modals are HTML elements that block the page behind it for emphasis on forward content.
One way is to have a <div> appended to the body, usually to the end of the body and have it positioned absolute. That div will have top, bottom, left and right zero to stretch to fit the viewport. Within that div is another div that is also positioned absolute, relative to the parent, viewport-fitting div. Positioning is up to you, but usually it's centered using a formula:
center = (total length - modal length)/2
Content is up to you. You can have the content already loaded and hidden in the DOM which you can just display later. Or load the content via AJAX if you wish.
jQuery already has a modal plugin in the jQueryUI suite which you can use that packs a lot of methods to add and customize.
There are a lot of approaches out there. You could use jQuery UI (http://jqueryui.com). But I like the approach Twitter's Bootstrap is taking: http://twitter.github.com/bootstrap/javascript.html#modals
This is a very clean setup and you can load the content via AJAX with a little selfwritten function. You don't need to write everything yourself because there are plenty of plugins out there. And the bootstrap modal plugin is standalone so you can just use this one.
I like to use it and generate the content div with an AJAX request.
You can position: absolute; the popup box and set it where on the screen you want it. Then use z-index to put it over the content.
Here is a demo: http://jsfiddle.net/e6BEu/
I believe what you're looking for might be Lightbox-like? It could give you some ideas at the very least.
Edit: Or this one which supports text and such.
Related
Wondering how I can achieve the following effect on a website I'm building:
Div with 100vw width and 100vh height (we'll call this #container2) hides to the right of the home page (we'll call the home page #container1).
Moving mouse towards the right edge of the page causes #container2 to peek out.
If the user clicks on the visible portion of #container2, it slides all the way to the left, fully obscuring #container1.
The user is now on a new page with a corresponding URL, where they can scroll down and view more content.
I've got the first 3 steps more or less figured out. What I need help with is figuring out the best way to:
Handle the URL transition from site.com into site.com/newpage during the sliding animation
How to dynamically load the new page's content to the #container2 once the page transition happens, so the user can scroll down and see the new pages content if they click into it, but don't have to load the content if they choose to stay on the homepage.
Making it so if someone types or is linked directly to site.com/newpage, they will see the same thing that someone who started on the home page, clicked #container2, and watched the transition animation sees (but without showing a page transition).
I don't have any code snippets to show because I'm not really sure where to start. Any help or direction would be greatly appreciated. If possible, I'd like to use a vanilla javascript solution, as I've managed to make all the other features on the site run without JQuery. If JQuery is the only way to do this though, I'd still love to hear the solution.
There are a lot of ways you could do this. My intuition would be to have only one page that has different url fragments. Your question is fairly broad so my answer will also be broad.
One approach would be to use the target pseudo-class in css. All you need to do is make container2 a link that adds fragment to the end of the url that matches the classname of said container. You could have a some style for :hover that makes the container slide out and some settings for :target that brings the container to the center of the page. Container2 could have have a second section beneath the fold that contains the rest of the content for the page.
You could do something very similar with javascript by adding and removing classes from the various elements, but using the target pseudo class will help with your last bullet point. If a user goes directly to the link with the fragment, they will see the page with that container displayed.
I hope that gives you a place to start. Here is some info about the target pseudo-class.
So I wanted to do for my company's webpage, a thing where are links that belong to people, to make it when you click, you have a little menu where you can choose to send him a message or view his profile..
Before click:
After click:
I tryed to search for it, couldn't find anything of much valuable.. Maybe someone can help me out.
If you're looking for an easy way to do it, I recommend using jQuery (http://jquery.com/) with one of the popup plugins (http://plugins.jquery.com/tag/popup/). It's easy to install, and most of them have a working demo for you to test out before download.
Otherwise, coding a popup window with pure JS takes time.
This general method is to:
Create a hidden div
Position: absolute and play with the z-index so your div will be on top of all other elements.
Set the position to where you clicked, or somewhere around the area of the target.
Take into account the width and height of the window/screen. (i.e. No poing in showing a div that'll appear off screen).
Fill it in with information you need.
Make it appear.
The way I've done things like that in the past is to have a hidden absolute or fixed DIV layer that houses that message menu. Then have a click trigger make that div layer visible and positioned at the current mouse coordinates.
There should be a lot of articles on google telling you how to do the various stages of all those steps.
(Sorry in advance for the long post)
I'm trying to help an open source CMS project called N2 CMS modernize its drag & drop toolbox. I'm not sure what the best way to do this is, but I basically want to take a floating menu and "dock" it against the left side of a web page, such that the entire body of the page is shrunk in width. However, the functionality of this panel depends on the user's ability to drag something out of the panel and drop it onto the page.
This is what it looks like currently. There is an outer "management" page wrapper (the blue bar that is visible at the top) and an inner iframe which wraps the content page being edited. The drag & drop panel is a floating div that is rendered by including some code in the content page akin to #{ RenderToolbox(); } (it basically just writes the div + some inline CSS out to the page)
This is what I'd like it to look like, ideally. You can see how the toolbox now has the whole left column (so the page isn't obstructed) and the whole width of the page has shrunk.
Is it possible to accomplish this by injecting a <div> into the page? Maybe some kind of jquery that can re-parent the whole body inside of a <div> container? Is this even the best way of going about this sort of thing?
I guess something like this would be possible:
jQuery(function(){
$('body').wrapInner('<div class="wrap" />')
})
However, we are worried that it might be hard to make this look good on all layouts, e.g. layouts that use absolute positioning or html/body margins.
Therefore, we are turning to the larger Stack Overflow community for any advice and thoughts on this problem. Your guidance is much appreciated!
For a new project, I need to make an scroable lightbox like one that open after clicking any image on pinterest. Requirements are:
Lightbox must support HTML contents.
Contents might be more that monitor screen (Fixed width but no limit for height).
Lightbox should not have its independent scrollbars but must use browser's scrollbar like pinterest.
When light box is open, scrolling events should scroll only light box but not the background.
Only Pure Javascript and/or JQuery and/or HTML5/CSS3 solution is acceptable.
I went through quite a few lightbox JS and even JQuery plugins. It seems most support single screen lightbox.
Does some one know any available JS/JQuery plugin to achieve above requirements. If not, is there any tutorials which could help making custom plugin to achieve above requirements.
Thanks in advance,
Kapil.
What you are looking is possible only through HTML/CSS. Use of any Javascript library is just needed to make it easy and JS/JS Lib depends on personal taste.
In terms of main logic, in pintrest, scrolling feature is achieved through CSS property 'overflow-y: scroll'. For overlay (lightbox background), no width/height is defined but CSS properties (top:0;bottom:0;left:0;right:0;) will do the magic.
With above CSS properties (obviously few others for design), scroll feature for lightbox will appear. However you will notice two vertical scrollbars; one for body and other for lightbox. Here the trick is to make body scrollbar disappear. This can be done by giving CSS property ('overflow: hidden') to body when lightbox opens and remove it when it close, which can be done through JS/JS-lib easily. Thus we will have two scrollbars but displaying only one at a time gets the required effect.
Hope this helps.
Use fancybox (together with jQuery):
http://www.fancyapps.com/fancybox/
var options = {/* options*/};
$(".links").fancybox(options);
And if you have a link pointing to html content like this:
<a href='#inline' class='links'>Open fancybox</a>
it will open the fancybox with the content of #inline, e.g.:
<div id='inlines' style='display: none'>
My brilliant fancybox content.
</div>
It uses standard scrollbars and if you make it big enough, the other content cannot be scrolled.
I am having a hard time looking for a modal box that has a similar functionality as the one on Pinterest.
I am currently using simple-modal (jQuery) but the problems are the height is not dynamic (putting height: auto has some problems) and the modal box's position is fixed at the center. Hence, if the content is long, it will just have a scrollbar on its own (inside the modal box) instead of being scrollable using the browser's main scrollbar. When I use the main browser's scrollbar, it's scrolling the content behind the modal (which is the actual web page) which is not what I intend to happen.
Do you have any suggestions on what to use?
If you right click on a object and open it as a new tab/window, you will then see what Pinterest is overlaying on the main page.
That said, you might achieve the same effect by expanding a full viewport iframe with semi-transparent background to see the underlying page.
To be sure, I've not come across any lightbox clones similar to Pinterest's custom jQuery version hidden somewhere in it's .js file.
Status Update:
If your willing to create your own method, I've outlined a process seen in my SO Answer here