Create a small color box in html - javascript

I have a li element. Inside the li element there are many elements like input, labels.
I want to put now a small color inside each li. The color will be provided dynamically. I want to have something square and on page load it fills with the color i provide. Is there something already existing?

Are you looking for something like this?
HTML
<div class="input-color">
<input type="text" value="Orange" />
<div class="color-box" style="background-color: #FF850A;"></div>
<!-- Replace "#FF850A" to change the color -->
</div>
CSS
.input-color {
position: relative;
}
.input-color input {
padding-left: 20px;
}
.input-color .color-box {
width: 10px;
height: 10px;
display: inline-block;
background-color: #ccc;
position: absolute;
left: 5px;
top: 5px;
}
See jsFiddle for live example.

Disclaimer: I'm not familiar with CSS.
I became annoyed with nuances of CSS and not getting the look and feel quite right and figuring out different configurations of div's. I stumbled on to something much simpler (to me and hopefully others): use SVG.
Here's an example of a yellow-box:
<html>
Look at me - I'm a yellow box!
<svg width="20" height="20">
<rect width="20" height="20" style="fill:#E9E612;stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
</html>
When used with a jinja template I can configure the fill color by supplying the correct string from python:
<svg width="20" height="20">
<rect width="20" height="20" style="fill:{{supplied_color_str}};stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
It's old school, but it's simple and gets the job done.

Related

Showing svg files over each others in html

