Topic Closed
Alistair
32 Posts
Hi is it possible to do this? I'd like to dynamically change the title if possible any info?
10 months ago#11562

juergen
1.5K Posts
55.9K Downloads
16 Plugins
design, web development & visual effects

Sure. There are lots of ways to do such things, too many tor a single answer.

So, the questions merely are

Which title?

A) the contents of the <title> HTML tag
B) your Website title as set in Configuration -> Settings -> Title, which will be part of the <title> tag and will be the site branding in most themes by default.
C) a page's internal variable $page->title, which will derive from a page's given name/label and be part of the URL
D) anything else qualifying as 'title', such as a certain heading in the content

Change dynamically …

E) where? (server-side or client-side)
F) based on which source
 

10 months ago#11563

Alistair
32 Posts

Sorry but my replyto gishpuppy.com has crashed or closed down and I didnt get your reply. All fixed now.

In reply:

As I see it, in settings/title, thats text only, but thats where the script should be entered. I have a variable date/time/field which should go in the title.

It should change server-side depending on current net time. Source is as follows:

<p><script type="text/javascript">
// create Date object for current location
d = new Date();
// convert to msec since Jan 1 1970
localTime = d.getTime(); //gives your own local time
// obtain local UTC offset and convert to msec
localOffset = d.getTimezoneOffset() * 60000;
// obtain UTC time in msec
utc = localTime + localOffset;
// obtain and add destination's UTC time offset
// for example, Auckland which is UTC + 13 hours
offset = 13;  
auckland = utc + (3600000*offset);
// convert msec value to date string
nd = new Date(auckland);
hours=nd.getHours();
document.write("<strong>Local time:</strong> " + nd.toLocaleTimeString());
if (hours>8 && hours<18) {document.write(" Call Alistair on +xxxxxxxxxx");}
</script></p>

Edited: 10 months ago#11564

juergen
1.5K Posts
55.9K Downloads
16 Plugins
design, web development & visual effects

No, the script doesn't have to be there.
We can change the content of any DOM node from anywhere.

I'd do it this way:

Open your template.php file (probably [typesetter installation root]/themes/Bootswatch_Scss/template.php)

paste this code at the very end of the file

<?php
  $page->jQueryCode .= '

    if( isadmin ){
      return; // don\'t manipulate page content when logged in, otherwise it might get saved.
    }

    CallAlistair = function(){

      var where_to_write = ".my_selector";

      var utc_time = Date.UTC();
      var auckland_time = utc_time + (3600000 * 13);
      var auckland_hours = new Date(auckland_time).getHours();
        if( auckland_hours > 8 && auckland_hours < 18 ){
          $(where_to_write).html(
            "Call Alistair on <a href=\'tel:+64123456789\'>+64 123 456 789</a>"
          );
        }else{
          $(where_to_write).html(
            "Dare not call Alistair right now! ;o)"
          );
        }
    };

    CallAlistair(); // immediate call
    setInterval(CallAlistair, 900000); // repeat every 15 minutes
  ';
?>

.my-selector is the selector identifying the DOM node where JS will write the message.

If you really want to change the browser <title> element (= the text of the current tab), the selector will actually be 'title'.
In this case you will have to omit the <a ...></a> tag, which is not possible in the <title> element

If you want to write, let's say, to a heading somewhere in the page content, edit the section and change CKEditor to Source mode.
Add <h2 class="call-me-message-area">&nbsp;</h2> where you want it.
Use '.call-me-message-area' as selector in the script.

Save template.php and log out of Typesetter (or use a 2nd private window) to see the result.

 

 

Edited: 10 months ago#11569

Alistair
32 Posts
Thanks I did try that adding to Bootswatch_Scss template.php but nothing happened. Likely Im not understanding what you mean by .my-selector is the selector identifying the DOM node where JS will write the message.
10 months ago#11573

juergen
1.5K Posts
55.9K Downloads
16 Plugins
design, web development & visual effects

Sorry, probably definitely my fault.

Please change

$("where_to_write").html(
  ...
);

to

$(where_to_write).html(
  ...
);

in the script code (both occurences). I should actually test my code before posting.

(I edited my post in this regard)
(now tested and working)

Edited: 10 months ago#11574

Alistair
32 Posts

Hi no problem, but Im still sure Im doing something wrong; Ive edited template.php in Bootswatch_Scss, adding your code to the very end after closing   </body>
</html>

nothing happens, Title remains the same.

I dont understand the way your code works in that how it replaces the content of page title in Settings/General/Title.

 

10 months ago#11575

