I have problems to display a bitmap which I create in my C# Application. I create following bitmap:
int w = 150;
int h = w/3;
Bitmap aBMP = new Bitmap(w, h);
using (Graphics G = Graphics.FromImage(aBMP))
{ ...G.FillRectangle(...) } //here I am painting an image
later in the application I am saving the image as following:
aBMP.Save(anIMGfilename);
By a right click on the resulting image properties I dont receive the sercurity tab which I get with any other Bitmap image. Have you ever seen this behavior?
When you use position absolute you must not use float,and u must set left and top and its parent has a position relative
<!--[if IE 8]>
#frame{
position:relative;
}
#image {
position: absolute;
text-align: right;
height: 70px;
width: 400px;
left:0;
top:10px;
}
<![endif]-->
Related
I've created a pile of images on which you click through. By clicking the top image it moves the z-index back by the amount of images. These images need to have a shared description. If I put position:absolute on them (to stack them). The description also gets stacked. Is there a way to keep them it under the images?
.image-pile {
position: relative;
}
.images img {
position: absolute;
width:300px;
}
https://jsfiddle.net/td59pr1h/
The .image-pile had no height because the content was positioned absolute. Fixed it by calculating the height in javascript.
var imgheight = $( ".images img" ).innerHeight()
$('.images').css('height', imgheight)
I want to communicate a "Go Left" button, in a three.js application, by using a left-arrow icon (instead of just labelling it "left")
Many of the three.js examples use dat.GUI to set up GUI control (e.g. button, slider). In all these examples the buttons show up as rectangular boxes
Is it possible to represent a dat.GUI button with an icon? (or at least place a background image behind the button?)
Otherwise, are there other GUI alternatives that are easy to use with three.js?
EDIT:
I'm having trouble to embed the css code inside javascript.
I added the code below and when I click on the button it displays in the console "BEG setStyle", i.e. the function setStyle() is executed.
But I don't see a change in the color or the background image of the "Nukeem all!" button.
#prisoner849 Can you help me with this?
Thanks
var gui = new dat.GUI(),
var obj = {
add:function()
{
console.log("clicked")
updateTheta();
this.setStyle();
},
setStyle:function()
{
console.log("BEG setStyle")
this.color = "#00ff00";
this.backgroundImage = "url('https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Radiation.png')";
}
};
gui.add(obj, 'add').name('Nukeem all!');
Thanks.
TheJim01 is right. You can do the trick with CSS.
Here is just a rough concept:
var gui = new dat.GUI();
var obj = {
add: function() {
alert("clicked!")
}
};
gui.add(obj, "add").name("Nuke'em all!");
gui.add(obj, "add").name("I'm Fine!");
gui.add(obj, "add").name("Harmony");
var fourth = gui.add(obj, "add").name("CSS is awesome!");
var fourthStyle = fourth.domElement.previousSibling.style;
fourthStyle.backgroundImage = 'url(https://cdn1.iconfinder.com/data/icons/hawcons/32/700035-icon-77-document-file-css-16.png)';
fourthStyle.backgroundRepeat = 'no-repeat';
fourthStyle.backgroundPosition = 'left';
fourthStyle.backgroundColor = 'white';
fourthStyle.color = 'black';
console.log(fourthStyle);
.function:nth-child(1) .property-name {
background-image: url('https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Radiation.png');
background-repeat: no-repeat;
background-position: right;
background-color: gray;
color: yellow;
}
.function:nth-child(2) .property-name {
background-image: url('https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/OK.png');
background-repeat: no-repeat;
background-position: center;
background-color: teal;
color: aqua;
}
.function:nth-child(3) .property-name {
background-image: url('https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/In-yang.png');
background-repeat: no-repeat;
background-position: left;
background-color: pink;
color: red;
text-align: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.1/dat.gui.min.js"></script>
I need for Fine Uploader to be able to drawThumbnail as a background image or to otherwise create scaled and cropped squares.
Basically, I am trying to reproduce the behavior I used in angularjs / flowjs, which was (more or less):
// I modified flowjs to set the background-image here instead of src with the base64 image.
<div ng-repeat="file in $flow.files" flow-img background-size: 'cover'">
This is the API on how to draw a thumbnail, but it specifically states that it returns a img or canvas. Instead, I'd like it set to the css property background-image.
http://docs.fineuploader.com/branch/master/api/methods.html#drawThumbnail
This solution gets close, but does not achieve the same effect as background-size: cover.
#image {
width: 33%;
padding-top: 33%;
position: relative;
}
#image canvas {
position: absolute;
top: 0;
bottom: 0;
}
...
callbacks: {
onSubmit: function(id, fileName) {
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
$('#image').html(canvas);
this.drawThumbnail(id, canvas, 500, false);
}
Using the UI mode give me exactly the same issue, I can only use it as the src like so:
<img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
This is my preferred solution...
#image {
width: 33%;
padding-top: 33%;
position: relative;
background-size: cover;
}
...
callbacks: {
onSubmit: function(id, fileName) {
this.drawThumbnail(); // somehow onto the background property of #image
}
Another solution, if widely adapted, would be to use elements as backgrounds (because then I could use the canvas for the #image background), but as of right now this is not a practical solution:
https://developer.mozilla.org/en-US/docs/Web/CSS/element
Another solution would be to watch for changes on the $('#image img').attr('src'). Hide the img element and set the background-image of #image on change. But, that's another ridiculous solution when the encoded image is right there.
If there isn't already a way to do this with fine uploader, why restrict the element of type img? Why not take any element and any attribute? Why not just return the base64 image and let us set it to any attribute?
Thanks in advance.
It sounds like the easiest solution would be to ask Fine Uploader to generate a thumbnail, pass the API method a temporary <img>, grab the src attribute from the <img> and use that to construct the background-image.
For example:
callbacks: {
onSubmit: function(id) {
var tempImg = document.createElement('img'),
self = this;
this.drawThumbnail(id, tempImg, 500).then(function() {
var fileContainerEl = self.getItemByFileId(id);
previewImg = fileContainerEl.getElementsByClassName('previewImg')[0];
previewImg.style['background-image'] = 'url("' + tempImg.src + '")';
});
}
I want an image to remain the full height of the browser window even if the window is made smaller. This seems to do the trick. However, at current, the image remains anchored to the left side of the screen with the right side of the image being what is lost as the window resizes. Instead, I'd like the image to chop from both sides leaving a centered image. Is this possible?
Note: I need the image in a div, not set as background.
Thanks!
Here is the CSS I'm currently using:
.div
{
min-height:100%;
min-width:100%;
text-align:center;
overflow: hidden;
margin: 0 auto;
}
.img
{
min-height:100%;
min-width:100%;
margin: 0 auto;
}
something like this ?
var origWidth;
$(document).ready(function() {
origWidth = $(window).width(); //store the window's width when the document loads
origHeight = $(window).height(); //store the window's width when the document loads
});
$(window).resize(function() {
var curWidth = $(window).width(); //store the window's current width
var curHeight = $(window).width(); //store the window's current height
var deltaTop = (curWidth- origWidth);
var deltaLeft = (curHeight- origHeight);
$("#image1").offset({top:($("#image1").offset().top + deltaTop)});
$("#image1").offset({left:($("#image1").offset().top + deltaLeft)});
origWidth = curWidth;
origHeight =curHeight;
});
JsFiddle
(inspired by this question's solution: link)
I am working on a WordPress theme and am trying to incorporate retina enabled CSS queries into my CSS file.
I would just like to clarify that I have the media queries set up correctly before I change out all my background images.
I have doubled the size of all my background images and perfixed
them with the "#2x" naming convention. e.g icon-user#2x.png.
I have added a jQuery function into my code to swap out the images with the CSS class of hires.
In my CSS document I have a normal CSS class for a background image.
Normal CSS query
.side-nav .arrow {
background: url(../images/arrow-nav.png) no-repeat top left;
width: 5px;
height: 8px;
display: inline-block;
margin-left: 10px
}
Is this the correct way i would change the .side-nav .arrow class for a retina enabled device? When declaring the background size do I keep the size that of the original smaller image?
/* All Retina Ready devices larger than 1.5 pixel ratio */
#media only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
.side-nav .arrow {
background-image:url(../images/arrow-nav#2x.png);
-webkit-background-size:5px 8px;
-moz-background-size:5px 8px;
-o-background-size:5px 8px;
background-size:5px 8px
}
}
jQuery Code
$(function () {
if (window.devicePixelRatio == 2) {
var images = $("img.hires");
/* loop through the images and make them hi-res */
for(var i = 0; i < images.length; i++) {
/* create new image name */
var imageType = images[i].src.substr(-4);
var imageName = images[i].src.substr(0, images[i].src.length - 4);
imageName += "#2x" + imageType;
/* rename image */
images[i].src = imageName;
}
}
});
Thank you
As long as there is some form of scaling taking place, like when you declare
<meta name="viewport" content="width=..."> (for android/ios/blackberry/WP8)
or
#ms-viewport {width: ... ;} (for non-WP8 IE10)
or ... even if you declare nothing most mobile devices will by default automatically scale such that viewport width=980px
then all CSS dimensions you declare with 'px' will exist in the same proportion to their viewport regardless of differences between their physical DPI/PPI
this means you shouldn't have to change a single thing about your style class except the background image's URL when the media query matches a high res device:
#media only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
.side-nav .arrow {
background-image:url(../images/arrow-nav#2x.png);
}
}