Develop Reference

Get a dynamic input to populate an array and display randomly

I've got some code that currently successfully displays a random quote to users with the below code.
var q = [
'“The only reason I am successful is that I have stayed true to myself.”-Lindsey Stirling',
'“To send light into the darkness of men’s hearts—such is the duty of the artist.” -Robert Schumann',
'“I know that the most joy in my life has come to me from my violin.” -Albert Einstein, physicist, and amateur violin player',
'“When you play a violin piece, you are a storyteller, and you’re telling a story.”-Joshua Bell',
'“Music is about devotion, and knowing when to be free.”-Leonidas Kavakos',
'“Life" is an alike myriad of perpetually ever-changing sound waves. "Living it" is like enjoying listening to this unrepeated orchestra and comfortably jamming along.”-Bo Ratiwat',
'“Playing the violin is, after all, only scraping a cats entrails with horsehair.”-Alan Watts',
'“Love is not love, without a violin playing goat.”-Julia Roberts',
'“When you play a violin piece, you are a storyteller, and you are telling a story.”-Joshua Bell',
'“Violin playing is a physical art with great traditions behind it.”-Vanessa Mae',
'"A table, a chair, a bowl of fruit and a violin; what else does a man need to be happy?"-Albert Einstein',
'If I do not practice one day, I know it; two days, the critics know it; three days, the public knows it."-Jascha Heifetz',
'"I am not handsome, but when women hear me play, they come crawling to my feet."-Niccolo Paganini'
];
var elem = document.getElementById("quotes_contact");
var inst = setInterval(change, 10000);
change();
function change() {
var min = 0;
var max = q.length - 1;
var random = Math.floor(Math.random() * (+max - +min)) + +min;
elem.innerHTML = q[random];
}
But, the website has the functionality to add a quote that should be displayed, therefore I now need the code to pull the quotes from this input form (dynamically), rather than having to update the hard-coded array of quotes.
Can anyone help me work out how to get this dynamic input into my random quote visualizer? Thanks!!
This is the code in the quotes file...
#if(count($quote)>0)
<div class="row margin-adjust">
<div class="col-lg-12">
<div class="card-box table-responsive">
<table id="datatableCustom" class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Quote</th>
<th class="control-label">Action</th>
</tr>
</thead>
<tbody>
<?php $count = count($quote); ?> #for($i=0; $i
<$count; $i++) <tr>
<td>{{$i+1}}</td>
<td>{{$quote[$i]->name}}</td>
<td>{{$quote[$i]->quote}}</td>
<td class="tabactions">
<a onclick="deleteQuote({{$quote[$i]->id}})"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
</td>
</tr>
#endfor
</tbody>
</table>
</div>
</div>
</div>
#else
<div class="row margin-adjust">
<div class="col-lg-12">
<div class="card-box table-responsive">
<div class="no_data">
No Quote Data.<br>
</div>
</div>
</div>
</div>
#endif

You can store the quotes array in JSON, as it supports arrays.
After, you can make a request to the quotes.json file on your website with something like this, then parse the JSON with q = JSON.parse(text)
That pick random function isn't hard coded, and scales to any array, so that should work.

If you want to avoid repetitions within the current session then I would advise you to shuffle the quotations array q and then show the (shuffled) array elements in a sequential order:
var q = ['“The only reason I am successful is because I have stayed true to myself.”-Lindsey Stirling', '“To send light into the darkness of men’s hearts—such is the duty of the artist.” -Robert Schumann', '“I know that the most joy in my life has come to me from my violin.” -Albert Einstein, physicist and amateur violin player','“When you play a violin piece, you are a storyteller, and you’re telling a story.”-Joshua Bell','“Music is about devotion, and knowing when to be free.”-Leonidas Kavakos','“"Life" is a like myriad of perpetually ever-changing sound waves. "Living it" is like enjoying listening to this unrepeated orchestra and comfortably jamming along.”-Bo Ratiwat','“Playing a violin is, after all, only scraping a cats entrails with horsehair.”-Alan Watts','“Love is not love, without a violin playing goat.”-Julia Roberts','“When you play a violin piece, you are a storyteller, and you are telling a story.”-Joshua Bell','“Violin playing is a physical art with great traditions behind it.”-Vanessa Mae','"A table, a chair, a bowl of fruit and a violin; what else does a man need to be happy?"-Albert Einstein','If I do not practice one day, I know it; two days, the critics know it; three days, the public knows it."-Jascha Heifetz','"I am not handsome, but when women hear me play, they come crawling to my feet."-Niccolo Paganini'];
function shuffle(a,n){ // shuffle array a in place (Fisher-Yates)
let m=a.length;
n=n||m-1;
for(let i=0,j;i<n;i++){
j=Math.floor(Math.random()*(m-i)+i);
if (j-i) [ a[i],a[j] ] = [ a[j],a[i] ]; // swap 2 array elements
}
}
shuffle(q);
let n=q.length,i=0;
console.log(n+" quotes:")
setInterval("console.log(q[i++%n])",1000)

