Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I need scrollY position of searched text. How to find text in body and get scrollY position of the found text.
Following code is an example about question:
(all is clear)
<script>
function getScrollYPosition(var str){
/* step 1: search str in <body> and found.
* step 2: get scrollY position of found str.
* step 3: return position. (500)
*/
}
</script>
<body>
<p>Hello world</p> /*For example scrollY position is 500*/
<p>...</p>
<p>...</p>
</body>
You could first match the text string,
wrap it into an (span) element
and than calculate that element offset position
Here's a quick example
var word = 'dolor';
var rgx = new RegExp('\\b('+word+')\\b', 'ig');
// CREATE SPAN ELEMENTS WHAT WILL WRAP THE QUERY STRING (WORD)
$('div, div *').contents().filter(function() {
return this.nodeType === 3;
}).each(function() {
$(this).replaceWith($(this).text().replace(rgx, "<span class='match'>$1</span>"));
});
// COLLECT ALL SPAN POSITIONS
var positions = $('.match').map(function(){
return this.getBoundingClientRect().top;
}).get();
alert(positions);
div{font-size:50px;}
span.match{background: gold;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut voluptatum, provident saepe. Culpa animi sint, itaque iure error hic qui blanditiis perspiciatis adipisci, libero quia veritatis dignissimos quasi id cumque!</div>
<div>Magni cupiditate laudantium, corrupti commodi, reiciendis consequuntur recusandae minima tempore id placeat rerum saepe molestiae, nulla illo, dolores distinctio aliquid asperiores esse maxime voluptatibus corporis at. Commodi eius magni esse!</div>
<div>Maiores explicabo, dolor nemo mollitia cumque et nobis quae consectetur alias dicta quod facere saepe aspernatur sint ex soluta nulla veritatis ab. Sunt aspernatur distinctio quam alias quis possimus reiciendis impedit.</div>
<div>Est sequi eius nam, odio ut commodi quam omnis aperiam, vel, sunt quaerat adipisci voluptates natus possimus consequuntur corporis atque facere corrupti, rem autem modi ipsam inventore nobis! Itaque, modi?</div>
<div>Velit, cumque in dicta ratione iste autem, atque dolor magni optio, excepturi qui ipsam laboriosam modi quidem cupiditate sapiente perferendis! Iste eos fuga ut eum deserunt repellendus ex qui, illo eaque!</div>
<div>Ullam a, labore aperiam ex culpa nesciunt ipsam voluptatibus maiores consequatur qui repellendus obcaecati tenetur, consectetur eos, ut voluptate, nemo placeat soluta odit? Error, Dolor, voluptatibus! Id sed alias et consectetur.</div>
<div>Ipsa pariatur tenetur, nobis recusandae deserunt quisquam nesciunt, ex consequuntur minus voluptatem dolores officiis itaque fuga reiciendis dolor praesentium quae maxime repudiandae. Quibusdam sint fugit soluta pariatur, alias, eveniet natus culpa!</div>
You could be a little more specific with your answer. If I understand correctly you need to find an element that contains a given text and get its vertical offset. You could try the following:
$($(":contains(YOUR_TEXT)").slice(-1)[0]).offset().top
Related
I want to create something like this:
https://www.gymshark.com/products/gymshark-vital-seamless-2-0-light-t-shirt-chilli-red-marl-ss22
You see, when on desktop you scroll down, the product details on right stay fixed while the images on the left scroll down until they reach the end and then the product details get scrolled as well.
Can you please tell me how can I create this effect with HTML, CSS or JavaScript?
its all happening with css
position : sticky;
top : 0
here in this example left div is 200vh and right is 100vh
so applying those two css to shorter div will keep it sticky while scrolling for the rest of the container and then as soon as container reach the end it will start scoll again
<!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">
<title>Experiment</title>
</head>
<body>
<div class="header p-5 bg-green-500 text-white text-2xl text-center">this is header</div>
<div class="scrollBody flex items-start">
<div class="each overflow-hidden p-5 w-[70%] h-[200vh] bg-green-200">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet, nam assumenda numquam corporis repellendus
rem esse itaque non vitae molestias aperiam ratione debitis quas hic sit iste quos dolore quo.
Alias a veritatis repellat tenetur quo dolore voluptas, odit porro iure eum quia error quisquam quas
delectus quibusdam totam velit sapiente similique quidem ex omnis exercitationem. Ratione minima architecto
sint.
Ipsum quibusdam rerum architecto asperiores itaque, maiores corrupti. Doloremque inventore, totam aliquam
unde reprehenderit eos! Cupiditate deleniti voluptatum fuga totam vero, nulla a provident quam illum quas
tempore impedit error.
Nostrum sapiente veritatis consequatur exercitationem. Veniam accusantium dolor facilis ad quis sequi ullam
aut unde blanditiis rem velit doloremque ducimus, voluptatibus consequuntur delectus, laboriosam possimus
quas. Eligendi accusantium reprehenderit porro!
Optio, eveniet! Qui quos tempora dolorem nihil, odit, perferendis laborum distinctio, id illo magni eaque
labore corporis accusamus placeat quam aspernatur doloremque. Eaque accusantium maiores suscipit voluptatum
expedita perspiciatis architecto!
Sed laudantium modi fugit numquam dolorum repellendus, ex veniam saepe iure nobis! Animi tempore quo nulla,
eveniet, architecto voluptatum, odio dignissimos temporibus molestias et sit. Dolor, illo. Recusandae, magni
exercitationem.
Autem quaerat soluta voluptatum quibusdam quas incidunt ducimus accusamus dolorum sed tempore nesciunt a
possimus nostrum ullam delectus dolore consequuntur fugit voluptatem aspernatur, numquam rerum dignissimos
quasi aliquid quae! Aliquid.
</div>
<div class="each overflow-hidden p-5 w-[30%] h-[100vh] bg-green-400 sticky top-0">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto pariatur ratione voluptates porro, nemo
aut cumque, aliquam assumenda libero placeat laboriosam modi harum doloremque ullam labore voluptatum? Et,
nam saepe.
</div>
</div>
<div class="each overflow-hidden p-5 w-[100%] h-[200vh] bg-purple-500">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet, nam assumenda numquam corporis repellendus rem
esse itaque non vitae molestias aperiam ratione debitis quas hic sit iste quos dolore quo.
Alias a veritatis repellat tenetur quo dolore voluptas, odit porro iure eum quia error quisquam quas delectus
quibusdam totam velit sapiente similique quidem ex omnis exercitationem. Ratione minima architecto sint.
Ipsum quibusdam rerum architecto asperiores itaque, maiores corrupti. Doloremque inventore, totam aliquam unde
reprehenderit eos! Cupiditate deleniti voluptatum fuga totam vero, nulla a provident quam illum quas tempore
impedit error.
Nostrum sapiente veritatis consequatur exercitationem. Veniam accusantium dolor facilis ad quis sequi ullam aut
unde blanditiis rem velit doloremque ducimus, voluptatibus consequuntur delectus, laboriosam possimus quas.
Eligendi accusantium reprehenderit porro!
Optio, eveniet! Qui quos tempora dolorem nihil, odit, perferendis laborum distinctio, id illo magni eaque labore
corporis accusamus placeat quam aspernatur doloremque. Eaque accusantium maiores suscipit voluptatum expedita
perspiciatis architecto!
Sed laudantium modi fugit numquam dolorum repellendus, ex veniam saepe iure nobis! Animi tempore quo nulla,
eveniet, architecto voluptatum, odio dignissimos temporibus molestias et sit. Dolor, illo. Recusandae, magni
exercitationem.
Autem quaerat soluta voluptatum quibusdam quas incidunt ducimus accusamus dolorum sed tempore nesciunt a
possimus nostrum ullam delectus dolore consequuntur fugit voluptatem aspernatur, numquam rerum dignissimos quasi
aliquid quae! Aliquid.
</div>
</body>
<link rel="stylesheet" href="./styles.css">
<script type="module" src="./main.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
</html>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I already have a button that smoothly scrolls up. But I need it to disappear when there is no scroll and appear when there is a scroll without jquery.
.scrollup {
width: 40px;
height: 40px;
position: fixed;
bottom: 2rem;
right: 2rem;
text-indent: -9999px;
background-image: url(https://i.stack.imgur.com/nkNki.png);
}
.scrollup:hover {
cursor: pointer;
}
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi recusandae minima corrupti possimus maiores quaerat eveniet, odit, aut rem asperiores adipisci! Culpa minima facere voluptatibus eveniet, ex nisi veniam accusamus vitae modi rerum provident repudiandae, architecto doloribus a nihil. Architecto itaque laboriosam rem dignissimos accusantium eum? Nostrum, eius nam est, labore dolores veritatis qui vel fugiat a minus incidunt debitis ipsum aliquam odio reiciendis architecto ducimus pariatur voluptate ipsam iure obcaecati sunt. Repellat necessitatibus doloremque eaque delectus soluta quis nemo rem minus sunt a. Esse dolorem doloremque accusamus repellat unde quos quod non tempora repellendus neque eum sequi laborum a praesentium aperiam perferendis totam, ipsum hic sint veniam? Pariatur veritatis unde sapiente, consectetur, velit veniam ab blanditiis voluptatibus voluptatum quasi iusto! Porro, dolores eaque itaque impedit in iste pariatur! Dolores quis enim veritatis eos? Delectus et aliquid voluptate quos accusantium doloremque, temporibus harum porro eos possimus architecto amet doloribus eius illum omnis expedita, nesciunt, consequatur rem voluptatibus incidunt cupiditate molestiae tenetur. Earum iusto beatae officiis corporis, quas eum natus dolorem veniam aspernatur ratione sunt repudiandae, porro ex eligendi obcaecati alias non reiciendis numquam facere vitae perspiciatis! Iste nisi quia ut, inventore vel excepturi labore omnis, beatae reiciendis aut earum amet in totam est, iure officia odio quo quas provident accusamus laudantium nihil repellat? Molestiae eos natus sint voluptatibus porro nam nulla dolore consequatur exercitationem! Quidem ad rem cumque aperiam, aut accusamus minima aspernatur expedita, corrupti quaerat neque at nemo quo tenetur suscipit eius necessitatibus iste vitae repellendus sint illo natus culpa? Et culpa voluptatem alias dignissimos maiores a exercitationem sequi eveniet odio illo ab sed quis, fugit repudiandae architecto aliquid similique corrupti fugiat sit rem itaque molestiae. Non quia numquam, aliquam ducimus illum inventore quaerat voluptates repellendus eius, iusto, hic optio maxime magni nisi possimus perferendis minima deserunt exercitationem qui rem iste. Vero sapiente assumenda saepe temporibus iusto! Eligendi veniam dolorem odio, velit hic nisi ut saepe maxime nobis nesciunt sed, reprehenderit repudiandae dolorum beatae quod. Quisquam porro saepe deleniti et architecto, ipsam sit debitis aspernatur unde possimus recusandae vel numquam eaque perferendis eos eveniet inventore tenetur quo harum cumque. Amet corporis illum, natus obcaecati ad minus ab alias soluta deserunt dicta corrupti excepturi, exercitationem vel repellat quasi autem commodi, similique modi impedit sed nam dolor quas! Ipsa mollitia deleniti consequatur sed, cupiditate nam, optio necessitatibus fugiat incidunt velit facere veniam pariatur quis, officia delectus rem corporis at labore? Veniam tenetur dolorum quibusdam nemo dicta commodi voluptate ad sunt omnis nisi tempora officiis magni, accusamus in culpa a temporibus eaque fuga voluptas aut, quas ex rerum autem. Impedit libero sequi quae facere porro fugiat tempora ipsum reprehenderit alias dignissimos adipisci quod exercitationem maiores deserunt quos dolorem, possimus amet necessitatibus praesentium ipsam quam nihil? Libero nemo soluta delectus labore numquam nulla placeat molestias, atque veniam hic minima iste illo saepe consequuntur harum, reprehenderit modi fuga, laudantium rerum consequatur voluptatum. Beatae veritatis adipisci veniam sint? Laborum beatae sint qui natus reiciendis quo aperiam dolorem, doloremque inventore, obcaecati animi facere. Autem provident aut pariatur eveniet aliquam dicta nobis facilis quam facere molestias totam repellat illum placeat similique saepe, doloremque cum quia. Deleniti facilis minus aperiam in modi, placeat quo similique consequatur quisquam alias necessitatibus porro, totam quibusdam at! Dignissimos corporis eos, voluptatibus eaque nobis laborum quia aperiam impedit! Corrupti hic odit eum? Itaque, maxime eos. Debitis eius ea praesentium, aliquam repellat libero pariatur similique consectetur quas est deserunt! Dicta laboriosam praesentium dolores? Minima quo magni, minus debitis sit quod hic ullam eveniet nobis ut error facilis veniam explicabo iure aliquam adipisci fugiat. Aperiam voluptatem incidunt cupiditate explicabo reiciendis aliquid nihil quaerat laboriosam illum, repellendus odit in corporis iusto quibusdam autem facilis tenetur nam qui est reprehenderit? Earum alias sint eaque deleniti, ut inventore error praesentium facilis dolorem molestiae voluptas veritatis cum, repudiandae sequi fuga ipsum incidunt a, ex architecto aspernatur unde? Consequatur, error soluta facere corrupti vel rerum possimus enim dolorum consectetur qui eius neque debitis ipsum tempora, accusamus magnam praesentium perspiciatis, quos necessitatibus? Quam fugiat rerum ullam quisquam ipsum nobis numquam illo porro saepe sed repellat hic obcaecati, velit laborum quos maiores repudiandae odit dignissimos debitis ab aliquid dicta neque veniam? Tempora fugit temporibus veniam modi sed esse ab alias nemo possimus, dolores a suscipit repellat repellendus earum aperiam assumenda eligendi fuga! Error natus, magnam, et magni commodi nulla officiis voluptatum voluptas facere, deleniti incidunt ipsum vitae eum ducimus culpa qui quod harum sapiente corporis accusantium? Exercitationem corporis in ab quas sed error consequuntur consectetur officiis quasi unde, debitis excepturi temporibus voluptatibus labore dolore aspernatur ut dignissimos. Culpa fugit repudiandae corporis sapiente! Repellendus voluptas tenetur vitae quos omnis odit ipsam culpa! Sunt quis suscipit aliquam corporis non doloremque. Voluptatem qui, vero ullam voluptatibus, quam, vitae molestias odio sunt harum accusamus unde ducimus aut culpa distinctio iusto odit? Deserunt, omnis eligendi? Quaerat officia minima quam quos voluptatibus sequi quod consequuntur distinctio? Placeat architecto soluta quibusdam quod natus necessitatibus deserunt atque possimus labore? Quisquam molestias vitae quis repellendus sequi ipsa necessitatibus dignissimos facere maxime totam cumque, earum, possimus et eum aspernatur aperiam! Eligendi quas quis quo quibusdam. Repudiandae ipsa consequuntur aut explicabo fugiat deserunt. Velit aliquam quia accusamus modi ut? Reiciendis est consequatur ipsam atque voluptas, doloremque repudiandae! Fuga voluptates ratione, iure quaerat excepturi perferendis fugit veniam aspernatur, vitae ipsam dolor ut facere voluptatem dolorum deleniti perspiciatis quae debitis rem temporibus nemo voluptatum quis nesciunt corporis sequi! Aliquid ullam ratione odio similique provident. Voluptate soluta laboriosam ab eum et. Voluptate eum excepturi deserunt rem sunt est dicta qui officia praesentium vitae fuga neque assumenda hic saepe alias amet, distinctio aperiam? Fugiat id distinctio saepe esse tempore neque incidunt iure nihil deleniti, soluta laudantium, recusandae voluptatem deserunt tempora ullam architecto sit, explicabo praesentium autem labore ipsum itaque natus! Alias, ipsa? Saepe expedita sint molestiae temporibus odit reprehenderit praesentium, exercitationem architecto suscipit porro libero laborum aut alias rem. A dolore suscipit illo sunt mollitia molestias ad inventore reiciendis provident at minus, laborum odit necessitatibus ab numquam reprehenderit quaerat ducimus voluptatum accusantium nihil officia libero culpa. Magni!</p>
<a onclick="window.scroll({ top: 0,left: 0,behavior: 'smooth' });" class="scrollup">Top</a>
Using scrollTop and onscroll function, you can solve it easily. Try once.
mainDiv. scrollTop returns how many pixels vertically scrolled.Disable or enable button onscroll event listener based on scrollTop
i have done this work recently, and i create this function. i hope it help you
function showBtnToTop(){
if(window.innerWidth > 767){// 768 medium screen width
if (window.scrollY >= x){ // x is a number, and it is the position when the button disappear
$('#gotop').css("opacity", "100");// gotop is the id of the button
}else{
$('#gotop').css("opacity", "0");
}
}else{ // don't show the button in small screen
$('#gotop').css("opacity", "0");
}
}
window.addEventListener("scroll", showBtnToTop);
use this JS function to selcet the btn
let a = document.getElementById("");
and change the css property like this:
a.style.color = "blue";
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
Is it possible to make an overlay scrollbar?
Basically, I have a parent div with child divs inside. I'd like to make the vertical scrollbar overlay on top of the child divs instead of the scrollbar occupying space in the parent div and pushing the child divs to the left.
I'm planning to make the scrollbar transparent and only show it when the parent div gets hovered.
Is that possible with just css or does it need javascript? Please help thanks
I've a solution for you. Give a try to the code given below. And don't forget to put the simplescrollbar.js script in your code using this tag. <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/simple-scrollbar.js"></script>
let scrollDiv = document.querySelector(".area");
SimpleScrollbar.initEl(scrollDiv);
body {
padding: 2rem;
background: #eee;
}
.area {
position: relative;
background: white;
height: 250px;
overflow: hidden;
}
.ss-wrapper {
overflow : hidden;
height : 100%;
position : relative;
z-index : 1;
float: left;
}
.ss-content {
height : 100%;
width : 100%;
position : relative;
right : -18px;
overflow : auto;
-moz-box-sizing : border-box;
box-sizing : border-box;
}
.ss-scroll {
position : relative;
background : rgba(0, 0, 0, .1);
width : 9px;
border-radius : 4px;
top : 0;
z-index : 2;
cursor : pointer;
opacity: 0;
transition: opacity 0.25s linear;
}
.ss-container:hover .ss-scroll {
opacity: 1;
}
.ss-grabbed {
user-select: none;
-o-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
}
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/simple-scrollbar.js"></script>
<div class="area" ss-container>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed cum quisquam sapiente ab consequatur natus ducimus obcaecati minus rerum adipisci laudantium debitis, perferendis pariatur iste provident dolorum ratione voluptate, repudiandae placeat inventore amet quasi ea facere? Delectus numquam vel inventore quasi excepturi. Minus nulla dolore ad animi pariatur provident assumenda dolorum voluptatem porro harum quo aspernatur error placeat sapiente, magnam, atque id molestiae dignissimos corrupti nobis doloremque iure. Voluptate nulla itaque vitae provident, voluptatem numquam sequi suscipit ducimus similique quidem, neque minima architecto tempore asperiores, nihil quae ratione dicta quia unde consectetur tenetur! Aspernatur eveniet dolorem nesciunt sint et eligendi enim quidem blanditiis tenetur! Blanditiis non modi amet, quaerat, vitae consectetur placeat porro dicta, ipsum natus ea possimus. Odio magni possimus modi nemo doloribus corrupti tempora. Aliquid eos error modi non repudiandae illum atque voluptatibus? Odio quod placeat facere sed eligendi, adipisci commodi natus magni soluta dignissimos, aperiam fuga magnam saepe itaque voluptas optio fugiat veritatis velit architecto dolore animi cum sequi quas accusantium! Vel iusto autem sit rerum maxime. Blanditiis libero natus at necessitatibus, odio sed perspiciatis exercitationem quisquam, officiis impedit, a nobis. Exercitationem hic reprehenderit illo, laboriosam ab eaque error sequi, ea expedita rem possimus repellendus numquam delectus est cum maiores neque nihil natus eius. Expedita esse quae, minus, est aspernatur ratione sed aliquid odio ut architecto nostrum provident neque placeat tempora, ipsum natus eum repellendus debitis alias nobis dolorem doloremque laboriosam voluptatem similique. Quisquam rerum molestias ab voluptas voluptatum sit, tenetur odio. Quidem nesciunt assumenda molestias velit harum deserunt culpa vitae beatae veritatis, eum, soluta mollitia numquam cumque! Facilis, dolores sunt aperiam sint molestias iure quidem architecto provident natus quae ab, quia labore tempore minima aliquid voluptatem earum optio tempora. Optio placeat eligendi praesentium quos atque. Similique aliquid neque nisi aliquam molestiae natus, recusandae ullam tempora et minus cum repellat cupiditate fugiat dolorem blanditiis consectetur ea commodi, maxime, odit voluptate hic non ab eaque? Eos exercitationem cumque quas harum aut deserunt ipsam cupiditate doloribus dolorum non doloremque adipisci est, explicabo mollitia voluptates laboriosam molestiae sapiente at ex laborum id? Voluptatem nostrum dicta, tempore eaque quibusdam praesentium fugiat laborum odio nemo adipisci, impedit porro iste, aut sunt consectetur soluta quia nisi repudiandae voluptatibus expedita ab rem iure. Dolorem nemo eaque architecto atque nihil, consequatur voluptates? Consequuntur vero a repudiandae molestias repellat provident minima facilis placeat, perferendis quo laudantium quisquam tenetur fugiat! Vitae repellat ducimus officia. Similique quod sunt quaerat, eum at esse iste. Pariatur sit animi mollitia! Molestiae, quia voluptatum? Expedita, voluptas explicabo. Rerum soluta dolorem expedita optio nostrum ex placeat laudantium minima voluptate, cum neque beatae, pariatur dicta error rem eum aliquam a deleniti quidem doloremque iure aperiam illo atque animi! Soluta facilis eligendi iure magnam. Quasi, quam numquam explicabo quas aliquam cum natus quod iusto, eligendi tenetur ex facilis, modi ut accusantium quibusdam nostrum labore! Provident laborum dolore ipsa sit. Dolore totam tempore quisquam adipisci iste tenetur ducimus saepe quae asperiores quibusdam possimus, maxime voluptatibus non eum praesentium quas dolores similique fugiat placeat numquam illum omnis autem voluptatum! Impedit exercitationem quam quisquam nisi consectetur minima optio dolore dicta! Maxime qui fugiat, beatae possimus modi fuga, unde, adipisci culpa magnam eum a velit. Voluptas libero eos dolores consequuntur nisi corrupti vel rem doloremque ut consequatur, odit magni esse aliquid aperiam possimus eveniet, magnam quaerat exercitationem. Maiores cum officiis reprehenderit ea nam, iure magni esse quos velit praesentium eius unde, laudantium fugit vitae quasi temporibus. Iste fuga iure numquam velit culpa exercitationem officia quis beatae? Deserunt sint eum accusantium, blanditiis fugit harum ex omnis qui officiis magnam nobis eius voluptatibus tenetur, rem dignissimos aut et tempore ipsum cumque commodi laudantium? Maxime praesentium, alias dolores, eos veritatis velit ex ut aliquam tempore est corporis dolorem. Odio, rem ratione. Numquam repellat cum rerum libero sapiente itaque corrupti in ut nihil culpa vitae, laborum molestias nostrum repudiandae eligendi sequi quo officia quibusdam modi commodi consequuntur nisi nobis vero voluptates. Praesentium officia rerum a incidunt ratione, odio quaerat alias, optio repellendus doloremque natus vero quae debitis dolores dignissimos voluptas labore accusantium aliquam asperiores ut eius dolorem. Dolor assumenda at deserunt numquam atque delectus labore, eum, aut dolorem ex, et hic vel rerum fugit! Et tempore harum natus illum dicta maxime magnam delectus ad praesentium reprehenderit nihil nulla aliquid error, fuga ratione dignissimos cumque temporibus blanditiis. Eum doloribus sed odit exercitationem quia quibusdam vero impedit id harum molestias! Distinctio iusto aspernatur quaerat tempora pariatur iste eaque corrupti, vel magnam temporibus recusandae possimus perspiciatis itaque repellat mollitia reprehenderit hic autem quis ex maxime laborum exercitationem placeat ab. Saepe provident incidunt, modi porro aut magni ducimus odit ut minima perferendis, itaque nobis rem explicabo dolor. Voluptates dicta in error nulla vitae corporis fugiat optio. Blanditiis voluptatem sunt nihil? Nihil, dicta excepturi explicabo repellendus enim odio sed totam, fugit error nulla provident omnis saepe illum iste animi? Consequatur, veniam! Voluptates voluptatem veritatis reiciendis. Illo, veritatis pariatur ratione id minima cupiditate. Quibusdam quod deserunt alias ipsam culpa et modi fuga aut id autem. Minima neque nesciunt eligendi accusamus quam deserunt repellendus sequi culpa, cumque quaerat beatae mollitia doloribus? Nisi quibusdam quisquam temporibus. Quas laudantium pariatur totam, voluptas tempora, ad culpa dignissimos blanditiis ut, explicabo voluptatem repellat saepe tempore ipsam? Qui adipisci labore mollitia at, id facere unde aspernatur? Quis numquam a reiciendis vero possimus ut autem. Voluptatibus quas, officiis hic mollitia vero unde iste dolores delectus molestias. Perspiciatis, sit dicta officiis facere minus voluptatem qui iusto est nulla neque perferendis non ipsum minima ipsa quidem consequatur delectus. Ducimus qui quaerat nostrum nulla quis veritatis! Labore quod illo, debitis necessitatibus, repellendus omnis vitae voluptas sequi quia consequuntur velit asperiores sint porro fuga facilis vel voluptatum magni quibusdam delectus quis distinctio? Excepturi tenetur doloremque dolor. Nostrum voluptates harum quis quidem hic odit magni atque repudiandae illum, repellat et explicabo a possimus nesciunt tempore rerum sequi, blanditiis officiis. Error ullam quae labore veritatis eaque reiciendis tempore doloremque quod dignissimos optio tempora perspiciatis, voluptatum non? Animi mollitia dolorem quae impedit quos laudantium perferendis, dolore ut consectetur deserunt veritatis deleniti ipsa excepturi!
</div>
I have been making changes to make my site more responsive and, in general, this has gone well. However, I have run into one problem:
Before, I always used height and width attributes on img elements in order to reserve space in the layout for the images while the browser loads them in. This prevents the layout from jerking around while the browser loads and calculates the needed space for the image.
After making my images more responsive, however, by using max-width: 100% and taking out the height and width attributes, the browser no longer reserves space for the image (because it no longer knows how tall or wide the image is going to be in advance since I couldn't explicitly tell it)
My goal is to have responsive images that also take up their appropriate space in the page layout upon its initial load. Does anyone know of a solution for this?
*EDIT (SOLUTION) - this is the best article I have found on the topic. Nice approach!
The correct answer here is to prevent the vertical reflow by using the "padding-bottom trick". To make this technique work, you must know the proportions of the image in advance.
Thanks to Anders M. Anderson for posting an excellent article on the topic: http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/
Here is a way to do it. It's not awesome, but works. http://jsfiddle.net/78Lvc/11/
I changed the image tag to look like this:
<img src="http://fitzgeraldmedia.net/images/range1.jpg" id="img" imgWidth="467" imgHeight="700" onload="fixMyWidth()"/>
You'll notice that I have added some attributes and an onload. You will have to add the attributes in code or by hand. The reason that you need the height and width is because you need to know the height of the image to calculate the space required in JS.
Then inline, I have this code:
<script>
//get the width of the browser right now
var containerWidth = document.body.offsetWidth;
//get the attributes that we have specified for this image
var imgWidth = document.getElementById("img").getAttribute("imgWidth");
var imgHeight = document.getElementById("img").getAttribute("imgHeight");
//since the img is to be 50% of the container width
var widthRatio = containerWidth / imgWidth / 2 ;
//now set the height of the image
document.getElementById("img").style.height = (imgHeight * widthRatio) + "px";
//once the image has actually loaded, run this
function fixMyWidth(){
//this will make it 'responsive' again
document.getElementById("img").style.height = "";
document.getElementById("img").style.width = "";
}
</script>
The question said:
by using max-width: 100% and taking out the height and width attributes, the browser no longer reserves space for the image ...
I think the questioner did not use the meta name="viewport" in his "html" codes. Here is the code of a html file that have an img tag with height and width attributes that is also responsive:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>img responsive</title>
<style>
.img {
display: block;
max-width: 100%;
margin: 0 auto;
height: auto;
}
</style>
</head>
<body>
<img src="https://hamid-davodi.com/img/images/portfolio-preview.png" id="myImg" width="1441" height="758" alt="My Image" class="img">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum ipsa enim, magni asperiores officiis adipisci! Alias vero at nostrum tempore facilis temporibus provident quae quo illo, error eligendi in, odit, ducimus? Harum incidunt enim blanditiis veritatis tenetur, quam provident quae. Nulla in incidunt libero atque nemo, pariatur dolore perspiciatis ut vero maiores praesentium iste fuga quis possimus repellendus a placeat, repudiandae officiis fugiat! Facere necessitatibus a aspernatur assumenda aliquam nisi et suscipit nemo reiciendis enim! Ipsa quos illo atque? Repellat iusto officia expedita harum odio consequatur sequi eos quas eum delectus molestias nulla ut impedit rem temporibus neque, provident. In alias, repellendus repellat culpa officiis accusamus enim perspiciatis non nihil omnis necessitatibus obcaecati provident unde odit ipsa impedit corporis, numquam, adipisci nisi porro, fugiat consectetur et aspernatur similique. Similique beatae vel deleniti voluptatum ratione pariatur nihil numquam dolores soluta tempora incidunt magni nobis ipsum non minus quo, necessitatibus modi temporibus saepe harum, iure iste animi fugit! Natus maxime aliquam qui. Esse nisi, rem. Vitae, illo, ratione. Fugit, nesciunt ratione modi minima itaque ipsum obcaecati magnam laboriosam amet quae suscipit optio reprehenderit aperiam dolore! Vel necessitatibus odit, molestiae ea perferendis dicta recusandae quibusdam maxime, natus autem voluptatum, iusto alias distinctio vero in sint, incidunt. Unde, esse nemo voluptatum ab est blanditiis expedita consectetur itaque repellat eveniet. Porro placeat harum, tenetur nam sed ipsa, est, maxime tempore obcaecati dolores possimus magni deleniti illum facere pariatur nostrum? Ipsa nemo officia ipsam pariatur neque sed suscipit ducimus dolores temporibus, aperiam perspiciatis soluta quibusdam sequi cum, illo totam labore hic nesciunt laborum odit. Eius rem saepe delectus necessitatibus eligendi, beatae officiis placeat quaerat illo! Laboriosam eaque, repudiandae consequatur repellat blanditiis recusandae adipisci amet iste aperiam alias magnam itaque dicta illum praesentium eum totam fugit atque ad ducimus soluta voluptatibus odio nostrum beatae dolorum? Assumenda tempore officia facilis fugit earum unde, illo ab dolorem nulla quos temporibus cumque rerum sed deserunt quaerat molestiae aut soluta, iste, doloremque distinctio! Id optio, dolorem perspiciatis, corporis distinctio eos enim perferendis. Cum sint placeat sequi cupiditate quas sunt saepe beatae aut molestias quod modi sit temporibus consequuntur ab repudiandae ut eius dolores aliquam iusto quibusdam ea dolore exercitationem, recusandae perferendis. Repellendus molestiae eum, iste, commodi explicabo officia adipisci enim cumque exercitationem minus veniam optio numquam, alias doloribus modi voluptates consequatur eius. Quia ut incidunt reprehenderit cupiditate repudiandae tempore nam dicta, quo iure exercitationem odio sapiente laboriosam non ducimus dolore quis labore dolores, odit eius quam nesciunt, voluptas a laudantium magnam veritatis. Reprehenderit magnam veniam, voluptatum facere a blanditiis, soluta cumque sint, corporis eligendi, neque quod. Nemo odio repudiandae non vel sapiente. Fugiat ipsum soluta consequatur, sunt nulla placeat quis, in quia a iure commodi est, maxime libero cum laborum magnam deserunt nihil. Obcaecati, rerum ducimus dolor esse expedita doloremque impedit voluptas blanditiis soluta officiis provident placeat, beatae, sint reiciendis. Aut ratione atque, tempore officia eligendi magnam obcaecati quis quia, soluta excepturi facere iure autem explicabo assumenda fuga a sequi suscipit! Praesentium, aspernatur nulla asperiores incidunt numquam eum eos dolor accusantium.
</p>
</body>
</html>
You can test it also in this codepen.
I wouldn't take height and width attributes out, just try setting them to auto.
I am working on my own Lorem Ipsum generator, with the added bonus of generating the corresponding HTML formatting code in a box beside it.
So, the paragraph is generated via this button
<button id="generate" type="button" onclick="LoremIpsumRandom()">1 Paragraph</button>
and is generated here
<p id="textarea"></p>
function LoremIpsumRandom()
{
//global to store previous random int
_oldInt = null;
var pickRandom = function(paragraphArray)
{
//random index of paragraphArray
var randomInt = Math.floor(Math.random()*paragraphArray.length);
//ensure random integer isn't the same as last
if(randomInt == _oldInt)
pickRandom(paragraphArray);
else{
_oldInt = randomInt;
return paragraphArray[randomInt];
}
}
//your lorem ipsum paragraphs
var paragraphArray = [
"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?",
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.",
"Et harum quidem rerum facilis est et expedita distinctio.", "Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.",
"Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.",
"Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
];
//update element content (e.g. `<div>` with paragraph
document.getElementById("textarea").innerHTML = pickRandom(paragraphArray);
//document.getElementById("textarea-code").innerText = pickRandom("<P>" + (paragraphArray) + "</P>");
}
No point including the CSS to be honest - it's just standard text boxes and auto-generated buttons.
So, the issue is that although I can generate the normal paragraph in the id="textarea" section, I want to be able to generate a raw HTML version as well (with the paragraph and line breaks code being shown.) So far, I've been able to generate the raw HTML with no issues, but when I added #pixelbobby 's section (which makes sure that when a sentence is selected, the next selection won't be the same, as true randomness can sometimes generate), the code doesn't work. In some instances, it's generated the raw HTML, but the generated paragraph is a different one.
The other functions (generating lists, multi-paragraphed sections and multi-levelled lists) utilise the raw HTML and output correctly, and it all runs smoothly. The raw HTML is always outputted to
<p id="textarea-code"></p>
which is next to the first textarea section.
Can someone tell me how I can modify the script so that the raw HTML part of the script generates the same paragraph as the result of the pickRandom(paragraphArray)
So,
This - document.getElementById("textarea-code").innerText = pickRandom("<P>" + (paragraphArray) + "</P>");
needs to be the same as - document.getElementById("textarea").innerHTML = pickRandom(paragraphArray);
but with the raw HTML specified in the pickRandom() part of the line.
Can anyone help?
Thanks :)
You can save the result of pickRandom(paragraphArray) in a variable and use it twice:
var randomParagraph = pickRandom(paragraphArray); //save the result of pickRandom
document.getElementById("textarea").innerHTML = randomParagraph;
document.getElementById("textarea-code").innerText = "<P>" + randomParagraph + "</P>");