jQuery lightbox plugin that scrolls with the page - javascript

Some of the JavaScript lightbox effects that I've seen position the lightbox relative to the viewport, so that when you scroll the page you will still see the lightbox.
The other kind are the ones that are positioned relative to the page contents. If you scroll a page containing one of these, the lightbox moves with the rest of the page.
I don't know what this second type is called (or if there is even a term for this behaviour).
I've looked at FancyBox and SimpleModal, but as far as I know, these are positioned relative to the viewport only.
What jQuery plugin allows lightboxes that scroll with the page?

that would actually be up to css.
lightboxes are just divs that are positioned absolutely (they move with the page) or fixed (they are positioned relative to the browser window.
Basic Lightbox HTML
<div class="lightbox_wrapper">
<div class="lightbox">
the lightbox content loaded by ajax
</div>
</div>
Basic CSS for a scrolling lightbox
div.lightbox{ height:250px; width:250px; margin:auto; position:relative; }
div.lightbox_wrapper{ height:250px; width:100%; top:200px; left:0 position:absolute; }
Basic CSS for a viewport fixed lightbox
div.lightbox{ height:250px; width:250px; margin:auto; position:relative; }
div.lightbox_wrapper{ height:250px; width:100%; top:200px; left:0 position:fixed; }
Now I believe that most of the common lightboxes make you include their css, or they add it to the DOM on load. If they as you to include a css file then just look for the class that declares the properties of a lightbox and change the position method. otherwise you'll have to add the values to your own css and declare them as important like this.
CSS property marked as important
div.lightbox_wrapper{ height:250px; width:100%; top:200px; left:0 position:fixed !important; }
as for another kind of lightbox, I haven't seen one so you'll have to explain more in a comment below...

Robert Hurst is correct in theory, but if you like FancyBox, it supports both modes via configuration
If you look at bottom of the http://fancybox.net/howto page, it has an option
centerOnScroll If true, content is centered when user scrolls page
here is an example of how you would invoke it:
jQuery(document).ready(function(){
$('#a').fancybox({
centerOnScroll: false
});
});

edit your lightbox CSS as below
#lightbox {
position: fixed;
}
to center your lightbox popup to the window edit the script as below
top = ($window.height()- YOUR_LIGHT_BOX_HIGHT) / 2;
I'm used Lightbox v2.51 and worked well. the only issue is that yet the background is scrolling while the pop up is fixed and centred.

I appreciate that this is an old question, however, I have seen that the JS gurus at designmodo have implemented a version of this very well:
http://designmodo.com/startup/#component-grid
Take a look at the showLargeImage function within the all.js file.

Related

How can I make part of my page always be in the same position relative to the screen?

