if(document.width() - x > 1024) // image doesn't look good at this resolution
{
distance = (document.width() - x) / 2;
image.left = distance;
image.right = distance;
}
else
{
image.left = 0;
image.right = document.width();
}
[web] inlining javascript inside css
Author
here, you see that meadow at the top, how can i stretch that to the width of the document like this?
Thanks.
// style.css#banner{ position: absolute; top: 0px; left: 0px; /*horizontal-align:*/ width: 100%; background: url("scree.png");}// html<div id="banner"></div>You use the background-css-attribute of divs.
Author
Quote:Original post by Genjix
here, you see that meadow at the top, how can i stretch that to the width of the document like this?
*** Source Snippet Removed ***
Thanks.
the thing is once you stretch the picture beyond a certain amount it looks stupid. is there no way I can embed javascript inside the css attributes? (I'm not too bothered about the resizing - the image can stay the same size and be in the middle).
Oh wait. I probably understood the problem totally differently from how I should have. [grin]
In IE, you can use an ImageFilter ('blur' to be exact.)
You can combine this with javascript to dynamically adjust the strength.<br><br>For other browsers, I don't know.
In IE, you can use an ImageFilter ('blur' to be exact.)
<style type="text/css">.banner {filter: blur(Strength=2); // adjust the strength};</style>You can combine this with javascript to dynamically adjust the strength.<br><br>For other browsers, I don't know.
Quote:Original post by Genjix
the thing is once you stretch the picture beyond a certain amount it looks stupid. is there no way I can embed javascript inside the css attributes? (I'm not too bothered about the resizing - the image can stay the same size and be in the middle).
You can set attributes with javascript, but there is no <i>embedding</i> of one within the other.
Author
oh... ok, thanks. I thought maybe you could do something similar to running a program on a webserver where the output of the code is used. Thanks anyway.
Author
is there any way I can do any kind of css arithmetic then?
? thanks again.
width: 100% - 10px;? thanks again.
Quote:Original post by Genjix
is there any way I can do any kind of css arithmetic then?width: 100% - 10px;
? thanks again.
You can't do anything like that in CSS, however you could do something like the following to get a similar effect:
width: 100%; margin-right: 10px;Here, the object will take up the entire width, however thanks to the margin, it will appear to be 10px less than the width.
This actually offers more flexibility because if you wanted to have the 10px gap "infront" of the object, you'd just have to change margin-right to margin-left.
Actually, no. The final width of an object is the width + the padding + the border + the margin. That means the object will appear to be 10px too wide if you do that. See also http://www.w3.org/TR/REC-CSS2/box.html.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
