How to make lightbox scroll the lightbox and not the page - javascript

I am using the lightbox_me jquery plugin to open a lightbox when a user clicks on a product. Often the lightbox content stretches below the fold, and at the moment the right scrollbar moves the entire page when you scroll down.
I'd like it to work like the pinterest lightbox, whereby the right scrollbar only scrolls the lightbox, and the rest of the page stays fixed. I've seen a few posts on this, but nothing seems to work for me.
jQuery(function(){
$('.productBoxLink').click(function(e) {
var box = $(this).siblings(".productLightboxContent").html();
$('.lightBox').lightbox_me({
centered: false,
modalCSS: {top: '50px'},
onLoad: function() {
$('.productLightbox').html(box);
$('.productUpdateInner').show();
},
onClose: function() {
$('.productUpdateInner').hide();
}
});
return false;
});
});
.lightBox {
width: 450px;
background-color: #fff;
top: 400px;
position: fixed;
padding: 30px;
text-align: center;
display: none;
clear: both;
-moz-box-shadow: 0 0 5px #5C5C5C;
-webkit-box-shadow: 0 0 5px #5C5C5C;
box-shadow: 0 0 5px #5C5C5C;
border-radius: 5px;
}
I've read that this can be done with a few changes to my CSS. Does anyone know how I can achieve this with the code shown? Thanks!

Add this to .lightBox:
height:600px; /* You need to set a specific height - px or %*/
overflow-x:scroll; /* Tell the container to scroll if the content goes beyond bounds*/
Update
width:100%;
overflow-x:scroll;

If you want to let it size larger than the viewport, it's most likely because of your position: fixed line. Change it to position: absolute and you should be good.
Both fixed and absolute take the element out of the document flow, so there should be no net change in how it presents, but fixed fixes it to that specific position and forces it to not move ever.

I guess a general answer would be to make the background of the lighbox (i.e. the content before lightbox; the main content wrapper) position: fixed; and adjust its top value with javascript to a negative value corresponding to the position of user scroll in the moment of lightbox opening. Besides that, the lightbox would need to be position: absolute; with the same top / left values as if it was fixed.
When the user closes the lightbox, the previous values would need to be restored.

Add to html a class when lightbox is opening. For example:
.lightbox-active{overflow:hidden}
Also, your lightbox should have the next style:
.lightbox{overflow-x:hidden;overflow-y:scroll}
When you close the lightbox, you have remove the lightbox-active class from html.

Related

Set div to cover all window size, minus menu bar height, without scrollbars

I'm trying to build a slider plugin from scratch because I need it to have some specific behavior that is hard to find in other plugins. Anyway, one of the requirements is that it takes all the space available in the page, minus the menu bar height.
This is an example I set up: https://jsfiddle.net/5ujqw94n/
To set the size of the size I call this function:
adjustSizes: function(that) {
var w = document.body.parentNode.clientWidth;
var h = $(window).height() - $('header').height();
console.log('window inner w', $(window).innerWidth());
that.$elem.width(w);
that.$elem.height(h);
console.log('window inner w', $(window).innerWidth());
console.log('document client w', document.body.parentNode.clientWidth);
}
I also call the function when resizing the window. What happens is that when the page is loaded, it shows the scrollbars, but resizing the window makes them disappear.
In the function I put some console.log to track the window width and noticed that there's a 15px difference after the resizing is applied. I thought this could have had something to do with the scrollbars and searching arouns seems this is the case.
I'm not sure how to solve it. Putting overflow: hidden kind of works, but I was hoping for another approach because this feels like a workaround.
For example, in this other page everything seems to work as I want to and there's no overflow: hidden in the body.
Any suggestion?
I found a solution that's (kind of) working at least in chromium.
Remove borders from .page-container and modify .slider-container
.slider-container {
border: 0px solid yellow;
left: 0;
right: 0;
height: 100%;
max-width: 960px;
margin: auto;
overflow: hidden;
position: absolute;
}
Now pour some body { margin: 0; } on top of it and serve refreshed.
What baffles me however is why the borders are causing the horizontal scroll bars even with box-sizing: border-box; stated... hope it helps anyways.

Jquery - trying to create a image gallery that slides in to view upon clicking thumbnail

