I am having an issue with my fixed header.
On my homepage the fixed header works. This has been properly tested on various computers and mobile devices. The same fixed header however does not on any other page, say a product page or a blog post.
What it does is the following:
1) It ignores the fixed positioning and does not stick to the top.
2) It gets wrong width (width: 1010px)
This is my jQuery script for detecting if a user has scrolled, in order to add the class sticky to the header.
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$("body.new-template #header").addClass("sticky");
} else {
$("body.new-template #header").removeClass("sticky");
};
});
And this is my css.
body.new-template #header {
position: relative; top: 0; left: 0;
}
body.new-template #header.sticky {
position: fixed; z-index: 100; width: 100%;
background-color: white; top: 0; left: 0;
-webkit-box-shadow: 0px 3px 10px #ccc;
-moz-box-shadow: 0px 3px 10px #ccc;
box-shadow: 0px 3px 10px #ccc;
}
What i am doing wrong?
Your issue is two fold.
Part One - A class not applied to the body tag
The header is being fixed by this specific selection in your CSS:
body.new-template #header {}
This is satisfied on the homepage as the body has a class new-template, and thus the header will be fixed.
However, on all your other pages, the body does not have this class, and therefore the #header is not being fixed.
You could remove the body.new-template from the selector in your CSS, or add the new-template class to the body tag of each page you want the header to be fixed on.
Part Two - A bug in chrome with transform + position fixed
There is then also a bug in Chrome relating to position: fixed and transforms. https://bugs.chromium.org/p/chromium/issues/detail?id=20574
You have a transform here which is breaking your position: fixed:
body.new-template #page {
position: relative;
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
So remove that and add the .new-template class to resolve your issue.
Put your code $(window).scroll(function() {... inside the $(document).ready(function() { please.
Related
I'm trying to animate a card using transition with css and can't seem it working.
Here's the source script:
.paper{
border: 0px;
width: 100%;
height: 100%;
border: 0px;
position: absolute;
top: 0;
left: 0;
}
.pagesfront,
.pagesback{
background-color: #fff3d6;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform-origin: left;
transition: transform 0.5s;
}
.pagesfront{
z-index: 1;
}
.pagesback{
z-index: 0;
}
.flipped .pagesfront,
.flipped .pagesback{
transform: rotateY(-180deg);
}
Is there something I'm missing in the class pages where the transition comes in or is there something else?
My guess is you're putting the class .flipped on the wrong html element.
You do realize that the parent element of .pagesfront or .pagesback needs to have the class .flipped in order to get the flipping animation working, right?
If that was your intention, never mind what I said. If you meant to trigger the animation by adding the .flipped class to either .pagesfront or .pagesback, you might need to re-write that CSS code like this:
.pagesfront.flipped,
.pagesback.flipped{
transform: rotateY(-180deg);
}
(note there is no space between .pagesfront/back and .flipped.)
thanks for the answer, sorry to take your time but it turns out all i need is reopen the browser, what a weird case
I applied a drop shadow filter to a image and now the image is offset by about 10 pixels.
Is there a way to keep the filter from adjusting the position of the image?
#Image_3 {
opacity: 1;
filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 1));
position: absolute;
width: 36px;
height: 36px;
left: 20px;
top: 20px;
overflow: visible;
outline: 1px dashed #000000;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<img src="data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABCCAMAAADQfyDnAAACH1BMVEVHcEwajvIehtcBf+QZmOIRLWUZs+9vyfYWmekBYLYAdN0DeM0jU5AAfd8BuPICdtzQ6f0b8/4p4v0IdNve7Pmq1fx9vPkBhuUAcN4VnesDauBInd8/js8ToPpDnfgAfN8Ag+QHf9sAfd0DuvQPct1Tqfg7c7Y0juoyY6gEuvkBsewB7f8ghPEmi+Rjp+4X7v8A8v8AfdwBoeMAnughUJUYP3sqds8Hsf8Cg/EO6f8eVrUCdckAjPkCuf1Pf8mNwPYBGmEZ0/sGqf8zd94AY90GFk0DD0EMJm0EE0gFdfMHe/cBad4CDD4GfvsEcu8WPKALhf8Fwf8IgfwDb+0ZRKQQMYoHGlIJH1UGGlkRiPoglv8dTbUOL4ATOI4LI1wIHGAKImMHb+UWOpgEXc4rpP8QL3YYQZoJWK0SQYwROYICRrADPp4Wj/8EasMmmvcDbOoJiv8GePUJeu4DULwKL3ATfOwRiv8Ezv8Igv8Gtv8AYuAEY9Ylm/8Iov8GsP8BZ+YD1P8AYN8Eyv8Sg/QaguUAZd8ckv8ABTQLkf8rr/8Inf8kWdMJmP8Gu/8CaugDbewAXNw6rf0FWMQcbcEfddARS5MaTqcPS6AxhM0UoOsFxv8C5/8MvvcH0P8fof4amNtIw/8Bbt4Hqv8gTsQBZeQAct4D2v8BY+MHpf89uf8ZQ64Tfr4KadAAd90Lh9IdZqI9nucnkegNyvscrvAC4P8osjCvAAAARXRSTlMA/olWEP4cCSv+tv79qJF4MUB3lhhYiGjqOc5NbfzC2kbD/lL9taTNxOvehOXRo8KY5Ke60+3Qy63nztvc9rBzuenI2u7GWd1wAAAIDUlEQVR4XqWX9XMd1x3F9wnBMsSqZZKpxiR20lDbpAy7+5CZmUHMzMwMZmYn6R/Y873Pb59ly3VSH/2wI82czz1fuHdG3C/X4U+4j9In27/7KH/Jl9vff1SEw9vb21+W/P/+su8B+M+vKqK84mRd0aWiorq6kyePlyMAET7/X4ZdB9Zd+rY6GtUFo9Go2TU9/a9/kB0CoeRs+Z4ZD5dJqLor30UiEbc7aNbpzC74p0cewA49ePA5V/znir0ABz7LA05eEe2RuMdjsSSisLue3J2e/vm1Hz+HDxiL9pryixe5IVVcKrVaS1fXdEFozQVRhB1yMw0M/KVBdvzdBnyT2XeApl33HT+utpb6EX/dvBY1P4Fc0ys/4Wxmhx7MznzzThfO78tk9p3nTn4rVwuCzWb3rb7YzP781BIlwN27K9cH8naSYfPo24CvM5lM5bmiUkFuk8sFPv7iRjg8+TRuCZJ/mgB5+/Xr7e0Dhs/e6mPZnyorY5WZyljm+b5MrOXlqRs9PZNP3Z6gx4wCpu8uX2+X3O1DQ0PtO1/vBhyvjMHbpOnQ6xsmJmZOOZ3wi0EdtgB+AH4aui7Zoa2hnfO7AMXrsWfaRkWjUmPs0Lelx8ac4ZstYjQYjJrvEsC1MzQ0ULCTaOoFHYzd1mq1DKAngNM5+dInejBKs9mFHpg3h7bgl+wG6MAugMo0r1XkAG0E6NlM+MRENKjDLiKE7mm7YYj8W8zO9Okbfaw4019vAkCpRBcY4Mapdb9PDNIu64I615O1HYMBfsk9C70R4Y8P5wBAAKUxD9gciSWwTHAjhNkcvLk1axiS7EyfSvt49OE9Akg9JMDIiOxHaGPZzGRBhFnDVsHeCeUjlJ0Y7N8LkA1PPr61uKYjmd1Ptzo7JTepry/fhYODD/cGZCcnb73SMbl07puGzs5Zg2QnHWb+khML994HeLy4bjFTI5+4LPFNQ1+fZCfd+UMJW6LBtxKwMcoAmJzcWHVbPFGzGQAizPb1dc7m3SS2jvsXuiSAUgJkR5zZ5bjPR++KJ/euWBI3QejrZHamR9TGiioJoFDmN5EiLCfsdr/oBgCINReupcV9s7PvTsH+qPef5QQYzAOkVUaE8AoWiYQIALg9ZhDc8ewdyQ31nqqgIQLA9kC76zItW/2RCAARqsHjdltA0Ikb2Ud5e29v79TUeST4N5oIwHwegPtMt3nZbveJhEh4LB6LG4q6XGL1q6ZHBftUb1EFVzzaBUB//Xyuix2O53icVmMj67yfIVoiHgSwQO64WfS+am1iANgJsHSJOwhA1718EzqaKlPJpF+t9toFv89OiJZ4FAEiot/Kl/rlG4tdw5SeADMzU6ErXI0KANZF1KBsiqWSS0mrXD2uFmyIAII/kvDyckGtVsu9fvnLW633ZI+mAJiBprp/z1WpRgF43QTNs1SyOdRsx9MsqOV+uP0we20C+4PVa5VX38rOtZ5CegJMzABQA4DUhKbmZPNSqLtlnAxyuG1ygGxWL08Am9cqVN9abDXJWAETEwBc5o4ee6MJgWbyB5a8gg0qLZWriWTjcTZ9fXZ19ePF4abWGXY+NHqaO35MqsEEAPyqQOOFFoG38jYrL4xD+PI2myB47VYCyJpaZQzQMNEwd5ErI0AuAgDMH2hqaI0LaJogtMRXqYU8z1tRiN0uvHy8mB0eHkb5ADQYFbW4zapRNgdqYyAUCqkC2kbjhCMTd8djK7JwOJxd9gsAeEtLvVaMcdEJQBoFEEBzhOOqbrMaWARTNwQA9nmCPQs9UHhyRLTaqBE2tfdVOEwAxwQB9B3pQxxXc78QwaQa7VepVAElve4g4FI4ibDMxsqjBYvh8JjDAQDza07jOhbffyNCfX99oBtt0DYphx2QbHhsbGRlZBVzBWCc3wj39Iw5IOQnQC09CMcA6MoPon4OhFD37duBQKC1tXXYcWHVLrfa+BygGv4eBylNAI3jEAedowhsEESYmzMFupeaQ2gGIM/W7eOCVc57rRiKuvTHHqfT2UaANgA6NBdzr/Jz6oLURxAUKneLJ5VKxd1+XAqczxNh3LZxA11JOxx6R1ubXq/v6MAMWA0sgkSor69vXPLJ7XZeLrf7eTX2CLKp+ZUb6bH0WJtDrze2NZD/IlpI2v+8UARttAmEkFv0+XCXRBEDhAR1y4ozDdHRmBEFcCAA09nfAiAVAYLWhCpSfh/sYksi4vdiC9dl6TaIOY1G+jScKIFZilAgYCOhRkVoPSHiURETETERG0kjNITg8NOnwfRDOSdFeIvAXliNJhBqXk/Flp5dGKahQ8xt1GgA0BuTf+Uk1YCgkhpJ08whmKODQkvSQEY9MoSSfysAys4ggkSgWRCBHslGJZOmIPwGjn60+Sq2SFIxIkgEhJgnAiGIQRSA8mokQP2Clta4oKICoYs9cNSH14g8BV4miqFVnP7NLkD5/teErvxGUR+YJALEYFSF4jIK2KWSKolAIdgwwMgjGAYs8MiuPQ3/XoTcNIEAgaaR6wUwkjAchUnxBfK/S0AVUojcXrMYRClIoZifv3qE21PlRYyAEAzBVoIgjMKEJVUqrtbi+Peo+CuUwULkUxCjIJOivrkG9verDGXsQrC1YMJo57qT7r9/6J/P4jOsjhwCDEAggAZDSY/ou4L4H1DJQSBYCjDyEGBCyVSqmXX/w4ij53IIMAjCKAsLC/2n0f1fqIqDVV8R4z75yTx64XLtoXLu16js7NGa/VXnrl27dvniF7VH3uf+L+4FFOAc3swQAAAAAElFTkSuQmCC") 0 0 no-repeat" id="Image_3">
Update:
It was an issue on my end. The image already had a drop shadow. The filter did not adjust the position of the image. I changed the title of the question slightly.
it's unlikely that your filter is moving your image, just taking up additional space with the drop shadow. you can either add additional padding/margin on the right and bottom sides of your image to account for the drop shadow, or offset the image top/left position to counterbalance the shadow
try
#Image_1 {
/* other styles */
margin-right:10px;
margin-bottom:10px;
}
or
#Image_1 {
/* other styles */
transform: translate(-5px, -5px);
}
I am trying to customize bxslider, a popular js carousel plugin, below is what I want to make it look like :
Well the thing I want to add is the drop shadow and the caption below the bottom for each image. as of now I have edited the css a bit to remove the default bxslider style like the borders and stuff.
FIDDLE HERE (this is what I could achieve so far. )
Now of course if all you want to do is add a box shadow to an image, you can do it easily, like so ::
<ul class="bxslider fade out">
<li><img src="img/bp-1.jpg" /></li>
</ul>
CSS ::
.bxslider {
margin: 0;
padding: 0;
}
.bxslider li {
position: relative;
display: table;
}
.bxslider li:after {
content: '';
height: 5px;
width: 90%;
position: absolute;
bottom:5px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-box-shadow: 0px 2px 15px rgba(0,0,0,.7);
box-shadow: 0px 2px 15px rgba(0,0,0,.7);
z-index: -1;
background: rgba(0,0,0,.2);
}
.bxslider li img {
width: 100%;
max-width: 300px;
}
P.S. I need to use pseudo elements because the box-shadow cannot be 100% of the img's width.
But adding a box-shadow to an image in bx-slider is a challenge , here's why ::
bx-slider adds a class called bx-viewport which has the following css overflow: hidden;, and so the box-shadow is never seen. If you remove the overflow:hidden , you will see the shadow , but the carousel will not function properly, the hidden slides will show up and you page will get a horizontal scrollbar (not what I want) .
OK so I have given you the backdrop, my problem is pretty simple , I just want to add a box-shadow to the images in the slide you can use this FIDDLE to experiment .
So how do I go about doing this?
You can check my approach on JSFiddle.
I have added title inside by using H3.
<li>
<div class="img-wrapper">
<img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
</div>
<h3>X1 UNFOLDED</h3>
</li>
Just wrap your images and apply box-shadow to that wrapper. Also add additional padding to .bxslider > li. JsFiddle Link
HTML:
<ul class="bxslider">
<li>
<div class="img-wrapper">
<img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
</div>
</li>
</ul>
CSS:
.bxslider > li {
padding-bottom: 20px;
}
.img-wrapper:after {
content:'';
height: 5px;
width: 90%;
position: absolute;
bottom:5px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-box-shadow: 0px 2px 15px rgba(0, 0, 0, .7);
box-shadow: 0px 2px 15px rgba(0, 0, 0, .7);
z-index: -1;
background: rgba(0, 0, 0, .2);
}
Also in this wrapper you could add caption for image. bx-slider just create slides from child elements of .bxslider.
Another thing you could do is adding height to .bx-viewport container, forcing it with CSS or javascript. Maybe it's not the best solution but it will do the trick.
This is how I added a box-shadow to my carousel images:
http://jsfiddle.net/Yq3RM/995/
.bx-viewport {
padding: 3px; /* add space for box-shadow of image to show */
}
.bxslider img {
box-shadow: 0 0 3px 0 #000;
}
I've searched everywhere for many weeks but I can't find an answer for my problem.
Is it possible to have an image inside a regular triangle?
I've seen many ways to create a shape or a mask, but I need a real triangle because I need to have several triangles next to each other, with some of them aligned upside-dwn, like in this= image:
http://www.tiikoni.com/tis/view/?id=d49c960
I've used color to divide the two types of triangle, but all of them have images instead colors.
I've tried using skewX, skewY and rotate, I have a sufficient result but it's not perfect:
<div class='pageTri2'>
<a href='#' class='option2'>
<img src='image.jpg'>
</a>
</div>
<style>
.pageTri2 {
overflow: hidden;
position: relative;
margin: 40px auto;
width: 250px; height: 250px;
display: inline-block;
}
.option2, .option2 img { width: 100%; height: 100%; }
.option2 {
overflow: hidden;
position: absolute;
transform: skewX(-25deg) skewY(45deg);
transform-origin: 50% 50% 0;
}
.option2:first-child {
transform-origin: 100% 0;
}
.option2:last-child {
transform-origin: 0 100%;
}
.option2 img { opacity: .75; transition: .5s; }
.option2 img:hover { opacity: 1; }
.option2 img, .option2:after {
transform: skewX(-20deg) skewY(-20deg) rotate(-50deg);
transform-origin: 0 100% 0;
}
.option2:first-child:after { top: 0; left: 0; }
.option2:last-child:after { right: 0; bottom: 0; }
</style>
Is it possible to have a perfect result?
Or maybe I'm thinking in the wrong direction?
Thanks
Ale
EDIT: I've done it!! Thanks to #Spudley for address me to SVG and thanks to #o.v. for the suggestion to use jsfiddle.
Here's my code: http://jsfiddle.net/wkJKA/
In all seriousness, having seen your mock-up image of what you're trying to achieve, I'd say drop the idea of doing it in CSS.
Stuff like this is much better done using SVG rather than CSS. CSS simply wasn't designed for creating complex shape patterns. It can do it, but it gets messy quickly, and for something like the effect you're after, you'll end up needing some extra HTML markup. SVG is designed for exactly this kind of thing, and does it well.
The only downside is lack of support for SVG in old IE versions, but there are work-arounds for this. (and in any case, old-IE support clearly isn't a priority for you, given that you're already using transform and other CSS that doesn't work with old IE)
use transparent png or simply do triangles with css. Here is a link to css shapes http://www.css3shapes.com
You could rely on specifics of border rendering to achieve a triangle-looking shape. The shape could then be added with pseudoelements.
.pointy:before {
border:50px solid transparent;
border-bottom:86px solid green;
border-top:0px solid transparent;/*renders looking like a triangle with 100px sides*/
width:0;
height:0;
display:inline-block;
content:"";
margin:0 -75px -5px 0; /*for a 50x50 icon*/
}
Fiddled
I'm getting incorrect look in internet explorer 7,6, etc. It started when I added float: right; to #social-share div tag. I tried setting display: inline-block; to it and clear: both; but nothing worked for me.
You can see the issue live. Here is my code:
HTML
<header>
<div id="inner-border">
<div id="header-wrapper">
<div id="social-share">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_preferred_5"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4db8643a1c09a1ff"></script>
<!-- AddThis Button END -->
</div>
</div>
</div>
</header>
CSS
header {
width: 100%;
height: 115px;
background: #120c09;
margin: 50px 0 0 0;
border-top: 1px solid #100b07;
border-bottom: 1px solid #100b07;
}
#inner-border {
width: 100%;
height: 103px;
margin: 5px 0 0 0;
border-top: 1px dashed #291a10;
border-bottom: 1px dashed #291a10;
}
#header-wrapper {
width: 900px;
height: 103px;
margin: 0 auto;
}
#logo {
height: 230px;
width: 205px;
position: absolute;
z-index: 99;
margin: -57px 0 0 0;
background: url("../images/logo.png") no-repeat;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
-ms-transition: 0.2s;
transition: 0.2s;
}
#logo:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.7;
}
#logo:active {
margin: -55px 0 0 0;
}
#social-share {
width: 280px;
float: right;
margin: -47px 0 0 0;
color: #fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
opacity: 0.2;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
-ms-transition: 0.2s;
transition: 0.2s;
}
#social-share:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
}
This is correct look:
This is inncorrect look (ie7, 6)
Ignore css3 related stuff, the problem is that in ie 7,6 everything is squeezed to the top and search bar appears in the middle instead of on the right.
Your top nav is breaking up in IE7 because it is not properly defined what goes where and how. First, your logo is sort of "floating" inside of your document, since it is positioned absolutely with no point of reference in its container, so lets start by fixing that;
Add position:relative to your #header-wrapper CSS rule so we can properly contain your logo within its boundaries:
#header-wrapper {
position:relative;
}
Next, we have to rearrange your logo to properly sit in the middle of your #header-wrapper div. Previously you were using margin: -57px auto 0 auto; to align your logo but since you are already absolutely positioning it you don't really need margin at all (a miracle it was even working at all), so let's do some mathematics to absolutely position your logo in the middle of your header wrapper div:
First, we eliminate that margin declaration and replace it with the following:
#logo {
left: 50%;
top:-57px;
margin-left: -102.5px;
}
Now, what did we do here? First we pushed your logo 50% from the left and then pushed it back with a negative margin by -102.5 pixels. Why did we do this? Because the left declaration pushes your element with width added to the calculation, so the push actually means "50% to the left + width of your element", so, we use the negative margin to compensate for the width, 50% - width/2. Here is a better explanation of the process.
After the two changes I listed are complete, you will find that the logo sits behind your slideshow area, this is due to the ie7 z-index bug and the fix is actually very simple:
header {
position:relative;
z-index:999; /* ie7 z-index bug fix */
}
We fix it by defining your header section as position:relative and give it a higher z-index than your slideshow area, this way your logo will be over your slideshow.
Now to fix your search bar from positioning itself to the left instead of the right we have to define your #social-share section as position:absolute and then push it to the right by using right:0, why? Because IE7 is positioning your search bar right next to the #social-share who is being pushed to the top by using a negative margin, and thus is not being removed from the stream as expected (was surprised it actually worked in modern browsers). So, define your #social-share section as absolute and the problem is solved:
#social-share {
position:absolute;
right:0;
}
And the final fix is a conditional class that we're going to use to target your #_atssh <div> tag to position it relatively to your document. IE7 is not taking it into account because it is absolutely positioned and so that long space is removed.
We can take advantage of your conditional classes added to your <html> tag by the boilerplate and target IE7 alone with a fix:
.ie7 #_atssh {
position:relative;
}
Note: There is probably a billion typos and grammar errors, I wrote it during lunch so I'll comeback to this in the future and fix them.
looks like you need a clearfix:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
add this to the element that contains your floated element
Based off what I can see (sorry, no IE6 or 7 available), you might be able to fix this by using position and top instead of using the negative margins like this:
Remove the margin: -57px 0 0 0; from #logo to be top: 0px;. Since you're already using position: absolute;, this should place the logo at the top edge of the screen for you.
Remove the margin: -47px 0 0 0; from #social-share and instead add position: relative; top: -47px;
Including the proper clear or "clearfix" mentioned by JKirchartz may also be required.
Add the CSS property zoom: 1 to <div id="social-share">, header-wrapper, or inner-border.
I like how quirks mode explains the issue of hasLayout which is an IE6 & IE7 specific problem: http://www.satzansatz.de/cssd/onhavinglayout.html.