I want to automatically add Alt Tags for all my product images.
I am using OSCommerce. - I would like to preferably add all product images alt tags to be the same as the product names, or similar - can this be done with a script of some sort?
I would be very grateful for the help
Thanks
Its absolutely possible to add Alt tag dynamically via JQuery to all of your <img> tag present on page.
Assuming that you have <img> tags as follows:
<img class="productimage" title="Some Product Name"
src="http://someserver/somepath/images/product_1983212.jpg">
To Add Alt tag dynamically you can try following approach.
1) Load JQuery into HTML page's <head> tag if its not there.
2) Add jQuery document ready event handler which will add alt tags dynamically as follows:
$(document).ready(function(){
$(".productimage").each(function(){
var currentTitle = $(this).attr("title");
$(this).attr("alt",currentTitle);
});
});
Above code will iterate over all <img> tag having class="productimage" and will read its title and add alt equal to title.
Hope this will help you a bit.
Edit:
By looking at your Product detail page, I came up with following code:
$(document).ready(function(){
$("#product-info-wrapper").each(function(){
var currentProdTitle = $(this).find("#product-header").find("span[itemprop=name]").text();
$(this).find("#product_image_holder > img").each(function(){
$(this).attr("alt",currentProdTitle);
});
});
});
Modified the code to consider situation where you have multiple #product-info-wrapper into single page.
Here's an example of what I'm trying to edit:
<script id="login-popup" type="text/template">
<h3 id="cover-msg" class="modal-title">You need to login to do that.</h3>`
</script>
I would like to add: class="title" to the h3 tag. This is being done via a chrome extension, so I can't control the HTML that is rendered.
Here's the caveat: I can't assume that the template will always be the same, so I can't just replace or edit the entire thing. I need to be able to select certain elements within the text and only add things as needed.
The problem I'm having is that the template seems to just be plain text. So I can't select it with something like #login-popup #cover-msg. Please correct me if I'm wrong.
Is it possible to do this with JavaScript/jQuery?
You can follow this type of procedure which gets the text out of the script tag, inserts it into a DOM element so you can use DOM manipulation on it, then gets the resulting HTML out of that DOM element. This allows you to avoid any manual parsing of the HTML text yourself:
var t = document.getElementById("login-popup");
var div = document.createElement("div");
div.innerHTML = t.innerHTML;
$(div).find("h3").addClass("title");
t.innerHTML = div.innerHTML;
It follows this process:
Get the innerHTML from the script tag
Create a temporary div
Puts the HTML into the temporary div where you can then treat it as DOM elements
Using DOM query, find the <h3>
Adds the class to it
Get the HTML back out of the temporary div
Puts the HTML back into the script tag as the modified version of the template.
It works here: http://jsfiddle.net/jfriend00/mqnf1mmp/.
This is for a Javascript application that is only intended to run on a local machine, accessing many large image files from local disk.
Original code like this:
<script>
// Constants, var inits, etc.
</script>
<-- Then html stuff including some control buttons, each one like this -->
<img id="pgb_runStop" onclick="click_runStop()" src="buttons/but_run.png">
<--then a chunk of javascript related to the buttons -->
The thing works OK, see http://everist.org/NobLog/20150424_js_animated_gallery.htm
Now I want to extend it, so all image pathnames are defined as js constants and vars.
Some will remain fixed during lifetime of the browser page, others will change by
user actions.
I'm stuck with one part of this.
How to get the html parser to pay attention to script blocks WITHIN <img .... > statements?
Specifically, I want to do a document.write() within the image src string.
Like: <img src="<script>document.write(B_PATH)</script>something.png">
This is for the initial page display. The images later get changed by scripts, and that's working OK.
But the html parser doesn't seem to notice scripts inside html elements.
I'm a javascript nubie, so I may have some stupid misconception of how it all works.
Am I just doing it wrong, or is this fundamentally impossible due to reasons?
Here's an example:
<script>
// Constants
PGL_BUT_PATH = "buttons/" // where the button images etc are.
</script>
<-- some html stuff -->
<-- including some control buttons, each one like this -->
<img id="pgb_runStop" onclick="click_runStop()"
src="<script>document.write(PGL_BUT_PATH);</script>but_run.png">
<--then a chunk of javascript related to the buttons -->
In debugger, the img element appears as:
<img id="pgb_runStop" onclick="click_runStop()"
src="<script>document.write(PGL_BUT_PATH);</script>but_run.png"/>
The intent was to get this:
<img id="pgb_runStop" onclick="click_runStop()"
src="buttons/but_run.png"/>
I could just give up with trying to have the page initially render with the correct buttons, and have js correct them afterwards. I'm just surprised... Isn't it possible to evaluate js constants during initial html parsing to construct the DOM, in this way?
Edit to add:
Sorry, I wasn't clear enough in the question. What I want is a way for js to make the html content/DOM correct (per js config values that get defined very early on) BEFORE the page first renders. To avoid any flicker or resizings after first render.
So another solution would be to delay the first page render till after some scripts have run, so they can make initial DOM adjustments before the user sees anything. Any way to do that?
Hmmm... actually that would solve another problem I have. I'll try searching for that.
The semantic templating tools suggest are interesting (had never heard of it. http://www.martin-brennan.com/semantic-templates-with-mustache-js-and-handlebars-js/ ) but am I correct that all such scripting add-ons will execute after the page first renders?
You cannot embed a tag within another tag's attribute. So you cannot embed a <script> inside the src of an <img>. That's just invalid won't-be-parsed HTML.
What you can do, though, is write the attribute after the fact:
<img id="uniqueId">
<script>
var img = document.getElementById('uniqueId')
img.setAttribute('src', PGL_BUT_PATH)
</script>
The <img> tag without a src attribute in that is invalid HTML technically, although it will probably work in any browser anyway. But if you want to stay totally legit, create the <img> with JavaScript too.
<div id="uniqueId"></div>
<script>
var elem = document.getElementById('uniqueId');
var img = document.createElement('img');
img.setAttribute('src', PGL_BUT_PATH);
elem.appendChild(img);
</script>
Tthough I really have no idea why would you like to do this.
This one works for me
<img id="pgb_runStop" onclick="click_runStop()"
src = "about:blank"
onerror="javascript:this.src = PGL_BUT_PATH + 'but_run.png'; this.onerror = null;>
or Another way
<script>
function createImg(src) {
document.write("<img src='" + src + "'>");
}
</script>
<script>createImg(PGL_BUT_PATH + 'but_run.png')</script>
Another more generic approach
<script>
function templete(temp, src) {
document.write(temp.replace("$STR", src));
}
</script>
<script>templete('<img id="pgb_runStop" onclick="click_runStop()" src="$STR"/>', PGL_BUT_PATH + 'but_run.png')</script>
Javascript isn't a templating engine in and of itself, and it looks like that's what you're trying to achieve here. Look into a javascript template library such as Handlebars and you'll have more luck.
Unfortunately, JavaScript doesn't work that way you are setting the src to <script></script> which all the browser thinks of it is just a weird URL. Try:
document.getElementById('pgb_runStop').src = PGL_BUT_PATH + 'but_run.png';
You can change pgb_runStop to whatever is the id of the element.
You can use a Framework like Angular.js to do things like that. I don't use angular.js myself but you can of some pretty incredible stuff with it.
Here's a list of even more engines that you can use
You can also use:
document.getElementById('pgb_runStop')setAttribute('src', PGL_BUT_PATH + 'but_run.png');
Basically, you can do:
(function(){window.onload=function(){
document.getElementById('pgb_runStop')setAttribute('src', PGL_BUT_PATH + 'but_run.png');
};}());
Which should function the exact same
Why not write the whole image in:
document.write('<img src="' + PGL_BUT_PATH + 'but_run.png"/>');
Fiddle
I have a DIV containing a loader gif picture :
... some php codes to get the $pdId
... while loop to generate dynamic li's
echo'<li><div class="loadme" id="'.$pdId.'"><img id="qtyloading" src="../../images/loading_6.gif" width="160" height="160"/></div>
.... some other codes
</li>';
..... end of the while loop
There is a textarea tag that will call the external js function onBlur
.... some codes here
echo '<textarea rows="3" cols="30" id="<separator>'.$ud.'<separator>'.$olue.'<separator>'.$pdId.'<separator>" onBlur="yorDesc(this.id,this.value)" >'.$deomer.'</textarea><br />';
and here is the external js file
... some codes to get the id
alert (gid);
document.getElementById("'+gid+'").style.display = "block";
the gid var is the ID of the loadme div, as you see I am alerting it and it showes the correct ID being parsed, and of course you have noticed that the loadme div being generated dynamically with different IDs. I supposed that I would be able to have access to each individual loader DIV by using the above mentioned javascript code, but I am not.
Could you help me to find out why? Ask me if any part of the above code or description is not clear for you I will edit it.
Appreciated.
document.getElementById(gid.toString()).style.display = "block";
This will do the trick. Or you can use (''+gid+'') if you prefer. You almost had it, just mixed too many different quotes together.
If it is id then you can use like.works well.
document.getElementById(gid).style.backgroundColor="red";
In your case need not worry about dynamically created div through PHP.
Fiddle Demo
I'm using a javascript audio player named ZoomSounds. It creates divs of a circular play button and loads content into them like this:
<div id="ap3" class="audioplayer-tobe skin-minimal"
style="position:absolute; width:100px;"
data-type="normal" data-source="sounds/edge.mp3"></div>
What I'd like to do is have other files on the page and load them into the same div (ap3) through clicking their links. ZoomSounds doesn't seem to have any support, and it seems a waste of a nice little plugin. Is there a simple way of doing this? Thank you.
I think the answer depends on what this plugin is doing with the data attributes and when, but if you just want to replace the div#ap3's data attributes you can use jQuery.
So let's say you have another file referenced in an anchor tag like so:
<a class="replace1" href="sounds/replacement.mp3">The Replacement MP3</a>
You can grab that href and replace the div#ap3 data-source attribute with it like so:
(function($) {
$("a.replace1").click(function(e){
e.preventDefault();
var hrefReplacement = $(this).attr('href');
$("div#ap3").data("source",hrefReplacement);
});
})(jQuery);