Develop Reference

Interactive Popup/White Space

I am fairly new to the world of coding and am currently designing something using WAMP to assist the misses with her maths. In short I have a page with some basic maths questions on and I have JavaScript running on it to check whether the answers are correct or not.
What I would like to know is, can I use JavaScript or something similar to add in a link that if clicked will open a popup or something similar that the user can write a few bits down to help working out the sums?
I have seen a <button onclick="window.open('whitespace.html');">Thinking Space</button> but this doesnt allow the user to write anything down, obviously as its just a link to another page.

A very basic sample, just pointing you in a possible direction:
<button onclick="window.getElementById('myDiv').style.display = 'block'">Thinking Space</button>
<div id="myDiv" style="display: none">
<textarea name="content" cols="40" rows="5">Test message</textarea>
<button onclick="window.getElementById('myDiv').style.display = 'none'">Close</button>
</div>

i think you can use window.promt
https://developer.mozilla.org/de/docs/Web/API/Window/prompt

Maybe not the best answer but works for me. I created a link to a blank page that the user can then open. They can work the questions out, minimise it, forget about it and if they were to try to open a fresh one, close it or try to refresh it, they will get a message asking if they are sure they want to continue. Works exactly as Id hoped.
<textarea placeholder="Please be aware no data will be saved here.
If closed or refreshed all data will be lost"</textarea>
<script>
window.addEventListener("beforeunload", function(event) {
event.returnValue = "Reloading will cause any notes to be lost.";
});
</script>

Use Dajax to stream log messages

I am trying to create a logger window for my website that streams python logger messages to a javascript popup window. I've gotten to the point where if I close the window and reopen it new messages will be displayed, but I want to write some javascript that automatically refreshes the window (and calls dajaxice) every N seconds.
My ajax.py:
#dajaxice_register(method='GET')
def getLogs(request):
fname = "/path/to/LOG_2015-07-08.log"
with open(fname,"r") as f:
lines = f.readlines()
lines = lines[-15:] //
logger.info("Displaying Logs")
return json.dumps({'message':lines})
My html:
<script language="javascript" type="text/javascript">
function popitup(data) {
sessionStorage.setItem("logs",data.message);
newWindow = window.open('/InterfaceApp/LogViewer', 'Log Viewer', 'height=400,width=800,status=yes');
if(newWindow && !newWindow.closed){
newWindow.location.reload(true); //this is my first attempt at a refresh, wasn't quite what I wanted.
newWindow.focus();
}
}
</script>
<div class="container">
<input id="LogMessages" type="button" value="View Log Messages" onclick="Dajaxice.InterfaceApp.getLogs(popitup)"/>
</div>
To reiterate, I want to click the button and have a popup window come up. I want that popup window to refresh every N seconds with the last 15 lines of my log file (the lines are added to the log every time the user navigates around the website). The dajaxice function in ajax.py is what grabs the log files so that somehow call somehow needs to be included in the refresh.
Can anyone help me out with this? I've been struggling with it for days.
Thanks!!

I was able to figure it out on my own. Code below worked for me.
ajax.py:
#dajaxice_register(method='GET')
def getLogs(request):
fname = "/path/to/LOG_2015-07-09.log"
with open(fname,"r") as f:
lines = f.readlines()
lines = lines[-15:]
return json.dumps({'message':lines})
html:
<div class="container-fluid">
<h4 class="text-center">Log Messages</h4>
<div class="content">
<span class='value'></span>
</div>
<script language="javascript" type="text/javascript">
function saveLogs(data){
sessionStorage.setItem("logs",data.message);
}
$(document).ready(
function() {
setInterval(function() {
Dajaxice.InterfaceApp.getLogs(saveLogs);
var logs = sessionStorage.getItem("logs");
document.querySelector('.content .value').innerText = logs;
}, 3000);
});
</script>
</div>
I used dajaxice instead of straight ajax, which took quite a bit of fiddling with before all of the settings were configured correctly, but it seemed easier than trying to learn how to integrate ajax and php into my django project.

Use <div> as a button and trigger a mailto when it is clicked

I'm creating a custom button on my webpage which actually is a <div>, I want to trigger a mailto when the button is clicked. What is the best way out?
I've tried calling a javascript function using-onClick that looks like this -
function foo(){
window.open("mailto:xyz#abc.com");
}
But that opens a new tab in Chrome first, and then asks for the relevant app to send out the email. This experience is different from what we generally get when we simply do a <a href=mailto:.....> in HTML.
I can also create a new document element in the JS function, and simulate a click like this -
function sendEmail() {
var mail = 'mailto:contact#test.com';
var a = document.createElement('a');
a.href = mail;
a.click();
};
But i'm not too sure if that's the right way! Anyone has a better solution?

Try this, and tell me if works. (If not, I will delete answer.)
<script>
function sendEmail()
{
window.location = "mailto:xyz#yourapplicationdomain.com";
}
</script>
<div onclick="sendEmail();">Send e-mail</div>
It is possible to pass the parameters subject and body, but I think that it is not possible to format the text:
<a href='mailto:xyz#yourapplicationdomain.com?subject=Me&body=Hello!'>EMAIL</a>

