I and my course mate are trying to write a code where when the order button is clicked it should save on local storage and redirect to an order page.
So far when we click on order it is not registered in the application/local storage section of the google developer tool and thus does not redirect to a new page.
We put an eventlistener to show a console.log for when we click, just to be sure the buttons are in order(this part is not important).
We also used an online javascript validator to eliminate typos and errors.
Also do we need any specific code on the order.html file to interface with local storage?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>grc</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>Groceries</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<aside><img class="imgclass1" src="images/rounded logo.png" alt="Grocer Nigeria"></aside>
<article class="preinventory">
<section class="columns-desktop">
<div class="inventory">
<img class="sales" src="images/tomato.jpg" alt="Tomato"/>
<div class="columns">
<div class="title">Tomato</div>
<div class="Price">$100</div>
</div>
<p class="Desc"> Our Tomato2</p>
<button data-order="Tomato2">Order</button>
</div>
<div class="inventory">
<img class="sales" src="images/tomato.jpg" alt="Tomato"/>
<div class="columns">
<div class="title">Tomato</div>
<div class="Price">$100</div>
</div>
<p class="desc"> Our Tomato</p>
<button data-order="Tomato">Order</button>
</div>
</section>
</article>
</main>
<footer>
<nav>
<ul>
<li>Home</li>
<li>Groceries</li>
<li>Contact</li>
</ul>
</nav>
</footer>
<script type="text/javascript">
window.addEventListener("DOMcontentLoaded", function(e){
const orderButtons= document.querySelectorAll("button[data-order]");
orderButtons.forEach(function(button){
button.addEventListener("click",function(e){
const button= e.currentTarget;
const container= button.parentNode;
const order={
id:button.getAttribute("data-order"),
title: container.querySelector(".title").innerText,
price1: container.querySelector(".Price").innerText,
desc:container.querySelector(".desc").innerText
};
localStorage.setItem('order', JSON.stringify(order));
const url = window.location.href.replace("grc.html","order.html");
window.location.href = url;
});
});
});
window.addEventListener("DOMcontentLoaded", function(e){
console.log("The page is loaded.");
});
const orderButtons= document.querySelectorAll("button[data-order]");
orderButtons.forEach(function(button){
button.addEventListener("click", function(e){
console.log("The button was clicked.");
});
});
</script>
</body>
</html>
**Below is what I see when I run the live server**
<!-- Code injected by live-server -->
<script type="text/javascript">
// <![CDATA[ <-- For SVG support
if ('WebSocket' in window) {
(function() {
function refreshCSS() {
var sheets = [].slice.call(document.getElementsByTagName("link"));
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
head.removeChild(elem);
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
head.appendChild(elem);
}
}
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
var address = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function(msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
};
console.log('Live reload enabled.');
})();
}
// ]]>
</script>
</body>
</html>
The issue here is that the event DOMContentLoaded does not fire.
Here is how I have used the load event instead; for redirection, I have simply used URL search params (because I don't know what your other html file looks like) although you may use your other html document instead.
The snippet is below
However note: Stackoverflow will not allow the JavaScript to run, and will throw a securityError. To run this code you must save it on your computer or use a jsFiddle
function continue_ordering() {
alert("Now continue with order");
};
window.addEventListener("load", function(e) {
const orderButtons = document.querySelectorAll("button[data-order]");
orderButtons.forEach(function(button) {
button.addEventListener("click", function(e) {
const button = e.currentTarget;
const container = button.parentNode;
const id = button.getAttribute("data-order");
const order = {
id,
title: container.querySelector(".title").innerText,
price1: container.querySelector(".price").innertext,
desc: container.querySelector(".desc").innerText
};
localStorage.setItem("order-" + id, JSON.stringify(order));
window.location.search = "?ordering=true&order-id=" + id;
});
});
});
window.addEventListener("load", function(e) {
if (window.location.search.search("ordering=true") != -1) {
console.log("User is ordering");
const params = new URLSearchParams(location.search)
const id = params.get("order-id");
if (!id || id == null) throw "There is no order id, error. Remove the ?ordering=true from the url and try again.";
const order_info = JSON.parse(localStorage.getItem("order-" + id));
if (!order_info) throw "Order information is not present: try ordering again. Remove the ?ordering=true from the url";
console.log("Order info is:\n", order_info);
document.getElementById("ordering").removeAttribute("hidden");
return;
};
document.getElementById("make-order").removeAttribute("hidden");
});
const orderButtons = document.querySelectorAll("button[data-order]");
orderButtons.forEach(function(button) {
button.addEventListener("click", function(e) {
console.log("The button was clicked.");
});
});
<div id="make-order" hidden>
<button data-order="test">Order</button>
<div class="title">This is the title</div>
<div class="price">130 USD</div>
<div class="desc">Lorem</div>
</div>
<div id="ordering" hidden>
<h1>
You are ordering.
<br> Choose
Stop ordering Or Continue with order
</h1>
</div>
The DOMcontentLoaded event has already fired by the time that code hooks it.
Check this post;
Code inside DOMContentLoaded event not working
Related
I'm new to web developement and I'm trying to build my first website. This is the main layout...
<!DOCTYPE html>
<html lang="en">
<head>
<title>MusicApp</title>
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/util.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="topnav">
<a id="home"><i class="glyphicon glyphicon-headphones"></i>MusicApp</a>
<div class="search-container">
<form>
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<div class="sidebar" id="sidebar">
<a id="profile">Profile</a>
<a id="like">Liked songs</a>
<a id="genre">Genres</a>
<a id="about">About</a>
</div>
<iframe id="main-frame" name="main-frame" src="/frames/home.htm"></iframe>
<footer>
<p><i class="i-footer glyphicon glyphicon-copyright-mark"></i>Copyright symbol here to make things more interesting.</p>
</footer>
<script src="js/main.js"></script>
</body>
</html>
This is the javascript code...
(function ($) {
"use strict";
$('.sidebar a').on('click', function () {
var elm = event.target.id;
$('.sidebar a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
if (elm === 'profile') {
var $iframe = $('#main-frame');
$iframe.attr('src', '/frames/profile.htm');
} else if (elm === 'like') {
var $iframe = $('#main-frame');
$iframe.attr('src', '/frames/like.htm');
} else if (elm === 'genre') {
var $iframe = $('#main-frame');
$iframe.attr('src', '/frames/genre.htm');
} else if (elm === 'about') {
var $iframe = $('#main-frame');
$iframe.attr('src', '/frames/about.htm');
} else if (elm === 'home') {
var $iframe = $('#main-frame');
$iframe.attr('src', '/frames/home.htm');
}
})
})(jQuery);
It looks like this
I'm changing the iFrame source using jQuery on sidebar click to show the new page content inside of it.
Is my approach appropriate to the problem or is there any better option of doing this in a simple way?
Using iframes as you've proposed is how web development was previously done in the early 2000s, but we have better tools now.
Being that I'm a fan of vanilla JS, I'd recommend using something like fetch to get your HTML stored in separate files.
fetch("https://www.your-domain.com/path/your-file.html")
.then(function (response) {
// gets the data
return response.text();
})
.then(function (data) {
// do stuff with your data here
// create a temp storage element
const div = document.createElement("div");
// deserialize and add the returned HTML to the temp storage element
div.innerHTML = data;
// add the contents of the first element (article in my case) to the document fragment
fragment.appendChild(div.querySelector("article"));
})
.catch((error) => {
console.error("Error:", error);
});
// append the document fragment containing the HTML to the element of your choosing (body in my case)
document.querySelector("body").appendChild(fragment)
There are tons of third-party tools that will do similar things, but I think it's better to know how to do it yourself.
I'd recommend wrapping the whole thing in a function inside of a javascript module.
Disclaimer: This is my subjective opinion
What you have done definitely works and is easy, I don't feel like using an IFrame for this is the proper way to do it.
Of course, at higher complexity this could be handled by a javascript framework like vue and react, but it can be done much simpler:
function loadPage(page) {
let req = new XMLHttpRequest();
req.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("content").innerHTML = req.responseText;
}
};
req.open("GET", page, true);
req.send();
}
<button onclick="loadPage('other.html')">Other page</button>
Clicking on the button now inserts the content of other.html into your div.
What am I doing?
I'm try running two function in order but JavaScript is calling and running two function in same time.
What's the problem?
The setModalBox function give undefined error if is called before setProjects function.
What have I already tried?
I tried used Promise with setTimeout it work, but can sometimes setModalBox function be called before and give of same error.
Part of JavaScript:
class Portifolio{
init() {
this.setProjects();
// this.setModalBox();
}
setProjects() {
let response_promise = fetch("contents/projects.json")
document.addEventListener("DOMContentLoaded", function() {
response_promise.then(response => response.json().then(projects => {
// ? Gradient in border for each color language
for(let project in projects){
// Div project
var div = document.createElement("div");
div.className = "project";
div.id = `project-${projects[project].name}`
document.querySelector(".projects").appendChild(div);
// Tittle project
var h1 = document.createElement("h1");
h1.className = "tittle-project";
h1.innerHTML = projects[project].name;
document.querySelector(`#project-${projects[project].name}`).appendChild(h1);
// Paragraph project
var p = document.createElement("p");
p.className = "about-project";
p.innerHTML = projects[project].about;
document.querySelector(`#project-${projects[project].name}`).appendChild(p);
}
}))
}, false)
return new Promise((resolve, reject)=>{
setTimeout(()=>{
this.setModalBox()
}, Math.random() * 2000)
})
};
setModalBox(){
let projectsLength = document.querySelectorAll(".projects")[0].children.length;
let modalBox = this.modalBox;
for(let i = 0; i <= projectsLength; i++){
let projectsAll = document.querySelectorAll(".projects")[0].children[i];
// That "try" is for not to show error in console
try{
// Open Modal Box
projectsAll.onclick = function(){
modalBox.style.display = "block"
};
}catch{}
// Close Modal Box, when click at "X"
this.modalBoxClose.onclick = function(){
modalBox.style.display = "None"
};
// Close Modal Box, when click out of Modal Box
window.onclick = function(){
if(event.target == modalBox){
modalBox.style.display = "None"
}
}
// Close Modal Box, when press esc key
document.addEventListener("keydown", function(event){
if(event.key == "Escape"){
modalBox.style.display = "None"
}
})
}
}
}
HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Projetos - Vitor Hugo's Portifolio</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<header>
<div id="wrapperJS" style="position: relative; overflow: hidden">
<nav>
<a class="logo" href="/">Vitor Hugo</a>
<div class="mobile-menu">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<ul class="nav-list">
<li>Home</li>
<li>Sobre</li>
<li>Projetos</li>
<li>Contato</li>
</ul>
</nav>
</div>
</header>
<script src="mobile-screen.js"></script>
<!-- Boxes -->
<div class="projects"></div>
<!-- Modal Boxes -->
<div class="modal-box">
<div class="modal-box-contents">
<span class="modal-box-close">×</span>
<p>test</p>
</div>
</div>
</body>
</html>
What I have to do? please help me. If need more information,ask. And sorry for any error orthography and grammar I am studing English.
Try async/await.
For example you can do it like this:
const setProjects = async () => {
try {
await // Put your code here
}catch (err){
console.log(err)
}
};
Then :
setProjects().then(setModalBox());
Now your functions will be executed in an order.
You can just call setModalBox at the end of the DOMContentLoaded event handler.
I am working on the tablet's display of a Pepper robot; I have a functional HTML index page comprising a list of questions—each question redirects to its respective HTML when clicked on—, 2 volume buttons and 2 other buttons—one that pops up an instruction image and the other one that closes the index page and gets back to the splash screen, which when clicked upon, reveals the index page. So far everything is working. The issue is that when I click a question—I get redirected to its HTML page, but then I get stuck there, as neither the 2 volume buttons nor the 2 other buttons work;
I made sure to include the following in each HTML page:
<script type="text/javascript" src="/libs/qimessaging/2/qimessaging.js"></script>
<script type="text/javascript" src="faq.js"></script>
I also reused the same JavaScript functions that worked for the index page.
I commented out some line:
btnPrevious.addEventListener('click', goToPreviousPage);
because I noticed it prevented the splash screen from disappearing when clicked on—i.e., the visibility attribute stays on visible instead of switching to hidden thus revealing the index page, but still, the 3 remaining buttons don't work anyway.
Here is my faq.js code:
/* global QiSession */
var serviceName = 'ADFAQ';
var volumeUpEvent = serviceName + '/VolumeUp';
var volumeDownEvent = serviceName + '/VolumeDown';
var volumeData = serviceName + '/Volume';
/* Clickable buttons */
var btnReturn = document.getElementById('return');
var btnHelp = document.getElementById('call_help');
var btnPrevious = document.getElementById('previous_page');
var btnVolUp = document.getElementById('volume-up');
var btnVolDown = document.getElementById('volume-down');
/* Help image and splash screen */
var helper = document.getElementById('helper');
var img = document.getElementById('click_on_me');
var memory;
var volume;
var audioDevice;
QiSession(connected, disconnected);
function connected (s) {
console.log('QiSession connected');
var questions = document.getElementById('questions');
/* Associating buttons to their respective functions */
btnHelp.addEventListener('click', showHelper);
btnReturn.addEventListener('click', closeQuestions);
//btnPrevious.addEventListener('click', goToPreviousPage);
btnVolUp.addEventListener('click', raiseVolume);
btnVolDown.addEventListener('click', lowerVolume);
img.addEventListener('click', loadQuestions);
questions.addEventListener('click', clickOnQuestion);
s.service('ALMemory').then(function (m) {
m.subscriber(serviceName + '/DialogEnded').then(function (subscriber) {
subscriber.signal.connect(hideQuestions);
});
m.subscriber(serviceName + '/Pepper').then(function (subscriber) {
subscriber.signal.connect(displayPepperHTML)
});
m.subscriber(serviceName + '/RaiseVolume').then(function (subscriber) {
subscriber.signal.connect(raiseVolume);
});
m.subscriber(serviceName + '/LowerVolume').then(function (subscriber) {
subscriber.signal.connect(lowerVolume);
});
memory = m;
});
s.service('ALAudioDevice').then(function (a) {
a.getOutputVolume().then(assignVolume);
audioDevice = a
});
}
function disconnected () {
console.log('QiSession disconnected');
}
function assignVolume(value){
volume = value;
}
function raiseVolume (event) {
var changed = 0;
if(volume < 100) {
volume = Math.min(volume + 5, 100);
audioDevice.setOutputVolume(volume);
changed = 1;
}
memory.insertData(volumeData, volume);
memory.raiseEvent(volumeUpEvent, changed);
}
function lowerVolume (event) {
var changed = 0;
if(volume > 30) {
volume = Math.max(volume - 5, 0);
audioDevice.setOutputVolume(volume);
changed = 1;
}
memory.insertData(volumeData, volume);
memory.raiseEvent(volumeDownEvent, changed);
}
function showHelper (event) {
if (btnHelp.innerHTML === '?') {
helper.style.opacity = '1';
helper.style.zIndex = '1';
btnHelp.innerHTML = '←';
} else {
helper.style.opacity = '0';
helper.style.zIndex = '-1';
btnHelp.innerHTML = '?';
}
btnHelp.blur();
}
function loadQuestions (event) {
memory.raiseEvent(serviceName + '/LoadQuestions', 1);
img.style.visibility = 'hidden';
}
function goToPreviousPage () {
window.location.href = "index.html";
}
function displayPepperHTML() {
window.location.href = "pepper.html";
}
function closeQuestions (event) {
if(location.href != "index.html")
{window.location.href = "index.html";}
memory.raiseEvent(serviceName + '/CloseQuestions', 1);
btnReturn.blur();
}
function hideQuestions (data) {
if (data !== 0) {
img.style.visibility = 'visible';
helper.style.opacity = '0';
btnHelp.innerHTML = '?';
}
}
function clickOnQuestion (event) {
memory.raiseEvent(serviceName + '/' + event.target.id, 1);
}
Here is my non-functioning pepper.html code:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Pepper</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=1280, user-scalable=no" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/faq.css" />
</head>
<body>
<header>
<h1>Bla bla bla</h1>
<span class="buttons">
<button id="previous_page" class="button-help"> ← </button>
<button id="return" class="button-return">X</button>
</span>
<div id="helper" class="pop-up">
<img src="img/interactionscreen_frf.png" alt="Bla bla bla">
</div>
</header>
<ul id="questions">
<p>
Bla bla bla
</p>
<div class="volume-part">
<div id="volume-up" class="Click-me">+</div>
<img src="img/speaker.png" alt="Bla bla bla" style="vertical-align: middle;">
<div id="volume-down" class="Click-me">-</div>
</div>
</ul>
<script type="text/javascript" src="/libs/qimessaging/2/qimessaging.js"></script>
<script type="text/javascript" src="faq.js"></script>
</body>
</html>
Thank you for your help.
I am expecting the pepper.html page to respond to both the volume and ← and X buttons, as the index.html should, since they use the exact same Javascript.
I was able to find some workaround: creating one JavaScript file for each HTML page, this is redundant and non-optimal I know, but at least it works.
This also made me realize that the commented-out line was blocking the program because the index.html page doesn't use the previous_page button, that's what led me to make a JS file for each HTML page.
If anybody has any other suggestions I am all ears.
Edit: I reduced the number of JS scripts to only 2. One for the index.html and the other for the identically-structured html pages of the other questions.
I have a simple widget, and want to load it on different sites. I've read this article and tried to make a solution with AJAX - setting response type to document .
Everything seems ok on first look - slider items loaded, styling is ok. But slider does not start to roll. Seems javascript does not start to run. Pervious/Next buttons also not working.
Below code describes what I've tried so far.
Widget - I used twig for templating, however it is not important. And that produces a carousel/slider like this.
<div class="slider-items-holder">
<div class="control-btns">
<ul><li><strong>Slider</strong></li>
<li></li>
<li></li>
</ul>
</div>
<div class="content-wrapper">
<ul>
{% for job in jobs %}
<li>
<div class="job-spotlight">
<h4>{{ job.title }}<span class="job-type part-time">{{ job.type }}</span></h4>
<span><a target="_blank" href="{{ job.loc_statecode }}">
<i class="marker"></i> {{ job.loc_state }}</a>
</span>
<span><i class="user"></i>{{ job.company }}</span>
<p>{{ job.detail|striptags }} ... </p>
Apply For This Job
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="js/script.js"></script>
JS
function fetch_jobs_widget(selector) {
var url = "http://localhost:9874";
var t = "/static";
var js_template = '<script type="text/javascript" src="'+url+'/js/script.js"></script>';
var css_template = '<link rel="stylesheet" type="text/css" href="'+url+'/css/styles.css">'
var xhr = new XMLHttpRequest();
xhr.open("GET", url+t, true);
xhr.responseType = 'document';
xhr.onload = function(e) {
container(selector).innerHTML = "";
var doc = e.target.response;
var widgetFragment = document.createDocumentFragment();
widgetFragment.appendChild(doc.querySelector(".my-slider"));
container(selector).appendChild(widgetFragment);
container(selector).innerHTML += css_template;
container(selector).innerHTML += js_template;
}
xhr.send();
}
HTML - And I want to use that widget on that page.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="textwidget jobs-plugin-carousel">
</div>
<script type="text/javascript" src="widgets.js"></script>
<script type="text/javascript">fetch_jobs_widget('.textwidget');</script>
</body>
</html>
I have also tried to load HTML/CSS/JS at once but I've came up with the same result.
UPDATE
JS code for slider
//script.js
(function () {
var mySlider, cWrapper, ul, li;
var current = 0;
var timeOut = 3000;
var intervalHandler;
var automaticStart = true;
init();
function init() {
mySlider = document.querySelector(".my-slider");
cWrapper = document.querySelector(".my-slider > .content-wrapper");
ul = document.getElementById("slider-items-holder");
li = ul.querySelectorAll("li");
if (!mySlider || !cWrapper || !ul || !li.length)
return;
ul.style.width = cWrapper.offsetWidth * li.length;
ul.style.height = cWrapper.offsetHeight;
bindEvents();
startSlider();
}
function startSlider() {
if (automaticStart)
intervalHandler = setInterval(next, timeOut);
}
function next() {
if (current + 1 >= li.length) {
current = -1;
}
ul.style.marginLeft = '-' + (li[0].offsetWidth * ++current);
}
function prev() {
if (current - 1 < 0) {
current = li.length;
}
ul.style.marginLeft = '-' + (li[0].offsetWidth * --current);
}
function bindEvents() {
mySlider.addEventListener('mouseover', function () {
clearInterval(intervalHandler);
});
mySlider.addEventListener('mouseout', startSlider);
var prevBtn = document.querySelector(".my-slider > .control-btns a.prev");
var nextBtn = document.querySelector(".my-slider > .control-btns a.next");
if (prevBtn)
prevBtn.addEventListener('click', prev);
if (nextBtn)
nextBtn.addEventListener('click', next);
}
})();
As I see your slider closely I found that you have this line
ul = document.getElementById("slider-items-holder");
which try to find an element with ID "slider-items-holder" but in your slider template you don't have this id for your ul element. So add this id to your second ul element.
Edit
The way you add your JavaScript file dynamically is wrong. You need to add your script to head tag to your html page like this
var myScript= document.createElement('script');
myScript.type = 'text/javascript';
myScript.src = 'http://localhost:9874/js/script.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(myScript);
SO I have code that I'm trying to implement from my jsfiddle into an actual working website/mini-app. I've registered the domain name and procured the hosting via siteground, and I've even uploaded the files via ftp so I'm almost there...
But I'm thinking there's something wrong with my HTML code or JS code or how I implemented my JS code into my HTML code, because all of the HTML and CSS elements are present, but the javascript functionality is absent.
Here is my fiddle:
jsfiddle
^^ Click on start to see the display in action (which doesn't work in the actual website, which leads me to believe there's an issue with my JS file - whether it be code-related or whether that's because I integrated the file incorrectly) (or maybe even uploaded to the server incorrectly, perhaps?)...
And here is the actual site:
http://www.abveaspirations.com/index.html
And here's my HTML code uploaded to the server via FTP:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id='frame'>
<div id='display'>
<h1 id='output'></h1>
</div>
</div>
<div class="spacer">
</div>
<div id="main"> <!-- 11main -->
<h1 id='consoleTitle'>Control Board</h1>
<h5 id='consoleSub'><i>Double-click on an entry to remove. And add entries to your heart's desire...</i></h5>
<div id="controlbox"> <!-- ##controlbox -->
<div id="controlpanel"></div>
<div class="spacer"></div>
<div id="formula"> <!--formula -->
<form id="frm" method="post">
<input id="txt" type="text" placeholder="Insert your own entry here..." name="text">
<input id='submitBtn' type="submit" value="Start">
<input id='stop' type="button" value="Stop">
<select id="load1">
<option id='pre0' value="Preset 0">Preset 0</option>
<option id='pre1' value="Preset 1">Preset 1</option>
<option id='pre2' value="Preset 2">Preset 2</option>
</select>
<!-- These are for buttons as opposed to OPTION...
<input id="load" type="button" value="Preset 1">
<input id="load2" type="button" value="Preset 2"-->
</form>
</div> <!-- formula -->
</div> <!-- ##controlbox -->
</div> <!-- 11main -->
</body>
And my JS code, also uploaded to server via FTP (I didn't include the accompanying CSS file, but if that would help, I can provide ):
$(document).ready(function () {
var txtBox = $('#txt');
var frm = $('#frm');
var output = $('#output');
var subBtn = $('#submitBtn');
var stopBtn = $('#stop');
var loadBtn = $('#load');
var loadBtn2 = $('#load2');
var loadBtnA = $('#load1');
var pre0 = $('#pre0');
var pre1 = $('#pre1');
var pre2 = $('#pre2');
var txt = $('#display');
var preset1 = ["1", "2", "3"];
var preset2 = ["a", "b", "c"];
var container = ["What we do in life echoes in all eternity.", "Find your purpose and give it life.", "When you work your hardest, the world opens up to you."];
var console = $('#controlpanel');
var oldHandle;
function loadPreset0() {
container = [];
console.empty();
container = ["What we do in life echoes in all eternity.", "Find your purpose and give it life.", "When you work your hardest, the world opens up to you."];
updateConsole();
};
function loadPreset1() {
container = [];
console.empty();
container = preset1;
updateConsole();
};
function loadPreset2() {
container = [];
console.empty();
container = preset2;
updateConsole();
};
$(pre0).data('onselect', function() {
loadPreset0();
});
$(pre1).data('onselect', function() {
loadPreset1();
});
$(pre2).data('onselect', function() {
loadPreset2();
});
$(document).on('change', 'select', function(e) {
var selected = $(this).find('option:selected'),
handler = selected.data('onselect');
if ( typeof handler == 'function' ) {
handler.call(selected, e);
}
});
function updateConsole() {
for (var z = 0; z < container.length; z++) {
var resultC = container[z];
var $initialEntry = $('<p>' + '- ' + resultC + '</p>');
console.append($initialEntry);
};
};
updateConsole();
frm.submit(function (event) {
event.preventDefault();
if (txtBox.val() != '') {
var result = txtBox.val();
container.push(result); //1.
var resultB = container[container.length-1];
var $entry = $('<p>' + '- ' + resultB + '</p>');
console.append($entry); //2.
}
var options = {
duration: 5000,
rearrangeDuration: 1000,
effect: 'random',
centered: true
};
stopTextualizer();
txt.textualizer(container, options);
txt.textualizer('start');
txtBox.val('');
});
$("#controlbox").on('dblclick', 'p', function() {
var $entry = $(this);
container.splice($entry.index(), 1);
$entry.remove();
});
function stopTextualizer(){
txt.textualizer('stop');
txt.textualizer('destroy');
}
$(stopBtn).click(function() {
stopTextualizer();
});
});
Any help would be appreciated. I guess I'm just not sure what to do after uploading the html file to the server via ftp. Or maybe I did that correctly and there's something wrong with my code that I'm overlooking. Basically I'm lost. So help please!
You forgot to load jQuery. Make sure that you use <script src="../path-to-jquery/jquery.js"></script> before you load your script.js script.
Also, I noticed that you're loading your scripts in the head tag. This is bad practice, load them right before </body>.
I believe your site is missing jQuery. Add this to the top of your code to hotlink to google's jQuery.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>