I need to get the width and height of a background image, I've seen examples where these can be easily retrieved ONLY IF the properties are set in CSS.
Is there anyway to get width and height when they are not set in the CSS either inline or in a CSS file?
This is all I have to work with...
element.style {
background-image: url(generated-by-cms.jpg);
}
Thanks!
I don't think you are able to get it via CSS if you didn't set the property up. As the image is being loaded externally, the CSS file has no clue about the size. Furthermore, if you are trying to set it up via background-image, the image will be restricted by the element size.
What you can do however is load the image via Javascript (since you already have the url anyway) and then set your element to the dimensions you want. For example, let's say your HTML file contains an img tag with the id "myimg"
<img id="myimg"></img> <!-- an empty image -->
You can then set up your Javascript like this:
var img = new Image(); // an empty image object
img.src = 'someurl'; // image url
// this is fired after 'someurl' is loaded.
img.onload = function() {
document.getElementById('myimg').src = img.src;
document.getElementById('myimg').width = img.width;
document.getElementById('myimg').height = img.height;
}
Note that you don't have to set the empty image or it's properties if you don't want to. You can manipulate img.width and img.height properties and use it elsewhere if needed.
Related
Disable width and height fields from image properties I am using ckeditor 4
CKEDITOR.replace('<%=txtCkEditor.ClientID %>', {allowedContent:'img[!src,alt];'});
By using above method it shows only image properties with width and height hidden and rest of the controls also get visible false. Kindly suggest me a solution for disabling the width and height fields from image properties windows.
Thanks in advance.
I'm not sure I entirely understand your question. It seems you want to hide the fields that allow input of height and width. Your initial solution doesn't seem to affect the dialog box, but what content gets saved. These are very different kinds of solutions. My answer assumes you're seeking to alter the image properties dialog box fields.
Based on this earlier question, I recommend adding the following configuration:
CKEDITOR.on('dialogDefinition', function(ev) {
var editor = ev.editor;
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'image') {
var infoTab = dialogDefinition.getContents( 'info' );
infoTab.remove( 'txtWidth' ); // Remove width element from Info tab
infoTab.remove( 'txtHeight' ); // Remove height element from Info tab
}
});
I'm making a bunch of stacked divs that will expand when moused-over to show an image, but I have a lot of images.
Is there a way in CSS or JS (I don't really know anything about JS) to have each div automatically use the next image in a folder? ex: the images are named map1.jpg, map2.jpg ... map91.jpg. and be able to use the same background-image:url but have something telling it to add 1 to the next image for each new div so I don't have to manually specify 90+ different images.
I hope I was able to explain that well enough. Thanks =)
In CSS this is impossible, cause you can't concatenate the url path for background-image.
in javascript this is pretty simple, using jQuery you can simply load all div you need when body is ready:
// on page load
$(document).ready(function(){
// 10 images to div #image-board
for(var i=0; i<10; i++){
// create a div with image #i
$('#image-board').append('<div><img src="my/collection/folder/Image'+i+'.jpg"></div>');
}
});
don't forget to create in your HTML page a <div id="image-board"></div> where all images will be listed to
I'll try to include lots of detail since you say you're unfamiliar with JavaScript. When you say stacked divs, I assume you mean one inside another. Start with a div with appropriate id and background in your html <div id="div0" style="background-image:url('map0.jpg')"></div> Here's some Javascript using jQuery (a very common javascript library you can include with a script tag) that will add a new div inside your first div with the updated url name.
for (var i = 0; i < number_of_images - 1; i++) {
var oldId = '#div' + i;
var newId = 'div' + (i + 1);
var newUrl = 'map'+(i+1)+'.jpg';
var newdiv = '<div id="' + newId + '" style="background-image:url('+newUrl+')></div>';
$(oldId).append(newdiv);
}
The for loop will go over every image, then a string is created in a series of concatenations that becomes your updated div. The '$' searches for the DOM element with that id, then adds the new div inside it. If by stacked you meant a new div underneath but not contained by the previous div, use .insertAfter instead of .append. Assuming your webpage can reach all of the images, this should work. Also notice I've 0 indexed this (the standard in Javascript) but your question referred to map1 as the first map. If you have already named these maps, you may need to re-index the for loop to 1.
How do i load the original image so that when the user brings the cursor onto top of the image, it should change automatically without showing white background then loading the original pic? Is there any code that loads the original image wheh my webpage loads? Please let me know. my code is :
#middlefoto{
background-image:url(../images/middleblack.jpg);
margin-left:1px;
height:158px;
width:333px;
}
#middlefoto:hover{
background:#fff url(../images/middlecolor.jpg) 0 0 no-repeat;
}
Use sprites with positioning.
Find more information at W3 Schools
The reason you are seeing the blank background for an instant is because the hover image has not yet been loaded from the server. To avoid this, preload the images. There are several ways to do this but the concept is the same: force the browser to load the image before it is actually needed. Here's a simple way to do this using JavaScript:
function preloadImages(sources)
{
var img = new Image();
for (var i = 0; i < sources.length; i++) {
img.src = sources[i];
}
}
preloadImages([ '../images/middlecolor.jpg', 'image2.jpg', 'image3.jpg' ]);
Include the image in an off-screen element (push it off screen with CSS). This will cause the browser to download the image so it should be ready for the rollover. You could clean up the offscreen images after page load.
<img src="rollover image" class="preloader" style="position:absolute; margin-left:-99999px" />
(don't really use inline styles)
Then, if you're using jquery
$(document).ready(function(){ $('.preloader').remove(); });
to clean up.
Is it possible to make the background image of a DIV a canvas that can be modified with getContext("2d")?
Well, you could place a canvas element inside of the div, maximize its height and width, set its position to relative and its z-index to a negative value.
However, if you want to use a real CSS background-image:... you would have to create your image inside your canvas. You could then use toDataURL to get a data url which you could use as value for your original background-image:
var canvas = document.getElementById('canvas');
var data = canvas.toDataURL();
var myElement = document.getElementById('myelement');
myElement.style.backgroundImage = 'url('+data+')';
If you don't want to create a new background but manipulate an existing one, load your original background into an Image object (or get a reference) and use drawImage:
var image = new Image();
image.onload = function(){
context.drawImage(this,0,0);
someCallbackToManipulateTheImage();
}
var src = myElement.style.backgroundImage.substr(4);
src.substr(0,src.length - 1);
image.src = src;
Set the background-image of the div to this:
"url('" + canvas.toDataURL() + "')";
Edit: At that point, note that you are also free to do what you wish with the canvas, as the background-image will continue to contain only the image data that was in the canvas at the moment that you called canvas.toDataURL(). Feel free to discard or draw onto the canvas, as it will not affect your div's background at that point.
You can have a canvas inside the div with absolute css position, other elements have to have z-index greater than the canvas.
I've got a list with list-style-none which needs to be able to add new items to itself via Ajax and have the background expand appropriately when it does. Adding via Ajax is easy, but every solution I try for the background fails me. I don't know if it's even possible; is it? I'm using a grid like this one:
http://jqueryui.com/demos/sortable/#display-grid
Both WebKit and Firebug are showing me skinny, empty bars when I hover over the enclosing divs and/or the enclosing ul tag. It appears that the minute you set a list loose with list-style-none and float:wherever, you give up control over its background. But that can't be right.
This is something I've run into a number of times. The problem is that floated elements aren't part of the normal box model, so they don't cause their parent elements to expand unless their parent elements are also floated. So if possible, float the ul or containing div.
Edit:
See quirksmode for another css-only workaround.
Could you provide a sample of your code? Also, why does the list have display:none set?
For instance, should be as simple as this:
HTML:
<ul id="dest"></ul>
JS:
// Simplified example, most likely wrapped in $.ajax
// This is the AJAX response function
function(data, response) {
var items = json.parse(data);
$.each(items, function() {
// Assumes item has a name property
$('#dest').append($('<li>' + this.name + '</li>'));
});
}
Should be just that simple. You shouldn't need the hide the list initially, as you can simply append list items and have the display update appropriately.
Hope that helps.
You need to explicitly set the width and height for the area.
Check out this link for Horizontal Scrolling: http://valums.com/scroll-menu-jquery/
Here is the script:
$(function(){
//Get our elements for faster access and set overlay width
var div = $('div.sc_menu'),
ul = $('ul.sc_menu'),
// unordered list's left margin
ulPadding = 15;
//Get menu width
var divWidth = div.width();
//Remove scrollbars
div.css({overflow: 'hidden'});
//Find last image container
var lastLi = ul.find('li:last-child');
//When user move mouse over menu
div.mousemove(function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
div.scrollLeft(left);
});
});
Basically, you need to update the ulWidth and divWidth when you add the new item.
Then just set the background image to repeat horizontally and you should be set.
ul.sc_menu {background:transparent url(image.png) repeat scroll 0 0;height:100px}
Note: You will need to set the height; otherwise you will not see the background because the li are floated.
For dealing with the float element, maybe you should know it's characteristic, gotcha, and how to deal with it.
See the links below, it also have demo, so you can understand the concept:
http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
http://aloestudios.com/2009/12/goodbye-overflow-clearing-hack/
and
http://aloestudios.com/misc/overflow/