How to open new html file using java script [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Suppose I have two html files: 'page1' and 'page2'
Code in page1:
<html>
<body>
page1
click to go to page 2
</body>
</html>
Code in page2:
<html>
<body>
page2
click to go to page 1
</body>
</html>
Using this I can open page2 using hyperlink in page1 in a new tab in the same window and viceversa
Is it possible to the same thing using javascript

lots of way possible ..
1.
<script language="javascript" type="text/javascript">
window.location.href="login.jsp?backurl="+window.location.href;
</script>
2.
<script language="javascript">
alert("back");
window.history.back(-1);
</script>
3.
<script language="javascript">
window.navigate("top.jsp");
</script>
4.
<script language="JavaScript">
self.location="top.htm";
</script>
5.
<script language="javascript">
alert("Access Violation");
top.location="error.jsp";
</script>
6.
<script language="javascript">
window.location = window.location.host;
</script>

check this question here.you can use
// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");
// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";

You can add an click event listener to your link element (or any other) and set the href property in the location object. Let’s use inline onclick for illustration:
Link
By clicking on this element, the onclick handler will be executed, setting the href, i.e. the current address. By returning false, the default action will be prevented (see MouseClick.preventDefault()).
This is kind of a JavaScript surrogate for HTML hypertext behavior. You also can do other cool things with Window.location.

Related

Binding .this to an HTML element [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I've been trying to get this "this" to work, to bind it to an/any HTML element that the function is applied to. I'm trying to keep it universal to make it possible to apply the same function to multiple HTML elements.
Note:
I don't want to mess with ids nor classes and such since I want to keep the function as universal as possible.
<!doctype html>
<html>
<body>
<input type="button" value="Old" onClick="Change(this);">
<script type="text/javascript">
function Change(){
this.innerHTML = "New";
};
</script>
</body>
</html>
innerHTML won't work in this case. Being that this is an input, try using value instead.
var input = document.querySelector('input');
input.addEventListener('click', Change);
function Change(){
this.value = "New";
this.removeEventListener('click', Change);
}
<input type="button" value="Old" />
The problem is that when the page hits the input the Change function is not defined. Try the following:
<!doctype html>
<html>
<body>
<script type="text/javascript">
function Change(){
this.value = "New";
};
</script>
<input type="button" value="Old" onClick="Change.call(this);">
</body>
</html>
Note that I have changed the input's onClick to Change.call(this). And that the script is loaded before the control.
You can see a working fiddle here. Note that the JavaScript settings is configured so that the script is loaded in the head (Hit the cog in the JavaScript section).

How to make a Go url bar in html+css [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Im a noob at js, and I would like to make a go bar like at the top of browsers in html and js. It will go to the url in the box when the button is pressed nothing more, nothing less. Heres about what i want:
In javascript you just have to add an event listener in the "Go" button.
Then when you click the button, you just have to redirect the url according to the text field value.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="field" />
<button id="myBtn">Go</button>
<script type="text/javascript">
document.getElementById("myBtn").addEventListener("click", function(){
var url = document.getElementById("field").value;
window.location.href = url;
// OR
window.open(url);
});
</script>
</body>
</html>
With this code, if you enter a value in the text field and click the button. The url will add your value at the end.
For example if you are testing on the url localhost/ and you enter "test", javascript will redirect you to localhost/test.
To redirect correctly you must write "http://" or "https://" at the beginning

show text file on hyperlink event in HTML [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I have these number of <a href />links in a HTML page:
<a ...>
<a ...>
.....
<a ...>
What I want is on the click of each link I have to show a text file on same html page.
a text file can be shown in a textarea or iframe.
How can I accomplish that?
.........EDIT..............
correct code
<html>
<head>
<title>Ajax Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(e){
e.preventDefault();
$.get( $(this).attr("href") ).done(function(e){
$("textarea").html(e);
});
});
});
</script>
</head>
<body>
foo bar<br>
<textarea></textarea>
</body>
</html>
You can use AJAX to get the text file data from the server, then put it into the text field.
Demo: http://jsfiddle.net/DerekL/63BLB/
$("a").click(function(e){ //select all <a>
e.preventDefault(); //remove default link effect
$.get( $(this).attr("href") ) /*AJAX (using jQuery)..
..and insert the URL of text file*/
.done(function(e){ //When it is downloaded,
$("textarea").html(e); //shows it in <textarea>
});
});
If you are new to jQuery, you may want to check out their documentation, especially $.ajax. :)
Note: You can only fetch text files in the same origin.
Note 2: The code above is written using jQuery. If you do not want to use jQuery, you will have to do the whole native new XMLHttpRequest thing.

