I'm using this jQuery greyscale plugin. Example page, Developer page.
Now the effect works only in Internet Explorer. I have three images on that page. The first two aren't greyscaled - I can see them always in color (with/without hover effect). The third image is greyscaled, but if I hover the mouse on it I see the greyscaled image of the second image.
This is how I instantiate the greyScale function:
<script type="text/javascript">
jQuery(function() {
// fade in the grayscaled images to avoid visual jump
jQuery("[class^='wp-image-'], [class*=' wp-image-']").hide().fadeIn(1000);
});
// user window.load to ensure images have been loaded
jQuery(window).load(function () {
jQuery("[class^='wp-image-'], [class*=' wp-image-']").greyScale({
// call the plugin with non-defult fadeTime (default: 400ms)
fadeTime: 500,
reverse: false
});
});
</script>
This is the output of the second image in Firebug:
<div class="gsWrapper" style="position: relative; display: inline-block;">
<img width="80" height="80" alt="" src="http://www.adomain.com/wp-content/uploads/2012/04/picture2.jpg" title="Picture" class="size-full wp-image-317 alignnone" style="display: inline;">
</div>
This is the output of the third image in Firebug:
<div class="gsWrapper" style="position: relative; display: inline-block;">
<img width="80" height="80" alt="" src="http://www.adomain.com/wp-content/uploads/2012/04/picture3.jpg" title="Picture 3" class="alignnone size-full wp-image-320" style="display: inline;">
<canvas style="left: 0px; position: absolute; top: 0px;" width="80" height="80" class="gsCanvas"></canvas>
<canvas style="left: 0px; position: absolute; top: 0px;" width="80" height="80" class="gsCanvas"></canvas>
<canvas style="left: 0px; position: absolute; top: 0px; opacity: 1;" width="80" height="80" class="gsCanvas"></canvas>
</div>
Firebug doesn't show me a
In my opinion this feature worked, but now it seems borken. What has changed? How can I locate the error?
I tried to load the scripts in functions.php with wp_enque_script to avoid jQuery conflicts. Also I put my jQuery code below wp_head() in header.php and changed my calls here from $ to jQuery. Currently I'm using jQuery 1.7.2 (tried it with 1.8.2 with the same effect). I also tried to deactivate all plugins, but still the same effect.
Now I saved the page within Internet Explorer and opened it in Firefox. The page then works. It seems it has to do with the rendering?
Edit:
So the plugin works with canvas in FF. Every image should have the a canvasimage:
<div class="gsWrapper" style="position: relative; display: inline-block;">
<img width="80" height="80" alt="" src="http://www.adomain.com/wp-content/uploads/2012/04/image4.jpg" title="image4" class="alignnone size-full wp-image-1515" style="display: inline;">
<canvas style="left: 0px; position: absolute; top: 0px; opacity: 1;" width="80" height="80" class="gsCanvas"></canvas>
</div>
In my case only the last image has a canvas field (here the last image has all canvas fields!). So the code is appended to the wrong elements. The plugin has the following JS-code:
this.each(function(index) {
$(this).wrap('<div class="gsWrapper">');
gsWrapper = $(this).parent();
// ...
So first it wraps an element around it and then it is accessed again. Perhaps the error is in these lines together with index?
Seems I found the error. The domain had an temporary URL. Now the site went online and got a new domain. The script made a proxy request and here it somehow appended to the wrong element.
Now I changed the links in the HTML to the new domain and now it works fine. Nevertheless the proxy request seems to fail and should be improved:
$.getImageData({
url: $(this).attr('src'),
success: $.proxy(function(image) {
can = greyScale(image, image.width, image.height);
if ($options.reverse) { can.appendTo(gsWrapper).css({"display" : "block", "opacity" : "0"}); }
else { can.appendTo(gsWrapper).fadeIn($options.fadeTime); }
}, gsWrapper),
error: function(xhr, text_status){
// silently fail on error
}
});
Related
The HTML code below shows the HTML code where I am using SVG to display pictures and then polygons on the pictures and this is done with D3 using image pagination.
Somehow the images are displayed if I am using an main tag outside of the SVG with the same id and class but as soon as I keep it inside SVG itS displays the SVG BOX but not the image inside the SVG
the reason why i have a main tag can be understood if showImages() function is referred from the javascript code
The javascript code shows how the id and classes are being used in the HTML code.
Also, I want the image to be displayed with its original size and scale so what input should I provide to the SVG tag and img tag in terms of height and width to prevent it from changing the size of the image.
I really need to get this done, this is the last time of my task.
Please help me!
<div class="gallery">
<main id="image-gallery" class="images"> </main>
<svg width="500" height="500">
<polygon id='x' style="stroke:#f00; fill:none;" />
</svg>
</div>
...
Either the image can be displayed using the <img> element outside the SVG or using the <image> element inside the SVG. Here is an example of both where image and SVG are positioned absolute in the container.
.gallery {
display: flex;
gap: 10px;
}
.galleryimage {
position: relative;
width: 250px;
height: 150px;
}
.galleryimage img {
position: absolute;
}
.galleryimage svg {
position: absolute;
}
<div class="gallery">
<div class="galleryimage">
<img src="https://via.placeholder.com/250x150.png" id="image-gallery" class="images" width="250" height="150"/>
<svg width="250" height="150">
<polygon id="x" points="30,30 200,40 100,120 50,110" style="stroke:#f00; fill:none;" />
</svg>
</div>
<div class="galleryimage">
<img src="https://via.placeholder.com/250x150.png" id="image-gallery" class="images" width="250" height="150"/>
<svg width="250" height="150">
<image href="https://via.placeholder.com/250x150.png" width="250" height="150"/>
<polygon id="x" points="30,30 200,40 100,120 50,110" style="stroke:#f00; fill:none;" />
</svg>
</div>
</div>
I'm using jquery.panzoom to pan and zoom an image in response to mouse or touch events. This works fine, but now I'd like to zoom the image together with an overlay (either a SVG file or another image). The overlay and the image are exactly the same size, I just want them to behave as a single image with respect to pan and zoom.
I tried putting them both in a div, like this:
<div id="mydiv">
<img src="image.jpg" style="position: fixed; top: 0; left: 0; width: 500; height: 500;">
<img src="overlay.svg" style="position: fixed; top: 0; left: 0; width: 500; height: 500;">
</div>
<script>
$("#mydiv").panzoom();
</script>
The layout gets messed up when I do that.
How can I pan/zoom an image and overlay (or several images) simultaneously?
(I'd like to keep using jquery.panzoom since that seems to work very well on my target platforms, but if there is another library that does the same that could also work)
According to their documentation, this should work:
(function() {
var $section = $('#collectionId');
$section.find('.panzoom').panzoom({
$set: $section.find('.parent > div')
});
})();
<section id="collectionId">
<div class="parent">
<div class="panzoom">
<img src="image.jpg">
</div>
<div>
<img src="overlay.svg">
</div>
<div>
<img src="anotherOverlay.svg">
</div>
</div>
</section>
I'm working with Microsoft Web Expression to create a website and I want a smaller image on mouseover/hover to be replaced with a larger one; similar to thumbnail idea, however looking at my code I just can't find how to implement any of the advises I've looked at here.
HTML part:
<div id="layer11" style="position: absolute; width: 150px; height: 20px; z-index: 1; left: 0px; top: 0px; " class="auto-style17">
<img id="img1" alt="" height="20" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img1',/*url*/'s2.png')" src="s1.png" width="150" /></div>
And here are the javascript functions:
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}
function FP_swapImgRestore() {//v1.0
var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) {
var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } }
doc.$imgSwaps=null; }
}
And I just can't figure out what I should change so that the swapped image is larger rather than compressed on the existing one.
you have to remove the width and height attributes
see http://jsbin.com/nifuvitoqa/1/edit
I'm having a problem with a series of social buttons, and their rollover event.
I have 6 images, with class 'social32' which I'd like to change from their 'off' status to their coloured one. All files are named like 'facebook_32.png' & 'facebook_32_off.png'
$(".social32").each(function(){
var t=$(this);
var src1= $(this).attr("src");
var newSrc = src1.substring(src1.lastIndexOf("/"), src1.lastIndexOf("_off."));
$(this).hover(function(){
$(this).attr("src", "imgs/"+newSrc+"." + /[^.]+$/.exec(src1));
}, function(){
$(this).attr("src", "imgs/"+newSrc+"_off." + /[^.]+$/.exec(src1));
});
});
And the HTML code can't be easier.
<p class="bottom10">
<img class="social32" src="imgs/facebook_32_off.png" width="32" height="32" alt="Facebook" id="Facebook" />
<img class="social32" src="imgs/twitter_32_off.png" width="32" height="32" alt="Twitter" id="Twitter" />
<img class="social32" src="imgs/linkedin_32_off.png" width="32" height="32" alt="LinkedIn" id="Linkedin" />
<img class="social32" src="imgs/skype_32_off.png" width="32" height="32" alt="Skype" id="Skype" />
<img class="social32" src="imgs/googletalk_32_off.png" width="32" height="32" alt="Google Talk" id="GTalk" />
<img class="social32" src="imgs/googlewave_32_off.png" width="32" height="32" alt="Google Wave" id="GWave" />
</p>
For any reason, this works perfectly on IExplorer 8, but doesn't on Firefox, Safari nor Chrome ..
Thanx for your input beforehand!
Use css for css things and use javascript for javascript things.
<style>
.social32{
float: left;
width: 32px;
height: 32px;
text-indent: -9999px;
}
.facebook{
background: url(imgs/facebook_32_off.png);
}
.facebook:hover{
background: url(imgs/facebook_32.png);
}
.twitter{
background: url(imgs/twitter_32_off.png);
}
.twitter:hover{
background: url(imgs/twitter_32.png);
}
/* continue with others */
</style>
<p class="bottom10">
Facebook
Twitter
Linkedin
Skype
GTalk
GWave
</p>
I agree with peter on this one. I would also recommend you create a sprite of both the on and off states of the social network images so you don't have to dynamically load each image on hover. This would aid in preventing the flicker bug in IE as well as reduce your overall bandwidth usage. The benefit of doing so is you no longer need separate classes for the off state, simply a change in background positioning:
/* assumes your icons are 16x16 and you have created a 16x32 icon with on and off states */
.off { background-position: 0 -16px; }
So I have a div whose content is generated at runtime it initially has no height associated with it. When it's generated according to firebug and from what I can alert with js the div still has a height of 0. However, looking at the read-only properties with firebug I can see that it has an offset height of 34. It's this value that I need. Hopefully it's obvious but in case it isn't, this number is variable, it's not always 38.
So, I thought that I could just get that by doing this via jquery...
$("#parentDiv").attr('offsetHeight');
or this with straight js...
document.getElementById("parentDiv").offsetHeight;
But all that is returned is 0. Does it have anything to do with the fact that offset height is a read-only property in this instance? How can I get this height? I mean firebug is figuring it out somehow so it seems like I should be able to.
Edit:
Here's a sample of what the div looks like right now...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">
<HTML style="OVERFLOW: hidden; HEIGHT: 100%" xmlns="http://www.w3.org/1999/xhtml"><BODY><FORM id="aspnetForm" name="aspnetForm" action="blah.aspx" method="post"><DIV id="container">
<DIV id="ctl00_BodyContentPlaceHolder_Navigation" style="Z-INDEX: 1; LEFT: 1597px; POSITION: absolute; TOP: 67px">
<DIV class="TransparentBg" id="TransparentDiv" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; HEIGHT: 94px; TEXT-ALIGN: center">
</DIV>
<DIV class="Foreground" id="ForegroundId" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; TEXT-ALIGN: center">
<DIV id="ctl00_BodyContentPlaceHolder_Navigation1" style="WIDTH: 52px; COLOR: black; HEIGHT: 52px; BACKGROUND-COLOR: transparent; -moz-user-focus: normal">
<IMG style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale src='../images/image.gif'); CURSOR: pointer" height="52" hspace="0" src="..." width="52" />
</DIV>
<DIV id="ctl00_BodyContentPlaceHolder_UserControl" name="ctl00_BodyContentPlaceHolder_UserControl">
<IMG style="DISPLAY: block; VERTICAL-ALIGN: bottom; CURSOR: pointer" height="17" src="..." width="16" />
<IMG style="VERTICAL-ALIGN: top; CURSOR: pointer" height="17" src="..." width="16" />
</DIV>
</DIV>
</DIV>
</DIV></FORM></BODY></HTML>
This code is being generated by a control in a separate library. So here's the actual code creating it in my .aspx page.
<blah:blahControl ID="control" runat="server" />
Ok, it's edited slightly but thats a whole lot more HTML than I had before. The div I was referring to as "parentDiv" before is called "ctl00_BodyContentPlaceHolder_UserControl" up there. That code includes the div in question, it's sibling, parent, grandparent and children. It's almost a direct copy from firebug.
Update:
I should have mentioned this is being done in IE 7. It seemed to work fine one time in Firefox, but it's returning 0 now. Does this provide any new insights of possible work-arounds or anything?
... You all must think I'm nuts.
Update:
Some styling...
.TransparentBg
{
background-color: white;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.Foreground
{
position: absolute;
top: 0px;
}
Are you sure the element is included in the document tree, and rendered? (ie. not “display: none”, but “visibility: hidden” is OK.)
An element that is not actually taking part in the document render process has no dimensions, and will give an offsetWidth/Height of 0.
ETA after code sample added: with your exact code, I get offsetHeight on the div of ‘17’. The first image is sized correctly, the second has no size.
This is correct as rendered(*). Any images that fail to load are replaced by their alt text as an inline span. Your image has no alt text, so it is replaced by an empty string. Normally, as an inline element, this cannot be set to any particular size. The exception is the first image, because you've given it ‘display: block’, which makes it amenable to the explicit sizing provided by width/height.
In Quirks Mode, you would have got little ‘broken image’ icons sized the same as the images were supposed to be. This does not happen in Standards Mode because it is assumed that you know how to use alt text properly if you're using standards.
Either way, the dimensions measurement works fine for me if I replace the "..." URLs with real working addresses.
(*: although you can't actually see it because of the rather weird ‘overflow-hidden’ on html and ‘left: 1597px;’ combo. Well, unless you have a really wide monitor!)
Are you sure it's not a Heisenbug? If you are setting the height somewhere programmatically and then trying to read it soon later, there is a chance DOM would not have updated.
Loading this file with a valid IMG SRC gives 3 alert boxes of "37". Without valid IMG SRC it gives "17" on all three.
What version of Jquery are you using? And which version of FireFox/IE?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">
<HTML style="OVERFLOW: hidden; HEIGHT: 100%" xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<script type="text/javascript" src="jquery.js"></script>
</HEAD>
<BODY>
<FORM id="aspnetForm" name="aspnetForm" action="blah.aspx" method="post">
<DIV id="container">
<DIV id="ctl00_BodyContentPlaceHolder_Navigation" style="Z-INDEX: 1; LEFT: 1597px; POSITION: absolute; TOP: 67px">
<DIV class="TransparentBg" id="TransparentDiv" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; HEIGHT: 94px; TEXT-ALIGN: center">
</DIV>
<DIV class="Foreground" id="ForegroundId" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; TEXT-ALIGN: center">
<DIV id="ctl00_BodyContentPlaceHolder_Navigation1" title="Click to pan the map." style="WIDTH: 52px; COLOR: black; HEIGHT: 52px; BACKGROUND-COLOR: transparent; -moz-user-focus: normal">
<IMG style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale src='../images/image.gif'); CURSOR: pointer" height="52" hspace="0" src="..." width="52" />
</DIV>
<DIV id="ctl00_BodyContentPlaceHolder_UserControl" name="ctl00_BodyContentPlaceHolder_UserControl">
<IMG style="DISPLAY: block; VERTICAL-ALIGN: bottom; CURSOR: pointer" height="17" src="je_fanmap_unavailable.JPG" width="16" />
<IMG style="VERTICAL-ALIGN: top; CURSOR: pointer" height="17" src="je_fanmap_unavailable.JPG" width="16" />
</DIV>
</DIV>
</DIV>
<script type="text/javascript">
$(window).load(function () {
alert($("#ctl00_BodyContentPlaceHolder_UserControl").attr('offsetHeight'));
alert(document.getElementById("ctl00_BodyContentPlaceHolder_UserControl").offsetHeight);
alert($("#ctl00_BodyContentPlaceHolder_UserControl").height());
});
</script>
</DIV>
</FORM>
</BODY>
Try calling the offset function once all the DOM and images are fully loaded using load() instead of document.ready().
$(window).load(function () {
//Put the code for the height here
});
I just found an issue where I was getting the offsetHeight of an element when the doc was ready but it was in a container that was hidden.
It resulted in a offsetHeight value of 0 but firebug said it had a height of 32.