Code injection for head and body tags

This is an open forum for any mojoPortal topics that don't fall into the other categories.

This thread is closed to new posts. You must sign in to post in the forums.
9/1/2012 3:15:25 AM
Gravatar
Total Posts 11

Code injection for head and body tags

For my project I need to inject code that will appear on all web pages or selectively on pages that might belong to a "genre", ie: by category or content.

On those pages I need to include:

- A tagline before the DOCTYPE statement
- Extra meta tags
- Extra code in the BODY tag

Does MojoPortal use inserts/includes/templates for these sections that I can customise? If so, where are they located?

 

 

9/1/2012 5:31:23 AM
Gravatar
Total Posts 216
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: Code injection for head and body tags

Hi Kendo,

I'm not sure if mojoPortal has support for that - I'm sure somebody who knows will chip in - but I know you can do that with a little jQuery.
You'll need a way of selecting those specific pages that you want the content to show up on, so you'll want to add a body class.

Next, edit and add this to a javascript file in your skin, or inside a <script> tag in your layout.master

$(document).ready(function() {
   if ($(".pagebody").hasClass("yourclass") {
          $(".pagebody").append("yourhtml");
          $("html title").insertBefore("yourhtml");
   }
});

Inside the if statement, anything added inside of $("") will be the element you want to add to, and anything inside .append("") will be the content you're adding. If you add HTML with attributes or classes, you'll need to use an "\" before each quote.

Example: If you want to add a new div inside the body, you'd write:
$(".pagebody").append("<div class=\"myclass\">My div content</div>");

- Be aware that the .append() method will add your div to the very bottom of the body in this case. If you want it at the top, select the first element inside the body and then use the .insertBefore() element instead.

Be aware that adding meta tags with jQuery is probably a bad idea. But I hope this helped anyways,
-Isaac

9/1/2012 6:38:08 AM
Gravatar
Total Posts 18439

Re: Code injection for head and body tags

Meta tags can be added from page settings (or in layout.master file of your skin if they are applicable to multiple pages).

For the doctype and body, you can make those changes in the layout.master file of a skin. In mojoPortal you can enable per page skins from site settings, then a dropdown list of skins will appear in page settings, so you could assign different skins to different pages if they need different things in layout.master.

9/1/2012 12:28:32 PM
Gravatar
Total Posts 11

Re: Code injection for head and body tags

Ok, thanks. I located layout.Master and can work with that, except that I noticed that anything that I hard code into the body tag gets overwritten. For example layout.Master quotes...

<body class="pagebody" id="Body" runat="server">

But the html produced reads...

<body id="ctl00_Body" class="pagebody">

If I add any code to the layout.Master version it gets excluded, so I am wondering where to add my code for it to appear in the BODY tag.

Also, I see mention that AppSettings in user.config will over-ride settings in web.config... does that also apply to modules or should all modules be applied from web.config?

For example I want to add...

<system.webServer>
     <modules>
          <add name="FilterName" type="Name.NameFilterModule" />
     </modules>
     <urlCompression doStaticCompression="false" />
</system.webServer>

 

9/1/2012 12:56:26 PM
Gravatar
Total Posts 18439

Re: Code injection for head and body tags

Maybe if you explain what exactly you are trying to add to the body element (and why) I will be able to suggest something.

Only <appSettings section can have overrides in user.config anything else must be in web.config

9/1/2012 1:42:37 PM
Gravatar
Total Posts 11

Re: Code injection for head and body tags

For the body tag I need to add some JavaScript like...

onLoad="function();"

9/1/2012 1:45:56 PM
Gravatar
Total Posts 216
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: Code injection for head and body tags

Don't add that to the body.

Instead, put this in the head.

<script type="text/javascript">
$(document).ready(function() {
     // Stuff to do when the page loads
});
</script>

9/1/2012 1:48:47 PM
Gravatar
Total Posts 216
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: Code injection for head and body tags

Although actually, I suggest adding a file to your skin called "scripts.js", and then adding a tag "<portal:SkinFolderScript ID="sfs1" runat="server" ScriptFileName="script.js" AddToCombinedScript="true" />" to your layout.master under the main scriptloader.

This is especially handy if you have a lot of javascript/jQuery to run, because it makes it easier to read the layout.master file.

9/1/2012 2:08:16 PM
Gravatar
Total Posts 18439

Re: Code injection for head and body tags

I was going to suggest the same thing as Isaac. jQuery is baked in to mojoPortal making it very easy to wire in javascript, there is no need to hard code it on the body element.

You can even add javascript directly in the html content feature using html view of the editor or you can disable the editor from settings so it uses a plain text area if you find that the editor cleanup messes up your javascript.

9/1/2012 3:08:07 PM
Gravatar
Total Posts 11

Re: Code injection for head and body tags

The JS concept sounds good to me, except where I might want change the DOCTYPE statement according to browser type. I could probably do this using JavaScript but it must be far from ideal considering that it would be running client side script "before" loading the DOCTYPE declaration.

I tried adding an if statement to layout.Master but it trashes the page layout, ie:

<%

if (Request.Browser.Type.Contains("Firefox") {}
%>

Yet adding this code works ok...

<%= Request.Browser.Type %>

9/1/2012 3:51:11 PM
Gravatar
Total Posts 18439

Re: Code injection for head and body tags

You should not add code directly in layout.master.

What you can do is implement a custom server control that renders the doctype according to your logic and then embed the control in the layout.master in place of the raw doctype.

However, I really cannot see any benefit to changing the doctype based on the browser type. The doctype should reflect the markup in the page. You must have some unusual requirement to be doing something like that.

You must sign in to post in the forums. This thread is closed to new posts.