How to pass parameter to another page and print the content - javascript

I am going to print a page without loading that page. As I searched in stack overflow I found the following example the best.
But the problem here is that I cannot pass any parameter using the src attribute.
Now, I am looking for a way to pass a parameter to an external page and then print that page without loading that page.
If anyone can help me I will be thankful but please do not mark my question as a duplicated question.
<html>
<head>
<title>Index</title>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
$('#loaderFrame').load(function(){
var w = (this.contentWindow || this.contentDocument.defaultView);
w.print();
});
$('#printerButton').click(function(){
$('#loaderFrame').attr('src', 'print.php');
});
});
</script>
<style>
#loaderFrame{
visibility: hidden;
height: 1px;
width: 1px;
}
</style>
</head>
<body>
<input type="button" id="printerButton" name="print" value="Print It" />
<iframe id="loaderFrame" ></iframe>
</body>
</html>

Related

Detect event on iframe

My application opens in an iframe..
$(window).scroll(function() { alert("scroll is");});
if i run this code without iframe it works but with iframe it does not work
The following is the content of an HTML file I include in an iFrame, the Javascript gets called correctly. Perhaps compare it to what you have written.
<html>
<head>
<title>Test iFrame</title>
<!-- Add Some Space to Simulate Content (not needed) -->
<style>
body {
width: 100vh;
height: 100vh;
}
</style>
</head>
<body>
<p>iFrame content goes here</p>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
// wait for jQuery to load
$(document).ready(function() {
$(window).scroll(function() {
alert("scroll is");
});
});
</script>
</body>
</html>

JavaScript erratic with starting point funciton

fairly new to js. I have a simple project in which all I have is an image twice the height of the screen. I want the webpage to open at the bottom of the page, so I have added the "window.scroll" funtion method in javascript. This works fine... most of the time. Sometimes, particularly if I test on a mobile device with a home server, the javascript just doesn't fire up and the page starts at the top. So my main question is: is there a way to do the same as "window.scroll" but with CSS, bypassing js altogether? And a second question I would have is, why is javascript so flaky? I am really new to web development and I have already twice (the other time with the "slide" method) had to use css instead of js because js doesn't work properly, or it needs to be cached etc... is this normal behaivour or just me really bad at writing it at this point? Thanks for your time. P
Here's the simple code:
$(document).ready(function(){
window.scroll(0,2000);
});
body {
margin: 0px;
padding: 0px;
}
img {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<img src="https://pixabay.com/static/uploads/photo/2016/10/18/21/22/california-1751455_960_720.jpg" width="100%" style="display: block;">
</body>
</html>
CSS:
body {
margin: 0px;
padding: 0px;
}
img {
width: 100%;
}
JavaScript:
$(document).ready(function(){
window.scroll(0,2000);
});
I think the problem is that the image takes time to load.So I think your event is fired however the image loads later and changes the page size again. The load event will fire after images are loaded.
try this code instead:
$(window).on("load", ,function(){
window.scroll(0,2000);
});

Why isn't my web page transition working? (HTML, CSS, JavaScript)

Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet" type="text/css">
<script src="main.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<a id="myLink" href="#">
Click to slide in new page
</a>
<iframe id="newPage" src="http://jsfiddle.net"></iframe>
</body>
</html>
And here is my CSS:
#myLink {
position: absolute;
}
iframe {
width: 100%;
height: 100%;
top: 100%;
position: fixed;
background-color: blue;
}
And my JavaScript:
$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});
I am literally copy and pasting from this source http://jsfiddle.net/TheGAFF/hNYMr/ to achieve a transition between web pages using iframe but for some reason when I try this simple code in my browser, it doesn't work. I can't see why this doesn't work in my browser when I link it to index.html. Can anyone help? Thanks.
Edit: The "#myLink" in the CSS page isn't commented out, it just happened to format like this in the question.
Look in your JavaScript console. Expect to see an error about $ not being defined.
See this code:
<script src="main.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
First you load your script, which tries to use $. Then you try to load jQuery, which defines $.
Swap the order or your script elements.
You then have a second problem.
$("#myLink")
You have no element with id="myLink" in the document at the time the script runs.
It doesn't get added to the DOM until 4 lines later.
Either:
move the script so it appears after the elements you are trying to access
use an event handler (like DOM Ready):
Such:
$( function () {
$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});
} );
use delegated events
Such:
$(document).on("click", "#myLink", function () {
$('#newPage').transition({top: '0%' });
});
Edit; sorry you already did that.
Try puttting your js file Under the js library file.

