I have a dojo titlepane that contains a button on the left-hand side and a paragraph of text on the right-hand side. I would like to be able to vertically center align the button in regard to the paragraph of text and would like to avoid using tables. I need a solution that will work in IE7+. For whatever it's worth, I'm using Dojo 1.3.2 (yes...I know it's old). The titlepane is initially closed until the user decides to open it.
Here's an example of the titlepane contents:
<div>
<div style="float: left; margin-bottom: 5px; margin-right: 5px;">
<input type="submit" name="access" id="access" value="Access" STYLE="font-size:8pt" />
</div>
<div style="float: right; margin-right: 5px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat vulputate tortor, sit amet malesuada quam vulputate vel. In hac habitasse platea dictumst. Vivamus ut rutrum nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent rhoncus nisi vitae augue tincidunt elementum. Phasellus a lorem dolor. Aliquam erat felis, ultrices eget lacinia non, rutrum a massa. Mauris et est dui, ut rutrum orci. Curabitur pulvinar porta risus, ac lobortis lorem volutpat ut. Etiam fringilla hendrerit diam at faucibus. Donec condimentum lacinia sem, quis aliquet mauris tincidunt nec. Ut sit amet urna lectus, vel volutpat ipsum. Aliquam erat volutpat. Proin id orci sit amet turpis sagittis adipiscing nec nec enim. Maecenas vulputate, velit a commodo ultricies, nisl nisl tristique lorem, ut lacinia mauris felis eget velit. Vestibulum sit amet dictum tellus.</p>
</div>
</div>
It's also worth mentioning that I do not know the height of my container, as I know there are solutions out there where the container height is hard-coded in css.
My solution is working, but only on IE8+ (maybe my ieTester is wrong, so You should check it). You will have to modify your HTML a little:
<div>
<div style="margin-bottom: 5px; margin-right: 5px; display: table; ">
<p style="display: table-cell; vertical-align: middle; width: 50px;">
<input type="submit" name="access" id="access" value="Access" STYLE="font-size:8pt ;" />
</p>
<div style="float: right; margin-right: 5px; width: 300px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat vulputate tortor, sit amet malesuada quam vulputate vel. In hac habitasse platea dictumst. Vivamus ut rutrum nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent rhoncus nisi vitae augue tincidunt elementum. Phasellus a lorem dolor. Aliquam erat felis, ultrices eget lacinia non, rutrum a massa. Mauris et est dui, ut rutrum orci. Curabitur pulvinar porta risus, ac lobortis lorem volutpat ut. Etiam fringilla hendrerit diam at faucibus. Donec condimentum lacinia sem, quis aliquet mauris tincidunt nec. Ut sit amet urna lectus, vel volutpat ipsum. Aliquam erat volutpat. Proin id orci sit amet turpis sagittis adipiscing nec nec enim. Maecenas vulputate, velit a commodo ultricies, nisl nisl tristique lorem, ut lacinia mauris felis eget velit. Vestibulum sit amet dictum tellus.</p>
</div>
</div><!-- display: table; end -->
</div>
So first of all:
You have to wrap div with p inteo div containing input so it know how hight it is.
Add this wraper display: table style.
Put an extra element to wrap the input, this element must have those CSS float: left; width: somepx and display:table-ceill.
Remember to give width: somepx to the div with p (Your text).
Try to use CSS classes instead of inline styles.
PS
Allways remember to put jsfiddle: http://jsfiddle.net/jnCU4/
Related
I've been trying to create something like this for my blog page. Idea is that text of blog and thumbnail are 50/50 until image ends. After image the text should become 100% of page width. Options like placing image in Wordpress editor or text-wrap don't work because I want to add styling line next to text content which is 50%.
I've considered that maybe I should work out a jQuery/Javascript solution which splits the words and adds them form 50% div to 100% div after 50% div extends the height of the image.
Has anyone familiar with solution like this. What are the options for me?
For image:
float: left;
width: 50%;
This will allow you to wrap the text around your image and set image width to 50% of your container.
The only issue will be with the border, I am still not sure how to do it the best way.
.pretend-it-is-an-image {
height: 100px;
width: 50%;
background-color: blue;
float: left;
margin-right: 20px;
color: white;
text-align: center;
}
<span class="pretend-it-is-an-image">Image</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac nulla vitae nulla consectetur sollicitudin ac vel nisi. Ut fringilla erat augue, quis accumsan nisl aliquet a. Sed tempor libero est, non iaculis leo dignissim quis. Duis sagittis tristique libero. Mauris iaculis mauris eget convallis posuere. Aliquam iaculis tempus nunc. Quisque facilisis mauris arcu, eget lacinia neque elementum eget. Mauris tincidunt nunc suscipit ipsum vulputate, non congue nibh laoreet. Duis nisi lectus, tempus ut mauris id, hendrerit semper enim.
Phasellus commodo faucibus mauris ut commodo. Suspendisse ornare imperdiet nulla sed malesuada. Aenean et pharetra nibh. In auctor purus a mollis venenatis. Pellentesque sodales lorem urna, nec vestibulum massa interdum ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc erat ligula, egestas luctus mattis vitae, hendrerit quis sem. Proin tincidunt suscipit ligula id efficitur. In sed nisi scelerisque, tincidunt turpis eu, euismod dui. Donec bibendum malesuada massa sed vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque convallis pulvinar justo. Phasellus egestas, mi sit amet vehicula laoreet, lorem sapien ultrices mi, sit amet ornare erat orci eu ex.
Maecenas ultrices blandit cursus. Aenean sed elit sodales, pharetra dolor eu, condimentum enim. Donec vitae venenatis mi. In ut quam tristique ex aliquam gravida. Vestibulum a maximus dui. Proin enim diam, imperdiet tincidunt nulla dictum, tincidunt consectetur diam. Phasellus varius faucibus tristique.
</p>
Where to make a change?
You mentioned Wordpress, so these changes usually go into single.php file. For more information about where to make changes, see this: https://developer.wordpress.org/themes/basics/template-hierarchy/
try:
<img src="images/subjects/sub.jpg" align="left" style="width:45%; border-right:2px solid #000; padding:7px; margin-right:7px;"/>
I will try ti keep it as simple as possible! This is my first time using locomotive scroll while I am testing my code out I am not able to scroll all the way below. The scroll bar is visible but but I am not able to scroll or drag it using the mouse. I seriously spend hours to find any solution for this issue here but had no success yet. It will be great if someone can help me out to solve this issue here. Thank you for your time
const scroller = new LocomotiveScroll({
el: document.querySelector("[data-scroll-container]"),
smooth: true,
multiplier:.70
});
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 100px;
}
#about-section{
height: 400vh;
}
.font{
position: relative;
padding: 30px;
font-size: 70px; ;
}
.text{
position: absolute;
border: 3px solid white;
height: fit-content;
width: 50%;
right: 0;
margin-top: -100px;
}
.mb-8{
margin-bottom: 5em;
}
p{
font-size: 50px;
}
.container{
padding: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/locomotive-scroll#3.5.4/dist/locomotive-scroll.css"
/>
<link rel="stylesheet" href="/main.css" />
<title>Document</title>
</head>
<body>
<div data-scroll-container>
<section class="sec1" data-scroll-section>
<h1>Section 1</h1>
</section>
<section id="about-section" data-scroll-section>
<div class="container">
<div id="about">
<h2
class="font"
data-scroll
data-scroll-sticky
data-scroll-target="#about-section"
>
About
</h2>
<div class="container text">
<p class="mb-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
pretium, ante sed lacinia ultricies, sapien massa ultricies
erat, eu tristique justo est ut tortor. In nibh est, porttitor
vulputate erat et, faucibus volutpat felis. Curabitur eleifend
nisi quis consectetur euismod. Morbi ac condimentum ante.
Aliquam euismod sodales arcu et iaculis. Cras porttitor nisl
felis, eget interdum magna cursus et. Curabitur vehicula
dignissim ornare.
</p>
<p class="mb-8">
Cras lacinia sit amet justo ut maximus. Integer sapien felis,
gravida a commodo et, porttitor non libero. Maecenas lacinia
accumsan eros eu dapibus. Mauris dolor odio, vulputate vitae
purus vitae, tincidunt egestas orci. Maecenas sollicitudin
fringilla justo, id tempus metus elementum sit amet. Nullam
vestibulum mauris vitae condimentum sagittis. Suspendisse sed
purus vel neque ullamcorper ornare egestas vel ligula. Duis ac
mattis odio. Aliquam sodales turpis nec diam maximus, nec
fermentum massa mollis.
</p>
<p>
Praesent finibus egestas velit, vitae tristique leo luctus sit
amet. Vivamus eu facilisis neque, a venenatis mi. Vestibulum
ultricies venenatis arcu sit amet fringilla. Curabitur non
tincidunt sem. Sed quis quam ut nulla tincidunt dapibus quis ac
lorem. Nulla lobortis ac metus ut molestie.
</p>
</div>
</div>
</div>
</section>
<section id="client" data-scroll-section>
<div class="container">
<div id="client-section">
<h2 class="font" data-scroll data-scroll-sticky data-scroll-target="#client">
Client
</h2>
<div class="container text">
<p class="mb-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
pretium, ante sed lacinia ultricies, sapien massa ultricies
erat, eu tristique justo est ut tortor. In nibh est, porttitor
vulputate erat et, faucibus volutpat felis. Curabitur eleifend
nisi quis consectetur euismod. Morbi ac condimentum ante.
Aliquam euismod sodales arcu et iaculis. Cras porttitor nisl
felis, eget interdum magna cursus et. Curabitur vehicula
dignissim ornare.
</p>
<p class="mb-8">
Cras lacinia sit amet justo ut maximus. Integer sapien felis,
gravida a commodo et, porttitor non libero. Maecenas lacinia
accumsan eros eu dapibus. Mauris dolor odio, vulputate vitae
purus vitae, tincidunt egestas orci. Maecenas sollicitudin
fringilla justo, id tempus metus elementum sit amet. Nullam
vestibulum mauris vitae condimentum sagittis. Suspendisse sed
purus vel neque ullamcorper ornare egestas vel ligula. Duis ac
mattis odio. Aliquam sodales turpis nec diam maximus, nec
fermentum massa mollis.
</p>
<p>
Praesent finibus egestas velit, vitae tristique leo luctus sit
amet. Vivamus eu facilisis neque, a venenatis mi. Vestibulum
ultricies venenatis arcu sit amet fringilla. Curabitur non
tincidunt sem. Sed quis quam ut nulla tincidunt dapibus quis ac
lorem. Nulla lobortis ac metus ut molestie.
</p>
</div>
</div>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll#3.5.4/dist/locomotive-scroll.min.js"></script>
<script src="loco.js"></script>
</body>
</html>
I found the solution for this problem it was actually the position property in CSS as you see here I added a class called text
<div class="container text">
<p class="mb-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
pretium, ante sed lacinia ultricies, sapien massa ultricies
erat, eu tristique justo est ut tortor. In nibh est, porttitor
vulputate erat et, faucibus volutpat felis. Curabitur eleifend
nisi quis consectetur euismod. Morbi ac condimentum ante.
Aliquam euismod sodales arcu et iaculis. Cras porttitor nisl
felis, eget interdum magna cursus et. Curabitur vehicula
dignissim ornare.
</p>
<p class="mb-8">
Cras lacinia sit amet justo ut maximus. Integer sapien felis,
gravida a commodo et, porttitor non libero. Maecenas lacinia
accumsan eros eu dapibus. Mauris dolor odio, vulputate vitae
purus vitae, tincidunt egestas orci. Maecenas sollicitudin
fringilla justo, id tempus metus elementum sit amet. Nullam
vestibulum mauris vitae condimentum sagittis. Suspendisse sed
purus vel neque ullamcorper ornare egestas vel ligula. Duis ac
mattis odio. Aliquam sodales turpis nec diam maximus, nec
fermentum massa mollis.
</p>
<p>
Praesent finibus egestas velit, vitae tristique leo luctus sit
amet. Vivamus eu facilisis neque, a venenatis mi. Vestibulum
ultricies venenatis arcu sit amet fringilla. Curabitur non
tincidunt sem. Sed quis quam ut nulla tincidunt dapibus quis ac
lorem. Nulla lobortis ac metus ut molestie.
</p>
</div>
and the style of the class text is something like this
.text{
position: absolute;
border: 3px solid white;
height: fit-content;
width: 50%;
right: 0;
margin-top: -100px;}
so as soon as I removed position: absolute; from the code my error was resolved. And I removed position: relative; from the class .font as well and then I got the output as I expected. Hope this will help in future.
After click the "Click" button
From the above images, you can see that the box is cropped after click. I want the Liquid Slider auto expand when I click the button to add the height of the box.
Understand that this slider come with the auto height function that detect the height of the content. But it doesn't work if I added $(".bxspace1").animate({height: "+=15"});
I refer the code from Liquid Slider, you can check here. Hoping that some of you could provide me with some advice. Thanks!
$('#slider-id').liquidSlider({
hoverArrows: false,
dynamicArrows: true,
});
function increaseFontSize1() {
$(".bxspace1").animate({height: "+=15"});
}
.ctnbox2 a{width: 196px; float:left; border:3px solid #75b653; margin: 0 6px; background-color:#fff; color: #75b653; }
.bxspace1{height: 200px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/js/jquery.liquid-slider.min.js"></script>
<link href="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/css/liquid-slider.css" rel="stylesheet"/>
Click
<div class="liquid-slider" id="slider-id">
<div>
<h2 class="title">Panel 1</h2>
<div class="ctnbox2">
<a href="#">
<div class="bxspace1">
<div class="tiwbckg">
<div class="floatleft condo"></div>
<div class="floatleft">
<h2 class="maintitle1"><main_content>Condominium</main_content><br/><br/></h2>
</div>
<div class="clear"></div>
</div>
<div class="boxtxt1">
<div class="boxtitle"><main_content>Sed Congue Egestas</main_content></div>
<p><main_content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec augue a lorem iaculis vehicula.</main_content></p>
</div>
</div>
</a>
</div>
</div>
<div>
<h2 class="title">Panel 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
<div>
<h2 class="title">Panel 3</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h2 class="title">Panel 4</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>
<br/><br/>
So easy but I never realized, just use the same method and apply it to class="liquid-slider".
$('.liquid-slider').animate({height: "+=10"});
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a Bootstrap affixed navbar, but when i try to scroll to a div, the navbar overlays the div text, so i can't read it.
Actually i can not know of your scenario from very little code provided. Anyways i have come up with related demo here. Have a look, see if it helps you.
Here in following we would scroll Down to Header Level 3 content having class scrollStop.
My Approach:
1) Finding position of Header Level 3 from top using offset().top
2) Finding outerHeight() of < header > having class header.
3) Now Top Position - Header Height helps us to get actual position to scroll by removing header's height.
4) Finally animate scroll to that position.
Working : Demo
$(".scroll").click(function()
{
var scrollPos = $(".scrollStop").offset();
scrollPos = scrollPos.top;
var headerHeight = $(".header").outerHeight();
var actualPos = scrollPos - headerHeight;
$("body,html").animate({'scrollTop': actualPos});
});
body
{
margin:0px;
}
.header
{
margin:0px;
display:block;
left:0px;
top:0px;
position:fixed;
width:100%;
height:50px;
background:rgba(180,30,30,0.7);
}
.container
{
margin:55px auto 0px auto;
background:#ccc;
width:90%;
padding:10px;
border-radius:10px;
}
.title h1
{
text-align:center;
}
.container > div
{
display:block;
width:90%;
background:#2b2937;
color:#eee;
padding:10px;
margin:10px auto;
border-radius:10px;
}
.scroll
{
position:fixed;
color:#fff;
text-align:center;
background:#34D2E3;
padding:10px;
border-radius:5px;
right:0px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
</div>
<span class="scroll">Scroll Down<br> Click</span>
<div class="container">
<div class="title">
<h1>Dummy HTML Text</h1>
</div>
<div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3 class="scrollStop">Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
I found how to fix it using the ScrollTo plugin, I changed my code like so:
$("#a-politica-comercial").click(function() {
$('body').scrollTo($('#politica-comercial'), 800, {offset:-110});
});
I changed the offset to reduce some pixels in the final position, so now I have the div with the correct text!
Thanks anyways!
Is it posible to make text left aligned on a slanted line? it's alignement should follow the slanted slanted image with required support for IE9+?
My example code :
img {
display: block;
float: left;
transform: rotate(-5deg);
margin: 0 15px;
}
<div>
<img src="http://placehold.it/150x250&text=img" alt="image" />
<p>Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu,luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, paragraph.</p>
</div>
Using LESS
You guys made me think a bit more outside of the box, so I came out with my own ugly solution.
My idea is to add a bunch of extra square elements and calculate its size:
.loop(#i) when (#i > 0){
.loop((#i - 1));
.space#{i}{
width: floor(#i*#hSize/(1/tan(5deg)));
}
}
#hSize: 15px;
.space {
float: left;
clear: left;
width: #hSize;
height: #hSize;
}
HTML:
<p>
<span class="space space1"></span>
<span class="space space2"></span>
<!-- (...) -->
<span class="space space11"></span>
Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, paragraph.
</p>
Proof of concept: http://codepen.io/Tymek/pen/jEypOX?editors=110
#chipChocolate.py, it was just a matter of principle for me NOT to use JavaScript for this. If anyone wants to write JS/jQuery code based on my solution, you're welcome. Please share it here afterwards.
WARNING: The shape-outside property should not be used in live projects1. This answer is here just to show how the desired output can
be achieved with this property.
Here is an example using the shape-outside property (modern webkit browsers only) :
DEMO
img {
display: block;
float: left;
transform: rotate(-5deg);
margin: 0 20px;
-webkit-shape-outside: polygon(0 3%, 85% -3%, 100% 97%, 15% 103%);
shape-outside: polygon(0 3%, 85% -3%, 100% 97%, 15% 103%);
}
<div>
<img src="http://placehold.it/150x250&text=img" alt="image" />
<p>Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu,
luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in,
paragraph.</p>
</div>
1The CSS Shapes Module Level 1 actually (mai 2016) has the status of "Candidate Recommendation". As this means it is a work in progress, it may change at any moment and therefore should not be used other than for testing.
The same layout could be achieved with the shape-inside property and specify a containing box for the text but no browser I know of supports this property today.
For a cross browser approach please see Tymek's answer.
img {
display: block;
float: left;
transform: rotate(-5deg);
margin: 0 15px;
}
p {
transform: skew(6deg);
font-style: italic;
}
<div>
<img src="http://placehold.it/150x250&text=img" alt="image" />
<p>Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu,
luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in,
paragraph.</p>
</div>
I can't give you a code example, this is more complicated than a skew transform.
You must parse the text and the related DOM contained in it and look for each new lines of text (not br or \n but each first character of every rendered line).
With this information you can add a padding-left calculated from the images position and dimension.