fine tuning my lightbox - javascript

So I have a simple lightbox with code like this:
jquery code:
var $overlay =$('<div class="overlay"></div>');
$('body').append($overlay);
$('img').click(function(){
$overlay.show();
});
css:
.overlay {
width: 100%;
height:100%;
background:grey;
display:none;
position: absolute;
top:0;
}
This is obviously very simple I haven't wrote much code except the overlay that will appear when the image is clicked and triggers the lightbox.
Here are my questions:
My webpage is longer than the screen, what code could I use to stop the screen scrolling when my lightbox is triggered.
Is it possible to set the lightbox $overlay to only fill the screen in view. So only take up the part of the webpage in the current screen view. I have images spread out over webpages and I when are a lightbox is triggered I would like it to fill only that part of the screen.

Well, I decided to post an answer hopefully it will help you.
First things first, your JavaScript. From the JS you posted, it looks like you are using a different .overlay for each image. Not needed.
Simply make one overlay like so:
<div class="overlay"><img src="#" width="500"/></div>
Then, set the images src when you click on an image on your webpage:
$('img').click(function(){
var src = $(this).attr('src');//Gets the image you clicked on src
$('.overlay').fadeIn();//Fades in the overlay
$('.overlay img').attr('src',src).css('margin-top',($(window).height() - $('.overlay img').height()-20)/2);//Sets the overlay image to the correct source, and centers the image. -20 is for the border
});
$('.overlay').click(function(){
$(this).fadeOut();// And fades out the overlay on click
});
Simple and easy. Now to your actual question.
How you are going to achieve what you want is with CSS.
First, set the body and html's height and width to 100%, and remove the margin. This stops overlay from making scroll bars:
body, html{
width:100%;
height:100%;
margin:auto;
}
Then, to make overlay appear over the image you clicked, change position:absolute; to position:fixed;:
.overlay {
width: 100%;
height:100%;
background:grey;
display:none;
position: fixed;
top:0;
text-align:center;
cursor:pointer;
}
Add a little more CSS to make it look pretty:
.overlay img{
border-radius:5px;
border:10px solid white;
box-shadow: 0 0 5px black;
}
And Bang!
JSFiddle Demo
Make sure you check out the coding in this JSFiddle

Related

Putting a caption and an image inside of a centered div that slides down from the top of the screen

I want to make a gallery in HTML/CSS/jQuery. I have a bunch of thumbnails that all represent different images of varying sizes and orientations. When the thumbnail is clicked, I want the image to slide down from the top of the screen. The image should be as large as possible but still fitting in the window, taking into account margins and the like.
I have gotten all this to work properly in the past. However, now I want to add a caption below the image.
My solution was this. I have a div container that is fixed and is positioned with top:-96% and bottom:100% When a thumbnail is clicked, jQuery moves that to top:2% and bottom:2%
Previously I had a border that surrounded the image. Now I want to make that border actually part of a div instead, so that the border can go around the caption which should be below the image and centered, and said image.
Nothing I am doing is working, however. The image will not fit into the viewport, and will always be its max size no matter what I change the percent to.
I'm completely lost, I have no idea how to make this all work out. If you need code, I can give it to you, but as I said, it doesn't work. Thank you all in advance.
EDIT: Added code
HTML:
<div id=imgHoverCont>
<div id=imgBg>
<img id=imgHover src="" alt="">
<div id=commentHover></div>
</div>
</div>
CSS:
#imgHoverCont{
text-align:center;
position:fixed;
left:2%;
right:2%;
top:-96%;
bottom:100%;
}
#imgHover{
display:block;
height:100%;
width:auto;
}
#imgBg{
position: relative;
display: inline-block;
max-width:100%;
max-height:100%;
}
#commentHover{
position:absolute;
left:0;
bottom:0;
width:100%;
color:black;
background-color:white;
}
JS: Thumbnails are stored in an array of objects with their ID and their source.
for(let i in thumbnails){
$(thumbnails[i].id).on("click",function(livingHell){
return function(){
$("#imgHover").attr("src",thumbnails[livingHell].src)
$("#imgHoverCont").css("display","block");
$("#commentHover").html(thumbnails[livingHell].comment);
$("#imgHoverCont").animate({bottom:"2%",top:"2%"},1000);
}
}(i));
};
I've made some changes to your CSS
if I understood your question it works like expected, look here: https://jsfiddle.net/cratgjks/
#imgHoverCont{
text-align:center;
position:fixed;
left:2%;
right:2%;
top:-96%;
bottom:100%;
width:100%; /*new rule*/
}
#imgHover{
display:block;
height:100%;
width:100%;/*changed rule*/
}
#imgBg{
position: relative;
display: inline-block;
max-width:100%;/*changed rule*/
max-height:100%;
width:1500px
}
#commentHover{
position:absolute;
left:0;
bottom:0;
width:100%;
color:black;
background-color:white;
}

