Develop Reference

How to load default profile image if user's original profile image not found

I stuck at one situation that, want to load default profile image to display for the user who didn't upload his/her profile image. I don't know how to achieve that. Below is the code I've written so far
function myFunction(xml) {
var rowsArray = []
var i, j;
var xmlDoc = xml.responseXML;
var table = "";
var x = xmlDoc.getElementsByTagName("messageset");
for (i = 0; i < x.length; i++) {
var name = x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
var row = "<div class=\"row\"><div class=\"msgtime b1\"><?php $messagetime = $message->time ;if($messagetime!= 'yo'){echo convert(time() - $messagetime);}?></div><div class=\"b1\" ><img class='imgs' src=\"" + "../users/"
+ name + "/notification/profilepic.svg" + "\" width=\"30px\" height=\"30x\" alt=\"avatar\" style=\"border-radius: 45px;\" class=\"image\" ></div><div class=\"b2 msginname\" >" +
x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue +
"</div> <div class=\"cmoti \">check motive</div><div class=\"msgoriginal\">" +
x[i].getElementsByTagName("message")[0].childNodes[0].nodeValue +
"</div></div>";
rowsArray.push(row)
}
table += rowsArray.reverse().join('');
document.getElementById("demo").innerHTML = table;
document.getElementById("check").innerHTML = name;
}
Consider my image file paths will be like below from the server response
" ../users/user1/notification/profilepic.svg "
" ../users/user2/notification/profilepic.svg " - This image doesn't exist, as user didn't upload his/her picture
" ../users/user2/notification/profilepic.svg " and so on...
If you see second string in image file paths, second image doesn't exist, so I want to display another default profile image
My dynamic image html is give below from the above code I posted
<img class='imgs' src=\"" + "../users/" + name + "/notification/profilepic.svg" + "\" width=\"30px\" height=\"30x\" alt=\"avatar\" style=\"border-radius: 45px;\" class=\"image\" >
How can I load default profile image if original one not found?

Finding page sizes in InDesign multipage document with different page sizes

I'm trying to write a simple script that looks at the active InDesign file and reports the page width and height. However, I have a multiple page document, and not all pages are the same size. So I cannot use the document page sizes. How do I read the individual page sizes?
here is my starting code:
#target "InDesign"
var doc=app.activeDocument;
// set in inches
doc.viewPreferences.horizontalMeasurementUnits = MeasurementUnits.inches;
doc.viewPreferences.verticalMeasurementUnits = MeasurementUnits.inches;
for(var j =0;j<doc.pages.length;j++)
{
// gather data
var pageW=doc.documentPreferences.pageWidth;
var pageH=doc.documentPreferences.pageHeight;
// display
//$.writeln("w: " + pageW + " h: " + pageH );
$.writeln(doc.pages[j].name);
$.writeln(doc.pages[j].properties);
}

Strike that. Found it.
#target "InDesign"
var doc=app.activeDocument;
// set in inches
doc.viewPreferences.horizontalMeasurementUnits = MeasurementUnits.inches;
doc.viewPreferences.verticalMeasurementUnits = MeasurementUnits.inches;
for(var j =0;j<doc.pages.length;j++)
{
// gather data
var pageW=doc.documentPreferences.pageWidth;
var pageH=doc.documentPreferences.pageHeight;
// display
//$.writeln("w: " + pageW + " h: " + pageH );
$.writeln(doc.pages[j].name);
$.writeln("Page Width : " + doc.pages[j].bounds[3] + "\rPage Height : " + doc.pages[j].bounds[2] );
}

Just a followup. The above answer only works if there is no content in your slug area. The following is a better answer.
#target "InDesign"
var doc=app.activeDocument;
// set in inches
doc.viewPreferences.horizontalMeasurementUnits = MeasurementUnits.inches;
doc.viewPreferences.verticalMeasurementUnits = MeasurementUnits.inches;
$.writeln(doc.pages.item(0).marginPreferences.top);
for(var j =0;j<doc.pages.length;j++)
{
// gather data
var pageW=doc.documentPreferences.pageWidth;
var pageH=doc.documentPreferences.pageHeight;
// write data
$.writeln("Page : " + doc.pages[j].name);
$.writeln(" Page Width : " + (doc.pages[j].bounds[3]-doc.pages[j].bounds[1]) + "\r Page Height : " + (doc.pages[j].bounds[2] - doc.pages[j].bounds[0] ));
}

