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)
Related
Added
$('#'+course.code).append('<button class="collapsible">'+course.title+'</button>');
To add a button to each div with an ID of course code. The works fine. When I click the button it won't fire the code below. If I copy and paste this exact code it works fine. Does generating a button list of buttons with prepend effect its functionality?
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
alert('sup');
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
Here is the final generated code
<div id="472101A" class="course_card"><button class="collapsible">AP Calculus BC</button>
<div class="row content">
<div class="col-xs-12 col-sm-3">
<p><b>Course Title:</b> <span class="course_title">AP Calculus BC</span></p>
<p><b>Course Code:</b> <span class="course_code">472101A</span></p>
<p><b>Level:</b> <span class="course_level">AP</span></p>
<p><b>Credit(s):</b> <span class="course_credits">1</span></p>
<p><b>Semester(s):</b> <span class="course_semesters">2</span></p>
<p class="course_fee"><b>Course Fee:</b> <span>N/A</span></p>
<p></p></div>
<div class="col-xs-12 col-sm-9">
<div class="course_desc_wrapper">
<p><b>Description:</b></p>
<p class="course_desc">Suggested Skills: Basic understanding of function behavior, such as polynomials, rationals, rational exponent, trigonometric functions and other transcendental functions. Should be able to solve, graph, evaluate and analyze those functions. Should be able to apply those functions to model real world phenomena. Class covers BOTH Calculus 1 and 2. Accelerated Pace. Students should be able to process and apply information at a very fast pace.</p></div>
<div class="course_requirements_wrapper">
<p><b>Prerequisite Classes & Grades:</b></p>
<p class="course_prerequisites">Honors PreCalculus: Students must earn an A,B both semesters and pass a proficiency exam in May
OR
Regular PreCalculus: Students must earn an A both semesters and pass a proficiency exam in May
OR
ATP: Students must earn an A,B both semesters and pass a proficiency exam in May
</p></div>
<div class="course_typicalGradeLevel_wrapper">
<p><b>Typical Grade Level:</b></p>
<p class="course_typicalGradeLevel">11-12</p></div>
<div class="course_levelOfChallenge_wrapper">
<p><b>Level of Challenge (1-5) 5 is extremely challenging:</b></p>
<p class="course_levelOfChallenge">5</p></div>
<div class="course_homeworkCommitment_wrapper">
<p><b>Typical Homework Commitment:</b></p>
<p class="course_homeworkCommitment">4-6</p></div>
<div class="course_careerAspirations_wrapper">
<p><b>Interests / Career Aspirations:</b></p>
<p class="course_careerAspirations">Engineering, Computer Science, Business</p></div>
<div class="course_requirements_wrapper">
<p><b>Other:</b></p>
<p class="course_notes">Suggested Skills: Basic understanding of function behavior, such as polynomials, rationals, rational exponent, trigonometric functions and other transcendental functions. Should be able to solve, graph, evaluate and analyze those functions. Should be able to apply those functions to model real world phenomena. Class covers BOTH Calculus 1 and 2. Accelerated Pace. Students should be able to process and apply information at a very fast pace.</p></div>
<div class="ap_wrapper">
<p><i>*All AP Courses are expected to have a $100 fee ($25 class fee and $75 exam fee).</i></p>
<p><i>The exact exam fee for testing in May 2016 will be released by the CollegeBoard in October 2015. This exam fee determines the total price that students will owe for each AP Course/exam. The AP exam fee may be fully or partially reduced for students with free/reduced lunch, per funding by district and state grants. The exact fee will be provided as soon as the district and state release their funding statement.</i></p>
<p></p></div>
<p></p></div>
<p></p></div>
<hr></div>
It sounds like you are setting the event listener before the element is created. Make sure you run your for loop after the jQuery append statement.
Just to make sure the elements exist when you are setting the listener you could run console.log(coll[i]) to tell you for certain if the element exists yet at that point in execution.
Another option is to use jQuery's on function. So in your case you could use something like this:
$('body').on('click', '.collapsible', function() {
// do something
})
This gives you the benefit that it will trigger even if you append elements to the page after running this function. This will also work for any .collapsible element, and doesn't have to be applied to each one individually.
I have this bit of HTML. I want to insert in the div class content between 2nd and 3rd paragraph tag. I saw .insertAfter() and .insertBefore(). How to do this in plain vanilla JS?
<div class="content">
<div class="lead-image"><img src="/rf/Image-621x414/LiveMint/Period2/2017/10/13/Photos/Processed/bhart-kvpG--621x414#LiveMint.JPG" alt="Vodafone-Idea combine is ahead by a sizeable margin. Photo: Pradeep Gaur/Mint" class="img-responsive">
<div class="img-caption">In a few quarters, Airtel will end up as a clear market leader in terms of revenue market share, even though currently, the Vodafone-Idea combine is ahead by a sizeable margin. Photo: Pradeep Gaur/Mint</div>
</div>
<p xmlns:fn="http://www.w3.org/2005/xpath-functions" class="A5l">After Telenor ASA decided to hand over its India mobile business to Bharti Airtel Ltd for free, the Tata group has done the same. In the June quarter, revenues of these companies together stood at Rs3,202 crore, or nearly $2 billion on an annualized basis. Sure, since Tata’s non-mobile businesses, such as broadband, are being retained, the actual revenue that could potentially accrue to Airtel could be lower.</p>
<p>Still, even using conservative estimates, the Tatas are transferring at least a $1 billion business to Airtel for free. Telenor’s annualized revenues stood at $606 million in the June quarter. </p>
<p>In fact, the Tatas have gone a step further compared to Telenor. For the latter, Airtel agreed to take over outstanding spectrum payments, other operational contracts such as tower leases and employees. But the deal with the Tatas is even sweeter; it will take over only a portion of outstanding spectrum payments and it’s not clear whether operational contracts and employees are part of the deal.</p>
<p>The simple reason Airtel is able to strike such deals is that it is the only buyer in the market. Vodafone India Ltd and Idea Cellular Ltd have enough on their plate with their own merger, and the last thing they would want to engage with is the integration of another telco. Reliance Jio Infocomm Ltd, after having spent Rs2 trillion already in building its network, appears self-sufficient. Of course, these are also distress sales, given the high-cash burn at these companies. For sellers, therefore, one big hope is if Airtel evinces some interest. The only other option is to wind down the business, which entails far higher costs. </p>
<p>A Tata Sons executive told <i>Mint</i> the cost of winding down the business would have been about Rs8,000 crore higher than the current arrangement. Knowing this well, Airtel has stayed shy of rushing into deals, and has waited till sellers agree to its terms.</p>
<div class="mobile-ad">
<div id="div-gpt-ad-1492578481854-0" style="height: 250px; width: 300px; display: none;">
<script>
googletag.cmd.push(function() {
googletag.display('div-gpt-ad-1492578481854-0');
});
</script>
<div id="google_ads_iframe_/3106570/LM_WAP_Story_300x250_Top_0__container__" style="border: 0pt none;">
<iframe id="google_ads_iframe_/3106570/LM_WAP_Story_300x250_Top_0" title="3rd party ad content" name="google_ads_iframe_/3106570/LM_WAP_Story_300x250_Top_0" width="300" height="250" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" srcdoc="" style="border: 0px; vertical-align: bottom;"></iframe>
</div>
</div>
</div>
<p></p>
<p>This puts it in an enviable position; such takeovers help grow market share as well as help plug gaps in its spectrum portfolio at a fairly low cost. In addition, with Vodafone and Idea busy with the merger process, and given the uncertainty among their employees, Airtel can grab market share from its large rivals as well.</p>
<p></p>
<div id="chart-box">
<img class="img-responsive" src="/r/LiveMint/Period2/2017/10/13/Photos/Processed/w_m2m_infratel-kvpG--414x621#LiveMint.jpg" title="">
<div class="zoom_icon"><a class="zoom-icon" href="/r/LiveMint/Period2/2017/10/13/Photos/Processed/w_m2m_infratel-kvpG--414x621#LiveMint.jpg" title="">Click here for enlarge</a></div>
</div>
<link href="/r/PortalConfig/LiveMint/static_content/css/v2/lightbox.css" type="text/css" rel="stylesheet">
<p></p>
<p>However, when things improve—hopefully with Jio’s approval for higher tariffs—Airtel can be expected to be in a fairly strong position as it gobbles up small telcos one after another and also gains share from other companies.</p>
<div class="story-meta"><span>First Published: </span>Fri, Oct 13 2017. 07 16 AM IST
<div class="story-tags">Topics: Airtel Tata Teleservices Airtel Tata Tele acquisition Airtel acquisitions Telenor ASA </div>
</div>
</div>
I am trying to do it in the best possible way. The class name is unique and I can then iterate through. What is the right way?
var myfirstcontent = document.getElementsByClassName('content')[0];
//find paragraphs
var ps = myfirstcontent.getElementsByTagName("p");
// Create a new, plain <div> element
var newdiv1 = document.createElement("div");
// put content etc in the div here...
// Get a reference to the paragraph we want to insert the new div after
var p2 = ps[1];
// Get a reference to the parent element
var parent = p2.parentNode;
// insert after
parent.insertBefore(newdiv1 , p2.nextSibling);
Note if there is no nextSibling it just gets appended to the parent node at the end as that returns null.
How about this?
var div = document.querySelector('div.content');
var thirdP = document.querySelectorAll('div.content > p')[2];
var newDiv = document.createElement('div');
newDiv.innerHTML = '***';
div.insertBefore(newDiv, thirdP);
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>
I am trying to make a random quote generator then use a tweet button to tweet the current quote (the content of the element) but I can only get the twitter api to tweet the url, I have researched and read but am completely stuck any help would be wonderful!
Here is HTML with twitter button
<body>
<h1>J.R.R. Tolkien Quote Machine!</h1>
<div id ="stuff">
<img id="image" src="http://i1376.photobucket.com/albums/ah30/joecarlowittosi/images_zpsukywovht.jpg">
<h2 id = "quotetext">Press the button to discover the first quote.</h2>
<button id = "quotebutton" onclick = "randomQuote()">Get a new quote... </button>
</div>
<!--tweet the url-->
Tweet<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
here is my javascript...
var myQuotes = [
"'Faithless is he that says farewell when the road darkens.'",
"'All we have to decide is what to do with the time that is given us.'",
"'If more of us valued food and cheer and song above hoarded gold, it would be a merrier world.'",
"'Never laugh at live dragons.'",
"'There is some good in this world, and it's worth fighting for.'",
"'Faithless is he that says farewell when the road darkens.'",
"'The world is indeed full of peril, and in it there are many dark places; but still there is much that is fair, and though in all lands love is now mingled with grief, it grows perhaps the greater.'",
"'Many that live deserve death. And some that die deserve life. Can you give it to them? Then do not be too eager to deal out death in judgement.'",
"'Not all those who wander are lost.'",
"'I will not say: do not weep; for not all tears are an evil.'",
"'Little by little, one travels far'",
"'Courage is found in unlikely places.'",
"'It's the job that's never started as takes longest to finish.'",
"'There is nothing like looking, if you want to find something. You certainly usually find something, if you look, but it is not always quite the something you were after.'",
"'The wide world is all about you: you can fence yourselves in, but you cannot forever fence it out.'",
"'It may be the part of a friend to rebuke a friend's folly.'",
]
var myImages = [
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/p0232nkj_zpsevgnb5vx.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/lord-of-the-rings-quiz-orig_zpsse5k5mrg.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/12d212546fbb50f1f278db8d3c893b05_zpsqzlpz91p.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/imgres1_zpsdsmi4elj.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/samwise-gamgee_zpsrhuv2u33.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/p0232nkj_zpsevgnb5vx.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/images2_zpsgyxpexod.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/gollum_zpsy583lrzv.png",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/images_zpsonmjtyty.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/imagesq_zpsfgguq2ha.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/imgres_zpsesxdolbh.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/images_zps9qwoibjr.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/imgresw_zpseizew5r4.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/The-Hobbit-An-Unexpected-Journey-2012-1_zpsjxz1lw9i.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/middleearthlargelargerstill_zpscp5xil1m.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/lord_of_the_rings-_the_fellowship_of_the_ring_wallpaper_15_1024_zpssafzudw9.jpg"
]
function randomQuote() {
var randomNumber = Math.floor(Math.random() * (myQuotes.length));
document.getElementById("quotetext").innerHTML = myQuotes[randomNumber];
document.getElementById("image").src = myImages[randomNumber];
}
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