I have an html page and basically it contains 2 div blocks and 2 links. Now, when I click one link then the content of first div should get opened in a new window. Similarly, when I click second link content of second div should get opened in another new window.
Here's a code - http://jsfiddle.net/PAJWV/5/
I do agree that it is impossible, but in case there is a workaround. Thanks.
function printPage(divid)
{
elementId=divid;
var printContent = document.getElementById(elementId);
var windowUrl = 'about:blank';
var uniqueName = new Date();
var windowName = 'Print' + uniqueName.getTime();
var printWindow = window.open(windowUrl, windowName,'left=500,top=500,width=500,height=500');
printWindow.document.write('<html><head></head><body>'+printContent.innerHTML+'</body></html>');
}
Try above code by calling the function onclick
Just create a page with the content from div1 inside of it and call your script to open this page. Same thing with div2.
You can pull the content from another file for div1 using an iframe and do the same for div2.
Why can't you do it this way?
Try this code :
http://jsfiddle.net/PAJWV/9/
will not run fine in jsfiddle but will run fine with actual code due to some limitations.
I didnt try this but you can link as
window.open("index.html#second");
and along with that hiding other divs with id not #second will work fine
you can create separate html for div1 and div2 like
window1.html
<body>
<div id="first">
First Div contents.
</div>
</body
window2.html
<body>
<div id="second">
second Div contents.
</div>
</body
main.html
<div>
<a id="link1" href="window.open('window1.html')">Open div 1</a><br />
<a id="link2" href="window.open('window2.html')">Open div 2</a>
</div>
Related
Okay below I have posted the script I'm using and the #targetDiv, Basically my problem is when I move the link that is currently contained within the #targetDiv outside of the div, The link no longer loads the page inside of the div, Is there a way I can move the link outside of the #targetDiv and still have it load the page contents inside of the div.
Script
$(function(){
$('#targetDiv').on('click', 'a', function(e){
e.preventDefault();// prevent browser from opening url
$('#targetDiv').load(this.href);
});
});
Div
<div id="targetDiv" class="collapse">
Load
</div>
The problem I have is that I want the load link to be outside of the target div however when I move it outside of the div it loads the main page not the content within the targetDiv.
What I'm trying to achieve;
Load
<div id="targetDiv" class="collapse">
</div>
Add a class to any links you want to use to load content
<a class="content-link" href="/page.php">Load</a>
And modify event listener accordingly so it handles both types of links
$(document).on('click', '.content-link, #targetDiv a',function(e){
e.preventDefault();// prevent browser from opening url
$('#targetDiv').load(this.href);
});
Try this:
$(function(){
$('#divLoad').click(function(e){
e.preventDefault();// prevent browser from opening url
$('#targetDiv').load(this.href);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="divLoad" href="/page.php">Load</a>
<div id="targetDiv" class="collapse">
</div>
You can also do this (more difficult to be precise):
$(function(){
var divLoad = $('#targetDiv').prev('a');
//alert(divLoad.attr('href') );
divLoad.click(function(e){
e.preventDefault();// prevent browser from opening url
$('#targetDiv').load(this.href);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="divLoad" href="/page.php">Load</a>
<div id="targetDiv" class="collapse">
</div>
So I need to make something like this happen - http://jsfiddle.net/3nk8x98g/1/ everything is explained in the link.
What do I use Javascript or AJAX? And maybe someone knows a tutorial or something out there? Thanks.
<body>
<div class="row">
BUTTON1
BUTTON2
BUTTON3
</div>
<div class="row background">
Changing content, this content changes depending on which button you press. Without refreshing the page.
</div>
</body>
AJAX is just a JavaScript technique, so yet, you need to use AJAX and JavaScript. Look at this for examples of how to achieve it using JavaScript only.
<body>
<div class="row">
<a id="one" href="#">BUTTON1</a>
<a id="two" href="#">BUTTON2</a>
<a id="three" href="#">BUTTON3</a>
</div>
<div id="content" class="row background">
Changing content, this content changes depending on which button you press. Without refreshing the page.
</div>
<script>
var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
var content = document.getElementById("content");
one.addEventListener("click", function() {
content.innerHTML = "One";
});
two.addEventListener("click", function() {
content.innerHTML = "Two";
});
threee.addEventListener("click", function() {
content.innerHTML = "Three";
});
</script>
</body>
You can do this. Ajax is just for getting data from server without refreshing but you have to use javascript to attach that content to html dynamically.
$('a').on('click', function(){
$('#changeingDiv').html('Changed Content');
}
);
this is just for example. Bind an event to the buttons, and on its click change the content of the div. For different content on different button click you can add id to them and change the content accordingly on some condition.
http://jsfiddle.net/3nk8x98g/2/
I'm using shadowbox to open links in an overlaying iframe.
If people navigate to mysite.com/#/link123 the link is automatically clicked and opens up in a shadowbox.
<script type="text/javascript">
window.onload = function() {
var pageURL = document.location.href;
var SBlinkRegEx = /(.*)(\/#\/)(.*)/;
var SBlinkRegExCG = SBlinkRegEx.exec(pageURL);
if(SBlinkRegExCG){
var SBhashtag = "#"+SBlinkRegExCG[3];
alert(SBhashtag);
$(SBhashtag).trigger('click');
}
}
</script>
This code works perfectly for all links EXCEPT for clickable div's. They show some strange behaviour. When people navigate to mysite.com and click on a clickable, it opens up nicely in the shadowbox. However, if people navigate to mysite.com/#/div123 the shadowbox opens the whole page(mysite.com) instead of just the div. The unwanted behaviour also happens when people navigate to mysite.com/#/link123, then close that shadowbox, and click on the div.
Here's a code from a normal link
<div class="normal-width">
<a id="link123" onclick="window.history.replaceState( {} , '', '#/link123' );" rel="shadowbox[All]" href="mysite.com/link123.html">Link 123</a>
</div>
Here's the code for my clickable div
<div id="abc" class="text">
//some content
<a id="div123" onclick="window.history.replaceState( {} , '', '#/div123' );" href="#abc" rel="shadowbox[All]" class="filldiv"></a>
</div>
Thanks for your time.
Figured it out...
rel="shadowbox[All];player=inline"
So I want to click on a link of a page which redirects to another one that has 3 different div's which trigger scripts on their href. I am not being able to do this. I tried using anchors but it does not trigger the href...
1st page
<a href="second_page.html#anchor">
2nd page
<div>
<a id="header" href="javascript:showonly('header');" name="anchor">
</div>
You need an onload handler in the head section of your second page which catches the hash and runs your action(s). Something like this should work:
<script type="text/javascript">
window.onload = function(){
if( window.location.hash == '#anchor' ) showonly('header');
}
</script>
You dont need the <a id="header" href="javascript:showonly('header');" name="anchor"> in your markup for this to work
Hey guys i am new to HTML and Jquery. Now i am able to replace a container div from my navigation menu using load function but the script does not work if it is called from the container i want to change itself. For example i am running this script
$("#pagehome").click(function(){
$("#container").load("home.html #wraper", function ()
when i call this from another div section(navigation menu) it works just fine and the div
section of container gets replaced with #wraper div of another page
<div id=navigationmenu>
<a id="pagehome" href="#"><;img src"..."/></a>
</div>
</pre>
but when i try to call the script from container div it does not get executed
<div id=container>
<a id="pagehome" href="#"><img src"..."/>
</div>
Try this.
$(document).on('click', '#pagehome', function(){
...
return false;
});