Strange "initial" values in d3.js - javascript

By executing code that is similar to this (d3.select(..).append("div")), I get divs with such style properties:
<div id="id6"
style="
background-image: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: rgb(255, 255, 255);
background-position: initial initial;
background-repeat: initial initial; ">
5
</div>
Questions:
a) Where does initial comes from? b) Is it possible to redefine "defaults"?
Is it Ok that d3 litters in the properties with unnecessary values?
Chrome says that background-position: initial initial; and
background-repeat: initial initial; are Invalid property values. Is it a bug of d3? How can we deal with this error?

This has nothing to do with D3, but with the implicit nature of CSS. When you specify the CSS background property, you are actually specifying multiple properties in shorthand. For example,
background: url(chess.png) gray 50% repeat fixed;
Is actually shorthand for
background-image: url(chess.png);
background-color: gray;
background-position: 50% 50%;
background-repeat: repeat;
background-attachment: fixed;
So, when you set the style "background", your browser automatically expands this shorthand to the full form. That's why you see all of these additional styles; they represent the computed values.

Related

vue dom get inner value without id

I have a dom item like blow:
<div data-realindex="0" class="img-item-wrapper"><div class="img-item" style="margin-bottom:8px;display:;" data-a-b8815d2c=""><div aria-label="图片.图集.共undefined张" class="img-wrapper__4hevL img-container img-wrapper-radius-tl__FrE43" style="height: 0px; padding-bottom: 100%; border-radius: 9px 9px 0px 0px; background-repeat: no-repeat; background-image: url("http://mms1.baidu.com/it/u=690465849,3185922056&fm=253&app=138&f=JPEG?w=500&h=667"); background-size: cover; background-position: center center;"><!----><div><div><!----><div class="half-mask__bdYCX"></div><!----></div></div><!----><!----></div><!----><div><div class=""><div><!----></div><!----></div></div></div></div>
The item have nested child, and I need to get the background-image in the inner child's style string.
background-image: url:(htttpxxxxx)
Can I just for loop key values to get background-image directly?
You can achieve this by accessing the style attribute based on the class name and then access the required style property along with the value from it.
Live Demo :
const el = document.getElementsByClassName('img-container')[0]
const styles = el.getAttribute("style").split(';');
for(var i=0;i<styles.length;i++) {
eachStyle = styles[i].split(':');
if (eachStyle[0].trim() === 'background-image') {
console.log(styles[i].trim())
}
}
<div data-realindex="0" class="img-item-wrapper"><div class="img-item" style="margin-bottom:8px;display:;" data-a-b8815d2c=""><div aria-label="图片.图集.共undefined张" class="img-wrapper__4hevL img-container img-wrapper-radius-tl__FrE43" style="height: 0px; padding-bottom: 100%; border-radius: 9px 9px 0px 0px; background-repeat: no-repeat; background-image: url("http://mms1.baidu.com/it/u=690465849,3185922056&fm=253&app=138&f=JPEG?w=500&h=667"); background-size: cover; background-position: center center;"></div></div></div>

Grab computed background-size on Internet Explorer with jQuery

I have this style:
#bkg-evs-1 {
background-color: white!important;
background-image: url("../img/rip-van-winkle-copy8-adj.jpg"), url("../img/Background-events2.jpg");
background-repeat: no-repeat, no-repeat;
background-size: 29% 100vh, 70%;
background-position: top right, 0% 0%;
background-attachment: fixed, scroll;
display: none;
min-height: 2500px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Whenever I try to get the background-size on internet Explorer 11 using:
jQuery(document).ready(function(event) {
var bs = jQuery("#bkg-evs-1").css("background-size");
console.log(bs);
});
I always get 0px 0px, 0px on the console.
Now,
with other browsers I always get the right computed background-size (which depends of the window size), no
problems.
I have tried using pure javaScript as well without results.
I have also noticed that with internet explorer 11, if I use this CSS background-size: 300px 300px, 300px 300px; there is no problems, the computed size will result on the console: 300px 300px, 300px 300px.
And, finally, in internet explorer 11, if I write directly in the console: jQuery("#bkg-evs-1").css("background-size") the console will give me the right values. So, the problem only happens when the page loads.
Am I doing something wrong?

Generate outline effect on image using css3

