I'm trying to use a Ladda progress indicator button. The spinner starts fine, but when I run a setTimeout to simulate another function, it never stops afterward.
Here's the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ladda</title>
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="dist/ladda.min.css">
</head>
<body>
<button id="btn" class="ladda-button" data-color="gray" data-style="expand-right">Fred!</button>
<script src="dist/spin.min.js"></script>
<script src="dist/ladda.min.js"></script>
<script>
document.getElementById('btn').onclick = function() {
var l = Ladda.create(document.querySelector('.ladda-button'));
l.start();
var endIt = setTimeout(stopIt, 5000);
}
function stopIt() {
l.stop(); // Also tried Ladda.stopAll();
alert("End it All!");
}
</script>
</body>
</html>
Any thoughts on how to stop this? TIA
The variable l does not exist in the stopIt-function.
<script>
// Ladda variable needs to be put outside of click event or
// the stopId-function won't be able to use it.
var l = Ladda.create(document.querySelector('.ladda-button'));
document.getElementById('btn').onclick = function() {
l.start();
var endIt = setTimeout(stopIt, 5000);
}
function stopIt() {
l.stop(); // Also tried Ladda.stopAll();
alert("End it All!");
}
</script>
Related
I have Blazor Server side project with MudBlazor first, components working fine (I focus on text field).
Then I add Black Dashboard template (https://www.creative-tim.com/product/black-dashboard) into my project. And issue come.
Here's my _Host.cshtml
#page "/"
#namespace PPJ_Internal_Website_BlazorServer.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PPJ_Internal_Website_BlazorServer</title>
<base href="~/" />
#*<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />*#
<link href="PPJ_Internal_Website_BlazorServer.styles.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link href="assets/css/nucleo-icons.css" rel="stylesheet" />
<link href="assets/css/black-dashboard.css?v=1.0.0" rel="stylesheet" />
</head>
<body>
<component type="typeof(App)" render-mode="ServerPrerendered" />
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">đź—™</a>
</div>
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
<script src="assets/js/core/jquery.min.js"></script>
<script src="assets/js/core/popper.min.js"></script>
<script src="assets/js/core/bootstrap.min.js"></script>
<script src="assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
#*<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>*#
<script src="assets/js/plugins/chartjs.min.js"></script>
<script src="assets/js/black-dashboard.min.js?v=1.0.0"></script>
#*<script src="js/customjs.js"></script>*#
<script src="https://cdn.trackjs.com/agent/v3/latest/t.js"></script>
<script src="_framework/blazor.server.js"></script>
<script>
$(document).ready(function () {
$().ready(function () {
$sidebar = $('.sidebar');
$navbar = $('.navbar');
$main_panel = $('.main-panel');
$full_page = $('.full-page');
$sidebar_responsive = $('body > .navbar-collapse');
sidebar_mini_active = true;
white_color = false;
window_width = $(window).width();
fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
$('.fixed-plugin a').click(function (event) {
if ($(this).hasClass('switch-trigger')) {
if (event.stopPropagation) {
event.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
}
}
});
$('.fixed-plugin .background-color span').click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
var new_color = $(this).data('color');
if ($sidebar.length != 0) {
$sidebar.attr('data', new_color);
}
if ($main_panel.length != 0) {
$main_panel.attr('data', new_color);
}
if ($full_page.length != 0) {
$full_page.attr('filter-color', new_color);
}
if ($sidebar_responsive.length != 0) {
$sidebar_responsive.attr('data', new_color);
}
});
$('.switch-sidebar-mini input').on("switchChange.bootstrapSwitch", function () {
var $btn = $(this);
if (sidebar_mini_active == true) {
$('body').removeClass('sidebar-mini');
sidebar_mini_active = false;
blackDashboard.showSidebarMessage('Sidebar mini deactivated...');
} else {
$('body').addClass('sidebar-mini');
sidebar_mini_active = true;
blackDashboard.showSidebarMessage('Sidebar mini activated...');
}
// we simulate the window Resize so the charts will get updated in realtime.
var simulateWindowResize = setInterval(function () {
window.dispatchEvent(new Event('resize'));
}, 180);
// we stop the simulation of Window Resize after the animations are completed
setTimeout(function () {
clearInterval(simulateWindowResize);
}, 1000);
});
$('.switch-change-color input').on("switchChange.bootstrapSwitch", function () {
var $btn = $(this);
if (white_color == true) {
$('body').addClass('change-background');
setTimeout(function () {
$('body').removeClass('change-background');
$('body').removeClass('white-content');
}, 900);
white_color = false;
} else {
$('body').addClass('change-background');
setTimeout(function () {
$('body').removeClass('change-background');
$('body').addClass('white-content');
}, 900);
white_color = true;
}
});
$('.light-badge').click(function () {
$('body').addClass('white-content');
});
$('.dark-badge').click(function () {
$('body').removeClass('white-content');
});
});
});
</script>
<script>
$(document).ready(function () {
// Javascript method's body can be found in assets/js/demos.js
demo.initDashboardPageCharts();
});
</script>
<script src="https://cdn.trackjs.com/agent/v3/latest/t.js"></script>
<script>
window.TrackJS &&
TrackJS.install({
token: "ee6fab19c5a04ac1a32a645abde4613a",
application: "black-dashboard-free"
});
</script>
</body>
</html>
When I remove <script src="_framework/blazor.server.js"></script>, my custom script tag is working fine, I can change theme, sidbar background but MudBlazor text field working not good.
When I add <script src="_framework/blazor.server.js"></script>, Mud component working good, but custom scripts don't work, I can't change sidebar background or theme.
How can I fix this?
Blazor doesn’t interact with JavaScript the same way that server-side rendered pages do. Components only redraw when Blazor can tell the state has changed (and has various automatic and manual ways of invoking this). That is why when Blazor server js is left out it works and doesn’t when included.
You either need to invoke those JavaScript functions manually by wiring up your own methods that invoke them, write your own Blazor code that does it for you, or find a library with parity functionality.
I declared a function containing setInterval and a function containing clearInterval outside of window.onload = function(){...} . However the timer cannot be stopped as expected
When I clicked the start button, I can see the timer start correctly and "hello" is being printed in the consoled repetitively. However, when I clicked the "stop" button, the timer won't be cleared.
I think upon loading of the document, the onclick function for "start_btn" and "stop_btn" should be ready, then I use the start button and it will set the variable "timer" to a number, and later I click the stop button, why it cannot see the current non-null "timer" variable?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
*{
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var timer = null;
var start_btn = document.getElementById("start");
var stop_btn = document.getElementById("stop");
startFunc(start_btn, timer);
stopFunc(stop_btn, timer);
};
function startFunc(target, timer){
target.onclick = function(){
timer = setInterval(function(){
console.log("hello");
}, 300);
};
}
function stopFunc(target, timer){
target.onclick = function(){
clearInterval(timer);
};
}
</script>
</head>
<body>
<button type="button" id="start">start</button>
<button type="button" id="stop">stop</button>
</body>
</html>
Like CollinD said in comment the problem is the scope of timer, you can get the thing to work by making timer part of th outside scope
var timer = null;
window.onload = function(){
var start_btn = document.getElementById("start");
var stop_btn = document.getElementById("stop");
startFunc(start_btn);
stopFunc(stop_btn);
};
function startFunc(target){
target.onclick = function(){
timer = setInterval(function(){
console.log("hello");
}, 300);
};
}
function stopFunc(target){
target.onclick = function(){
clearInterval(timer);
};
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
*{
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<button type="button" id="start">start</button>
<button type="button" id="stop">stop</button>
</body>
</html>
The reason being setInterval return an int being the ID of the interval and not an object so what's send is a copy of the variable and not the variable itself
if you don't want it to be part of the outside scope then you need to send it has an object like that since they are sent themselves and not by copy :
window.onload = function(){
var timer = {a: null}
var start_btn = document.getElementById("start");
var stop_btn = document.getElementById("stop");
startFunc(start_btn, timer);
stopFunc(stop_btn, timer);
};
function startFunc(target, timer){
target.onclick = function(){
timer.a = setInterval(function(){
console.log("hello");
}, 300);
};
}
function stopFunc(target, timer){
target.onclick = function(){
clearInterval(timer.a);
};
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
*{
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<button type="button" id="start">start</button>
<button type="button" id="stop">stop</button>
</body>
</html>
I have a question about my code. What I'm trying to do is if a certain button is clicked and it isn't clicked again within 4 seconds, a element will be showed and another element hide. But if it is clicked within 4 seconds, it stays the same and so on. I think I should use SetInterval() and ClearInterval(). Currently I have two other functions that do other things. Maybe I can my function there?
Hopefully I have made it clear.
Current javascript code:
var clicks = 0;
function clicks5times() {
clicks = clicks+1;
if(clicks == 6){
document.getElementById('scherm3').style.display = 'block';
document.getElementById('scherm2.2').style.display = 'none';
}
}
var clicked = false;
setInterval(function(){
if (!clicked) {
document.getElementById("scherm4").style.visibility = "visible";
document.getElementById("scherm2.2").style.visibility = "hidden";
}
},13000);
document.getElementById("buttontimer").addEventListener("click", function(){
clicked = true;
});
Rather than set interval, I would say a timer would be better. Eg:
var clickTimer;
function startTimer() {
clickTimer = window.setTimeout(function(){
document.getElementById("scherm4").style.visibility = "visible";
document.getElementById("scherm2.2").style.visibility = "hidden";
},4000);
}
function stopTimer() {
window.clearTimeout(clickTimer);
}
function restartTimer() {
stopTimer();
startTimer();
}
document.getElementById("buttontimer").addEventListener("click", function(){
restartTimer();
});
This way when you want to stop the timer or start the timer, you have to just call above functions for other scenarios.
eg:
If you have an init function:
function init() {
...
//some code
startTimer();
}
And maybe call stop timer like so:
function clicks5times() {
...
stopTimer();
}
Split your event handlers in two different functions (eg firstClick and secondClick). The first handler should just add a second event listener and remove it after 4 seconds. For this one-off task, use setTimeout instead of setInterval as you need the task to be done only once after 4 seconds and not every 4 seconds. So I would proceed as follows:
var secondClick = function() {
// DO WHATEVER YOU WANT TO HAPPEN AFTER THE SECOND CLICK
}
var firstClick = function() {
// DO WHATEVER YOU WANT TO HAPPEN AFTER THE FIRST CLICK
document.getElementById("buttontimer").addEventListener("click", secondClick);
setTimeout(function() {
document.getElementById("buttontimer").removeEventListener("click", secondClick);
}, 4000);
};
buttonElement.addEventListener("click", firstClick);
in Javascript
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<button id="buttontimer">fghfgh</button>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<button id="buttontimer">fghfgh</button>
<script>
document.getElementById('buttontimer').onclick = function(){
document.getElementById("buttontimer").disabled=true;
setInterval(function(){
if (document.getElementById("buttontimer").disabled == true) {
document.getElementById("buttontimer").disabled = false;
}
},10000);
};
</script>
</body>
</html>
and Jquery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
var button = $('<button>Click Me</button>');
button.clicked = false;
$('body').append(button);
var clicked = false;
button.click(function(){
button.clicked = true;
button.prop('disabled', true);
clicked = true
setInterval(function(){
if (clicked) {
button.prop('disabled', false);
}
},10000);
});
});
</script>
</head>
<body>
</body>
</html>
once u click button disable the property after the timer finish enable back the property
Problem description
I have prepared this index.html, which creates a simple Ext.form.field.HtmlEditor. I want to have a right-click-context-menu, which is capable of doing something with words that were marked by the user:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>
<link id="theme1" rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<script type ="text/javascript">
Ext.onReady( function(){
var html_editor = Ext.create('Ext.form.HtmlEditor', {
renderTo: Ext.getBody()
});
});
</script>
</head>
<body></body>
What i have done so far:
I have tried to implement listeners and a contextmenu, but it doesnt show the menu when right-clicking, so at the end of the day my index.html looked like:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>
<link id="theme1" rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<script type ="text/javascript">
Ext.onReady( function(){
var html_editor_right_click_menu_action_1 = Ext.create('Ext.Action', {
text: 'html_editor_right_click_menu_action_1',
handler: function(widget, event) {
console.log("html_editor_right_click_menu_action_1 clicked!");
}
});
var html_editor_right_click_menu = Ext.create('Ext.menu.Menu', {
items: [html_editor_right_click_menu_action_1]
});
var html_editor = Ext.create('Ext.form.HtmlEditor', {
renderTo: Ext.getBody(),
viewConfig: {
listeners: {
containercontextmenu: function(view, e, eOpts) {
console.log("containercontextmenu listener");
}
}
}
});
});
</script>
</head>
<body></body>
Unfortunately, neither a console.log() for the right-click nor a right-click-menu is showing up.
Can someone point me in the right direction?
EDIT: (progress made)
I made a context menu appear using this code in index.html (the index.html is runnable for itself, if someone wants to copy&paste it), but i can't get rid of the browsers-context-menu showing inside the html_editor:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>
<link id="theme1" rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<script type ="text/javascript">
Ext.onReady( function(){
var html_editor_right_click_menu_action_1 = Ext.create('Ext.Action', {
text: 'html_editor_right_click_menu_action_1',
handler: function(widget, event) {
console.log("html_editor_right_click_menu_action_1 clicked!");
}
});
var html_editor_right_click_menu = Ext.create('Ext.menu.Menu', {
items: [html_editor_right_click_menu_action_1]
});
var html_editor = Ext.create('Ext.form.HtmlEditor', {
renderTo: Ext.getBody()
});
html_editor.getEl().addListener('click',
html_editor_click_handler,
html_editor);
function html_editor_click_handler(btn, e, eOpts){
var clicked_button = btn.button;
var click_x_pos = btn.pageX;
var click_y_pos = btn.pageY;
console.log(clicked_button + " " + click_x_pos + " " + click_y_pos);
if(clicked_button == 2){
html_editor_right_click_menu.showAt(click_x_pos,click_y_pos);
}
}
});
</script>
</head>
<body></body>
How to stop the browser-context-menu from appearing above the extjs5-context-menu?
To prevent the default context menu from showing up, call event.preventDefault()
However, there is an extra wrinkle in this case. The HTMLEditor creates an iframe which is used to do the editing.
You have to then set a contextmenu listener on the body of the iframe, after it has loaded. See https://fiddle.sencha.com/#fiddle/ncn
You should not do what you were doing (handling the click and checking which button was clicked) because there are other ways to show the context menu. On the Mac, you can ctrl+click, on Windows you can use the context menu key on the keyboard.
var html_editor_right_click_menu_action_1 = Ext.create('Ext.Action', {
text: 'html_editor_right_click_menu_action_1',
handler: function(widget, event) {
console.log("html_editor_right_click_menu_action_1 clicked!");
}
});
var html_editor_right_click_menu = Ext.create('Ext.menu.Menu', {
items: [html_editor_right_click_menu_action_1]
});
var html_editor = Ext.create('Ext.form.HtmlEditor', {
renderTo: Ext.getBody()
});
// Find the iframe and wait until it's loaded
var iframe = html_editor.getEl().down('iframe', true);
iframe.addEventListener('load', function() {
// It's loaded, now set the context menu listener
var body = iframe.contentWindow.document.body;
body.addEventListener('contextmenu', html_editor_click_handler);
});
function html_editor_click_handler(e, iframe) {
// Prevents the default context menu
e.preventDefault();
var click_x_pos = e.pageX;
var click_y_pos = e.pageY;
console.log("Context click " + click_x_pos + " " + click_y_pos);
html_editor_right_click_menu.showAt(click_x_pos, click_y_pos);
}
I am able to create a div using javascript. However, not able to remove that div that I created previously. Only after post-back, I can remove that div. Actually after creating div, script cannot find that div because page did not loaded again.
What I want to do is to create a page that I am able to add an item and remove that item.
Add script works fine.
Remover script:
<script type="text/javascript">
$(function () {
$('.remove ,.shop-button-large, .shop-button-add').click(function () {
var itemToDelete = $(this).attr("data-id");
if (itemToDelete != '') {
$.post("/ShoppingBox/RemoveFromBox", { "id": itemToDelete },
function (data) {
$("#boxItem-" + itemToDelete + "-" + data.ItemCount).fadeOut(300);
});
}
});
});
</script>
The click handler for the remove was done before the DOM node was rendered. It needs to be insider the $(function() { ... }
http://plnkr.co/edit/IhtyH6ampodXICPBv6Fq?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(function() {
$("#create").click(function() {
var createDiv = document.createElement("div");
createDiv.id = "myDiv";
createDiv.style.margin = "0 auto";
createDiv.style.width = "600px";
createDiv.style.height = "600px";
createDiv.style.backgroundColor = "red";
document.getElementById("myBody").appendChild(createDiv);
});
$("#remove").click(function() {
console.log('remove', $("#myDiv"));
$("#myDiv").fadeOut(300);
});
});
</script>
</head>
<body id="myBody">
Create
Remove
</body>
</html>
In order to clarify, I have prepared a simple code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery-2.1.3.intellisense.js"></script>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/jquery-2.1.3.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$(function () {
$("#create").click(function () {
var createDiv = document.createElement("div");
createDiv.id ="myDiv";
createDiv.style.margin = "0 auto";
createDiv.style.width = "600px";
createDiv.style.height = "600px";
createDiv.style.backgroundColor = "red";
document.getElementById("myBody").appendChild(createDiv);
});
});
$("#remove").click(function () {
$("#myDiv").fadeOut(300);
});
</script>
<title></title>
</head>
<body id="myBody">
Create
Remove
</body>
</html>