check which anchor button opened the pop up page - javascript

I have
<a class="zipbutton" onclick="window.open('www.site.com/zipfinder/','popupwindow'...>.
There are 2 input fields in my home page. From Zip code and To Zip code. Beside them are the anchor buttons that opens a page which the user can find zip code based on city and state then post the zip code to the corresponding text field. What I did was, I created 2 separate pages for each anchor button. Is there any way to combine them into one pop up window?
Here is the sample code for one of the pop up page:
<script language="Javascript" type="text/javascript">
function post_value(){
window.opener.document.getElementById("FromZip").value = document.getElementById("cityBox").value;
self.close();
}
</script>
and
function post_value(){
window.opener.document.getElementById("ToZip").value = document.getElementById("cityBox").value;
self.close();
}

You can always use the -
1) event.srcElement in Internet Explorer
2) event.target in most other browsers.
This will give the src element from where the click event originated in your case the anchor element.Put a filter on the element id and use only one popup.
Click here for more information.
Sample Code:-
<script language="Javascript" type="text/javascript">
function post_value(event){
if(event.target!=null)
{
var target=event.target.id;//This is the id of the element which triggered the event.
}
window.opener.document.getElementById("FromZip").value = document.getElementById("cityBox").value;
self.close();
}

Here is some example to do this. I'm using JQuery to do this.
Html form
<form>
<input type="text" id="FromZip" name="FromZip">
Zip code
<br>
<input type="text" id="ToZip" name="FromZip">
Zip code
</form>
<div id="zipcodes">
Close
<br>
<!--LOAD YOUR ZIP CODES HERE-->
<!--For Example-->
0001<br>
0002<br>
0003<br>
0004<br>
0005<br>
0006<br>
0007
</div>
Style for zipcodes container
<style type="text/css">
#zipcodes
{
display: none;
color:#000;
background-color: #eee;
text-align: left;
min-height: 100px;
box-shadow: 0px 0px 7px #000;
position: absolute;
width:200px;
height: 200px;
top:40%;
left:40%;
padding: 16px;
z-index:1000;
}
</style>
Here is the Jquery script.
Make sure add the jquery library within the head tag
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var zipbox;
//Open zipcode container
$(".button_open_Fromzipcode").click(function(e){
e.preventDefault();
$("#zipcodes").css("display","block");
zipbox="FromZip";//flag the return textbox
});
//Open zipcode container
$(".button_open_Tozipcode").click(function(e){
e.preventDefault();
$("#zipcodes").css("display","block");
zipbox="ToZip";//flag the return textbox
});
//Close zipcode container
$(".button_close_zipcode").click(function(){
$("#zipcodes").css("display","none");
});
$(".zipcode").click(function(){
$("#"+zipbox).val($(this).text());//Set selected zipcode to Textbox
$("#zipcodes").css("display","none");//Close zipcode container
});
});
</script>

Related

How to consume button click inside <a> tag to prevent link being followed?

I've added a button inside a link tag, with a little cross image, that I will eventually use to actually remove that element without it following the link also:
function detectClick(message) {
window.alert("Detected: " + message);
}
<div><a style="border: solid 1px black; vertical-align: middle; display:inline-block;" href="http://www.google.com"><button style="position: relative; float: right;" onclick="detectClick('Google')"><img src="cross.png"></button>Google</a></div>
How do I consume that click, once it has executed detectClick(...), in order to prevent navigation away from the current page?
NOTE: Ideally, without using jQuery.
First change your function to:
function detectClick(message){
window.alert("Detected: " + message);
return false; // add this line
}
then change the onclick handler to:
onclick="return detectClick('Google')" // note the "return"
Please do note that AFAIK the HTML standard does not allow to have a button inside an anchor.
<script type="text/javascript">
function detectClick(message){
window.alert("Detected: " + message);
return false;
}
</script>
You need return false; at the end of detectClick and you need to return detectClick on your onclick event.
Explanation: The return value of the event handler tells the browser whether the default browser action should occur. Since clicking on your button by default triggers the click event of its parent, the link, return false; will prevent that default from happening, which is your exact intention.
Remove your href tag from link tag. Add a id to that link tag. And assign the href value in the detectClict(). like-->
<html>
<head>
<title>Consume Click Test</title>
</head>
<body>
<div><a id = "link" style="border: solid 1px black; vertical-align:middle; display:inline-block;" > <button style="position: relative; float: right;" onclick="detectClick('Google')"><img src="cross.png"></button>Google</a> </div>
</body>
</html>
<script type="text/javascript">
function detectClick(message){
window.alert("Detected: " + message);
document.getElementById("link").href = "http://www.google.com";
}
</script>
<html>
<head>
<title>Consume Click Test</title>
</head>
<body>
<div><a style="border: solid 1px black; vertical-align: middle; display:inline-block;" href="javascript:void 0;"><button style="position: relative; float: right;" onclick="detectClick('Google')"><img src="cross.png"></button>Google</a></div>
</body>
</html>
<script type="text/javascript">
function detectClick(message){
window.alert("Detected: " + message);
}
</script>

