We Keep Coding

Safari Resizes SVG after hover when using jQuery Rollover Data Attribute

This seems to be a Safari exclusive bug, and I can't seem to find any information on why it might even be happening.
It's only on Safari, and only using SVG.
I am using the Data Attribute rollover technique using jQuery.
$("img.rollover").hover (->
imgRolloverSwap($(#))
), ->
imgRolloverSwap($(#))
imgRolloverSwap = ($img)->
srcName = $img.attr('src')
$img.attr('src', $img.data('rollover'))
$img.data('rollover', srcName)
The SVG is embedded with the IMG tag, and basically all it does is switch out the rollover image for the one inside the data attribute.
My HTML is thus:
<div id="social-links">
<a href="https://www.facebook.com/pages/StackCommerce/220449001487225">
<img data-rollover="/assets/img/footer/facebook-rollover.svg" class="rollover" type='image/svg+xml' src="/assets/img/footer/facebook.svg" />
<!-- <img class="rollover" src="/assets/img/footer/facebook.svg" alt="facebook link" target="_blank"> -->
</a>
<a href="https://www.linkedin.com/company/stackcommerce">
<img class="rollover" src="/assets/img/footer/linkedin.svg" alt="linkedin link" target="_blank">
</a>
<a href="https://plus.google.com/u/0/b/104759401634432683234/104759401634432683234/aboute">
<img class="rollover" src="/assets/img/footer/google.svg" alt="google plus link" target="_blank">
</a>
<a href="https://twitter.com/stackcommerce">
<img class="rollover" src="/assets/img/footer/twitter.svg" alt="twitter link" target="_blank">
</a>
</div>
The CSS(Sass) is this:
#social-links {
#extend .col-xs-12, .col-sm-3, .col-md-2;
a {
#extend .col-xs-3, .col-sm-6;
margin-bottom: 15px;
}
img {
#extend .img-responsive;
}
}
However, on first hover the image works, but when you roll off, the image gets smaller.
This happens if you use the jQuery technique or if you use vanilla JS to change out the src name with a regular expression.
This doesn't happen to other image formats, and I have tried setting different 100% widths on nearly every element of the cascade.
Fixes from these threads don't seem to be fixes:
SVG resizes on hover in safari only
Scaling/Resizing SVG in an HTML
Rollover SVG images resizing in Safari and IE
Perhaps someone can shed some light on why this is happening, or a technique to help in Safari?
You can see it here on this page, and at the bottom of it in the footer.
http://beta.stackcommerce.com.s3-website-us-east-1.amazonaws.com/publishers/
Thanks in advance!

Wow slider and fancybox (lightbox) won't work together

Hi, my FancybBox code works but then I start adding wowslider code then only the wowslider works properly. How do I solve this?
Here is the link to the page:
http://makaticitycondo.com/execstud_greenbelthamilton.html
If you click on Inquire Now button, a lightbox iframe is supposed to appear. But instead redirects it to a new page.
How can we solve this?

In link specify the attribute data-fancybox-type="iframe"
Refer the link
HTML:
<a class="fancybox" data-fancybox-type="iframe" href="inqsend_ghes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/inquire.png',1)"><img src="http://makaticitycondo.com/images/inquired.png" name="Image2" width="204" height="120" border="0" id="Image2"></a>

I’m using a multilanguage script to change from lanquage. Now I’m having troubles in using by the image

I am new for script and jQuery
I’m using a multilanguage script to change from language. Now I'm having troubles to change from a language by using the image,
<img src="/flags/us.png" alt="en_EN" />
<img src="/flags/it.png" alt="it_IT" />
<img src="/flags/fr.png" alt="fr_FR" />
here after i dnot know how to use this image tag
what i want from this image tag , when i am click this image i want the alt value of corresponding image click.
Hoe to get it...
its possible or else give any other idea
thanks
Kumar

Put a class in your anchor and try this
<img src="/flags/us.png" alt="en_EN" />
<img src="/flags/it.png" alt="it_IT" />
<img src="/flags/fr.png" alt="fr_FR" />
$('a.lang img').click(function(){
var alt=$(this).attr('alt');
});

<a class='lang_link' href="#"><img src="/flags/us.png" alt="en_EN" /></a>
Assuming your links have a class of lang_link, you can look inside the link to see what language should be chosen.
$('.lang_link').click(function(){
var lang = $(this).find('img:first').attr('alt');
});

Fancybox not working with images from Twitter API

With Fancybox 2 the example below works flawlessly (left out other code)
<a class="fancybox" href="https://si0.twimg.com/profile_images/2169856486/avatar.jpg" title="some title">
<img src="http://a0.twimg.com/profile_images/2169856486/avatar_normal.jpg" alt="" />
</a>
but the code below load the image on a separate page
<a class="fancybox" href="https://api.twitter.com/1/users/profile_image?screen_name=boris&size=original" title="some title">
<img src="http://a0.twimg.com/profile_images/2169856486/avatar_normal.jpg" alt="" />
</a>
The problem seem to be with the image URL the Twitter API supplies which returns a (301) redirect to the actual location of the full image. Is there any way i can get Fancybox to work with images that are supplied using a redirect and that the popup window still has the size of the served image.
Help would be appreciated.
Frank

Since the second code/link doesn't contain an image extension (jpg, gif, png), fancybox cannot determine what type of content is trying to open so you need to tell it.
Either do :
One: Add the type option to your custom script
$(".fancybox").fancybox({
type: "image"
});
Two : add the data-fancybox-type attribute to your link
<a class="fancybox" data-fancybox-type="image" href="https://api.twitter.com/1/users/profile_image?screen_name=boris&size=original" title="some title"><img src="http://a0.twimg.com/profile_images/2169856486/avatar_normal.jpg" alt="" /></a>

how to get image height and width from href?

I tried to get the image height and width from a href link image, but no luck. is there anyone know how to solve this problem?
here is the code:
<a href="/images/int_kit_a_set.jpg" class="upload">
<img src="/Assets/images/int_kit_a_set_thumb.jpg"
ondragstart="return false" height="108" width="144" alt="" />
</a>

Your HTML:
<img src="/Assets/images/int_kit_a_set_thumb.jpg" ondragstart="return false" height="108" width="144" alt="" />
Javascript w/jQuery:
var image = $("<img />").attr("src", $(".upload").attr("href"));
$(document).append(image);
alert(image.height());
alert(image.width());
image.remove();
I didn't test the javascript... but I'm not really sure your question is clear... so maybe this is what you wanted, maybe not.
Essentially, I'm grabbing the HREF attribute of the link, creating a new image on the page with that url, measuring the image, and then removing it from the DOM.
You could add a style to the image which placed it off screen or something... but you'd have to mess with it to find something that worked cross-browser. Some browsers don't consistently load images which aren't visible. I'm also not sure if you'd run into any timing issues with my script.

Putting it all together:
alert( new Image().src = $('.upload').attr('href')).width );