I don't know much css or html, so I have a question about taking html that looks like this:
html code paste and putting into another page.
The problem is when I just copy and paste this into a webpage is completely messes up the background (turns it black) and overwrites other settings. How can I take that exported html and css so that I can paste the code I exported from emacs into a webpage and not kill other settings?
Ideally it would appear just as it currently looks but in a little box inside the rest of the page.
Thanks.
You can use an IFrame
Put the desired HTML/CSS/etc in another file. Call this file2.html
In your main file, use an OBJECT element to embed this document.
<object data="file2.html" type="text/html">
View file2
</object>
This will create a "box" with your file inside. You can style the OBJECT element in any way you wish. Removing scrollbars, adjusting the width, etc.
If a browser does not support the OBJECT element, then they will see the link directly to the file.
You could also paste the code someplace like http://gist.github.com/ or http://pastie.org/ where they also give you some code to embed the code snippet in your site/weblog/etc.
You can see an example of the embedded code (for gist.github.com) here: http://github.com/blog/605-new-languages-highlighted
Related
I am writing a preview function to let user preview the HTML file they uploaded and do some minor editing. The HTML file will contain no Javascript and no external CSS. All CSS are either inside style tag or inline. Images, on the other hand, will always be external as we don't provide space for storing images.
iFrame is not a good solution, because:
The preview is before actually saving the content, so I cannot provide an URL for iFrame to load the page.
It is difficult to touch the element inside iFrame. As the user will be doing minor update in another text box showing the plain HTML, I will need to update the elements inside frequently.
However, if I just insert content into an <div> the repeated <html>, <head> and <body>tag will crash the page.
So, is there a way I can preview the HTML without iFrame?
if you dont want to have the main app to affect the styling of the preview, you need to use iframe. have you see iframe's content window? https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentWindow. this might be the answer you are looking for. So basically here you try to access the DOM of your iframe. give it a try!
preview = getYourIframeDom();
code = getYourHtmlCodeHere();
preview.contentWindow.document.open("text/html","replace");
preview.contentWindow.document.write(code);
preview.contentWindow.document.close();
I am trying to include this line of html into a sharepoint 2007 content section inside a page i have just created. I am the owner.
<link rel="stylesheet" type="text/css" href="/sites/gskglobal/mcLaren-partnership/Documents/live.css" />
I input this using Edit HTML Source on a piece of content (This was the only way i could find out how to input HTML directly).
When i click ok the styles display perfectly having already uploaded the css file.
When i click save it removes the entire link element and leaves me with no stylesheet.
i could put the styles in line, but i really don't want to do this.
N.B no erros are displayed only
Warning: The HTML source you entered might have been modified.
Both of those will work, however the CSS may get executed AFTER the SharePoint Page is rendered.
The short and simple way is to add the CSS file to any document library (Style Library too). Add the Link script above into a text file and upload that. Add a Content Editor Web Part to the page and through the settings, point it to the TEXT file with the script.
The CEWP part is executed during the HTML creation process when building the page thus the CSS gets executed with the header (like the rest of the CSS for SharePoint).
Try adding your .css file to your main web "Style Library"
You need only to publish your css file
Go to your all document view
find your file
publish
The best and easiest way I found to add any form of html into the document when adding a webpart simply add a form then edit the html as you would normally and this will no longer give you the
Warning: The HTML source you entered might have been modified.
It will just leave the markup in there without sharepoint stripping or editing your markup
Just wanted to make people aware that this is possible and maybe an option if you don't have access to the other suggests.
When I embed a set of SVG graphics elements inline into HTML I have access to e.g. a group, say a chesspiece, via its id-attribute and can make it clickable, draggable and so on. Very nice and straight forward.
Now I remove the SVG code from the HTML and put it into a separate file which I include via
<embed src=... />
into the HTML. This works with no apparent difference in the rendering, but now I don't have access to the group via its id-attribute any more. With
<object data=...></object>
it is the same, by the way.
What am I missing?
If you have your script in the html file, you want something like this...
document.getElementById("embed_or_object_id").getSVGDocument().getElementById("element_id");
I am having a header which it will be uniform in all the pages. I want to make it generic. So I want to include common header in every HTML Page.
When i checked for HTML includes i cameup with SSI which needs a server. My Requirement is I want to include HTML file in another WITHOUT a server.
The way I would do it would be to make a "hanger" div with a class of .header. Then put a <p> inside the div to put alt text into. Then in your main css stylesheet apply your header image as a background image, and negatively indent the text.
Example
.hanger {background-image:url(header.png); text-indent:-1000px;}
To resize the header all you would do is put a width and height on div.hanger.
Does this help?
I've never heard of including html in another html file. I think what you can trying to do can be accomplished using an iframe.
example: header.html
This later question got an answer that works with files on disk provided you are using firefox.
Chrome gives a cross site scripting error
You could have a <div> for the header, I will call it <div id="header">.
Using jQuery we could say something like: $('#header').load(---html file---);. Aside from the pain it might be to include the JS file in all pages, it will allow you to make changes to the header globally throughout your application.
I am creating a web page that accepts a hyperlink from the user and displays that page in an iframe. While rendering the page, I would like to show just the text and simple colors, thats it.
I would like to block all the media files like images and flash scripts from showing up.
If not an extensive one, for the starters, I would like to confine the scope to .gif, .jpeg, .jpg, .png, .swf.
Or does anyone know of a site with similar functionality?
You can write a simple dom parser and parse the page before show it in iframe. Then before showing it you can remove whatever you want.
your iframe whould like
<iframe src="your_parser.php"></iframe>
In your parser you can get the content from page using file_get_contents() or curl() it is your choise (i would use curl). Then you can remove the media you want.
If you're using Firefox, use the Adblock Plus extension. You can specify the types of items to block via a filter rule. An example (using Safaribooks) looks like this:
||techbus.safaribooksonline.com/static/201109-2191-techbus/images/6.0/*.jpg
However, if you're talking about incorporating functionality into your page to strip out a specific list of content-types, this approach wouldn't help you. You'd need to pull the html source and strip out the offending content-types.
also if you are using cms. you should be turn off bbcode image, and embed html