I use an AJAX-Request to load a part of a Webpage, the request is handled by a framework, which delivers the content. After that, I use jquery to insert the delivered content into the DOM-Tree. So far, so good.
But I use background-images for links in the delivered content, which are generated while processing the AJAX-Request. Normally I would place the path to the background-image into a style-attribute in the link-tags, what works perfectly, until I want to use pseudo-classes for i.e. :hover (you know, to display an alternative image while the mouse hovers)
The solution would be to create a custom CSS-file, which will be inserted into the HTML-Head, but until it is an AJAX-Request, the HTML-Head is already sent.
Do you have any idea, how to attach CSS-properties to links, which will be generated on AJAX-Call-Time?
not possible with inline style.
as s jones says, you can have the style in your existing CSS and it should pick it up.
the other option is to do it using jquery..
$('div.ajax a').hover(function(){$(this).css('color','red')});
Related
I spent some time today with Lit trying to make a simple WebComponent that makes a HTTP GET to a URI, which returns a fully formed HTML document, and I want to inject said HTML document into the WebComponent's shadow DOM; basically this WebComponent acts as a simple proxy for embedding an externally hosted (but trusted) web snippet on my web page. I ran into a few problems:
Lit considers all HTML unsafe, so i had to mark it with Lit's unsafeHTML directive.
Then, I noticed none of the script or link tags in the injected HTML were being followed, so I parsed the incoming HTML as a HtmlDocument, located all the script/link tags, and "re-created" them using document.createElement(...) and returned them in my render(). I'm now noticing that images arent showing up either.
I don't like scraping scripts/links and re-creating them and jamming them into my web component anyhow, but I'm curious - what's the right way to approach this syndicating/consuming syndicated HTML pages/fragments?
Is this a solved problem w/ oEmbed already?
Is this simpler to do with a different WebComponent library?
This seems way harder than it should be at this point.
I think that it has little to do with WebComponents but rather with the HTML5 specs. lit-html uses innerHTML to create elements.
Script elements inserted using innerHTML do not execute when they are inserted
There are still ways to execute JS but this has little to do with your question.
unsafeHTML(`<img src="triggerError" onerror="alert('BOOM')">`)
Regarding the images, it may be a path issue?
This should work:
unsafeHTML(`<img src='http://placehold.it/350x350'>`)
I am building a Chrome extensions which injects a decent amount of JavaScript, CSS, and HTML into the page DOM for the current webpage tab. It it does so to show a Modal window with my extensions functionality in that modal.
I cannot use the background or popup scripts to do what I need to do so I have to use a content script which injects into the actual page DOM.
My issue so far is I have to be super careful with CSS class names and JS as well as I have discovered if the page has a CSS class matching the name of any of my extensions CSS, my extensions ends up over-riding the pages CSS!
I have seen that some other extensions that have to do a lot of HTML, CSS, JS into the content end up injecting into there own Iframe in the page which helps prevent this name collision.
Is using an Iframe the standard best practice in this case?
One of the features in my extensions is to do full-page screeenshots which require my contnet.js script to send a message to my background.js script which is responsibble for calling the CHrome API and taking the screenshot of the current scroll position in the pages viewport.
user clicks button in DOM modal windows
content.js sends message to background.js with the coordinates of the viewport.
background.js takes the screenshot with those coordinates. THen sends a message back to content.js.
content.js then scrolls down the page to the next area of the viewport for the next screenshot and then sends those new coordinates back to background.js.
this cycle continues until a shot of the whole page is made and stiched together and then sends back the URL of the new image to content.js when done.
Because both the Chrome API needs to sends messages back and forth between my content.js and background.js and then also if there is an iframe the iframe has to send messages back and forth with the page and the iframe.
Because of this I am not sure if I could use an iframe or not even?
Also if I did use an iframe, it would not load the content from a remote server but instead would be loaded into the page as html.
So is there a best practice for doing this?
Use inline styles instead
You can wrap your css in content.js then apply it to your target elements, it won't interfer the original design of the webpage
Use Shadow DOM
It provides encapsulation for js/css and makes it easy to ensure your components separate from the DOM of the main document.
I have a website and I want hide the CSS and script files address from source, when user clicked right and press "view source", CSS and script files address were changed. (as well as in firebug).
Like google! please go to google.com and press right click, then "Inspect Element With Firebug", see Style in right box. You will see "www.google.com #2 (line 9)" for example! and you won't see any address for CSS files!
How is this possible?
If you meant viewing the page source and not seeing any style links there, that's because Google uses some JavaScript framework, perhaps GWT: https://developers.google.com/web-toolkit/ . You can see a lot of JavaScript gibberish on the page, right? That JavaScript creates all the style elements etc. in the DOM. And you indeed can see the resulting style definitions when inspecting the elements, be it Firefox or Chrome.
You can do the same. But that design is quite different from classic HTML + JavaScript.
But others are right, you can't hide anything that way, and you shouldnt. It's security by obscurity at best.
As far as I know, you cant prevent users from seeing these files. They can see these files as well as can also download them if they want.
All you can do is to minify these files using some kind of minifier like JS Minifier for JavaScript code.
You can place your css in inline tags. Simply copy/paste the contents into your .html document in a ... block. Then you won't have an external .css file.
The advantage is that you save an http hit. The disadvantage is that you have to download the full css every time because you can't cache it.
You can also minify your css which will obfuscate it to a certain extent. But you can never really hide css from someone who downloads it.
I am developing a feature where I want to increase the size(width and height) of Facebook Like button which is getting rendere on my page.
I have tried overidding the css but it is not working as my css is loading very late.
Help required.
Are you sure you're using the correct overrides in your CSS? If I'm not mistaken, it doesn't matter when the CSS is loaded, just that it is loaded.
Be sure to check your CSS includes in the header file to make sure you're using the latest version. Also double check the classes or ids you need to override.
Perhaps you could post the code containing the like button you're trying to manipulate. If you're loading it in via Javascript you can use Firebug or other Web Inspectors to find out the actual HTML that gets inserted.
First of all, the css MUST be interpreted by the browser before the html element it refers to is loaded...
Second, the reason you can't select the button through CSS directly, is because it is rendered inside an iFrame that is controlled by the Facebook framework (you can check this out with firebug or any other inspector).
I'm not sure if it's feasible, but you have two possible ways to do it:
use javascript and the DOM to access inside that iFrame, select the button and style it.
create a button yourself, and give it the same href as the one generated originally, thus losing the fan-counter capabilities and whatever else is part of their framework
I am wondering if there is a way to use custom css for some specific text on my confluence page (not using embedded HTML).
Sorry this is an old question, but for the sake of people who search for an answer to this question: you can use span or div macros and use the custom css to apply whatever style you want to their contents.
If necessary, you could create custom div and span classes to allow for multiple styles to be applied to selections of text.
EDIT: Here is an example of the wikimarkup you could use to do this
{div:class=customCss|style=float:left; margin-right:50px}
Custom text in a div
{div}
So you can either use the div class and apply a style in the custom css for the confluence space, or you can use an inline style for the div.
You can do this ...
{composition-setup}import.css=/download/attachments/123456789/custom.css
{composition-setup}
That's if you've stored a custom.css file as an attachement. You'd obviously need to replace 123456789 with the actual attachment number.
You can also link CSS on an external site (with an absolute URL), but if you have any automatic URL formatting, that tends to mess it up everytime you change the document.
I use a User Macro that renders the $body in HTML. Then I can put whatever HTML tags I want in the wiki page within the user macro tag.
There could be a way to reach what you want to reach, but there is some information missing (from you). What confluence allows is the following:
If you have admin rights to the confluence wiki space, you could add there a custom style sheet that applies to all wiki pages. Else you could follow the answer of Mus.
Then you should analyse the wiki page in source form. So load a wiki page you want to style, and look at the source of that wiki page in your browser. Depending on your browser, this may be CTRL-U or something similar. Here in chrome, the page menu says View page source.
Try to find the defining selector for your wiki text you want to style in some form. A reasonable hack could be:
Find a wiki style that is not used by others. I have experimented with ~subscript~.
Find the HTML tags that are built by using that style. In my example, it was <sub>subscript</sub>.
Use your custom style sheet to style text of that style.
However, this may change the text where the style is used for its original sense :-(
You can specify custom CSS in your Confluence page via the div and span macros.
In recent Confluence versions (4.0 and later), you can do this as follows:
Type {div} or {span}. On typing the closing brace }, auto-complete will convert the text to a macro.
Left-click on the frame of the macro and select the Edit button
Enter the custom CSS into the Style field and close the dialog
Enter your text into the macro frame. It will then have the style you specified.