Spacing between long amount of text lines css/html/js - javascript

Let's say that i have lots of text that i dont want to be in one single huge line, how could i put some white spacings after a certain amount of words? And should i do this in the CSS file or somewhere else?
So for example: this: "You have succesfully looted the house, as the house was empty you didnt run into any trouble." to: "You have succesfully looted the house, as the house was empty you
didnt run into any trouble."
Might not look as great on this site but i think you will get the idea. The string is empty at first and will be filled by some action that happens on the page.

Specify a width on the container where your text is inside. It is better to use the max-width property since your text may be smaller than the maximal width you want. In this case it is not essential though, since the paragraph is a block element and is full width.
p {
border: 1px solid lightcoral;
}
.ch-wrap {
max-width: 60ch;
}
.px-wrap {
max-width: 200px;
}
<h1>This has no width set</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, doloremque nihil. Illo, veritatis est ipsa cumque culpa praesentium dolor error.</p>
<h1>This has a width of 60 characters</h1>
<p class="ch-wrap">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, doloremque nihil. Illo, veritatis est ipsa cumque culpa praesentium dolor error.</p>
<h1>This has a width of 200px set</h1>
<p class="px-wrap">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, doloremque nihil. Illo, veritatis est ipsa cumque culpa praesentium dolor error.</p>

You can use <br> tag to write in a new line. If you want to put white spaces you have to move the text via CSS. For example:
HTML:
<font id="moving">Some text</font>
CSS: #moving { float: right; }
but if it not works you can try with:
#moving { position: absolute !important; float: right; }
The !important attribute makes sure that the position tag will be set on absolute.

Related

Rotate Arrow on Accordion Click

How do I get this arrow rotating when the parent accordion div is clicked? Any help would be wonderful. The idea is that as you click the accordion the arrow which is an svg file should rotate, however I can't seem to get it working
HTML
<button class="accordion">Design <img src="./assets/img/down.svg" alt="caret-down" class="caret"></button>
<div class="panel"><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste veritatis maiores doloribus ex, culpa tenetur?</p></div>
<button class="accordion">Development <img src="./assets/img/down.svg" alt="caret-down" class="caret"></button>
<div class="panel"><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. At rerum a voluptate nesciunt! Quam, inventore.></div>
<button class="accordion">Search Engine Optimisation <img src="./assets/img/down.svg" alt="caret-down" class="caret"></button>
<div class="panel"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod, blanditiis. Corporis maxime eum nemo delectus.</p></div>
<button class="accordion">Progressive Web Apps <img src="./assets/img/down.svg" alt="caret-down" class="caret"></button>
<div class="panel"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa consequuntur obcaecati iste odit vero mollitia.</p></div>
CSS
#services .accordion{
font-size:1rem;
background-color:rgba(245, 246, 250,0.4);
cursor:pointer;
padding:18px;
width:100%;
border:none;
outline:none;
display:flex;
justify-content:space-between;
width:68vw;
text-align:right;
}
#services .active, .accordion:hover{
background-color:rgba(245, 246, 250,0.4);
color:rgba(0, 151, 230,1.0);
}
#services .panel{
background-color:rgba(245, 246, 250,0.4);
display:none;
width:100%;
justify-content:center;
text-align:center;
}
#services .caret{
width:12px;
}
JS
/*accordion*/
var acc = document.getElementsByClassName("accordion");
var arrow = document.getElementsByClassName("caret")
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "flex") {
panel.style.display = "none";
} else {
panel.style.display = "flex";
}
arrow.setAttribute("transform", "rotate(-45deg)");
});
}
This currently throws an error at arrow.setAttribute, because arrow is not set at this point. And setAttribute is not a proper way to set inline styles.
Both can be fixed easily like this:
this.querySelector('.caret').style.transform = "rotate(-45deg)";
querySelector returns the first element with that class it finds, and by calling it on this, which refers to the button, we can automatically limit it to the correct scope. And then the inline style is set using an appropriate syntax.
(var arrow = document.getElementsByClassName("caret") can then be completely removed, you don’t need it for anything else.)
If you want the arrow to rotate back, when the element is collapsed again - then don’t place this line at the end, but in both the if and the else block. Once with rotate(-45deg), and once with rotate(0) to set it back to normal (or whatever value you need for that state.)

How to create auto popup when I access a website

