Embedding javascript

For questions and problems with the CMS core. This board is NOT for any 3rd party modules, addons, PHP scripts or anything NOT distributed with the CMS made simple package itself.
iNSiPiD

Embedding javascript

Post by iNSiPiD »

How do I do it? I've tried adding it to the Head Tags section but of course Smarty is giving errors as a result of all the {} tags it's finding.

Is there a way to embed it easily?? A Smarty tag, perhaps?

UPDATE: the answer
Works a treat. Maybe a crash course in Smarty tags would be of benefit.
Smarty recognizes several types of tags, some of which can be within JavaScript or CSS code. Since you do not want Smarty to try to parse the JavaScript or CSS as Smarty template code, you need to surround the offending code in {literal} {/literal} tags. Example:

{literal}

// code here



/* css here */

{/literal}
willow2007

Thanks for the info

Post by willow2007 »

:D Your info on the"literal" tags for smarty did just the trick to solve my problem! Thank you so much for posting. :P
Ted
Power Poster
Power Poster
Posts: 3329
Joined: Fri Jun 11, 2004 6:58 pm

Embedding javascript

Post by Ted »

This one is answered in the FAQ, but I'm going to sticky it anyway.
Anonymous

Re: Embedding javascript

Post by Anonymous »

Well I embed the following 'moreover' script within 'literal' tags and get an error:

Code: Select all