juergen
1.5K Posts
55.9K Downloads
16 Plugins
design, web development & visual effects
What do you exactly mean with 'Title'?
10 months ago#11576

juergen
1.5K Posts
55.9K Downloads
16 Plugins
design, web development & visual effects
Try using '.navbar-brand' as selector string. But don't use the <a href=\'tel:+...>   </a> parts because this element is already a link.
10 months ago#11577

Alistair
32 Posts

Tried that ".navbar-brand" and ".title" and "title" and removed the <a > </a> ;nothing. dont concern, its no major thanks heaps for trying.

//What do you exactly mean with 'Title'?

I mean thats where the dynamic text should go; found under Settings/Config/General/Title which is currently TheHomeNZ Waihi Beach NZ (phone +mymobile)

 

10 months ago#11578

juergen
1.5K Posts
55.9K Downloads
16 Plugins
design, web development & visual effects

Tried that ".navbar-brand" and ".title" and "title"

Too bad. With '.navbar-brand' and Bootswatch themes you should actually have seen a change. Hard to tell what went wrong.

… found under Settings/Config/General/Title

Well ... that's the server-side configuration value - we really should not change that value dynamically.
If we did, Googlebot and other crawlers could add it to their index based on their visit time. Then your phone number would appear very prominently in the search result lists. I think that's not what you want.


 

10 months ago#11579

mabu
290 Posts
3.8K Downloads
4 Themes
8 Plugins

Although I did not want to interfere as a layman, but one question:

You  use <?php $page->jQueryCode .= 'if( !isAdmin ){....

* If you would add it to  the settings.php of the template, something like

global $page ; $themeDir = dirname($page->theme_path);
if( !common::LoggedIn() ) {     $page->head_js[] = $themeDir.'/title.js';  }

  [  the code in a title.js :  $(function() { ........... });   ]

and in title.js add the code to a node - could be a solution nearer to php, and You can also test whether the title.js is excluded when logged in ?

* CAN You show us a site - or a subdomain-  where You put it into Typesetter.( Your above domain is not Typesetter but for...)  ------------------------

P.S. Perhaps somebody knows the difference between

if( \gp\tool::LoggedIn() ){      ---   and  -------  if( common::LoggedIn() )  {

Edited: 10 months ago#11580

Alistair
32 Posts

Its up with code here: view-source:https://thehomenz.co.nz/

There is a gpeasy daterange picker which has no business unless Im wrong, on this page embeded in the code I was wondering if that could be corrupting the extra .navbar-brand section.

Al.

10 months ago#11581

juergen
1.5K Posts
55.9K Downloads
16 Plugins
design, web development & visual effects

OK, I just debugged it on-site and changed a few things.

Please use this code:

<?php $page->jQueryCode .= '

  CallAlistair = function(){

      var where_to_write = ".navbar-brand";

      var utc_time = Date.now();
      var auckland_time = utc_time + (3600000 * 13);
      var auckland_date = new Date(auckland_time);
      var auckland_hours = auckland_date.getHours();
      // console.log(auckland_hours);

      if( auckland_hours > 8 && auckland_hours < 18 ){
          $(where_to_write).html(
            "TheHomeNZ Waihi Beach - "
            + "Call Alistair mobile +64211748741"
          );
        }else{
          $(where_to_write).html(
            "TheHomeNZ Waihi Beach - "
            + "Local Time: "
            + auckland_hours
            + ":"
            + (auckland_date.getMinutes() < 10 ? '0' : '') 
            + auckland_date.getMinutes()
          );
        }
    };
  CallAlistair(); // immediate call
  setInterval(CallAlistair, 900000); // repeat every 15 minutes

'; 
?>

 

FYI:

    $(where_to_write).html(
      "Local Time: ".auckland_hours);
    }

In JavaScript, the concatenation operator is + (plus) while in in PHP it is . (dot)
In JS the dot operator is the "object property accessor".

Certainly the most common error when switching between PHP and JS.

10 months ago#11582

Alistair
32 Posts

Much better, but still not work. This does thanks for ideas:

<?php
date_default_timezone_set("Pacific/Auckland");

$page->jQueryCode .= '

  CallAlistair = function(){
      var where_to_write = ".navbar-brand";
      utc_time = Date.now();
      var auckland_time = utc_time;
      var auckland_date = new Date(auckland_time);
      var auckland_hours = auckland_date.getHours();
      var auckland_minutes = auckland_date.getMinutes();
      // console.log(auckland_hours);

      if(auckland_hours > 8 && auckland_hours < 18)
      {
          $(where_to_write).html(
            "TheHomeNZ Waihi Beach - "
            + "Call Alistair mobile +64211748741"
          );
        }
        else{
          $(where_to_write).html(
            "TheHomeNZ Waihi Beach - "
            + "Local Time: "
            + auckland_hours
            + ":"
            + auckland_minutes);
        }
    };
  CallAlistair(); // immediate call
  setInterval(CallAlistair, 900000); // repeat every 15 minutes

';
?>

10 months ago#11583

juergen
1.5K Posts
55.9K Downloads
16 Plugins
design, web development & visual effects
date_default_timezone_set("Pacific/Auckland");

That's for PHP only, it will have no influence on client-side JavaScript at all.

When I paste my latest version into the JS console on your site, it appears to work.I get my local time + 13 hours which only seems to work.
When I paste your version, I get my local time (currently ~ 22:30) and so do you (~ 10:30)

But we're getting closer…

<?php
$page->jQueryCode .= '

  CallAlistair = function(){

      var where_to_write = ".navbar-brand";

      var utc_time = Date.now();
      var utc_date = new Date(utc_time);
      var tz_offset = new Date(utc_time).getTimezoneOffset();
      var auckland_time = utc_time + (60000 * tz_offset) + (3600000 * 13);
      var auckland_date = new Date(auckland_time);
      var auckland_hours = auckland_date.getHours();
      // console.log(auckland_hours);

      if( auckland_hours > 8 && auckland_hours < 18 ){
          $(where_to_write).html(
            "TheHomeNZ Waihi Beach - "
            + "Call Alistair mobile +64211748741"
          );
        }else{
          $(where_to_write).html(
            "TheHomeNZ Waihi Beach - "
            + "Local Time: "
            + auckland_hours
            + ":"
            + (auckland_date.getMinutes() < 10 ? '0' : '')
            + auckland_date.getMinutes()
          );
        }
    };
  CallAlistair(); // immediate call
  setInterval(CallAlistair, 900000); // repeat every 15 minutes

';
?>

I can feel it ;)

