We Keep Coding

jQuery blur div not in focus

EDIT: You can see my code working here: unf.edu/~n00804716/site/work.html
I am attempting to blur a section with jQuery when I open an iframe. The iframe is initially hidden, but appears as a fixed element above everything when a button is clicked. I have found one way to do this, but it requires an excessive amount of code. So, I tried to cut down a little, but can't get it to work. Here is what I have:
$('#slides iframe').hide();
$("span").click(function() {
$("#slides iframe").fadeIn(300);
});
$('#slides iframe').each(function(){
if ( $(this).css('display') == 'block')
{
$("section").css({
'filter': 'blur(15px) greyscale(80%)'
});
} else {
$("section").css({
'filter': 'blur(0px) greyscale(0%)'
});
}
});
This is how my HTML is setup:
<div id="slides">
<div id="slide-2" class="slide">
<iframe class="zoo-video"></iframe>
<section>
<span></span>
/*other content*/
</section>
</div>
</div>
CSS:
#slides iframe {
width: 90%;
margin: 0 auto;
height: 90%;
z-index: 9999;
position: absolute;
right: 0;
left: 0;
top: 5%;
bottom: 0;
}
#slides,
section {
width: 100%;
}
Also, I'm not entirely sure if the vendor prefixes are necessary. Is there a much simpler way to do this? The trick is, the iframe is a vimeo player that takes up 90% of the screen. So, I also need the iframe to close/collapse when the page is scrolled vertically or if the user clicks outside of the iframe. When it collapses, I need it the section to no longer have a blur or grayscale. Here is the code I'm using to collapse the iframe when the user clicks outside of it:
$(document).mouseup(function (e) {
var container = $("#slides iframe");
if (!container.is(e.target)
&& container.has(e.target).length === 0)
{
container.fadeOut(230);
}
});

http://jsfiddle.net/721nma0g/
$(document).ready(function () {
var video = $("#slides iframe");
$(document).mouseup(function (e) {
if (!video.is(e.target) && !video.has(e.target).length) {
video.removeClass("visible-video");
}
});
$("button").click(function() {
video.addClass("visible-video");
});
});
Instead of doing so much with jQuery, I often just use JS to set a class. You can do so much more with CSS than you'd think. Of importance is the CSS. You had a small spelling error (US vs UK spelling) greyscale vs grayscale. But as you can see the + selector is very useful here! Select the element following .visible-video and you can target the section that you want!
iframe {
display: none; /* Hide the video initially */
width: 90%;
margin: auto 5%;
position: fixed;
z-index: 20;
top: 48px;
box-shadow: 0 4px 36px rgba(0,0,0,0.72), 0 0 8px rgba(0,0,0,0.48);
}
.visible-video {
display: block; /* show the video when the class has been set */
}
section {
margin: 24px auto;
width: 80%;
}
.visible-video + section {
-webkit-filter: blur(15px) grayscale(80%);
filter: blur(15px) grayscale(80%);
}
EDIT: I improved the CSS code of the iframe, so it'll scale better, and I included some JS that will detect if the user has clicked on the scrollbar or not. Without this addition, the iframe will also close when clicking the scrollbar.
Full screen result here: https://jsfiddle.net/721nma0g/5/embedded/result/
Edited jQuery:
if (!video.is(e.target) && !video.has(e.target).length && (e.target != $('html').get(0))) {
video.removeClass("visible-video");
}
Edited CSS:
iframe {
display: none;
max-width: 90%;
position: fixed;
z-index: 20;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 4px 36px rgba(0, 0, 0, 0.72), 0 0 8px rgba(0, 0, 0, 0.48);
}
Works great on mobile too.

How to add css to jquery backstretch?

So I was able to create a slideshow using the jquery backstretch.
$.backstretch([
'assets/images/main-01.jpg'
, 'assets/images/main-02.jpg'
, 'assets/images/main-03.jpg'
], {duration: 5000, fade: 850});
However, I wish to add a repeating-linear-gradient effect on the images
background-image:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 0.1) 3px);
Is it possible to apply the above css to the backstretch images?

Yes it is possible.
You just need an overlay for the backstretch images:
#backstretch-overlay {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
background-image: repeating-linear-gradient(
0deg,
transparent,
transparent
2px, rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 0.1) 3px
);
}
In this fiddle I attached backstretch to a container to have some control over it, but that is not particularly necessary.

you can see me demo:
html {
height: 100%;
overflow-y: hidden;
}
body {
background-image: url('http://dl.dropbox.com/u/515046/www/garfield-interior.jpg');
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
DEMO
or
You just have to Include the jQuery library (version 1.7 or newer) and Backstretch plugin files in your webpage, preferably at the bottom of the page, before the closing `` tag.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
// To attach Backstrech as the body's background
$.backstretch("path/to/image.jpg");
// You may also attach Backstretch to a block-level element
$(".foo").backstretch("path/to/image.jpg");
// Or, to start a slideshow, just pass in an array of images
$(".foo").backstretch([
"path/to/image.jpg",
"path/to/image2.jpg",
"path/to/image3.jpg"
], {duration: 4000});
</script>

animate fixed bottom bar to appear on hover

i have a bar that is fixed to the bottom of the browser. i want to make the bar displayed as 'none', so that when a user hovers over the bar it is displayed until they hover out.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
html {
background: #34495e;
}
#pagebottom {
width: 92%;
height: 20px;
background: rgba(255, 255, 255, 0.80);
margin-left: 4%;
margin-right: 4%;
bottom: 0;
position: fixed;
color: #3498db;
text-align: center;
}
</style>
</head>
<body>
<div id="pagebottom">
random text
</div>
</body>
</html>