How can I generate in realtime this outline effect similar to this image using css3 or javascript?
http://i.imgur.com/1OEnuKF.jpg
Here is an similar effect achieved with filter and background-blending
div {
width: 180px;
height: 400px;
display: inline-block;
}
.test {
background: url(http://i.imgur.com/1OEnuKF.jpg), url(http://i.imgur.com/1OEnuKF.jpg);
background-position: 0px 0px, 3px 3px;
background-size: cover;
background-blend-mode: difference;
-webkit-filter: blur(1px)invert(1);
}
.target {
background: url(http://i.imgur.com/1OEnuKF.jpg);
background-position: top right;
background-size: cover;
}
<div class="test"></div>
<div class="target"></div>
The left part of the image is achieved from the original image; the right hand is the target image.
there are some filter effects in CSS3 , only for webkit
I've no idea how to use them to make the effect you showed
but I think they can help
here is a link that you can test CSS3 filters and get the css code
http://html5-demos.appspot.com/static/css/filters/index.html
and here you can see it's Browser compatibility
hope that help's

How To Make Full Page Background Image Without Resizing Or Cropping

What I need is what the following site does exactly but it's not a slideshow it's just a fading background image :
http://www.stevenharrisarchitects.com/
The image is 100% in width and 100% in height so no Cropping occurs, and this is what I want exactly.I had managed to do this part very easily with the following codes :
#bg-stat {
background: url('images/LANDING_PAGE.jpg') no-repeat center center fixed;
height: 100%;
background-size: 100% 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/LANDING_PAGE.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/LANDING_PAGE.jpg', sizingMethod='scale')";
}
I made the background-size : 100% 100% ;
It works fine, but the only problem that's left is that my client doesn't want the image to resize with the size of the window, instead it should act like on the site I mentioned above (Try resizing the window and you will see what I mean).
I don't want my background image to re-size to the 100% of width and height of my window, I want it to act just like in the above link I shared.
Also a link to my site :
http://leydenlewis.com/
Any help would be much appreciated.
If you need to use the background property and never want the image to be cropped, you should use background-size :contain;
div.big_background{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url('http://placekitten.com/g/1200/800') no-repeat center top;
background-size :contain;
}
Answer based on problem described above:
#bg-stat {
width: 100%;
height: 100%;
background: url('images/LANDING_PAGE.jpg') no-repeat scroll 0 0 transparent;
background-size: 100% auto;
}
Answer based on feedback:
CSS:
#bg-stat {
width: 100%;
height: 100%;
}
#bg-image {
background: url("images/LANDING_PAGE.jpg") no-repeat scroll 0 0 transparent;
height: 100%;
width: 100%
min-width: 1140px; // Based on img dimensions or arbitrary
max-height: 735px; // Based on img dimensions or arbitrary
}
i think you need below code:
body
{
background: url(image/background.jpg);
background-attachment: fixed;
background-size: cover;
}

Image in placeholder html?

Can I do something like this with pure html and if needed css and javascript:
And when the mouse focuses, it becomes like this:
So I was thinking of an image placeholder. Am I on the right track, or is there a better/more simpler or more straightforward method?
EDIT: Just out of pure curiosity, how would I accomplish this using JavaScript, as all the current answers are all CSS-related?
From my knowledge this is simply CSS background image.
http://www.w3schools.com/cssref/pr_background-image.asp
Have it look there, you can accomplish this by setting its position like here: http://www.w3schools.com/cssref/pr_background-position.asp
You can also change the background image depend on if the item is focused or not simply showing the back ground image when focused and hiding it when its not like:
#item:focus{
bacground image code here
}
More details on focus here: http://www.w3schools.com/cssref/sel_focus.asp
And some focus usage example: http://www.mozilla.org/access/keyboard/snav/css_usage.html
UPDATE WITH RESOURCE - THANKS #MrMisterMan
http://developer.mozilla.org/en/CSS/background-image
http://developer.mozilla.org/en/CSS/background-position
JAVASCRIPT:
Using JavaScript add the attribute to your element like below:
This will call your function when it has focus and pass it the input element.
Also you can detect onfocusout
Hope this helps, any questions just ask :)
If you only need to support the latest Browser use this:
HTML:
<input placeholder="Google Custom Search" type="search" name="q">
CSS:
#myInput::-webkit-input-placeholder {
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput::-moz-placeholder {
/* Firefox 19+ */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput:-moz-placeholder {
/* Firefox 18- */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput:-ms-input-placeholder {
/* IE 10- */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
JSFiddle
Browser Support
If you need an image (google logo in the question) you should set the placeholder image as the background of the text field:
input.search {
background-image: url("placeholder.gif");
background-repeat: no-repeat;
}
input.search:focus {
background-image: none;
}
Note: :focus is a pseudo-class in css, which is activated on focus
You may use just CSS.
You can give a solid border with say 4px width.
You can make round corners foor your input using moz-border or webkit-border radius.
You can use a border background image.
here you can read about css3 borders http://www.w3schools.com/css3/css3_borders.asp
You may try
input {
border:2px solid #dadada;
border-radius:7px;
font-size:20px;
padding:5px;
}
input:focus {
outline:none;
border-color:#9ecaed;
box-shadow:0 0 10px #9ecaed;
}
Here is the working fiddle

Categories