Include Different letter tempates under ng-repeat

I am wanting to see if there is a way to bring in letter templates that have different text content on them inside my ng-repeat which only brings in the template title from my server. I want to see if I can get the content in without putting it along the other data on the server. Any suggestions?
Here is my controller where I am currently bringing in 1 template but that template is being repeated when I dont want it to be:
app.controller('letterTemplatesCtrl', function($scope, letterTemplatesSrv) {
$scope.getAllTemplates = letterTemplatesSrv.getAllTemplates().then(function(response) {
$scope.templates = response.data;
});
//Changes tempalte border to red when select button is clicked
$scope.activeTemplate = function(index) {
$scope.isSelected = index;
};
// Truncated letter template content
$scope.longText1 = "Dear (name), Ho Ho Ho! Merry Christmas! The Elves and I are busy making presents for all of the good boys and girls around the world. You have been such a good (boy/girl) this year, so I wanted to take a minute to write you a letter. I’ve made my Naughty and Nice list, and I’ve checked it twice. You are on my Nice List! I am so happy that you have been such a good (boy/girl) this year.I heard from my secret messenger that you want (What do they want for Christmas?) for Christmas this year. Because you have been so good, the Elves and I have prepared a special present for you to open on Christmas Morning. Can you do me a favor? I want you to try really hard to (insert something that the child needs to work on). If you can do that for me, then I will be very happy and might bring you an extra treat on Christmas Morning. By the time I get to your house in (location), I am going to be very hungry. Would you leave some cookies and milk out for me? Chocolate Chip cookies are my favorite, but I love all kinds of cookies! Well I need to get back to my workshop and help the Elves. Keep up the good work (Name) and have a Very Merry Christmas! Ho Ho Ho, Santa Claus";
});
Here is my HTML:
<div layout="row" layout-xs="column" layout-padding layout-margin layout-align="center center">
<div flex ng-repeat="template in templates">
<div class="template-chooser" ng-class="{'selected-template':isSelected === $index}">
<span class="template-title">{{template.template_name}}</span>
<p class="template-content" ng-text-truncate="longText1" ng-tt-chars-threshold="40"></p>
<md-button class="md-raised md-primary template-chooser-btn" ng-click="addProductToCart(product); activeTemplate($index)">Select</md-button>
</div>
</div>
</div>

Javascript reveal text animations?

