I'm using the Pixastic plugin in JavaScript. I have a table filled with images that are blurred. When I go over them with the mouse I want them to get normal. And when the mouse leaves an image I want it to blur back. For some reason my code doesn't work. Here's the code:
Before, I copied the wrong code part, and I apologize for that this one is the one I'm asking about.
<script type="text/javascript">
$(document).ready(function(){
$('.photography').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
function () {Pixastic.revert('this');};
}
else {
function(){Pixastic.process('this', "blurfast", {amount:0.5});};
}
});
});
</script>
OK, so I managed to find my old code that actually works half way (when I hover over the image for the first time it works, but when I try for the second time it doesn't).
$(document).ready(function(){
var blur = function() {Pixastic.process(this, "blurfast", {amount:0.5});};
var unblur = function () {Pixastic.revert(this);};
$('.photography').each(blur);
$('.photography').hover(unblur,blur);
});
OK, so now I'm also adding the code for the function called revert:
revert : function(img) {
if (Pixastic.Client.hasCanvas()) {
if (img.tagName.toLowerCase() == "canvas" && img.__pixastic_org_image) {
img.width = img.__pixastic_org_width;
img.height = img.__pixastic_org_height;
img.getContext("2d").drawImage(img.__pixastic_org_image, 0, 0);
if (img.parentNode && img.parentNode.replaceChild) {
img.parentNode.replaceChild(img.__pixastic_org_image, img);;
}
return img;
}
}
else
if (Pixastic.Client.isIE()) {
if (typeof img.__pixastic_org_style != "undefined")
img.style.cssText = img.__pixastic_org_style;
}
}
So yesterday my friend discovered how this could be done ... the problem was that the plugin converts images into canvas anyway her's the code :
$(document).ready(function(){
$('.pic').each(function(){
this.onmouseout = function(){
var canvas1 = Pixastic.process(this, "blurfast", {amount:0.5});
canvas1.onmouseover = function(){
Pixastic.revert(this);
}
}
this.onload = function(){
var canvas = Pixastic.process(this, "blurfast", {amount:0.5});
canvas.onmouseover = function(){
Pixastic.revert(this);
}
}
});
});
Try doing this
$('.photography').live('mouseenter', function(event){
Pixastic.revert(this);
}).live('mouseleave', function(event){
Pixastic.process(this, "blurfast", {amount:0.5});
});
Related
I'm trying to resize an image using addEventListener. I searched for this question and found similar ones but I haven't been able to make the function work properly.
The following code demonstrates a working function that resizes the image.
header.onload=function(){
var fullHeaderWidth=this.width
if(fullHeaderWidth>window.innerWidth)
header.width=window.innerWidth;
setInterval(function(){
if(fullHeaderWidth>window.innerWidth)
header.width=window.innerWidth;
else
header.width=fullHeaderWidth;
},50)
};
But when I try to use this function...
var header=new Image();
header=document.getElementById('header');
header.onload=function(){
var fullHeaderWidth=this.width
if(fullHeaderWidth>window.innerWidth)
header.width=window.innerWidth;
};
header.src='file:///C|/Users/Dillon/Development/Jesses Works/header.gif'
window.addEventListener('resize',function(){
if(fullHeaderWidth>window.innerWidth)
header.width=window.innerWidth;
else
header.width=fullHeaderWidth;
},false)
The event fires (I know this because I used alert in the function), but the image will not resize. Any ideas?
You're getting confused, I think you're trying to do something like this:
window.addEventListener('load', function () {
setInterval(function () {
var fullHeaderWidth = this.width;
if (fullHeaderWidth > window.innerWidth) {
header.width = window.innerWidth;
} else {
header.width = fullHeaderWidth;
}
}, 50);
});
I have two images: static and animated. I am trying to play that animated image but only once. After that, it will change to static one.
My Code:
$(document).ready(function () {
$('#targetDIV_three').bind('click mousedown', function () {
srcToGif2 = "http://demo.pink-squid.co.uk/christmas/s3.gif";
$("#divthree_three").attr('src', srcToGif2);
});
});
Fiddle : http://jsfiddle.net/squidraj/33Sqd/
Currently, it is not stopping after the first animation.
Latest fiddle with single animated loop gif.
http://jsfiddle.net/squidraj/4rC8D/1/
Now can't see the animation though the img src is changing.
If you want this animated GIF to be played only once, modify it in Photoshop. Go to Window > Timeline, then select looping options (bottom left corner):
Save for web as GIF and voila!
Working Fiddle
Try This:
$(document).ready(function () {
$('#targetDIV_three').bind('click mousedown', function () {
[].slice.apply(document.images).filter(is_gif_image).map(freeze_gif);
function is_gif_image(i) {
return /^(?!data:).*\.gif/i.test(i.src);
}
function freeze_gif(i) {
var c = document.createElement('canvas');
var w = c.width = i.width;
var h = c.height = i.height;
c.getContext('2d').drawImage(i, 0, 0, w, h);
try {
i.src = c.toDataURL("image/gif"); // if possible, retain all css aspects
} catch(e) { // cross-domain -- mimic original with all its tag attributes
for (var j = 0, a; a = i.attributes[j]; j++)
c.setAttribute(a.name, a.value);
i.parentNode.replaceChild(c, i);
}
}
});
});
For getting desired effect you can setTimeout to trigger click event #targetDIV_three
Chnage your code to this. A timeout is set to set the old gif again.
$(document).ready(function () {
$('#targetDIV_three').bind('click mousedown', function () {
srcToGif2 = "http://demo.pink-squid.co.uk/christmas/s3.gif";
$("#divthree_three").attr('src', srcToGif2);
setTimeout(function(){
$("#divthree_three").attr('src', "http://demo.pink-squid.co.uk/christmas/s3_bg.gif");
},900);
});
});
http://jsfiddle.net/33Sqd/2/
There may be an easier way to do this, like with CSS, I think, pseudo-classes or whatever
but anyway for some reason I already wrote this function.
On mouseup it should switch the image back to normal. (Note that the images have the same names except for mouse down the .png is switched with ed.png and the opposite is done for document.mouseup. But document.mouseup isn't even working).
$.fn.buttonify = function () {
console.log("buttonification successful");
var that;
var source;
this.mousedown(function (event) {
var top_value;
var left_value;
that = this;
if (event.which == 1) { //if it is a left click
source = this.src.substring(0, this.src.length - 4);
source += "ed.png";
this.src = source;
console.log(this.src);
}
});
$(document).mouseup(function () {
if (that == null) {
console.log("returninurnging");
return;
}
console.log(source);
source = source.substring(0, source.length - 6); //very questionable code
source += ".png";
that.src = source;
console.log(that.src);
that = null;
});
}
When the mouse is lifted outside the click area, it does not change the image.
Otherwise it works. :(
What do U really want?
<img src="image1.jpg" id="image">
<input type="button" value="whatever" onMouseDown="change()" onMouseUp="undochange()">
JAVASCRIPT
function change()
{
image = document.getElementById ("image");
image.src="image2.jpg";
}
function undochange()
{
image = document.getElementById ("image");
image.src="image1.jpg";
}
I have asked this question couple times, but non of the suggestions seems to be working.
I am using jstree plugin to build the tree. Based on the node_id, I am trying to load images to some divs. It kinda works but, I am having sporadic image display issues. Sometimes, I have to double click, sometimes single click shows the images.
I tried this:
img1 = new Image;
img1.src="teamA.png";
img2 = new Image;
img2.src="teamB.png";
img1.onload = function()
{
$("#div1").html(img1;
}
etc, but this is not working. I still see sporadicly images are now showing up on the divs.
I started looking at jquery plugin imgpreload as this:
$.imgpreload(['img1','img2', 'img3','img4','img5','img6'],
{
each: function() {
$(this).data('loaded')
$("#div1").html(img1);
}
});
this does not seem to be working either, any ideas or points?
I have done this:
$(function () {
var myImage1 = new Image();
$(img1)
.load(function () {
});
.attr('src', 'teamA.png');
});
getting syntax errors. Does this seem ok to you?
* updated * I modified the code as this:
$(function () {
var myImage1 = new Image();
$(myImage1).load(function ()
{
})
.attr('src', 'teamA.png');
alert(myImage1.width);
$('#div1').html("myImage1").css({"border": "0", "background": "white"});
}
Right after the load function, I am doing a:
alert(myImage.width) to see the size of the image, it is coming back at 0, so this does not seem to be working. There is definetely image.
update v2
$(function () {
var myImage1 = new Image();
$(myImage1).load(function ()
{
alert(myImage1.width);
$('#div1').html("myImage1").css({"border": "0", "background": "white"});
})
.attr('src', 'teamA.png');
});
ok, this code works assuming that the image is there. But I like to do is if the image is not there, I like to hide that div. I have this code, but it is not working on load event. How can I hide the divs that are empty?
$(function ()
{
var myImage1 = new Image();
$(myImage1).load(function ()
{
var image1Check = myImage1.width;
if (image1Check == 0 || image1Check < 30)
{
$('#div').html("").css("border", "");
}
else
{
$("#div1").html(myImage1).css("border","1px solid");
}
})
.attr('src', teamA.png);
});
Bind the load event before setting the src, and to handle a missing image, use .error()
$(function () {
var myImage1 = new Image();
$(myImage1).load(function () {
$("#div1").html(myImage1).css("border","1px solid");
}).attr('src', "teamA.png").error(function(){
$('#div1').html("").css("border", "");
});
});
You have to use $(this).data('loaded') in an if:
each: function() {
if ($(this).data('loaded')) {
// do something
}
},
Hi All I am trying to write both an if/else statement along with toggling an image. Basically my goal is to toggle an image (in this case with an id of soundonoff). However I can't seem to figure out where I am going wrong. The issue is the toggle works, but the detect of whether its muted or not does not work. (In my full code for example I have it switch innerHTML of various audio/video files, this is where document.getElementsByName('mymedia')[0] comes in. Any help would be tremendously appreciated I have spent about 4 hours working on this and can't seem to figure it out.
I should add that I do not know where to add an eventlistener for detectmute(), I tried to add it to my video, and to the button soundonoff but neither got working yet.
Here is my code:
function detectmute(){
if(document.getElementById('soundonoff').src == 'images/icons/soundoff.png'){
document.getElementsByName('mymedia')[0].muted = true;
}
else if(document.getElementById('soundonoff').src == 'images/icons/soundon.png'){
document.getElementsByName('mymedia')[0].muted = false;
}
$("#soundonoff").toggle(function(){
this.src = "images/icons/soundoff.png";
document.getElementsByName('mymedia')[0].muted = true;
}, function() {
this.src = "images/icons/soundon.png";
document.getElementsByName('mymedia')[0].muted = false;
});
}
Well I solved my own issue, Solution was the following:
$("#soundonoff").toggle(function(){
this.src = "images/icons/soundoff.png";
document.getElementsByName('mymedia')[0].muted = true;
$("#soundonoff").attr('name', 'soundoff');
}, function() {
this.src = "images/icons/soundon.png";
document.getElementsByName('mymedia')[0].muted = false;
$("#soundonoff").attr('name', 'soundon');
});
function detectmute(){
var soundstate = document.getElementById('soundonoff');
if (soundstate.name == "soundon")
{
document.getElementsByName('mymedia')[0].muted = false;
}
else if (soundstate.name == "soundoff")
{
document.getElementsByName('mymedia')[0].muted = true;
}
}
$('#soundonoff').on('click', function () {
var $this = $(this);
if ($this.attr('src') == 'images/icons/soundon.png') {
$this.attr('src', 'images/icons/soundoff.png').attr('data-muted', true);
} else {
$this.attr('src', 'images/icons/soundon.png').attr('data-muted', false);
}
});
Here is a demo: http://jsfiddle.net/jLvZW/3/ updated
You could also setup an object that converts one source to another:
var convert = {
'images/icons/soundon.png' : ['images/icons/soundoff.png', true],
'images/icons/soundoff.png' : ['images/icons/soundon.png', false]
};
$('#soundonoff').on('click', function () {
var $this = $(this);
$this.attr('src', convert[$this.attr('src')][0]).attr('data-muted', convert[$this.attr('src')][1]);
});
Here is a demo: http://jsfiddle.net/jLvZW/2/ Updated