<!-- Start Of Moreover.com News Javascript Code --><style type='text/css'>
	
	.morehl {
		font-family: MS Sans Serif, Geneva, sans-serif !important;
		font-size: 15px !important;
		color: #ff6600 !important;
		font-weight: bold !important;
		font-style: normal !important;
		text-decoration: underline !important;
	}	
	
	A:link.morehl, A:vlink.morehl, A:alink.morehl {
		color: #ff6600 !important;
	}
	
	.moresrc {
		font-family: Arial, geneva, sans-serif !important;
		font-size: 9px !important;
		color: #999999 !important;
		font-weight: normal !important;
		font-style: normal !important;
		text-decoration: none !important;
	}
	
	A:link.moresrc, A:vlink.moresrc, A:alink.moresrc {
		color: #999999 !important;
	}
	
	.moreti {
		font-family: Arial, geneva, sans-serif;
		font-size: 9px;
		color: #999999;
		font-weight: normal;
		font-style: normal;
		text-decoration: none;
	}
	
	.morehlt {
		font-family: MS Sans Serif, Geneva, sans-serif;
		font-size: 15px;
		color: #ff6600 !important;
		font-weight: bold;
		font-style: normal;
		text-decoration: none;
	}	
	</style><__script__ LANGUAGE="Javascript">
  <!--
  // the array global_article is used to allow multiple categories
  var global_article = new Array();
  var global_article_counter = 0;
  var article = null;
  var early_exit = true;
  var moreover_text = 0;
  
  function load_wizard()
    {
    
    var newwin = window.open("","clone","resizable,scrollbars");
    document.forms.moreover_clone.submit();
    return true;
    }
  // -->
  
    </__script><__script__ LANGUAGE="JavaScript" src="http://p.moreover.com/cgi-local/page?query=%22instant%20messaging%22&n=15&o=js">
    </__script><__script__ LANGUAGE="Javascript">
  <!--
  // load global_article array with articles from category
  if (article != null && (article.length > 0))
    {
    early_exit = false;
    for (var article_counter = 0; article_counter < article.length; article_counter++)
      {
      global_article[global_article_counter] = article[article_counter];
      global_article[global_article_counter].url += "&w=2215722";
      
      global_article[global_article_counter].url += "' TARGET='_blank";
      global_article[global_article_counter].document_url += "' TARGET='_blank";
      global_article_counter++;
      }
    }
  // -->
    </__script><__script__ LANGUAGE="Javascript">
  <!--
  if (global_article.length == 0)
      {
      if (early_exit)
        {
        document.write("<CENTER>Please reload this page to view the headlines</CENTER>");
        }
      else
        {
        document.write("<CENTER>Sorry, no articles matched your search criteria</CENTER>");
        early_exit = true;
        }
      }
  // -->
    </__script></p>
    <table cellpadding=4 cellspacing=0 border=0 width='100%'><tr bgcolor='#ffffff'><td>
  
  
  <__script__ LANGUAGE="Javascript">
  <!--
  if (!early_exit)
  {
  var wizard_brand			= "moreover";
  var webfeed_heading 			= "";
  var width 				= "100%";
  var numberofarticles 			=  global_article.length;
  var cluster_border 			= "0";
  var time_display 			= "Yes";
  var cell_spacing 			= "0";
  var cell_padding 			= "1";
  var time 					=  new Array(global_article.length);
 
  
  // Start loop for articles
  for (var counter=0; counter < numberofarticles; counter++)
    {
	
	if ((counter == (global_article.length - 1)) && moreover_text == 1) 
      {  
      time_display = "No";
      }
	
	// Print out the headline
    document.write("<a href='"+global_article[counter].url+"' class='morehl'>");
    document.write(global_article[counter].headline_text+"...</a><br>");
	
    
      // Print out the source
        if ((counter != (global_article.length - 1)) || moreover_text != 1)
        {
		
		document.write("<A HREF='"+global_article[counter].document_url+"' + class='moresrc'>");
        document.write(global_article[counter].source+"</A>");
        
		}
    
	
    // Print out reg/sub/prem if appropriate
    if (global_article[counter].access_status == "sub" || global_article[counter].access_status == "reg" || global_article[counter].access_status == "prem")
      {
      document.write("<span class='moreti'> </span><A HREF='"+global_article[counter].access_registration+"' class='moresrc'>");
 	  document.write(global_article[counter].access_status+"</A>");
      }
	  
    // Print out the harvest time
    if (time_display == "Yes")
      {
      // Make a new date object
      time[counter] = new Date(global_article[counter].harvest_time);
      time[counter].setHours(time[counter].getHours() - (time[counter].getTimezoneOffset() / 60 ));
	  document.write("<span class='moreti'>  "+time[counter].toString()+"<br> <br></span>");
      } 
    else
      {
      document.write("<br> <br>");
      }

    } // End of article loop
  

  // Start of clone button code //
  // NOTE: DO NOT REMOVE any of the code in this section //
  document.write("<FORM METHOD='POST' ACTION='http://www.moreover.com/cgi-local/wizard_welcome.pl' target='clone' name='moreover_clone'>");
  document.write("<INPUT TYPE='hidden' NAME='parent_code' VALUE='2215722'>");
  document.write("<INPUT TYPE='hidden' NAME='clone_system' VALUE='c'>");
  document.write("<INPUT TYPE='hidden' NAME='system' VALUE='c'>");
  document.write("<INPUT TYPE='hidden' NAME='heading_font_size' VALUE=''><INPUT TYPE='hidden' NAME='webfeed_heading' VALUE=''>")
  document.write("<INPUT TYPE='hidden' NAME='cluster_width' VALUE='100%'><INPUT TYPE='hidden' NAME='time_display' VALUE='Yes'>")
  document.write("<INPUT TYPE='hidden' NAME='cluster_cellspacing' VALUE='0'><INPUT TYPE='hidden' NAME='number_of_headlines' VALUE='15'>")
  document.write("<INPUT TYPE='hidden' NAME='source_time_fgcolor' VALUE='999999'><INPUT TYPE='hidden' NAME='search_keywords' VALUE='Wi-Fi'>")
  document.write("<INPUT TYPE='hidden' NAME='source_time_font_size' VALUE='9'><INPUT TYPE='hidden' NAME='headline_italic' VALUE='false'>")
  document.write("<INPUT TYPE='hidden' NAME='source_time_italic' VALUE='false'><INPUT TYPE='hidden' NAME='headline_bold' VALUE='true'>")
  document.write("<INPUT TYPE='hidden' NAME='source_time_bold' VALUE='false'><INPUT TYPE='hidden' NAME='headline_bgcolor' VALUE='ffffff'>")
  document.write("<INPUT TYPE='hidden' NAME='cluster_name' VALUE='query=Wi-Fi&o=js'><INPUT TYPE='hidden' NAME='source_time_underline' VALUE='false'>")
  document.write("<INPUT TYPE='hidden' NAME='headline_fgcolor' VALUE='ff6600'><INPUT TYPE='hidden' NAME='heading_display' VALUE='Yes'>")
  document.write("<INPUT TYPE='hidden' NAME='headline_font_size' VALUE='15'><INPUT TYPE='hidden' NAME='headline_font' VALUE='MS Sans Serif, Geneva, sans-serif'>")
  document.write("<INPUT TYPE='hidden' NAME='source_time_font' VALUE='Arial, geneva, sans-serif'><INPUT TYPE='hidden' NAME='wizard_brand' VALUE='moreover'>")
  document.write("<INPUT TYPE='hidden' NAME='cluster_cellpadding' VALUE='1'><INPUT TYPE='hidden' NAME='cluster_layout' VALUE='<BR>'>")
  document.write("<INPUT TYPE='hidden' NAME='headline_underline' VALUE='true'><INPUT TYPE='hidden' NAME='cluster_border' VALUE='0'>")

  document.write("</FORM>");
  // End of clone button code //

  // ************************************************************************************
  // This code is subject to the copyright and warranty restrictions detailed at 
  // http://www.moreover.com/wizard_copyright.html
  // Copyright 2000 Moreover.com Inc. All rights reserved.
  // *************************************************************************************
  } 
  // -->
  </__script>
