Is it possible to run the browser's in built spell checker on divs which aren't contenteditable? The below code works for checking spelling, but the div must be contenteditable and the spell check is only executed once the div is put into focus.
<div contenteditable="true" spellcheck="true">
This paragraph gets spell checked when the div comes into focus
</div>
I want to display a full page of html and have the red squiggly lines underneath all the mis spelled words
Let me say, these steps might work:
Make all the <div> to be focussable by adding a tabindex attribute.
Once focussed, using jQuery (as it is not possible using CSS), add contenteditable attribute.
Once blurred, remove the contenteditable attribute.
Snippet
$(function () {
$(".ce").focus(function () {
$(this).prop("contenteditable", true);
}).blur(function () {
$(this).prop("contenteditable", false);
});
});
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<input type="text" placeholder="Click here and press tab!" />
<div class="ce" tabindex="0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis dolorem consequatur doloribus at, quam ipsam repudiandae libero ullam, commodi cum hic nam odit reiciendis? Distinctio inventore quasi, ex cupiditate neque.</div>
<div class="ce" tabindex="0">Sunt, consequatur. Dolorem odio nihil minima, in autem corrupti. Animi atque, eius laudantium. Excepturi laudantium suscipit esse nulla tempore aspernatur architecto. Dolorem a impedit, dolor voluptatum repellat mollitia itaque quod.</div>
<div class="ce" tabindex="0">Aliquam dolores, ipsam vel eum sed necessitatibus itaque error doloribus illum, omnis, ex exercitationem commodi neque quos voluptatibus debitis rem amet praesentium! Quibusdam corporis mollitia modi? In dignissimos ad itaque.</div>
<div class="ce" tabindex="0">Maxime, totam laudantium accusantium itaque sint possimus ex minus deleniti adipisci reprehenderit commodi illo corporis provident sed tempore architecto molestiae! Molestiae voluptas magni, non, ex assumenda quibusdam aliquam vitae ab.</div>
<div class="ce" tabindex="0">Quibusdam magnam, maiores eveniet commodi consequuntur sapiente, deleniti praesentium eius blanditiis. Suscipit fugit in repellendus quis ducimus illum, tempore voluptatem incidunt recusandae a perferendis id, distinctio vitae voluptatibus quibusdam necessitatibus.</div>
I used the following code to apply the spell checker using jquery-2.2.1.js. I made all divs contenteditable and then after view loaded ran:
$('.content-container').each((i, el: any) => {
$(el)[0].focus();
$(el)[0].setAttribute('contenteditable', 'false');
})
Related
I'm trying to clone the AirBnB website and I'm having a problem with the detail page reservation Box. the thing is that when we scroll from top the element will be scrollable until it's totally in viewport. after it become all visible it will stay fixed and the components next to it are scrollable. and finally when the viewport reaches certain point in the scroll it will be scrollable again.
AirBnB detail Page
so how can i make this happen? I'm using NextJS 13 and tailwindCss.
function DetailSection({ home }) {
return (
<div className="pt-5 flex justify-between">
<div className="drop-shadow-md">
<h1 className="text-lg font-light tracking-wide">{home.name}</h1>
<h2 className="font-thin tracking-wide text-sm">
4 bedroom <span>|</span> 2 bathroom <span>|</span> 200 sqm
</h2>
</div>
<div className="w-2/6 h-72 fixed bottom-0 right-0 bg-red-300">the fixed element </div>
</div>
);
}
I've made the following progress so far. but when the element become active again it doesn't proceed from the position it currently is rather it will pop to it's original position.
function StickySide() {
const [stick, setStick] = useState(false);
function setSidebarFixed() {
if (window.scrollY >= 210 && window.scrollY < 600) {
setStick(true);
} else {
setStick(false);
}
}
window.addEventListener("scroll", setSidebarFixed);
return (
<div
className={`${
stick ? "fixed bottom-10 right-20" : "relative"
} w-72 h-72 bg-red-300`}
>
next
</div>
);
}
Remove temp content. I added It just for illustrating purpose.
<main>
<section className="bg-gray-500 h-80 flex justify-center items-center text-white text-xl ">
upper content -- Images Etc -<br /> I gave styles to this element for
temporary purposes. You will need to remove them and add your own
content
</section>
{/* Your required section goes here */}
<section className="border-2 border-black min-h-[60vh] relative flex">
<div className="left-side-content w-8/12">
{/* left side Content */}
<h1 className="text-3xl font-bold">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate,
quisquam? Error dolore tenetur architecto consequuntur.
</h1>
<p className="">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo harum
officiis maiores consequatur aliquid beatae quam unde ducimus earum
inventore? Natus vero ducimus veritatis consequatur magnam beatae
nisi ullam placeat! Modi nulla sint quibusdam. Officia enim
voluptatibus nesciunt recusandae ut ab. Enim fugiat necessitatibus
non, repellat in dolorum commodi tempora magnam nisi tempore nulla
odio esse libero voluptatibus quod dicta nemo ullam fuga maxime quos
consequuntur inventore eaque. Veniam ducimus, similique numquam
deleniti magni quidem repellat. Ullam inventore hic ipsa fugiat
eveniet repellat tenetur aut libero, sint nostrum animi, natus magni
doloremque rerum. In sunt, beatae porro voluptatibus corrupti
exercitationem!
</p>
<h2 className="text-2xl font-bold">Some Features</h2>
<ul>
<li>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Voluptas, enim?
</li>
<li>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Reprehenderit, fugiat?
</li>
<li>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime,
veniam!
</li>
<li>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores,
ex.
</li>
</ul>
<p className="">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo harum
officiis maiores consequatur aliquid beatae quam unde ducimus earum
inventore? Natus vero ducimus veritatis consequatur magnam beatae
nisi ullam placeat! Modi nulla sint quibusdam. Officia enim
voluptatibus nesciunt recusandae ut ab. Enim fugiat necessitatibus
non, repellat in dolorum commodi tempora magnam nisi tempore nulla
odio esse libero voluptatibus quod dicta nemo ullam fuga maxime quos
consequuntur inventore eaque. Veniam ducimus, similique numquam
deleniti magni quidem repellat. Ullam inventore hic ipsa fugiat
eveniet repellat tenetur aut libero, sint nostrum animi, natus magni
doloremque rerum. In sunt, beatae porro voluptatibus corrupti
exercitationem!
</p>
<p className="">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo harum
officiis maiores consequatur aliquid beatae quam unde ducimus earum
inventore? Natus vero ducimus veritatis consequatur magnam beatae
nisi ullam placeat! Modi nulla sint quibusdam. Officia enim
voluptatibus nesciunt recusandae ut ab. Enim fugiat necessitatibus
non, repellat in dolorum commodi tempora magnam nisi tempore nulla
odio esse libero voluptatibus quod dicta nemo ullam fuga maxime quos
consequuntur inventore eaque. Veniam ducimus, similique numquam
deleniti magni quidem repellat. Ullam inventore hic ipsa fugiat
eveniet repellat tenetur aut libero, sint nostrum animi, natus magni
doloremque rerum. In sunt, beatae porro voluptatibus corrupti
exercitationem!
</p>
<p className="">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo harum
officiis maiores consequatur aliquid beatae quam unde ducimus earum
inventore? Natus vero ducimus veritatis consequatur magnam beatae
nisi ullam placeat! Modi nulla sint quibusdam. Officia enim
voluptatibus nesciunt recusandae ut ab. Enim fugiat necessitatibus
non, repellat in dolorum commodi tempora magnam nisi tempore nulla
odio esse libero voluptatibus quod dicta nemo ullam fuga maxime quos
consequuntur inventore eaque. Veniam ducimus, similique numquam
deleniti magni quidem repellat. Ullam inventore hic ipsa fugiat
eveniet repellat tenetur aut libero, sint nostrum animi, natus magni
doloremque rerum. In sunt, beatae porro voluptatibus corrupti
exercitationem!
</p>
<p className="">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo harum
officiis maiores consequatur aliquid beatae quam unde ducimus earum
inventore? Natus vero ducimus veritatis consequatur magnam beatae
nisi ullam placeat! Modi nulla sint quibusdam. Officia enim
voluptatibus nesciunt recusandae ut ab. Enim fugiat necessitatibus
non, repellat in dolorum commodi tempora magnam nisi tempore nulla
odio esse libero voluptatibus quod dicta nemo ullam fuga maxime quos
consequuntur inventore eaque. Veniam ducimus, similique numquam
deleniti magni quidem repellat. Ullam inventore hic ipsa fugiat
eveniet repellat tenetur aut libero, sint nostrum animi, natus magni
doloremque rerum. In sunt, beatae porro voluptatibus corrupti
exercitationem!
</p>
<p className="">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo harum
officiis maiores consequatur aliquid beatae quam unde ducimus earum
inventore? Natus vero ducimus veritatis consequatur magnam beatae
nisi ullam placeat! Modi nulla sint quibusdam. Officia enim
voluptatibus nesciunt recusandae ut ab. Enim fugiat necessitatibus
non, repellat in dolorum commodi tempora magnam nisi tempore nulla
odio esse libero voluptatibus quod dicta nemo ullam fuga maxime quos
consequuntur inventore eaque. Veniam ducimus, similique numquam
deleniti magni quidem repellat. Ullam inventore hic ipsa fugiat
eveniet repellat tenetur aut libero, sint nostrum animi, natus magni
doloremque rerum. In sunt, beatae porro voluptatibus corrupti
exercitationem!
</p>
<p className="">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo harum
officiis maiores consequatur aliquid beatae quam unde ducimus earum
inventore? Natus vero ducimus veritatis consequatur magnam beatae
nisi ullam placeat! Modi nulla sint quibusdam. Officia enim
voluptatibus nesciunt recusandae ut ab. Enim fugiat necessitatibus
non, repellat in dolorum commodi tempora magnam nisi tempore nulla
odio esse libero voluptatibus quod dicta nemo ullam fuga maxime quos
consequuntur inventore eaque. Veniam ducimus, similique numquam
deleniti magni quidem repellat. Ullam inventore hic ipsa fugiat
eveniet repellat tenetur aut libero, sint nostrum animi, natus magni
doloremque rerum. In sunt, beatae porro voluptatibus corrupti
exercitationem!
</p>
<p className="">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo harum
officiis maiores consequatur aliquid beatae quam unde ducimus earum
inventore? Natus vero ducimus veritatis consequatur magnam beatae
nisi ullam placeat! Modi nulla sint quibusdam. Officia enim
voluptatibus nesciunt recusandae ut ab. Enim fugiat necessitatibus
non, repellat in dolorum commodi tempora magnam nisi tempore nulla
odio esse libero voluptatibus quod dicta nemo ullam fuga maxime quos
consequuntur inventore eaque. Veniam ducimus, similique numquam
deleniti magni quidem repellat. Ullam inventore hic ipsa fugiat
eveniet repellat tenetur aut libero, sint nostrum animi, natus magni
doloremque rerum. In sunt, beatae porro voluptatibus corrupti
exercitationem!
</p>
</div>
{/* right side content */}
<section className="sticky top-16 h-96 bg-blue-400 border-2 w-4/12">
<h1 className="text-2xl text-white">Right Side Content</h1>
</section>
</section>
{/* Your required section end here */}
{/* temp content */}
<section className="bg-gray-500 h-80 flex justify-center items-center text-white text-xl ">
bottom content Section 1 - I gave styles to this element for temporary
purposes. You will need to remove them and add your own content
</section>
<section className="bg-green-200 h-80 flex justify-center items-center text-black text-xl ">
bottom content Section 2
</section>
<section className="bg-red-200 h-80 flex justify-center items-center text-black text-xl ">
bottom content Section 3
</section>
</main>
You have to make that element sticky and give position from top.
Make parent section relative. And give this child section (sidebar) sticky position and give it some position from top.
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>
I don't know if this is even possible but I'm trying to detect touchstart over an <a> tag. When touched, the scroll should be prevented but if the finger is released without moving, the link behaviour of opening a new window should remain.
I've realised that you cannot delay (timeout) an e.preventDefault(), as it won't work despite not throwing an error.
var a = document.querySelector('a');
a.addEventListener("touchstart", handle_touchstart);
function handle_touchstart(e){
e.preventDefault();
//do other stuff
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis unde, natus iusto, laborum dignissimos praesentium nam animi, ipsa inventore eius nihil! Sit nam voluptate eveniet sunt a tempore iure quibusdam!</p>
<p>Ratione inventore earum, non eveniet omnis incidunt dicta debitis, ipsum suscipit quas tenetur amet provident officiis labore, veritatis commodi consequatur! Ea dolorum, quis rerum minus quasi consequuntur eius odio reiciendis.</p>
<br>
Click here
<br>
<p>Laboriosam dicta officiis amet fuga! Atque officia, cupiditate recusandae vitae laboriosam dolorem tenetur minus. Perspiciatis nesciunt tenetur deserunt placeat similique ipsa reprehenderit! Esse ducimus laboriosam nulla, autem quibusdam corporis totam.</p>
<p>Aliquam dignissimos ex non magnam, rerum odio voluptates ducimus aspernatur. Dolorem quas, molestias dicta recusandae dolorum earum adipisci modi nemo alias accusantium eaque. At eos, dolorum et culpa quaerat recusandae!</p>
<p>Veniam tempora numquam aliquam perferendis, dolor voluptatem at, eligendi explicabo sunt minima nam debitis possimus nemo esse doloribus itaque consectetur odio rerum dolorum quasi facere saepe quidem. Laborum, cum, asperiores?</p>
<p>Magni, delectus. Illo sed blanditiis quae pariatur amet ratione quis perspiciatis error veritatis non laborum quibusdam ea, suscipit sequi esse velit doloribus ducimus ex ipsum modi aliquid tenetur. Reiciendis, eaque?</p>
How could I do that?
This should work for you. I have used touchmove, touchend and touchstart.
isTouchMove is a boolean var to detect if the user scrolled with a touch device.
// if user with a touch device is scrolling this is set to true
var isTouchMove = false;
// selectors
var body = document.querySelector('body');
var a = document.querySelector('a');
// set "isTouchMove" to true when you are scrolling
body.addEventListener("touchmove", function() {
isTouchMove = true;
});
// fire event on touch and set "isMoveTouch" to false
a.addEventListener("touchstart", function() {
isTouchMove = false;
});
// fire event when you leave the link
a.addEventListener("touchend", function() {
if(isTouchMove) return;
// your stuff
});
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis unde, natus iusto, laborum dignissimos praesentium nam animi, ipsa inventore eius nihil! Sit nam voluptate eveniet sunt a tempore iure quibusdam!</p>
<p>Ratione inventore earum, non eveniet omnis incidunt dicta debitis, ipsum suscipit quas tenetur amet provident officiis labore, veritatis commodi consequatur! Ea dolorum, quis rerum minus quasi consequuntur eius odio reiciendis.</p>
<br>
Click here
<br>
<p>Laboriosam dicta officiis amet fuga! Atque officia, cupiditate recusandae vitae laboriosam dolorem tenetur minus. Perspiciatis nesciunt tenetur deserunt placeat similique ipsa reprehenderit! Esse ducimus laboriosam nulla, autem quibusdam corporis totam.</p>
<p>Aliquam dignissimos ex non magnam, rerum odio voluptates ducimus aspernatur. Dolorem quas, molestias dicta recusandae dolorum earum adipisci modi nemo alias accusantium eaque. At eos, dolorum et culpa quaerat recusandae!</p>
<p>Veniam tempora numquam aliquam perferendis, dolor voluptatem at, eligendi explicabo sunt minima nam debitis possimus nemo esse doloribus itaque consectetur odio rerum dolorum quasi facere saepe quidem. Laborum, cum, asperiores?</p>
<p>Magni, delectus. Illo sed blanditiis quae pariatur amet ratione quis perspiciatis error veritatis non laborum quibusdam ea, suscipit sequi esse velit doloribus ducimus ex ipsum modi aliquid tenetur. Reiciendis, eaque?</p>
How do I make it so that if I click outside a paragraph element then the background color is removed? Note I want to it to only be able to highlight one p at a time.
$('p').click(function() {
$('p').removeClass('yellow');
$(this).addClass('yellow');
});
.yellow {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur sequi amet sit dolorem, nulla inventore quo cum ad distinctio aut nesciunt reprehenderit dolorum quidem animi unde aspernatur. Esse, eius!</p>
<p>Deleniti vitae rerum eum saepe eaque tenetur libero, omnis nisi sapiente dicta est repellat, provident placeat quia inventore, at architecto quisquam, pariatur minus quam magni totam praesentium dignissimos. Incidunt, sequi.</p>
<p>Fuga cupiditate consectetur, corporis architecto, doloremque impedit ullam quia praesentium voluptatibus molestiae dolor sint, odio amet atque culpa fugit blanditiis ea nam repellat necessitatibus. Aliquam voluptate fuga quo, omnis mollitia.</p>
</div>
</div>
</div>
Here is what you want:
$('p').click(function(e) {
$('p').removeClass('yellow'); //If there is any p with class yellow, it removes that
$(e.target).closest('p').addClass('yellow'); //This find closest target when you click, in our case current paragraph(p)
});
$(document).click(function(e){ //Here is when you click in your entire document
if($(e.target).closest('p').length==0) { // If click is not paragraph
$('p').removeClass('yellow'); //It removes this class existed from any paragraph
}
})
.yellow {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur sequi amet sit dolorem, nulla inventore quo cum ad distinctio aut nesciunt reprehenderit dolorum quidem animi unde aspernatur. Esse, eius!</p>
<p>Deleniti vitae rerum eum saepe eaque tenetur libero, omnis nisi sapiente dicta est repellat, provident placeat quia inventore, at architecto quisquam, pariatur minus quam magni totam praesentium dignissimos. Incidunt, sequi.</p>
<p>Fuga cupiditate consectetur, corporis architecto, doloremque impedit ullam quia praesentium voluptatibus molestiae dolor sint, odio amet atque culpa fugit blanditiis ea nam repellat necessitatibus. Aliquam voluptate fuga quo, omnis mollitia.</p></div>
</div>
</div>
Use this code
$("p").click(function (e){
$("p").removeClass("yellow");
$(this).addClass("yellow");
});
$(document).click(function (e){
var element = $("p.yellow");
if (!element.is(e.target) && element.has(e.target).length === 0)
element.removeClass("yellow");
});
.yellow {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="yellow">Text text text</p>
<p>Text text text</p>
<p>Text text text</p>
You can set a listener to the <body> and check if the click was onto a <p>:
$('body').click(function(event) {
if(!$(event.target).is('p')) {
$('p').removeClass('yellow');
}
else {
$(event.target).addClass('yellow');
}
});
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.