Edited: 10 months ago#11584

juergen
1.5K Posts
55.9K Downloads
16 Plugins
design, web development & visual effects

Sometimes I should really read more carefully when the always excellent MDN says…

The Date.now() method returns the number of milliseconds elapsed since January 1, 1970 00:00:00 UTC.

… which means, when read carefully, since 1970/01/01 UTC *and not* since 1970/01/01 in UTC.

Other docs, namely the official specs rather put it this way:

Date.now();

The now function return a Number value that is the time value designating the UTC date and time of the occurrence of the call to now.

It is hard to bear in which enchanting beauty this sentence shines! Grrr ....

So, javascript's Date.now() gives the local time (in milliseconds) while PHP's time() gives the current UTC time (in microseconds).
Completely logical, isn't it? I'm pretty sure I got it once and for all. Well, at least until tomorrow morning.

Conclusion:
Spending too much time in a just UTC+1 time zone may convey a false sense of security, javascript-date-wise.

10 months ago#11585

Alistair
32 Posts
Excellent but

(auckland_date.getMinutes() < 10 ? '0' : '')

use of ' ' code conflict here.

I changed it for readability to this:

 var auckland_minutes = auckland_date.getMinutes();

            + (auckland_minutes < 10 ? "0" : "")
            + auckland_minutes

note the quote/"

Pretty much perfect thanks Juergen. I wondered about the variable if(isadmin) found the function under jar files. But it doesnt seem to return anything under php; does it need to be globally declared?

Regards from NZ,

Alistair.

 

10 months ago#11586

juergen
1.5K Posts
55.9K Downloads
16 Plugins
design, web development & visual effects

I wondered about the variable if(isadmin)

I removed the if condition from the last versions because the .navbar-brand element is nothing that can be edited on-page so it's safe to execute the script while logged-in.

isadmin is a global JavaScript boolean variable defined by Typesetter.

The PHP side doesn't have an equivalent variable but you can always call the method \gp\tool::LoggedIn() which will return true or false.

10 months ago#11587

juergen
1.5K Posts
55.9K Downloads
16 Plugins
design, web development & visual effects

@mabu:

if( \gp\tool::LoggedIn() ){      ---   and  ---  if( common::LoggedIn() )  {

there is no practical difference.
 

\gp\tool\Some::Thing is the more recent way to access our functions / variables / objects. See PHP namespacing

The older way using e.g. common::LoadComponents('fontawesome'), gpOutput::GetHead(), etc might become deprecated or even removed some time. But there is no hurry yet.

 

Edited: 10 months ago#11588

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Luzern (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Website * ...

Find out more about our Provider Spotlight

Log In

  Register