I'm making a website, and I have a nav bar and a main content section, the nav bar is at the top of the screen and the main content in near the bottom of the screen. However, if I change my screen height, the main content section stays in the same place, and it goes out of my browsers viewport/window and disappears, which is perfectly normal and expected. But what I want is for the main content section to always be at the same place at the bottom of the screen, no matter what the screen size/resolution/height is. How can I accomplish this?
My website is jeffarries.com and what I'm talking about is on my home page, if you need a visual.
I've used JavaScript, and I'm not very familiar with it.
I have no experience with jQuery, however I'm fine implementing a finished jQuery script.
Thanks for your Time and Energy!
Please let me know if any further information in needed.
UPDATE: Since this question appears to be unclear, take a visit to my website, you will see the text that says "here you can learn about me and my adventures", I want that text to appear at the bottom of the browser window when loaded, however, I want it to remain in usual flow, being on top of the "recent activity" box. Basically I want the margin on top of the text to change based on the browser window height, keeping the text at the bottom of the browser window.
You can use archive this via CSS3 VH property [ View Port Height ]. For that you have to make one container and add its height to 100vh.
Here is the live demo - https://jsfiddle.net/8dptzvye/
*{box-sizing:border-box; -webkit-box-sizing:border-box;}
.container{height:100vh}
.container span{position:absolute; width:100%; display:block; left:0; bottom:0; text-aling:center; padding:20px; background:black; color:#fff}
<div class="container">
<div class="cover">Extra Infomation </div>
<span>here you can learn about me and my adventures</span>
</div>
You may be looking for position: fixed
EDIT
If you want to change the margin based on the window size, you can use jquery's resize
$(window).resize(function () { /* change margin of element */ });

How to put this div in center and lock everything else with light blue background

I have a div,
<div id="messagebox" style="display: none; cursor: default">
<asp:DropDownList ID="ddl" runat="server" EnableViewState="true" AutoPostBack="true" OnSelectedIndexChanged="ddl_SelectedIndexChanged"/>
</div>
On click event, I am showing this div using,
$('#messagebox').show();
How can I put it in center of screen and also make background light dark, I want to dropdown list to trigger code behind so want to disable everything except this div,
I Edited your html and added it inside tabel. Now it's working fine and always
stay in center position even on window resizing. Check below demo
http://jsfiddle.net/NnckT/9/
Sounds like you want this div to function as a modal; you can add a <div> covering the entire background, e.g.:
<div id="cover" style="position:absolute; width:100%; height:100%; background-color: #fff; display:none; "></div>
...and then show it via the same .show() method:
$('#cover').show();
You may also need to play with the z-index property of both to get the layering correct. You could also explore jQuery's Dialog system, if using jQuery UI is in the realm of possibilities.
This is essentially a 'modal pop-up functionality', also called 'dark box' pop-up. You can achieve the 'modal pop-up' functionality either with Javascript, or with 'pure CSS'; the latter will work even in case of Javascript disabled. Here is a link to Modal Pop-Up demo implemented as pure CSS3/HTML5 solution (no any javascripting): http://webinfocentral.com/html5/ModalPopUp.htm
Essential part of it utilizes target attribute as shown in the listing below:
/*** pop-up div to cover entire area ***/
.divModalDialog {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
/*! important !*/
display:none;
/* last attribute set darkness on scale: 0...1.0 */
background-color:rgba(0,0,0,0.8);
text-align:center;
z-index:101;
}
/*** ! target attribute does the job ! ***/
.divModalDialog:target { display:block; }
Refer to my article (http://www.codeproject.com/Tips/170049/Pure-HTML-5-CSS-3-Modal-Dialog-Box-no-JavaScript) for the complete solution.
I would use som kind of modal plugin: Here is a couple, lots of examples out there. No reason to develop one of your own if no other requirements?
http://jquerybyexample.blogspot.com/2013/01/jquery-popup-window-tutorial-plugins.html
You can use jQuery BlockUI Plugin to block the screen with your desired div accessible as a popup in centre of the screen
$(document).ready(function() {
$('#someButton').click(function() {
$.blockUI({ message: $('#cover') });
});
});
See demos over here: http://www.malsup.com/jquery/block/#demos
try this ..
var windowWidth = $(window).width(); //retrieve current window width
var windowHeight = $(window).height();//retrieve current window height
$('#messagebox').css('top',(windowHeight/2)+"px");
$('#messagebox').css('left',(windowHeight /2)+"px");
$('#messagebox').show();

Issue with a js slider trying to make the current slides' div appear on top

For a js slider we're using a span "slider_link" to make the entire containing div into a clickable link. The issue is the first div seems to stay in place so the link never changes even when the slides do. We want the link for each slide to appear with that slide.
Demo of issue
HTML excerpt:
<div class="slider1">
<div class="slider-text slider-text1">
<span class="slider_link"></span>
<h1><span>Differentiate.</span> Shouldn't your recruitment firm stand out as much as you do.</h1>
<p>Human Resourcefulness is finding the right people, right now.</p>
</div>
</div>
CSS excerpt:
.slider_link {
float:left;
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
/* edit: added z-index */
z-index:inherit;
/* edit: fixes overlap error in IE7/8,
make sure you have an empty gif */
background-image: url('../images/empty.gif');
}
Put relative positioning in the wrapper div!

HTML, JavaScript: Frameless Windows

How to produce frameless window in HTML5, JavaScript, please?
I searched the web and found mostly links to use libraries. I wish to develop my own frameless window from scratch, without using a third party library.
By frameless window I mean a window having no frames, no status bar, no default minimize button, no default close button, no roll bars... It looks like a standalone image with painted close button.
Would be anybody so kind and provide me with ideas or code that will be accepted by most of the browsers?
EXAMPLE:
As few of you asked, what exactly I mean, I found a very nice example at Rapidshare. There is a large blue/orange button in the middle of the screen saying Upload. Just press it, please, and a frameless window appears.
The window represents exactly what I am trying to achieve. I have seen it many times, when displaying enlarged images, or prompting for login information, etc.. I like the animation associated with displaying that window too.
just for quicks to show the concept ..
create two divs directly under body
<div id="backmask"></div>
<div id="contentwindow"></div>
<!-- somewhere else in your page -->
click me
css for these ( roughly )
<style type="text/css">
#backmask {
display:block;
width:100%;
height:100%;
background-color:black;
position:absolute; top:0; left:0;
z-index:1000;
display:none;
opacity:0.7;
filter:alpha(opacity=70);
}
#contentwindow {
display:block;
width:800px;
height:600px;
background-color:white;
position:absolute; top:50px; left:50px;
z-index:1001;
display:none;
}
.bodywithwinOpenClass { overflow:hidden; width:100%; height:100%; }
</style>
and then ( im using jquery for quicks )
<script type="text/javascript">
$(".showinwindow").click( function(e) {
/* we don't want the visitor to leave, stop the normal action */
e.preventDefault();
/* get what to show */
var contenttoload = $(this).attr.("href");
/* set the body up */
$("body").addClass("bodywithwinOpenClass");
/* show wins and masker */
$("#backmask").css("display","block");
$("#contentwindow").css("display","block");
/* load the content */
$("#contentwindow").load(contenttoload);
});
</script>
this was just typed in directly and not ran, contains no candy ( for positioning etc ) hope it explains the concept behind all the pluggins etc you will find
the reverse is needed to "close" it
no frames
That's your decision to use (i)frames in your document or not
no scroll bars
With CSS you can suppress scroll bars, or build a layout which resizes exactly to the window size
no status bar, no minimize, no close, no roll bars...
That is possible with chrome-feature descriptors when creating a popup with window.open. Yet, you will not be able to create unclosable windows, hiding the close buttons also requires some privileges.
You seem to want a fullscreen application. Have you considered using the new fullscreen API?
http://www.codelifter.com/main/javascript/amazingframelesspopup1.html <-- pretty much covers all you can do - you can't launch a chromeless browser window from a web page.
What are you trying to achieve?
That's easy enough - it's not a window - it's actually a div on the page floating over the rest of the page content - there are plenty of ways to do it with a framework like jQuery.
Tutorial
Essentially all you need is a hidden positioned div with a high z-index and a bit of script to show/hide it:
<div id="popup" style="z-index:1000;display:none;position:absolute;top:100px;left:100px;">Some content</div>
<button onclick="document.getElementById('popup').style.display='block';">Open</button>
<button onclick="document.getElementById('popup').style.display='none';">Close</button>