I am a bit stumped on this. I just started working with javascript and I am having a little trouble getting this to work. Basically I have links within paragraphs that expand when clicked using javascript. However, I would like to add an effect to this expansion such as fading or scrolling. Previously, I have only added effects to div classes but this isn't a div. Anyway here is my code thanks!
Javascript:
function reveal(a){
var e=document.getElementById(a);
if(!e) return true;
if(e.style.display=="none"){
e.style.display="inline"
} else {
e.style.display="none"
}
return true;
}
html:
<title>Project Star in a Jar</title>
<link rel="stylesheet" type="text/css" href="/../default.css"/>
<script type="text/javascript" src="/jscript/function.js"></script>
</head>
<link rel="shortcut icon" href= "/../images/favicon.png"/>
<link rel="icon" href="/../images/favicon.png" type="image/x-icon">
<body>
<div class="wrapOverall">
<div class="header">
<div class="logo">
<img src="/../images/starJar.png" href="index.php" style="width:100px;height:100px">
<div class="moto">
<h1> Project Star in a Jar</h1>
</div>
</div>
<div class="nav_main">
<ul>
<li>Home</li>
<li>Tutorial</li>
<li>Videos</li>
<li>Other Resources</li>
</ul>
</div>
</div>
<div class="sideContent">
<div class="sideTitle">
<h3>Table of Contents</h3>
</div>
<div class="sideLinks">
<ul>
<li>i. Introduction</li>
<li>1. What is Fusion?</li>
<li>2. Hazards and Safety</li>
<li>3. Vacuum Chamber</li>
<li>4. Inner Grid</li>
<li>5. Outer Grid</li>
<li>6. Vacuum System</li>
<li>7. Electrical System</li>
<li>8. Achieving Fusion </li>
<li>9. Putting it all Together</li>
<li>10. Great, Now What?</li>
</ul>
</div>
</div>
<div class="Content">
<div class="contentTitle">
<h1>Star in a Jar - A How-To Guide</h1>
<h2>Introduction</h3>
</div>
<div class="contentText">
<!--Paragraph One-->
<p>
Why would anyone want to build a <q>star in a jar</q>? Is it because they want to feel like a mad scientist? Because they want to impress their friends or peers? Although these are all possible reasons, the main reason why people have been building and researching these incredible devices is because quite frankly, we are running out of energy solutions. If we don't have a working solution in the next 20-50 years, we either won't have energy or the little energy we produce will be outrageously expensive. The energy that we consume is almost directly matched with the human exponential growth model and we simply cannot be sustained with conventional energy production methods. The more people that are aware or interested in this technology, the faster we will be able to develop fusion based energy solutions.
</p>
<!--Paragraph Two-->
<p>
Since this is an advanced topic and this writing will use highly technical lexis, I will write in such a way as to target multiple audiences. I understand that some of you reading this are doing so because you are planning on building or already built a fusion device and are looking for more useful information to further develop and experiment with your device. On the other hand, some of you may be reading this from a purely academic standpoint and have nor the intention or means to build such a device. That is perfectly fine! If the former, and you are familiar with the terms and already have an understanding of the concepts in this text, then you can read it without expanding the text for a better tailored experience. However, if the latter, and you are unfamiliar with the terms of this field, I have developed the writing on the site to be dynamic and interactive. Every word or phrase you see that is in orange, can be expanded into an explanation when clicked. Try it out with the following phrase!
What is Tritium?.
<a id="para1" style="display:none">
(Tritium is a radioactive isotope of hydrogen with one proton and two neutrons)
</a>
I implemented this feature because I realize that this writing will be read by many different audiences with their own unique purposes for reading. As the writer, I strive to make this writing dynamic to fit their needs independently without compromising convince or enjoyment. Although the main purpose of this tutorial is to give a detailed analysis of the device and its workings in a tutorial based format, it is also to educate and address the needs and wants of the reader and hopefully, in the process raise awareness to a phenomenal technology that will change the world.
</p>
<!--Content Image-->
<div class="contentImage">
<img src="/../images/intro1.jpg" style="width:300px;height:300px">
</div>
<!--Paragraph Three-->
<p>
This tutorial is not going over any new exotic technology. The particular machine described uses very basic principles of classical physics and has been around since the mid 60's. Depending on the materials you have on hand, your results will vary. I can guarantee at the bare minimum, you will have a working demo fusor if you follow this tutorial. A demo fusor essentially does everything a normal fusor does, with the exception that no fusion of atoms is occurring. It is called demo because it is typically much easier to build and operate safely and is used to demonstrate the operation of a fusor. The picture on the right is of a preliminary run of my first demo fusor.
</p>
<!--Paragraph Four-->
<p>
<b>WARNING:</b>
</p>
<!--Paragraph Five-->
<p>
Before we begin the tutorial, I would like to point out that although this machine is of a very simple design and can be built from essentially junk, does NOT mean it is by any means safe. The minimum operating voltage for most demo fusors are 2-6kv and 10-30kv for fusors achieving fusion reactions. High voltages are extremely dangerous and the high voltage supplies discussed can and most likely will kill you if an accident occurs or you misuse them. The Hazards and Safety section will go into more detail about the all possible hazards presented and how to deal with them accordingly.
</p>
<!--Paragraph Six-->
<p>
Understand that this is a dangerous experiment that if done improperly, has the potential to harm or kill you or others who do not follow proper safety measures. I do not take any responsibility for death, injury, property damage, potential outrageous energy bills, blown breakers, glowing in the dark, fecaled pants, becoming a green hulk when angry, or failure of experimenter to hold sufficient health, liability or property insurance.
</p>
</div>
<div class="contentSelector">
>>
</div>
</div>
</div>
<div class="footer">
<a>
Copyright # 2014 Project Star In A Jar. All Rights Reserved.<br>
Website and Content Created by Joshua Hess <a target="blank" href="http://www.youtube.com/s28400"><u>(s28400)</u></a>
</a>
</div>
</body>

