We Keep Coding

Stop the propagation of an outline? CSS

I'm trying to add a search box that has an outline animation, this oneI
form {
display:block;
left:50%;
position:absolute;
top:30%;
input[type=search] {
border:solid 3px #fff;
box-sizing:border-box;
font-size:2em;
height:2em;
margin-left:-15vw;
outline:solid #fc0 0;
padding:.5em;
transition:all 2s ease-in;
width:30vw;
z-index:1;
&:focus {
border:solid 3px #09f;
outline:solid #fc0 2000px;
}
}
In specific and what this does is create a form where as the input produces a 2000px massive outline throughout the body - my question is: Is it possible to have a wrapping div around this form and have some sort of command to stop the propagation of the outline? In order to have the outline only manifest itself inside of the containing div and not to the whole page.
If the solution is not available in CSS, I'm open to JS ones, aswell.
Thanks in advance!

I've inserted input into a div, which has overflow: hidden css property, which stops outline from showing.
Here is working codepen
SASS
$shadow: #fc0;
html {
background-color:#ccc;
}
#outlineBorder {
width: 800px;
height: 200px;
display:flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
form {
input[type=search] {
border:solid 3px #fff;
box-sizing:border-box;
font-size:2em;
height:2em;
outline:solid #fc0 0;
padding:.5em;
transition:all 2s ease-in;
width:30vw;
z-index:1;
&:focus {
border:solid 3px #09f;
outline:solid #fc0 2000px;
}
}
}
HTML
<form>
<div id="outlineBorder">
<input type="search" placeholder="Search...">
</div>
</form>

Grid system extra space right side

I am trying to make a grid system using jquery masonry. But i have space problem.
I crated this DEMO from codepen.io
If you are using a widescreen computer please narrow browser. When you narrow your browser then a large gap on the right side emerges. Anyone can help me about that problem ?
HTML
<div class="kesif-wrp">
<div class="kesif-alani">
<div class="kesif-gonderiler">
<div class="posts-holder">
<div class="kesif-gonderi-alani" style="height:300px;">1</div>
<div class="kesif-gonderi-alani" style="height:400px;">2</div>
<div class="kesif-gonderi-alani" style="height:400px;">3</div>
<div class="kesif-gonderi-alani" style="height:200px;">s4</div>
<div class="kesif-gonderi-alani" style="height:250px;">5</div>
<div class="kesif-gonderi-alani" style="height:150px;">6</div>
<div class="kesif-gonderi-alani" style="height:200px;">7</div>
</div>
</div>
</div>
</div>
CSS
body {
background-color:#323949;
font-family: 'mstfont' !important;
margin: 0px ;
padding: 0px;
min-width:100%;
float:left;
height: 100%;
-webkit-font-smoothing: antialiased;
}
.kesif-wrp {
padding: 53px 0 0;
width: 100%;
position: relative;
background-color:blue;
}
.kesif-alani {
padding: 20px 0 50px;
margin: 36px auto 0;
position: relative;
max-width: 1620px;
min-width: 960px;
}
.kesif-gonderiler {
color: #444;
padding: 0 10px;
background-color:red;
}
.kesif-gonderi-alani{
width:300px;
background-color:#ffffff;
border-radius:3px;
-webkit-border-radius:3px;
-o-border-radius:3px;
-moz-border-radius:3px;
margin-right:20px;
margin-bottom:20px;
position: absolute;
top: 0px;
left: 0px;
}
.posts-holder {
box-sizing: border-box;
margin: 10px auto;
opacity: 1;
-webkit-transition: opacity 200ms;
-moz-transition: opacity 200ms;
transition: opacity 200ms;
}

I solved the problem as follows.
CSS:
.kesif-wrp {
padding: 53px 0 0;
width: 100%;
position: relative;
}
.kesif-alani {
padding: 20px 0 50px;
margin: 36px auto 0;
position: relative;
max-width: 1620px;
min-width: 960px;
}
.kesif-gonderiler {
color: #444;
}
.kesif-gonderi-alani{
width:300px;
background-color:#ffffff;
border-radius:3px;
-webkit-border-radius:3px;
-o-border-radius:3px;
-moz-border-radius:3px;
margin:10px;
}
.posts-holder {
position:relative;
margin: 10px auto;
}
JavaScript
$( function() {
var $container = $('.posts-holder');
$container.masonry({
isFitWidth: true,
itemSelector: '.kesif-gonderi-alani'
});
});
Working DEMO

The large gap in right because of the position : absolute and top,left css property. All the containers are placed as per their applied classes by following the top,left properties.
Well - you need to change the style sheet completely to fix it once for all.
First of all - set the width of your container where you want to put them all say 1000px then, place your child containers(div's) by using setting the position and left,top properties. And if you need a responsive design then go for media queries.
Hope this helps..

How do I resize an Avatar image into a smaller one in a fixed header navbar using jquery and css

I need help about resize avatar image into a smaller one in a fixed header navbar. I created this DEMO from codepen.io
When you scroll down on the page then the navbar to be a fixed. But i want to add a avatar in a navbar when scroll down like twitter. Anyone can help me here ?
JQuery
$(document).ready(function() {
$('.globalHeader').scrollToFixed();
$('.footer').scrollToFixed( {
bottom: 0,
limit: $('.footer').offset().top
});
var summaries = $('.summary');
summaries.each(function(i) {
var summary = $(summaries[i]);
var next = summaries[i + 1];
summary.scrollToFixed({
marginTop: $('.globalHeader').outerHeight(true) + 10,
limit: function() {
var limit = 10;
if (next) {
limit = $(next).offset().top - $(this).outerHeight(true) - 10;
} else {
limit = $('.footer').offset().top - $(this).outerHeight(true) - 10;
}
return limit;
},
zIndex: 0
});
});
$('#sponsor').scrollToFixed({
marginTop: $('.globalHeader').outerHeight(true) + 10,
limit: function() {
var limit = $('.footer').offset().top - $('#sponsor').outerHeight(true) - 10;
return limit;
},
minWidth: 1000,
zIndex: 999,
fixed: function() { },
dontCheckForPositionFixedSupport: true
});
$('#sponsor').bind('unfixed.ScrollToFixed', function() {
if (window.console) console.log('sponsor preUnfixed');
});
$('#sponsor').bind('unfixed.ScrollToFixed', function() {
if (window.console) console.log('sponsor unfixed');
$(this).css('color', '');
$('.globalHeader').trigger('unfixed.ScrollToFixed');
});
$('#sponsor').bind('fixed.ScrollToFixed', function() {
if (window.console) console.log('sponsor fixed');
$(this).css('color', 'red');
$('.globalHeader').trigger('fixed.ScrollToFixed');
});
});
CSS
.globalHeader {
z-index: 90;
background-color: #323949;
position: fixed;
width: 100%;
border-bottom: 1px solid #3f4858;
color: #fff;
font-size: 40px;
font-family: arial, sans-serif;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
}
.globalHeader_in {
z-index: 99999;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
min-width: 960px;
width: 100%!important;
max-width: 1580px;
height: 52px;
left: 0;
top: 0;
padding: 0 20px 0 15px;
margin: auto;
}
.profile-kapak-alani {
width:100%;
height:385px;
background-position: center top;
background-size: 100% auto;
background-size:cover;
border-bottom:1px solid #3f4858;
background: #323949 url(icons/genis.png) repeat 0 0;
}
.profil-kapak-profil-resim {
width:900px;
height:385px;
margin:0px auto;
}
.profil-kapak {
width:900px;
height:385px;
overflow:hidden;
}
.profil-kapak img {
width:900px;
}
.profil-ana-etki-alani{
width: 900px;
margin: auto;
padding: 52px 30px 0;
overflow:hidden;
border-radius:3px;
-webkit-border-radius:3px;
-o-border-radius:3px;
-moz-border-radius:3px;
}
.kullanici-profil-fotografi-alani {
float:left;
width:200px;
height:200px;
margin-top:-110px;
margin-left:30px;
position:absolute;
padding:8px;
z-index:5;
background-color: rgba(50, 57, 73, 1);
border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-moz-border-radius:5px;
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.2), 0 0 8px rgba(0, 0, 0, 0.5) inset;
}
.kullanici-profil-fotografi-alani span {
display: inline-block;
overflow: hidden;
vertical-align: middle;
-webkit-border-radius:5px;
-o-border-radius:5px;
-moz-border-radius:5px;
}
.profil-fotografini-degistir {
position:absolute;
width:55px;
height:35px;
margin-top:-38px;
margin-left:4px;
}
.link-abonelik-takipci-fotograf-takip {
width:100%;
height:60px;
position:relative;
border-bottom:1px solid #3f4858;
background-color: #323949;
border-top:1px solid #3f4858;
box-shadow: 0 -7px 5px -6px #000000;
-webkit-box-shadow: 0 -7px 5px -6px #000000;
-moz-box-shadow:0 -7px 5px -6px #000000;;
-o-box-shadow:0 -7px 5px -6px #000000;;
}
.la-t-f-t {
width:900px;
height:60px;
margin:0px auto;
}
.ll-p-t{
float:right;
width:630px;
height:60px;
}
.pay-t{
float:left;
width:88px;
height:60px;
padding-left:15px;
padding-right:15px;
}
.pay-t-t {
font-weight:normal;
color:#9aa2ae;
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:11px;
margin-top:10px;
float:left;
width:88px;
text-align:center;
}
.p-t-t-a{
font-weight:bold;
color:#9aa2ae;
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:18px;
text-align:center;
margin-top:8px;
float:left;
width:88px;
}
#navbar {
position: absolute;
width:100%;
height:60px;
}
.main-content{
width:100%;
height:auto;
overflow:hidden;
background-color:red;
}
.content{
margin:0px auto;
width:900px;
height:900px;
}
.footer {
background-color: #eee;
padding: 0px;
clear: both;
}
.footer.scroll-to-fixed-fixed {
color: red;
}

