I have a site and need to put swf file background of it and put other thing on it.how can i do that?
I don't understand why you could want to do that. In any case, there's no proper way of doing it through HTML only. Still, you could use the z-index CSS property, this way:
MyCSS.css
* {
z-index: 1;
}
.mySWFBackground {
z-index: 0;
}
After this, your SWF element (in the HTML) should have
class="mySWFBackground"
I have never done it before, but I imagine that there will be some weird output (like unselectable content or as such).
There seems to be a few results on google for doing this. You can't actually set an SWF as a background proper, but this guy was able to do it with a div tag: http://www.kirupa.com/forum/showthread.php?277976-Using-swf-as-CSS-background, and with javascript: http://manos.malihu.gr/flash-background-with-html-content and also using the z-index as Julian suggested.
Related
i have a blog where i wanted to create a subsite listing my fav apps. for code consistency and for not confusing between existing html "normal" code describing website i made my own "subhtml" just for app cards.
for now best i did to this code was to display texted source of image instead of image. all css i tried already:
content: attr(data-src url), tried also attr both with url parameter and not, inside var()and not, also background-image: attr(data-src url), all max-width, max-height, width,height with both 100% and auto properties , attr value in root variable (this gives me text output of image i said above), tried also with ::before thing but also gives nothing special...
current not yet working code:
:root{
--icon: attr(data-src);
}
app-icon::before{
display: inline-block;
content: var(--icon);
}
<app-box><app-title>app name</app-title><app-icon data-src="https://live.staticflickr.com/2552/3794648454_cf0c2a228b_b.jpg"></app-icon></app-box>
few additional notes:
i don't want javascript (a11y)
i don't want javascript (i dont like + confusing)
yes i already was asking that in few places outside here but with no bigger help
i know xml so i would like to use this also in few other projects too
my browser is firefox but friends with other browsers also have this problem (so its not a browser bug, just my disknowledge of css)
i know that custom tags doesnt have defined attributes except of id and class so i used custom one as was visible above =D
i know default css property of img tag inline-block and im using it
screenshot of current bug :
this blog is under : https://hacknorris.neocities.org/app-store.html if someone would to test this bugg-css by themselves
so anyone knows how to display this image from custom tag?
The apparent problem of your code is setting the variable on the root-element. The root does not have the attribute "data-src", only the app-icon has. So you are looking for something like this:
app-icon {
--icon: attr(data-src);
}
app-icon::before {
display: inline-block;
background-image: url(var(--icon));
width: 100px;
height: 100px;
content: '';
}
But well, this doesn't work. You can't have variable URL tokens.
But you cannot do this with url(), as url(var(--url)) is parsed not as a url( function token followed by var(--url) followed by a ), but a single url() token that is invalid because the var(--url) is being treated as a URL itself, and unquoted URLs in url() tokens cannot contain parentheses unless they are escaped. This means the substitution never actually occurs, because the parser never sees any var() expressions in the property value — indeed, your background declaration is completely invalid.
(From https://stackoverflow.com/a/42331003/6336728)
What you can do is put the URL in inline CSS:
<app-box>
<app-title>app name</app-title>
<app-icon style="--icon: url(https://live.staticflickr.com/2552/3794648454_cf0c2a228b_b.jpg)"></app-icon>
</app-box>
I don't think that's the best solution though. What are your goals of using this method? I think it would be much better to just do it the usual way and use picture/source/img tags. This way you can make your images responsive (https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction)
I'm afraid it's not possible to do just with css. You should have do something like: content: url(var(--icon)) but this won't work. Anyway you're trying to get value from data-href attribute but in your html code you have data-src
This is my situation; I am displaying ads on my website but I want to display a specific banner if a visitor is using an ad blocker. First thing I've looked for is a script that detects the ad blocker, but after trying a few different scripts it seems most of them no longer work (at least, I couldn't get them to work).
So I gave up on that and went with a different solution. Displaying a CSS background image behind the ad so that if the ad isn't shown, the image is. Because a typical ad takes a moment to load I made the background image a GIF image with 2 seconds of transparency. This works like a charm the first time, but when you reload the page or open a different page the GIF animation doesn't play and instantly displays the last frame, skipping the transparency.
I've tried adding random stuff behind the URL in the CSS, which didn't work. I've tried a data/inline version of the image, that didn't seem to work either. I'm kinda running out of solutions.
The CSS:
.ads {
position: relative;
top: 15px;
float: right;
height: 60px;
width: 468px;
background-image: url('/images/ads/ads_top.gif?randomstuff=39485')
}
I'm basically looking for either;
1) A way to show an alternative image if the ad is blocked (that is still actual and works).
2) A way to delay a CSS background image from being loaded.
3) A way to prevent a GIF from being cached or forced to replay the animation on each pageload.
Any of these would fix my problem. Hope someone is able to help.
Thanks!
Look this link. It is very simple and I don't think you need comments. Another question is how to set up time to each image.
Time to use some jQuery:
Your html code:
<div class='ads'></div>
<div class='ads'></div>
And the css code:
.ads {
position: relative;
top: 15px;
float: right;
height: 60px;
width: 468px;
}
Your jQuery code:
$(".ads").each(function() {
var timestamp = $.now();
$(this).css("background-image", "url('/images/ads/ads_top.gif?"+timestamp+"')");
});
Your jQuery code have to be placed into the .js file. Do you have some js files? If yes, then add my code into onload handler. If you don't have any create new file, say, scripts.js and put this code into it:
$(document).ready(function()
{
$(".ads").each(function() {
var timestamp = $.now();
$(this).css("background-image", "url('/images/ads/ads_top.gif?"+timestamp+"')");
});
}
Explanation:
.ready function means that all instructions in body of this
function will be read and started on page load. You don't need them
to work before page loaded, right?
$(".ads") — we get element with selector .ads (with class ads).
$(".ads").each(function() { /* body */ } — .each function means that we will assign instructions from function body to all elements with selector .ads
var timestamp = $.now(); — getting timestamp and assigning it into variable
$(this).css("background-image", "url('/images/ads/ads_top.gif?"+timestamp+"')"); — adding css property to $(this) element (this element is current element with selector .ads)
Thats all. Simple. Now you have file scripts.js with content above. Put it somewhere on your site, where you usually put your media files. For example, {root}/media/ <-- here.
The last thing you should do is link your new js file and jQuery library. Note, that jQuery library have to be linked before file, using $ variable.
Add next code to the <head></head> tag to your view:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="/media/script.js"></script>
Don't forget to do all js actions in onload handler.
Hope this will help. Tell me about result, please.
JSFIDDLE
A possible solution for option 1, is to check with javascript (or preferably jquery) if the banner is visible. (You probably need to put a setTimeout around it, because as far as I know the page js loads first, and after that the adblocker js.
var ads = $('.ads').filter(':visible');
if(!ads.length) {
//do your alternative image showing magic here
}
A possible solution for option 2 might be to link to a php script and put a sleep(2); inside it, with after that the appropriate headers and print/echo of the image.
I need to basically set the content of something with HTML from CSS. I'm currently doing the following:
.myclass {
content "<img src=\"hello.png\"/>";
}
However, instead of the image, I see the literal text:
<img src="hello.png"/>
How can I inject arbitrary HTML using CSS?
HTML stores the data, and is the Model
CSS stores the styles, and is the View
JS stores the interactions, and is the Controller
If you're trying to add data to the page, it should be done via HTML. If you're simply trying to add an image as a style, use the background-image property. You don't need to inject an <img> element in the page to do that.
Don't ever do this, ever
As far as being able to inject HTML into the page via CSS, it's not directly possible, however it's possible to add JavaScript into the page using CSS, which can then add HTML to the page.
I can't emphasize enough how wrong that approach would be.
Unless there is some strange hack that I am not aware of, this cannot be done with pure CSS.
The content property is only able to insert text; if you try to put in HTML, it will be escaped.
That said, you can do something like this with pure CSS:
This is the CSS that can perform that effect:
.myClass:before {
display: inline-block;
width: 32px;
height: 32px;
content: "";
background-image: url("img.gif");
}
You can see this in action on this jsFiddle page.
In this particular case, you can use a pseudo-class (eg ::before), background-image, display:block and a fixed width and height to show the image.
Also, make sure that the colon : is added between content and its value.
A relatively new concept at the horizon is the element() value for backgrounds. This will display HTML as if it were an image: See also -moz-element.
This can be done. For example with Firefox
css
#hlinks
{
-moz-binding: url(stackexchange.xml#hlinks);
}
stackexchange.xml
<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:html="http://www.w3.org/1999/xhtml">
<binding id="hlinks">
<content>
<children/>
<html:a href="/privileges">privileges</html:a>
<html:span class="lsep"> | </html:span>
<html:a href="/users/logout">log out</html:a>
</content>
</binding>
</bindings>
ref 1
ref 2
You can't. It's not what it's for. The CSS is for the presentation layer while the HTML is the data layer.
Actually, you can, but just for characters, not HTML. You can use the content property. With some CSS selectors like :before, you can do nice stuff like adding your own character as a bullet for your list. But not much more.
I am using the following code, but it is having no effect!! Can this be done?
html {
background: #d9dbdc url('images/repeat-x.png') repeat-x;
}
This will work if you actually have an image at the specified location, although it's usually applied to the body element. It could be that the body element has a background colour that is covering the image.
Note that paths are relative to the style sheet file, not the HTML file embedding it, so a path pointing to images/repeat-x.png in /css/styles.css would result in /css/images/repeat-x.png.
Yes, it can be done, but it needs to be on the <body> tag.
Your image might not exist, or you might have a different background covering it.
If you are trying to set the background of the entire page I'd recommend:
body {
background: #d9dbdc url('images/repeat-x.png') repeat-x;
}
make sure the url is correct, you can use browser debug tool like Firebug in firefox to inspect the html
When using IE, you cannot put an absolutely positioned div over a select input element. That's because the select element is considered an ActiveX object and is on top of every HTML element in the page.
I already saw people hiding selects when opening a popup div, that leads to pretty bad user experience having controls disappearing.
FogBugz actually had a pretty smart solution (before v6) of turning every select into text boxes when a popup was displayed. This solved the bug and tricked the user eye but the behavior was not perfect.
Another solution is in FogBugz 6 where they no more use the select element and recoded it everywhere.
Last solution I currently use is messing up the IE rendering engine and force it to render the absolutely positioned <div> as an ActiveX element too, ensuring it can live over a select element. This is achieved by placing an invisible <iframe> inside the <div> and styling it with:
#MyDiv iframe
{
position: absolute;
z-index: -1;
filter: mask();
border: 0;
margin: 0;
padding: 0;
top: 0;
left: 0;
width: 9999px;
height: 9999px;
overflow: hidden;
}
Does anyone have an even better solution than this one?
EDIT: The purpose of this question is as much informative as it is a real question. I find the <iframe> trick to be a good solution, but I am still looking for improvement like removing this ugly useless tag that degrades accessibility.
I don't know anything better than an Iframe
But it does occur to me that this could be added in JS by looking for a couple of variables
IE 6
A high Z-Index (you tend to have to set a z-index if you are floating a div over)
A box element
Then a script that looks for these items and just add an iframe layer would be a neat solution
Paul
Thanks for the iframe hack solution. It's ugly and yet still elegant. :)
Just a comment. If you happen to be running your site via SSL, the dummy iframe tag needs to have a src specified, otherwise IE6 is going to complain with a security warning.
example:
<iframe src="javascript:false;"></iframe>
I've seen some people recommend setting src to blank.html ... but I like the javascript way more. Go figure.
As far as I know there are only two options, the better of which is the mentioned usage of an iframe. The other one is hiding all selects when the overlay is shown, leading to an even weirder user experience.
try this plugin http://docs.jquery.com/Plugins/bgiframe , it should work!
usage: $('.your-dropdown-menu').bgiframe();
I don't think there is. I've tried to solve this problem at my job. Hiding the select control was the best we could come up with (being a corporate shop with a captive audience, user experience doesn't usually factor into the PM's decisions).
From what I could gather online when looking for a solution, there's just no good solution to this. I like the FogBugz solution (the same thing done by a lot of high-profile sites, like Facebook), and this is actually what I use in my own projects.
I do the same thing with select boxes and Flash.
When using an overlay, hide the underlying objects that would push through. It's not great, but it works. You can use JavaScript to hide the elements just before displaying an overlay, then show them again once you're done.
I try not to mess with iframes unless it's absolutely necessary.
The trick of using labels or textboxes instead of select boxes during overlays is neat. I may use that in the future.
Mootools has a pretty well heshed out solution using an iframe, called iframeshim.
Not worth including the lib just for this, but if you have it in your project anyway, you should be aware that the 'iframeshim' plugin exists.
There's this simple and straightforward jquery plugin called bgiframe. The developer created it for the sole purpose of solving this issue in ie6.
I've recently used and it works like a charm.
When hiding the select elements hide them by setting the "visibility: hidden" instead of display: none otherwise the browser will re-flow the document.
I fixed this by hiding the select components using CSS when a dialog or overlay is displayed:
selects[i].style.visibility = "hidden";
function showOverlay() {
el = document.getElementById("overlay");
el.style.visibility = "visible";
selects = document.getElementsByTagName("select");
for (var i = 0; i < selects.length; i++) {
selects[i].style.visibility = "hidden";
}
}
function hideOverlay() {
el = document.getElementById("overlay");
el.style.visibility = "hidden";
var selects = document.getElementsByTagName("select");
for (var i = 0; i < selects.length; i++) {
selects[i].style.visibility = "visible";
}
}