While I am playing a little with this quick creation of mine. I came into two doubts.
The first is, how can I wrap with an IIFE all the JS code without breaking it.
The second is how to finish the twitter's button to send the active quote into a tweet.
"use strict";
var quotes = [
'Expose yourself to your deepest fear; after that, fear has no power, and the fear of freedom shrinks and vanishes. You are free.',
'There are things known and things unknown and in between are the doors.',
'I think of myself as an intelligent, sensitive human being with the soul of a clown which always forces me to blow it at the most important moments.',
'A friend is someone who gives you total freedom to be yourself.',
'Where\'s your will to be weird?',
'Death makes angels of us all and gives us wings where we had shoulders smooth as ravens claws.',
'I like people who shake other people up and make them feel uncomfortable.',
'This is the strangest life I\'ve ever known.',
'I believe in a long, prolonged, derangement of the senses in order to obtain the unknown.',
'Whoever controls the media, controls the mind.'
];
function newQuote() {
var randomNumber = Math.floor(Math.random() * (quotes.length));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
font-family: 'Barrio', cursive;
font-size: 62.5%;
background: url('http://cdn.wallpapersafari.com/11/52/eQLxD8.jpg');
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
text-align: center;
width: 90%;
}
.title {
font-size: 4.5em;
}
.image {
max-width: 100%;
height: auto;
border-radius: 20px;
}
.quo {
background: #fff;
font-family: 'Comfortaa', cursive;
font-size: 2.5em;
}
.button {
background: black;
color: white;
padding: 20px;
border: 5px solid black;
font-size: 1.2em;
border-radius: 100px;
}
.button:active {
background: red;
}
<link href="https://fonts.googleapis.com/css?family=Barrio" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<body class="container">
<div class="wrapper">
<h3 class="title">
Jim Morrison's<br> Quote Machine
</h3>
<div>
<img class="image" src="http://www.thefashionisto.com/wp-content/uploads/2016/04/Jim-Morrison-Style-Picture-Leather-Pants-Suede-Jackets-800x1093.jpg">
</div>
<button class="button" onclick="newQuote()">
Touch me
</button>
<button><i class ="fa fa-twitter"></i></button>
<div class="quo" id="quoteDisplay">
</div>
</div>
</body>
Rather than an inline event handler, you should use an event listener within your JavaScript like so:
(function(d,M){
var quotes=["Expose yourself to your deepest fear; after that, fear has no power, and the fear of freedom shrinks and vanishes. You are free.","There are things known and things unknown and in between are the doors.","I think of myself as an intelligent, sensitive human being with the soul of a clown which always forces me to blow it at the most important moments.","A friend is someone who gives you total freedom to be yourself.","Where's your will to be weird?","Death makes angels of us all and gives us wings where we had shoulders smooth as ravens claws.","I like people who shake other people up and make them feel uncomfortable.","This is the strangest life I've ever known.","I believe in a long, prolonged, derangement of the senses in order to obtain the unknown.","Whoever controls the media, controls the mind."],
len=quotes.length,
p=d.querySelector("p");
p.appendChild(d.createTextNode(""));
d.querySelector("button").addEventListener("click",function(){
p.firstChild.nodeValue=quotes[M.floor(M.random()*(len))];
},0);
})(document,Math);
*{font-family:sans-serif;}
<p></p>
<button>New Quote</button>
ES6 version:
{
let quotes=["Expose yourself to your deepest fear; after that, fear has no power, and the fear of freedom shrinks and vanishes. You are free.","There are things known and things unknown and in between are the doors.","I think of myself as an intelligent, sensitive human being with the soul of a clown which always forces me to blow it at the most important moments.","A friend is someone who gives you total freedom to be yourself.","Where's your will to be weird?","Death makes angels of us all and gives us wings where we had shoulders smooth as ravens claws.","I like people who shake other people up and make them feel uncomfortable.","This is the strangest life I've ever known.","I believe in a long, prolonged, derangement of the senses in order to obtain the unknown.","Whoever controls the media, controls the mind."],
len=quotes.length,
d=document,
M=Math,
p=d.querySelector("p");
p.append(d.createTextNode(""));
d.querySelector("button").addEventListener("click",()=>p.firstChild.nodeValue=quotes[M.floor(M.random()*(len))],0);
}
*{font-family:sans-serif;}
<p></p>
<button>New Quote</button>
Related
I created an UI where when the user scrolls down the page, 4 grid boxes appears with a "fade in" effect, but when we go up the page, then we scroll down the page again, the animation appears again, while precisely, I don't want the animation to be done several times, but only when the boxes have appeared once.
Here is my code:
const grid_objs = document.querySelectorAll('._grid-obj');
observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0) {
entry.target.style.animation = `grid-obj .8s ${entry.target.dataset.delay} forwards ease`;
} else {
entry.target.style.animation = "none";
}
});
});
grid_objs.forEach((grid_obj) => {
observer.observe(grid_obj);
});
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#300;400;500;600;700;800&display=swap');
.n-sec__ {
min-height: 100vh;
display:grid;
max-height:100%;
}
._box {
background:#f4f4f4;
border-radius: 10px;
position: relative;
}
._grid {
display: grid;
grid-template-columns: auto auto;
min-width: 100%;
}
._grid ._grid-obj {
display: grid;
margin: 1em;
padding: 2em;
max-width: 800px;
opacity: 0;
}
._grid ._grid-obj ._grid-title {
color:#000000;
font-family: 'Inter', sans-serif;
}
._grid ._grid-obj ._grid-p {
font-weight: 300;
color:#000000;
padding: 0.5em 0;
font-size: 10pt;
line-height: 1.1em;
}
<section style="height:100vh;"></section>
<section class="n-sec__ ">
<div class="_container ">
<div class="_grid">
<div class="_grid-obj _box" data-delay="0s">
<h5 class="_grid-title _z">Community</h5>
<p class="_grid-p _z">Take advantage of a dynamic and caring community, present to propel you to the top of your ladder in your artistic journey. Mainly based on sharing, forge links between passionate or professional artists.</p>
<p class="_grid-p">Feel like the best at us (but stay yourself).</p>
</div>
<div class="_grid-obj _box" data-delay=".5s">
<h5 class="_grid-title">Share</h5>
<p class="_grid-p">Sharing is above all our priority, that's what our network represents. Indeed, we want to implement a realization of things that only very few people perceive. You have to know how to share and recognize your work as it is.</p>
<p class="_grid-p">So don't be shy, and show your work to other artists.</p>
</div>
<div class="_grid-obj _box" data-delay="1s">
<h5 class="_grid-title">Security</h5>
<p class="_grid-p">Your projects will always be fine at Nosfera, and uploaded on a secure server owned by otux.cloud. Regarding your account, your password is encrypted and neither the administrative team has access to it.</p>
<p class="_grid-p">So you can sleep soundly.</p>
</div>
<div class="_grid-obj _box" data-delay="1.4s">
<h5 class="_grid-title">Customization</h5>
<p class="_grid-p">Manage your projects as you wish with our system dedicated to artistic organization.</p>
<p class="_grid-p">Manage your projects as you wish with our system dedicated to artistic organization. You have the ability to create the lists you want, reorganize your dashboard, pin the projects you want, and many more!</p>
</div>
</div>
</div>
</section>
I don't know why it is not working in the jsfiddle but it normally does.
once your desired behavior takes place the first time, you can call unobserve() on the observer to stop it from being observed. ( https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/unobserve )
I work on a static web page that is supposed to help Chinese learners.
I paste below an extract of the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pattaya&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Youdao-Dayou Cidian</title>
<link rel="stylesheet" href="words_en_style.css">
<style>
body {
background-image: url("fond_caractères_transp.png");
background-repeat: repeat-y;
background-size: 100%;
}
.temp {
background-color: lightcoral;
margin-top: 80px;
}
.pinyin {
font-family: "Pinyin Okay", "Pattaya", sans-serif;
font-style: unset;
opacity: 0.6;
}
.green {
font-family: "Courier new", monospace;
font-size: 3px;
font-style: unset;
opacity: 0;
line-height: 0.6;
.baratin {
font-family: "Courier new", monospace;
font-size: 18px;
}
.nota {
line-height: 0.6;
}
.commentaire {
font-family: "Courier new", monospace;
font-size: 15px;
line-height: 0.6;
}
.bluemark {
color: rgb(43, 32, 201);
}
#shang {
background-color: rgb(230, 240, 93);
font-family: "Ma Shan Zheng", cursive;
position: fixed;
right: 1.4%;
top: 98%;
width: 8em;
margin-top: -1.6em;
font-size: 14px;
font-weight: bolder;
animation: Test 1s infinite;
}
#keyframes Test {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
h1 {
color: rgb(241, 0, 133);
text-align: center;
text-shadow: 3px 3px 1px rgb(117, 190, 99);
font-family: "Ma Shan Zheng", cursive;
font-size: 68px;
margin-top: 1.8%;
}
p {
font-family: "Ma Shan Zheng", cursive;
font-size: 26px;
margin-top: 2px;
margin-bottom: 2px;
}
#tableaucomposants {
width: 96%;
text-shadow: 3px 3px 1px rgb(204, 140, 163);
font-family: "KaiTi Normal", cursive;
font-size: 30px;
background-color: rgb(245, 174, 196);
position: relative;
margin-top: 0.2%;
margin-left: auto;
margin-right: auto;
text-align: left;
font-style: bold;
padding-top: 1%;
padding-left: 1.4%;
padding-right: 1.4%;
padding-bottom: 0.8%;
}
a:link {
color: inherit;
text-decoration: none;
font-family: "Ma Shan Zheng", cursive;
font-size: 26px;
}
#N°1,
#N°5,
#N°6 {
width: 96%;
font-family: "Ma Shan Zheng", cursive;
font-size: 26px;
background-color: rgb(245, 174, 196);
position: relative;
margin-top: 1%; margin-left: auto; margin-right: auto;
text-align: left;
font-style: bold;
padding-top: 1%; padding-left: 1.4%; padding-right: 1.4%; padding-bottom: 0.8%;
}
</style>
</head>
<body>
<h1>有道-打有 词典</h1>
<section id="tableaucomposants">
氵， 艹 ， 木， 口，
钅 ，
扌， 亻/ 人. <br>
<span class="commentaire">Actually under construction :-) </span>
</section>
<!-- To fill with existing id -->
<section id="N°1">
<p> 氵<span class="baratin"> same as 水: Radical N° 85, not indecomposable,
graphic component N° 43.
876 characters in the Wenlin dictionary, 148 in this Youdao-Dayou lexicon. </span></p>
<p class="nota"> <span class="commentaire">This element is a reference to the liquid (3 drops of
water) and is
always placed on the left of the character it builds. In this form, the third and last stroke is
carried out going up
from left to right, to chain the writing of the following component: it is a ㇀
<span class="pinyin">tí </span>
<span class="green">. </span> 提. This is the most common radical, key, in combination.
No word for this component.<br>
<span class="green">. </span></span></p>
<p><span class="baratin">Used as a radical in:</span> 澳，滨，波，泊，测，
潮，沉，澄，池，淡，滴，淀，洞，渡，洱，法，泛，
沸，浮，港，沟，灌，滚，海，汉，汗，涵，浩，河，洪，湖，滑，汇，混，
浑，活，济，激，渐，江，浇，洁，津，浸，渴，溃，滥，浪，泪，淋，流，
溜，漏，沦，洛，满，漫，没，泌，渺，漠，沫，泥，浓，派，潘，泡，漂，
泼，浦，瀑，汽，漆，泣，浅，潜，清，渠，溶，汝，润，洒，沙，涉，深，
沈，渗，湿，淑，滩，潭，汤，淌，涛，淘，滔，添，涂，湾，汪，温，沃，
污，洗，溪，湘，消，泄，泻，汹，汛，涯，演，沿，淹，淹，洋，液，溢，
泳，涌，游，油，渔，浴，源，渊，澡，泽，渣，沾，涨，浙，治，汁，滞，
洲，注，滋.<br> <span class="baratin"> 139/ ... / 865.</span></p>
<p><span class="baratin">Used as a component of an indecomposable: </span>. </p>
<p><span class="baratin">Used as a component of a character: </span>荡，范，鸿，酒，梁，茫，萍，染，
烫. </p>
</section>
<section id="N°5">
<p> 钅<span class="baratin"> same as </span> 金<span class="baratin">: Radical N° 167,
not indecomposable,
graphic component N° 76.
219 + 488 characters in Wenlin, 40 in this lexicon. </span></p>
<p class="nota"> <span class="commentaire">This graphical element was obtained by compressing
the character 金 on
its width (Compare: 金, 釒, 钅 with 言, 訁, 讠). As 金 <span class="pinyin">jïn</span>,
which means metal, gold, this component refers
to the metal element. It is placed on the left of the characters it composes.
No word for this component.<br><span class="green">. </span></span></p>
<p><span class="baratin">Used as a radical in:</span> 铲，钞，锤，错，钓，钉，锻，锋，钢，钩，锅，键，
锦，
镜，链，铃，铝，锣，铭，铺，钱，铅，钦，锐，锁，铁，
铜，锡，镶，销，银，镇，针，钟，铸，钻. <br>
<span class="baratin"> as </span>金 <span class="baratin"> => </span> 鉴，金. </p>
<span class="baratin"> 36 + 2 / 694.</span></p>
<p><span class="baratin">Used as a component of an indecomposable: </span>. </p>
<p><span class="baratin">Used as a component of a character: as </span> 钅 => 衔. </p>
</section>
<section id="N°6">
<p> 扌<span class="baratin"> same as 手/龵: Radical N° 64, not
indecomposable, graphic component N° 19.
566 characters in Wenlin, 151 in this lexicon. </span></p>
<p class="nota"> <span class="commentaire">This element is a reference to the hand, or a manual
gesture and
is always placed, when used as a radical, on the left of the character it is composing.
It represents a hand and its fingers apart. Surnamed 提手旁
<span class="pinyin">tí</span><span class="pinyin">shôu</span><span class="pinyin">páng</span>,
contained
in the word 提 <span class="pinyin">tí</span> which means rising stroke from left to right, and
of which the last stroke is just an example.
No word for this component.<br>
<span class="green">. </span></span></p>
<p><span class="baratin">Used as a radical in:</span> 挨，按，把，拔，扒，
摆，搬，扮，拌，报，抱，播，拨，搏，捕，擦，操，
插，拆，抄，撤，扯，撑，撑，持，抽，摧，措，挫，打_，搭，担，挡，
捣，抵，掉，抖，扶，抚，拂，搞，搁，拱，挂，拐，护，换，挥，技，挤，
捡，拣，搅，接，揭，捷，据，拒，拘，捐，掘，抗，扛，控，扣，括，扩，
拉，拦，捞，拢，搂，掠，抹，描，摸，挠，拟，捏，扭，挪，排，拍，抛，
捧，批，披，拼，扑，抢，扰，扔，揉，撒，扫，摄，拾，授，摔，撕，搜，
损，拓，抬，探，摊，掏，提，挑，挺，投，推，托，拖，挖，挽，握，捂，
掀，携，押，掩，扬，摇，抑，拥，援，择，扎，摘，找，招，折，振，挣，
指，执，掷，抓，撰，撞，捉.<br>
才. <br> <span class="baratin"> 143/ ... / 579.</span></p>
<p><span class="baratin">Used as a component of an indecomposable: </span>才. </p>
<p><span class="baratin">Used as a component of a character: </span> 垫，啦，啪，热，
势，逝，哲，浙. </p>
</section>
<button id="shang" > <a title="Tableau des Composants"
href="#tableaucomposants"> 上 <span class="green">.... </span> <span class="baratin"> Haut</span>
</a></button>
</body>
Actually, the pinyin class is working for all the five tones of the Chinese language: with a special font that can render äáâà ëéêè ïíîì öóôò üúûù and ÜÚÛÙ. There are now pedagogic methods that associate colors with Chinese tones to help to memorize them.
I want to associate red to the first tone ä, green to the second á, blue for the third â, and grey for the fourth à.
But I have to rewrite 4567 lines (x 2, EN and FR). A search for pinyin gives already 670 (1340) modifications to perform. This lexicon is not yet ended, but it is already a big work :-).
So if I can modify my only one class pinyin by the way of a few code lines, I save time and energy! Isn’t it that? The magical of code?
It looks like it would be possible with JavaScript using something like document.getElementsByTagName('pinyin') which would allow to test what is inside:
/ <span class="pinyin"> vowel to be tested /</span>
and function of the result allocates to the text the good color.
Is there an easier way to do that with PHP or just CSS?
You can use almost any language to do what you want to do, but each language has its speciality. PHP and Nodejs are back-end languages that work on the server - you don't need their server-side abilities but you can use their string-manipulation utilities to do what you need. You might find some challenges, though, uploading, transferring, and saving-out the edited files.
Similarly, javascript is a client-side language that runs in the browser. Still, you could use it to do this project. You might find some of the same challenges as with php.
On the other hand, there are a number of scripting languages that are almost tailor-made for your project. The goal is to choose the easiest and the most re-useable of the languages. These languages include Python, Perl, Windows Powershell, AutoHotKey (AHK), Wilson's WinBatch, etc. Personally, I've done massive projects in WinBatch* because it's so frickin' easy and has a decent help forum and loads of example code. (AHK is a freeware competitor to WinBatch that is more difficult to get started with, but is every bit as powerful). I've also done very significant projects in Python and find it almost as easy as WinBatch. A LOT depends on your operating system - WinBatch only works on Windows machines, but Python works everywhere.
My recommendation would be Python. There is tons of help available on StackOverflow, and the reusability factor is very high.
Your next consideration will be your IDE. WinBatch includes its own, quite dated, IDE but it does the job and allows stepping through your code. If using Python, my personal favorite (freeware) environments are VSCode and Notepad++. VSCode (make sure you have the Python and CodeRunner extensions installed) also allows stepping through code and is definitely the 2020 choice for IDE.
* WinBatch is commercial software that allows you a 21-day trial license that is fully functional except for the compiler. You should have tons of time to complete your project and kick the tires. Disclaimer: I am a long time WinBatch user but have no affiliation with the company whatsoever.
When executing the code below(on jsfiddle) for the first time, it alerts 2,2,3,2,5,9 in a sequential order.
however, executions after the first one always shows 2,2,3,2,6,9. (5 -> 6)
The right value is 6, as seen from a fifth paragraph in a red div on jsfiddle.
(this happens on chrome / safari on mac)
I assume the problem is it's not waiting for the construction of DOM of the appended element.
Any help is appreciated.
$(function(){
let eachPara = $("div:eq(0)").html().split("</p>");
let lineHeight = 18;
$("div:eq(0) p").each(function(i, val) {
$("#parent").append($(this).clone());
let eachRowN = $("#parent p:eq(-1)").height() / lineHeight;
alert(eachRowN);
});
});
complete code:
https://jsfiddle.net/fptd4xkh/1/
$(function() {
let eachPara = $("div:eq(0)").html().split("</p>");
let lineHeight = 18;
$("div:eq(0) p").each(function(i, val) {
$("#parent").append($(this).clone());
let eachRowN = $("#parent p:eq(-1)").height() / lineHeight;
console.log(Math.round(eachRowN));
});
});
#parent {
width: 430px;
background-color: red;
}
#parent p {
width: 100%;
line-height: 18px;
font-size: 17px;
hyphens: auto;
text-indent: 1em;
text-align: justify;
/* 両端揃え(均等割り付け) */
font-family: "Vesper Libre", serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<p>"Christmas won't be Christmas without any presents," grumbled Jo, lying on the rug.</p>
<p>"It's so dreadful to be poor!" sighed Meg, looking down at her old dress.</p>
<p>"I don't think it's fair for some girls to have plenty of pretty things, and other girls nothing at all," added little Amy, with an injured sniff.</p>
<p>"We've got Father and Mother, and each other," said Beth contentedly from her corner.</p>
<p>The four young faces on which the firelight shone brightened at the cheerful words, but darkened again as Jo said sadly, "We haven't got Father, and shall not have him for a long time." She didn't say "perhaps never," but each silently added it, thinking
of Father far away, where the fighting was.</p>
<p>Nobody spoke for a minute; then Meg said in an altered tone, "You know the reason Mother proposed not having any presents this Christmas was because it is going to be a hard winter for everyone; and she thinks we ought not to spend money for pleasure,
when our men are suffering so in the army. We can't do much, but we can make our little sacrifices, and ought to do it gladly. But I am afraid I don't," and Meg shook her head, as she thought regretfully of all the pretty things she wanted.</p>
</div>
<div id="parent"></div>
The spot from where you calculate doesn't have the correct font-face. Try the following.
Change:
#parent {
width: 430px;
background-color: red;
}
#parent p {
width: 100%;
line-height: 18px;
font-size: 17px;
hyphens: auto;
text-indent: 1em;
text-align: justify;
font-family: "Vesper Libre", serif;
}
Into:
div {
font-family: "Vesper Libre", serif;
}
#parent {
width: 430px;
background-color: red;
}
#parent p {
width: 100%;
line-height: 18px;
font-size: 17px;
hyphens: auto;
text-indent: 1em;
text-align: justify;
}
I received some help and figured out how to put the clickable and shareable Twitter button in my Javascript.
However, now when it links the generated quote, in the places where I had unicode escaped characters I get �.
The quotations and hyphen do not appear. How can I fix this?
Below is my Javascript code.
var currentQuote = '';
var quotes = [
'\u201CMeditation is to be aware of every thought and of every feeling, never to say it is right or wrong, but just to watch it and move with it. In that watching, you begin to understand the whole movement of thought and feeling. And out of this awareness comes silence\u201D. - Jiddu Krishnamurti',
'\u201CHave you not noticed that love is silence? It may be while holding the hand of another, or looking lovingly at a child, or taking in the beauty of an evening. Love has no past or future, and so it is with this extraordinary state of silence.\u201D - Jiddu Krishnamurti',
'\u201CA quiet mind is all you need. All else will happen rightly, once your mind is quiet. As the sun on rising makes the world active, so does self-awareness affect changes in the mind. In the light of calm and steady self-awareness, inner energies wake up and work miracles without any effort on your part.\u201D - Nisargadatta Maharaj',
'\u201CLet silence take you to the core of life.\u201D \u2013 Rumi',
'\u201CSilence is a true friend who never betrays.\u201D \u2013 Confucius',
'\u201CYou throw thorns, falling in my silence they become flowers.\u201D \u2013 Gautama Buddha',
'\u201CSilence is an empty space, space is the home of the awakened mind.\u201D \u2013 Gautama Buddha',
'\u201CCare about what other people think and you will always be their prisoner.\u201D \u2013 Laozi',
'\u201CNot thinking about anything is Zen. Once you know this, walking, sitting, or lying down, everything you do is Zen.\u201D \u2013 Bodhidharma',
'\u201CIf you use your mind to study reality, you won\u2019t understand either your mind or reality. If you study reality without using your mind, you\u2019ll understand both.\u201D \u2013 Bodhidharma',
'\u201CThe ultimate Truth is beyond words. Doctrines are words. They\u2019re not the way.\u201D \u2013 Bodhidharma',
'\u201CWhen we\u2019re deluded there\u2019s a world to escape. When we\u2019re aware, there\u2019s nothing to escape.\u201D \u2013 Bodhidharma',
'\u201CTrying to find buddha or enlightenment is like trying to grab space.\u201D \u2013 Bodhidharma',
'\u201CBe empty of worrying. Think of who created thought. Why do you stay in prison when the door is wide open? Move outside the tangle of fear-thinking. Live in silence. Flow down and down in always widening rings of being.\u201D \u2013 Unknown',
'\u201CBeyond The Witness, there is the Infinite Intensity of Emptiness and Silence.\u201D \u2013 Sri Nisargadatta Maharaj'
];
function newQuote() {
var randomNumber = Math.floor(Math.random() * (quotes.length));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}
function tweet() {
var quote = document.getElementById('quoteDisplay').innerHTML // Replace this with appopriate quote that you wanted.
var text = quote;
var tweet_url = "https://twitter.com/intent/tweet?text=" + text;
window.open(tweet_url);
};
document.getElementById("tweetButton").addEventListener("click", tweet);
This is what shows up
It originally had this,
var text = escape(quote);
But would not show anything, so I put
var text = quote;
However, now I get the �.
Here is the simple method that you can use to tweet the things via your twitter button.
function tweet() {
var quote = document.getElementById('quoteDisplay').innerHTML // Replace this with appopriate quote that you wanted.
var text = escape(quote);
var tweet_url = "https://twitter.com/intent/tweet?text=" + text;
window.open(tweet_url);
};
document.getElementById("tweetButton").addEventListener("click", tweet);
You can specify the function in onclick to call the function like a link
var currentQuote = '';
var quotes = [
'\u201CMeditation is to be aware of every thought and of every feeling, never to say it is right or wrong, but just to watch it and move with it. In that watching, you begin to understand the whole movement of thought and feeling. And out of this awareness comes silence\u201D. - Jiddu Krishnamurti',
'\u201CHave you not noticed that love is silence? It may be while holding the hand of another, or looking lovingly at a child, or taking in the beauty of an evening. Love has no past or future, and so it is with this extraordinary state of silence.\u201D - Jiddu Krishnamurti',
'\u201CA quiet mind is all you need. All else will happen rightly, once your mind is quiet. As the sun on rising makes the world active, so does self-awareness affect changes in the mind. In the light of calm and steady self-awareness, inner energies wake up and work miracles without any effort on your part.\u201D - Nisargadatta Maharaj',
'\u201CLet silence take you to the core of life.\u201D \u2013 Rumi',
'\u201CSilence is a true friend who never betrays.\u201D \u2013 Confucius',
'\u201CYou throw thorns, falling in my silence they become flowers.\u201D \u2013 Gautama Buddha',
'\u201CSilence is an empty space, space is the home of the awakened mind.\u201D \u2013 Gautama Buddha',
'\u201CCare about what other people think and you will always be their prisoner.\u201D \u2013 Laozi',
'\u201CNot thinking about anything is Zen. Once you know this, walking, sitting, or lying down, everything you do is Zen.\u201D \u2013 Bodhidharma',
'\u201CIf you use your mind to study reality, you won\u2019t understand either your mind or reality. If you study reality without using your mind, you\u2019ll understand both.\u201D \u2013 Bodhidharma',
'\u201CThe ultimate Truth is beyond words. Doctrines are words. They\u2019re not the way.\u201D \u2013 Bodhidharma',
'\u201CWhen we\u2019re deluded there\u2019s a world to escape. When we\u2019re aware, there\u2019s nothing to escape.\u201D \u2013 Bodhidharma',
'\u201CTrying to find buddha or enlightenment is like trying to grab space.\u201D \u2013 Bodhidharma',
'\u201CBe empty of worrying. Think of who created thought. Why do you stay in prison when the door is wide open? Move outside the tangle of fear-thinking. Live in silence. Flow down and down in always widening rings of being.\u201D \u2013 Unknown',
'\u201CBeyond The Witness, there is the Infinite Intensity of Emptiness and Silence.\u201D \u2013 Sri Nisargadatta Maharaj'
];
function newQuote() {
var randomNumber = Math.floor(Math.random() * (quotes.length));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}
function newFunction() {
alert("Javascript Link");
}
body {
font-family: 'PT Serif', sans-serif;
margin: 0;
<!-- the above allows use of older browsers #D13053 -->
}
h1 {
color: white;
font-size: 45px;
<!-- margin-top: 100px;
-->font-weight: normal;
margin-bottom: 0;
}
h2 {
color: white;
font-size: 25px;
margin-top: 0;
}
.bio {
color: white;
font-size: 14px;
}
.me {
height: 165px;
border-radius: 110%;
border-style: solid;
border-color: white;
margin-top: 40px;
}
.about {
width: 400px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.grey {
height: 3px;
background-color: white;
border: none;
width: 50px;
}
.about-container {
background: url('inc.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 2000px;
}
h3 {
text-align: center;
font-size: 28px;
font-weight: normal;
margin-top: 100px;
color: white;
}
h4 {
text-align: center;
font-size: 24px;
}
button {
border-radius: 20px;
background-color: #ffffff;
font-size: 30px;
font-family: PT Serif, cursive;
padding: 0 20px;
border: none;
border-bottom: black solid 3px;
margin-top: 85px;
vertical-align: bottom;
}
.tweet-button {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 30px;
transition: all 0.5s;
cursor: pointer;
height: 80px;
}
.tweet-button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.tweet-button:active {
transform: translateY(5px);
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i" rel="stylesheet">
<title>Your Core</title>
</head>
<body>
<iframe style="display: none;" width="560" height="315" src="https://www.youtube.com/embed/H2JtoG97zhI?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
<div class="about-container">
<div class="about">
<img src="fib2.jpg" class="me" />
<h1> Find the space, </h1>
<h2>the space which is between thoughts...</h2>
<hr class="grey" />
<button onclick="newQuote()">Breathe and press here
</button>
<h3>
<div id="quoteDisplay">
<!-- quotes here -->
</div>
</h3>
<img id="tweetButton" class="tweet-button" src="http://orig01.deviantart.net/dac8/f/2013/023/b/c/twitter_button___logo_by_pixxiepaynee-d5sfq9u.png" onclick="newFunction();">
<script src="javascript.js"></script>
</body>
</html>
I am creating a mobile app where a user will post content to a feed. For each post would have a separate div area where he can add content and a pic. The problem is that when I paste a dummy text and a photo all in the same div, the height is off and not adjusting itself.
The pic below has the grey background area fully covered when I set it to a specific height
Here is what it looks like now when I set the height to auto. Notice the grey background area is cut short.
The goal is for the div area to auto adjust to the height despite the content the user adds. I have tried height:auto, height:auto !important, height: 100%, height:100 !important, and overflow:hidden. None of those gave me the results I wanted. What would be the best way to make the grey background area cover everything automatically? I would accept an answer that uses JavaScript or jQuery to make that happen.
HTML
<!-- Feed Begins -->
<section class="feed section-padding">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="FalconsFan1 text-center">
<p>FalconsFan1</p>
</div>
<div class="-posts text-center">
<p>497 posts</p>
</div>
<!-- Posts -->
<div class="container Second-Post">
<div class="row">
<div class="col-sm-12">
<img src="img/bitmap_2.jpg" alt="" class="post-avatar">
<h4 class='post-username'>FalconFans1</h4>
<small class="post-timestamp">32 seconds ago</small>
<p class='post-content'>Julio is the best receiver in the game right now!</p>
<img src="img/post-img.jpg" alt="" class="post-img">
<ul class="polling-icons text-center">
<li><img src="img/green-like-button.png" alt=""></li>
<li><img src="img/grey-dislike-button.png" alt=""></li>
<li><img src="img/grey-comment-button.png" alt=""></li>
</ul>
</div>
</div>
</div>
<!-- Posts -->
</div>
</div>
</div>
</section>
CSS
.feed {
margin-top: -50% !important;
}
.FalconsFan1 {
/* width: 392px;
height: 78px; */
font-size: 64px;
letter-spacing: 0.7px;
text-align: center;
color: #3f3f3f;
margin-left: -15%;
}
.-posts {
/* width: 208px;
height: 49px; */
font-size: 40px;
letter-spacing: 0.5px;
text-align: center;
color: #3f3f3f;
margin-left: -15%;
}
.Second-Post {
object-fit: contain;
background-color: #f8f8f8;
height: auto;
width: 988px !important;
}
.Second-Post::after {
content: " ";
display: block;
clear: both;
}
.post-avatar {
position: absolute;
margin-top: 1%;
left: 5%;
width: 86px;
height: 88px;
}
.post-username {
position: absolute;
left: 20%;
font-size: 42px;
}
.post-timestamp {
position: absolute;
margin-top: 6%;
left: 20.5%;
}
.post-content {
position: absolute;
margin-top: 10%;
left: 20.5%;
width: 754px;
height: 70px;
font-size: 27px;
letter-spacing: 0.8px;
color: #3f3f3f;
}
.post-img {
position: absolute;
margin-top: 17%;
left: 20.5%;
width: 779px;
height: 588px;
}
.polling-icons {
list-style: none;
position: absolute;
margin-top: 80%;
left: 10%;
}
.polling-icons li {
padding: 0;
display: inline !important;
padding: 130px;
}
As long you don't have position:absolute in your stylesheet everything will fall into place, make sure your position is set to relative and leave height at auto (which should be default)
#small_div {
padding: 2rem;
background: orange;
}
#large_div {
padding: 2rem;
background: lime;
}
<div id="small_div">
123
</div>
<div id="large_div">
1 In the beginning God created* the heaven and the earth. 2 And the earth was without form, and void; and darkness was upon the face of the deep. And the Spirit of God moved upon the face of the waters. 3 And God said, Let there be light: and there was light. 4 And God saw* the light, that it was good: and God divided* the light from the darkness. 5 And God called the light Day, and the darkness he called Night. And the evening and the morning were the first day. 6 And God said, Let there be a firmament in the midst of the waters, and let it divide the waters from the waters. 7 And God made the firmament, and divided the waters which were under the firmament from the waters which were above the firmament: and it was so. 8 And God called the firmament Heaven. And the evening and the morning were the second day. 9 And God said, Let the waters under the heaven be gathered together unto one place, and let the dry land appear: and it was so. 10 And God called the dry land Earth; and the gathering together of the waters called he Seas: and God saw that it was good. 11 And God said, Let the earth bring forth grass, the herb yielding seed, and the fruit tree yielding fruit after his kind, whose seed is in itself, upon the earth: and it was so. 12 And the earth brought forth grass, and herb yielding seed after his kind, and the tree yielding fruit, whose seed was in itself, after his kind: and God saw that it was good. 13 And the evening and the morning were the third day. 14 And God said, Let there be lights in the firmament of the heaven to divide the day from the night; and let them be for signs, and for seasons, and for days, and years: 15 And let them be for lights in the firmament of the heaven to give light upon the earth: and it was so. 16 And God made two great lights; the greater light to rule the day, and the lesser light to rule the night: he made the stars also. 17 And God set them in the firmament of the heaven to give light upon the earth, 18 And to rule over the day and over the night, and to divide the light from the darkness: and God saw that it was good. 19 And the evening and the morning were the fourth day. 20 And God said, Let the waters bring forth abundantly the moving creature that hath life, and fowl that may fly above the earth in the open firmament of heaven. 21 And God created great whales, and every living creature that moveth, which the waters brought forth abundantly, after their kind, and every winged fowl after his kind: and God saw that it was good. 22 And God blessed them, saying, Be fruitful, and multiply, and fill the waters in the seas, and let fowl multiply in the earth. 23 And the evening and the morning were the fifth day. 24 And God said, Let the earth bring forth the living creature after his kind,
</div>