We Keep Coding

fine tuning my lightbox

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

Make an hover stay hovered until next link [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
first of all just want to say that i'm not a programer but i'm trying to replicate a code and since my javascript is not the best i'm failing at it.
The "animation" in css/java/wtv i'm trying to replicate is from the 3 first boxes links on this site:
http://artcom.de
As you can see when you hover the box/link it stays hovered until the the mouse goes over another link.
I found some solutions with javascript that envolve animating and use a .stop().animate( function but that makes impossible to code css on top of it, one of the things is put a different background image when hovered different a link (that i can make i just can't put the box hovered until the next link).
If you find my question to much of a request feel free to not answer. It's my first post and since coding is a thing that i'm starting i feel kinda nervous of asking this questions.
Thanks in advance for any response.

You could use the below to simply apply a 'hover' class on mouseover of a valid element, after stripping it from similarly qualifying ones. The animation can be handled in CSS using a transition
$('div').on('mouseover', function() {
$('div').removeClass('hover');
$(this).addClass('hover');
});
body {
background: black;
}
div {
transition: all 200ms ease-in;
color: #fff;
border: 3px solid #fff;
width: 20%;
display: inline-block;
margin: 0 20px;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
.hover {
color: #000;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>link</div>
<div>link</div>
<div>link</div>

My solution is similar to that of SW4, but offers a slightly different variation. Basically, when you hover over an item, you want to add a style class to it, while removing that class from all of the other (possibly previously hovered) items.
FIDDLE - http://jsfiddle.net/44c9x5eb/2/
In my fiddle, I use a div item called #body instead of styling the actual body element.
HTML
<div id='body'></div>
<div class="item" data-bg="http://www.evokia.com/images/large-background.jpg">1</div>
<div class="item" data-bg="http://p1.pichost.me/i/10/1333648.jpg">2</div>
<div class="item" data-bg="http://www.desktopaper.com/wp-content/uploads/wonderful-fish-wallpaper-large-background.jpg">3</div>
<div class="item" data-bg="http://p1.pichost.me/640/17/1397737.jpg">4</div>
CSS
#body{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background-color:#eee;
z-index:0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
transition: all 350ms ease-in;
}
.item{
float:left;
text-align:center;
padding:20px;
margin:0 8px;
background:#f00;
position:relative;
z-index:100;
}
.item.selected{
background:#0f0;
}
jQuery
$('.item').mouseover(function(){
//If this item is already selected, forget about it.
if ($(this).hasClass('selected')) return;
//Find the currently selected item, and remove the style class
$('.selected').removeClass('selected');
//Add the style class to this item
$(this).addClass('selected');
//set the body to a different image
$('#body').css( 'background-image', 'url(' + $(this).data('bg') + ')' );
});

basically you need to do two things.
Create an active class for the selected button in css that defines
the background color
Bind to the Hover event add the class to the
hovered over button and remove the class from the other buttons.
This will look something like this:
$('button').hover(
//this function is called on hoverin
function() {
//remove the css class from all buttons
$('.active').removeClass('active');
//add the class on the hovered over button
$(this).addClass('active');
},
//this function is called on hoverin not needed in this case
function() {}
);
.active {
background-color: white;
}
button {
border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>button1</button>
<button>button1</button>
<button>button1</button>
Keep in mind that in today's landscape a lot of mobile devices are being used to visit your site. Therefore you should not build actual functionality relying on hover events. i.e: A menu that opens up when you hover over it.

jQuery SlideDown and Border - Strange jump

When I use jQuery's SlideDown feature on an element that has a border, I do have a problem with a strange jump.
Here's a fiddle to demonstrate what I mean: http://jsfiddle.net/Complexity/um9xj/
I've placed the duration on 700 just for testing purposes
$(element).slideDown({
duration: 700
}).parent().addClass("active");
When you click the new items button you see the behaviour that I mean.
I hope that there is a very simple solution to it.

Try this:
Demo
It looks like as this is being animated down, the margin-top is applied and it jumps down a pixel.
Edit - the left border issue looks to be because you're positioning the menucontents element left:-4px which puts it outside of the menu element. This isn't an issue until you do the slideDown() animation and it automatically sets menu to overflow:hidden a simple fix is to move the positioning to the parent element.
CSS:
.icon .menu {
box-shadow: 0 0 0 #888;
display: none;
left:0px;
top: 60px;
/* margin-top:-1px; */
}
.menucontents {
//other styles
/* left: -4px */
}

The jQuery slideUp and slideDown animations animate the height of the content box, the margin-top, margin-bottom, padding-top, and padding-bottom. Your margin-top: -1px was getting animated but can only be 1 or 0, which is why it was jumping halfway through. Getting rid of margin-top will fix this. If you would like to avoid changing your CSS, you can override the margin editing like this:
$(element).slideDown({
duration: 700,
progress: function(){$(element).css('marginTop', '-1px')}
}).parent().addClass("active");
The progress function is called each frame of the animation and will overwrite jQuery's changes to your margin
EDIT: I've tried experimenting with overwriting overflow, but for reasons I can't determine, it isn't rendering properly. I recommend a CSS edit for your second problem. Since you want to position the menu, just use the outer-most div to modify your positioning and let the inner divs only worry about content:
.icon .menu {
box-shadow: 0 0 0 #888;
display: none;
left: 0;
margin-top: -1px;
}
.menucontents {
padding: 1px;
padding-left: 2px;
z-index: 100;
background-color: white;
/* left: -4px; *
...

Button Not Active Until Mouseout

I'd like to say right off the bat that THIS IS NOT A CSS PROBLEM. The following is simply to demonstrate with css the kind of problem I'm having.
In an html page filled with javascript and css, there is a <div> tag with the following styling:
div {
background-color:#fff;
}
div:hover {
background-color:#f00;
}
div:active {
background-color:#000;
}
Point being, I can tell when the element is being hovered because the background will be red, and I can tell when it is clicked because the background will be black.
What's happening is that the hover styling works, but when I click the element, it doesn't change to the active state until, still holding the mouse button down, I pull the mouse out of the element.
This is probably a result of my messing around with the event handlers on the page, but I'm just wondering if anyone else has come across this phenomenon and knows what it might be.
Edit
Here's what I'm working on: http://faithserve.com/jOS/
Click the "App" Menu, and click start. That button-ish thing is what I'm having the problem with.

You problem is the order of the css definitions. States have a particular order in which they need to be defined. See the end bit of this answer: https://stackoverflow.com/a/7508202/476786
a:link { color: red } /* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */
Note that the A:hover must be placed after the A:link and A:visited
rules, since otherwise the cascading rules will hide the 'color'
property of the A:hover rule. Similarly, because A:active is placed
after A:hover, the active color (lime) will apply when the user both
activates and hovers over the A element.
In your question you have them the correct way, so it can't be repro'd, whereas I have a demo here which shows the wrong way too: http://jsfiddle.net/pratik136/nbW6L/
/* Right */
div.right {
background-color:#fff;
}
div.right:hover {
background-color:#f00;
}
div.right:active {
background-color:#000;
}
/* Wrong */
div.wrong {
background-color:#fff;
}
div.wrong:active {
background-color:#000;
}
div.wrong:hover {
background-color:#f00;
}

You have to be sure CSS rule :hover is setted before :active. You could use that instead of just :active :
div:hover:active {
background-color:#000;
}
DEMO

CSS rollover problems with Internet Explorer 7

I wrote some CSS in my HTML code to create rollover buttons. Then i tried to run it with IE 7 and surprise! it doesn't run. In fact it shows both the button and underlying rollover. How can i get around IE's inability to cache background images? Preferably using CSS but javascript 'will' be tried.
Sample CSS:
#Menu
{
width: 100%;
height: 32px;
margin-top: 93px;
padding-left: 13px;
}
#Menu a
{
height: 32px;
line-height: 32px;
width: 123px;
background: url("img/menu.png") top left no-repeat;
background-position: -123px 0;
float: left;
margin-left: 3px;
text-decoration: none;
color: #1e1e1d;
font-size: 12px;
text-align: center;
}
#Top #Menu a:hover, #Top #Menu a.active
{
background-position: 0px 0;
text-decoration: underline;
}

Well firstly you are giving conflicting instructions ...
background: url("img/menu.png") top left no-repeat;
background-position: -123px 0;
... the background is already positioned using shorthand.
I assume that your regular and hover states both share the same image, so why not do both with shorthand? Remove...
background-position: -123px 0;
... and for your hover and active states, use ...
background-position: bottom left;
Then have both your states in one image, one below the other (which I assume is what you've been trying anyway).

Image rollover issue comes mainly because of downloading image every time on hovering a link or tab. This flicker is caused by the delay when the primary image is removed and the rollover image is loaded (even though they are technically the same image, Internet Explorer prefers to treat them separately).
check it out complete fix for rollover issue:
http://faqspoint.blogspot.com/2011/12/ie-rollover-problem.html

if you are using the :hover pseudo-selector, then it won't work in IE unless it is an anchor tag. Try changing the button into an anchor. You can still make it look like a button using css.
If you want to use javascript, then have a look at jQuery.

Try making sure your CSS background syntax is correct. Some browsers let you specify the properties in any order however IE will choke. You should specify the attachment in the form X Y (horizontal then vertical). You currently have top left. Make it left top. Also you have no-repeat at the end of the line, it should come just after the url declaration and before the position declaration.
The order for CSS background shorthand values should be:
background-color
background-image
background-repeat
background-position
background-attachment
eg. background: #fff url(example.jpg) no-repeat left top fixed;