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).
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 have a fluid width site with a logo centered in the header area. The logo stays in the center regardless of the window size. Works in all browsers except ie9. In ie9 it is stuck on the right. If I could get it stuck on the left that would be an ok compromise but the right will not do. My best guess is that ie9 does not support the css code:
.logo {
width:100%;
position:relative;
}
.logo img {
margin-left:auto;
margin-right:auto;
display:block;
}
Here is the website http://www.cyberdefenselabs.org/
Anyone know a workaround for ie9 that will not affect other browsers or involve drastic recode?
Your .social-header-wrap element contains floating elements that are not properly cleared. Add this style:
.social-header-wrap {overflow:hidden}
The person above is correct - you have floats that are not properly cleared.
But you should sort out your layout before making style changes as you have the same main menu 3 times but with 1 of them hidden and 1 (the first one) with white on white links.
Simply removing the first main menu (the div with the class "social-header-wrap") also solves the problem.
When using
margin:auto;
you should say
margin:0 auto;
Get rid of margin-left and -right and change to margin:0 auto;
Also the containing element needs to be text-align:center which you undo by putting text-align:left in the element you are centering.
Is it possible to use border-radius on a div (in Chrome and Opera) so that the inner div background would also be affected? If not, how else can this effect be achieved?
Example: http://jsfiddle.net/fE58b/1/
It works well in IE9 & FF7.
Thank you.
It works if you just move the background image from #content to .box:
.box {
background:url(...so_70s_background.jpg) top left repeat;
}
Also if you really need to have the borders in a separate div, you can always add new divs outside the box:
<div class="box-outer">
<div class="box">
<div id="content"></div>
</div>
</div>
Just make sure to apply:
.box-outer {
width:500px;
height:500px;
position:absolute;
}
So, as Cristi stated above, some browsers seem to have a little trouble with clipping overflowing children along the curved border of their parents. It appears that, in order (for at least Webkit) to render child overflow affected by parent border-radius, both parent and child must be statically positioned.
Furthermore, even with this static positioning, it appears that setting an opacity value for the child element will cause it to break the overflow boundaries of its parent (if I had to guess, I'd imagine this has something to do with the opacity value triggering hardware accelerated graphics, in which case a 3D-transform will produce the same glitch).
Luckily, you can use an absolutely-positioned grandparent control the dimensions and position of its static children, and rgba on background and text to simulate element opacity. I just so happen to have a jsfiddle snippet demonstrating some of these workarounds which you might find helpful.
user following to solve border radous issue
border-radius: 20%; /* FOR ALL NEW BROWSER OF HIGHER VERSION*/
-webkit-border-radius: 20%; *FOR ALL OHTER OLD BROWSER*/
-moz-border-radius: 20%; /* FOR MOZILLA FF*/
I'm trying to implement a div slider into a standard iScroll HTML page, please see the below links:
With iScroll (slide not working properly):
http://utvecklingspunkten.se/iscroll.html
Without iScroll (slide working):
http://utvecklingspunkten.se/iscroll2.html
For some reason, iScroll hides the content (not the div containing it!) in the second div slide. The div containing the content is there allright and it's corretly possitioned (have a look in the console), but the content is simply hidden by iScroll. When removing all references to iScroll, as in iscroll2.html, everything works as it should.
Wrapper containing both slides:
#wrapper {
position:absolute; z-index:1;
top:45px; bottom:2px; left:0;
background:#aaa;
-webkit-transition-property: left;
-webkit-transition-duration: 400ms;
display:block !important;
}
Each sliding element:
.additional-block {
position: absolute;
display:block !important;
}
Does anyone know how I can make iScroll and the slider to work together, and not interfere? Hopefully, there's only a line of code or two in iscroll.js that need to be changed. Likewise, an iScroll div (like the artificial scrollbar) overlaping my second slide div is another possible reason. Pointing this out for me would be greatly appreciated. Thanks!
Try using jQuery Slider, you can style it inside out. Plus you have there already mouse dragging and scrolling ( which actually works ).
Just a quick question regarding CSS positioning. I have several "segments" on my site which are 100% wide (fills the screen), and I want them floated next to each other. So only the first one will be visible, the other ones will be off-screen. I've tried playing around with positions and the overflow property without luck. Right now they just pop down below each other instead of floating.
This would work perfectly if the elements did not exceed the screen width, but as they do, they just pop down as I said earlier. I've tried setting a huge width to the "wrapper", something like 99999px. And then setting the segments to 100%, but that will just fill the whole 99999px width instead of the screen.
Any ideas?
JSFiddle example: http://jsfiddle.net/9xGPb/
Do you mean like this?
Example Fiddle: here
I used my favourite alternative to floats, inline-blocks
if you actually take it out of the fiddle it has some pretty (gaudy?) colours which show that it allows for the min-width: 900px; on the centered_content div to work too, and I removed the absolute positioning for the menu so the content would go below it, for demo only but you may find it useful..
let me know if any good or if you have any questions
Updated with some jQuery and to make corrections for default word-spacing
New Example: here
re: the IE6/7 hack rightly mentioned in the comments;
.segment {
display: inline-block;
overflow: hidden;
width: 0;
}
.segment {display: inline !ie7;}
needn't be a "parse hack" if that's your preference as long as that second rule is given to [lte IE 7] somehow, and separately at that it cannot be combined into the original rule with the * hack or anything, it won't work.. has to be in a separate ruleset.
I discovered word-spacing might be a problem if relying on width to hide, the natural behaviour of inline blocks is to put 3-4px between the elements like the space in between words, the workaround to this is to correct the word-spacing on the wrapper
.segment-wrapper {
white-space: nowrap;
word-spacing: -4px;
}
then restore it normal for the actual content divs, same place as you would restore the normal wrapping behaviour
.centered_content {
width: 900px;
margin: 0px auto;
background: #fcf;
white-space: normal;
word-spacing: 0;
}
and last, apart from this was fun.. there's 2 effects in that new fiddle - uncomment and comment the other.. forgive me I was playing! :)
The meaning of float is to try to float to the right or left unless there is not room for it.
This means that you cannot ever float an element off the page.
If you need to keep the element off the page, you will need to use a different positioning mechanism like position: absolute.
It sounds like you're creating a horizontal one-page portfolio. I've recently been working on something similar.
Using your fiddle I've set the .segment class to
.segment {width:90%;height:90%;position:absolute;}
and then offset each left positioning further off the screen
#home {background-color:red;left:5%;}
#work {background-color:yellow;left:105%;}
#portfolio {background-color:green;left:205%;}
#contact {background-color:blue;left:305%;}
http://jsfiddle.net/9xGPb/2/
I also added some jQuery logic to switch views for the divs.
I'm still not entirely sure which segments you want to start off the page but this jsfiddle uses positioning to shove the #two div off to the right: http://jsfiddle.net/EdAZP/1/
Which part of your example did you want to start off the page?
Did you try to just hide the other elements and toggle them with some javascript (jQuery is much easier)?
http://api.jquery.com/toggle/