For the large background image, you can simply use $(window).scroll() to slow down the scrolling. You also need to set your content to position: relative so it sits above the overflowing background image (since it will scroll at a much slower rate). But your nav bar has a dynamically added z-index:auto which will then cause it to sit behind your content (probably from the plugin) so you'll have to use !important on your #navbar's z-index:
JS
$(window).scroll(function(){
var scrolled = $(this).scrollTop();
$(".profil-kapak").css({"top":(scrolled*0.7)+"px"});
});
CSS
#navbar {
position: absolute;
width:100%;
height:60px;
z-index: 4 !important; //add, need to override the plugin
}
.main-content{
width:100%;
height:auto;
overflow:hidden;
background-color:red;
position: relative; //add
}
For the mini profile look, you can set up the container in your nav bar set to display: none and do a simple fade in/out with the bigger one when the nav bar get's fixed:
HTML
<div class="mini-profile-wrapper">
<div class="mini-profile-img">
<img src="http://www.designbolts.com/wp-content/uploads/2013/11/Frozen-Movie-poster-payoff-Wallpaper-HD1.jpg">
</div>
<p class="profile-name">John Doe</p>
</div>
CSS
.mini-profile-wrapper{
display: none;
float: left;
}
.mini-profile-img{
display: inline-block;
width: 80px;
padding: 5px 5px 0 0;
overflow: hidden;
vertical-align: middle;
}
.mini-profile-img img{
max-width: 100%;
display: inline-block;
}
.mini-profile-wrapper .profile-name{
display: inline-block;
vertical-align: middle;
font-weight:normal;
color:#FFF;
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:20px;
}
You can Use pre-existing JS function
$('#navbar').bind('unfixed.ScrollToFixed', function() {
...
$(".kullanici-profil-fotografi-alani").fadeIn();
$(".mini-profile-wrapper").fadeOut();
});
$('#navbar').bind('fixed.ScrollToFixed', function() {
...
$(".kullanici-profil-fotografi-alani").fadeOut();
$(".mini-profile-wrapper").fadeIn();
});
CODEPEN

