I really enjoy this set of widgets: http://www.jmwidgets.com/index.php/docs/widgets/hmiindicator/
However, I need to set the value of an indicator at initialize (or later on page update) using a value, rather than linking it to another value (although I could do this through a dummy element if I had to I suppose).
I can't, no matter what I've tried, get it to work. Here is the fiddle: http://jsfiddle.net/uLuZQ/39/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HMI Indicator Example</title>
<!-- JMWidgets styles -->
<link rel="stylesheet" href="css/base/jmwidgets-0.8.0.base.min.css">
<link rel="stylesheet" href="css/jmwidgets-0.8.0.allstyles.min.css">
<!-- jQuery classes -->
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery-ui-1.8.23.custom.min.js"></script>
<!-- JMWidget classes -->
<script src="js/jmwidgets-0.8.0.min.js"></script>
<script>
$(function() {
$("#ind1").hmiIndicator( {colors:['red','yellow','green'],value:1} );
var val= $("#ind1").hmiIndicator( 'option','value' );
alert(val)
});
</script>
</head>
<body id="page1">
<div id="ind1" style="width:150px; height:150px"></div>
<br />
</body>
</html>
Please tell me what I'm stupidly missing. The documentation seems pretty clear, but I can't get it to work at initialize or using setter.
Thanks,
C
Related
I am looking at working with Foundation controls in ASP.Net Core. The controls which use JavaScript don't work - they don't produce errors but they don't do things like move or drop down. The other controls work fine.
Here is the source of one of them. I have added all the JavaScript libraries though some may be referenced by others. The control is displayed but does not move.
I don't know what is missing unless the code needs to be wrapped in other tags.
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/Content/foundation.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
</head>
<body>
<div class="slider" data-slider data-initial-start="50" data-end="100">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
<input type="hidden">
</div>
<script src="/Scripts/jquery-3.4.1.js"></script>
<script src="/Scripts/foundation.js"></script>
<script src="/Scripts/plugins/foundation.core.js"></script>
<script src="/Scripts/plugins/foundation.slider.js"></script>
<script src="/Scripts/plugins/foundation.util.motion.js"></script>
<script src="/Scripts/plugins/foundation.util.triggers.js"></script>
<script src="/Scripts/plugins/foundation.util.keyboard.js"></script>
<script src="/Scripts/plugins/foundation.util.touch.js"></script>
<script src="/Scripts/plugins/foundation.accordionMenu.js"></script>
<script src="/Scripts/plugins/foundation.util.nest.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
fixed. The issue was that I should have just linked to foundation.js. However, the "no-js" is not needed but you have to add the "$(document).foundation();" into your source file just before the tag as I have above.
I'm practicing the basics from scratch on a new machine and I can't change the text within the header. For some reason it seems the app.js isn't linked up with my index.html file.
This is what i have in the app.js file:
document.getElementsByClassName("title1").innerHTML = 'Testing 123';
Did I link app.js correctly? Is it because I have also linked other js files (bootstrap, jquery and popper)?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Website Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.fakeimg {
height: 200px;
background: #aaa;
}
</style>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0">
<h1 class = "title1" id="testing11">My First Bootstrap 4 Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
I expected the text within the header to change.
Thanks!
getElementsByClassName returns an array with all specified elements within the document. You can access elements by their index. You can read more about that method from W3Schools.
In your case, you are accessing the first element with that attribute, so that element would be found with an index of 0. You can learn more about indexes and arrays from W3Schools.
document.getElementsByClassName('title1')[0]
I noticed you are using jQuery in your project which enables another method. You can learn more about this from learn.jQuery
$(".title1")[0].innerHTML = 'Testing 123';
I would also suggest you append your javascript to the bottom of the body of your page to minimize above the fold content to have your site load faster. You can learn more about that from Google's Developer Docs.
//app.js
document.getElementsByClassName("title1")[0].innerHTML = 'Testing 123';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Website Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.fakeimg {
height: 200px;
background: #aaaaaa;
}
</style>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom: 0">
<h1 class="title1" id="testing11">My First Bootstrap 4 Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</body>
</html>
getElementsByClassName("title1") returns an array-like object,
use getElementById("testing11") or getElementsByClassName("title1")[0] instead
getElementsByClassName function return an array.
So you need do approach the first element in that array and then you can access to the innerHTML property.
Try this...
document.getElementsByClassName("title1")[0].innerHTML = 'Testing 123';
Or..
Var header = document.getElementsByClassName("title1")[0];
header.innerHTML = 'Testing 123';
Although.. the best solution in this example is to approach to the h1 element by it's I'd that you gave him, and document.getElementById function return single element.
Like so...
document.getElementById('testing11').innerHTML = 'Testing 123';
1st solution: You have to be sure that index.html and app.js are saved in the same folder.
2nd solution: click on F12 and than go to console tab and verify if your html is calling your app.js or if there is any other problem.
The html looks good
You can move the script into end of the body
And check that you use document on ready in your js file
I have been looking for a way to get the same navigation bar on every page. Right now, I have a jQuery script that is loaded onto every page, that should replace a div placeholder; however, when I run the program, the navigation bar is simply not there.
JQuery code:
$(function() {
$("#dropdown").hover(function() {
$("#submenu").stop();
$("#submenu").slideToggle(500);
});
$("#submenu").hover(function()
{
$("#submenu").stop();
$("#submenu").slideToggle(500);
});
$.get("navigation.html", function(data){
$("#nav-placeholder").replaceWith(data);
});
});
Navigation file:
<nav>
CV Game Development
<div class="menu">
<div id="dropdown">Tutorials</div>
<div id="submenu">
Beginner
Intermediate
Advanced
</div>
</div>
</div>
</nav>
Actual HTML file to be used:
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="main.js"></script>
<head>
<title>CV Game Development</title>
<div id = "nav-placeholder"></div>
</head>
<body>
<h1 id = "intro">Welcome</h1>
<h3 id = "subintro">to the CV Game Development website</h3>
<p id = "info">Here is an abundance of information to get you started making 2D games with GameMaker: Studio.</p>
</body>
</html>
It seems like it should work, and yet, it doesn't. Any help is much appreciated, thank you!
As Mohamed-Yousef noticed in comments you have placed your nav-placeholder div element in head tag, which is wrong place for it.
It should be inside body element.
Also your meta, css and script tags must be in head element.
<html>
<head>
<title>CV Game Development</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="nav-placeholder"></div>
<h1 id="intro">Welcome</h1>
<h3 id="subintro">to the CV Game Development website</h3>
<p id="info">Here is an abundance of information to get you started making 2D games with GameMaker: Studio.</p>
</body>
</html>
1st: give <nav> an id to be
<nav id="nav">
2nd: you can use .load() instead of .get() .. And the.load() code should looks like
$('#nav-placeholder').load("navigation.html #nav");
The above code will wrap <nav id="nav"> into <div id="nav-placeholder">
3rd: if you need to replace with you can use unwrap() instead .. so your code should be like this
$('#nav-placeholder').load("navigation.html #nav" , function(){
$('#nav').unwrap();
});
4th: I don't know yet Why your <div id = "nav-placeholder"></div> inside <head> but any way I tested it and the code will work even if its wrapped to <head> ..
I'm just starting on JavaScript and I'm following along this online course where it claims that if I insert <script> tags at the bottom of the page just before the <body> closing tag I should be able to see the website render first followed by the JavaScript code, but it is actually executing the other way around, the JavaScript code executes first and it's not until after I click "OK" on the message popping up that I'm able to see the website fully rendered.
Here is the code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>JavaScript Basics</title>
</head>
<body>
<div class="container">
<h1>Where to place your JavaScript code.</h1>
</div>
<script src="scripts.js"></script>
</body>
</html>
scripts.js
alert("This text should appear after page is fully rendered");
I honestly don't know if this is how the code is supposed to work. Do alert(); scripts always execute first? Maybe the browser has something to do with it? (I'm using the latest version of Chrome). Anyhow, a well explained answer of what's happening would be much appreciated.
Personally, I would do something more like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>JavaScript Basics</title>
</head>
<body>
<div class="container">
<h1>Where to place your JavaScript code.</h1>
</div>
<script>
window.onload = function() {
alert('This should now load after the page.');
}
</script>
</body>
</html>
The window.onload = fun... says "wait until the page has finished loading". Depending on what the browsers decide to (with images, layout, plugins etc.), this may or may not work for you.
Or even something like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>JavaScript Basics</title>
</head>
<body>
<div class="container">
<h1>Where to place your JavaScript code.</h1>
</div>
<script async defer src="scripts.js"></script>
</body>
</html>
With this example, the async attribute means "grab this script file in the background" and the defer means "wait until the page has loaded to execute it".
I'm not really sure why this is not working but I have an MVC View that I want to display the current date/time/seconds on the page. I've put the javascript in the "Scripts/script.js" file. I then added the following at the bottom of the MVC View.
#section scripts {
<script src="~/Scripts/script.js"></script>
<script type="text/javascript">
$(document).ready(function () {
setDateTimer();
});
</script>
}
Thing is when I run it something is causing an error. Unfortunately at the moment I can't see the actual error message because of the way they have the site configured any error just takes you to a generic error page. I do know it has something to do with the code above because removing it cause the page to work.
For testing purposes I even removed all but simple javascript code in the file but that still doesn't work. Right now this is all that is in my script.js file.
function setDateTimer() {
var today = new Date();
}
I know the name of the of the .js file in the code is correct because I just dragged and dropped it to the page from the solution explorer.
Here is most of my _Layout page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
<div class="container body-content">
#RenderBody()
<footer></footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</body>
</html>
Layout page doesn't have a place to render the section you can change it like
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
<div class="container body-content">
#RenderBody()
<footer></footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
#RenderSection("scripts",true)
</body>
</html>