I am creating a window pop up using Kendo, however, this window should only be shown when the user has clicked the button. The code that is shown to you makes the window automatically open when the web page is requested. i have done some research but found nothing, Any ideas?
More info: This is going to be used for a form and going to have a signature pad inside so when the pad (window) has been signed the cell in the table (The click here to sign) shall be replaced with the signature.
.cshtml,
<style>
#example {
min-height: 500px;
}
#undo {
text-align: center;
position: absolute;
white-space: nowrap;
padding: 1em;
cursor: pointer;
}
.armchair {
float: left;
margin: 30px 30px 120px 30px;
text-align: center;
}
.armchair img {
display: block;
margin-bottom: 10px;
}
.k-window-content a {
color: #BBB;
}
.k-window-content p {
margin-bottom: 1em;
}
##media screen and (max-width: 1023px) {
div.k-window {
display: none !important;
}
}
</style>
<table>
<tr>
<td>
<div id="example">
<div id="window">
<H1>This is the window</H1>
</div>
<span id="undo" style="display:none" class="k-button hide-on-narrow">Click here to sign</span>
<div class="responsive-message"></div>
</div>
</td>
</tr>
</table>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script>
$(document).ready(function () {
var myWindow = $("#window"),
undo = $("#undo");
undo.click(function () {
myWindow.data("kendoWindow").open();
undo.fadeOut();
});
function onClose() {
undo.fadeIn();
}
myWindow.kendoWindow({
width: "600px",
title: "About Alvar Aalto",
visible: false,
actions: [
"Pin",
"Minimize",
"Maximize",
"Close"
],
close: onClose
}).data("kendoWindow").center().open();
});
</script>
I now have this button:
Click here to open the window.
and this function:
$("#open").click(function (e) {
myWindow.data("kendoWindow").open();
});
However it does not open the window?
The window is opening right away because you are explicitly telling it to open right away:
myWindow.kendoWindow({
....
}).data("kendoWindow").center().open();
myWindow.kendoWindow({ == turn myWindow into a Kendo Window
.data("kendoWindow") == get a reference to that Kendo Window
.center().open() == center it on screen(still hidden) and OPEN it.
Remove the .center().open() from your intitialization code and have it only on the button click.
https://dojo.telerik.com/#Stephen/uXeJe
Related
I am trying to create a code that works when you put it on the google search bar, that is a must and i created a div you can edit, also i created a reset button that replaces the content on the div with the default text, but when I try to press ctrl + z it does not go back, and i don't know how to make it work
-I cannot get rid of the: data:text/html, part because it wouldn't work in the search bar for google
-i do have to have all the code types in just one document, because i have to copy paste it all on the google search bar
function reset() {
div_1.innerHTML = '<p> Default text<p>';
}
.div_1 {
display: block;
background-color: rgba(255, 0, 0, 0.5);
height: 80%;
position: relative;
width: 60%;
position-left: 100px;
}
<div contenteditable="true" class="div_1" id="div_1">
<p> Default text<p>
</div>
<button onclick="reset()">reset</button>
function reset() {
div_1.innerHTML = ''; //set the inner HTML to empty string
}
.div_1 {
display: block;
background-color: rgba(255, 0, 0, 0.5);
height: 80%;
position: relative;
width: 60%;
position-left: 100px;
}
<div contenteditable="true" class="div_1" id="div_1">
<p> Default text<p>
</div>
<button onclick="reset()">reset</button>
I think you are trying to make the form empty when you press reset button.
So you have to change the inner HTML to an empty string in order to do that.
I hope it helped
i was able to find an option with the memento pattern and creating an event for the ctrl + z input on the keyboard
function copy(){
inp1.select();
navigator.clipboard.writeText(inp1.value);
ctn.innerHTML = inp1.value;
}
var mementos = [];
function reset() {
mementos.push(document.getElementById('div_1').innerHTML);
div_1.innerHTML= '<p>caller name: </p><p>reason for the call:</p><p>CTN: <div class="ctn" id="ctn"></p><p><br></p><p></p>';
}
document.addEventListener('keydown', function(event) {
if (event.ctrlKey && event.key === 'z') {
var lastMemento = mementos.pop();
div_1.innerHTML = lastMemento;
}
});
function undo() {
var lastMemento = mementos.pop();
div_1.innerHTML = lastMemento;
}
input{
width:200px;
height: 100%;
}
.div_1{
display: block;
background-color:rgba(255, 0, 0, 0.5);
height:400px;
position: relative;
width: 400px;
padding-left: 2px;
}
button{
position: relative;
}
.ctn {
display: inline;
background-color: red;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Notes</title>
</head>
<body>
<link rel="stylesheet" href="syles.css">
<input placeholder="(000)-000-0000" maxlength="10" id="inp1">
<button onclick="reset()">reset</button>
<button onclick="copy()">copy</button>
<button onclick="undo()">Undo</button>
<div contenteditable="true"class="div_1" id="div_1">
<p>caller name: </p><p>reason for the call:</p><p>CTN: <div class="ctn" id="ctn"></p><p><br></p><p></p>
</div>
</body>
</html>
My goal is to have text change onmouseover from "hello" (without a link) to "Google" and provide an 'href' on the resulting "Google" text, and then revert to "hello" onmouseout without a link.
The code below works in changing the text from "hello" to "Google" but,
the link on "Google" does not work (even though I can right-click on "Google" and open the link on another tab)
the text does not change back to "hello" onmouseout.
Thanks for your help in advance!
Here is my code:
<style>
.container {
margin-top: 6vw;
margin-left: 40%;
margin-right: 40%;
}
</style>
<div class="container">
<h1>
<div class="hello" id="hello1" onmouseover="changeText()" onmouseout="changeText(this,'Hello.')">Hello.</div>
</h1>
</div>
<script>
function changeText() {
if (document.getElementById("hello1")) {
a = document.getElementById("hello1")
a.innerHTML = 'Google'
}
}
</script>
try this way onmouseout="this.innerHTML='Hello.';"
function changeText() {
if (document.getElementById("hello1")) {
a = document.getElementById("hello1")
a.innerHTML = 'Google'
}
}
.container {
margin-top: 6vw;
margin-left: 40%;
margin-right: 40%;
}
<div class="container">
<h1>
<div class="hello" id="hello1" onmouseover="changeText()" onmouseout="this.innerHTML='Hello.';">Hello.</div>
</h1>
</div>
By changing a class of a parent tag, any and all child tags can be affected via CSS. Having the HTML ready when the page loads and then hiding it is better than constantly creating and destroying HTML for trivial effects.
The events "mouseenter" and "mouselrave" are handled by a property event handler and an event listener. Either one is sufficient, but avoid using attribute event handlers:
<div onmouselame="lameAttributeEventHandler()">...</div>
Details are commented in the example below
// Reference the <header>
const hdr = document.querySelector('.title');
/* This is a property event handler
// Whenever the mouse enters within the borders of
// the <header>:
// '.google' class is added
// '.hello' class is removed
*/
hdr.onmouseenter = function(event) {
this.classList.add('google');
this.classList.remove('hello');
};
/* This is an even listener
// Whenever the mouse exits the <header> the
// opposite behavior of the previous handler
// happens
*/
hdr.addEventListener("mouseleave", function(event) {
this.classList.add('hello');
this.classList.remove('google');
});
.title {
height: 50px;
margin-top: 3vh;
border: 3px solid black;
text-align: center;
}
h1 {
margin: auto 0;
}
.hello span {
display: inline-block;
}
.hello a {
display: none;
}
.google a {
display: inline-block;
}
.google span {
display: none;
}
<header class="title hello">
<h1>
<span>Hello</span>
Google
</h1>
</header>
You can try this, May it help u to solve the problem
<!DOCTYPE html>
<head>
<title>change text on mouse over and change back on mouse out
</title>
<style>
#box {
float: left;
width: 150px;
height: 150px;
margin-left: 20px;
margin-top: 20px;
padding: 15px;
border: 5px solid black;
}
</style>
</head>
<html>
<body>
<div id="box" onmouseover="changeText('Yes, this is Onmouseover Text')" onmouseout="changeback('any thing')" >
<div id="text-display" >
any thing
</div>
</div>
<script type="text/javascript">
function changeText(text)
{
var display = document.getElementById('text-display');
display.innerHTML = "";
display.innerHTML = text;
}
function changeback(text)
{
var display = document.getElementById('text-display');
display.innerHTML = "";
display.innerHTML = text;
}
</script>
</body>
</html>
I am trying to add a floating top button in Dreamweaver. As it will be used on many pages, I want the script to be in a separate .js file. I am admittedly a complete amateur and this is my first time using javascript.
HTML code includes:
<link href="common.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="common.js"></script>
<button onclick="topFunction()" id="TopBtn" title="Go to top">Top</button>
My common.css file includes:
#TopBtn {
display: none;
position: fixed;
bottom: 1.25em;
right: 1.5em;
z-index: 99;font-size: 1em;
border: none;
outline: none;
background-color: #555;
color: white;
cursor: pointer;
padding: 1em;
border-radius: .5em;
opacity: 0.5;
}
#TopBtn:hover {
background-color: #555;
opacity: 1;
}
and my common.js file includes:
//Get the button
var mybutton = document.getElementById("TopBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
But it just doesn't work!! It works just fine with the script all in the HTML file, but not when linked to as separate .js. Any help welcome.
Here is a working snippet of your code, comments have been added where necessary. Run it to see the code in action.
//Get the button
var mybutton = document.getElementById("TopBtn");
//Declare body and html as vars
//Some browsers apply scroll to body, and others apply scroll to html so we are getting both
var body = document.body
var html = document.documentElement;
// When the user scrolls down 20px from the top, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if ( body.scrollTop || html.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top
function topFunction() {
body.scrollTop = 0;
html.scrollTop = 0;
}
#TopBtn {
display: none;
position: fixed;
bottom: 1.25em;
right: 1.5em;
z-index: 99;font-size: 1em;
border: none;
outline: none;
background-color: #555;
color: white;
cursor: pointer;
padding: 1em;
border-radius: .5em;
opacity: 0.5;
}
#TopBtn:hover {
background-color: #555;
opacity: 1;
}
body {
height: 2000px;
width: auto;
background-color: blue;
color: white;
overflow: scroll;
}
<div onscroll="scrollFunction();">
Scroll the page
</div>
<button onclick="topFunction()" id="TopBtn" title="Go to top">Top</button>
Additionally, in your coding environment, you can import scripts into your HTML file in a format similar to the below:
<!DOCTYPE html>
<HTML>
<head>
<!-- import additional CSS along with other meta data, etc.. in the head -->
<link href="common.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Everything else that makes the body of your document can go within the body tags -->
<button onclick="topFunction()" id="TopBtn" title="Go to top">Top</button>
<script type="text/javascript" src="common.js"></script>
</body>
</html>
You're trying to get your button by ID before the button exists in the page. As you're loading your script before your button.
Couple of options:
Move your script to the bottom of the page just before closing <html> tag
Add defer to your script tag inside your HTML
Put your getElementByID call inside a DOMContentLoaded event.
An example of option 3:
var mybutton; // declare variable outside the callback to keep in the global scope.
document.addEventListener('DOMContentLoaded', function(){
mybutton = document.getElementById("TopBtn");
});
I am working on a game using ImpactJS engine and I have created a basic form for my game which contains input box and a submit button. I am able to retrieve values from the input box but what I want is that when the player clicks on submit whatever value is there in the input box gets fetched and I should be able to get that value on Submit click. If the value is null I should get an alert saying "no value or whatever". I want to use this final value and assign it to a variable that I can use in my JavaScript files inside the Impact engine to keep a track of the input from within the game. I am new to HTML, CSS in general so I have no clue how to achieve this.
Below is my HTML/CSS code that has an input box and a submit button.
<!DOCTYPE html>
<html>
<head>
<title>Impact Game</title>
<style type="text/css">
html,body {
background-color: #333;
color: #fff;
font-family: helvetica, arial, sans-serif;
margin: 0;
padding: 0;
font-size: 12pt;
}
#problemform {
display: none;
width: 300px;
height: 100px;
}
#probleminput {
position: absolute;
display: none;
top: 450px;
left: 240px;
height: 50px;
width: 350px;
}
#problemsubmit {
position: absolute;
display: none;
top: 530px;
left: 623px;
height: 40px;
width: 100px;
padding: 5px 10px 8px 2px;
}
#prob_submit_msg {
width: 30%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#canvaswrapper {
position: relative;
height: 768px;
width: 1024px;
display: block;
margin: auto;
margin-top: 80px;
vertical-align: middle;
}
#canvas {
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="lib/impact/impact.js"></script>
<script type="text/javascript" src="lib/game/main.js"></script>
</head>
<body>
<div id="canvaswrapper">
<canvas id="canvas" width="1024" height="768"></canvas>
<div id="problemform" class="form-inline">
<input id="probleminput" class="form-inline" type="text" style="display: inline;"></input>
<button id="problemsubmit" class="btn" style="display: inline-block;">Submit</button>
</div>
<div id ="prob_submit_mssg" style="display: block;"></div>
</div>
</body>
</html>
Below is my block of code in ImpactJS in a different JS file to display the input box and submit button using Jquery
ProblemDisplay:function() {
this.setQuestion('This is a title','this is where the body will go and it will be super long and impossible to read or understand.', 'This is a hint');
this.isActive = true;
var form = $("#problemform");
var inputBox = $("#probleminput");
var submitButton = $("#problemsubmit");
form.show();
inputBox.show();
submitButton.show();
},
This is what I have working for now. But now I want the string passed in the input box to be stored in a different variable when clicking the submit button. How to achieve this?
Thanks!
Create an event listener for a click on the submit button.
In jQuery:
$('#submit-button').on('click', function() {
});
In vanilla js
document.getElementById('submit-button').addEventListener('click', function() {
});
Then get the value from the input box:
In jQuery:
$('#submit-button').on('click', function() {
var value = $('input').val();
// Do what you want with the value
});
In vanilla js
document.getElementById('submit-button').addEventListener('click', function() {
var value = document.getElementById('input').value;
// Do what you want with the value
});
Try With this.. :
html:
<input id="probleminput" class="form-inline" type="text" style="display: inline;"> </input>
<button id="problemsubmit" class="btn" style="display: inline-block;">Submit</button>
<a id='testop' ></a>
Js:
var form = $("#problemform");
var inputBox = $("#probleminput");
var submitButton = $("#problemsubmit");
submitButton.click(function(){
var getval = ($("#probleminput").val()?$("#probleminput").val():alert('please fill the text field'))
$('#testop').text(getval);
});
Complete DEMO
If all you need is the value of the input field when someone clicks on the button, then this solution may work for you:
Fiddle Demo
JS:
$('#problemsubmit').on('click', function (event) {
event.preventDefault();
var formInput = $('#probleminput').val();
});
I have <div> called container which are wrapping couple of <div>s called block and I used a jquery plugin called columnizer to split the block into column.The problem is , I can't seem to make the <div> called container wrap the blocks which are going over the div .I also got picture to demonstrate my problem.
I tried alot of solutions like , removing the container width but it doesn't work because the jquery plugyin called columnizier need a width i think.
My html
<script type = "text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type = "text/javascript" src ="https://raw.github.com/adamwulf/Columnizer-jQuery-Plugin/master/src/jquery.columnizer.js"></script>
<script type="text/javascript">
$(function(){
$('h1').addClass('dontend');
$('.wide').columnize({
width : 100,
height : 300
});
});
</script>
<script style="display:none" type="text/javascript">var Mint=new Object();Mint.save=function()
{var now=new Date();var debug=false;if(window.location.hash=='#Mint:Debug'){debug=true;};var path='http://welcome.totheinter.net/mint/?record&key=6a56784248357a3735323031363633316663796c526d';path=path.replace(/^https?:/,window.location.protocol);for(var developer in this)
{for(var plugin in this[developer])
{if(this[developer][plugin]&&this[developer][plugin].onsave)
{path+=this[developer][plugin].onsave();};};};path+='&'+now.getTime();if(debug){window.open(path+'&debug&errors','MintLiveDebug'+now.getTime());return;};var ie=/*#cc_on!#*/0;if(!ie&&document.getElementsByTagName&&(document.createElementNS||document.createElement))
{var tag=(document.createElementNS)?document.createElementNS('http://www.w3.org/1999/xhtml','script'):document.createElement('script');tag.type='text/javascript';tag.src=path+'&serve_js';document.getElementsByTagName('head')[0].appendChild(tag);}
else if(document.write)
{document.write('<'+'script type="text/javascript" src="'+path+'&serve_js"><'+'/script>');};};if(!Mint.SI){Mint.SI=new Object();}
Mint.SI.Referrer={onsave:function()
{var encoded=0;if(typeof Mint_SI_DocumentTitle=='undefined'){Mint_SI_DocumentTitle=document.title;}
else{encoded=1;};var referer=(window.decodeURI)?window.decodeURI(document.referrer):document.referrer;var resource=(window.decodeURI)?window.decodeURI(document.URL):document.URL;return '&referer='+escape(referer)+'&resource='+escape(resource)+'&resource_title='+escape(Mint_SI_DocumentTitle)+'&resource_title_encoded='+encoded;}};Mint.save();</script>
<!DOCTYPE html>
<meta charset="utf-8" />
<link rel="stylesheet" href="b.css">
<div class="container"> <div class="wide">
<div class="block"></div><br>
<div class="block"></div><br>
<div class="block"></div><br>
</div></div>
My css
.container {
background-color: #ED8713;
height: 300px;
width: 200px;
}
.block {
width: 50px;
height:250px;
background-color: #C31212;
margin: 10px;
margin-top: 5px;
}
Here it is working: http://jsfiddle.net/gRxdF/3/
CSS:
.container {
background-color: #ED8713;
height: 300px;
float: left;
}
.block {
display: inline-block;
height: 250px;
background-color: #C31212;
margin: 10px;
margin-top: 5px;
}
HTML - I removed the <br>tags.