How to place tracking code on all pages in Ektron? - javascript

I need to place some javascript tracking code for Google remarketing near the footer in the body tags but I am new to Ektron and unsure of which file to access to put it into.

Place whatever Google code you have inside the body element on your MasterPage(s). (*.master)
If you don't have a MasterPage, create one and have each of your templates use it. It's not difficult to swap out the html and head elements on each template and and add the MasterPageFile attribute to each Page directive.
If you have multiple MasterPages, do this for each one, or create a "master" MasterPage and then nest each existing MasterPage inside the new one.
If you'd like to give content manager's control over what is placed, add a ContentBlock server control where you want the script to go and pull in the Google code provided the ID of the ContentBlock (whatever it turns out to be). Note: scripts will likely need to be added via the "source" view (ContentDesigner) when editing content in the Workarea to avoid the script being encoded.

Related

How can I use anchor links pointing within an iframe?

I have a html document loaded in an iframe on a website.
The document has a table of contents and clicking on any of the links jumps to the appropriate part of the document.
Navigation is supposed to work from a sidebar that is specified by a separate XML.
Adding a link to said XML displays the HTML in the iframe:
href="source_folder/file.html"
Issue is, when I try to add a link to a specific section, like href="source_folder/file.html#_Toc0123" it just jumps back to the top of the HTML.
In the usual use-case, the sections are all separate HTML files, and get linked in the corresponding XML. Issue being I don't want to go through the hassle of separating multiple large files into individual HTMLs.
Any idea on what I'm missing? Or is this simply not possible?
(I didn't build the original site, but if there is an attribute that governs it, feel free to let me know where to look for it)
Thanks!

how to get the contents of an iframe that is dynamically placed

I have a program (called 'PersonalBrain') that exports to html using very complicated javascript (based on Prototype). The script places an iframe inside a div in a main html file. The result is that a searchengine cannot index the content of the iframe. Changing the script is not an option. My idea is now to somehow get the content of the iframe and place this inside another div in the main html - in such a way that this is indexable (and then hide it with css). How would I do that? It needs to be in plain javascript (or maybe php?).
BTW: the id of the iframe is also placed dynamically.
A live example can be found on https://www.wideopenwindows.be

cURL returns full HTML via AJAX - how to display to user?

I am building a Wordpress plugin to display a list of jobs to a user pulled from a recruiting platform API. On click of a job, a cURL request is sent to the API that pulls the job details as a full HTML page (the online job advertisement). I have everything working fine in terms of pulling the HTML, but I cannot figure out how to display it to the user.
How can I either:
Open a new tab to display the HTML pulled from the AJAX request
or
Open the full HTML within a div on the same page (i.e. a modal)
I would prefer to open the HTML in a new page, but don't know how to use jQuery to do this... Opening within the page in a modal is also fine, but as far as I understand iFrames (which I would rather not use anyway), you have to pass a url (and I simply have the full markup). Is there a way to display this within a page, perhaps using canvas? It carries its own links to CSS and Javascript that need to apply only within that sub-page.
EDIT:
As a clarification, I know that I can simply place the HTML within the page. My issue is that it is a full page. This means it has a <head> <body>, and its own CSS links. Just putting it in the page messes with the rest of the CSS and produces invalid HTML.
This is what I already have:
$.post(ajaxurl, data, function(response) {
$('.sg-jobad-full').html(response);
});
It places the response within the page perfectly well... but it messes up the page by introducing a <body> within a <body> and competing CSS.
If you put the response in a <div>, it will mess the markup because css/js/meta definitions may not be put into the <body>.
If there is a way to retrieve the data without the markup already beeing in, you could parse the data and let it print via a javascript, which is the method I'd prefere.
According to your comment, you should really go with iframes, all other methods will alter your markup to have <html> tags inside <html>, which is very bad practice.
Iframes can be styled just like a <div> element, and it is realy not dirty to use iframes for the purpose you mentioned (it does not load from a foreign host, it is not hidden, it does not track).
<iframe class="job-offers-plugin" src=".../wp-content/plugins/yourplugin/getJobs.php">
</iframe>
Put some style into it like width;height;padding;margin;overflow; place it where you like..
This helps you with the databse:
Using WPDB in standalone script?
Add permalinks to your plugin script:
http://teachingyou.net/wordpress/wordpress-how-to-create-custom-permalinks-to-use-in-your-plugins-the-easy-way/
If you get the full HTML in an jQuery.ajax(...) call, you can always just show it in a certain div on your page.
$.ajax({
success: function (resp){
// resp should be your html code
$("#div").html(resp);
}
});
You can use the $(selector).html(htmlCode) everywhere you want. You can insert it into modals, divs, new pages...
If you have to inject a whole HTML page you can:
strip the tags you don't need
or
use an iframe and write the content to that iframe: How to set HTML content into an iframe
iframes aren't my favourite thing... but it's a possibility

Load pages via AJAX and execute javascript and CSS

I've been searching for a while now, but I can't figure out how to load an entire page via AJAX and still execute all javascript and css.
Mostly I just end up with the plain text without any CSS.
Is there a way to do this? I tried jQuery.get, jQuery.load and jQuery.ajax, but none really work like that.
I have a different solution. You may try it with an iframe. Use jQuery to append an iframe script including all relevant codes into some part of your page (like some div). This may do it for you including CSS, like;
$('<iframe src="your_page.html"/>').appendTo('#your_div');
Or you may try something like;
$('<iframe src="your_page.html"/>').load(function(){
alert('the iframe is done loading');
}).appendTo('#your_div');
I have solved similar problem as following.
Download the webpage over ajax
Iterate it over and find any <script> and </script> tags
Get content from within these tags as text
Create new <script> element and insert there the code
Append the tag to your webpage
Another thing is you will need to somehow call the script..
I have done it this way:
I set standardized function names like initAddedScript callback which I am calling after appending the script to the page. Same as I have deinitScript called when I do not need the code (and its variables,..) anymore.
I must say this is awful solution, which likely means you have bad application architecture so as I have had:)
With css is it the same, but you do not need any handlers. Just append the style tag to your documents head.
If the page you load doesn't have any style data, then the external stylesheets must have relative paths that are not correct relative to the invoking document. Remember, this isn't an iFrame - you aren't framing an external document in your document, you're combining one document into another.
Another problem is that loading your complete page will also load the doctype, html, head, and body tags - which modern browsers will cope with most of the time, but the results are undefined because it's not valid HTML to jam one document into another wholesale. And this brings me to the third reason why it won't work: CSS links outside of the head section aren't valid, and the misplaced head section caused by your haphazard document-in-document collage.
What I'd do for compliance (and correct rendering) is this, which would be implemented in the Success callback:
Copy all link elements to a new jQuery element.
Copy the contents of all script in the head section
Copy the .html() contents from the loaded document's body tag
Append the link elements (copied out in step 1) to your host document's head
Create a new script tag with your copied script contents and stick it in the head too
Done!
Complicated? Kind of, I guess, but if you really want to load an entire page using AJAX it's your only option. It's also going to cause problems with the page's JavaScript no matter what you do, particularly code that's supposed to run during the initial load. There's nothing you can do about this. If it's a problem, you need to either rewrite the source page to be more load-friendly or you could figure out how to make an iFrame suit your needs.
It's also worth considering whether it'd work to just load your external CSS in the host document in the first place.
I suppose you are looking for something like this:
your page div --> load --> www.some-site.com
After a quik search the closest solution seems to be the one by "And": Load website into DIV
You have to run a web server and create a proxy.php page with this content:
Then your JQuery load() function should be like this:
$("#your_div_id").load("proxy.php?url=http://some-site.com");
NB. I have tested this solution and it should not load all the CSS from the target page, probably you'll have to recreate them. For example the image files stored on the remote server will not loaded, I suppose due to authentication policy.
You will be also able to view only the target page without the possibility to browse the target site.
Anyway I hope this could be a step forward to your solution.
Get your entire webpage as text using ajax
document.open();
document.write(this.responseText);
document.close();
OR
document.documentElement.outerHTML = this.responseText;
But you need to change the path of css and js pages in original webpage if the resulting webpage is in another directory.