Opening a javascript dialog box to store to the complete file location into a var

I need your help.
I would like to design a javascript function, such that when I call it, it will open up a dialog box asking me to navigate to the selected file, once I click on the "open" button, it will then save the file's path into a var.
How do you do this? I would NOT like to the input type="file" method, as I dont require that particular input to be on my page.
ie:
function getlocation() {
var x = popup the open file dialog box and let the user select a file
}
The only way to allow the user to select a file is to use an <input type="file" />1. You don't have to have this element visible, just on the page.
When a user selects a file, all you can get from it is its name. You cannot get its path. Also, note that file upload elements are asynchronous. You need to use the onchange event (callback) to get the name.
You can hide the upload element using display: none, and then just have another JavaScript function programmatically trigger it. (NOTE: This method doesn't work in Opera, and possibly other browsers. It was tested in Chrome, Firefox, and IE 8/9)
<style>
#getFile{
display: none;
}
</style>
<input type="file" id="getFile" />
<button id="openFile" type="button">Click Me</button>
<script>
var uploadElement = document.getElementById('getFile'),
uploadTrigger = document.getElementById('openFile'),
openFileUpload = function(){
uploadElement.click();
},
alertValue = function () {
alert(uploadElement.value);
};
if (window.addEventListener) {
uploadTrigger.addEventListener('click', openFileUpload);
uploadElement.addEventListener('change', alertValue);
} else {
uploadTrigger.attachEvent('onclick', openFileUpload);
uploadElement.attachEvent('onchange', alertValue);
}
</script>
DEMO: http://jsfiddle.net/rJA7n/3/show (Edit it at: http://jsfiddle.net/rJA7n/3/)
Another method that should work in most browsers (including Opera) is to make the file upload element "invisible" and put an element on top of it. So, when you click on what you think is a button, you're really clicking on the upload element. AJAX uploaders (like http://fineuploader.com/) use this method to allow you to "style" upload buttons.
<style>
#getFile{
width: 100px;
opacity: 0;
filter: alpha(opacity = 0);
}
#openFile{
display: inline;
margin-left: -100px;
background-color: red;
height: 30px;
width: 100px;
padding: 10px;
color: white;
text-align: center;
}
</style>
<input type="file" id="getFile" />
<div id="openFile">Click Me</div>
<script>
var uploadElement = document.getElementById('getFile'),
alertValue = function(){
alert(uploadElement.value);
};
if(window.addEventListener){
uploadElement.addEventListener('change', alertValue);
}
else{
uploadElement.attachEvent('onchange', alertValue);
}
</script>
DEMO: http://jsfiddle.net/cKGft/4/show/ (Edit it at: http://jsfiddle.net/cKGft/4/)
1 Well, you can use drag and drop if you want to be really fancy. I made a quick demo of that here: http://jsfiddle.net/S6BY8/2/show (edit it at: http://jsfiddle.net/S6BY8/2/)

Spoiler Display Code

I have a question about your spoiler in this page:
http://jdownloader.org/download/index
When i click on Windows it appears a table but when i click on Linux the content of Windows disappears. I want create a spoiler like this but that the content of one spoiler doesn't disappear when i press another spoiler.
What exactly should I change in this code (html source)?
<div class="dokuwiki">
<div class="right_page">
<div class="entry-content">
<script type="text/javascript" src="./JDownloader.org - Official Homepage_files/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".nonjs").removeAttr( "href"); //href is needed for users without JS
$('.OS').click(function(){
if($(this).find(".details").is(":visible"))
{
$(this).find(".details").not(":hidden").hide("slow");
return true;
}
else
{
$(".OS").not(this).each(function(i) {
$(this).find(".details").hide("slow");
});
$(this).find(".details").show("slow");
return false;
}
});
});
</script>
<style type="text/css">
<!--
.details {
display: none;
clear: both;
padding: 2px;
}
.nonjs{
cursor:pointer;
}
img {
border: 0px;
}
-->
</style>
$(".OS").not(this).each(function(i) {
$(this).find(".details").hide("slow");
});
That part finds all the ones that are NOT the current (clicked) one and hides them.

