How do I make part of a style element a function? (IE: color:$random instead of color:red)
Tags: javascript,html,css
Problem :
This is probably a really noob question, but I couldn't figure out on my own thus far.. The title pretty much covers it up but I'm looking for how I can change the element some CSS into a function, in this case random.
To rephrase and provide more of a picture for you I want the program I am working on to look like this:
<html>
<body>
<p onClick="document.Color='$randomColor'"> Test sentence. </p>
</body>
</html>
as opposed to what I have now.
<html>
<body>
<p onClick="document.Color='green'"> Test sentence. </p>
</body>
</html>
Can anyone please help me? Many thanks in advance if anyone can!
Solution :
<html>
<head>
<script>
function getRandomColor()
{
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
return r.toString(16)+g.toString(16)+b.toString(16);
}
</script>
</head>
<body id="bd">
<p onclick="document.getElementById('bd').style.color='#'+getRandomColor();"> Test sentence. </p>
</body>
</html>
CSS Howto..
As you have them in the same container (#slider) you can display them as position: absolute and they will be positioned on the top-left corner of its container. I have...
div:nth-of-type(4n) > div > div:first-child { background-color: yellow; } Fiddle 1: http://jsfiddle.net/abhitalks/6Laay9s6/ This will work even if your entire structure is nested in a wrapper(s), and/or there are elements before...
To resize small images, putting them in small container and pushing that small container with another element is a clean solution. In my opinion tables are great for that. Here...
To test 3d transformation support you need to test for 'perspective', In pseudo code... for prefix in prefixes element.style[prefix + "-perspective"] = 1; if element.style[prefix + "-perspective"] return true ...
One solution is to not have the overlay take up the entire page in the front. You could achieve this by onclick, setting the body background color to be the...
Use a callback function to modify the .css() as the second parameter to fadeOut(). It will fire when the fade completes. <script type="text/javascript"> var fadeTime = 500; $('#r_text').click(function() { $(".box1_d").fadeOut(fadeTime,...
First you have to start with this html code: <div class="img-with-text"> <img src="http://z.lmnd3.com.s3.amazonaws.com/2015/07/24/20/05/30/422/White_Nectarine_Persian_Cucumbers_English_Peas_Watercress.jpg" alt="image"> <div><h2>Hello!</h2></div> </div> now you have to create...
In the original layout, change the width of the second td to *. What's happening is that the table, and so the row, has a fixed amount of width to...
Set your iframe width to 100%. Your divs are the ones that set the structure correct? So let the iframes fill their space. Update: iFrames are tricky when it comes...
Use HTML5 localStorage to store the style. Then when load: $("body").css("background",localStorage.style); ...
@j08691 @developdaly : I've placed images within each of the <li>. Could that be the problem ? – maxxon15 6 mins ago Yes. Yes, it could. Add this CSS...
Use box-shadow:none to reset the box-shadow to the defaults. See this source for information about the box-shadow property. All properties can be "resetted" by defining the same property, and using...
Check this fiddle HTML <input id="btnStart" type="button" value="Start" /> <div id="slider">Login</div> <div id="accordion"> <h3><a href="#">First header</a></h3> <div>First content</div> <h3><a href="#">Second header</a></h3>...
Want one that you can put over any background color? jsBin demo Only this HTML: <span class="pricetag"></span> And this CSS: .pricetag{ white-space:nowrap; position:relative; margin:0 5px 0 10px; displaY:inline-block; height:25px; border-radius:...
Ok nevermind, I just figured it out -- the hash-symbol # can precede the @{id} reference in the mixin, where the parameter is then passed as a String without...
Since the h3 is wrapped in an a that uses $primary-color you can use: a[data-reveal-id] h3 { color: inherit; } http://codepen.io/anon/pen/iflCA...
The anchor tag gets .ui-state-hover and id="ui-active-menuitem" but there is also the containing <li> and <ul> to consider. The structure is something like this (with only relevant details included): <ul...
Since you are using Native JavaScript you could use CSS transitions and classList. Something like: CSS #changeText { opacity: 1; transition: opacity 0.5s; } .hide { opacity: 0 !important; }...
Here you are demyr obviously you will have to modify to your exact needs: http://jsfiddle.net/S4LGr/1/ It is no problem here is the updated code, edit as you need you should...
Border doesn't support percentage... but it's still possible... As others have pointed to CSS specification, percentages aren't supported on borders: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' Value: <border-width> | inherit Initial: medium...
I've added a viewBox to define the visible area and removed the # by using black as the fill colour. It does now display on Firefox. <!DOCTYPE html> <html> <head>...
I suggest using the Chrome browser, right click the modal and 'inspect it'. From there on the bottom in the right hand column you'll see all the CSS that makes...
Use display:inline-block div.content { background-color: #add8e6; display:inline-block } DEMO Difference between inline and inline-block inline-block - This value causes an element to generate an inline-level block container. The inside of...
Here's a mini XML and sample XSL that is just a taste to jump start your creation. This should get you started in your project (which looks like a great...
You can use an HTML5 progress bar. <progress max="100" value="60">60%</progress> See DEMO....
You can use: <link rel="stylesheet" href="../ressources/css/design.css" type="text/css" media="all"> The .. will go one directory top. Since the html files are in a directory (like mypage1), this will go to the...
DEMO you should set background-size .video a { position: absolute; display: block; background: url(http://www.slatecube.com/images/play-btn.png); height: 100%; width: 100%; top: 75px; left: 150px; background-size: 50px 50px; background-repeat: no-repeat; } ...
I know is not fieldset, but its design is looking exactly as the one you posted, so I guess this makes the trick. The code below is what you'r looking...
In supporting browsers, one can use multiple backgrounds: background-image: -webkit-linear-gradient(bottom, #9B7698 24%, #4447AB 63%), url('Clouds.png'); background-image: -moz-linear-gradient(bottom, #9B7698 24%, #4447AB 63%), url('Clouds.png'); background-image: -o-linear-gradient(bottom, #9B7698 24%, #4447AB 63%),...
Updated to use CSS columns https://jsfiddle.net/vzjhybh0/4/ <figure> <img src="http://placehold.it/600x370" alt=""> <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</figcaption> </figure>...