Submitting HTML form data to javascript [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I am lost, I just started programming and the code I have doesn't quite show what I'm trying to do, and is unfinished. However, my problem is I am trying to figure out how to take HTML form data entered by a user, and when a button is pressed its submits the data to a string variable in the sites Javascript. The challenge is that I can't use any server-side script, only HTML, CSS, Javascript, and I have to JQuery. I have look everywhere on how to do this for weeks. I can't find anything helpful for what I'm attempting.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script>
<!--
function storageCheck01(){
if(typeof(Storage)!=="undefined"){
activeSession();
}
else{
var b0002=document.getElementById("wrapper");
b0002.style.display="none";
document.write("No Support!");
};
}
function activeSession(){
if(typeof localStorage.visitCount !== "undefined"){
++localStorage.visitCount;
if(typeof sessionStorage.c02 !== "undefined"){
userData();
}else{
setCookie();
};
}else{
localStorage.visitCount = 1;
setCookie();
};
}
function setCookie(){
sessionStorage.c01=date();
sessionStorage.c02=screen.availWidth;
sessionStorage.c03=screen.availHeight;
userData(sessionStorage.c01, sessionStorage.c02, sessionStorage.c03);
}
function userData(date, width, hight, ){
}
addEventListener('load',storageCheck01,false);
-->
</script>
</head>
<body>
<form>
<!-- ADD FORM DATA TO RETRIEVE USERDATA -->
</form>
</body>
</html>
Well, it sounds like you are just trying to take a form and capture the user's input when they click submit. No need to post to a different file.
So, it is simply having a button putting an onclick event and then calling a function in the javascript. This javascript would use the document.getElementById(nameofObject).value.
Example:
<html>
<head>
<title>New Page 1</title>
<script language="JavaScript" type = "text/javascript">
<!--
function Test()
{
alert(document.getElementById("testinput").value);
}
//..>
-->
</script>
</head>
<body>
<form name="textfield">
<input type="text" name="T1" size="20" id="testinput">
<input type="button" value="Click Here" name="B1" onClick="Test()"></p>
</form>
</body>
</html>
Source: http://www.java2s.com/Tutorial/JavaScript/0460__DOM-Node/Getelementfromadocumentbyid.htm
If you just want to submit the data to the server, you don't have to use any JavaScript at all. When you put an "input" element in the form, for example, an "input type='text'" element, which creates a text box, the text box's value is automatically submitted to the server as a form variable, with the key being the name of the element, when use press the submit button. You can then use whatever code/platform you use on the server side to get the variable value.

Cracking effect on a page (non-flash) [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have a landing page in a website, where there is just a single image of the earth.
Now to enter the main site, I want some effect in the landing page that the earth cracks open and then the user enters the main site.
What I am currently doing: I currently divide the whole landing page image into 4 divs with a separate image in each of them (which jointly form the earth). Now when the user has to enter the site, I simple animate each of the 4 divs to each corner of the screen. But I need cracking effects & some other visually attractive effects.
Any ideas how to achieve this? Javascript (or jQuery) solution preferable.
overlay a crack image and make it slideDown() (jQuery) over the Earth img.
see http://jsfiddle.net/NKqNh/
$(function() {
$('#crack').slideDown(800);
});​
<div id="earth" class="common"> </div>
<div id="crack" class="common"> </div>​
Edit:
In your answer here is an updated js using a callback to an anonymous function for the explosion after the cracking.
http://jsfiddle.net/eC9HM/2/
$(function() {
$('#crack').slideDown(800, function() {
$('#earth, #crack').hide('explode', {pieces: 16}, 2000);
});
});
​
You can use explode effect of jQuery UI . It will break the image into many pieces(you can choose how many pieces you want) and The image will disappear
Uptdated-
Try this code-
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("img").click(function () {
$(this).hide("explode", { pieces: 24 }, 2000);
});
});
</script>
</head>
<body style="font-size:62.5%;">
<img src="http://2.bp.blogspot.com/-No5MB366RTY/T3WYGRicqUI/AAAAAAAAALQ/mDgaBLVocZE/s1600/260px-The_Earth_seen_from_Apollo_17.jpg">
</body>
</html>
Thanks for the answers, but I found my answer combining the other two answers present here.
So am just sharking the fiddle here, so that may be useful in future:
Updated fiddle:
http://jsfiddle.net/gopi1410/eC9HM/1/

Categories

Resources