Writing a JavaScript function to open an image in (css)pop up with a close button?

I am a new HTML developer, so can someone please describe briefly how to write a JavaScript function to open an image in (css) pop up with a close button?
Just to get you started I've set up an simple example for you, try it out here: http://www.lunarailways.com/demos/popup.html
<html>
<head>
<style>
#popup {
border: 1px solid gray;
border-radius: 5px 5px 5px 5px;
float: left;
left: 50%;
margin: auto;
position: fixed;
top: 200px;
z-index: 9999;
}
</style>
</head>
<body>
<h1>Your page</h1>
Open Image 1
Open Image 2
Open Image 3
<div id="popup" style="display:none">
<a id="popup-close" href="" class="button">Close</a>
<p>
<img id="image-placeholder" src="">
</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(".popup-open").click( function(e) {
$("#popup:visible").hide(); //hide popup if it is open
e.preventDefault(); // don't follow link
$("#image-placeholder").attr("src", $(this).attr("href")); // replace image src with href from the link that was clicked
$("#popup").fadeIn("fast"); //show popup
});
$("#popup-close").click( function(e) {
e.preventDefault();
$("#popup").fadeOut("fast");
});
});
</script>
</body>
</html>
FanyBox, which is uses the jQuery library is the right tool for that.
In a simple way,
- place anchor and image tags in a div container.
- set display attribute of the div to "none".
- create displayMyPopup and closeMyPopup functions in js.
- set anchor's onclick attribute to closeMyPopup.
- in displayMyPopup function, set the div's display attribute to "block"
- in closeMyPopup function, set the div's display attribute to "none"
or you can use jquery's show/hide functions.
I guess jQuery library is a good start. Start with defining your HTML markup and then google image galleries and see what fits your bill.
Something like this:
<ul class="gallery">
<li><img src="path-small-image" alt="thumbnail" /></li>
</ul>

Override TAB inside a Browser

If I'm typing text in a input field and press ENTER the default behavior of all the browsers I know is to submit the form, however if I press ENTER inside a textarea a new line is added.
Is there any way to mimic this behavior (indent, not submit the form) whenever I press TAB inside a textarea? Bespin seems to do it, but in a canvas element.
I haven't done it myself, but it seems to be possible to override the event handler and catch the key. See e.g. here.
Oh and for the JQuery crowd there even is a plugin.
Of course there's a way. Do you use any js library? If not, the idea is just to add a keydown event handler on the textarea element, check in the handler if the keyCode of the event equals 9, and if so append a "\t" to the content of the textarea. Prototype snippet:
textarea.observe('keydown', function (e) {
if(e.keyCode==9) {
e.element().insert("\t");
e.stop();
}
}
This code should work.
//'index.js' File
var textarea = document.getElementById('note');
textarea.addEventListener('keydown', function (e) {
if(e.keyCode==9) {
e.element().insert("\t");
e.stop();
}
});
If you get a 'cannot read property of null' error do this:
//'index.js' File v2
function tab() {
var textarea = document.getElementById('note');
if(event.keyCode===9) {
textarea.innerHTML += "\t";
}
}
The HTML should follow suit and look like this:
<!DOCTYPE html>
<!-- index.html -->
<!-- Don't Mind the other parts like the style and button tags -->
<!-- If you don't get the error mentioned just remove the 'onkeydown="tab()"'. -->
<html onkeydown="tab()">
<head>
<title>Calender</title>
<script src="./index.js"></script>
<style>
* {
background-color: darkgoldenrod;
color: white;
}
textarea {
background-color: white;
color: black;
}
.newNote {
background-color: olivedrab;
color: white;
border: 1px solid #000000;
box-shadow: none;
border-radius: 7.5px;
}
</style>
</head>
<body>
<button class="newNote" id="newNote" onclick="Note()">New Note</button>
<br/>
<br/>
<textarea wrap="soft" rows="30" cols="100" id="note"
placeholder="Type a Note Here!" title="Note Box"></textarea>
</body>
</html>

Categories