How to set real time input value to link through iFrame?

Please see below 2 HTML pages, I have 1 page inside iFrame call other page.
what I exactly need, I want in "iframe.html" you can see text field. when I write something in that input box, real time that value should take inside href=""
Note : iframe.html page is pure html page. I can't use jquery inside that page. I have to access that page from index.html page.
I have tried some jquery code, but only I wrote function.
this is index.html page.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<iframe src="iframe.html" id="myframe"></iframe>
<script type="text/javascript">
$($("#myframe").contents().find('body')).on("click", 'a[href="#editable-link"]', function(e) {
});
</script>
</body>
</html>
And this is "iframe.html" page.
<html>
<head>
<input type="text" placeholder="Enter URL">
Read More
</body>
</html>
can anyone help me to resolve this problem. it will very helpful.
thanks in advance.
Try
$('#myframe').load(function(){
$('#myframe').contents().find('input').bind('input',function(e) {
var url = $('#myframe').contents().find('input').val();
$('#myframe').contents().find('#editable-link').prop('href',url);
});
});

Open spoiler on a separate page

On my website, I have to build multiple spoilers. I'm planning to use this code for creating spoilers: How to create multiple spoiler buttons.
I'm looking for an easy way to create a link 'x' on a page 'A.html' that leads to the page 'B.html' and opens the spoiler 'x' on the page 'B.html'. So the spoiler name="x" and the URL should look similar to B.html#x.
In other words, I need a table of contents on the page A.html for spoilers on the page B.html.
But if you go straight to the page B.html, all spoilers should be closed by default with an option to open and close them by clicking on the spoiler title.
Any ready-made solutions would be appreciated. The solution shouldn't necessarily be based on the code I provided above.
Ok, I know that it's totally wrong, but this is what I tried.
A.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.spoiler {
display:none;
width:100%;
height:50px;
background-color:red;
margin-bottom:10px;
}
.contentBoxFooter{position:absolute;bottom:10px;}
</style>
</head>
<body>
<div id="x" class="spoiler">Content1</div>
<div id="y" class="spoiler">Content2</div>
<div id="z" class="spoiler">Content3</div>
<div class="contentBoxFooter">
Show/Hide
Show/Hide
Show/Hide
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</body>
</html>
B.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.spoiler {
display:none;
width:100%;
height:50px;
background-color:red;
margin-bottom:10px;
}
.contentBoxFooter{position:absolute;bottom:10px;}
</style>
</head>
<body>
<div id="x" class="spoiler">Content1</div>
<div id="y" class="spoiler">Content2</div>
<div id="z" class="spoiler">Content3</div>
<div class="contentBoxFooter">
Show/Hide
Show/Hide
Show/Hide
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".spoilerButton").click(function (e) {
e.preventDefault()
var foo=$(this).attr('href')
$(''+foo).slideToggle(1000);
});
});
</script>
</body>
Update: here's the example of what I need: https://support.google.com/plus/#topic=3049663 each section adds a unique URL ending to the link.
If you don´t like to do it over the querying the url, you need to open B.html in a new javascript window.
And there you can do something it, e. g.:
window win = window.open("B.html");
win.document.myVariable = "test";
Then you could read the variable on website B.html as you usually would do with myVariable
Edit: If you just want to load page B.html into a spoiler in page A.html then it´s just a single jquery command:
$("#spoiler").load("B.html");
I found a solution here: https://forum.jquery.com/topic/accordion-open-a-specific-tab-with-link-from-another-page
But I ended up with the accordion, instead of a set of spoilers, as I initially wanted.

Categories

Resources