I am trying to create an App which has 2 html files, index.html and bookmarks.html. Index.html has some question cards which contain some text and a bookmarks button.
My goal is that when I press the bookmark button in the question card from index.html, that card should be replicated in bookmarks.html.
I was thinking to use the createElement approach, but I have no idea how to do this when the elements that should be created are on a different page...
For more clarity, here is the html code for the question cards in index.html:
<section class="question-card">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam vitae
labore repudiandae tenetur. Qui maiores animi quibusdam voluptatum
nobis. Nam aperiam voluptatum dolorem quia minima assumenda velit
libero saepe repellat. Tempore delectus deleniti libero aliquid rem
velit illum expedita nostrum quam optio maiores officiis consequatur
ea, sint enim cum repudiandae inventore ab nemo? Eum dicta illum odio
harum, commodi similique. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Inventore maxime ipsa accusamus, soluta provident
tenetur aliquid ad nisi voluptate iste quaerat ab ullam voluptatem
illo eos optio ut dolor nostrum.
</p>
<button type="button" class="qc-bookmark-icon">
<img src="/assets/bookmark-icon.jpeg" alt="bookmark icon"/>
</button>
</section>
And this is what it looks like, with the bookmark button on the top-right corner.
Do you have any idea if this would be the right approach and if yes, how could I implement this?
If not, I am open to any suggestions, how I could make this work...
Thank you.
Related
In the below paragraph text is coming from API and has two Anchor tags one with External Linking and another with internal linking.
I want to use an anchor tag that has internal linking, as the react-router-dom <Link /> component.
<p>
Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Iusto adipisci ab tenetur dolorem nulla distinctio aliquam?
Officiis, pariatur nesciunt! Aliquid, deserunt? Dignissimos tempora hic
accusantium culpa sapiente debitis dolorum quisquam quasi labore magnam? Velit
facere ut quaerat dicta dolore optio porro soluta aperiam reiciendis voluptas
mollitia numquam sint,
sequi error?Privacy Policy
</p>
I'm having struggles with what I'm trying to acomplish. Basicly I have 2 colums in my HTML and on my left colum I have text and want to have div's on the right colum with videos stay near certain parts of the text. Diferent aproaches I have tried are table cells, who I couldn' make work how I wanted because it would deformat the text creating big spaces between paragraphs to fit in the size of the video on the right.
I have also tried dummy divs to fill the vertical space but this won't work for all screens since the div's sizes will be diferent.
I've tried searching for some anchors that could be attached to the text somehow where I could create a div next to it without influencing the text itself but I'm kinda lost.
I hope this question is according to the rules. Thanks in advance.
image in paint to help
Please check this link and let me know whether you want this type of layout
.row {
align-items: flex-end;
display: flex;
}
.bg-red {
background: red;
}
.col-6 {
width: 50%;
}
<div class="container-fluid">
<div class="row">
<div class="col-6">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
</div>
<div class="col-6">
<video width="100%" height="300" controls>
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="row bg-red">
<div class="col-6">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremq natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
</div>
<div class="col-6">
<video width="100%" height="300" controls>
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
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');
})
hello i try to reach like on this page http://mynameismatthieu.com/WOW/index.html
if we look at that doge image (right from such easy and right from very JS), the doge image drop to bottom (from way top)
i try to reach that result with this:
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus velit obcaecati et, tenetur excepturi voluptatum doloremque reprehenderit esse nisi quae necessitatibus facilis provident voluptatem quos, dolorem dicta, modi eos iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus velit obcaecati et, tenetur excepturi voluptatum doloremque reprehenderit esse nisi quae necessitatibus facilis provident voluptatem quos, dolorem dicta, modi eos iusto.</p>
<div class="about-tile">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur commodi saepe atque vitae harum, alias impedit sunt. Praesentium esse voluptatem possimus, autem, tenetur maiores modi ab veritatis nam architecto excepturi!</h2>
<hr class="divider wow fadeInDown" data-wow-duration="2s" data-wow-delay="0.5s" >
</div>
or you can see on here:
https://jsfiddle.net/fvjqj7f0/2/
as you can see the result from what i code, the hr only go down a little bit. i need to the hr start go down from h1 how to do like that
Your issue is actually due to the fadeInDown animation :
fadeInDown make it appear a little bit higher than its final place.
In the demo bounceIndown is used to drop from the top of the page.
On animate css website you can have all the availables animations. You can use fadeInDownBig to archieve a drop from the top of the page, but i believe that you can't use wow.js to drop from a specific position. You should use keyframes animations to do so. (with some custom javascript)
Here is the working example
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');
}
});