I was trying to create an auto popup when I access a web store that is developed in Shopif
<SCRIPT TYPE="text/javascript">
function popup(mylink, windowname) {
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string') href=mylink;
else href=mylink.href;
window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
return false;
}
</SCRIPT>
<BODY onLoad="popup('autopopup.html', 'ad')">
I have the above code for Popup Windows Opening Automatically. However, I need assistance on how to make this work on and this is the website that I am trying to work it on https://petit-tapis.co.uk
Thank you in Advance
As #Scopey said, modern browsers prevent this behavior from auto occurring. You can however add a click or if you want people to take action first before doing anything else, you can for example add an overlay that blocks any other functionality (but I can tell you that this kills user experience).
Maybe say more what your goal is. Why do you want this extra window to open? What benefit is there in doing this (what do you and what does the user get out of it)?
edit: See my comment below. I also slapped together a very simple version of what I am talking about: https://jsfiddle.net/uthhvu8d/
HTML:
<div class="wrapper">
<div class="overlay">
<form action="">
<input type="text">
<input type="text">
<button>Submit</button>
</form>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, inventore esse aliquam nostrum? Cupiditate provident, delectus, minus voluptatum natus fugiat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus temporibus vitae quibusdam maxime natus fugiat quis amet sed perferendis quod.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nostrum consequatur animi quod rem eos nihil obcaecati repellat. At, accusamus.</p>
</div>
CSS:
.wrapper {
position: relative;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
color: #fff;
display: none;
}
JS:
function showOverlay() {
$('.overlay').show()
}
setTimeout(showOverlay, 2000)
Thankfully, modern browsers prevent this behaviour from happening.
Any window.open must occur only as a direct result of a user triggered event - such as a mouse click or similar.
As #Scopey said browsers stop you opening a pop up window however you could use the HTML5 Dialog and the dialog overlays in the browser have a play you can even open it model if you wanted will take a little longer to get it to work but it's anotion for you
<dialog id="dialog">
<iframe src="autopopup.html" />
</dialog>

drag and drop to contenteditable element second and subsequent lines

I want to drag and drop the tag to the contenteditable="true" element string using html5 and javascript.
<script>
window.addEventListener("DOMContentLoaded", function(){
function dragStartFromPalette(event){
event.dataTransfer.setData("text/html",
'<original-element class="draggable_element">'+this.innerHTML+'</original-element>');
}
function dragEndFromPalette(event){
event.dataTransfer.effectAllowed = "copyMove";
event.dataTransfer.dropEffect = "copy";
event.dataTransfer.getData("text/plain");
event.preventDefault();
}
var light_tags = document.getElementsByClassName('draggable_element');
for(i = 0; i < light_tags.length; i++){
light_tags[i].addEventListener('dragstart', dragStartFromPalette);
light_tags[i].addEventListener('dragend', dragEndFromPalette);
};
}, false);
</script>
<style>
.draggable_element {
background-color: rgb(251, 214, 132);
}
</style>
<original-element class="draggable_element" draggable="true">Lorem</original-element>
<original-element class="draggable_element" draggable="true">ipsum</original-element>
<original-element class="draggable_element" draggable="true">dolor</original-element>
<div contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, illum reiciendis quas in quam eos iste inventore. Perferendis amet vel, ratione unde rerum? Quasi ea maxime incidunt, perferendis vero. Nesciunt.</div>
Here is my code https://jsfiddle.net/uzLb5xx0/
The first line will success. however, attempting to trying drag and drop to the second and subsequent lines will insert unrelated span element.
How can I insert all the elements as desired? help me ;(

How to blur the whole page except the text field I just clicked?

I have a text field top of my website. Now when someone focus on that text field, except that text field everything else available on body will be blur. How to do that? Thanks.
This is easy with jquery:
$(document).ready(function(){
$('#mytext').focus(function(){
$('body').find('*').not('#mytext').addClass('blur');
});
$('#mytext').blur(function(){
$('body').find('*').not('#mytext').removeClass('blur');
});
});
li{
background: red;
}
.blur {
filter: blur(10px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="mytext">
<ul>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis quaerat fugiat culpa animi voluptas at explicabo labore consectetur dignissimos tempora. Libero praesentium quibusdam tempora molestiae nesciunt, unde, molestias quam? Commodi.</p>
CSS does offer a filter: blur(...) option, but it's experimental and subject to change. Here's a blog post with example.
Note that once a parent element is blurred, a child element can't be un-blurred. So you'd have to apply the blur class to all of the elements that don't include your text box as a child. This could be tricky to get right.
A more common option on the web is to put a darkened overlay, for example a full-page element with background-color: rgba(42,42,42,0.7); on top of your page, and use z-index or similar to get your input element to pop on top of that. This is generally simpler and more widely-supported than selective blurring.

Making a webapp, I need a loading div in between pages

I'm looking everywhere, but I cant find how to do it!
I have a webapp, and one page is very heavy with data and it takes a long time to load. Is it possible to make a loading div appear when its loading the next page? Maybe like this;
Make a loading div, set style to visiblilty: hidden
When a user click a link, the div is set to visibilty: visible
Starts loading the data of the next page
When data loads, the page is shown.
Like I said, this is just a basic version of what you are looking for.
http://jsfiddle.net/sheriffderek/CbF9M/
HTML (just some stuff)
<img src="http://placehold.it/500x500" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem amet earum sapiente aspernatur optio aliquid officia veritatis quaerat eaque ex fugiat maiores iure! Fugit deserunt enim cumque eum veniam eius.</p>
<div class="cover"></div>
CSS
.cover {
position: fixed;
top: 0; right: 0;
bottom: 0; left: 0;
width: 100%;
height: 100%;
background-color: red;
}
jQuery
$(window).ready( function() {
$(".cover").delay(3000).fadeOut();
});
So, when the window is loaded... fade out the covering div... but really - you would want to be much more specific about what is loaded. The delay is just for effect, because we don't have any real data being transferred.

Categories

Resources