I would like to have a background blur on scroll. It works but everything inside the section gets a blur. I would like to only have the background image as a blur. Can anyone help?
My code:
<section class="block clearfix z-index background--image text--white blurme" style="background-image: url(<?php echo $image_src ?>);">
<div class="block__black">
<div class="grid__container no-padding">
<div class="grid__row">
<div class="grid__col--10 grid__shift--1 grid__col--sm--1">
<div id="noblur">
<?php
$a = new GlobalArea('Banner Navigation');
$a->display($c);
?>
</div>
</div>
</div>
</div>
</div>
</section>
And my javascript
$(window).scroll(function(e) {
var distanceScrolled = $(this).scrollTop();
$('.blurme').css('-webkit-filter', 'blur(' + distanceScrolled/60 + 'px)');
});
Cheers!
You can achieve it by doing below code
<section class="block clearfix z-index background--image text--white blurme" style="z-index: -1; height: 100%; width: 100%; position: absolute; background-image: url(<?php echo $image_src ?>);"></section>
<section class="block clearfix z-index background--image text--white blurmeNot" style="background-color: transparent">
<div class="block__black">
<div class="grid__container no-padding">
<div class="grid__row">
<div class="grid__col--10 grid__shift--1 grid__col--sm--1">
<div id="noblur">
<?php
$a = new GlobalArea('Banner Navigation');
$a->display($c);
?>
</div>
</div>
</div>
</div>
</div>
</section>
Please set height, width of first section according to your need.
Best of luck :)
Try to blur before or after "selector".
https://jsfiddle.net/xrnk08n4/
<div class="blurme">
<div class="no-blur">
banner
</div>
</div>
.blurme {
position: relative;
height:600px;
}
.blurme:before {
content: "";
position:absolute;
z-index: -1;
top:0;
bottom:0;
left:0;
right:0;
background: url("https://thumb7.shutterstock.com/display_pic_with_logo/2502094/402146209/stock-photo-sample-rubber-stamp-text-on-white-background-402146209.jpg");
-webkit-filter: blur(20px);
}
Related
The collapsible header on my website doesn't seem to be working, and I'm wondering if it's the way I have the HTML setup? I'm trying to get the header to collapse from 125px down to 75px on scroll, but something I can't seem to get it to work. I've seen the JavaScript I'm using work on other websites, so I'm not entirely clear on what is going on with this site. Does anyone see any issues with my code? It seems like it should work fine to me. Much appreciation!
<header id="masthead" class="site-header">
<section class="header-top" id="header-top">
<div class="container content">
<div class="top-search">
<?php get_search_form( ); ?>
</div>
<div class="site-branding">
<img class="logo" src="<?php echo get_template_directory_uri( ) . '/logo.svg'?>">
</div>
<div class="header-right">
<p class="contribute">Contribute</p>
</div>
</div>
<div class="container">
<div class="top-search">
</div>
<div class="site-branding">
</div>
<div class="header-right">
</div>
</div>
<div class="container header-top-block" id="titles" style="display:block">
<h3 class="header-block-heading-line" id="soup">
<a href="<?php echo home_url(); ?>" target="">
Hello
</a>
</h3>
</div>
</div>
</div>
</div>
</section> <!-- end header main -->
<section class="header-nav">
<div class="container borders">
</div>
</section>
</header><!-- #masthead -->
.header-top {
width: 100%;
z-index: 2;
position: relative;
background: $white;
position:fixed;
min-height: 125px;
&.collapsed {
min-height: 50px;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.documentElement.scrollTop > 100) {
if(!document.getElementById("header-top").classList.contains('collapsed')){
document.documentElement.scrollTop += 100;
document.getElementById("header-top").className = "header-top collapsed";
}
} else {
if(document.getElementById("header-top").classList.contains('collapsed')){
document.getElementById("header-top").className = "header-top";
document.documentElement.scrollTop = 0;
}
}
}
Seems like you forgot to add } after &.collapsed declaration. Also If you are using plain CSS this code will not work (you are using SCSS syntax)
I have a div with a background image. How can i make the div (the background image) clickable? I want to unhide an other div when clicked on the div (image). Onclick code: onclick="javascript:unhide('kazen')"
var clickit = document.getElementsByClassName("fh5co-grid")[0];
var kazen = document.getElementById("kazen");
clickit.addEventListener("click", function(){
if (kazen.style.display === "none") {
kazen.style.display="block";
} else {
kazen.style.display="none";
}
});
kazen.addEventListener("click", function(){
this.style.display="none";
});
#kazen {
background-color: #cc9;
display: none;
width: 100px;
height: 100px;
position: absolute;
top: 15px;
left: 15px;
}
.fh5co-grid {
}
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(images/PREVIEW_Shop_02-29.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
<h3>Kaas</h3>
<h4>in ons aanbod hebben we verse en harde kazen - binnenkort meer hierover</h4>
</div>
</a>
</div>
</div>
<div id="kazen" >
<div class="col-md-12">
<div class="fh5co-grid" style="background-image: url(images/Melkerhei_Dag2-16-4.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
</div>
</a>
</div>
</div>
</div>
You can have a look at the fiddle I created if this is what you want.
$(document).ready(function() {
$("div.fh5co-grid").click(function() {
$("div.next").css("display", "block");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(http://placehold.it/350x150);">
<a class="image-popup text-center">
<div class="prod-title ">
<h3>cheese</h3>
<h4>tekst</h4>
</div>
</a>
</div>
</div>
<div style="background-color: #000; display:none" class="next">Next div</div>
From what you're describing, this seems pretty close. The background image isn't clickable, it's the div itself. And this could be done with jQuery, yes, but it's trivial enough that pure javascript is pretty easy here. Clicking in the red-boxed area will display the div with the id kazen, and clicking in either kazen or the red-boxed area again will hide it.
Note, there was a weird glitch to my solution. I changed the display if/else to check if it's currently displayed and hide it, rather than if it's currently hidden to display it. That was causing a strange effect of re-hiding the kazan div on the first click.
Within stackoverflow, you'll need an absolute url to display an image. If you aren't seeing your image here, that may be why.
var clickit = document.getElementsByClassName("fh5co-grid")[0];
var kazen = document.getElementById("kazen");
clickit.addEventListener("click", function(){
if (kazen.style.display === "block") {
kazen.style.display="none";
} else {
kazen.style.display="block";
}
});
kazen.addEventListener("click", function(){
this.style.display="none";
});
#kazen {
background: url("https://static.pexels.com/photos/6832/waterfall-beauty-lets-explore-lets-get-lost.jpg");
background-size: 100%;
display: none;
width: 100px;
height: 100px;
position: absolute;
top: 15px;
left: 15px;
color: #fff;
}
.fh5co-grid {
border: 1px dotted red;
}
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(images/PREVIEW.jpg);">
<a class="image-popup text-center">
<div class="prod-title ">
<h3>cheese</h3>
<h4>tekst</h4>
</div>
</a>
</div>
</div>
<div id="kazen">
Click me to hide!
</div>
i've found a pen:
http://codepen.io/rhernando/pen/vjGxH
html
<div id="mainWrap">
<div class="cardCont">
<div class="cardBack"></div>
<div class="cardFront"></div>
</div>
<div class="cardCont">
<div class="cardBack"></div>
<div class="cardFront"></div>
</div>
<div class="cardCont">
<div class="cardBack"></div>
<div class="cardFront"></div>
</div>
</div>
<div style="clear:both;"></div>
<div id="mainWrap" style="margin-top:10px;">
<div class="cardCont">
<div class="cardBack playcardBack"></div>
<div class="cardFront playcardFront"></div>
</div>
<div class="cardCont">
<div class="cardBack playcardBack"></div>
<div class="cardFront playcardFront"></div>
</div>
<div class="cardCont">
<div class="cardBack playcardBack"></div>
<div class="cardFront playcardFront"></div>
</div>
</div>
css
body
{
background:#444;
}
.cardCont
{
width:250px;
height:400px;
float:left;
margin-right:10px;
position:relative;
/*border:solid 2px #fff;*/
}
.cardFront, .cardBack
{
position:absolute;
width:250px;
height:400px;
background:url('http://s.cdpn.io/33073/lorempixel.jpg');
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
.cardBack
{
background:url('http://s.cdpn.io/33073/lorempixe1l.jpg');
}
.playcardFront
{
background:url("http://unlimitedpotentialnow.com/wp-content/uploads/2012/01/Bouquet-cs.jpg");
}
.playcardBack
{ background:url("http://i203.photobucket.com/albums/aa158/Comic1111/ACe.png");
}
js
CSSPlugin.defaultTransformPerspective = 1000;
//we set the backface
TweenMax.set($(".cardBack"), {rotationY:-180});
$.each($(".cardCont"), function(i,element) {
var frontCard = $(this).children(".cardFront"),
backCard = $(this).children(".cardBack"),
tl = new TimelineMax({paused:true});
tl
.to(frontCard, 1, {rotationY:180})
.to(backCard, 1, {rotationY:0},0)
.to(element, .5, {z:50},0)
.to(element, .5, {z:0},.5);
element.animation = tl;
});
$(".cardCont").hover(elOver, elOut);
function elOver() {
this.animation.play();
}
function elOut() {
this.animation.reverse();
}
that displays a nice effect with greensock.
The problem is that is not cross-browser beacuse it doesn't work on safari.
Could someone help me to understand why?
Thanks
Can someone tell me what is wrong with this slider? When I execute it, the script works for the first two slides and then glitches.
css:
.slider {
z-index: 0;
clear: both;
position: relative;
margin: 0 0 15px 0;
height: 275px;
}
.slider .jumbo {
z-index: 0;
clear: both;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 40px 10px;
}
jquery:
$(".slider > .jumbo:gt(0)").hide();
setInterval(function() {
$('.slider > .jumbo:first')
.show("slide",1000)
.next()
.hide(0)
.end()
.appendTo('.slider');
}, 2000);
Webpage (slid show sped up for question): http://awkwardpetsiblings.x10host.com/
When you start the animation, jQuery UI is wrapping your slide in a div as part of its animation process. Your code then immediately moves your slide out of the wrapper, and jQuery UI gets confused, leaving behind a trail of wrapper divs as the interval repeats.
If instead you start the animation after you move the element, it works as intended. Live example:
$(".slider > .jumbo:gt(0)").hide();
setInterval(function() {
$('.slider > .jumbo:first')
.next()
.hide()
.end()
.appendTo(".slider")
.show("slide",500)
;
},1000);
$("#nv-cntnr-tab1").click(function(){window.open("/","_self")});
.jumbo {position:absolute; top:0;left:0;background:white;width:100%}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<div class="slider">
<div class="jumbo slide1">
<div class="cover" id="sld1-cover"></div>
<div class="container" id="sld1-container">
<div class="desc" id="sld1-cntnr-desc">
<h2>For Sharing your awkward and funny pet pictures.</h2>
<h4>See what it's all about by trying our interactive tour.</h4>
</div>
<div class="nav" id="sld1-cntnr-nav">
<div class="tour btn" id="sld1-cntnr-nav-tour_btn">
Let's Get Started
</div>
</div>
</div>
</div>
<div class="jumbo slide2" style="display: none;">
<div class="cover" id="sld2-cover"></div>
<div class="container" id="sld2-container">
<div class="desc" id="sld2-cntnr-desc">
<h2>The Feed. It's what we live on.</h2>
<h4>Try it out for free. No account needed.</h4>
</div>
<div class="nav" id="sld2-cntnr-nav">
<div class="signup btn" id="sld2-cntnr-nav-signup_btn">
Visit The Feed
</div>
</div>
</div>
</div>
<div class="jumbo slide3" style="display: none;">
<div class="cover" id="sld3-cover"></div>
<div class="container" id="sld3-container">
<div class="desc" id="sld3-cntnr-desc">
<h2>Take your experience to the next level.</h2>
<h4>Personalize your profile and Feed with friends.</h4>
</div>
<div class="nav" id="sld3-cntnr-nav">
<div class="feed btn" id="sld3-cntnr-nav-feed_btn">
Create Your Account
</div>
</div>
</div>
</div>
</div>
I recently took up a non-profit website as a project. I'm working with an existing website, so I'm having to work with a lot of the stuff already programmed, so all I have to do is create the design.
I made a diagram of basically what I can't figure out how to do:
I also made a JSFIDDLE of what is already there:http://jsfiddle.net/RmWu7/. I know I should of used a table for tabular data, but the programming is a bit weird, and I can't seem to figure out how to modify the php to work with a regular table, so I'm just going to keep the divs.
So two things:
I tried adding a position:fixed to .columns with the .last class, and an overflow-x:auto to the rest, but it completely messes up the layout.
How can I get the columns to be a fixed size instead of fluid, and have the last non-fixed column (before the columns with the .last class) to be bigger to fill up the table like in the diagram?
I'm trying to keep it mostly in CSS, but do I need to add jQuery as well?
Thanks for all help!
Ok I've totally change the codes as my previous version has problem on scrolling.
<div class="table">
<div class="wrap">
<div class="wrap2">
<div class='column'>
<div class='row top'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
</div>
<div class='column'>
<div class='row top'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
</div>
<div class='column'>
<div class='row top'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
</div>
</div>
</div>
<div class='column fixed-column'>
<div class='row top'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
<div class='row'>Test</div>
</div>
</div>
css:
.table{
overflow: hidden;
position: relative;
.wrap {
overflow-x: auto;
}
.wrap2 {
overflow: hidden;
zoom: 1;
}
.column{
float:left;
background:red;
width:200px;
.row{
padding:10px;
&.top{
background:green;
}
}
&.fixed-column {
position: absolute;
right: 0;
top: 0;
background:blue;
}
}
}
jQuery:
$(function() {
var scrollingWidth = $('.table').innerWidth();
var lastWidth = $('.table .wrap .column:last').outerWidth();
var innerWidth = 0;
$('.table .column').each(function() {
innerWidth += $(this).outerWidth();
});
var gap = scrollingWidth - innerWidth + lastWidth;
if(gap > lastWidth) {
$('.table .wrap .column:last').css('width', gap);
innerWidth += gap - lastWidth;
}
$('.table .wrap2').css('width', innerWidth);
});