Twitter is doing some interesting things in this case. The container #1 for the small avatar is in the navigation bar all the time in the same place. That avoids messing around with the placement of the avatar and any other outside elements.
The content of this container #1 is container #2 and has a given height and in its not-fixed state a padding-top of the same value. And because of the overflow: hidden, the inner content (avatar, texts) gets cut of.
As soon as the navigation bar gets fixed, the padding-top of container #2 is set from the height to 0, and thanks to a CSS transition, we have a nice animation. In addition, the big avatar get animated away.
Conclusion: Make the smaller version and place in a spot where you want. Keep this position all the time and just change its visibility. Can be the way described above, can also just be a simple visibility: hidden. Be creative. And then, when you fix your navigation, simply show the small avatar, and hide it, when its going to be unfixed.

Responsive navigation stays hidden on window resize (pure JS)

I have been looking for a solution for over ten hours, today only, and have searched many more days before that. I'm asking a question here because I'll be ripping my hair out very soon if this goes on.
My problem : I have a responsive navigation which looks like a regular navbar on desktop sized screens that converts to a dropdown menu when window shrinks or device width gets too small. On the media queries front, I think I've got everything covered.
The Javascript is what is causing problems. Let me explain :
Desktop nav shrinks when window is resized
clicking to open/close the shrunk menu makes the list items pop out/hide without problem
when window is resized to its original width (with menu closed) the navigation stays hidden
Here are two examples to illustrate what I mean.
Responsive menu hidden on window resize
Responsive navigation hidden on window resize
I know what people might suggest : just make it work with jQuery there are many working examples. While that may be true, I'm not familiar with jQuery at all and if I could, I would rather not use a whole library just for this. I'm not very experienced in JavaScript either, but I prefer the pure JS approach.
HTML
<header class="header" id="return">
<div class="floatWrapper">
<nav class="grid70" >
<input type="button" onclick="toggle(navi)"/>
<ul class="allGrids navigation grid1" id="navi">
<li><a data-scroll href="#profil">About</a></li>
<li><a data-scroll href="#competences">Skills</a></li>
<li><a data-scroll href="#parcours">Work</a></li>
<li><a data-scroll href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
CSS
*,
:after,
:before{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing:border-box;
box-sizing: border-box;
word-wrap:break-word;
}
html, body{
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
font-size: 100%;
}
ul, li{
list-style-type: none;
padding:0;
margin:0;
}
a{
text-decoration: none;
}
.floatWrapper{
width: 90%;
max-width: 1120px;
margin:0 auto;
}
.floatWrapper:before,
.floatWrapper:after {
content:"";
display:block;
}
.floatWrapper:after {
clear:both;
}
.allGrids{
height: auto;
float:left;
margin: 1% 0%;
display:block;
}
.grid1{
width: 100%;
margin:1% 0;
}
.grid70{
width: 66%;
}
.header{
position: fixed;
top: 0;
left:0;
width:100%;
z-index: 100000;
padding:0;
height: auto;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.header input{
display:none;
}
.header .floatWrapper .grid70{
float:right;
}
.navigation{
margin:0;
padding: 0;
}
.navigation li{
float:left;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
width: 24%;
margin-left: .3%;
padding-top:0;
border-radius: 0 0 10px 10px;
}
.navigation li:nth-child(odd) a{
background: orange;
}
.navigation li a{
display: block;
color: black;
background-color: lightblue;
text-decoration: none;
word-wrap: normal;
padding-right: 8%;
height:4em;
line-height: 5.5em;
text-align : right;
border-radius: 0 0 10px 10px;
-moz-transition-proprety: background-color height;
-moz-transition-duration : 1s;
-webkit-transition-proprety: background-color height;
-webkit-transition-duration : 1s;
-ms-transition-proprety: background-color height;
-ms-transition-duration : 1s;
-o-transition-proprety: background-color height;
-o-transition-duration : 1s;
transition-proprety: background-color height;
transition-duration : 1s;
}
.navigation li:hover a{
box-shadow: 1px 2px 4px black;
height:6em;
line-height: 8.5em;
-moz-transition-proprety: background-color height;
-moz-transition-duration : 1s;
-webkit-transition-proprety: background-color height;
-webkit-transition-duration : 1s;
-ms-transition-proprety: background-color height;
-ms-transition-duration : 1s;
-o-transition-proprety: background-color height;
-o-transition-duration : 1s;
transition-proprety: background-color height;
transition-duration : 1s;
}
#media screen and (max-width: 769px) {
.header{
padding:0;
position:fixed;
background-color: #22313F;
border-top:none;
}
.header .floatWrapper{
padding-top: 1em;
padding-bottom: 1em;
position: relative;
z-index:15000;
width: 100%;
}
.header .floatWrapper .grid70{
width: 2em;
height: 2em;
padding:0;
float:right;
margin-right: 5%;
}
.header .floatWrapper .grid70 input{
display:block;
color:#22313F;
width: 100%;
height: 100%;
background-color: #6C7A89;
padding:0;
margin: 0;
}
.header .floatWrapper .grid70 .navigation{
position:absolute;
top:70%;
left:0%;
display:none;
padding-top: 15px;
}
.header .floatWrapper .grid70:hover .navigation {
max-height: 1000px;
display:block;
}
.navigation li{
width: 100%;
padding:0;
border-radius:0;
margin-left: 0;
}
.navigation li a {
text-align: left;
height: auto;
line-height: 40px;
border-radius:0;
word-wrap:break-word;
padding:1.5%;
font-size: 18px;
}
.navigation li:hover a{
box-shadow: none;
color:black;
height: auto;
line-height: 40px;
}
}
JavaScript
var is_touch_device = 'ontouchstart' in document.documentElement;
if(is_touch_device){
//code for touch devices
function toggle(navi) {
var tag=document.getElementById("navi");
tag.style.display = tag.style.display === 'block' ? 'none' : 'block';
// set as defaut oposite defaut active value in document
// here defaut is set to block cause it is none in CSS
}
}
I am very well aware that what is causing problems is non other than this very JS snippet. On mobile, it works like a charm.
As the hover is still enabled on .grid70 it works on Desktops browsers aswell, but only on Firefox. Chrome, IE and Opera detect the touch and make the nav unusable after a few clicks (when window is resized).
Here is a JSbin : http://jsbin.com/ziqij/1/edit?html,css,js,output
The reason hover is still working is because I thought the touchscreen detection would work ... and wanted to go with hover on desktop / onclick on mobile.
I realize now, I'd better use a click only solution and account for desktop touchscreens aswell.
Any help / insight would de greatly appreciated.
Desperately,
Phil

