When i apply DOJO style to a button, DOJO styled button is displayed along with a small normal button, Can anyone help me with this. Below is the complete HTML code. Thanks in advance.
<html>
<head>
<style type="text/css">
#import "http://o.aolcdn.com/dojo/1.2.0/dijit/themes/tundra/tundra.css";
</style>
<script>
dojoConfig = {
async : true,
parseOnLoad : true
}
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require([ "dojo/parser", "dijit/form/Button" ], function(parser) {
parser.parse();
});
</script>
</head>
<body class="tundra">
<button dojoType="dijit.form.Button" type="button" />
Greetings
</button>
</body>
I'm noticing two things here:
You're closing your button twice:
<button dojoType="dijit.form.Button" type="button" />
Greetings
</button>
Look at the end of the first line, you're ending your <button> using />, which means you're closing the button as well. Replace that by:
<button dojoType="dijit.form.Button" type="button">
Greetings
</button>
The second thing I noticed is that you're loading an old version of the Tundra theme. You're using Dojo 1.9.2, but you're using the Tundra theme of 1.2.0. Try to replace your stylesheet by:
http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/tundra/tundra.css
Related
I'm making a website settings page (I guess) where the user of the website can edit the page values that are seen on the public page of a website. (This is restricted to logged-in users only)
I have a form (shown below) that when clicked, executes AJAX and 'posts' the update content page.
I guess my question here is how can I change the code below so it changes which text body to take from based on the button pressed.
Even simpler, How can I make a page-wide click event that applies to all buttons, of which I can tell which button is pressed?
I know there is only 1 text field and 1 button below, but there are going to be more in the future, hence why I need this fuctionality.
My e.js file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/admin.css">
<title>Manage the website</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submitButton").click(function(){
$.ajax({
url: 'update',
type: 'POST',
data: {
toUpdate: 'homepage',
text: document.getElementById('textField').value // Select a text field based on the button
},
});
});
});
</script>
</head>
<header>
<!-- Put partial includes here -->
</header>
<div class="topPage">
<h1>Hello, <%= firstName %>!</h1>
<p1>
Find a value you would like to edit, then press send. The website can take up to 10 mins for the changes to apply. The changes will not change live.
</p1>
</div>
<div class="homepage">
<div class="information">
<h1>
Homepage variables
</h1>
<p1>
Variables for the 'homepage' page are displayed below. Changes can take up to 10 mins to apply globally.
</p1>
<hr>
</div>
<div class="form">
<label>
Change the 'body' of 'homepage'
</label>
<form action="nothing" method="post">
<input type="text" id="textField" name="text" value="<%= pageData.get('homepage').homeBody%>" required>
<button type="button" class="submit" id="submitButton">Submit Changes</button>
</form>
</div>
</div>
<script>
</script>
</html>
Thanks in advance!
You can do it like this:
$("button").on("click", function() {
console.log($(this).attr("id"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="this">
This
</button>
<button id="that">
That
</button>
select the input tags in the form and track the change event:
$("form :input").on("change", function(){
var $elm = $(this); // the button which is clicked
// do your ajax here
});
I have the following code:
<head>
<title></title>
<link rel="stylesheet" href="./styles/darkula.css">
<link rel="stylesheet" href="./styles/github.css">
</head>
<body>
<div class="container">
<pre>
<code class="html">
<button class="button is-primary">Primary</button>
</code>
</pre>
<!-- Change theme button -->
<button onclick="changeTheme()">Change theme</button>
</div>
<script src="highlight.pack.js"></script>
<script>
hljs.initHighlightingOnLoad();
document.querySelectorAll("code").forEach(function(element) {
element.innerHTML = element.innerHTML.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
});
function changeTheme() {
...
}
</script>
</body>
I am loading 2 themes in my file. Because the github theme is being loaded after the darkula theme, it gets applied to all the code elements automatically. This is fine, but I would like to allow users to dynamically change the theme to darkula with the click of the button. I could not find anything in the documentation. How can I do this?
If you are using sass/scss and handle your dependencies with npm, you can do the next thing:
#use "sass:meta";
html[data-theme="light"] {
#include meta.load-css("highlight.js/styles/a11y-light");
}
html[data-theme="dark"] {
#include meta.load-css("highlight.js/styles/a11y-dark");
}
To make it to work, you need to define the data-theme attribute in your html tag.
<html data-theme="light">
<!-- ensure to change it with javascript and define one with default -->
...
</html>
There's a github response to this same question here https://github.com/highlightjs/highlight.js/issues/2115
Basically you include all the themes you want, and then disable all the link tags except for the selected theme.
The highlight.js demo page does this https://highlightjs.org/static/demo/
The GitHub repository is for the code can be found here.
(https://github.com/highlightjs/highlight.js/blob/master/demo/demo.js)
I am a beginner in HTML. How would I make a button that would hide itself when clicked using JavaScript? This is the code I have already, missing a line.
<!DOCTYPE>
<html>
<body>
<button type="button" onclick="delete()" = ;>Hello</button>
<script>
var delete = function(){
//hide button
}
</script>
</body>
</html>
delete is a keyword in js. Use a different name
onclick="deleteThis(this)"
var deleteThis = function(elem){
elem.style.display = 'none';
// elem.style.visibility = 'hidden';
};
First add button 'id'
<button type="button" id='theid' onclick="delete()" = ;>Hello</button>
Then go to the script part
<script>
var delete = function(){
document.getElementById('theid').style.display="none"; // for hide button
}
</script>
See documentation for Style Visibility.
Add an ID to your button like this:
<button id="my_button" type="button" onclick="delete()" = ;>Hello</button>
Then in your JavaScript:
document.getElementById("my_button").style.visibility = "hidden";
Here is your solution:
<!DOCTYPE html>
<html>
<head>
<title>WisdmLabs</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<button type="button" id="myButton" onclick="hideMe()">Click Me To Hide</button>
<script>
function hideMe(){
$("#myButton").hide();
}
</script>
</body>
</html>
Feel free to ask any doubts or suggestions.
No need to write too much code, I have edited your code , and you can get the effect just like that,,,
<!DOCTYPE>
<html>
<body>
<button type="button" onclick="this.style.display='none'">Hello</button>
</body>
</html>
Can anybody help me how to enable a button based on a click event.
I need a scenario, where we have 2 buttons, Button1 and Button2(disabled by default).
Upon clicking on Button1, say after 10 seconds my Button2 should be enabled.
Where i am doing wrong in the below code? My Button2 is not enabled after i click on Button1. Can anybody help me.
Thanks in advance,
Uday
<html>
<Head>
<Title>Synchronization</Title>
</head>
<script>
function PleaseWait()
{
document.getElementsByName("SampleButton2").disabled=false;
}
</script>
<body>
<input type="button" name="SampleButton1" value="Button1" onclick="PleaseWait()">
<input type="button" name="SampleButton2" value="Button2" disabled>
</body>
</html>
You can do it with jQuery.
Inside $(document).ready() method, define a function PleaseWait(), where you can write the code to remove disabled attribute form your button.
Then when any user clicks on button1, trigger a function to call pleaseWait() function after a delay using setTimeout() method. I used 5 milliseconds for delay. You can increase or decrease it.
<!DOCTYPE html>
<html>
<head>
<title>DOM Level 0 Events Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<input type="button" name="SampleButton1" value="Button1">
<input type="button" name="SampleButton2" value="Button2" disabled>
<script type="text/javascript">
$(document).ready(function(e){
function PleaseWait(){
$('input[value="Button2"]').removeAttr('disabled');
}
$('input[value="Button1"]').click(function(e) {
setTimeout(PleaseWait, 5000);
});
});
</script>
</body>
</html>
try this
document.getElementsByName("SampleButton2").removeAttr('disabled');
or you can use
$('SampleButton2').prop('disabled', false);
I have a page with many section like below.
When I travel from this page to anothe-page-2.html, it is possible when user click back button (from the browser) return and jump to <a name="test 2"></a> ?
try this any of two types...
<html> <head> <script>
function goBack() {
window.history.back() }
</script> </head> <body>
<input type="button" value="Back" onclick="goBack()">
</body> </html>
back