{"id":60398,"date":"2023-08-13T03:01:07","date_gmt":"2023-08-12T17:01:07","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=60398"},"modified":"2023-08-12T21:59:39","modified_gmt":"2023-08-12T11:59:39","slug":"event-calendar-new-window-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/event-calendar-new-window-tutorial\/","title":{"rendered":"Event Calendar New Window Tutorial"},"content":{"rendered":"
\"Event<\/a>

Event Calendar New Window Tutorial<\/p><\/div>\n

Onto yesterday’s Event Calendar Remembered Tutorial<\/a>‘s “Mystery Dilemma”<\/font> …<\/p>\n

\nBut, there’s an inherent weakness with the design, we’ll go into more into the future.\n<\/p><\/blockquote>\n

… well … it’s a perennial for us, regarding how if you stick with clientside thinking, only, web applications, when the amount of data to remember starts adding up, the “get arguments approach” ( ie. use ? and & arguments at the address bar ) is restricted by length restrictions regarding URL lengths.<\/p>\n

Rather than jump to PHP serverside ideas just yet, we wanted to show some more ideas, staying with “clientside only thinking”, today, as well as improving the UX (user experience<\/a>) and small steps forward regarding styling.<\/p>\n

Okay then, regarding the idea to remember an Event in Month form, when there is a lot of data, and staying “just clientside”, we’ve coded for a “New Window” idea, albeit not as memorable as the default “Remember in Bookmark” possible for your smaller datasets. However, in saying that, we found that within this new window, with our Google Chrome web browser, we could …<\/p>\n

    \n
  1. bring up Context Menu with a right click or two finger gesture within the popup window webpage content …<\/li>\n
  2. pick Inspect option …\n<\/li>\n
  3. be in Elements tab of your Web Inspector … and …\n<\/li>\n
  4. highlight top <html> tag …\n<\/li>\n
  5. Context Menu with a right click or two finger gesture …\n<\/li>\n
  6. pick Copy -> Copy outerHTML … so that …\n<\/li>\n
  7. your Event Calendar for your Events in Month choice is in a text buffer … ready for you to …\n<\/li>\n
  8. Paste into a Text Editor that Events in Month webpage to store (perhaps in a MAMP<\/a> local Apache\/PHP\/mySql web server environment, where you can further look at and develop your own ideas)<\/font>\n

    <\/li>\n<\/ol>\n

    The user is told when the switch to “New Window” compromise becomes active, decided upon by reconstructing the proposed address bar URL regularly and when too long …<\/p>\n


    \n function formanalyze() {
    \n var fio=document.getElementsByTagName('form')[0];
    \n var delm='?';
    \n var fioih=fio.innerHTML;
    \n var fions=fioih.split(' name=\"');
    \n var testurl=documentURL.split('?')[0].split('#')[0];
    \n for (var ijk=1; ijk<fions.length; ijk++) {
    \n testurl+=delm + fions[ijk].split('\"')[0] + '=' + encodeURIComponent(document.getElementById(fions[ijk].split('\"')[0]).value);
    \n delm='&';
    \n }
    \n setTimeout(formanalyze, 3000);
    \n if (eval('' + testurl.length) >= 750) {
    \n if (document.getElementById('remember')) { document.getElementById('remember').value='New window'; }
    \n if (document.getElementById('rememberme')) { document.getElementById('rememberme').value='New window'; }
    \n if (document.getElementById('remembermoi')) { document.getElementById('remembermoi').value='New window'; }
    \n } else {
    \n if (document.getElementById('remember')) { document.getElementById('remember').value=document.getElementById('remember').value.replace(\/^Remember$\/g, 'Remember via Bookmark'); }
    \n if (document.getElementById('rememberme')) { document.getElementById('rememberme').value=document.getElementById('rememberme').value.replace(\/^Remember$\/g, 'Remember via Bookmark'); }
    \n if (document.getElementById('remembermoi')) { document.getElementById('remembermoi').value=document.getElementById('remembermoi').value.replace(\/^Remember$\/g, 'Remember via Bookmark'); }
    \n }
    \n return eval('' + testurl.length);
    \n }
    \n<\/code><\/p>\n

    … the form submit buttons are reworded accordingly.<\/p>\n

    Another idea from this blog thread’s inspiration …<\/p>\n

    <\/img><\/p>\n

    … we’ve now addressed in today’s “second draft” is allowing for an optional bold Event Day Blurb<\/font> Title, available to the user via a new dropdown “Bold Title” option.<\/p>\n

    And, how can we do more with colour, to help the right bits stand out, and be consistent? We thought …<\/p>\n