Removing image src attribute - javascript

Removing the src attribute on an image tag doesn't seem to redraw the view on iOS(7) or Android (KitKat). Neither does changing the attribute to a blank value. Desktop browsers work as expected.
This DOES remove the attribute but the view doesn't reflect the change:
$('#imgPreview').removeAttr('src');
This DOES change the attribute but the view doesn't reflect the change:
$('#imgPreview').attr('src','');
If the attribute is changed to a valid image path, the view DOES update:
$('#imgPreview').attr('src','http://some/image/path.jpg');
I have a simple test case HERE that shows the issue.
Is there a way that I can force a redraw after changing the src attribute to a blank value or removing the src attribute altogether?

You could force element redraw using this kind of snippet:
$.fn.redraw = function(){
return this.hide().show(0);
};
Or maybe better:
$.fn.redraw = function(){
return this.each(function(){
var zIndex = $(this).css('z-index');
$(this).css('z-index',-1).css('z-index',zIndex);
});
};
Then use it as e.g:
$('#imgPreview').removeAttr('src').redraw();

Related

How to change element "this" in jQuery?

I have this piece of code, which allows me to change the image by clicking on it.
$('img').click(function(){
var src = this.src;
this.src = src.indexOf('_b.jpg') == -1 ? src.replace('.jpg','_b.jpg') : src.replace('_b.jpg','.jpg');
});
I would prefer to click on another element to still be able to change the image. When I change the part in $('myelement'), I need to make sure that the part var src = this.src; refers to the image.
In what do I have to change the this?
Assuming you have only one img tag in your HTML:
$('myelement').click(function(){
var src = $('img').attr('src');
var newSrc = src.indexOf('_b.jpg') == -1 ? src.replace('.jpg','_b.jpg') : src.replace('_b.jpg','.jpg');
$('img').attr('src', newSrc);
});
But generally it's better to select with more specific selector, like id or some unique class attribute, as you might want more images in the document - then $('img') will select an array of all images.
In javascript this refers to current object, in other words contex. General practice is storing context into a variable so that when context changes, lets say by a dom event, you can still reach it.
// stores context into that variable
var that = this;
But apparently your question has nothing to do with this. If you need to change image attributes from another element, you need select the img tag and act on it.
$('.another-element').click(function(){
var newSrc = 'Here goes the new scr attribute';
$('img').attr('src',newScr);
});
You can use id or class for more precise selection.

How to change the name "data-original" attribute name in images with no ids

Context: I am trying a workaround to the lazyload script that does not work well for my setup.
I am not sure this is realistic but, this is what I have in mind:
On a title section click, I want to change all the attributes of the images contained in the section (so the images show).
From data-original to src.
Here is were I am:
$('#s101').click(function(){
var a = $('#b01').next().find('img').attr("data-original");
// alert (a) // will give me the url of the attr. data-original: (http...)
x = a.getAttribute("data-original");
a.setAttribute("src", x);
a.removeAttribute("data-original");
});
This does not work. Could you help?
Try this
$('#b01').next().find('img').each(function(){
$(this).attr("src", $(this).attr("data-original") ).removeAttr("data-original");
});
Following along with your "click" handler methodology, you'd want to do something like this...
$("#btnChangeImage").click(function(){
var a = $("#myImg");
var x = a.attr("data-original");
a.attr("src", x);
a.removeAttr("data-original");
});
Basically, the problem is you're trying to act on an attribute and not an element, and then once you have that attribute you seem to be using an old jQuery API version.
Here's a quick plunk to demonstrate: https://plnkr.co/edit/3kZGz5kDLwaBDmGFzsWU?p=preview

programtical Setting the backgroundImage of an HTML element

I'm trying to set the backgroundImage of an HTML element via:
element.style.backgroundImage = "url(localPath/to/image.gif, basePath);"
Unfortunately, the image is not being displayed and I think it has to do with the base-path, because I have done this before without the base-path.
Oddly, if I remove the basePath, I get an error saying that no such URL exists, but I do not get an error if I keep the basePath.
How can I properly set the backgroundImage?
Is there another method of setting the backgroundImage?
Thanks for the help.
You can't use basePath and you need to remove the semi-colon as part of the CSS value:
element.style.backgroundImage = "url(localPath/to/image.gif)";