Extremely late to the party I know, but what about combining these answers into something simpler and more practical:
<div class="button" onclick="location.href='mailto:xyz#abc.com';">Send E-Mail</div>

Use an anchor tag but change the display property to block:
HTML
<a class="mailto" href="mailto:contact#test.com">Mail</a>
CSS
.mailto{
display:block;
width:100px;
height:20px;
}

This worked for me:
<script>
function sendEmail()
{
window.location.assign("mailto:xyz#abc.com");
}
</script>
<div onclick="sendEmail();">Send e-mail</div>
#Tony has used the same approach just assign has been added.

Try this function and html. It will open a new email client with.
<div onclick="doMail();">
function doMail() {
var email ="xyz#abc.com";
location.href = "mailto:"+email;
}

In order to obfuscate your email from SPAM bots that scan website for emails, you can do the following,
<div class="button" onclick="location.href='mail'+'to:xyz'+'#'+abc'+'.'+'com';">Send E-Mail</div>
and instead of the 'Send E-Mail' text you can place an image of your actual email address (screenshot) to make it more obvious.

<div onclick="mailtoperformingFunction('inner');" id="divbutton">
<script type="text/javascript">
function mailtoperformingFunction()
{
}
</script>

Try this :
<div class="button" href="javascript: void(0)" onclick="location.href='mailto:abc#xyz.com';">Click to Send email</div>

Javascript randomly stopped working

I can't get my Javascript to execute.It randomly stopped working yesterday and I've been messing around to try to get it to work. I tried making a simple code to see if it would work but, I have no luck. Here is the code:
HTML:
<script type="text/javascript" src="js\hello.js"></script>
<form id="hello" onsubmit="return hello();">
<input type="submit" />
</form>
Javascript (in sub folder called js):
function hello()
{
alert("HELLO");
return false;
}
It's really annoying me because all of my Javascript codes aren't working but they were working perfectly fine yesterday. I am not sure what happened...
I meant to make an alert I was just wasn't thinking. It still doesn't work anyways. It's like it isn't even calling the function.

use alert("HELLO"); instead of echo. echo is PHP not javascript.
If you want to output to a speicific tag then use document.getElementById("idOfTag").innerHTML = "HELLO";

How to make a button redirect to another page using jQuery or just Javascript

I am making a prototype and I want the search button to link to a sample search results page.
How do I make a button redirect to another page when it is clicked using jQuery or plain JS.

is this what you mean?
$('button selector').click(function(){
window.location.href='the_link_to_go_to.html';
})

$('#someButton').click(function() {
window.location.href = '/some/new/page';
return false;
});

Without script:
<form action="where-you-want-to-go"><input type="submit"></form>
Better yet, since you are just going somewhere, present the user with the standard interface for "just going somewhere":
ta da
Although, the context sounds like "Simulate a normal search where the user submits a form", in which case the first option is the way to go.

In your html, you can add data attribute to your button:
<button type="submit" class="mybtn" data-target="/search.html">Search</button>
Then you can use jQuery to change the url:
$('.mybtn').on('click', function(event) {
event.preventDefault();
var url = $(this).data('target');
location.replace(url);
});
Hope this helps

With simple Javascript:
<input type="button" onclick="window.location = 'path-here';">

You can use:
location.href = "newpage.html"
in the button's onclick event.

No need for javascript, just wrap it in a link
<button type="button">button</button>

This should work ..
$('#buttonID').click(function(){ window.location = 'new url'});

You can use window.location
window.location="/newpage.php";
Or you can just make the form that the search button is in have a action of the page you want.

this is the FASTEST (most readable, least complicated) way to do it, Owens works but it's not legal HTML, technically this answer is not jQuery (but since jQuery is a pre-prepared pseudocode - reinterpreted on the client platform as native JavaScript - there really is no such thing as jQuery anyway)
<button onclick="window.location.href='http://www.google.com';">Google</button>

You can use this simple JavaScript code to make search button to link to a sample search results page. Here I have redirected to '/search' of my home page, If you want to search from Google search engine, You can use "https://www.google.com/search" in form action.
<form action="/search"> Enter your search text:
<input type="text" id="searchtext" name="q">
<input onclick="myFunction()" type="submit" value="Search It" />
</form>
<script> function myFunction()
{
var search = document.getElementById("searchtext").value;
window.location = '/search?q='+search;
}
</script>

From YT 2012 code.
<button href="/signin" onclick=";window.location.href=this.getAttribute('href');return false;">Sign In</button>

Use a link and style it like a button:
Click this button

And in Rails 3 with CoffeeScript using unobtrusive JavaScript (UJS):
Add to assets/javascripts/my_controller.js.coffee:
$ ->
$('#field_name').click ->
window.location.href = 'new_url'
which reads: when the document.ready event has fired, add an onclick event to a DOM object whose ID is field_name which executes the javascript window.location.href='new_url';

There are a lot of questions here about client side redirect, and I can't spout off on most of them…this one is an exception.
Redirection is not supposed to come from the client…it is supposed to come from the server. If you have no control over the server, you can certainly use Javascript to choose another URL to go to, but…that is not redirection. Redirection is done with 300 status codes at the server, or by plying the META tag in HTML.