try this css solution
#pagebottom {
width: 92%;
height: 20px;
background: rgba(255, 255, 255, 0.80);
margin-left: 4%;
margin-right: 4%;
bottom: 0;
position: fixed;
color: #3498db;
text-align: center;
opacity:0;
}
#pagebottom:hover{
opacity:1;
transition:all .5s linear;
}

You can accomplish this with CSS. No JavaScript needed.:
#pagebottom {
opacity: 0;
width: 92%;
height: 20px;
background: rgba(255, 255, 255, 0.80);
margin-left: 4%;
margin-right: 4%;
bottom: 0;
position: fixed;
color: #3498db;
text-align: center;
}
#pagebottom:hover {
opacity: 1;
}

EDIT This is a jQuery solution. There are some great CSS only solutions above.
You can't display your div as none, as it will have no width or height, and therefore be un-hoverable. However, you can use the opacity attribute, and modify the footer's CSS accordingly.
Take a look at this JSFiddle
Here are the changes I made:
I added opacity: 0; to the #pagebottom CSS so it is invisible by default.
I added the following jQuery:
$('#pagebottom').mouseenter(function(){
$('#pagebottom').css('opacity','1');
});
$('#pagebottom').mouseleave(function(){
$('#pagebottom').css('opacity','0');
});
This code waits until the mouse enters the div area, and sets the opacity to 1. When the mouse leaves, it sets the opacity to 0 again, making the element invisible.
If you want a nice tradition so the div fades in and out, you can use CSS transitions or a jQuery plugin like Transit, or even the animate feature that Felix describes in his answer.

You can use:
1) css() to set the opacity of your div:
2) hover() to keep track of when the mouse pointer enters and leaves your div
3) animate() to apply fadeIn() and fadeOut animation when changing the opacity
$('#pagebottom').css('opacity','0');
$( "#pagebottom" ).hover(
function() {
$('#pagebottom').stop().animate({opacity: 1}, 500);
}, function() {
$('#pagebottom').stop().animate({opacity: 0}, 500);
}
);
Fiddle Demo

Fullscreen black bg with opacity fadeIn/fadeOut

I´m trying to make a full screen black bg with opacity, it appears smoothly when the mouse enters to the body and fade out smoothly when the user leaves the body of the page (which is the whole nav content screen).
I´m trying doing it with this script:
$("body").bind('mouseover', function() {
$("#bg_black").fadeIn("slow", 0.33);
});
$("body").bind('mouseleave', function() {
$("#bg_black").fadeOut();
});
with this css:
#bg_black{
position: absolute;
z-index: 1;
background: black;
opacity: 0.5;
width: 100%;
height: 100%;
display: none;
}
But the fadeout doesn´t works and also the fadeIn is very quickly and heavy.
Any ideas to achieve it, to make it also IE compatible? (not using css3)

I got this working by adding a div to body.
<div id="bg"></div>
styled it with css
#bg {
// so if user scrolls it doesn't matter
position: fixed;
background-color: black;
// expand to height & width
height: 100%;
width: 100%;
margin: 0;
padding:0;
// hidden initially
opacity: 0;
}
body {
background-color: white;
}
javascript to fadeIn and fadeOut
$("#bg").hover(function() {
// should user hover in and out quickly stop animations
$(this).stop().animate({ opacity: 1 }, 1000);
}, function( ) {
// should user hover in and out quickly stop animations
$(this).stop().animate({ opacity: 0 }, 1000);
});
Demo here

Try with this one:
$(function(){
$("body").hover(function() {
$("#bg_black").fadeIn("slow");
},function(){
$("#bg_black").fadeOut("slow");
});
});

Fading out JavaScript "modal window" when background is clicked?

I have a modal-like window in CSS that I fade in with JavaScript. The HTML is like this:
<div class="whiteout">
<div class="modal">
<a class="modal-close" title="Close"></a>
// modal window content
</div>
</div>
And the CSS is like this:
.whiteout {
display: none;
position: fixed;
left: 0; top: 0; right: 0; bottom: 0;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.7);
}
.modal {
position: fixed;
left: 50%;
top: 50%;
z-index: 200;
border: 12px solid #666;
border: 12px solid rgba(0, 0, 0, 0.5);
-moz-border-radius: 12px;
border-radius: 12px;
}
I'm using jQuery to show the modal window when I click a link, with the "whiteout" background, and I want it to fade out when I click the background.
$('.share-link').click( function() {
$('.whiteout').fadeIn();
return false;
} );
$('.whiteout').click( function() { // click the background
$(this).fadeOut();
} );
$('.modal-close').click( function() { // close button on the modal window
$('.whiteout').fadeOut();
} );
However, it fades out whenever I click the modal window, as well as the background, because technically that is inside the "whiteout" element. Is it possible to stop that happening when I click inside the .modal element?

try this:
$('.whiteout').click( function(e) { // click the background
if(e.target == this)
$(this).fadeOut();
} );

The best thing might be to move the whiteout div to the end of the body, entirely outside the content area. With the right CSS, the whiteout element can live anywhere in the DOM but still achieve the right effect.
As an example, take a look at how jQuery UI’s dialog works, it does almost exactly this.