<__script__ LANGUAGE="Javascript" SRC="http://p.moreover.com/dr/wizard/wizard_text.js"></__script>
<__script__ LANGUAGE="JavaScript1.2">
setTimeout("window.location.reload(true)", 900*1000); // refresh time in ms
  </__script>
  </td></tr></table>
  <!-- End Of Moreover.com News Javascript Code -->

Code: Select all

Fatal error: Smarty error: [in preview:cmspreviewtnK0kE line 322]: syntax error: unrecognized tag 'literal' (Smarty_Compiler.class.php, line 576) in /var/www/html/www.secure-instant-messaging.com/lib/smarty/Smarty.class.php on line 1088
I presume that the comment tags upset Smarty, but that is only a guess. As I am not familiar with this package I would appreciate some advice.
Richard

(Above 'moreover' post is mine)

Post by Richard »

Sorry, I wasn't logged in!

In fact I am surprised that Guest submissions are allowed.
iNSiPiD

Embedding javascript

Post by iNSiPiD »

Richard, I suspect you're trying to wrap this entire snippet in literal tags AND that it appears in the Content section of the page?

If so, there's your problem. You've got CSS, JavaScript and HTML all bundled together.
  • All your CSS should appear in your template's CSS field.
    - All your HTML should go into the page's Content section.
    - And all your page-specific JavaScript should ideally appear - between {literal} tags in the Head Tags section of the same Edit Content screen.[/list:u]

    You can also call your JavaScripts as external files like so:

    Code: Select all

    <__script__ language="javascript" src="moreover.js"...>
Richard

Embedding javascript

Post by Richard »

I've put the CSS stuff in the 'proper' place and it works now, thanks.

It's not what I would call "simple" though. Ideally, I should be able to add such text without Smarty or anything else complaining about it.

Still, this is a free CMS, so I suppose that I shouldn't grumble either!



Cheers ...
Woudloper

Re: Embedding javascript

Post by Woudloper »

Although this is a sticky message I would like to question something about the embedding of javascript. Is it also possible to work with an external javascript file and put that specific file in e.g. a template folder and refer to it? Or should I always include the javascript inside the template (which is stored in the database) and put the {literal} arround this?
iNSiPiD

Re: Embedding javascript

Post by iNSiPiD »

Woudloper, this exampls is only for inline javascript that needs to be treated literally.

You can and should still use "<rel link=..." to include external Javascript source.
Woudloper

Re: Embedding javascript

Post by Woudloper »

iNSiPiD wrote: Woudloper, this exampls is only for inline javascript that needs to be treated literally.

You can and should still use " source[/b] the code of the page isn't so unclear to read...
iNSiPiD

Re: Embedding javascript

Post by iNSiPiD »

You CAN use external Javascript files. Just use the usual HTML for this. It doesn't require {literal} tags.

EsquireX

Re: Embedding javascript

Post by EsquireX »

iNSiPiD wrote: You CAN use external Javascript files. Just use the usual HTML for this. It doesn't require {literal} tags.

I thank you for your explanation on the use of javascript with cmsms. Now, because I would like to try this myself...
iNSiPiD wrote: Woudloper, this exampls is only for inline javascript that needs to be treated literally.

You can and should still use "" didn't work, corrent?
iNSiPiD

Re: Embedding javascript

Post by iNSiPiD »

Hi EsquireX, "" will work just fine in your templates and doesn't need to be wrapped.

You can also use the php inlcude once statement.
Annette

Re: Embedding javascript

Post by Annette »

THANK YOU SO MUCH!!!

I have been tearing my hair out on and off over the past few days trying to get a graphic html/javascript navigation structure into the head of the template.

I posted a question about it in the layout section but the suggestions I received still didn't enable it to work.

The literal tags worked!!!

I still have one problem though. The navigational top headers are 2 separate graphic/html files and in my non cms pages they sit on top of each other without any problems. Within the cms pages for some reason there is a gap between the graphics. The code is exactly the same and I've played with many settings in the stylesheets etc to try and get rid of this but with no luck.

Does anyone have any suggestions. Here is a non cms page http://www.rivapetz.com.au/Home.php and here is the cms page http://www.rivapetz.com.au/cms/index.php

PLEASE NOTE: This site is still under construction.

I would appreciate any help....thanks
cyberman

Re: Embedding javascript

Post by cyberman »

Annette wrote: Does anyone have any suggestions. Here is a non cms page http://www.rivapetz.com.au/Home.php and here is the cms page http://www.rivapetz.com.au/cms/index.php
Hmm, I see on both sites the same mistake - there are two beginning tags. Please correct it then a will look once again  ;) ...
Locked

Return to “CMSMS Core”