Your question isn't entirely clear... but it seems like you're just asking how to do animations in JavaScript.
Here's some code you can use for fading in (taken from http://youmightnotneedjquery.com/):
function fadeIn(el) {
el.style.opacity = 0;
var last = +new Date();
var tick = function() {
el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
last = +new Date();
if (+el.style.opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
}
};
tick();
}
fadeIn(el);
or, if you are using jQuery (not sure if the tag was listed correctly or not), a similar function has already been made for fading in the library:
$(el).fadeIn();
Do note that a fade in in this way requires you setting opacity values (not display values).
You also mentioned in your question "Previously, I have only added effects to div classes but this isn't a div". Classes are just one way to implement CSS styles, if you've used CSS animations before, the same CSS animation will work for nearly any element (there are cases where they won't), you just have to give that element a class with the animation you want. As this wasn't asking for CSS in specific, you can take a look here for more information: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations or at this question for fade in specifically: Using CSS for fade-in effect on page load

Jquery onload/text effect late reaction

In my rails app have this code:
window.onload = ->
$("#mycontainer").typewriter()
$("#div1").fadeIn("slow")
which acts on this:
<blockquote class="pull-left">
<p id="mycontainer">A mathematician, scientist, and engineer are each asked: "Suppose we define a horse's tail to be a leg. How many legs does a horse have?" The mathematician answers "5"; the scientist "1"; and the engineer says "But you can't do that! </p>
<small id="author">Emmanuel Mensah </small>
</blockquote>
Now, I can clearly see the window.onload function which I understand to let the jquery kick in right after the page loads. I realised that first, the page loads and then for a split second, I can see the (whole) text BEFORE the text effects comes in (effect is a typewriting which means text should not be visible but typed key after key...to the right). But I am wondering how to this so that when the page loads, I don't see the text at all but just after the jquery kicks in.
I tried to add this CSS style: display:none to the <p> tag but this changes nothing. Can someone help me here?

You need to hide them at first to see the showing effect.
window.onload = ->
$("#mycontainer").hide()
$("#div1").hide()
$("#mycontainer").typewriter()
$("#div1").fadeIn("slow")

Try body onload instead.
<body onload="myfunction()">
<blockquote class="pull-left">
<p id="mycontainer" style="display:none;">A mathematician, scientist, and engineer are each asked: "Suppose we define a horse's tail to be a leg. How many legs does a horse have?" The mathematician answers "5"; the scientist "1"; and the engineer says "But you can't do that! </p>
<small id="author">Emmanuel Mensah </small>
</blockquote>
</body>
function myfunction() {
$("#mycontainer").show();
$("#mycontainer").typewriter();
}

How to captured Selected Text Range in iOS after text selection expansion

I'm working on a web app that allows a user to select some text, click a button, and save the highlighted text. This works great in desktop browsers, (chrome for this example), but in iOS I'm having issues with the native text selection, where the user can change the selected text.
Here is the JsFiddle showing the issue (issue only exists in iOS): http://jsfiddle.net/JasonMore/gWZfb/
User starts text selection
User expands their text selection, and clicks "Show the selected text above"
Only the first selected word "The" shows up, even though I want "The Path of the righteous man"
1 Begin
2 Select Text and hit button
3 Only "The"
Here is the JS I am using:
$(function() {
$('#actionButton').click(function() {
$('#result').text(selectedRange.toString());
});
$('#slipsum').on('mouseup touchend','p', function() {
getSelectedRange();
});
});
var selectedRange = null;
var getSelectedRange = function() {
if (window.getSelection) {
selectedRange = window.getSelection().getRangeAt(0);
} else {
selectedRange = document.getSelection().getRangeAt(0);
}
};​
HTML:
<h3>Selected Text:</h3>
<p id="result">
</p>
<br/>
<p>
<input type="button" id="actionButton" value="Show the selected text above" />
</p>
<!-- start slipsum code -->
<div id="slipsum">
<h1>Is she dead, yes or no?</h1>
<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb. </p>
<h1>So, you cold?</h1>
<p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee. </p>
<h1>I'm serious as a heart attack</h1>
<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb. </p>
<h1>Is she dead, yes or no?</h1>
<p>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price. </p>
<h1>Is she dead, yes or no?</h1>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends. </p>
</div>
<!-- please do not remove this line -->
<div style="display:none;">
lorem ipsum</div>
<!-- end slipsum code -->
​

To anyone who stumbles upon this issue in the future, here is the resolution:
http://jsfiddle.net/JasonMore/gWZfb/
$(function() {
$('#actionButton').click(function() {
if (selectedRange) {
$('#result').text(selectedRange.toString());
clearInterval(timer);
}
});
timer = setInterval(getSelectedRange, 150);
});
var timer = null;
var selectedRange = null;
var getSelectedRange = function() {
try {
if (window.getSelection) {
selectedRange = window.getSelection().getRangeAt(0);
} else {
selectedRange = document.getSelection().getRangeAt(0);
}
} catch (err) {
}
};​