IKEA Style Lightbox

Here is a product listing of IKEA products. When the user hovers over a product, a lightbox is triggered and the section expands horizontally:
http://www.ikea.com/my/en/catalog/categories/departments/eating/16043/
What Lightbox is used here? Or which Lightbox can be manipulated to achieve this? Thank you.

Since we are living in the future, you can quite easily achieve this effect using CSS alone.
Here's a quick example. First the unremarkable markup:
<ul class="Menu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Now, the style (I won't explain, but I tried to keep it well commented):
.Menu {list-style:none; margin: 1em 1em}
.Menu > li {
float:left; text-align:center; padding: 15px 30px; /* size of the box */
width: 50px; height: 30px; overflow:hidden; /* fixed size */
border:solid 1px silver;
background-color:white; /* boxes are over each other when hovered */
/* z-index is needed so hovered boxes are in front of other boxes */
position:relative; z-index:100;
/* showing off. Not for IE. */
transition: 0.5s;
-o-transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s;
}
.Menu > li:hover {
padding: 20px 35px 35px; /* larger */
/* keep other boxes on same position (this is the real trick here) */
margin: -5px -5px -20px; /* math! this + new padding = old padding */
z-index:110; /* in front of other boxes */
/* special effects: */
border-color: #777;
box-shadow: 0 0 5px 0px rgba(0,0,0,0.6);
border-radius:3px;
}
This is it really. I also added elements that are only visible on hover:
.VisibleOnHover {visibility:hidden;opacity:0;
background-color:#ff6; border:solid 1px #994; padding:2px 4px; margin: 2px;
position:absolute; font-size:small;
transition: 0.5s; -o-transition: 0.5s;
-webkit-transition: 0.5s; -moz-transition: 0.5s;
}
.Menu > :hover > .VisibleOnHover {visibility:visible;opacity:1;}
.VisibleOnHover.Bottom {bottom:0;left:0;right:0;}
.VisibleOnHover.TopLeft {top:0;right:0;}
You can see a full example on jsFiddle: http://jsfiddle.net/kobi/sqfAS/
A few minor point are the borders (they are doubled between elements - you can even it out with a -1 margin), and IE9, which still doesn't support transition - but the popup still works. Another usability/accessibility issue is that the menu doesn't work using Tab (in my defense, the IKEA one doesn't work either...)