Replace image with error image by image name with onChange="swapImage()"

Pretty new to Javascipt.
Using a form with on top of the form a image. If they change an option in one of the eight dropdown boxes the image will change. However, if they make a configuration that doesn't exsist, the image is not found and the standard broken imagelink will be displayed.
Is there a way to check when I'm changing a value and trigger the onChange="swapImage()"from a dropdown to trigger an event to check if image exsists, and if not, replace it with an error image?
<script type="text/javascript">
function swapImage(){
var image = document.getElementById("imageToSwap");
var hoogte = document.getElementById("hoogte").value;
var bt = document.getElementById("bt").value;
var fase = document.getElementById("fase").value;
var aardlek = document.getElementById("aardlek").value;
var kook = document.getElementById("kook").value;
var groepen = document.getElementById("groepen").value;
var merk = document.getElementById("merk").value;
image.src = "http://www.groepenkasten.expert/images/" + merk + "/" + hoogte + "_" + bt + "_" + fase + "_" + aardlek + "_" + kook + "_" + groepen +".gif";
};
Because the image is Dynamic, there is no full page reload,. Therefore it will not detect the error that the broken image produce when the image doesn't exsist.
Link to the form: http://www.groepenkasten.expert/meld-uw-storing/kant-en-klare-groepenkasten

Find the last element that has appeared DOM html

I have a code that puts images on a table(html), and I want to focus on the image that has just appeared.
I know that i have to use $(this) but i don't know how, here is my code
function positioning(year, mon) {
$('#' + year + ' .' + mon).prepend('<img class="black_point" src="./images/circle.png"/>');//that adds the image
var table = document.getElementById("table");
var images = table.getElementsByTagName("img");
//here I need the current image I had just add to send to that function
function connect(images) {
var tabBcr = table.getBoundingClientRect();
var imgBcr = image.getBoundingClientRect();
x = imgBcr.left + (imgBcr.width / 2) - tabBcr.left;
y = imgBcr.top + (imgBcr.height / 2) - tabBcr.top;
}
}
I hope I have explained well .

I think it will work, add this where you want to get that img element:
var imgelem=$('#' + year + ' .' + mon).find("img:first");

First a tag created in a Javascript loop not implemented

I am trying to populate a div (class='thumb") with thumnailpictures. The name of the pictures is gathered from an xml file. Every thumnail picture is encapsulated with an a-tag that points to a function to show the full picture.
On some browsers the first thumbnailpicture seems not to have this a-tag...clicking on it gives no action...
var rubriek = gup('rubriek'), // rubriek is a parameter in the url of this page pointing a specific photogallery
gallerij = rubriek + "gallery.xml",
xmlDoc = loadXMLDoc(gallerij),
x = xmlDoc.getElementsByTagName("filename"),
legebron = x[0].childNodes[0].nodeValue;
for (i = 0; i < x.length; i++) {
var beeldnummer = x[i].childNodes[0].nodeValue,
index = i + 1,
kleinbeeld = "/" + rubriek + "images/thumb/" + beeldnummer;
$('.thumb').append('<p><a class="kleintje" onclick="toonDezeFoto("' + beeldnummer + '",' + index + ',' + x.length + ');">
<img src="' + kleinbeeld + '" id="' + index + '">
</a></p>');
}
See http://www.karinedaelman.be/foto.php?rubriek=Mensen/
Found the solution: the z-index of the div that keeps the thumbnails was too low. Another div that has the site logo in it had a higher z-index and a width of 100%. Because of that the first thumbnail image was on a layer below the site logo and could not be accessed by the mouseevents....