Jump to content
  • Advertisement
Sign in to follow this  

[web] inlining javascript inside css

This topic is 4745 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

here, you see that meadow at the top, how can i stretch that to the width of the document like this?
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();
}


Thanks.

Share this post


Link to post
Share on other sites
Advertisement

// 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.

Share this post


Link to post
Share on other sites
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).

Share this post


Link to post
Share on other sites
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.)
 
<style type="text/css">
.banner {
filter: blur(Strength=2); // adjust the strength
};
</style>


You can combine this with javascript to dynamically adjust the strength.

For other browsers, I don't know.

Share this post


Link to post
Share on other sites
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 embedding of one within the other.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!