Develop Reference

Trying to use Javascript array to display Random images in <div>

I'm not well know about javascripts, got this code from a website.
Using javascript to display random images from array in div
javascript working fine.
But loaded images displays in random sizes
tried using css style and all css html image attributes to resize them but nothing works, as they are displayed directly through javascript
want something to resize them directly in javascript
code main :
<script>
var arrayImg = new Array();
arrayImg[0] = "a11.jpg";
arrayImg[1] = "a12.jpg";
getRandomImage(arrayImg, "");
function getRandomImage(imgAr, path) {
path = path || 'images/'; // default path here
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
var imgStr = '<img src="' + path + img + alt = "" >';
document.writein(imgStr);
document.close();
}
</script>
code I used to resize image : (but didn't work) :
<script>
var arrayImg = new Array();
arrayImg[0] = "a11.jpg";
arrayImg[1] = "a12.jpg";
getRandomImage(arrayImg, "");
function getRandomImage(imgAr, path) {
path = path || 'images/'; // default path here
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
var img.height = 4vw;
var img.width = 20%;
var imgStr = '<img src="' + path + img + img.height + img.width + alt = "" >';
document.writein(imgStr);
document.close();
}
</script>
even tried using : (but still didn't work)
document.writeln('<td' + '><imgstr"' + height="180" width="160" border="0" ><' + '/td>');

You have a few syntax error in getRandomImage function.
function getRandomImage(imgAr, path) {
path = path || 'images/'; // default path here
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
/*
1. variable name should not contain .
2. the width and height value should be quoted and placed in "style" attribute
*/
//var img.height = 4vw;
//var img.width = 20%;
var imgHeight = '4vw';
var imgWidth = '20%';
/* closed string quotations and placed data in the right attribute */
var imgStr = '<img src="' + path + img + '"'
+ ' style="height:' + imgHeight + ';width:' + imgWidth + ';'
+ ' alt="">';
document.writein(imgStr);
document.close();
}

You have several places where you didn't close quotation marks.
In code main:
var imgStr = '<img src="' + path + img + '"' + ' alt = "" >';
In resize code
var imgStr = '<img src="' + path + img + '" height="' + img.height + '" width="' + img.width + '" alt = "" >';

How do you resize an image in javascript

I have a HTML editor that inserts items from predefined buttons using javascript and would like add a button to be able to post a thumbnail of a downloaded image with a link to view it full size. I have created the following code but it doesn't work and always inserts a 100X100 size image. Can anyone suggest a better way that does work?
// insert HTML code
insertHtml: function (url, title) {
var imgHeight;
var imgWidth;
function setHTMLImageSize() {
imgHeight = this.height;
imgWidth = this.width;
var ImageRatio = (imgHeight / imgWidth);
if (imgWidth > 100) {
imgWidth = 100;
imgHeight = (imgWidth * ImageRatio);
}
return true;
}
var myImage = new Image();
myImage.name = url;
myImage.onload = setHTMLImageSize;
myImage.src = url;
if (imgWidth = 0) {
imgWidth = 100;
}
if (imgHeight = 0) {
imgHeight = 100;
}
this.get_designPanel().insertHTML("<a href=\"" + url + "\" target=\"" + "_blank" + "\" style=\"" + "text-decoration: none" + "\" ><img src=\"" + url + "\" title=\"" + title + "\" width=\"" + imgWidth + "\" height=\"" + imgHeight + "\" /></a><br/>click image to View full size<br/>");
}

You are setting width and height to 100 before the onload function has fired. The onload will happen asynchronously so you should do a check for zero height or width inside the callback.
Edit:-
As observed by enhzflep in the comment below you have also used equal as assignment rather than to check conditions. I'd change them to triple equals === as a rule when you know the type you are expecting.
Is it not going to be simpler to control a thumbnail through CSS anyway? You could set max-height and max-width properties to maintain aspect ratio.

Thanks to everyone ... from the CSS suggestion I have resolved the issue by removing all the code to determine the image size and instead including a style attribute setting the width to 100 and the height to auto into the HTML image code being added to the editor ... see below
this.get_designPanel().insertHTML("<br/>Thumbnail view<br/><a href=\"" + url + "\" target=\"" + "_blank" + "\" style=\"" + "text-decoration: none;" + "\" ><img style=\"" + "width: 100px; height: auto" + "\" src=\"" + url + "\" alt=\"" + title + "\" title=\"" + title + "\" /></a><br/>Click image to view in seperate window<br/>");

"error CS1012: Too many characters in character literal"

i have a JavaScript code of photo gallery with a slider but there's a problem :
var partnum = "<%Response.Write(Request.QueryString["partno"]); %>";
// check if the file is exiset -- it's running in bar() function -- run on servers and local host.
function UrlExists(url) {
var http = new XMLHttpRequest();
http.open('GET', url, false);
http.send();
return http.status != 404;
}
// push images paths to array
function bar() {
var exict = 0;
var counter = 0; //counter of array's index
for (var i = 1 ; exict < 30; i++) {
// if there isn't .jpg or .gif
if (!UrlExists("/assets/catalog/parts/" + partnum + "_" + i + ".jpg") && !UrlExists("/assets/catalog/parts/" + partnum + "_" + i + ".gif")) {
exict = exict + 1;
}
// if there is .jpg
if (UrlExists("/assets/catalog/parts/" + partnum + "_" + i + ".jpg") && !UrlExists("/assets/catalog/parts/" + partnum + "_" + i + ".gif")) {
arrOfImgs.push("/assets/catalog/parts/" + partnum + "_" + i + ".jpg");
counter = counter + 1;
}
// if there is .gif
if (UrlExists("/assets/catalog/parts/" + partnum + "_" + i + ".gif") && !UrlExists("/assets/catalog/parts/" + partnum + "_" + i + ".jpg")) {
arrOfImgs.push("/assets/catalog/parts/" + partnum + "_" + i + ".gif");
gifIndex.push(i);
counter = counter + 1;
}
}
}
but it was not work, so i tried to change var partnum
var partnum = <%= new JavaScriptSerializer().Serialize(Request.QueryString['partno']) %>;
but I got error: "error CS1012: Too many characters in character literal". I'm still not sure that this is the issue, as my original code does work (you can see the initial product image loaded when you visit the site .baumhaus and click on a product range and then any product, you will see the action - before it disappears once it tries to render the thumbnails).

How about
var partnum = '<%= Request.QueryString["partno"] %>'";

jQuery/javaScript : images don't load

I have the following code:
all_images = new Array(Array);
$.get('../dotclear-files/themes/biblio/js/dynamic_ajax_php.php', function(data) {
var w = 0;
$(data).find('image').each(function() {
if (!all_images[w]) all_images[w] = new Array();
all_images[w]['url'] = $(this).find('url').text() + '#comments';
all_images[w]['src'] = $(this).find('src').text();
all_images[w]['title'] = $(this).find('title').text();
all_images[w]['width'] = $(this).find('width').text();
all_images[w]['height'] = $(this).find('height').text();
w = w + 1;
});
$("#carousel-comments").append('<ul></ul>');
for (x=0; x<3; x++) {
$('#carousel-comments ul')
.append('<li>')
.append('<a href="' + all_images[x]['url'] + '#comments" title="' + all_images[x]['title'] + '">')
.append('<img alt="' + all_images[x]['title'] + '" class="jcarousel-img jcarousel-img-' + x + '" width="' + all_images[x]['width'] + 'px" height="' + all_images[x]['width'] +'px" />')
.append('</a>')
.append('</li>');
var img = new Image();
$(img)
.load(function() {
$('.jcarousel-img-' + x)
.attr({'src': all_images[x]['src'], 'alt': all_images[x]['title']})
.fadeIn();
})
.attr('src', all_images[x]['src']);
}
$('#carousel-comments').jcarousel('reload');
}, 'xml');
The first part of this code loads images from a PHP script, that returns an XML file. This part works fine.
The issue comes with the 2nd part: $(img).load(...) It never displays my images.
This can be seen on my test page: it's the 3rd carousel, under the title named "C'est vous qui le dites!" We can see that the titles of the images are displayed... but the images themselves aren't loaded.
What am I doing wrong?
Thanx for any help!

I think you must append the <img> to the carousel.
$(img).appendTo($("#carousel-comments"));
Or something like this.
Edit after the comments exchange:
The element <IMG> in your LI are not the same that your var img = new Image. Then try something like this:
for (x=0; x<3; x++) {
var img = new Image();
img.load(function() {
$(this).fadeIn();
// Also, set your carousel here
});
img.attr('alt', all_images[x]['title'])
.attr('width', all_images[x]['width'])
.attr('height', all_images[x]['height'])
.addClass('jcarousel-img jcarousel-img-' + x)
.attr('src', all_images[x]['src']);
$('#carousel-comments ul')
.append('li')
.append('<a href="' + all_images[x]['url'] + '#comments" title="' + all_images[x]['title'] + '">')
.append(img);
}

Cross browser compatibility on various javascript elements

I am working on application to make it browser compatible. I have a jsp page which will call the Javascript functions for execution. Basically I am displaying a list of contents in my page for selection using a radio button. Here it goes:
JSP Page :
<script language="JavaScript">
loadcodes(10,'codesTable','#TheCodes',' ' ,'desc','<%=compositeDescTagName%>','<%=compositeDescFormName%>','<%=codeFormName%>','<%=codeIdFormName%>','document.resourceform.<%=Globals.ENFORCE_COMMENTS%>');
</script>.
The above function will reference to the following js page:
function loadcodes(depth,tableId,dataSrc,onclickfunc,descFld,compositeDescTagName,compositeDescFormName,codeFormName,codeIdFormName,enforceCommentsFormName)
{
document.writeln("<TABLE height=100% id=PrimaryTable dataSrc='" + dataSrc + "' cellSpacing=0 cellPadding=0 border=0> <TBODY>");
writeNode(depth,dataSrc,descFld,compositeDescTagName,compositeDescFormName,codeFormName,codeIdFormName,enforceCommentsFormName);
document.writeln("</TBODY></TABLE>");
}
function writeNode(depth,dataSrc,descFld,compositeDescTagName,compositeDescFormName,codeFormName,codeIdFormName,enforceCommentsFormName)
{
if (depth <= 0)
return;
document.writeln("<TR onclick=\"toggle(this,'" + dataSrc + "','" + compositeDescTagName + "','" + compositeDescFormName + "','" + codeFormName + "','" + codeIdFormName + "','" + enforceCommentsFormName + "')\" class=tree_indent>");
document.writeln("<TD><IMG dataFld='image' id=Icon class=tree_node>");
document.writeln("<SPAN dataFld=" + descFld + " class=formtext></SPAN>");
document.writeln("<SPAN dataFld=haschildren id=HasChildren style='DISPLAY:none'></SPAN><SPAN dataFld=isleaf id=isleaf style='DISPLAY: none'></SPAN><SPAN dataFld=composite_desc id=composite_desc style='DISPLAY:none'></SPAN>");
document.writeln("<SPAN dataFld=composite_code id=composite_code style='DISPLAY:none'></SPAN>");
document.writeln("<SPAN dataFld=composite_id id=composite_id style='DISPLAY:none'></SPAN>");
document.writeln("<SPAN dataFld=comments_required id=comments_required style='DISPLAY:none'></SPAN>");
document.writeln("</TD></TR>");
document.writeln("<TR style='DISPLAY: none' class=tree_indent>");
document.writeln("<TD><!-- next level -->");
document.writeln("<TABLE class=tree_node id=node dataFld=node valign=top border=0 cellSpacing=1 cellPadding=1 >");
document.writeln("<TBODY>");
writeNode(--depth,dataSrc,descFld,compositeDescTagName,compositeDescFormName,codeFormName,codeIdFormName,enforceCommentsFormName);
document.writeln("</TBODY>");
document.writeln("</TABLE>");
document.writeln("</TD>");
document.writeln("</TR>");
}
var selectedCode;
function toggle(e,dataSrc,compositeDescTagName,compositeDescFormName,codeFormName,codeIdFormName,enforceCommentsFormName)
{
var nextRow;
var nextRow1;
nextRow = e.nextSibling;
hc = e.all.HasChildren;
var isleaf = e.all.isleaf;
if (nextRow.style.display == "none" && isleaf.innerText == "false")
{
nextRow.style.display = "";
e.all.Icon.src = "/edcs/images/minus.gif";
if (nextRow.all && nextRow.all[2] && !nextRow.all[2].dataSrc)
{
nextRow.all[2].dataSrc = dataSrc;
}
}
else if (isleaf.innerText == "true")
{
// reset the bullet on the one already selected
if (selectedCode && selectedCode.all && selectedCode.all.Icon)
selectedCode.all.Icon.src = "/edcs/images/bullet.gif";
e.all.Icon.src = "/edcs/images/right.gif";
re=/'/g;
var str = e.all.composite_desc.innerText.replace(re,"\\'");
eval(compositeDescTagName + ".innerText = '" + str + "'");
eval(compositeDescFormName + ".value = '" + str + "'");
eval(codeFormName + ".value = '" + e.all.composite_code.innerText + "'");
eval(codeIdFormName + ".value = '" + e.all.composite_id.innerText + "'");
commentsEnforced = eval(enforceCommentsFormName + ".value");
if (commentsEnforced == "false")
eval(enforceCommentsFormName + ".value = '" + e.all.comments_required.innerText + "'");
selectedCode = e;
}
else
{
nextRow.style.display = "none";
e.all.Icon.src = "/edcs/images/plus.gif";
}
}
This flow works well in IE browsers but not supported by other browsers. While searching I found the list of elements supported only by IE:
DataSrc
Datafld and also IMG datafld.
Is there any alternative for the above elements with browsers or how could the modifications made in the code so that it is browser compatible? Kindly help and also it would be turn out be a template for cross browser testing.

Cross-browser compatibility is one of the core benefits of using a library such as jQuery, MooTools, etc.
I would recommend one of these if cross-browser compatibility is your aim - as there are entire teams working on those projects.

Start with replacing usage of "all" and "eval" with document.getElementById.
All browsers support extensive debugging tools (i.e. FireBug for Firefox) - use them to see what fails.