Position a Div "Fixed" Vertically and "Absolute" Horizontally within a "Position:Relative" Container Div

I'm looking for a way I can create a div which will be fixed on the page vertically, so if the user scrolls down, the div stays at the same place on the page. But have it positioned absolutely horizontally, so if the users screen is narrower than my webpage, scrolling to the right or left will not cause the div to move with the screen and, in some cases, remain either half visible at the edge of the screen or off the page completely.
This div must be within a "Position:Relative" Div.
I'm fairly sure there is no way to assign different positions to the varying axis of a div but this is the best way to describe the effect which I am hoping to achieve.
I have this so far, which is basically just a Fixed Div within a Relative Div.
CSS
#container {
position:relative;
width:700px;
height:1000px;
top:50px;
left:50px;
background-color:yellow;
}
#blue-box{
position:fixed;
width:100px;
height:100px;
background-color:blue;
margin-top:20px;
margin-left:400px;
{
HTML
<div id="container">
<div id="blue-box"></div>
</div>
I have also created a jsFiddle to help demonstrate the problem.
This works fine for the vertical, but if you resize your web-browser so that it is narrower than the yellow box (container) and then scroll horizontally, the blue box will move with the page. I'm hoping to stop that from happening.
If there is no way to achieve this through CSS, I'm perfectly happy to use JavaScript as long as it works with all modern browsers and both IE7 and IE8. (Which is why I have added the JavaScript tag)
Can anyone help me out?
With JQuery, use the scrollLeft() property of the document! This would work
$(window).scroll(function(event) {
$("#blue-box").css("margin-left", 400-$(document).scrollLeft());
});
See also
http://jsfiddle.net/zhQkq/9/
Good luck!
Edit: If you want it to use your preset margin-left instead of a hard-coded "400", use
$(window).scroll(function(event) {
$("#blue-box").css("margin-left", $("#blue-box").css("margin-left")-$(document).scrollLeft());
});
Using vanilla javascript would be something like this:
var bb = document.getElementById('blue-box');
window.addEventListener('scroll',function(event){
bb.style.marginLeft = window.scrollX + 'px';
});
In modern browsers, as of 2020, you should try to use the CSS position:fixed; instead of JavaScript positioning because it is widely supported now.
Here's my solution (tested in Opera and Firefox): http://jsfiddle.net/cCH2Z/2
The trick is to specify right: 0px;, this will position the box 0px from the right border of the window.

Categories