I'm trying to fill that my image fits the size of the DIV.
I already find that "background-size: contain" is not working for Internet Explorer 8.
Is there a possible workaround for my specific code.
.thumb {
/* Select a maximum height and width to allot for each thumbnail. Set margin size here as well. */
height: 125px;
width: 135px;
/* Do not edit these properties. */
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
In my javascript:
$('.thumb:' + place).css("background-image", 'url(' + entry.thumbnailURL + ')');
$('.thumb:' + place).css("filter", 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + entry.thumbnailURL + ',sizingMethod='scale')');
$('.thumb:' + place).css("-ms-filter", 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + entry.thumbnailURL + ',sizingMethod='scale')');
You get an Unexpected identifier because of these two bits:
',sizingMethod='scale')');
You must change it to
',sizingMethod=\'scale\')');
or
',sizingMethod="scale")');
Related
I'm trying to create a 3d hallway using css and react inline styles. The function mimics a first-person perspective by translating and rotating the cuboid in relation to mouse position and arrow key inputs.
At most angles and distances of perspective it works. Unfortunately, at some of these perspectives the background shows through or one of the sides of the cuboid will render at the wrong size.
In addition different browsers will display these glitches differently. Firefox doesn't seem to have these issues, Google Chrome will render the sides of the hallway at incorrect sizes or perspective, and Edge doesn't even currently display the cuboid (It used to show even more background).
Here is a gif of the glitch I'm encountering in chrome: https://imgur.com/R4SFG1h
The orange that you see is the background color on a wrapper element for everything, and it is leaking through.
I'm not sure what css property would cause such a difference in display between browsers.
It looks like it may be related to the issues shown at this question: very strange css3 spec bug for 3d object manipulation perspective z index .
But, there weren't any answers or helpful hints at that question.
Relevant react component code:
const styles = {
wrap: {
perspective: this.props.perspective + "px"
},
cube: {
width: this.props.windowWidth,
height: this.props.windowHeight,
transformOrigin: "50% 50% " + (-1 * this.props.curPos) +"px" ,
transform:
"rotateX(" + this.props.xRotation + "deg) " +
"rotateY(" + this.props.yRotation + "deg) " +
"translateX(" + (this.props.translateX) + "px) " +
"translateY(" + (this.props.translateY) + "px) " +
"translateZ(" + (this.props.translateZ) + "px)"
},
front: {width: "100%", height: "100%", transform: "rotateY(180deg)
translateZ(" + 0 + "px)"},
back: {width: "100%", height: "100%", transform: "rotateY(0deg)
translateZ(" + -1 * this.props.length + "px)"},
top: {height: this.props.length + "px", transform: "rotateX(270deg)
translateZ("+ 0 + "px)"},
bottom: {height: this.props.length + "px", transform: "rotateX(90deg)
translateY(" + -1 * this.props.length + "px) translateZ(" + -1 *
this.props.windowHeight + "px)"},
left: {width: this.props.length + "px", transform: "rotateY(90deg)
translateZ(" + 0 + "px)"},
right: {width: this.props.length + "px", transform: "rotateY(270deg)
translateZ(" + -1 * this.props.windowWidth + "px) translateX(" + -1 *
this.props.length + "px)"}
}
return (
<div className="wrap" style = {styles.wrap}>
<div className="cube" style={styles.cube}>
<div className="ends front" style={styles.front} ></div>
<div className="ends back" style={styles.back} ></div>
<div className="flats top" style={styles.top} ></div>
<div className="flats bottom" style={styles.bottom} ></div>
<div className="sides left" style={styles.left} >
<Project numProj="2"/>
<Project numProj="2"/>
</div>
<div className="sides right" style={styles.right} >
<Project numProj="2"/>
<Project numProj="2"/>
</div>
</div>
</div>
);
}
Styles relevant located in css are:
.wrap {
perspective-origin: 50% 50%;
-webkit-perspective-origin: 50% 50%;
overflow: hidden;
backface-visibility: hidden;
}
.cube {
position: relative;
transform-style: preserve-3d;
/* transform: rotateY(215deg) rotateX(45deg); */
backface-visibility: hidden;
}
.sides {
display: flex;
flex-direction: row;
justify-content: space-evenly;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.ends {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flats {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
Thank you for your suggestions. I'm not sure where to go from here.
I know, it has been asked before. The answers are insufficient although they are marked as correct.
I need something that fills a container with an image by showing the most of the image, centers it and preserves its ratio. Should be ajquery-plugin, a angular-directive or plain JS.
<div ratio-fill>
<img>
</div>
Of course should be enough where the script takes action then.
Solution for interest:
<div ratio-fill="http://img.url"></div>
CSS
*[ratio-fill] { background-size: cover;
background-position: center; }
Script (jQuery)
/* img-ratio-fill */
$(window).load(function(){
/* ratio-fill-directive */
$('*[ratio-fill]').each(function() {
var $this = $(this),
imgUrl = $this.attr( "ratio-fill" );
$this.css( "background-image", "url('" + imgUrl + "')" );
});
})
with css on the DIV
background-size: cover; background-position: center;
i have a Cordova Win8 Phone app, and in it.. i would like to set the background image attritube for the stylehseet dynamically.
#profile {
background-image: url('**____SET__DYNAMICALLY____**');
background-repeat: no-repeat;
background-position: top center;
position: relative;
}
I tried below, but that doesnt work.
document.getElementById("#profile")="background-image: url('" + bgimage + "');";
Any ideas on what could be up? thanks!
document.getElementById("profile").style.backgroundImage
= "url(" + bgimage + ")";
I have a function that is adding a background-image to my div. But its not showing.
this is my function
var totalCount = 6;
function changeBackground()
{
var num = Math.ceil( Math.random() * totalCount );
backgroundUrl = '/background/test2/'+num+'.jpg';
$('#background').css('background-image, url(' +backgroundUrl+ ')');
}
changeBackground();
The image changes everytime that the the page gets refreshed. I know that part is working because if i change
$('#background').css('background-image, url(' +backgroundUrl+ ')');
to
document.body.parentNode.style.backgroundImage = 'url(background/test2/'+num+'.jpg)';
it shows me the image like i wanted. But on the html tag. I want it on the div, so i can fade it in with jQuery.
here is my CSS
#background {
width:100% !important;
height:100% !important;
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
i don't get any error's in the console and when i look up the css nothing is added in the css. How can i now what is wrong? So in the future i can for myself what the problem is.
Change
$('#background').css('background-image, url(' +backgroundUrl+ ')');
To
$('#background').css('background-image', 'url(' +backgroundUrl+ ')');
I am using plupload in a from which is loaded dynamically through AJAX and also this form has a captcha image.
I was struggling to make plupload shim to position correctly. Then I found a solution which works in almost all browsers, except Google Chrome. Here is my solution:
<span id="upl_container" style="position:relative;">
<input type="button" id="my_button" value="Click me to upload something" />
</span>
In uploader settings I set:
browse_button : 'my_button',
container : 'upl_container',
Now this makes the shim to be absolutely positioned in a relative parent, where the parent (span) is exactly the size of the button (I could not use div because it takes 100% width of its parent and then plupload has positioning problems on all browsers).
When I inspect the plupload shim settings in Firefox (where it is positioned correctly), I see the following:
element.style {
background: none repeat scroll 0 0 transparent;
height: 28px;
left: 0;
position: absolute;
top: -4px;
width: 78px;
z-index: 99999;
}
but in Chrome it shows me:
element.style {
position: absolute;
background: transparent;
z-index: 99999;
top: 0px;
left: 146px;
width: 70px;
height: 23px;
background-position: initial initial;
background-repeat: initial initial;
}
Obviously, the left property is much too big.
For now I don't care if it is a bug or not, I just want to find some workaround how to force left side of plupload to be 0. I tried to add a Javascript code which sets left to 0 in Init, Refresh, PreInit callbacks to plupload, but this does not help, the left side anyway jumps to 146px.
Is there any way to force the left side of shim to be 0px?
(BTW, I have set Flash to be the default plupload runtime with fallback to HTML4 and HTML5).
Ok, so I went with the following ugly code:
uploader.bind('Refresh', function(up) {
$('#'+up.settings.container + ' > div').css('left',0);
$('#'+up.settings.container + ' > div').css('top',0);
$('#'+up.settings.container + ' > div').css('width','100%');
$('#'+up.settings.container + ' > div').css('height','100%');
$('#'+up.settings.container + ' > form').css('left',0);
$('#'+up.settings.container + ' > form').css('top',0);
$('#'+up.settings.container + ' > form').css('width','100%');
$('#'+up.settings.container + ' > form').css('height','100%');
$('#'+up.settings.container + ' > div').children().css('left',0);
$('#'+up.settings.container + ' > div').children().css('top',0);
$('#'+up.settings.container + ' > div').children().css('width','100%');
$('#'+up.settings.container + ' > div').children().css('height','100%');
$('#'+up.settings.container + ' > div').children().css('font-size','20px');// default is 999px, which breaks everything in firefox
})
And yay! it works for flash, htm5, htm4 runimes, tested all on Chrome, Firefox, IE7, IE9. The shim is in place, finally.
I had problems with the shim not being in the right place on dynamically loaded and toggled content.
$('#my_button').mouseenter(function() {
uploader.refresh();
});
Was sufficient to fix it.