triggering multiple events with single onClick - javascript

I have a iframe on my web page. On anchor click a pdf file opens in the iframe. I have provided button by clicking which I close/display:none the iframe. I want the iframe to show again when the anchor is clicked. The click of the anchor should show the iframe and open the pdf in that iframe. Please help me how to do that.
I have tried the following:
function CloseWindow() {
var ifr = document.getElementById("ifrlyric")
ifr.style.display='none' }
function OpenWindow() {
var ifro = document.getElememtById("ifrlyric")
if (ifro.style.display=='none') { ifro.style.display='block' } }
Mypage
The anchor is opening the pdf in the iframe first time and the click button hides it. But again when the anchor is clicked the iframe is not showing.

Try to do a third function such as
function toggleState() {
if(document.getElementById('ifrlyric').style.display == 'none') {
window.lyrics.location='mypage.pdf'; // And I suggest moving this to OpenWindow
OpenWindow ();
} else {
CloseWindow ();
}
}
And then call it in your onClick :
Mypage
EDIT
Re-reading your code I can see a typo, you wrote getElememtById instead of getElementById

The function "OpenWindow" has the only mission to show the iframe, so I suggest to simply:
function OpenWindow() {
var ifro = document.getElememtById("ifrlyric")
ifro.style.display='block' }

Since you tagged jquery, I'll say just use the jquery toggle function:
Mypage
<script>
function setLocation() {
window.lyrics.location='mypage.pdf';
$('#ifrlyric').toggle();
</script>
You didn't post enough code for me to know if this is exactly right, but it should at least be pretty close.

Related

Link to open tab from menu help. jQuery Tabslet

I'm wanting to link to a certain tab (Portfolio Tab) on a page from the main menu of a website, so when clicked it goes to that page with that portfolio tab open.
So far I've come up with this (using jQuery Tabslet) which works when not on the same page, but doesn't work if the user happens to be on the same page as the tabs, and so does nothing.
The link I use in the main menu is /about/#tab-3 which is doing the job of going to the about page with the portfolio tab open.
I thought I may need to trigger a page refresh when on the same page? And perhaps remove the #tab-3 from the url too.
Not being a jQuery expert, I unfortunately just don't know.
Here is the code so far
Thanks in advance.
jQuery(document).ready(function($){
$('.tabs').tabslet({
active :1,
animation : true,
container: '.tabs-container'
});
var hash = $.trim( window.location.hash );
var anchor = $('a[href$="'+hash+'"]');
if (anchor.length > 0){
anchor.click();
}
window.onload = function () {
if (location.hash) {
window.scrollTo(0, 0);
}
};
});
Advise: Always mention a reference to the plugin you use. I assume here you talk about this one.
This plugin acts on tab click only.
So when using a window hash in a link from another page like you do, you have to "simulate" a click on the tab.
So you will use an attribute selector to find the anchor having a href corresponding to the hash...
And click it.
window.onload = function () {
if (location.hash) {
window.scrollTo(0, 0);
$("a[href='"+location.hash+"']").click(); // Add this!
}
};

Refresh parent window from child with multiple parent window using javascript

I have tree window (first-> second -> third). I want to reload second by closing third one. But after closing third one the first one getting refresh. I had written following script.
window.onunload = refreshParent;
self.close();
function refreshParent() {
window.opener.location.reload();
}
Apply this script in third window's html file and see if it works. Also, make sure you give an unique name for all the windows.
<script>
window.onunload = closeMeAndRefreshOpener;
function closeMeAndRefreshOpener() {
window.opener.location.reload();
self.close();
}
</script>

Page exit via hyperlink not being catched by onberforeunload

I have an onberforeunload method which is correctly alerting the user when they are trying to close the tab or the browser using the follwoing code:
window.onbeforeunload = function(event) {
event.returnValue = 'Are you sure you want to leave/';
console.log(event.returnValue);
};
I have discovered that the onberforeunload is not being called when I click a hyperlink on the page. The warning message I want to display isn't appearing and the page is loading freely.
I have searched for many ways to create a popup for when a hyperlink has been selected but they all deal with one or groups of hyperlinks in div tags. I wish for a popup to display if any hyperlink is selected.
Why isn't onbeforeunload catching the exiting of the page through a hyperlink? Is my understanding of onbeforeunload wrong that it should be catching hyperlink exits?
UPDATE
I have updated the code to the following:
window.onbeforeunload = closeIT;
function closeIT() {
return 'here';
if(searchOnGoing){
return 'Ifs you leave the Youtube History page now the application will not finish';
}
};
It is still not working for hyperlinks and working for browser and tab closure. I am running this as part of a content script in a chrome extension which is injecting the content script into the page. Would this have an effect on it?
I also have an onunload following,i am wondering would this also have an effect on it?
window.onunload = function(event){
//Do something
}
Actually, it should trigger. Do you catch the event somehow via a click-event-listener? Anyway, you could show an alert with help of a click-event listener.
Following code-snippet is copied from a similar question: how to detect if a link was clicked when window.onbeforeunload is triggered?
Here the question was, in contrast, how to prevent the beforeunload event when links are clicked.
var link_was_clicked = false;
document.addEventListener("click", function(e) {
if (e.target.nodeName.toLowerCase() === 'a') {
link_was_clicked = true;
}
}, true);
window.onbeforeunload = function() {
if(link_was_clicked) {
link_was_clicked = false;
return;
}
//other code here
}
The following snippet correctly uses onbeforeunload.
<body onbeforeunload="return myFunction()">
Click me!
<script>
function myFunction() {
return "Please don't go!\nThis works beautifully!";
}
</script>

Printing a web page using just url and without opening new window?

<html>
<head>
<script type="text/javascript">
var URL = "http://localhost:8000/foobar/";
var W = window.open(URL); **Note1**
W.window.print();
</script>
</head>
<p> Print ME...............</p>
</html>
I am using this script to print a webpage.
My views render this page and The JS take care all other things.
But I dont want to open new window for that. So, What should I use instead of window.open(URL) so no new window opens. Similarly, I don't want to open new window for print function.So, Whenever I render this page it do all stuff on the same page. No new window, No new tab. How can I achieve this. I google but nothing seems working.
You can do this using a hidden iFrame (I'm using jquery for the example):
function loadOtherPage() {
$("<iframe>") // create a new iframe element
.hide() // make it invisible
.attr("src", "/url/to/page/to/print") // point the iframe to the page you want to print
.appendTo("body"); // add iframe to the DOM to cause it to load the page
}
This will load the page you want to print. To print, you can add javascript code to the print page so that it gets printed after loading:
$(document).ready(function () {
window.print();
});
This will print the page without showing a new window. I've tested this in IE8,9 and Google Chrome, so I'm not sure if this works for Safari or Firefox, though.
There's a nice example on MDN how to do that with a hidden iframe https://developer.mozilla.org/en-US/docs/Printing#Print_an_external_page_without_opening_it
In reference to #andragon's answer. updated on top of it.
You can do this using an iFrame(Not hidden because hidden iFrame prints the blank page in latest versions of browsers. You can hide after the print is triggered)
function loadOtherPage(link) {
$("<iframe class='printpage'>") // create a new iframe element
.attr("src", link) // point the iframe to the page link you want to print
.appendTo("body");
}
This will load the page link you want to print.
On loading the print page link you can call javascript.
$(document).ready(function () {
window.print();
});
window.onafterprint = function () {
$('.printpage', window.parent.document).hide();
}
This will print the page from the same window and onafterprint Event is triggered when a page has started printing, or if the print dialog box has been closed
window.parent.document is to hide the iFrame block on the parent page.
I'm using Asp .net core with razor html as view, in this case I have used window.print() to print the page then used window.onafterprint to back to the page where used want to be redirected.
You can use ViewBag to replace the "/NewSales" URL.
NOTE: window.onafterprint will be called whenever user clicks Cancel/Submit/Print button in that pop-up.
$(document).ready(function () {
window.print();
window.onafterprint = function () {
window.location.href = "/NewSales";
}
});
function CallPrint() {
var prtContent = document.getElementById('main');
var WinPrint = window.open('', '', 'width=800,height=650,scrollbars=1,menuBar=1');
var str = prtContent.innerHTML;
WinPrint.document.write(str);
WinPrint.document.close();
WinPrint.focus();
}
Call this javascript function on Print button click."main" is the id of the div which we have to print without opening into new window.I want to notify that this will print the current page div.
Try and rever in case of any issue.
Thanks,
Gourav

Javascript link does not work when open in new tab or window

I have some link like this
<a href="#" onclick=aFunction(this)>link</a>
Where "aFunction" opens a link in the current window.
When this link is clicked, it is ok and opens the link, but if it is clicked as "open in new tab" or "open in new window", it does not work.
aFunction code is something like this:
aFunction(object)
{
object.href = "www.mypage.com"
}
Using the context menu for "open in new X" does not trigger the click event. If your code is there simply to set the new window's address, then you'd be far better off doing
link
instead. It won't validate, but it'll degrade better.
Why would you do something like this instead of just putting the url in the href parameter? You can still do other stuff on the click event if you want by adding a click handler even if you use the href attribute properly.
link
<script type="text/javascript">
$(function() { // using jQuery for simplicity, but other methods work, too.
$('a').click( function() {
// do some other stuff
});
});
</script>
Note that by not returning false (or using preventDefault()), we allow the normal click action to take place once our javascript has run.
Use this:
<a id="mylink" href="#">link</a>
<script>
function changeUrl()
{
if( /* some condition here */ )
document.getElementById('mylink').href = "www.someurl.com";
else
document.getElementById('mylink').href = "www.someotherurl.com";
}
</script>
In this way the "Open link in a new tab" of the browser does not brake.
If the condition changes when the user touches something on the page you need to call changeUrl whenever he touches something.
Please find below a function to open url in new window:
function load() {
var load = window.open('http://www.domain.com','','scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,location=no,status=no');}

Categories