I've been trying to figure out how to create my own custom image gallery for my portfolio website to no avail.
I have a div that holds my thumbnails for my different images. The CSS code for this div is as follows:
.gallery {
width: 900px;
height: 600px;
background-color: white;
margin: 50px;
float: left;
box-shadow: 3px 3px 20px #000000;
position: relative;
I've created another div which is #project_display that is absolutely positioned -900px to the left of the gallery div.
This div is also set to width: 900px and height: 600px;
What I'm trying to do is take the anchored link of the thumbnails (which are the larger version images of the thumbnails) and dynamically Fill this outlying div with the larger image as it animates in. It's hard to explain. Below is the code, hopefully that makes it more clear:
$('.projects').bind('click', function(event){
$('#project_display').animate({
left:'0px'
});
event.preventDefault();
var this_project = $('.projects').each(function(){
$(this).children('a[href]');
})
$('#project_display').html('<img src="'+this_project+'"/>');
})
The anchor link to the large image is not being put into the outlying div.
Can someone tell me what I'm doing wrong? because I clearly am not doing something right.
$('.projects').bind('click', function(event){
var aHref= $(this).attr("href");
$('#project_display').html('<img src="'+aHref+'"/>');
$('#project_display').animate({
left:'0px'
});
});
Try the above one. If not works Please Provide HTML also, that will increase the understanding of code. So I will help you to fix the problem.

asp.net controls not in correct position

I have a sidebar div that I have given a fixed position so that as the page scrolls it is always visible. Just to make things interesting the sidebar's position is set by some javascript code to deal with lower screen resolutions and problems with it ending up in the wrong position.
That is all working nicely, however it appears that the controls on the div don't move when it gets repositioned so you can't click on them. They appear in the correct position they just don't actually do anything.
I'm sure I've read a solution for this on here but can't track it down.
Here is the CSS for the sidebar:
.mainsidebar
{
display:inline-block;
width:35.5%;
float:left;
padding: 0px 0px;
margin: 12px 8px 8px 8px;
min-height: 480px;
position: fixed;
font-size: 9pt;
left: 0px;
overflow:auto;
background-color: #4b6c9e;
border-radius: 8px 8px 8px 8px;
}
and the javascript that sets it's position:
var elementStyle1 = document.getElementById("mainSideBar");
elementStyle1.style.top = "23.2%";
I tried doing the same thing with the asp control but can't get any result.
Ok sorry - you can ignore this. I thought it was the problem I mentioned above as I was sure I had read a solution describing a similar situation.
It actually was the z-index of the controls that was the problem - once I set the div to have a lower z-index than the controls then I was able to click on them.
Lets assume the ID of the ASP.NET server control is "mainSideBar". Then your javascript code will be
var elementStyle1 = document.getElementById("<%=mainSideBar.ClientID%>");

Scrollbar Inside and On Top of the Div

I am wondering if it is possible to have a scrollbar inside and on top of the DIV as oppose to next to it? I am developing a chrome extension where I have a DIV that contains information on the far right side of the page. When the DIV exceeds the height of the page, a scrollbar appears next to this DIV as oppose to inside and on top of the DIV. In addition, I am wondering if it is possible to get the scrollbar to fade when the user does not hover over it?
I have modified the appearance of the scrollbar by using -webkit in the css. Here is a snippet of what I have done:
#sidebar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
#sidebar::-webkit-scrollbar-track-piece {
background-color: #f3f3f3;
-webkit-border-radius: 0px;
}
#sidebar::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #ccc;
-webkit-border-radius: 0px;
}
As far as having the "inner" scrollbar, you can make the illusion of this by wrapping the DIV with another DIV of equal height and with the desired permanent width. Then set the inner DIV to 100% width, and it will adjust as the scrollbar appears. As far as the fade, I don't believe the scrollbar is part of the DOM, so Javascript is out, but you may be able to use the animate property in CSS http://fvsch.com/code/transition-fade/test1.html

Floating menu bar using HTML/CSS?

wondered if any one knew of a way of creating a floating menu bar that sticks to a point on a page until the browser window gets far enough down the page and unsticks it and then the menu bar begins to scroll along with it. The effect I want is the exact same as this http://www.jtricks.com/javascript/navigation/floating.html javascript menu. However, I really want to do this with CSS. I am aware I can make the div Absolutely positioned and it will move down the page, I tried making one DIV relative positioned (parent div) and then another div inside this which was absolute positioned, but I could not get this to work. Does any one know how to make this work with CSS or does it need to be JS?
Thanks in advance.
Jon.
I believe using javascript is the only solution to get the effect you described. Here's a quick demo of a banner that starts in a absolute position and goes to fixed when the user scrolls.
<div style="height:1000px;width:500px;">
<div id="floatbar" style="background:gray;
width:200px;
height:40px;
position:absolute;
left:0;top:200px;">
</div>
</div>
$(window).scroll(function(){
if ($(window).scrollTop() >= 200)
{
$("#floatbar").css({position:'fixed',left:'0',top:'0'});
}
else
{
$("#floatbar").css({position:'absolute',left:'0',top:'200px'});
}
});
well if you do NOT need the animation, than just use
position: fixed;
in the css.
if you want it animated you need to use javascript.
for example in jquery:
$(window).scroll(function(){
$('#menu').css({
right: 0,
top: 0
})
})
Well you can't do it with absolute positioned div inside of a relative. Fixed position is basically an absolute positioned div, positioned relatively to the window. I'd say you definately need javascript here.
This should be rather easy with a fixed sidebar, and a floating content section. Try something like this...
#container {
width: 960px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#sidenav {
width: 300px;
position: fixed; /*--Fix the sidenav to stay in one spot--*/
float: left; /*--Keeps sidenav into place when Fixed positioning fails--*/
}
#content {
float: right; /*--Keeps content to the right side--*/
width: 620px;
padding: 0 20px 20px;
}
This is old post but CSS has changed a lot since then, we can do a floating menu with plain CSS. See sample code below. Credit to https://www.quackit.com/css/codes/css_floating_menu.cfm
main {
margin-bottom: 200%;
}
.floating-menu {
font-family: sans-serif;
background: yellowgreen;
padding: 5px;;
width: 130px;
z-index: 100;
position: fixed;
right: 0px;/* You can change float left/right */
}
.floating-menu a,
.floating-menu h3 {
font-size: 0.9em;
display: block;
margin: 0 0.5em;
color: white;
}
<!DOCTYPE html>
<title>Example</title>
<main>
<p>Scroll down and watch the menu remain fixed in the same position, as though it was floating.</p>
<nav class="floating-menu">
<h3>Floating Menu</h3>
CSS
HTML
Database
</nav>
</main>
I believe it needs to be JS. I can imagine it can be rather simple with jQuery and I really cannot think of any way to achieve this only with CSS. I'll try to think about it, but I doubt I'll find a solution.

Categories

Resources