I have to add an animation to a fixed position DIV, that contains a modal window.
Without the animation css instruction (animation:navslide .5s ease forwards;), the modal window works as expected, occupying the entire screen. However, with the css animation, the modal window shows up inside the fixed position DIV.
Why is the modal window behaving like this? Is there any way for the DIV to have an animation, that does not intrude in the modal window's positioning in the page?
Here is a demo of the issue.
First of all, why do You have modal inside header element - this is wrong. Usually it is best to put modal element in body or other root element. Your demo fixed below.
<div class="wrap">
<div class="topHeader">
<button onclick="document.getElementById('id01').style.display='block'">Open Modal</button>
</div>
<div id="id01" class="modal">
<div class="modal-content">
<span onclick="document.getElementById('id01').style.display='none'" class="close">close</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum sagittis ipsum, vitae
ultrices libero blandit at. Curabitur blandit porta turpis, eu tincidunt tortor ultrices ac. </p>
</div>
</div>
<div class="pagecontent">
<h1>A title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum sagittis ipsum, vitae ultrices
libero blandit at. Curabitur blandit porta turpis, eu tincidunt tortor ultrices ac. Phasellus tempus risus
molestie, porttitor odio eget, varius mi. Nullam rutrum, justo eu sollicitudin gravida, enim quam
scelerisque enim, id pharetra orci lectus nec magna. Sed imperdiet tortor ex, id pulvinar nulla tincidunt
vitae. Duis commodo aliquam mi, id pretium eros ornare vitae. Praesent ac nunc eget nisl mattis consectetur
nec quis orci. Etiam elit nunc, molestie et tortor ac, tristique aliquet metus.</p>
</div>
But if You want to keep the modal inside the header I can't help You as there's some overflow conflict in header because of translate.
Related
I'm trying to use background image on wordpress however it isn't working any help would be appreciated.
I have used inline styling for background image as I found other answers on here saying to do this but it still won't work.
<div class="container">
<div class="left" style =" <?php echo get_template_directory_uri(); ?>background-image: url('/img/img/6c0bfc47-d8d3-41f4-9c17-7fca574b5efc.jpg');">
</div>
<div class="right">
<h1>Windows and Glass</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium dui a tortor facilisis, a ornare enim pretium. Duis turpis neque, porta tincidunt vehicula vitae, congue sed elit. Aliquam erat volutpat. Pellentesque lacinia ipsum vulputate, pretium ligula vitae, auctor augue. Ut volutpat ipsum quis ligula cursus, et pulvinar elit sollicitudin. Duis eu interdum libero. Sed dignissim fermentum eros id dapibus.</p>
</div>
</div>
I got an ul with multiple li, what I need is that each li fit 50% of the view-port width, floating to the right, and a dynamic height, because could be expanded and collapsed, but without affect the full row.
This is how it should look normally:
This is how it should look with an item expanded:
I tried in so many ways but without successful. Is important to me not to use javascript for it, just CSS.
check this link: codepen.io
<div class="collapse">
<input id="big-text-collapse" type="checkbox">
<label for="big-text-collapse" onclick>Big text</label>
<div class="collapse__content">
<strong>I'm always collapsible</strong>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat lectus mi, vel consectetur massa vulputate in. Donec vestibulum, dui non facilisis congue, ex nisi bibendum urna, in lacinia enim dolor sed risus. Nunc tristique malesuada mauris, at
accumsan velit aliquam vitae. Sed ultricies risus sit amet velit consequat lacinia. Sed non ornare erat. Suspendisse convallis velit dapibus orci sollicitudin malesuada.
</p>
</div>
I'll try and explain this challenge... I have three divs, ordered for mobile first in a bootstrap WordPress theme.
[1] NAV
[2] CONTENT
[3] SIDEBAR
This code, works fine:
<div class="container">
<div class="row">
<div class="col-md-4"><p>NAV</p></div>
<div class="col-md-6 col-md-pull-right" ><p>MAIN CONTENT : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et diam et erat imperdiet scelerisque ac a leo. Etiam eu ultrices tortor, a aliquet felis. Morbi sit amet placerat mi. Nulla feugiat id sem non faucibus. Nunc tortor turpis, faucibus non nisi sit amet, bibendum tincidunt arcu. Duis id risus porttitor, porttitor massa eget, elementum ligula. Proin ullamcorper, lacus quis porta luctus, dolor enim hendrerit massa, varius gravida est ipsum quis elit. Quisque ex felis, commodo a placerat non, egestas eu turpis. Praesent sit amet lobortis tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta nibh non erat suscipit, et rhoncus mauris finibus. In hac habitasse platea dictumst. Quisque quam mauris, sagittis ut orci eget, tempor sollicitudin nunc. Mauris consequat ex quis dolor viverra, ac dictum eros dapibus.</p></div>
<div class="col-md-4 col-md-pull"><p>SIDEBAR</p></div>
</div>
</div>
However, on full desktop view, the sidebar displays after the main content finishes, and I need it to display directly beneath the left hand side nav - i.e.
[1 ------ NAV -------] [2------------------CONTENT -----------------]
[3 ----SIDEBAR----] [2------------CONTENT CONTINUED-----]
------------------------- [2------------CONTENT CONTINUED-----]
Instead, it displays like this.
[1 ------ NAV -------] [2------------------CONTENT -----------------]
________________[2------------CONTENT CONTINUED-----]
________________[2------------CONTENT CONTINUED-----]
[3 ----SIDEBAR----]
I don't usually do advanced CSS like this, and have been let down by my contractor, if anybody could help, and at least let me know if this is possible or not that would be much appreciated.
Also this is my first post here, so apologies if this isn't in standard format etc.
Regards
Simon
I would like to wrap a text div around its sibling image div. Not to be confused with the standard way to wrap text around an image, but with two separate divs.
The example is below:
<div style="width:1000px;">
<div>
<img src="some url" />
</div>
<div>
<p>Some very long text here</p>
</div>
</div>
I want to make it look like the text is wrapping around the image.
Is this possible?
Float the div containing the image left or right.
<div style="width:1000px;">
<div style="float:left">
<img src="some url" />
</div>
<div>
<p>Some very long text here</p>
</div>
</div>
jsFiddle example
Here is a similar way to do it:
http://jsfiddle.net/Sux2Z/
<div>
<img src="http://cdn.memegenerator.net/images/80x80/1167066.jpg" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus.
</div>
.div {width:400px;}
img {
margin:0 10px 10px 0;
float:left;
}
Test this JS Fiddle in Chrome or Safari on Lion and Mountain Lion.
What should be displayed is a box that scrolls. Once you start scrolling, the bar should appear, and disappear once again when you stop scrolling. In Lion and Mountain Lion, it doesn't. Anyone know of a fix to show the scrollbars?
HTML:
<div id="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis scelerisque aliquam. Nulla consequat justo malesuada mi imperdiet sodales. Morbi rhoncus, diam nec egestas sagittis, ipsum eros sollicitudin urna, quis ornare erat nisl scelerisque eros. Nulla eleifend posuere tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in diam commodo sapien mollis cursus. Integer vitae lacus augue. Proin a velit augue. Quisque at mi augue, a sagittis metus. Aenean id bibendum nunc. Nulla quis eros odio. Sed non leo diam, et sollicitudin leo. Cras ut nibh diam, a mattis felis. Proin lectus massa, fermentum sit amet aliquet id, posuere a dui. Morbi vulputate elit elit. Proin in mi turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis scelerisque aliquam. Nulla consequat justo malesuada mi imperdiet sodales. Morbi rhoncus, diam nec egestas sagittis, ipsum eros sollicitudin urna, quis ornare erat nisl scelerisque eros. Nulla eleifend posuere tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in diam commodo sapien mollis cursus. Integer vitae lacus augue. Proin a velit augue. Quisque at mi augue, a sagittis metus. Aenean id bibendum nunc. Nulla quis eros odio. Sed non leo diam, et sollicitudin leo. Cras ut nibh diam, a mattis felis. Proin lectus massa, fermentum sit amet aliquet id, posuere a dui. Morbi vulputate elit elit. Proin in mi turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis scelerisque aliquam. Nulla consequat justo malesuada mi imperdiet sodales. Morbi rhoncus, diam nec egestas sagittis, ipsum eros sollicitudin urna, quis ornare erat nisl scelerisque eros. Nulla eleifend posuere tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in diam commodo sapien mollis cursus. Integer vitae lacus augue. Proin a velit augue. Quisque at mi augue, a sagittis metus. Aenean id bibendum nunc. Nulla quis eros odio. Sed non leo diam, et sollicitudin leo. Cras ut nibh diam, a mattis felis. Proin lectus massa, fermentum sit amet aliquet id, posuere a dui. Morbi vulputate elit elit. Proin in mi turpis.</p>
</div>
CSS:
#box {
height: 300px;
overflow: auto;
margin: 10px;
}
This problem is "real" in that previous posters have shown a real difference in appearance in Apple's Mountain Lion operating system.
But the scroll behavior still works, in other examples I see on the internet and on the "Test this" link of the opening post.
The problem is that the default user setup in Mountain Lion causes the scroll bars to be hidden so the user does not see them. And the default "natural" scroll wheel or track pad (Magic Pad) direction is opposite of older systems or PC's. These two aspects lead to confusion.
With the default settings, the scrolling region will scroll if the mouse arrow is over the block (even though the scroll bars are not present), and will appear if one moves in the proper direction. The default "natural" (as Apple calls it) direction is that the scroll wheel or the track pad moves the object itself in the "natural" direction (as opposed to the window moving on the object). There is a setting on the Mac to reverse this, but that will make the Mac's direction opposite of the direction on Apple's touch tablets.
The real problem is the confusion to the user caused by the hiding of the scroll bars, so they don't realize that they CAN move the area with a scroll wheel if mouse cursor is over. And furthermore the user must have a track pad or scroll wheel for it to even work, but that is needed for the most part to even navigate the Mountain Lion operating system itself.
The user can change the Mac's setting in the Personal General setting to "Show scroll bars: Always". But that is of little help to the CSS or website developer.
I suggest we complain to Apple about this. Main alternative is just not use the feature of scrollable area in a window of a website.
Here is a jQuery plugIn that does what you need.
http://naeka.github.com/jquery-scrollbar/
you'll need
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="jquery.scrollbar.min.js"></script>
<script type="text/javascript" src="demo.js"></script>
Use classes <div id="page"> <div class="scrollBox"><div id="scroll1"><p class="left">
Example: http://jsfiddle.net/pullapooh/3aGDK/
Seems to work for me on linux mint, how about trying:
overflow:scroll;