showing javascript dynamic content and text side by side - html

I want to show a JavaScript based dynamic content and some text beside each other in HTML.
To show them side by side, I am using a border-less table .
The problem is that I am able to see the result correctly when the HTML code is ran in Html Code Tester but when seen live on my domain , the adjacent columns are not on the same level. The columns are placed one above other . I have used the valign attribute to make sure the dynamic content fits in the row height but that doesn't help too.
The Webpage (with incorrect preview) is this and its source code in the git repository is this.
The code used for testing with HTML Code Tester can be found here

Related

HtmlRenderer & PDFsharp add footer to each page

I am trying to put a copyright symbol at the bottom of each page when the PDF is generated but I cant seem to get it to work. How would I go about doing such a thing? I am using HtmlRenderer and PDFsharp, take my HTML body and convert it to a PDF file that the user can download.
I don't want to put a watermark over the top as it is a legal document for paying customers, I just wanted the little copyright symbol company name and date at the bottom.
Is there a way of saying to PDFsharp to use a say template PDF file that has a footer with the info at the bottom or is there a way of setting it in the physical code?
I Worked it out if you add styling position:fixed and then a top position because it doesnt understand bottom it will add a text to every page wherever you align it to.
If anyone would like more information on this I've linked a pull request which details the use of position: fixed to create header/footers.
There is also a class in the generator itself PdfGenerateConfig which will allow you to create corresponding margins in the document.
https://github.com/ArthurHub/HTML-Renderer/pull/41
I don't know if HtmlRenderer allows to add headers and footers that will be repeated on every page. HtmlRenderer is not part of PDFsharp.
With PDFsharp it is simple to open a document, loop through the pages and draw a string at the bottom of each page.
The Watermark sample can be used to get started - just remove the Transformation part and draw the text at the bottom of the page.
Similarly you can draw a PDF page (template) over each page of an existing PDF document.
A third option: Draw the text on an XForm and draw that XForm on each page. Overkill for a simple text string, but could reduce file size for a complex footer.
Watermark sample:
http://pdfsharp.net/wiki/Watermark-sample.ashx
XForms sample:
http://pdfsharp.net/wiki/XForms-sample.ashx

Identical HTML not rendering the same

I have a program that let's people design web pages graphically. Then hitting Publish creates an html file that is supposed to be an exact copy of what they created. The elements created by the editor are HTML elements. Publish then gathers up all the elements that have been created and for each one adds it to a string with
canvasOuterHTML += clone$[0].outerHTML;
So all the styles, text, etc., get put on the string. This string, along with some other information is written to the .html version of the page, and when this .html is loaded into a browser the browser displays the page!
But something is expanding the published page vertically. I've created the simple page below to illustrate. The first image is the page in the editor. The second image is what the html displays in the browser.
I'm completely stumped because the HTML and CSS for the two markups is exactly the same, so how can one be higher? I can't even think of a mechanism that would do that. Does anyone have any ideas? Thanks.

SandCastle show different result when generating HTML Help 1(chm) and WebSite(HTML/ASP.NET)

With Sandcastle, when I generate the documentation for 1 project, I want it to show the result for 2 of the 22 namespaces that my solution have.
If I generate it for HMTL Help 1(chm) it works perfectly, as you can see on the attached images. (see first image link)
If I generate it for WebSite(HTML/ASP.NET) it gives me an index page that all it does is redirecting me for the first namespace documentation file. But I wanted to show the 2, just like the chm. (see second image link)
Images:
Working Perfectly HTML Help 1 (chm)
Not working as required Website (HTML/ASP.NET)
They are all there, you just have to expand the topmost node. The new VS2013 presentation style website output is modelled after the MSDN content so each page contains a TOC fragment rather than the whole TOC. If you've got conceptual content or have enabled the root namespace container option, it will show them on the default page. It's a side effect of how the TOC fragments are generated. For the next release, I'm going to look into having it expand the root node by default if the specific condition is met that causes it to show as it currently does in the collapsed state.

How to move html source code to a different location in page using dreamweaver

I need to move a selection of html code to a different location in a web page
Using find and replace in dreamweaver does not work
For example:
<div id="popups">
<div id="pop1">
<div class="clean-graypop" id="pop1content"><b>Vector</b><br/>
A living carrier, such as an insect, that transports an infectious agent from an infected individual to a susceptible individual.</div>
</div></div>
I want to move this code to a completely different location (in our case, bottom of the html page).
I have hundreds of html pages with these styled popup divs but differing text content.
I want to be able find them all and move them
I found that I can target these divs using regex code /*[\w\W]**/
This works if I use comment tags to surround the code of interest. The regex code basically find the text within those comment tags
However, there no way in find&replace that I know where I can move the found source code to a different location
Basically I want a find and move action
Any ideas
Thanks
Jon

Using microdata on elements created after during page load

I need to add microdata snippets to a list that is being populated by a script during the page load.
My code is written in a way that I have the basic list element in my html code, and it gets duplicated as the list is populated (this happens once when the page is loaded).
I try to add microdata to every element in the list, but when I use google's rich snippet tool it seems that it only reads the basic html snippet and not the whole list after it was populated. I do the exact same trick on a different page and there it seems to work fine (meaning i get a list of videoObjects each containing the data inserted to it) [edit: the second page was created on server side, this is why it worked on it].
Any idea how to get around problem?
As a general rule, search engines do not read content dynamically created by JavaScript. So anything your script dynamically creates will be invisible to Google. If you want them to index this content you need to create this content server side.