Dynamically loading CSS and JavaScript using Prototype

I have a classic ASP application that I've been constantly trying to modularize. Currently, almost all pages are divided in to two pages:
an outer page that contains the layout, header, sidebar, footer
an inner page that contains ASP code
The outer pages use dreamweaver templates so updating layout and replicating changes is easy. The inner pages are managed by me. Now here is the problem:
I had to add a lightbox to one page, I chose Lightbox 2 which requires Prototype. I ended up adding Prototype on every page, assuming that sooner or later I'll upgrade all pages, forms, ajax requests and other javascript to use Prototype. I've now added two other plugins -- Modalbox and Protofade; each with a pair of .JS and .CSS files. Since I'll be using these three plugins on specific set of pages I am wondering if I can load the required CSS and JS files dynamically. I do not want to access the document head and add include files there (i.e. by bloating the <head> tag with about a dozen <script> and <link> tags), I'll have to do this from inside a DIV where all ASP code is supposed to go.
You can add scripts dynamically by adding script elements to the document; details and sample code on the this page from Unofficial Prototype & script.aculo.us wiki. E.g.:
var element;
var script;
element = /* ...grab the element you want to add to; I'd use $$('head')[0] */;
if (element) {
script = new Element('script', { type: 'text/javascript', src: 'dynamic.js' });
element.appendChild(script);
}
Adding stylesheet links should be essentially the same. Although that page has you adding to the head, you've said you don't want to do that (though I'm not clear why not, since you're doing it dynamically on the user's machine), but it should still work regardless of where you add them.

Categories

Resources