Keep the ads div fully in view

I've got to (unfortunately) put our ads onto our website. They're positioned down the right hand side of the page, outside of the content area.
When the screen width gets smaller, because it's positioned outside of the content they get cut off by the browser. I can offset everything by putting left: -someValuepx, which moves everything over.
Rather than having to put in lots and lots of media queries to keep slightly moving it over, is this something I can do in Javascript, to automatically keep them in the view? Ideally I'd like a function that I can run on page load, and then on the window resize event.
Here's a jsfiddle of the CSS at the moment. Edit the #container left attr to move the content.
And here's the code (as I believe it's required if you link to jsfiddle?)
HTML
<div id="container">
<div id="ads">
</div>
<div id="content">
</div>
</div>
CSS
#container {
width:500px;
min-height:100px;
background-color: firebrick;
margin:0px auto;
position:relative;
left:-50px;
}
#ads {
background-color:red;
position:absolute;
top:0;
right:-170px;
width:160px;
min-height:100px;
}
#content {
width:100%;
background-color:green;
min-height:100px;
}
I have a pure css solution, if you change your div structure to the following:
<div id="container">
<div class="padding">
<div id="ads"></div>
<div id="content"></div>
</div>
</div>
You are able to use the following styles:
#container {
width:670px;
min-height:100px;
margin:0px auto;
position:relative;
}
#container > .padding {
margin-right:170px;
background-color: firebrick;
}
#ads {
background-color:red;
position:absolute;
top:0;
right:0;
width:160px;
min-height:100px;
}
#content {
width:100%;
background-color:green;
min-height:100px;
}
#media (max-width:670px) /*this is the width of the container*/
{
#container {float:right;}
}
And this will keep your adds in view when the viewport is resized
Example
What you can do, is to create a function in JS that gets executed one time when the document is loaded and also when you resize.
This function should add a class (ie: hidden) to the the ads. you want to hide, and with CSS, give the right properties. Just addClass and removeClass, depending on the situation, should make the trick.
Example:
#ads { // normal values that makes the content of the ads visible }
#ads .hide  { // offset values to hide the ads }
This way, you keep behavior & presentation separated.
Hope it helps !
In your html markup, you have both content and the ads inside a container. The problem is that the content takes all space of the container, and the ads are positioned outside of it.
Just make the container wide enaugh to hold both content and the ads, then position them appropriately. Make one break point on the width of content+ads (660px), where you would position the ads below the content, and give the container its current width (500px).

jquery - inserting a header section on an existing webpage

I am trying to inject a banner div
<div id='banner'></div>
on top of an existing webpage in such a manner so that when a person scrolls the webpage the banner remains on top. Also the webpage should be pushed down by the banner so that every part of the page remains accessible.
Here is my CSS:
#banner {
position:fixed;
display:block;
top:0px;
background-color:#FFFFFF;
width:100%; height:250px;
border:2px solid;
}
Here is my jquery:
$("body").prepend("<div id='banner'></div>");
I tried using jquery to find all divs that were fixed and changing them to relative before executing the above line but still the banner does not work. The error is shown in the following picture https://drive.google.com/file/d/0B0sCu8aj8zu2akhtcEdtajJJZEU/edit?usp=sharing
Please Help.
And I am not looking for ad revenue here this is just a practice task.
Here is a jsFiddle I have created. The banner div is at the top of the page.
It stays at the top while scrolling.
The HTML:
<div class="page">
</div>
The css:
.oldBody
{
width:100%;
height: 3000px;
background-color: navy;
margin-top:250px;
}
#banner
{
position:fixed;
top:0px;
background-color:#FFFFFF;
width:100%;
height:250px;
border:2px solid;
z-index:10000;
}
The JS:
$("body").wrapAll("<div class='oldBody'></div>");
$("body").prepend("<div id='banner'></div>");
Please maintain z-index of banner div.Z-index should be grater then other div on that page.
#banner {
position:fixed;
display:block;
top:0px;
background-color:#FFFFFF;
width:100%; height:250px;
border:2px solid;
z-index : 99999
}
i'd just like to present a different way to create the element:
var $banner = $('<div/>', { 'id' : 'banner' });
$('body').prepend($banner);
this technique for creating elements with jquery comes in handy when you have several different element to create. as a note, you can also create the element like so:
var $banner = $('<div/>').attr('id', 'banner');
I think the best way is first keep your ad on top in relative position when a person scroll page your function check the page-scroll .scrollTop() and then add fixed position on banner ad container just like freeze header, if you need further help in this regard let me know, I will provide you code. thanks I hope this technique will help you

