How can I get these paragraphs to vertically align? - javascript

I'm using jquery cycle to fade between a few slides. These slides are of a fixed height but they contain p tags that contain text of varying lengths. I've created this jsfiddle to show you what I mean.
The problem I'm having is that I want the p tags within these slides to be vertically aligned - I want the copy to sit nicely in the center of the div. Usually when working with dynamic content like this, I'd put the p tags in a wrapper, then calculate the height of the wrapper on page load using js and position accordingly (which is why I've tagged this as javascript - I may need to use it for the solution if I can't use css).
Anyway the reason I can't seem to use js is because the p tags are within hidden panels. I can only access the size of the elements once the parent becomes visible which means I'd no doubt have to set up a callback just after a slide is made visible to do the positioning then. The downside of that is the content will jump while the js calculates the position.
One solution would be to use a table with vertical-align in the table cell, but I'm not sure it'd be semantically correct to put p tags within a td? (someone correct me if I'm wrong). Is there a purely css solution I can use here, that'll also work in ie7?
Here is the html I have:
<script src="http://ajax.aspnetcdn.com/ajax/jquery.cycle/2.99/jquery.cycle.all.js"></script>
<div id="cycle-wrapper">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem vitae arcu dictum, quis dictum arcu cursus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem vitae arcu dictum, quis dictum arcu cursus.</p>
</div>
</div>
The css:
#cycle-wrapper { width: 340px; height: 300px; border: 2px solid red; }
#cycle-wrapper div { width: 340px; height: 300px; text-align: center; }
The script:
$(function() {
$('#cycle-wrapper').cycle();
});
Thanks
EDIT: I have got it working with tables here but I'd love to find a purely css solution if possible!

You can make your <p> visible only after the alignment has been calculated, so there is no "jumping" paragraph.

If you don't mind use the css display property and add separating elements,
Check my perfect version on http://jsfiddle.net/m29uu/3/
#cycle-wrapper {
width: 340px;
height: 300px;
border: 2px solid red;
display:table;
}
#cycle-wrapper p {
width: 340px;
height: 150px;
display:table-row;
}
#cycle-wrapper span {
text-align: center;
display:table-cell;
vertical-align:middle;
}

PURE CSS WAY
Not sure i understand your req. but i think this achieves what you want, one way of doing it would be to push the upper-most div using margin-top to the middle of parent div, which will automatically push the other div below it!
DEMO : http://jsfiddle.net/logintomyk/YTZYQ/
HTML
<div class="divCent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem vitae arcu dictum, quis dictum arcu cursus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem
CSS
#cycle-wrapper .divCent { width: 340px; height: 300px; text-align: center;
margin-top:25% /* this is what i added **/
}
EDIT
After comments from Onimusha, here is another fiddle, implemented on his link http://jsfiddle.net/logintomyk/7AJy5/1/

Quick CSS Solution
Add the following css
#cycle-wrapper div > div {
display: table-cell;
vertical-align: middle;
}
and add a second div wrapper around the paragraph tags for the new css to apply to. It worked on the fiddle.

See this link http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
It is possible to vertically center without the jQuery cycle element.
But when the plugin is added the alignment was not proper.
I am not very much aware of this plugin but try changing the default options as mentioned in jQuery Cycle Plugin's option reference.

your Div have id "cycle-wrapper". and all the paragraph within this Div..
use
$("#cycle-wrapper").css("vertical-align:middle");
you can apply any css like the following way
$("element").css("propertyname","value");
Set multiple properties and values:
$(selector).css({property:value, property:value, ...})

Related

How to make full page/window width image inside limited width container and next to sidebar?

