I want to be able to dim a web page when a specific image is clicked on, using JavaScript. I had a look around and managed to get this far:
I have to create the image div on the fly, as indicated below. To change the screen opacity I created a ‘screen’ div inside the html document and set its opacity to 0. It works. The aim is to be able to add an attribute to the image div so that when it is clicked, the opacity of the screen div is changed to, say, 0.5. This solution below works, but in the sense that the screen div immediately changes opacity when I open it, rather than when the image is clicked. Also, I need to somehow figure out how to unset the opacity change once the image is clicked a second time. I guess I need a boolean + if-statement for this but can’t figure out how it might work in this situation. Any help will be greatly appreciated.
var img = document.createElement('img');
img.src = “images/myImage.jpg”;
img.onclick = dimmerSwitch();
document.body.appendChild(img);
function dimmerSwitch (){
var elem = document.getElementById("dimmer").style["opacity"] = "0.55";
}
You really don't need var elem variable in dimmerSwitch
function dimmerSwitch (){
document.getElementById("dimmer").style.opacity = "0.55";
}
would do the trick!
Also to toggle, the neater method would be to define css classes and toggle between them in your dimmerSwitch function, like
.dimmed{
opacity: 0.55;
}
Here's a neat tutorial which explains how you could do that: http://toddmotto.com/stop-toggling-classes-with-js-use-behaviour-driven-dom-manipulation-with-data-states/
Related
Hi there I'm currently working on a catalog of sorts and am currently trying to make an image enlarge when it's clicked on. I have the JavaScript functionality like onmouseclick working perfectly but can't seem to get the JQuery that's inside the enlarge function to target an individual image. For example if I try to enlarge the second record in the list all images get enlarged, not just the one I selected.
Here is the function as you can see below I'm setting the product image width and height. I want to have functionality like the above styles using x. Is there a way to achieve this? Any information would be appreciated.
function normalImg(x) {
x.style.fontSize = "15px";
x.style.maxWidth = "90%";
x.style.height = "auto";
$('.product').width(350);
$('.product').height(250);
}
Also the information that's being set by the x.styles in the function above is being used in an xmlParser function, I don't know if that matters at all.
If I've understood your question, your problem is that this jQuery selector:
$(".product")
selects everything with class product, and not just the one that you clicked on. To fix this, I'd probably but the event listener on the product class, so that you can use "this" to refer to the product that was clicked, and then find and resize an img within it. The overall over might look something like this:
$('.product').on('click', function(){
$(this).css({width: '350px', height: '250px'})
.find('img').css({maxWidth: '90%', height: 'auto', fontSize: '15px'});
});
I'm using Hertzen's html2canvas.js, and tried to adjust the example code so that it targets a specific div instead of the entire body of a document:
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
A sample of what I'm trying to accomplish is here: https://jsfiddle.net/ununkg3a/
On clicking the "Save PNG" button, I want to append an image of the jQuery generated squares that I'm targeting in a specific div. In the code, it appears that it's appending something, but it doesn't have a height. When I try to set a height with the output, it still doesn't work as expected.
Is it not possible to accomplish something like this? Whenever I change document.body to another element, the screenshot doesn't render anymore, although it does render when I change it back to document.body. Someone told me that I'd have to crop the image with js, but that seems a little hacky.
It can: it's the first attribute.
(fiddle)
Example:
html2canvas(document.getElementById('test')).then(function(canvas) {
document.body.appendChild(canvas);
});
In your example, canvas2html can't find out the height of your div. Because of that it falls back to 0px height, so you won't see anything.
Give width to the #art then you can count the height manually and use that.
Mathematic example:
art_square_width = 10px
art_square_height = 10px
art_square_amount = 500
art_width = 250px
art_height = art_width / (art_width / art_square_width) * art_square_height = 200px
(fiddle)
I have a div that contains text next to a b&w image. The entire div is set to 50% opacity. Upon hover over this div, I want to change the opacity to 100%, while also changing the source of the image (from the b&w one to the color). The functionality is fine; however, when it's hovered over, the opacity changes slightly before the image source changes, and it definitely looks a little funky. I've tried preloading the images, but that doesn't seem to change anything - still a slight delay in changing the img source.
Here is what my code looks like (the images have the almost same source, just the suffix is different, thus the strange looking code):
$('.character').on('mouseenter', function() {
var full_src = $(this).find('img').attr('src');
var half_src = full_src.split("-");
$(this).find('img').attr('src', half_src[0] + '-color.png');
$(this).css('opacity', 1);
});
$('.character').on('mouseleave', function() {
var full_src = $(this).find('img').attr('src');
var half_src = full_src.split("-");
$(this).find('img').attr('src', half_src[0] + '-bw.png');
$(this).css('opacity', .5);
});
Any ideas? Thanks in advance.
EDIT: Threw together a fiddle: http://jsfiddle.net/3WZ7J/ - does seem to work correctly most of the time, my images might be too large or not preloading correctly.
You can wait for the image to load before changing the opacity of the div
$('.character').on('mouseenter', function() {
var $this = $(this);
var full_src = $this.find('img').attr('src');
var half_src = full_src.split("-");
$this.find('img').load(function(){
$this.css('opacity', 1);
}).attr('src', half_src[0] + '-color.png');
});
FIDDLE
One thing you could try is .promise() to force the order in which the operations take place, so that the opacity won't change until the image has swapped out. Some info here: http://api.jquery.com/promise/
Is it possible to load a background-image asynchronously?
I've seen many jQuery plugins to load normal image in an asynchronous way, but I can't find if it's possible to preload / asynchronously load a background-image.
EDIT
I clarify my problem. I've been working on this test site http://mentalfaps.com/
The background image is loaded randomly from a set of images refreshed each hour by a chron job (which takes random images on a flickr catalog).
The host is free and slow at the moment, so the background image takes some time to load.
The positioning of the first overlay (the one with the PNG transparent mentalfaps logo) and width are regulated by a function created in the jQuery(document).ready construct.
If you try to refresh the page many times, the width of the right overlay div is 0 (and so you see a "hole" in the layout)
Here is the method to set my positions:
function setPositions(){
var oH = $('#overlay-header');
var overlayHeaderOffset = oH.offset();
var overlayRightWidth = $(window).width() - (overlayHeaderOffset.left + oH.width());
if (overlayRightWidth >= 0) {
$('#overlay-right').width(overlayRightWidth);
} else {
$('#overlay-right').width(0);
}
var lW = $('#loader-wrapper');
lW.offset({
left: (overlayHeaderOffset.left + oH.width() - lW.width())
});
}
The problem is that the $(window).width() is lower then the effective window width! so the check fails and the script goes for $('#overlay-right').width(0);
any ideas?
Not sure whether I really understand your question, but background images (and all other images) are already loaded asynchronously - the browser will start separate requests for them as soon as it encounters the URL while parsing the HTML.
See this excellent answer for background on loading order: Load and execution sequence of a web page?
If you meant something else, please clarify.
The trick to loading something in the background is to load it once, so the next time when it is loaded it already is in the cache.
Put the following at the end of your html:
<script>
var img = new Image();
img.onload = function () {
document.getElementsByTagName('body')[0].style.backgroundImage = 'background.png';
};
img.src = 'background.png';
</script>
You could use a prefetch link in the head.
<link rel="prefetch" href="/images/background.jpg">
You should be able to add these links to the head via JavaScript.
I like to use CSS to fill the background with a color for page load.
After DOM ready event, I use jQuery to modify the CSS and add a background image. That way, the image isn't loaded until after page loads. Not sure about async, but this method gives the user a decent experience.
Example: http://it.highpoint.edu/
The right side navigation links have a background image. The page initializes with a background color. It is replaced with a background image after page load, via jQuery.
changes in this file jquery.ImageOverlay.js
set your height and width and enjoy this...
imageContainer.css({
width : "299px",
height : "138px",
borderColor : hrefOpts.border_color
});
As it is already mentioned, the background image is loaded asynchronously. If you need to load the background image from JQuery code you may also set the addClass() method to set a CSS class or attr("style=\"background-image:url('myimage.png')\"")
Ive found the answer myself, it was a problem due to the .offset() method that gived sometimes the wrong values.
I had the write values using the .position() :
var overlayHeaderOffset = oH.position();
i have a div element, with very big size background image. so, is it possible, to set a little size image as backgrount, untill the big size image loads.
thanks
I guess you could put another div element underneath it (using the z-index property) and give that the faster loading background image.
Whether that is practical to do, depends on your Layout, you'd have to give more information about that.
There's also the ages-old lowsrc HTML 4 property that still seems to be pretty well supported (I have not tried it myself since Netscape 4), but that won't work for background images.
CSS:
.that-div {
background-image:url(/path/to/small-image.png);
}
jQuery:
$(function () {
var bigImg = new Image(),
bigImgSrc = '/path/to/big-image.png';
bigImg.src = bigImgSrc;
$(bigImg).load(function(){
$('.that-div').css('background-image':'url('+bigImgSrc+')');
});
});