.split() breaks code

In the code below, the line that is commented out: var displayPieces = displayWhole.split(" "); Breaks what happens in .subMenuContent area. If I comment out just that line, it works just fine. Any ideas?
$(".subMenuHeader").each(function() {
var displayWhole = $(this).attr('display');
//var displayPieces = displayWhole.split(" ");
});
$(".subMenuContent").each(function() {
$(this).prepend('<div class="subMenuShineLeft"></div>' +
'<div class="subMenuShineRight"></div>');
});
Your problem is due to displayWhole being undefined.
If you want to fetch an element's display from its style to check whether it's block or none, don't use attr, use css. Like this:
var displayWhole = $(this).css('display');
The .attr() function will fetch you the attributes for an HTML element, alright. But display is not a HTML attribute. It is always part of the style attribute. Had you used:
var displayWhole = $(this).attr('style');
Then you'd have the whole style as a string, for you to work on.
The .css() jQuery function, on the other hand, exists so that you can get the parts of the style attribute more easily ;)

Hide Image Title in Slimbox

My issue is a lot like this solved thread, except I'm using Slimbox 2:
Hide Image Title Tool Tip Popup on Mouse Rollover or Hover
When you hover over an image, the "Title" attribute pops up. I need HTML in my image title in Slimbox. So, of course, when you're hovering, the "Title" attribute shows all the HTML code. The code works perfectly when you're viewing the image in Slimbox so no problems there. I just need the Title attribute to be hidden/modified not to show this HTML code.
I tried to change Q.title in slimbox.js to something else (like captionname). Then changed the HTML to call for:
<img src="images/team/small.jpg" class ="headline" border="1" hspace="2" />
"Joe Smith" displays as the Title but when you view the image in Slimbox, captionname does not come up at all and neither does the Title. It's just blank where it should be.
What do I need to modify in slimbox2.js to make this work?
you should indeed use the linkMapper option of slimbox (a function that you can pass as an optional parameter) to override the default behaviour of slimbox, which uses the title attribute of your hyperlink for the caption of the box
this way you can use any standard attribute, say 'alt', or even better a custom one like 'slimboxcaption' to make sure no browser will display its content;
to define the matching attribute use the getAttribute of the 'el' node passed to the function
replace the default "jQuery(function($)" call in your slimbox .js file with this
jQuery(function($) {
$("a[rel^='lightbox']").slimbox({ /* Put custom options here */ }, function(el) {
return [el.href, el.getAttribute("slimboxcaption")];
}, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
then you can use this to pass any html content to the box while hiding it for the user hovering over the link
<img src="/myimage_small.jpg"/>
I would leave the title property alone for accessibility purposes, and modify slimbox.js to read the title attribute immediately on page load, store it in a custom property (called "caption" or something), and them programmatically remove the title attribute to prevent the tooltip. Of course this implies that the rest of the code that references the title property needs to be changed to use the custom property.
You can use the linkMapper parameter to customize the caption shown.
If you are using the compressed slimbox2.js you will have the autoload code in there so you can change it to do just what Josh Stodola explained:
// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
jQuery(function($) {
$("a[rel^='lightbox']").each(function(){
//Set caption and remove title attributes
this.caption = this.title;
}).slimbox({/* Put custom options here */}, function(el){
//Custom linkMapper to grab the description from the caption attribute
return return [el.href, el.caption];
}), function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
I changed the Q-function in the minified version of Slimbox2 from this:
function (Q) { return [Q.href, Q.title] };
to this:
function (Q) { return [Q.href, $(Q).attr("data-captionname") || Q.title] };
This way, the normal title in the link element is preseved and in case the is an attribute called "data-captionname" in the link that is being shown in the modal window (or lightbox if you so will).

Categories