Div to fill remaing vertical space

I have a complex HTML application, so unfortunately cannot really provide a code sample. We are trying to get the div (highlighted in red) to fill the remaining vertical space (see image).
The application consists of a header (in black), a sidebar on the left which can be dismissed or resized (note: the horizontal components resize correctly). To the right of the sidebar is another div (mainDiv). mainDiv contains a div at the top for the controls, and a div underneath it for the table of data (highlighted in red).
This table can potentially contain lots of data, so it needs its own scrollbar if the data doesn't fit on the screen.
We just want the table to fill all of the available horizontal and vertical space. We just can't seem to make it work.
We have created a jsfiddle example to demonstrate our layout as best we can. This can be seen here. We just want this div (in jsfiddle the div is called "tablewrap") to take up all of the remaining space.
Code (from jsfiddle) is as follows:
html
<div class="header">Header</div>
<div class="sidebar">This is the sidebar</div>
<div class="tablewrapper">
<div class="tableheader-controls-etc"></div>
<div class="tablewrap">table</div>
</div>
css
.header { height: 50px; background:black; color:white; }
.sidebar { height:100%; position:fixed; width 200px; background:gray; color:white; }
.tablewrapper{ float:right; width:75%; border:1px solid; margin-top:30px; margin-right:30px;}
.tableheader-controls-etc { height:150px; background:blue; color:white; }
.tablewrap { height: 200px; border: 2px solid red; width:100%; overflow:auto;}
If anyone can provide a solution that would be great. We would prefer CSS but can cope with Javascript.
Thanks,
Phil
The trick is to set position: absolute, then adjust the top, bottom, left and right properties as needed. See fiddle and explanation.
.tablewrap {
position: absolute;
top: 240px;
bottom: 0;
left: 150px;
right: 40px;
height: auto;
width: auto;
...
}
You can try this:
.tablewrap { height: 200px; border: 2px solid red; width:100%; overflow:auto; min-height:300px}
(Set the min-height as you want)
Well, it's time to say what you probably don't want to hear hehe: you can't do this with CSS.
You have to use javascript in order to find out two things:
Viewport height
Controls div height
Once you know those two heights, you can set your table height to:
finalHeight = viewport - (controls+header+footer)
If header and footer have also dynamic heights, use javascript to calculate them.
You will also need to recalculate this height on window resize. And of course your layout won't work if javascript is disabled.

Light box background color should cover the whole screen using CSS

This is my page URL
http://sample.com/mytest.php
In this page, if we click a Sign In button it will display a popup screen with black background. But if we zoom out the page, then it reduces the size of a background color. But i want to cover background the whole screen if we zoom out. I used the code below in my page.
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 2000%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
But in a test page the below code is used for cover the whole background. It works fine.
<style type="text/css">
/*give the body height:100% so that its child
elements can have percentage heights*/
body{ height:100% }
/*this is what we want the div to look like*/
div.fullscreen{
display:block;
/*set the div in the top-left corner of the screen*/
position:absolute;
top:0;
left:0;
background-color: black;
/*set the width and height to 100% of the screen*/
width:100%;
height:100%;
color: white;
}
</style>
<div class="fullscreen">
<p>Here is my div content!!</p>
</div>
How can i do the same for my login page background i don't know. Anyone can please help me to solve this problem.
try
div.fullscreen{
position:fixed
...
}
absolute: The element is positioned relative to its first positioned (not static) ancestor element
fixed: The element is positioned relative to the browser window
You have to put below code before the end of the body tag or after starting of the body tag
<div class="black_overlay" id="fade" style="display: block;"></div>
You need to move your popup and background to outside of any other block elements, probably just before </body>. The background is stretching to fill 100% of it's container which is the table cell rather than the body. This means you will have to change the position (left and right) though.
The problem is that div.black_overlay is inside the table, so you can't use widht:100% and height:100%. Just move div.black_overlay outside the table and add z-index: 1;. I have tested using Firebug and it works!

Categories