HTML/CSS text around image - javascript

I have this problem that I can't solve. Basically, I want to do this: my problem
This is a screenshot of me putting the <img> into the p tags, but I am not happy with that solution. For example - What if I don't know the number of lines in my paragraph and I still want to centre the image ...
I tried solving this in css:
.container {display:flex; justify-content:flex-end}
.item {align-self: center}
This doesn't work because the container is also affecting the p element ...
So why don't I just put the img into another div? Well, this doesn't work either...
.img_container {display: flex; justify-content:flex-end; width:100%;}
.item {align-self: center;}
This doesn't work, because of the width of the img_container is affecting the p also and If I don't make the width:100%; than the div is useless and the img will not be at the right side as I wanted it to be ...
I found a lot of "wrapping text around an image" questions and answers that are pointed me to css align property, but I am using html5 and this does not work for me.
I also want to point out that I am not from an English speaking country so searching for topics is hard for me if I don't know the exact name of the topic. So if there is an entire thing based around this topic than please point me into direction of it and I will be happy to read it.
SOLUTION: I solved it with the shape-outside thing, but rather than calculating background I just added an img tag to the div ... it ended like this
img {position: absolute; top:100px;}

Here is an idea using shape-outside but you need to pay attention to browser support:
body {
max-width:600px;
}
p {
text-align:justify;
}
div {
shape-outside: inset(50px 0px 50px 0px);
background: url(https://lorempixel.com/400/200/) 5px 50px/100% calc(100% - 100px) no-repeat;
width: 200px;
height: 200px;
float: right;
}
<div></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis impedit libero esse odio excepturi fuga est ut itaque a quod suscipit, rerum asperiores. Consequuntur voluptates illo rerum recusandae pariatur asperiores, aspernatur, saepe ipsum error dolorem, quod inventore possimus modi deleniti tenetur et officiis. Nemo ab in totam ratione sequi error, ea dolorum repudiandae omnis, eaque facere impedit fugiat. Dolorum distinctio autem sequi enim quidem esse accusamus repudiandae voluptatum nobis, velit, m fuga labore dolores, autem blanditiis, dolorem error ex enim fugiat quisquam aut reprehenderit deleeriores unde? Tempora dolorem, ad quidem quis adipisci dolores tempore m fuga labore dolores, autem blanditiis, dolorem error ex enim fugiat quisquam aut reprehenderit deleeriores unde? Tempora dolorem, ad quidem quis adipisci dolores tempore</p>

From your screenshot, which you want to design, I think you had not use the flex property. Instead, you can use simple float: right for img. This floating img will wrapped by paragraph text. I will be happy if this is help you.

Related

How to display a maximum of two lines of text through CSS or javascript, and omit it if it exceeds

I am currently encountering a requirement. I hope that the text can be limited to two lines and the ellipsis must appear~ At present, I can use the following CSS method to complete it, but it seems that the compatibility is not very good. It will only work in chrome. If you use other browsers, it will work. invalidated. So I would like to ask everyone, how should we usually do this in a formal way? At the same time, it is compatible with all major browsers. Thank you for watching my question.
p {
width: 300px;
font-size: 14px;
font-weight: 500;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque, tempora, suscipit explicabo quos iure eveniet eaque veritatis perspiciatis ullam quibusdam amet. Debitis magni dignissimos cupiditate deleniti, eligendi expedita at eos vel tempora deserunt
iure delectus numquam et odio minus a natus excepturi odit magnam labore? Autem accusamus voluptates alias? Qui maxime itaque voluptate velit vero sit temporibus aliquid! Veritatis nesciunt quos mollitia ipsa eum enim sunt hic aut qui odio ex, rerum
fuga deleniti adipisci cumque, reprehenderit nihil pariatur quis officia voluptates. Dolorem sit, sequi veritatis obcaecati ratione dolore explicabo? Eum possimus voluptates pariatur similique eveniet repellendus, recusandae nihil quas!</p>
Try this using max-height property. and if content is greater than the max height you can add ellipsis using jquery and css.
p {max-height:32px;}
Try this fiddle,
JSFIDDLE

Double Scroll bars messing up lazy load behaviour

I have two vertical Scrollbars, which are placed parallely to each other. The thing is that I'm trying to implement a lazy load to my web page, but it isn't behaving as expected.
I want to fire the lazy load event only when the inner scrollbar is actuated, actually it's being fired when the outer scrollbar is actuated.
I'll post below a code snippet (extracted from internet, not the real one) that behave a bit as I mentioned before. Let's imagine I want to display the scrollbar coords only when the inner scroll is actuated. I hope I have explained myself well
window.addEventListener('scroll', () => console.log(scrollY))
html{height:5000px}
You can use the scrollTop property on the element that has the scroll.
Having said that, I would like to mention the Intersection Observer API that monitors elements (that you specify) and fire an event when an element intersects another element (ie. when an element enters the viewport for example). It is more performant and you have better control over what should happen and when it should happen.
const inner = document.getElementById("inner");
inner.addEventListener("scroll", event => console.log(inner.scrollTop));
body {
height: 5000px;
}
.inner {
height: 250px;
width: 250px;
margin-inline: auto;
margin-top: 25vh;
overflow-y: scroll;
}
<div id="inner" class="inner">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quasi labore veniam blanditiis perferendis ex repellendus. Consectetur error veritatis maxime ut quisquam odio iste fugiat, vel, dicta iure vero mollitia? Doloribus consequuntur eos
veritatis sunt corrupti maiores alias perferendis asperiores consequatur, illo, minus aut esse placeat quam itaque quos inventore ipsa eum aperiam? Optio, labore perspiciatis! Possimus sed ipsum suscipit vel perferendis porro quaerat consequuntur.
Totam quibusdam sit quas quae delectus doloremque consequatur minima? Adipisci facere quam ipsum ex sed alias molestiae temporibus! Voluptatum cum quae molestiae, ut fuga sint atque nam placeat dolores tenetur. Doloribus odit placeat ea corrupti!
</p>
</div>

Fix division at the middle of the container

I have three different divisions in a single container. div toolbar, div one and div two. I am trying to make toolbar, div one stick to the same place of the screen. and I also want to make sticky the div.fixed-header, only the contents inside div.fixed-header-contents should
be scrollable and shouldn't go behind the divisons above it. I have tried postion sticky and fixed but the div.fixed-header-contents overlaping the previous divisions.
Here's the example :
.toolbar{
border : 1px solid;
position : sticky;
z-index : 1000;
top: 0;
}
.fixed-header{
border-top : 1px solid;
border-bottom : 1px solid;
}
/* .one{
position : fixed
} */
<body>
<div class="toolbar"> // I want this div to be stick to the current position
<h4>
toolbar
</h4>
</div>
<div class="one"> //I want this div to be stick to the current position
<h3>
some images
</h3>
<h3>
some buttons
</h3>
<h3>
some contents
</h3>
</div>
<div class="two">
<div class="fixed-header"> //I want this div to be stick to the current position
<h4>
fixed header items
</h4>
</div>
<div class="fixed-header-contents"> //this div should be scrollable but should not overlap the previous screen
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</div>
</div>
</body>
To solve this problem you need to know .toolbar and .one height. You can set to the top property as an absolute value in the CSS, or if don't know to use Javascript to get height of elements.
For the scrollable container (fixed-header-contents) we need to add an extra wrapper, since we restrict viewport then overflow the child element with the min-height: 100%.
document.addEventListener('DOMContentLoaded', function() {
const toolbar = document.querySelector('.toolbar');
const one = document.querySelector('.one');
const two = document.querySelector('.two');
const toolbarHeight = toolbar.getBoundingClientRect().height;
const oneHeight = one.getBoundingClientRect().height;
one.setAttribute('style', `--toolbar-height: ${toolbarHeight}px`);
two.setAttribute('style', `--one-height: ${toolbarHeight + oneHeight}px`);
});
.toolbar,
.one,
.two {
position: sticky;
z-index: 1000;
}
.toolbar {
border: 1px solid;
top: 0;
}
.one {
top: var(--toolbar-height);
}
.two {
top: var(--one-height);
}
.fixed-header {
border-top: 1px solid;
border-bottom: 1px solid;
}
/* for scrollable */
.fixed-header-contents {
overflow: hidden;
height: 5rem;
display: flex;
}
/* for scrollable */
.scrollable {
min-height: 100%;
overflow-y: auto;
}
/* not important */
section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
<div class="toolbar">
// I want this div to be stick to the current position
<h4>toolbar</h4>
</div>
<div class="one">
//I want this div to be stick to the current position
<h3>some images</h3>
<h3>some buttons</h3>
<h3>some contents</h3>
</div>
<div class="two">
<div class="fixed-header">
//I want this div to be stick to the current position
<h4>fixed header items</h4>
</div>
<div class="fixed-header-contents">
<div class="scrollable">
//this div should be scrollable but should not overlap the previous screen "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</div>
</div>
</div>
<section>
<h1>section 1</h1>
</section>
<section>
<h1>section 2</h1>
</section>

Two column layout. Scrolling anywhere on the page should scroll the right column

I have a two column website, however the user must focus in on the right column to scroll the main content. If the user is focused on the left-hand link bar nothing happens. I tried coding a script that will scroll the right column no matter where the user's mouse is. It does not feel natural and barely scrolls.
Here is my attempt: https://jsfiddle.net/knfg9Lqp/4/
Here is my website(scroll only works on right div): maxmastalerz.com
How could I go about making it non-laggy and fluid with the right amount of scroll?
I could probably use a plugin, however I'm leaning away from that idea.
$(document).bind('mousewheel', function(e){
var delta = (e.originalEvent.wheelDelta/120)*3;
var y = $('#right').scrollTop(); //your current y position on the page
$('#right').scrollTop(y-delta);
});
#left {
background-color: gray;
float: left;
width: 30%;
height: 150px;
}
#right {
background-color: aqua;
float: left;
width: 70%;
height: 150px;
overflow-y: scroll;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="left">
Link 1
Link 2
Link 3
</div>
<div id="right">
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</div>
TRY SCROLLING UP AND DOWN USING YOUR MOUSEWHEEL OR TOUCHPAD
Why are you dividing and multiplying? If you simply use var delta = e.originalEvent.wheelDelta; the scrolling looks right
https://jsfiddle.net/knfg9Lqp/5/

Facebook Modal Popup that Prevents Scroll on Main Page

See the Facebook comment modal box in the below. I'm trying to achieve a similar effect whereby a user clicks on a button and then it opens up a popup/modal box. This box will allow scroll within the new box (as it could be many pages of text), but will disallow scrolling outside of the modal on the main page. How do I achieve a similar effect where the modal allows scrolling within the modal window but not elsewhere? Thanks.
Usually this works by doing the following:
Adding height:100% to body and html tags.
Adding overflow: hidden to body when the modal is showing.
Basic Demo: jsFiddle
$("body").on("click", function(){
$("body").toggleClass("modalview");
})
html, body {background:#666; color:#FFF; margin: 0; padding: 0; height:100%;}
#content {
padding:1em;
width:90%;
margin:0 auto;
}
#modal {
/* hidden by default */
display: none;
/* box */
width:75%;
height:75%;
padding:1em;
position: fixed; z-index:1;
overflow: auto;
/* center modal vertically and horizontally */
left: 50%; top: 50%;
transform: translate(-50%,-50%);
/* style */
text-align: center;
background:#FFF;
box-shadow:1px 1px 15px #000;
color:#000;
}
/* prevent page scrollbars in modal view */
body.modalview { overflow:hidden; }
/* show #modal in modal view */
body.modalview #modal { display: block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="modal">
<p>All UR SCROLLS ARE BELONG TO US!!!</p>
<p>Et velit odit cumque hic, aspernatur. Perferendis assumenda est necessitatibus cupiditate cum odit deleniti doloribus earum veniam dolores, neque laudantium laboriosam optio numquam autem iure animi ipsa dolor fugit blanditiis?</p>
<p>Unde quidem sunt quos itaque minus, quia modi nisi temporibus. Consectetur natus perferendis possimus, rem, sed tempora cumque dolorum quod provident blanditiis eum ipsam voluptate dolor, harum doloremque id amet.</p>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda quas, rem voluptas et, totam officia quos, quaerat doloribus eaque odio aperiam a obcaecati explicabo quod eveniet eum aliquid! Repellat.</p>
<p>Vitae ipsum explicabo voluptatibus corrupti odio ipsa, tenetur modi veritatis excepturi architecto nam dignissimos ratione. Iusto temporibus ipsum cupiditate excepturi modi eos alias dolores eveniet possimus. Alias, esse error quam!</p>
<p>Ea numquam quae laborum ut vitae molestias dolorum fugit, asperiores aliquid voluptates vero ab consequuntur ipsum maxime obcaecati temporibus voluptate sed quaerat, necessitatibus deleniti. Quibusdam iste saepe inventore amet eius.</p>
<p>Aut veritatis quos quaerat, placeat nam est ad tempora delectus magnam molestiae, ipsum cupiditate debitis illum perferendis ut nisi beatae voluptas provident consectetur inventore assumenda eveniet? Molestiae architecto ullam nulla.</p>
<p>Explicabo, debitis? Mollitia reiciendis sint minus adipisci, consectetur consequatur assumenda blanditiis pariatur ex facilis expedita et earum molestiae quos, laborum sed suscipit doloribus placeat ipsam in vero quaerat aliquid iure!</p>
<p>Earum dolorem eveniet laboriosam vel dolor! Ullam nisi adipisci voluptatem, voluptatum tenetur, itaque ducimus laboriosam repudiandae quibusdam numquam dignissimos aperiam praesentium culpa porro sapiente ab eos magni? Maiores, doloremque, aspernatur.</p>
</div>
In my approach, I used a CSS class for body to toggle the overflow state. When body gets the class (.modalview) it will hide content below the fold and remove scrollbars from page while showing the actual modal.
jQuery is used to apply the class to body and show #modal through a on click function.
For demonstration sake, I made the #modal show up when you just click on the page, you can bind the function to a button click, like so:
$("#myButton").on("click", function(){
$("body").toggleClass("modalview");
})
To see this properly, load up the jsFiddle demo and play with the page width to see how the scrolling is changed.

Categories

Resources