I need to make an image inside bootstrap's container. Image in div .full-image should be from the left to the right browser window. I know how to make it in single container, but in this example I have a menu left sidebar that is must to be. I need help with javascript/jquery script. Script should read the size of the browser window and keep the picture all the time on the left and right side of the window when the window reduces size(for mobiles, tables etc) and be full responsive.
img {
max-width: 100%; /*bootstrap responsive images*/
height: auto;
}
.full-image {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class='container'>
<div class='row'>
<div class='col-3'>
<ul>
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
</ul>
</div>
<div class='col-9'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam condimentum tempus tellus ac auctor. Phasellus sit amet elit bibendum, vehicula elit interdum, ultricies nisl. Pellentesque aliquam vulputate purus, sit amet ultricies nisi bibendum non. Ut lacinia, arcu ut hendrerit euismod, magna ligula dignissim sapien, vitae commodo mauris velit id elit. Maecenas eu porta quam. Vivamus mollis dolor et viverra ultrices. Ut vitae consequat sapien. Praesent vestibulum consequat nisi, at posuere sem maximus vel. Sed egestas, dui egestas ultrices lacinia, mi elit eleifend risus, vitae pulvinar felis magna eu libero. Etiam et massa purus. Phasellus hendrerit sit amet metus eget sodales.</p>
<img src='http://blogs.worldbank.org/africacan/files/africacan/small_better_small.jpg'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam condimentum tempus tellus ac auctor. Phasellus sit amet elit bibendum, vehicula </p>
<div class='full-image'>
<img src='http://upload.wikimedia.org/wikipedia/commons/b/b3/Campania_banner_View_from_Capri.jpg'>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam condimentum tempus tellus ac auctor. Phasellus sit amet elit bibendum, vehicula elit interdum, ultricies nisl. Pellentesque aliquam vulputate purus, sit amet ultricies nisi bibendum non. Ut lacinia, arcu ut hendrerit euismod, magna ligula dignissim sapien, vitae commodo mauris velit id elit. Maecenas eu porta quam. Vivamus mollis dolor et viverra ultrices. Ut vitae consequat sapien. Praesent vestibulum consequat nisi, at posuere sem maximus vel. Sed egestas, dui egestas ultrices lacinia, mi elit eleifend risus, vitae pulvinar felis magna eu libero. Etiam et massa purus. Phasellus hendrerit sit amet metus eget sodales.</p>
</div>
</div>
</div>
To show your image based on your screen size don't bother too much with CSS coding. I would suggest you, use #mediaQuery of CSS. It would provide your image responsive support according to screen size.
-- Add below like code in your CSS and you will find your images responsive according to your screen size. You can enhance according to your requirements further. I feel this would be the best way to acquire responsiveness for your page.
#media only screen and (max-width: 600px) {
img {
max-width: 100%; /*bootstrap responsive images*/
height: auto;
}
.full-image {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
}
-- I am attaching a outcome of using above code in your CSS. How it will look like in responsive outcome you can take a look.
-- Feel free to ask further queries. Thanks!

CSS Accordion in AngularJS with no directive - fixed height issue

I was hoping to prove how cool and easy AngularJS is with a small Accordion example, the whole thing is pretty simple, in my Controller I have an array and I have a ng-repeat where I bind some data and apply a css rule when the $index of the ng-repeat matches a scope variable. It's all simple stuff like so, here is my controller (I've reduced some of the text for this example).
$scope.paymentTypes = [
{name: 'Visa', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ac sem non molestie. Mauris eu tempor nisi. Praesent vitae porta lectus. Maecenas risus eros, feugiat eget vehicula at!'},
{name: 'Master Card', text: 'Mauris eu tempor nisi. Praesent vitae porta lectus. Maecenas risus eros, feugiat eget vehicula at, scelerisque ac nisi. Nunc tristique, ipsum eu gravida dignissim, lacus turpis dapibus enim, ut viverra neque sem ac lectus. Sed sit amet auctor est. Nulla sit amet felis magna.'},
{name: 'Paypal', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ac sem non molestie. Mauris eu tempor nisi. Praesent vitae porta lectus. Maecenas risus eros, feugiat eget vehicula at, scelerisque ac nisi. Nunc tristique, ipsum eu gravida dignissim, lacus turpis dapibus enim, ut viverra neque sem ac lectus. Sed sit amet auctor est. Nulla sit amet felis magna.'},
{name: 'Bitcoin', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ac sem non molestie.'}];
$scope.selectedType = null;
$scope.togglePayments = function (index) {
if ($scope.selectedType === index) {
$scope.selectedType = null;
} else {
$scope.selectedType = index;
}
}
and here is my ng-repeat in my view...
<div data-ng-repeat="ptype in paymentTypes track by $index" data-ng-click="togglePayments($index)">
<div class="row u-padding-vert-s">
<div class="col-xs-6 payment-type" data-ng-bind="ptype.name"></div>
<div class="col-xs-6 text-right"><!-- put a logo here later --></div>
</div>
<div class="row u-slide-down" data-ng-hide="selectedType !== $index">
<div class="col-xs-12" data-ng-bind="ptype.text">
</div>
</div>
<div class="row">
<div class="col-xs-5 u-border-top-1"></div>
<div class="col-xs-2 toggle-tab text-center">
<span class="icon-ic_list_arrow_down"></span>
</div>
<div class="col-xs-5 u-border-top-1"></div>
</div>
</div>
and here is the css I have created to prove the sliding open and close animation:
.u-slide-down {
transition: .3s linear all;
overflow: hidden;
background: yellowgreen;
height: 200px;
}
.u-slide-down.ng-hide {
height: 0px;
}
Pretty cool, however this example relies on all hidden divs being the same height. In the real world I would prefer the hidden div to be flexible with its height and be more dynamic! As the content is different and may even contain HTML at some point. Now when I set my css to height: auto; in the .u-slide-down class the animation is lost. I don't want to have to write a directive for this as I want my example to be as simple as possible, so can anyone suggest what I can do to my CSS to allow dynamic heights and retain the animation? In the meantime, I'll try to put something together in https://jsbin.com... give me a sec!

text overflow inside a html tag

I am searching for a solution for text overflow inside a html.
in my project I am using angularjs, so basicly I tried to make a directive without any success.
for example lets say i have the following html tag:
<div style="height=10px;witdh=5px"> text text
sLorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis quis iaculis tellus, et feugiat orci. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Vestibulum id condimentum neque. Vivamus nec
bibendum tortor. Donec mi sapien, rutrum sit amet sagittis eu, consectetur non lectus.
Cras vitae porttitor assa. Phasellus odio mauris, placerat in luctus nec, malesuada et
mauris. Donec neque dui, gravida sit amet iaculis vitae, ultrices a enim. Sed mi mauris,
pharetra eget facilisis id, vestibulum laoreet quam. Etiam interdum nisi non massa
pellentesque
</div>
i am looking to get some text from the innerHTML text and then 3 point such as ... if there is a height overflow
Here's a quick snippet I just wrote up.
JSFiddle
This allows for multi-line ellipsis checking by using the width and height of the box and continuing to remove characters until the contents fit inside the box.
$(function(){
$(".overflow-box").each(function(){
$("body").append("<div class='overflow-hidden'/>");
$(".overflow-hidden").css("width", $(this).width()+"px");
var i = $(this).html().length;
while($(".overflow-hidden").html($(this).html().substring(0, i--)+"...").height() > $(this).height())
{}
$(this).html($(".overflow-hidden").html());
$(".overflow-hidden").remove();
});
});
To accomplish this for your <div> above you'll need the following:
height: 10px;
width: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
On a slightly different note, your inline CSS is incorrect. CSS property-value pairs are separated by a colon like so:
<div style="height: 10px, width: 5px, white-space: nowrap, overflow: hidden, text-overflow: ellipsis;">

Indent a block of text from the second row

I want make format my text:
title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et turpis urna. Phasellus magna elit, tempus ut accumsan posuere, suscipit vel ligula. Vestibulum mauris massa, venenatis non dignissim vestibulum,
to look like:
title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et turpis urna.
Phasellus magna elit, tempus ut accumsan posuere, suscipit vel ligula. Vestibulum
mauris massa, venenatis non dignissim vestibulum,
I'm interesting in any solution without add change text manually.
Any help would be appreciated.
A fast and dirty solution:
<pre>
<!-- your text stuff -->
</pre>
HTML
<div class="title">title</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et turpis urna. Phasellus magna elit, tempus ut accumsan posuere, suscipit vel ligula. Vestibulum mauris massa, venenatis non dignissim vestibulum,
</div>​
CSS
​.title { float: left; }
.title:after { content: '-'; display: inline-block; margin: 0 5px; }
.text { overflow: hidden; }​
jsFiddle Demo
The title is floated left, and overflow: hidden; is used to establish a new block formatting context. You can do this with any overflow value other than the default visible.
The only thing in this that is not absolutely cross-browser is the :after pseudo-element (which works from IE8), but you can simply use a static - in your HTML instead. I have chosen to do it this way because it is cleaner and there is no unnecessary styling in the markup.
For the title you could use something more semantic like an appropriate header (h1, h2, etc.).
Playing with margin and text-indent along with the :first-line pseudoclass you could achieve the desired effect: here's the relevant CSS
p { text-indent: -2.35em ; margin-left: 2.35em }
p:first-line { margin-left: -2.35em }
Example fiddle: http://jsfiddle.net/nb88K/
Be aware that the chosen value is strictly dependent on the width of "title" word.
As a sidenote, If you could change the markup itself I would instead suggest to move that word from your text to a content property of a :before pseudoclass — the fact that your text is a title, from a semantic point of view, should be conveyed through the choice of the element (so I would chose a <hn> tag)

use css for alignment and filling

I want to have a div that contains two other divs, a top div and a bottom div. The top div should be aligned to the top and have a auto-height, which depends on the content of the top div. The bottom div should fill out the empty area of the parent div.
I would like to make the alignment only with the use of CSS. I don't want to calc any positions or sizes by myself.
I tried the following:
1) http://jsfiddle.net/2dUxa/
Problem: If the parent is resized the bottom-div should move some pixels downwards.
2) http://jsfiddle.net/Th4Mn/
Problem: If the parent is resized the bottom-div should become smaller.
A solution with the use of javascript might look like this: http://jsfiddle.net/2dUxa/7/
Is theire a solution without the use of javascript?
Well, how about this: http://jsfiddle.net/2dUxa/3/
I change both div to position: relative, and give the bottom a height: 100%.
Then, set the #main overflow: hidden;
Use this below markup and css..
This is with your code check this and below is my code
​<div id="main">
<header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis congue auctor. Proin iaculis blandit erat, nec vestibulum orci ultricies eget. Suspendisse viverra posuere urna, eu eleifend leo imperdiet at. Nulla lobortis, erat elementum placerat sagittis, est tellus hendrerit quam, quis iaculis leo est et mi.</p>
</header>
<footer>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis congue auctor. Proin iaculis blandit erat, nec vestibulum orci ultricies eget. Suspendisse viverra posuere urna, eu eleifend leo imperdiet at. Nulla lobortis, erat elementum placerat sagittis, est tellus hendrerit quam, quis iaculis leo est et mi.</p>
</footer>
</div>
​
​#main{
width:80%;
height:300px;
position:relative;
background:#ddd;
}
header{
width:100%;
height:auto;
position:absolute;
top:0;
left:0;
background:#aaa;
}
​footer{
width:100%;
height:auto;
position:absolute;
bottom:0;
left:0;
background:#777;
}
Check here running code... ​

Categories

Resources