Fella's!
I'm trying to create the same effect as the iphone search bar on the homescreen.
When you click on the body of my page, a bar will appear and the rest of the page will become blurry. Now there is a problem, The white bar on the top should have a hard border but on the bottom the blur of the .page gets over it. I tried to change the z-indexes but it seems that there is not the solution.
Can someone help me with this?
Your blur effect is bleeding into the header div. Give your .page section overflow: hidden; to avoid this.
jsfiddle
Just add simple line in .page to avoid outside blur effect:
overflow:hidden;
Working DEMO
Related
There are so many questions about Chrome and css transitions that I'm not sure if this has been asked before.
My situation is this: I have a layout that is basically a left and right split page. A box of content from the right side needs to be displayed over the content on the left side (I have no say in this, the design between desktop and mobile makes this necessary). The issue comes when transitioning images that are in the left side. The images are 0 opacity by default and displayed by applying an .active class to the appropriate image that sets its opacity to 1. I'm using css transition to animate it.
When the animation takes place, the box from the right side disappears until the transition is finished. The images in the left side do not layer over the top of it, it's not a background issue, and no matter what I set the z-index of the left and right side the right side box positioned over the left content disappears until the transition is finished.
Code example
<div>blah</div>
<div>another div</div>
<p>meh</p>
Here's a plunker to illustrate the issue (only occurs in Chrome): http://plnkr.co/edit/G2Ohg01PodUKN1xi2izq?p=preview
(seriously, you have to include code to link to plunker, what's the point of plunker then?)
None of the other issues I've seen have addressed this situation. Everything else I've seen has been about issues with the transitioning elements themselves and not elements in completely different code blocks positioned over those transitioning elements.
Any ideas on how this can be overcome or should I just tell the designers "deal with it"?
I'm just gonna take a stab in the dark and assume it's the white text. It's the only thing that's disappearing on the page when the transition is enacted.
your rule for .rightside .right-content has some CSS that's causing this behavior. Remove it and you should be good to go.
Your code:
.rightside .right-content {
position: relative;
z-index: 1;
padding: 1em 1em 3em;
/* overflow:hidden; ------------- Commented this.*/
float: left;
box-sizing: border-box;
width: 100%;
}
The .rightside container isn't allowing its overflow to be displayed, and the transitions are failing to animate this.
Your demonstration returned:
http://plnkr.co/edit/5C2cCZqnB4x7MTdeCGAn?p=preview
Codepen Alternative:
http://codepen.io/anon/pen/BzEkEP
I am trying to make use of the transition css rule but my problem is all the content inside the div is bunched together when the transition is idle and not being moused over. Once you mouse over the content in the div, or the title in my example, is stretched out to full form.
Is there a way to make the title stretch out on one line the way it should look while the box is not being moused over?
Here is a jsfiddle of an example of my code: http://jsfiddle.net/3W2hC/
.title {
width:420px;
text-align:center;
Thanks in advance.
EDIT: I was able to do this. By adding a width. However, there is now a scroll bar. How do i go about removing the scroll bar?
If you want the content to be cut off inside of the div, just give your div overflow:hidden in your css.
In your case it will be:
#main {
overflow:hidden;
...
}
Here's a fiddle: http://jsfiddle.net/3W2hC/1/
I'm working on a website, and no matter what I do, I can't seem to get the side navigation bar to repeat. Because the bar is floating, I've created an image and told it to repeat. But it won't. Am I missing a step?
Here is the code for the bar:
#leftColumn {
margin-top:0;
padding-top:30px;
background:url(http://www.cnam.ca/uploads/images/left-column2.png);
background-repeat: repeat-y;
}
You can check out the problem at this website http://www.cnam.ca/annual-workshop
Looking at the #leftColumn element in Chrome developer tools, I see that the issue is with the height of the div, not the background-image. Your div height is only as tall as it requires to contain all the content. Adding height: 600px to that element confirms this, as the background image repeats.
You should look into faux-columns to achieve the result you're looking for.
http://alistapart.com/article/fauxcolumns
I was trying out the on hover scroll bar style that is used in many places but ran into a problem. The appearance of the scroll bar on hovering causes text to jump which looks jarring.
#scroll {
width: 200px;
height: 200px;
overflow: hidden;
}
#scroll:hover {
overflow-y: scroll;
}
This Fiddle shows the jumping text on mouse hovering
Could I somehow prevent the jumping of text while keeping the appearance of scroll bar on hover?
just use <p> tag for your text like this:
http://jsfiddle.net/pdbYz/6/
UPDATE for firefox:
http://jsfiddle.net/pdbYz/19/
I propose to have another container within div#scroll with fixed, slightly smaller width.
This way your text won't 'jump' when scroll appears. Since scrollbars have different width on different OS (Windows, Mac, Linux) you should leave some free space to the right, where scrollbar appears.
Please see my fiddle here: http://jsfiddle.net/5RXSW/
To make containers more visible I've applied paddings and background colors. You can tweak these styles for your needs, but please reserve some pixels to the right of div#scroll for scrollbar.
You can change the width of the container on hover, so that when the scrollbar appears, it pushes outwards instead of inwards. This prevents the text from moving.
http://jsfiddle.net/pdbYz/3/
To achieve this I've added this line to your CSS:
#scroll:hover {
width: 360px;
}
Got stuck here: http://jsfiddle.net/UFkg8/
Right now the animation is top-down. What do I need to change to make it bottom-up?
If I change top to 100%; in .mask then it works but it also doubles the div's height and creates a scrollbar.
I've seen that you don't want to modify the .post, but why not add overflow:hidden; to it? This jsfiddle works for me (at least it does in Chrome).