I'm a beginner in Javascript and I struggle with a problem for a while. I want to open a new content in an existing div from another local html document. So in main content I have a simple list of projects and when I click on one project I want it to open in same the div '#content' as my projects. For this I use code:
$(document).ready(function() {
$('a.th-link').click(function() {
var url = $(this).attr('href');
$('#content').html('<h4>Loading...</h4>').load(url+ '#mynewdiv');
$.getScript('js/jquery.js');
$.getScript('js/jquery.horizontal.scroll.js');
$.getScript('js/jquery.mousewheel.js');
$(url).remove();
return false;
});
});
The problem is when I want to go back to my main div with projects '#content', with back-button on mouse or with browser, I stuck on other div '#mynewdiv', or I get to the previous open site.
Can anybody help with the code?
I'm still dealing with this problem. I found a rough example that is similar to mine and I have transformed it, to work like I want, but still doesn't work as it should. To refresh my problem.
I want to open in certain div, a new html page and it will work back button.
I also tried benalman bbq but I can't figure out, what I'm doing wrong.
Here is what I'm doing
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TEST</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.1");
</script>
<script src="jquery.address-1.1.min.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
$("document").ready(function(){
function loadURL(url) {
console.log("loadURL: " + url);
$("#area").load(url);
}
// Event handlers
$.address.externalChange(function(event) {
console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
$("#area").load($('[rel=address:' + event.value + ']').attr('href'));
}).change(function(event) {
console.log("change");
});
$('a.test').click(function(){
loadURL($(this).attr('href'));
});
});
/*]]>*/
</script>
<style type="text/css">
#area {border-style:solid;
border-width:5px;
height:300px;
width:100%;}
</style>
</head>
<body>
<p>Test</p>
<div id="area">
<a class='test' href="test1.html" rel="address:/test1">Test 1</a> <br />
<a class='test' href="test2.html" rel="address:/test2">Test 2</a> <br /> <br /> <br />
</body>
</html>
Thanks for the answer
.load() gets the data and displays it on the same site. The browser is never changing page. So when you click back, the browser will go to the previous open site.
You can use a plugin like jQuery Address to simulate the behavior you want.
Related
I got a page I got a link. The link goes to http://stackoverflow.com.
In addition, click anywhere on the link and it goes to http://stackoverflow.com too.
I am just curious. Is there a way to do so without writing stackoverflow.com twice?
Can I make the link in the link to be inactive and clicking the link means the user activate the code written in "onclick" on body?
This is the code:
<!doctype HTML>
<html>
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Title</title>
<style>
#centerInScreen {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#centerInScreen h1 {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.auto-style1 {
text-align: center;
}
</style>
</head>
<body onclick="window.location.replace('http://stackoverflow.com');">
<div id="centerInScreen">
<h1 class="auto-style1">
Click here to Get Game and See Yourself</h1>
</div>
</body>
</html>
You can see the code in action here
http://romancepriorities.com/test/index2.html
Basically the link is part of the body. So I want body.onclick to be called when a user click the link.
You could give your a element an id, and then when the click event happens, you would get the element by that id, and call the click method on it:
<body>
<div id="centerInScreen">
<h1 class="auto-style1">
<a id="go" href="http://stackoverflow.com">Click here to Get Game and See Yourself</a>
</h1>
</div>
<script>
document.addEventListener('click', function() {
document.getElementById('go').click();
});
</script>
</body>
Note that as you had it, the behaviour was not the same: location.replace will not generate an entry in the browser history, so you cannot go back. Also, the body element does not necessarily fill the page, so not all clicks would be detected, like is the case with listening to the event on document.
Two-step link
If you want to have the link "inactive" until it is clicked, and only then allow a navigation to happen on a second click anywhere on the page, then use a variable:
<body>
<div id="centerInScreen">
<h1 class="auto-style1">
<a id="go" href="http://stackoverflow.com">Click here to Get Game and See Yourself</a>
</h1>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () { // after doc loaded
var hasClicked = false;
var go = document.getElementById('go');
document.addEventListener('click', function() {
// only when link was activate with previous click
if (hasClicked) go.click();
});
go.addEventListener('click', function() {
if (!hasClicked) { // not yet clicked before?
// log the fact that the link was clicked
hasClicked = true;
// but cancel the navigation
return false;
}
});
});
</script>
</body>
You would need to use some visual hints so this becomes user-friendly: with classes you could make the link "look" inactive until it receives its first click. Upon that click you could change the style, and maybe its text,...etc. But this goes beyond the question.
I have a WordPress based site with good visitor. I want when anyone click on my site a new link open in a new tab. I am not expert on coding. So, which code i use and where i put it?
Find your anchors links into your WP template, should look like this
Link
add target="_blank" so it looks like :
<a target="_blank" href="http://your_url_here.html">Link</a>
Inside your <a> tags, you can add target="_blank" to do this.
In question title he mention Anywhere, which derived to following solution
<!doctype html>
<html>
<head>
<title>This is the title</title>
<script type="text/javascript">
function mainWindowLoaded()
{
console.log("Main windwo is loaded");
document.getElementById('wholebody').addEventListener('click', clickedInBody);
}
function clickedInBody()
{
console.log("log added");
window.open('https://www.google.com', '_blank');
}
window.addEventListener('load', mainWindowLoaded);
</script>
</head>
<body >
<div
id='wholebody'
style="background-color:rgba(255, 0, 255, 0.3); position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:1">
</div>
<h1> Your website content goes here </h1>
</body>
The key idea here is to add an overlay div of which z-index is higher than the whole page content. a click action is added to this div, which silently catch all the click events.
I'm having following problem. I have following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Click Me test site</title>
</head>
<body>
Click Me
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(document).ready(function() {
var handler = function codeclick(event) {
var link_new = $('a').attr('co-target');
if (link_new) {
window.open(link_new, '_blank');
}
}
$('a').bind('click.codeclick', handler);
});
</script>
</body>
</html>
You can see it in action here
The expected behaviour on desktop is that the page in co-target attribute is opened in new tab/window and the one in href attribute is opened in current tab.
On internal mobile facebook browser it should open just the co-target attribute page (intended). But on Google mobile iOS app it opens the page in href attribute (unintended).
Does anyone encountered similar problem before and maybe have some clues what should I do to make it right? There is no need that the page in co-target has to open. I just want it that on both facebook and google app it open one of it, not different one in each.
I am trying to use ajax to change the content of a div (as html), when a link is clicked in that same div. I am not very skilled in ajax, so I am pretty sure that this is a noob question. I have tried searching the web for solutions, but I didn't manage to make anything work.
I have a div with the id "main" and inside it I am trying to make a link with the id "link01". When "link01" is clicked, I want "main" to load content from another div in another page ("txt2"-div in site2.html). But I can't get it to work.
Firstly, this is my index.html page:
<head>
<title>site1</title>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#link01').click(function() {
$('#main').load('site2.html #txt2', function() {});
});
});
</script>
<div id="main">
<a>
<div id="link01">link</div>
</a>
Main div where the content will change</div>
<br>
<br>
</body>
</html>
And this is my site2.html page:
<!DOCTYPE html>
<html>
<head>
<title>Site2</title>
<meta charset="UTF-8">
</head>
<body>
<div id="txt2">Text that will go into the main div at the index-page when link01 is clicked (contains links, images, etc)</div>
</body>
</html>
I have probably misunderstood something completeley.
There is a very bad practice way that may work... But you should really have a server side code that listens you your ajax call, and returns just the desired HTML fragment as a response. Having said that, try this, it MIGHT work (didn't check):
$(function() {
$('#link01').click(function(){
$.ajax({
url: 'site2.html',
type: 'GET',
success: function(data){
data = $(data);
var $div = $('#txt2', data);
$('#main').html($div);
}
});
});
});
*Update: Ultimately I've decided that accomplishing exactly what I want here isn't possible due to the issues it poses to security. Kalle's answer below gives a solution that is closest to what I want to accomplish.
In order to solve my problem I've created scripts on both pages and will use a sort of push notification that is routed through the server in order for them to communicate.
Thanks for the help!! *
I have two pages. Both windows already exist independently. Page two has a function declared in JS.
I would like to be able to call the function in window two by clicking a link in window one.
Page 1:
<html>
<head>
<title>This is a title!</title>
</head>
<body style="background: lightblue">
Click Me!
</body>
Page 2:
<html>
<head>
<META HTTP-EQUIV="Window-target" CONTENT="my_target" />
<title>This is a title!</title>
<script type=text/javascript>
function clicked() {
alert('test');
}
</script>
</head>
<body style="background: lightblue">
</body>
Since it is on the same domain you can get this to work but would have to change the way you were doing it a little.
First off you would have to open it in a popup using this syntax rather than a new tab:
newwindow=window.open(url,'name','height=200,width=150');
and then you could simply call newwindow.clicked() after the popup is called.
update
just did a quick test and this will open it in a new tab. (sorry its been a while since I used the open function.
newwindow=window.open(url,'name');
Just noticed also that you should wait for the popup to load. So in my Example it would look a little something like this (with jQuery):
var newwindow = window.open('http://www.tylerbiscoe.com/vb/new.html');
$(newwindow).load(function(){
newwindow.clicked();
});
Ok, brand new answer. I hope this is what you were thinking. This is however, when you open page 2 from page 1.. So basically, page 1 would know who page 2 is..
Online example: http://kopli.pri.ee/stackoverflow/6832271.php
Page 1
<html>
<head>
<title>Page 1</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
.ajaxlink {color: blue; cursor: pointer; border-bottom: 1px dotted blue;}
</style>
</head>
<body>
<span id="open_page_2" class="ajaxlink">Open new window</span>
<br>
<br>
Click Me!
<script>
$('#open_page_2').click(function(){
child = window.open('test2.php','page_2','width=600,height=600');
});
$('a[target=my_target]').click(function () {
child.SecondPageFunction();
return false;
});
</script>
</body>
</html>
Page 2
<html>
<head>
<title>Page 2</title>
</head>
<body>
<h1>Your seeing page 2!</h1>
<script>
function SecondPageFunction () {
alert('Second page action got triggered!');
}
</script>
</body>
</html>
The script must be a part of the page you're opening in the new window. You're absolutely correct about it being a security flaw if it was elsewise allowed.
You could add some query string argument that could be picked up onload by javascript in the page you are opening and call your function if the query string arg is present.