Is it possible to add svg icons like files on top of another svg file, i'm using a simple object tag for my html code and i was wondering if i could add more svg files on top of the one that already shown
<object id="topOBJ" data="worldHigh.svg" type="image/svg+xml" width="1000" height="1000">Your browser doesn't support this type of files</object>
You can use absolute positioning to put one on top of each other. Extra tip! absolute items are relative to the closest parent with position:relative so you can use that to avoid them from flying all over the page.
As mentioned in the answer by Lau, if you insist on using <object>-elements you can overlay them using CSS positioning,
.combined {
display: inline-block;
position: relative;
}
.combined > :first-child ~ * {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div class=combined>
<object data="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-annotate.svg" type="image/svg+xml"></object>
<object data="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-arrows-compress.svg" type="image/svg+xml"></object>
</div>
The CSS in the example ensures the wrapping element (<div class=comined>) takes up the dimensions of the first object and overlays all other elements.
There is a nicer alternative though, using SVG to combine the other SVGs
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" viewBox="0 0 50 50">
<image width="50" xlink:href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-annotate.svg" />
<image width="50" xlink:href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-arrows-compress.svg" />
</svg>

Custom code on Google DFP asynchronous tag

I need to run a campaign on Google DFP using a custom code that will add a full screen, responsive div, above my website. The problem, here: it just works using synchronous Google DFP tags, not asynchronous -- and it must be asynchronous.
I really don't know what the problem is (maybe the fact that the adsize is 1x1 and the iFrame don't know it should expands? Maybe my whole code should be out of the iFrame?), but I know the ad is loaded using a Friendly iFrame...
How could I make this happen?
Here's the code that was supposed to appear above my website.
<!-- INTERSTITIAL -->
<div class="container-fluid">
<a href="%%CLICK_URL_UNESC%%[%URL%]" target="[%TARGET%]">
<div id="AD_TakeOver">
<span class="FloatRight Exo PaddingRight16" style="position: fixed; right: 8px;" title="Anuncie você também no JUDÃO! Entre em contato. :)">
<svg style="vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000" height="16" width="16"><path d="M1840.478 1080.596l61.522-426.8-397.714 61.775 240.748-329.09-333.15-243.29-264.875 362.072-51.6-331.62L668.593 114l66.246 425.767L98 328.564l394 544.24-302.02 46.91-61.522 426.798 454.81-70.64-268.363 366.838L648.055 1886l244.294-333.94 42.535 273.38 426.96 60.56-65.61-421.678 362.303 264.58 243.462-332.8-367.053-268.05z" fill="#FFF"/></svg> PUBLICIDADE</span>
<div class="Bottom" style="text-align: center;">
<svg style="margin-top: 62px;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 306 306"><path fill="#FFF" d="M270.3 58.65L153 175.95 35.7 58.65 0 94.35l153 153 153-153"/></svg>
</div>
</div></a>
</div>
<style>
#AD_TakeOver{
background-image: url("[%IMAGE%]");
-webkit-background-size:cover!important;
-moz-background-size:cover!important;
-o-background-size:cover!important;
background-size:cover!important;
background-attachment:fixed!important;
background-position:center!important;
background-repeat:no-repeat!important;
height: 100vh;
position:relative;
border-bottom:8px SOLID #000;
border-top:1px SOLID #000;
color:#FFF; }
#AD_TakeOver .Bottom {
position:absolute;
bottom:0;
background-color:transparent!important;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAB4CAQAAAEFAdueAAAAhUlEQVQoz3WQ0Q5DIQhDTwtu///He9jVobKEkFKaFgWZMGmGGeY1613wMGkS/AW7sopHEct4r5j9qOzIKPpqIrChc15YJgufpa9E/w+906NErK32xOe8DiOEjLABjIhnvFoYn9s5mlwolrjjjq12XdaMy6CzUsPZuNzcPUbV4FjUL/mN+gBXngOnAbq0QwAAAABJRU5ErkJggg==) repeat-x;
background-size:2px 120px;
border-bottom:0!important;
overflow:hidden!important;
height:120px!important;
max-height:120px!important;
width:100%;
vertical-align:bottom;
line-height:120px;}
</style>
<!-- /INTERSTITIAL -->`
So the code example is the code that's specified in a creative?
The problem is exactly as you stated!
The reason it works in the synchronous version is because the code is inserted in the DOM directly. In case of asynchronous it's inside an iframe with a width and height of 1px.
I'm not a big fan of having that much HTML/CSS code inside a creative. There are a few solutions:
use a rich media provider (costs money and for something this 'simple', I'd go with approach 2)
write a JS solution (I believe that's how RMP's work, but I haven't investigated it)
Approach 2:
Either write some JS that's called inside the creative to set the width and height of the iframe OR (and what I prefer)
Inside your creative, write something like
<script>
showInterstitial('%%CLICK_URL_UNESC%%[%URL%]', '[%TARGET%]', '[%IMAGE%]')
</script>
All the HTML and CSS (except the background-image css of #AdTakeover) code can be moved to the sites html/css-folders.
You could add the interstitial-html to every page with display: none. Once this function is called, you can change it to display: block and update the required DOM-elements (the link, the background-image with an inline-style on the #AdTakeover) etc.

Change image on mouse over

<img onmouseover="http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png"
align="right"
alt="facebook"
name="facebook"
width="231"
height="231"
border="0"
id="facebook"
style="margin-top: -12px; margin-right: -60px;">
Its not working. It comes up as a box, not a broken image but a box which doesn't display the image. I'm adding it to my website, could i be putting it in the wrong place? Also, i put it in my forum wrapper and i want the image to be displayed and when you hover your mouse over it so it changes to image 2 please help.
If you intend the image to change on mouseover, you can use this:
<img onmouseover="this.src='http://www.habbohut.com/_images/_content/_habbohut/facebook_sign.png'"
onmouseout="this.src='http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png'"
src="http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png"
align="right"
alt="facebook"
name="facebook"
width="231"
height="231"
border="0"
id="facebook"
style="margin-top: -12px; margin-right: -60px;">
this.src='something'
will set the image src to something.
However, it would be prettier to use CSS and have it as background image, then it will work without javascript.
Please use some CSS, that inline style code gets so confusing.
If you want to do it the nice way do something like this:
#facebook {
background: url("http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png") no-repeat;
width: 231px;
height: 231px;
margin-top: -12px;
margin-right: -60px;
}
#facebook:hover {
background: url("http://www.habbohut.com/_images/_content/_habbohut/facebook_sign.png") no-repeat;
}
<div id="facebook"></div>
This may not be right but from looking at your code your img script doesnt end.
You need to have />

How to manipulate svg foreign object html text wrapping and positioning? [duplicate]

This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 8 years ago.
So I'm making a photo frame designer. Instead of a fiddle have the website as it's so much easier. Here it is.
Basically on the text input it prints the text to the SVG frame which uses an embedded foreign object tag so I can access it's auto text wrap. The problem comes with the positioning of the text. When the words are on two lines the positioning is correct. However whilst on a single line, the text is too high. I need it to be center between the photo slots and the bottom of the frame. This can be done easily by adjusting the foreign object's "y" value. However this then causes the two line text to be two low and out of position. I have no idea how I can fix this. Perhaps jQuery or javascript? Thanks.
The code:
<foreignObject x="78" y="460" width="1100" height="220" style="color:white;text-align:center">
<body xmlns="http://www.w3.org/1999/xhtml">
<p id="text">Your words here</p>
</body>
</foreignObject>
To prove my point, below is a sample, using one of the techniques from the suggested duplicate question page.
<svg width="500" height="200">
<rect x="0" y="0" width="500" height="200" fill="orange"/>
<foreignObject x="0" y="0" width="500" height="200">
<style>
div { display: table; font-size: 60px; width: 500px; height: 200px; }
p { display: table-cell; text-align: center; vertical-align: middle; }
</style>
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
<p id="text">Your words here</p>
</div>
</body>
</foreignObject>
</svg>
If you add more text to the <p> element, the text will remain centred.
For example, here is a demo with two SVGs, the only difference between them is the length of the text paragraph.

Displaying text over an image with javascript

I am looking for a JavaScript(or anything really) framework that can add text with a semi opaque background to images. I am also wanting something with simple mouse over support. I've seen some that use solely css but wont work in my case due their use of multiple images (My images are hi res and I don't want to waste bandwidth). Another I found worked but created invalid code and added too much to load times. Is there a framework out their or am I just going to have to code my own?
Thanks
<div style="position: relative; height: 200px; width: 200px;">
<img src="something.jpg" width="200" height="200" alt="Your Image" />
<div style="position: absolute; height: 200px; width: 200px; left: 0; top: 0; line-height: 200px; vertical-align: middle; opacity: 0.5;">Your semi-opaque text</div>
</div>
going off the top of my head, but wouldn't something like that do the trick?

Categories