From within an iframe I must scroll another. The scrolling location is the href attribute of an tag. I am able to get to the element #ftoc which contains the document that I want to scroll, an html file located on the same domain.
I have this code to do the scrolling.
$('#cfrench', window.parent.parent.document).contents().find('#ftoc').contents().find('body').animate({scrollTop: $('a[href="'+text+'"]').offset().top-1},500);
There seems to be a problem with .contents().find('body'). What is the right way of scrolling to that href? Thanks.
Take a look on this version
var elementClicked = $('a[href="' + text + '"]');
var destination = $(elementClicked).offset().top;
var $frame = $('#cfrench', window.parent.parent.document).contents().find('#ftoc').contents();
$frame.find("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination - 20 }, 500);
p.s. I wasn't able to check the code because I don't the details.
version 2.0 :) (working solution)
main.html
<iframe id="frame1" src="page-1.htm"></iframe>
<iframe id="frame2" src="page-2.htm"></iframe>
page-1.html
<head>
<title></title>
<style type="text/css">
#anchor { margin-top:400px; display:block; }
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#scroller').click(function () {
var $frame = $(window.parent.document).find('#frame2').contents();
var $anchor = $frame.find('#anchor');
var destination = $anchor.offset().top;
console.log(destination);
$frame.find("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination - 20 }, 500);
return false;
});
});
</script>
</head>
<body>
Page 1
<a id="scroller" href="#">Scroll iframe</a>
</body>
page-2.html
<head>
<style type="text/css">
#anchor { margin:400px 0; display:block; }
</style>
</head>
<body>
Page 2
<a id="anchor" href="anhor.html">Anchor</a>
</body>
Related
Hi I'm using this: http://galleria.io/ to create a popup image slider.
Basically I want it to appear fixed over my page only after the user clicks a link to open it (it will not open another page). If I use "display: none" it will load in the background slowing everything down as it will contain HD images.
Right now I am trying this:
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="galleria/galleria-1.4.2.min.js"></script>
<style>
.galleria {
width: 700px;
height: 400px;
background: #000
}
</style>
<script>
</script>
</head>
<body>
Click me to load images
<script>
function showGallery() {
var content = "<div class=\'galleria\'><img data-src=\'photo1.jpg\'><img data-src=\'photo2.jpg\'><img data-src=\'photo3.jpg\'></div>";
var hello = "hello world";
console.log("hi it's working");
$('body').append(hello);
}
$('#imageshow').click(function() {
showGallery();
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('.galleria');
});
</script>
</body>
</html>
This the documentation for Galleria:
http://galleria.io/docs/getting_started/beginners_guide/
I had a real good look at this and even downloaded the galleria.js for it. Coming to the simple conclusion that your code is likely to only miss a document ready statement :
<script>
$(document).ready(function() {
function showGallery() {
var content = "<div class=\'galleria\'><img data-src=\'photo1.jpg\'><img data-src=\'photo2.jpg\'><img data-src=\'photo3.jpg\'></div>";
var hello = "hello world";
console.log("hi it's working");
$('body').append(hello);
}
$('#imageshow').click(function() {
showGallery();
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('.galleria');
});
});
</script>
Please go thorough below HTML files code. Here I am trying to use toggle function of jQuery. Here my toggle for "content.HTML" page is working perfectly. I need to hide the "topFrame" Completely when I click on any image or button and unhide it when I click on it again.
Please help me where I've made mistake. I've tried a lot to accomplish this but I am not able to do.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Frameset Example Title (Replace this section with your own title)</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<frameset rows="10%,90%" border="0" name="FrameName">
<frame name="topFrame" src="menu_1.html" target="right"></frame>
<frame name="menu" src="content.html" target="_self"></frame>
<noframes>
//....
</noframes>
</frameset>
<script>
$(document).ready(function(){
$("button").click(function(){
$('frame[name="topFrame"]').fadeToggle("slow");
$("#top").toggle();
});
});
</script>
</html>
content.html
<html>
<head>
<title>HTML Frames Example - Content</title>
<style type="text/css">
body {
font-family:verdana,arial,sans-serif;
font-size:10pt;
margin:30px;
background-color:#ffcc00;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<h1>Content</h1>
<br>
<button id="button1">Toggle 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
<script>
$('button').on('click',function(){
$( "p" ).toggle( "slow" );
$( "h1" ).toggle( "slow" );
});
</script>
</body>
</html>
menu_1.html
<html>
<head>
<title>HTML Frames Example - Menu 1</title>
<style type="text/css">
body {
font-family:verdana,arial,sans-serif;
font-size:10pt;
margin:10px;
background-color:#ff9900;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
(function(){
$('img, button').on("click" , function (e) {
$('p').toggle();
});
});
</script>
</head>
<body>
<h3>Menu 1</h3>
<p>White Page</p>
</body>
</html>
Here you have toggle button in content frame and want to hide menu frame onclick of toggle button.
Problem is you cannot access javascript function present in parent from child frame, hence need to do some work-around like below :
Add a event listener in parent and call toggle frame function (frame cannot be hide or show directly using display property of css, hence added two seperate function) :
........
<frameset rows="10%,90%" border="0" name="FrameName">
<frame name="topFrame" src="menu_1.html" target="right"></frame>
<frame name="menu" src="content.html" target="_self"></frame>
<noframes>
//....
</noframes>
</frameset>
<script>
var origCols = null;
function receiveMessage(event)
{
if(origCols!=null)
showFrame()
else
hideFrame();
}
addEventListener("message", receiveMessage, false);
function hideFrame() {
var frameset = document.getElementById("frameSet");
origCols = frameset.rows;
frameset.rows = "0, *";
}
function showFrame() {
document.getElementById("frameSet").rows = origCols;
origCols = null;
}
</script>
</html>
And now write onclick of button like below :
<button id="button1" onclick="parent.postMessage('button1 clicked', '*');">
Toggle 'em</button>
Try using IDs
Here's a short example..
<div><a id="thumbnail">Click here to Show/Hide Thumbnail</a></div>
<div id="showhide"> Your Content to hide or show </div>
<script type="text/javascript">
$('#thumbnail').click(function() {
$('#showhide').toggle();
});
</script>
I'm trying to do screen shot paste in my website using firefox. It can be done easily by giving the div as contenteditable='true'.
html
<Html>
<Head>
<Title>Screen Shot Example</Title>
<style type="text/css">
#apDiv1 {
position:absolute;
width:258px;
height:165px;
z-index:1;
left: 71px;
top: 59px;
}
</style>
</Head>
<Body>
<div id="apDiv1" contenteditable='true'>Paste Test</div>
</Body>
</Html>
I can paste images from clipboard to particular div. Now the issue starts, how do I get the value from the div. For an example my user paste screenshot in the div and i want it to be save in db. If it normal textbox I can get the textbox value. Is there any way I can convert the DIV to image. Any advice and any referral links is highly appreciated.
document.addEventListener('DOMContentLoaded', function(){
var text = document.getElementById('apDiv1').innerText;
}, false);
To replace the div:
document.addEventListener('DOMContentLoaded', function(){
var el = document.getElementById("apDiv1");
var img = document.createElement("img");
img.setAttribute('src', '...');
el.parentNode.replaceChild(el, img);
}, false);
In my web application, I have tabs and if any of the tab is clicked, the corresponding page will be displayed. But even after the tab is selected, the hyperlink button is enabled. My need is that if i do mouse over on the selected tab, the normal pointer should display instead of hyperlink. please help me suggesting the solution.
regards,
Jeya
Either
<a>you can't click me</a>
or
<a href='...' style='cursor:default'>you can click me but the cusror doesn't indicate this</a>
Here is a complete sample :
<html>
<head>
<style type="text/css">
a:target
{
cursor: default;
}
</style>
</head>
<body>
<a id="anchor1" href="#anchor1">Anchor1</a>
<a id="anchor2" href="#anchor2">Anchor2</a>
<a id="anchor3" href="#anchor3">Anchor3</a>
</body>
</html>
When you click any of the link it'll become the current target of the page, then the a:target rule will be applied to it, setting the default cursor.
EDIT for IE :
Changing my original sample, here is another implementation using jQuery, tested with IE8 but not IE7.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function()
{
var hash = null;
var updateAnchors = function()
{
hash = window.location.hash;
$(".tab").removeClass("target");
$(".tab[href=" + hash + "]").addClass("target");
};
window.setInterval(function ()
{
if (window.location.hash != hash)
{
updateAnchors();
}
}, 100);
updateAnchors();
});
</script>
<style type="text/css">
.target
{
cursor: default;
}
</style>
</head>
<body>
<a id="anchor1" href="#anchor1" class="tab">Anchor1</a>
<a id="anchor2" href="#anchor2" class="tab">Anchor2</a>
<a id="anchor3" href="#anchor3" class="tab">Anchor3</a>
</body>
</html>
You can select an element using javascript:
document.getElementById('element-id');
Once you've done that, you can modify the style within that element:
document.getElementById('your-element').style.cursor = 'default';
Now your cursor should look normal.
Use JavaScript:
document.getElementById("myATagId").style.cursor = "default";
I have a "print" button on index.html. What code do I need to print the print.html file? I mean, when I press the button from index.html, print the page print.html.
function closePrint () {
document.body.removeChild(this.__container__);
}
function setPrint () {
this.contentWindow.__container__ = this;
this.contentWindow.onbeforeunload = closePrint;
this.contentWindow.onafterprint = closePrint;
this.contentWindow.focus(); // Required for IE
this.contentWindow.print();
}
function printPage (sURL) {
var oHiddFrame = document.createElement("iframe");
oHiddFrame.onload = setPrint;
oHiddFrame.style.visibility = "hidden";
oHiddFrame.style.position = "fixed";
oHiddFrame.style.right = "0";
oHiddFrame.style.bottom = "0";
oHiddFrame.src = sURL;
document.body.appendChild(oHiddFrame);
}
Then use
onclick="printPage('print_url');"
I think you're looking for window.print()
Update
Just noticed you've specified file names in there and that you want to print print.html when a button on index.html is clicked. There's no built-in way to do this (in the sense that you can't pass any arguments to window.print() indicating the document to print). What you could do is load the document to print into an iframe or open a new window and on load, invoke window.print() on that container.
Here are some forum posts and web pages that talk about the same thing:
http://www.highdots.com/forums/javascript/printing-another-web-file-present-274201.html
http://www.webmasterworld.com/javascript/3524974.htm
http://www.felgall.com/jstip29.htm
Update 2
Here's some quick-and-dirty code - note that this will only work if both your pages are in the same domain. Additionally, Firefox seems to fire the load event for an empty iframe also - so the print dialog will be displayed immediately on load, even when no src value was set for the iframe.
index.html
<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.html');
});
});
</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>
print.html
<html>
<head>
<title>To Print</title>
</head>
<body>
Lorem Ipsum - this is print.html
</body>
</html>
Update 3
You might also want to see this: How do I print an IFrame from javascript in Safari/Chrome
You can use the JQuery printPage plugin (https://github.com/posabsolute/jQuery-printPage-plugin). This plugin works fine and you can simply print an external html page.
Example:
<html>
<head>
<title>Index</title>
<script src="http://www.position-absolute.com/creation/print/jquery.min.js" type="text/javascript"></script>
<script src="http://www.position-absolute.com/creation/print/jquery.printPage.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$(".btnPrint").printPage();
});
</script>
</head>
<body>
<input type="button" id="printerButton" name="print" value="Print It" />
<p><a class="btnPrint" href='iframe.html'>Print!</a></p>
</body>
</html>