I am trying to design a piece of rotating text on a website and need help on where to start and how to accomplish this. I want it to say "Our Business Is _ Your Business." and where the _ is i want it to rotate with different words such as "growing" , "building" , "helping" ect. I can code html and am familiar with javascript and jquery. I dont want to do it with flash. At this point i have basic code written for mock up.
<html>
<head>
<title>Rotating Text</title>
<style type="text/css">
body,td,th {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 16px;
color: #00C;
}
</style>
</head>
<body>
<p><strong>Our Business Is Your Business!</strong></p>
</body>
</html>
Any help would be greatly appreciated.
You could accomplish this with jQuery easily, replace the area that you wish to replace with a span, and use jQuery to replace the contexts of that span with a random word from your array.
HTML:
<p><strong>Our Business Is <span id='test'>XXX</span> Your Business!</strong></p>
jQuery:
<script type='text/javascript'>
$(document).ready(function(){
//Sets your words into an array
var phrases =new Array("growing","building","helping");
//Selects a random one
var random = Math.floor(Math.random()*phrases.length);
//Sets your area to use that random word
$("#test").text(phrases[random]);
});
</script>
Working Demo
If you required a rotation, you could simply wrap that inside of a setInterval function:
jQuery:
function setRandomWord()
{
var phrases =new Array("growing","building","helping");
//Selects a random one
var random = Math.floor(Math.random()*phrases.length);
//Sets your area to use that random word
$("#test").text(phrases[random]);
}
//Your function will fire every 5 seconds...
setInterval(setRandomWord,5000);
Working Demo with Interval
Full Code for Copy Pasting:
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
function setRandomWord(){
var phrases =new Array("growing","building","helping");
$("#test").text(phrases[Math.floor(Math.random()*phrases.length)]);
}
setInterval(setRandomWord,3000);
});
</script>
</head>
<body>
<p><strong>Our Business Is <span id='test'>bettering</span> Your Business!</strong></p>
</body>
</html>
You can use setInterval example
var words = ['Growing', 'building'];
var index = 0;
function rotate() {
document.getElementById('text').innerHTML = "Our Business Is " + words[(index++)%(words.length)] + " Your Business!!";
}
setInterval(rotate, 2000);
You can create an array, populate it with the words you want, and then choose a random element of that array.
var words = new Array();
words[0] = "word 1";
words[1] = "word 2";
words[2] = "word 3";
words[3] = "words 4";
var randomnumber=Math.floor(Math.random()*4)
alert(words[randomnumber]);
where 4 dictates that the random number will fall between 0-3. To increase the range to, say, 100, simply change 4 to 101 instead
Related
in a Spreadsheet I have in cell A1 a number. I know how to read it and use in a html file created inside the script ( with HtmlService)
Is there a way to use the data in an external page?
On my site I'm trying to have somethin like:
<p>In your bag there are</p> + "cellA1Value" + <p>carrots</p>
Ask if I have not been clear. Thanks
Reading a value from an External Page
You will have to put the appropriate value in Sheet1!A1.
You will have to deploy as webapp and give access to anyone, even anonymous.
Then everytime you load your page it loads that value into <span id="spn1"></span>
Here's the doGet():
function doGet(e){
if(e.queryString !=='')
{
var s=SpreadsheetApp.getActive().getSheetByName('Sheet1').getRange(e.parameter.range).getValue();
}else{
var s='No Query Parameter Received';
}
return ContentService.createTextOutput(s);
}
Here's my external website code:
<html>
<head>
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
var url='https://script.google.com/macros/s/AKfycbxjlJNGYL65mItHLoL76jiEWX4iQlKzpywMAjg5SMgUUUZNbm8/exec?range=A1';
$.get(url,function(data,status){
document.getElementById('spn1').innerHTML=data;
});
});
console.log('MyCode');
</script>
</head>
<body>
<div id="mydata">The size of my ruler is <span id="spn1"></span> inches.</div>
</body>
</html>
You could use a multicell range and return a delimited string, split it and then loop through the array assigning values to different spans.
I have a demo in which I am rendering Math in web page using MathJax.js. This demo is at Online Demo.
I get the Math rendered perfectly, but now I want to do the reverse of Math rendering i.e. get the html markup associated with rendered Math. I tried a couple of methods MathJax.Hub.getJaxFor(div) and also div.innerHTML but none gave me the original markup.
I want to get the original markup , which in this demo is $$x^2 = x +2$$ using some API in MathJax.
Question
What API in MathJax will I use to get the original markup in the demo below?
Demo code
<script>
function getMathMarkup() {
var div = document.getElementById("mathMarkup");
//I need to get the original Tex markup with $$ delimiters
//once the Math gets rendered
alert(MathJax.Hub.getJaxFor(div));
alert(div.innerHTML);
}
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<button type="button" onclick="getMathMarkup();return false;">Get Math Markup</button>
<div id="mathMarkup">
$$x^2 = x +2$$
</div>
I want to get the original markup , which in this demo is $$x^2 = x +2$$ using some API in MathJax.
That's not possible as such; the delimiters will be removed during pre-processing and are not stored. You would have to track user input yourself if you needed the original.
However, you can look up the display style and derive the delimiters from there.
Here's an example.
<script>
function getMathMarkup() {
var div = document.getElementById("mathMarkup");
//I need to get the original Tex markup with $$ delimiters
//once the Math gets rendered
var math = MathJax.Hub.getAllJax("MathMarkup")[0];
var text = '$' + math.originalText + '$';
if (math.root.display) text = '$' + text + '$';
alert(text);
};
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<button type="button" onclick="getMathMarkup();return false;">Get Math Markup</button>
<div id="mathMarkup">
$$x^2 = x+2$$
</div>
An alternative is to simply look up the script tag that is placed in the DOM right after the output. Then you can reconstruct the information from there, without relying on MathJax's API.
I have been looking for a solution for this for a long time and I just could not find what I was looking for. I have made a code that is an automatic traffic light and it loops through. How can I change it so when I click it goes through the sequence and stops when it gets back to Red?
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body onload="startTime();">
<img id="img1" />
<script>
var imgArray = new Array("Red.jpg","RedA.jpg","Green.jpg","Amber.jpg");
var imgCount = 0;
function startTime() {
if(imgCount == imgArray.length) {
imgCount = 0;
}
document.getElementById("img1").src = imgArray[imgCount];
imgCount++;
setTimeout("startTime()", 1000);
}
</script>
</body>
</body>
</html>
You just need to change setTimeout function syntax.
setTimeout(function(){
startTime();
},1000);
Check working example
I need help to transfer an array from one page to another page. Following is the code that I created with a list of names.
In another papge, I want to this array and also print them out. I am wondering whether I could get this array by javascript. Thank you so much!
I have seperated two paragrahs of code so that you can easily read them. Thanks a lot!
<html>
<head>
<title>ys</title>
</head>
<body>
<script type="text/javascript">
var aName = new Array;
aName[0] = "daniel";
aName[1] = "zhang";
aName[2] = "alex";
aName[3] = "yang";
aName[4] = "Amy";
aName[5] = "Wang";
aName[6] = "Vincent";
aName[7] = "Lee";
for (i=0; i<8; i++)
{
document.write(aName[i] + "<br>")
}
</script>
</body>
</html>
<html>
<head>
<title>get the array from s.html and print out</title>
</head>
<body>
<script type="text/javascript">
for (i=0; i<8; i++)
{
document.write(aName[i] + "<br>")
}
</script>
</body>
</html>
Ah, life-cycle management. Is it OK to send it as a parameter? For example,
https://www.google.com/search?q=weather
If yes, see https://stackoverflow.com/a/9146311/227646 which says
Encode the array as a request parameter.
You should turn your array into a URI encoded string, so probably passing through something like JSON first.
Then decode the parameter in the www.testpage.faces.html
How to get "GET" request parameters in JavaScript?
If no (sensitive information), we will have to store it in the browser somehow. Perhaps a cookie?
You can use an external js file if your array is hard-coded.
somefile.js
var aName = ["daniel","zhang", "alex", "yang", "Amy", "Wang", "Vincent", "Lee"];
Html
<html>
<head>
<script type="text/javscript" src="somefile.js"></script>
</head>
<body>
<script type="text/javascript">
for (i = 0; i < aName.length; i++)
{
document.write(aName[i] + "<br>")
}
</script>
</body>
</html>
Other ways: If you use modern browser you can user localStorage for storing big string and split it every time by divider.
Or using cookies but it's ugly.
I am trying to generate a random number between two values that can be changed to whatever I choose. On the load of the page, I want the number to be shown in the body of my site.
Thanks!
It seems to me like you'd prefer to have the whole page written for you, so here you go. I added some very basic styling. Hope you don't mind.
<html>
<head>
<script src="https://randojs.com/1.0.0.js"></script>
<script>
function showRandomNumber(){
document.getElementById("myNumber").innerHTML = rando(5, 10);
}
</script>
<style>
#myNumber{
font-size:100px;
text-align:center;
margin:50px auto;
font-family:Arial, sans-serif;
}
</style>
</head>
<body onload="showRandomNumber();">
<div id="myNumber"></div>
</body>
</html>
Your question was pretty vague about what you needed but here is a Javascript solution that generates a random number between two variables and then sets a <div> content to that:
Fiddle: http://jsfiddle.net/BenedictLewis/xmPgR/
JS:
var link = document.getElementById('getNumber'); // Gets the link
link.onclick = getNumber; // Runs the function on click
function getNumber() {
var minNumber = 0; // The minimum number you want
var maxNumber = 100; // The maximum number you want
var randomnumber = Math.floor(Math.random() * (maxNumber + 1) + minNumber); // Generates random number
$('#myNumber').html(randomnumber); // Sets content of <div> to number
return false; // Returns false just to tidy everything up
}
HTML:
<div id="myNumber"></div> <!-- Your number will appear in here -->
Get number <!-- Link to get number. If the user has no JS enabled it will redirect to no-javascript.html -->
I have done this using javascript,it will generate random numbers between 0-9.Here is the code.
<html>
<body>
<p id="one"></p>
<button onclick="random()">Random</button>
<script>
function random(){
document.getElementById("one").innerHTML = Math.floor(Math.random() * 10);
}
</script>
</body>
If you want output between numbers for example between 1-10 , just edit
Math.floor(Math.random() * 10) + 1;
Hope this will help you.Thank you