Page 1 of 3 123 LastLast
Results 1 to 10 of 29

Thread: Popup window when clicking on calendar event

  1. #1
    Join Date
    Jul 2012
    Location
    Dorset, England
    Posts
    65
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question Popup window when clicking on calendar event

    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

    The CSS is at calendar.css

    The JS is at calendar.js

    The events js is at events.js

    The clean htm is at calendar.htm

    I found this bit of code.

    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)

    Code:
    elA.setAttribute('href', eventLink);
    with

    Code:
    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

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    690
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there Mark Ellis,

    I pointed out in this previous thread of yours..



    ...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:-



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

    coothead

  3. #3
    Join Date
    Jul 2012
    Location
    Dorset, England
    Posts
    65
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by coothead View Post
    Hi there Mark Ellis,

    I pointed out in this previous thread of yours..



    ...that...



    Although one member did amusingly write...



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



    Source:-



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

    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.

  4. #4
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Question No calander visible at the url you posted.

    Quote Originally Posted by Mark Ellis View Post
    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

    The CSS is at calendar.css

    The JS is at calendar.js

    The events js is at events.js

    The clean htm is at calendar.htm

    I found this bit of code.

    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)

    Code:
    elA.setAttribute('href', eventLink);
    with

    Code:
    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).
    Thanks,

    Bud

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jul 2012
    Location
    Dorset, England
    Posts
    65
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    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=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

    events.js calendar.css calendar.js

    and the html code is

    Code:
    <!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/...new-popup.html

    Mark
    Last edited by Mark Ellis; 08-19-2012 at 05:22 PM.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

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

    Code:
    http://hosting.gmodules.com/ig/gadgets/file/106457770858869818781/calendar.xml
    Whose contents are:

    Code:
    <?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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Jul 2012
    Location
    Dorset, England
    Posts
    65
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    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

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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:

    Code:
     . . . 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
    Last edited by jscheuer1; 08-20-2012 at 09:47 AM. Reason: improve code, later fix typo (green)
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •