Popup window when clicking on calendar event

[Mark Ellis]

I'm trying to get the events in a calendar to appear in a popup window, rather than in a new tab. But everything I try results in the calendar itself not appearing.

Calendar is at www.dorsetdog.com/test (http://www.dorsetdog.com/test)

The CSS is at calendar.css (https://sites.google.com/site/dorsetdogshow/calendar.css)

The JS is at calendar.js (https://sites.google.com/site/dorsetdogshow/calendar.js)

The events js is at events.js (https://sites.google.com/site/dorsetdogshow/events.js)

The clean htm is at calendar.htm (https://sites.google.com/site/dorsetdogshow/calendar.htm)

I found this bit of code.



$(document).ready(function() {
$('#Popup').click(function() {
var NWin = window.open($(this).prop('href'), '', 'height=900,width=900');
if (window.focus)
{
NWin.focus();
}
return false;
});
});


But the calendar author said that it would not allow every event to appear in a new popup, so to change (which is around line 380 ish)


elA.setAttribute('href', eventLink);

with



elA.setAttribute('href', 'javascript:;');
_Event.add(elA, 'click', function() {
showCalendar(_prevYearMonth(yearmonth));
var newWin = window.open(eventLink, '', 'height=900,width=900');
if (window.focus) {
newWin.focus();
}
return false;
});


And I've got nowhere

Any help appreciated

[coothead]

Hi there Mark Ellis,

I pointed out in this previous thread of yours..

Help - CSS not changing html - grrrrr (http://www.dynamicdrive.com/forums/showthread.php?70012-Help-CSS-not-changing-html-grrrrr)

...that...


I was unable to view your page and that "Google" was the probable cause.
There are probably some procedures that you have omitted to do. ;)

Although one member did amusingly write...


Must be just you coothead

...I have since received this information from the "Horse's mouth"...



Work together and share

Our permission settings let you designate owners, viewers and collaborators (meaning they can edit pages) for your site.
And you can make your Google Sites available to just a few people, your entire organization, or the world.


Source:-

http://www.google.com/sites/overview.html

Apart from me, you may risk losing many more potential visitors by not rectifying this situation. :eek:

coothead

[Mark Ellis]

Hi there Mark Ellis,

I pointed out in this previous thread of yours..

Help - CSS not changing html - grrrrr (http://www.dynamicdrive.com/forums/showthread.php?70012-Help-CSS-not-changing-html-grrrrr)

...that...



Although one member did amusingly write...



...I have since received this information from the "Horse's mouth"...



Source:-

http://www.google.com/sites/overview.html

Apart from me, you may risk losing many more potential visitors by not rectifying this situation. :eek:

coothead

Coothead, thanks again for your input. I'm not dismissing what you are saying because I said before about people who use Tiscalli/Talk Talk having problem. However, let me assure you that many people can and do visit my site.

There does seem to be an issue with access to various sites, and this seems to be based around where the service provider accesses servers - rather than individuals accessing web addresses.

Thankfully, my site is not a financial site - just an information site

You may be able to access the site by its true name of https://sites.google.com/site/dorsetdogshow/

Google analytics shows the site as having over 400 viewers regularly returning over the dog show season.

[ajfmrf]

I'm trying to get the events in a calendar to appear in a popup window, rather than in a new tab. But everything I try results in the calendar itself not appearing.

Calendar is at www.dorsetdog.com/test (http://www.dorsetdog.com/test)

The CSS is at calendar.css (https://sites.google.com/site/dorsetdogshow/calendar.css)

The JS is at calendar.js (https://sites.google.com/site/dorsetdogshow/calendar.js)

The events js is at events.js (https://sites.google.com/site/dorsetdogshow/events.js)

The clean htm is at calendar.htm (https://sites.google.com/site/dorsetdogshow/calendar.htm)

I found this bit of code.



$(document).ready(function() {
$('#Popup').click(function() {
var NWin = window.open($(this).prop('href'), '', 'height=900,width=900');
if (window.focus)
{
NWin.focus();
}
return false;
});
});


But the calendar author said that it would not allow every event to appear in a new popup, so to change (which is around line 380 ish)


elA.setAttribute('href', eventLink);

with



elA.setAttribute('href', 'javascript:;');
_Event.add(elA, 'click', function() {
showCalendar(_prevYearMonth(yearmonth));
var newWin = window.open(eventLink, '', 'height=900,width=900');
if (window.focus) {
newWin.focus();
}
return false;
});


And I've got nowhere

Any help appreciated

I saw your page with the calendar missing-the center area had something about developement and no calendar.And the link to the "clean html" took me to this page-https://sites.google.com/site/dorsetdogshow/calendar.htm?attredirects=0 which was a download for something at google and I was reluctant to use it.

Your links are not trust worthy to me because of the way you posted them as to hide the location(google in this case).

[jscheuer1]

I don't think you can. At least not via javascript. That calendar is in an iframe on a different domain. Javascript doesn't work cross domain.

Essentially what you have is a calendar widget. Unless it allows you to configure that behavior with a parameter that you pass to it somehow, then it's very likely impossible to. I'm sure you've already configured other things about it, colors for instance. Where's the documentation for that? If I had a link to the documentation I might be able to find the option - if it exists that would allow for a new window instead of a new tab.

[Mark Ellis]

John. I have today learnt how to put html, css and js into a Google sites pages without using an iframe. http://support.google.com/sites/bin/answer.py?hl=en&answer=2500646

So the calendar on-line will be coming out of that iframe once I get it working on my laptop. The only problem with this method is that the JS and CSS is all in the same html box as the html code within the Google sites page. (example being the 8 navigations in the centre of http://www.dorsetdog.com/dog-shows-and-showing).

One cannot upload html files into the server direct, and cannot access the HEAD area of any page - hence the need for iframes or html boxes within the Sites pages :( Basically, everything to one does or links is directly into the BODY

Uploaded 3 of the files, but this forum won't let me upload the html file. So the three attachments are here

4682 4683 4684

and the html code is



<!DOCTYPE HTML>
<html lang="en"><head>
<meta charset="utf-8" />
<title>Calendar</title>

<script type="text/javascript" src="calendar.js"></script>
<link rel="stylesheet" href="calendar.css" type="text/css" />

</head>

<body>
<script src="events.js" type="text/javascript"></script>

<div id='myCalendarContainer'></div>

</body>
</html>


The true address of the dorsetdog.com website is at https://sites.google.com/site/dorsetdogshow/

The original calendar info and code is at http://ilsen.zxq.net/calendar/index.html

The suggested popup code is from http://jquerybyexample.blogspot.com/2012/05/open-link-in-new-tab-or-new-popup.html

Mark

[jscheuer1]

I was taking a closer look at this and the widget is controlled by:


http://hosting.gmodules.com/ig/gadgets/file/106457770858869818781/calendar.xml

Whose contents are:


<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="calendar" />
<Content type="html"><![CDATA[
<!DOCTYPE HTML>
<html lang="en"><head>
<meta charset="utf-8" />
<title>Calendar</title>

<script type="text/javascript" src="https://sites.google.com/site/dorsetdogshow/calendar.js"></script>
<link rel="stylesheet" href="https://sites.google.com/site/dorsetdogshow/calendar.css" type="text/css" />


</head>
<body>

<script src="https://sites.google.com/site/dorsetdogshow/events.js" type="text/javascript"></script>


<div id='myCalendarContainer'></div>

</body>

</html>
]]></Content>
</Module>

If you have access to that file, or the javascript files mentioned in it, something could possibly be worked out using javascript.

[jscheuer1]

Putting it in an HTML box as you call it may or may not help. If you cannot add any scripts to the head or body of the page, that doesn't get us anything. If you can add external script tags, or on page script code, and this HTML box is actually code on the page, it could work out.

[Mark Ellis]

Just modified my last post, as uploaded the js and css files to this thread - and copied in the short html code for the calendar.

This page http://www.dorsetdog.com/dog-shows-and-showing uses the html box successfully

The xml file you refer to is the file that I created in order to create the iframe that is currently used by the calendar in the test page - as no one can access the head section of any Google Sites pages. Pain I know, but it is free hosting

[jscheuer1]

Why do you want to add jQuery? None of your pages use it now, at least none that I see. And that page with the HTML box doesn't have a calendar on it.

You seem to imply that you have access to events.js - if so it could be edited to include at the end:


. . . Description: 'Corfe Castle',
eventLink: 'http://www.dorsetdog.com/september-diary#09mgc',
},

{ eventDate: 20120923,
eventDescription: 'Mosterton',
eventLink: 'http://www.dorsetdog.com/september-diary#09mos',
},

]);
myCalendar.showCalendar();
(function(){
var addEvent = (function(){return window.addEventListener? function(el, ev, f){
el.addEventListener(ev, f, false);
}:window.attachEvent? function(el, ev, f){
el.attachEvent('on' + ev, function(){f.call(el);});
}:function(){return;};
})();
function setNew(){
var events = document.getElementById('myCalendarContainer').getElementsByTagName('a'), i = events.length;
while(--i > -1){
if(events[i].target === '_blank'){
addEvent(events[i], 'click', function(e){
e = e || event;
if(e.preventDefault){e.preventDefault();}
e.returnValue = false;
window.open(this.href, this.target, 'top=150,left=200,width=600,height=500,scrollbars,resizable');
return false;
});
}
}
}
function makeNew(){setTimeout(function(){setNew();}, 500);}
addEvent(window, 'load', makeNew);
})();

The browser cache may need to be cleared and/or the page refreshed to see changes.

Oh, BTW - that final red comma in the array of events will cause problems in some browsers, get rid of it

[Mark Ellis]

We seem to be getting a little off track here. Sorry, my fault. I'll try to ask again. Please ignore the website as it is causing too much confusion.

The question that I have tried to asked is. In the attached calendar.js file - what code do I need to change and where in order for that JS file to produce a popup instead of a new tab.

The JS file is too long to paste into here in one post

4685
4686
4688

The html code is



<!DOCTYPE HTML>
<html lang="en"><head>
<meta charset="utf-8" />
<title>Calendar</title>

<script type="text/javascript" src="calendar.js"></script>
<link rel="stylesheet" href="calendar.css" type="text/css" />

</head>

<body>
<script src="events.js" type="text/javascript"></script>

<div id='myCalendarContainer'></div>

</body>
</html>


Thanks

[Mark Ellis]

I saw your page with the calendar missing-the center area had something about developement and no calendar.And the link to the "clean html" took me to this page-https://sites.google.com/site/dorsetdogshow/calendar.htm?attredirects=0 which was a download for something at google and I was reluctant to use it.

Your links are not trust worthy to me because of the way you posted them as to hide the location(google in this case).

I've removed the last comma as per John's suggestion - maybe you can see the calendar now. What browser do you use?

And I've attached the files to the posts, which I hope you would trust to download. It won't let me attach html files to the posts though.

[jscheuer1]

I think events.js is the place to add the code as outlined in my previous post:



. . . eventLink: 'http://www.dorsetdog.com/september-diary#09mgc',
},

{ eventDate: 20120923,
eventDescription: 'Mosterton',
eventLink: 'http://www.dorsetdog.com/september-diary#09mos',
}

]);
myCalendar.showCalendar();
(function(){
var addEvent = (function(){return window.addEventListener? function(el, ev, f){
el.addEventListener(ev, f, false);
}:window.attachEvent? function(el, ev, f){
el.attachEvent('on' + ev, function(){f.call(el);});
}:function(){return;};
})();
function setNew(){
var events = document.getElementById('myCalendarContainer').getElementsByTagName('a'), i = events.length;
while(--i > -1){
if(events[i].target === '_blank'){
addEvent(events[i], 'click', function(e){
e = e || event;
if(e.preventDefault){e.preventDefault();}
e.returnValue = false;
window.open(this.href, this.target, 'top=150,left=200,width=600,height=500,scrollbars,resizable');
return false;
});
}
}
}
function makeNew(){setTimeout(function(){setNew();}, 500);}
addEvent(window, 'load', makeNew);
})();

BTW, I've not been having any problems viewing the pages. Try adding that code as shown to events.js, clear the browser cache and refresh the page. If it's still not working as desired, give me a link to the page.

[Mark Ellis]

I think events.js is the place to add the code as outlined in my previous post:



BTW, I've not been having any problems viewing the pages. Try adding that code as shown to events.js, clear the browser cache and refresh the page. If it's still not working as desired, give me a link to the page.

Thanks for your help, John. I inserted your code as shown into events.js and ran it as a stand alone on my pc and after uploading events.js to the website. In both cases the calendar failed to be created.

I'm working on this project as a stand alone unit on my laptop until I have it working. That is to say all 4 file in a separate folder on my laptop with no other input.

But I have also uploaded it and the webpage address for the test calendar is https://sites.google.com/site/dorsetdogshow/test

But one has to ignore that it is in an iFrame, because as the calendar proves, jquery is working across other locations due to the "Fake" head being in the xml file which is in a different location to the calendar.css, events.js, and calander.js

I just wish to know where to edit the calendar.js file. All the fun starts at about line 380 in the calendar.js file 4689

Mark

[jscheuer1]

It worked here. Upload it to the test page. Let's see if we can debug it.

[Mark Ellis]

It worked here. Upload it to the test page. Let's see if we can debug it.

Ok. I've uploaded the amended events.js file to the site. Thanks for your help.

[jscheuer1]

I made a typo in the one part I couldn't easily check locally, near the end:


addEvent(window, 'load' makeNew);

should be:


addEvent(window, 'load', makeNew);

The browser cache may need to be cleared and/or the page refreshed to see changes.

There still could be other problems, but that's the only thing that should be preventing the calendar from loading. Let's try it with that correction.

Added Later:

Or you could try out this alternative, which if it works would be better:


(function(){
var addEvent = (function(){return window.addEventListener? function(el, ev, f){
el.addEventListener(ev, f, false);
}:window.attachEvent? function(el, ev, f){
el.attachEvent('on' + ev, function(){f.call(el);});
}:function(){return;};
})();
addEvent(document, 'click', function(e){
e = e || event;
var t = e.target || e.srcElement;
if(t.target === '_blank' && t.parentNode.className === 'events'){
window.open(t.href, t.target, 'top=150,left=200,width=600,height=500,scrollbars,resizable');
if(e.preventDefault){e.preventDefault();}
e.returnValue = false;
}
});
})();

With the current test page error, I can't easily test it.

[Mark Ellis]

John

Thank you ever so much for your time and help. The original author has resolved the issue and it works really well now. There was a typo somewhere by the original author, which added to my cluelessness meant that it would never work

Attached is the updated calendar.js file 4691

What I need now is a code that will close the new window when someone clicks off or outside the new window :)

or will close it when hitting a button between each advert in the diary

[jscheuer1]

Here's where the new window is being set up now:


if (eventLink && eventLink != '') {
var elA = document.createElement('a');
elA.setAttribute('href', 'javascript:;');
_Event.add(elA, 'click', function() {
var newWin = window.open(eventLink, '', 'height=900,width=950');
if (window.focus) {
newWin.focus();
}
document.onclick = function(){try{newWin.close();}catch(e){}};
return false;
});
elA.innerHTML = eventDescription;
if (eventLinkTitle && eventLinkTitle != '')
elA.setAttribute('title', eventLinkTitle);
elEventBlock.appendChild(elA);
}

The added code should allow for clicking anywhere on the page to close it. You would have to test that. If it's in an iframe, it would be clicking anywhere within the iframe.

If you wanted instead to assign that to a button with an id of - say 'closeBut', you would do:


if (eventLink && eventLink != '') {
var elA = document.createElement('a');
elA.setAttribute('href', 'javascript:;');
_Event.add(elA, 'click', function() {
var newWin = window.open(eventLink, '', 'height=900,width=950');
if (window.focus) {
newWin.focus();
}
document.getElementById('closeBut').onclick = function(){try{newWin.close();}catch(e){}return false;};
return false;
});
elA.innerHTML = eventDescription;
if (eventLinkTitle && eventLinkTitle != '')
elA.setAttribute('title', eventLinkTitle);
elEventBlock.appendChild(elA);
}

Again, it would have to be tested. If the calendar is in an iframe, the closeBut would have to be in the iframe.

[Mark Ellis]

Tried the first option, and it self closed the window before it had even fully opened.

But I need the method to be click off the new window. There are links in the window that people will need to click on

Not tried the button method yet.

Calendar author suggested "modal" style <div> element, but not researched that yet.

[jscheuer1]

I'm not sure I understand:


But I need the method to be click off the new window.

If you mean you only want clicks in the new window to close it, then we don't need to modify the script at all. Code can be placed on the new window to close it when clicked. But if you do that, where would those links open? They could open in the parent window (the window or frame that has the calendar in it). This would go in the head of the page in the new window (needs testing):


<script type="text/javascript">
document.onclick = function(e){
e = e || event;
var t = e.target || e.srcElement;
while(t.parentNode){
if(t.tagName && t.tagName.toLowerCase() === 'a'){
self.opener.location.href = t.href;
self.close();
return false;
}
t = t.parentNode;
}
};
</script>

And/or it's possible to have all clicks in the calendar frame/window except the one that creates the popup to close the popup (also needs testing):


if (eventLink && eventLink != '') {
var elA = document.createElement('a');
elA.setAttribute('href', 'javascript:;');
_Event.add(elA, 'click', function() {
var newWin = window.open(eventLink, '', 'height=900,width=950');
if (window.focus) {
newWin.focus();
}
document.onclick = function(e){
e = e || event;
var t = e.target || e.srcElement;
if(e.t !== elA){
try{newWin.close();}catch(e){}
}
};
return false;
});
elA.innerHTML = eventDescription;
if (eventLinkTitle && eventLinkTitle != '')
elA.setAttribute('title', eventLinkTitle);
elEventBlock.appendChild(elA);
}

A modal is an option. That would be a little complicated. You would first have to pick a modal script and decide upon import method. Then set it up so that happens instead of a new window. And then figure a way to dismiss the modal when it's links are clicked, and determine where those links would open. If you use AJAX import as the import method, the rest should be fairly easy. Running scripts against the imported content could be tricky though. Whatever is done with a modal would need testing as well, perhaps extensive testing.

[Mark Ellis]

Hi there Mark Ellis,

I pointed out in this previous thread of yours..

Help - CSS not changing html - grrrrr (http://www.dynamicdrive.com/forums/showthread.php?70012-Help-CSS-not-changing-html-grrrrr)

...that...
...
Apart from me, you may risk losing many more potential visitors by not rectifying this situation. :eek:

coothead

Coothead hi

Do me a favour and try to access http://dorsetdog.com

I know that you previously had problems with accessing my site. I had access issues with a small number of people who used certain broadband providers, the worst one being talktalk customers.

But I found that search engines were still finding pages from my old site hosted by Microsoft, which I closed in April 2012. Dorsetdog started life on the Microsoft Office Live Small Business free website, until Microsoft wanted to start charging for the hosting. So I built the new site at Google sites.
As my domain name was purchased through Microsoft, they released it (and numerous others) to Melbourne IT

I then transferred the domain name to Domain Express in April 2012. But the search engines continued to find pages and the site map that had been on the old Microsoft site.

Turns out that Melbourne IT had retained DNS settings, which were conflicting with the correct settings at Domain Express. Numerous emails and Cancel DNS requests to Melbourne IT resulted in my receiving emails from Melbourne IT telling me that the domain was now hosted elsewhere. I even sent screenshots showing that DNS was still active at Melbourne IT.

In February 2013 I found that Melbourne IT had a page on Facebook. Facebook is a growing tool for righting wrongs :rolleyes: So I started attaching images to Melbourne IT's Facebook page, and 10 days later the Cancel DNS request was finally carried out.

It took a total of 311 days between my transferring the domain name and Melbourne IT cancelling the DNS management

4956 4960 4959

[coothead]

Hi there Mark Ellis,

unfortunately, I am still getting this message from Firefox...


Server not found


Firefox can't find the server at www.dorsetdog.com.



...and similar messages in my other test browsers. :eek:

coothead

[jscheuer1]

I'm not having any problem with it in any browser. Perhaps it's something relatively unique to your setup coothead. Any idea what that might be?

I do recall hearing a while back that the DNS servers at many ISPs were having problems with some sites. Most notably either facebook or it might have been flickr. I'm pretty sure it was facebook. Can you get on both of those?

In any case, in the network config somewhere you can change your DNS server. You don't have to use the one from your ISP. If you use Google's it fixes the problem.

So, in short, it's not necessarily just Google Sites and you don't have to use Google's DNS server to fix it, just one that can resolve the domain(s) that you're having a problem with.

Here's a vid on it:

http://www.youtube.com/watch?v=ldftSp2MSvY

More general information can be found by searching on these terms:

change dns server

[coothead]

Hi there John and Mark Ellis,

changing the dns server does indeed fix Mark's problem. ;)

I used...


Use the following DNS server addresses

Preferred DNS server 208.67.222.222
Alternative DNS server 208.67.222.220


Of course, being unfamiliar with this technology, after testing I returned the setting to...


Obtain DNS server address automatically


...as being able to visit http://www.dorsetdog.com/, other than a test, does not really concern me.

John, as you are more knowledge in all departments than I, what would your choice be, "automatic" or "preferred"?

Of course, that may be the wrong question to ask. :D

coothead

[jscheuer1]

I'm not all that more knowledgeable on this than anyone else. It's just something that came up a little while back. A friend of mine was having trouble accessing - I think it was her facebook account, but I'm not sure (maybe flickr or even twitter). Not being tech savvy (or at least not thinking herself to be), she was so proud because she had Googled it and fixed the DNS server thing herself, and was sort of boasting to me about it. I'd never heard of it. Looked into it a little. It seems a fine thing to do. Besides allowing you to access domains that your ISP's DNS cannot, it often will speed up your connection.

The basics appear to be:


Unless you use all numeric addresses, you need a DNS to the surf the web. It looks up the internet addresses (always numbers) from the Domain Names you and links on web pages feed it in the browser's address bar.


If you use automatic, it will be the one that your ISP provides. It might be slower, and/or less complete than other choices.


If you pick one, it can be better. The Google hosted DNS's (8.8.8.8 and 8.8.4.4) are thought to be quite good. The ones you chose, which I believe are OpenDNS, look good too.



Now you know everything I know about the subject.

[coothead]

This may be a useful tool...

Domain Name Speed Benchmark (https://www.grc.com/dns/benchmark.htm)
...that I found following John's interesting post about changing the DNS server address.


coothead

[jscheuer1]

That looks pretty useful. I would caution that unless it provides a way for you to average over - say a month or so, statistics on a given day probably will not reflect the pros and cons of the various DNS's you try. If it does, great. If not, well to get an accurate idea, you would have to record stats a few times each day for awhile, then average them to get a more reliable result.

[Mark Ellis]

Hi there Mark Ellis,

unfortunately, I am still getting this message from Firefox...


Server not found


Firefox can't find the server at www.dorsetdog.com.



...and similar messages in my other test browsers. :eek:

coothead

I'll put this issue to bed, coothead. I asked what internet provider you had, as certain providers had problems with my site. The main one was apparently Tiscali.

I've sorted the issue, thanks to Melbourne IT having a Facebook page.

The issue was that I had a Microsoft Office Live Small Business account with a free website. Microsoft then wanted to start charging for the hosting etc. Microsoft transferred all custom domain names to Melbourne IT, which is an international DNS system manager.

I then transferred my dorsetdog.com domain from Melbourne IT to Domain Express in 2012, and all the DNS settings were correct at Domain Express. Unbeknown to me until a couple of months ago, whilst Melbourne had transferred my domain - they still had DNs settings set to the old Microsoft site's server. So some internet providers were getting details for the old site instead of the new location.

Having contacted Melbourne numerous times, and submitted DNS management cancellation requests numerous times, I then found them on Facebook. A few snotty posts with some factual graphics attached and it was sorted in 10 days :rolleyes: