I use Delphi 2010 . I am using twebbrowser to load up HTML source and view it.
Now I want to click on an area (background, links, etc) in the web browser and get the styling in the CSS file that styles the HTML.
For example: I click on the H3 region and I want to be taken to the h3{ color: white; } in the CSS.
Any help at all is much appreciated; this is hard for me to figure out.
You will have to handle the parsing of the source yourself to make this work. Because the CSS entry can be in another file or even files, this can be tricky. I would start by looking at the DIHtmlParser component which can help greatly here. You will have to parse the main document, and each identified CSS file to locate the proper file/position to jump too. I would also look at tEmbeddedWB as an alternative over TWebBrowser as it supplies much more control over the embedded browser as well as TRichEditWB which works well for viewing syntax highlighted HTML source.
Edit: You still have to parse the CSS and HTML to build an index of each tag and its CSS location. When your editing the HTML, you have to parse the tag your cursor is currently on or in, compare that to the index you parsed earlier, to display the CSS attributes in effect. Keep in mind that CSS cascades and nests, so your index will most likely be a tree, and your tag will be relative in that tree.
Related
I was reading sscce.org/ and without any particular reason I checked its HTML source. I found there are many <a> links without href attribute, like this:
<h2><a id='eg' rel="nofollow">Example</a></h2>
Now from HTML 5 specification we know that this is allowed (for example if link is completed later through JavaScript code), it's also allwed in HTML 4.01 (thanks to this post for references). In short it's useful if a link may be placed there but for any reason it has not been (server side) or it has been removed (client side). OK it's clear as it's also well summarized here.
Another (kind of) subtle difference is styling: even if link isn't rendered as link (by default underline and hand cursor) it'll inherit custom CSS styles for links such as:
a {
font-weight: bold;
}
Question: what I don't understand is the reason it's used in that page. There isn't any client-side JavaScript to add/remove href for that links and (more or less reasonably) I suppose such simple page is plain HTML and it's not generated server side. That said...why that links? Is there any other use I'm missing? Is it something related to SE?
Check http://sscce.org/#eg and you will now.
It was an old way to create links to a specific part of the page. Back then, you couldn't reference any element on the page, just anchors. Now it works the same with divs having an id.
I'm running a large site, one that has a nav bar at the top. Rather than change the 100+ html files each time we want to change one of the buttons in the top nav, we want to switch the navbar to be displayed using an include of some kind. I want these includes to work on both Firefox and IE, and I don't want to have to change the extensions of each file either.
So far I've tried:
Javascript read file - This works fine on firefox, but IE has file reading blocked it seems.
HTML include - So far only works if we change the extension to shtml
PHP include - I know you can set up apache servers to run php scripts within html, but I don't know how to make this happen in SunOne.
iframes - I had to block iframes in order to comply with security standards.
I'm more than open to suggestions I haven't considered, or ways to make the above attempts work. Any ideas?
Eureka! I've found it!
So rather than include the html, why not just include the javascript and css? Every page will include a .js and .css file. The css can set the image src, and in each image I can use "onclick" to tell it to execute a function in the .js file with a simple window.location. Voila! Two quick changes will change the whole site!
Thanks to Mr. Lister for the CSS idea. That set me on the path.
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.
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 have a textarea where I let users write some HTML.
They can then click a "Preview" link that triggers ajax that sends the raw HTML to a controller that uses JSoup to sanitize it (it returns the sanitized string).
I then display the sanitized HTML in a modal dialog box.
This all works wonderfully except that the modal dialog box has CSS styles cascade down from the rest of my site, and I want to display the HTML preview without any styles.
I've searched a lot (e.g. I found Any way to display some heavily-styled HTML in isolation from the rest of site's styles?) but wasn't able to figure out a solution.
I appreciate your help!
-Ryan
You could write the preview to a text file on the server then open an iframe to it with a template absent of the site's css.
I bet your problem stems from generic css selectors though. Things like
div p{
background:#fff;
}
Or maybe not so generic, but so non specific that it is being caught by your preview.