setTimeout breaks code what I want to do if after a random text and image has been choosen (that works)
I have a div called quote where the random text and image goes and i want that to fade in say like in 3 seconds time ....
But it just isnt working Im a nooby so any help would be great heres the code I have so far:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Random</title>
<script src="jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="quote"></div>
<script>
(function() {
var quotes = [
{
text: "text1",
img: "http://i.stack.imgur.com/FqBE6.jpg?s=32&g=1"
},
{
text: "text2",
img: "https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG",
},
{
text: "text3",
img: "https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG",
}
];
var quote = quotes[Math.floor(Math.random() * quotes.length)];
document.getElementById("quote").innerHTML =
'<p>' + quote.text + '</p>' +
'<img src="' + quote.img + '">';
})();
$('#quote').hide();
setTimeout(function(){
$('#quote').show();
$('#quote').fadeIn(1000);
}, 3000);
</script>
</body>
</html>
I also want the quote div to be hidden at 1st hide();
any idea's ? thanks.
If you remove $('#quote').show(); from your setTimeout, it will fade in properly.
setTimeout(function(){
$('#quote').fadeIn(1000);
}, 3000);
Related
I am currently using the following code to loop through an array of objects and to display the name of each object in html code:
var doors = [
{
name: "1",
link: "#1"
},
{
name: "2",
link: "#2"
}
];
$('.object').each(function(i) {
this.innerHTML = '<p>' + doors[i].name + '</p>';
});
Now, clicking on the div opens a popup containing an iframe (using the class "popup-iframe").
Is there a way to change the link of the iframe corresponding to the selection on click? So if I click on "2", I would like to change the link to the corresponding link.
I've tried the following but it does not work:
$('.object').each(function(i) {
var link = doors[i].link;
$(this).click(function(){
$('.popup-iframe').innerHTML = '<iframe src="'+ link +'" title="Test"></iframe>';
});
});
The simplified html code looks as follows:
<div id="grid">
<div class="object item-1"></div>
<div class="object item-2"></div>
</div>
Thanks for your help!
Use html() function in jquery instead of innerHTML.
innerHTML is a DOM Element property.
JS :
const doors = [
{
name: "1",
link: "#1"
},
{
name: "2",
link: "https://jsfiddle.net/"
}
];
$(document).ready(function () {
$('.object').each(function(i) {
let link = doors[i].link;
$(this).click(function(){
$('.popup').html('<iframe src="'+ link +'" title="Test"></iframe>');
});
});
});
HTML :
<html>
<head>
<title> Sandbox</title>
<meta charset="UTF-8"/>
</head>
<body>
<div class="object item-1">item1</div>
<div class="object item-2">item2</div>
<div class="popup"></div>
</body>
</html>
So I have an array in my script.js file. The array contains around 12 different things. I use the array to store divs IDs'. Because I want to load those divs dynamically. I've done that I loaded the divs dynamically but now I want to use that array for loading things inside the first div(a title a picture and so on).
let donorFeatureNames = [
'SpawnVehicle',
'RepairVehicle',
'RocketVoltic',
'MoreVehicle',
'ChatColors',
'Deagle',
'M4',
'Sniper',
'CopFeature',
'CrimFeature',
'Changeskin',
'Cash'
]
function loadFeatures () {
for (i = 0; i < 12; i++) {
$('#featureMenu').append('<div id=' + '"' + donorFeatureNames[i] + '"' + 'class="item notLoaded"></div>')
$("'#" + donorFeatureNames[i] + "'").append(span class="title">' + $(this).data('donorfeature') + '</span>)
}
I hope you understand what I'm asking. Cause I'm not that good at explaining things.
Instead of an array, just use jquery:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index1001</title>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//credit to https://stackoverflow.com/questions/941206/jquery-add-image-inside-of-div-tag
$(function () {
$("#test1").append("Text");
$('#test2').prepend("<img src='../../Images/w.JPG' />")
})
</script>
</head>
<body>
<div id="test1" class="anArray"></div>
<br/>
<div id="test2" class="anArray"></div>
</body>
</html>
You can even do this to make an array: $(".anArray").addClass("aColor");
Huangism answered my question.
$("'#" + donorFeatureNames[i] + "'") isn't correct, but this is: $("#" + donorFeatureNames[i])
That's basically what I asked.
Thanks a lot man!
I am trying to display multiple user outputs, so that when something is entered in the text field, it is captured and displayed in the div.
At the moment it keeps overwriting with the new result rather than adding to what is already displayed.
Can anyone help with this?
HTML:
<!DOCTYPE HTML>
<html lang="en">
<!-- more meta data needs to go in here -->
<head>
<script type="text/javascript" src="main_app_javascript.js"></script>
<link rel="stylesheet" type="text/css" href="">
<meta charset="UTF-8">
<title>List Check</title>
</head>
<body>
<input type="text" id="enter_box">
<button onclick="output_function()"> Add To List </button>
<div id="list_output"></div>
</body>
JavaScript:
function output_function() {
var user_input = document.getElementById("enter_box").value;
document.getElementById("list_output").innerHTML = user_input;
}
Do
document.getElementById("list_output").innerHTML += user_input + '<br />';
instead.
This will concatenate your value and add a line break at the end of the text, to create a "list". Notice the =+ and + '<br /> differences.
You could also try this
function output_function() {
'use strict';
var user_input = document.getElementById("enter_box").value;
var list_output = document.getElementById("list_output");
if( list_output.innerHTML === '' ) {
list_output.innerHTML = '<p>' + user_input + '</p>';
} else {
list_output.innerHTML += '<p>' + user_input + '</p>';
}
}
I am trying to put a signature pad in my code, but since that is initiating the a div element and putting scribble area into it. I am struck doing that.
http://www.zetakey.com/codesample-signature.php
<script>
<div id="canvas"></div>
function signature() {
signatureCapture();
var canvas = document.getElementById("newSignature");
var dataURL = canvas.toDataURL("image/png");
alert(dataURL);
}
</script>
So how to initiate directly in view
Thank You in Advance.
I'm not sure if I undersood correctly but here's an option to use the library you have given.
What I'm suggesting is you to use the sap.ui.core.HTML component to add the relevant html code that will instantiate the signature pad. For this to work you need to have the Signature.js file (downloaded from the site) on your project with a minor change.
Please, check the code sample.
index.html
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_goldreflection">
</script>
<script>
sap.ui.localResources("util");
sap.ui.localResources("test");
jQuery.sap.require("util.Signature");
var view = sap.ui.view({id:"idApp1", viewName:"teste.App", type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
test/App.view.js
sap.ui.jsview("test.App", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* #memberOf teste.App
*/
getControllerName : function() {
return "test.App";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* #memberOf test.App
*/
createContent : function(oController) {
var mySignature = '<div id="wrapper"> ' +
' <p>Zetakey Signature Webapp</p> ' +
' <div id="canvas"> ' +
' Canvas is not supported. ' +
' </div> ' +
' ' +
' <script> ' +
' signatureCapture(); ' +
' </script> ' +
' </div>';
var myhtml = new sap.ui.core.HTML();
myhtml.setContent(mySignature);
var clearBtn = new sap.m.Button({text: "Clear Signature", tap: function(evt) {
signatureClear();
}});
return new sap.m.Page({
title: "Title",
content: [
myhtml,
clearBtn
]
});
},
});
util/Signature.js (as downloaded but I've added the first line to make it a ui5 module)
jQuery.sap.declare("util.Signature");
/*************************************************
Signsend - The signature capture webapp sample using HTML5 Canvas
Author: Jack Wong <jack.wong#zetakey.com>
Copyright (c): 2014 Zetakey Solutions Limited, all rights reserved
...THE REST OF THE FILE...
Will this work for you?
Let me know.
Regards.
Actually, I have created a signature pad control for this. So that you can encapsulate signature pad code in one control. http://jsbin.com/suquki/18/edit
-D
So I'm trying to display the results of a few function calls in a JavaScript file that uses benchmark.js in a separate HTML file.
My js file looks something like this (disregard the names of methods and classes):
class.init(function(context) {
Benchmark("function description", {
'defer': true,
fn': function(deferred) {
var x = context.ones([100, 100]);
var y = x.repeat(2, 0);
context.barrier(function (){
deferred.resolve();
});
},
'onComplete': function(event) {
//This is what I'd like to print out
console.log(this.name + ": " + (this.stats.mean * 1000).toFixed(2) + " ms");
//
}
}).run();
There are multiple function calls similar to this.
My HTML just looks something lile:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Sublime Webpage </title>
</head>
<body>
<div class="main">
<div class="head">
<h1>Hello</h1>
</div>
<script src="filename.js"></script>
</div>
</body>
</html>
At the moment, it just prints the results to the console, which is better than nothing, but obviously not what I want. I talked to someone briefly and they suggested I use jQuery. I looked into it, and tried using document.write(this.name + ": " + (this.stats.mean * 1000).toFixed(2) + " ms") in the place of console.log(), but this didn't seem to work. Does anyone have suggestions?
Use document.createTextNode:
// add an output div to your html
<div id='output'></div>
// in your benchmark code
var output = document.getElementById('output');
output.appendChild(document.createTextNode('some result'));
Fiddle