Develop Reference

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");

Append increasing number on click

I'm trying to append an increasing number to elements on click. I can't seem to make it work.
My code:
$('#on').click(function() {
$("b").click(function(e) {
var numCount = ($("[span class='num'>").length + 1);
var element = $("<span class='num'>" + numCount + "'>" + numCount + "</span>");
$(this).append(element);
});
});
I think It's a simple syntax error in my code, but I'm learning here so I could be completely wrong. It's important for the class to be added too.
Here's a Fiddle

Change
var numCount = ($("[span class='num'>").length + 1);
to
var numCount = ($(".num").length + 1);
You need to find .num elements, not create new ones.
In addition, your element line doesn't create valid HTML either. Try the following:
var element = $("<span class='num'>" + numCount + "</span>");

How can I decrease the character count

I want to decrease the character count of the given text-area as user enters.
I used the below code
var txtArea = $('<textarea class="txtStyle"></textarea>').appendTo('.txtArea');
var rem_txt = 500;
var text = "Characters remaining";
$('.txtStyle').keyup(function () {
debugger;
var txt_txtarea = $(this).val().length;
rem_txt = rem_txt - txt_txtarea;
});
$('<div id="rem">' + text + '=' + rem_txt + ' </div>').appendTo('.txtArea');
But the div is not updating the value of count. please help DEMO HERE

You're not updating the html inside your handler for the keyup, you're just recalculating the remaining amount and not updating the UI.
If you update the inner text inside the event handler you'll see the remaining text:
http://jsfiddle.net/5Lszd/4/
var lengthAllowed = 500,
txtArea = $('<textarea class="txtStyle"></textarea><div id="rem">Characters remaining ' + lengthAllowed + '</div>').appendTo('.txtArea');
$('.txtStyle').keyup(function () {
var charsSoFar = $(this).val().length,
remaining = lengthAllowed - charsSoFar;
$('#rem').text('Characters remaining='+remaining);
});
You haven't handled when the maximum text has been reached though.

Your problem is that you show the initial value outside the keyup function. Fiddle here: http://jsfiddle.net/5Lszd/3/

You can reduce the complexity of your code somewhat to this:
Markup:
<textArea class="txtStyle" maxlength="500"></textArea>
<div id="txtRemaining"></div>
Script
$('.txtStyle').keyup(function () {
$('#txtRemaining').html('Characters remaining ' + (500 - $(this).val().length));
});
Fiddle Demo here

You need to update the content on each keyup event
var txtArea = $('<textarea class="txtStyle"></textarea>').appendTo('.txtArea');
var rem_txt = 500;
var text = "Characters remaining";
$('.txtStyle').keyup(function () {
var txt_txtarea = $(this).val().length;
rem_txt = rem_txt - txt_txtarea;
$('#rem').html(text + '=' + rem_txt); // update the value of #rem
});
$('<div id="rem">' + text + '=' + rem_txt + ' </div>').appendTo('.txtArea');

You need to update the txt, also do not update rem_txt, which supposed to be const
//this should be a const
var rem_txt = 500;
var text = "Characters remaining";
$('.txtStyle').keyup(function() {
var txt_txtarea = $(this).val().length;
updateRemain(rem_txt - txt_txtarea);
});
function updateRemain(rem_txt) {
var rem = $('#rem');
if (!rem.length) {
rem = $('<div id="rem"></div>').appendTo('.txtArea');
}
rem.html(text + '=' + rem_txt);
}
updateRemain(rem_txt);
http://jsfiddle.net/rooseve/WRj5a/1/

you don't update the value after keyup ...
add $('#rem').html(text + '=' + rem_txt); and you should be fine!
http://jsfiddle.net/artificialflow3r/5Lszd/5/

You can simplify your code like this
The main issue is that you are setting rem_txt to 500 subtracting any new characters from an amended value and not from 500. Your code should look a bit more like this
var txtArea = $('<textarea class="txtStyle"></textarea>').appendTo('.txtArea');
$('<div id="rem">Characters remaining = 500 </div>').appendTo('.txtArea');
var text = "Characters remaining";
$('.txtStyle').keyup(function () {
var rem_txt = 500 - $(this).val().length; //Calculate your new length from 500 each time
if($('#rem')) $('#rem').html('Characters remaining = '+rem_txt);
});
I'm creating the div with the initial value in first and then in your keyup function amending it's HTML. You were previously trying to update the HTML for the div outside of the keyup event, so in fact it was only ever running that piece of code once.
fiddle here

InfoBubble not calculating div height properly in Safari

I'm trying to use a customized Info Window implementation with Google Maps API v3 called InfoBubble. As I was doing my development locally, Safari rendered the bubbles fine. However, when I uploaded it to a live server, it no longer calculated the heigh of the bubble content correctly and displays a scrollbar (which I don't want) (see http://luketilley.com/maps/).
I have done some investigating and it looks like the problem comes from this bit of code:
InfoBubble.prototype.getElementSize_ = function(element, opt_maxWidth,
opt_maxHeight) {
var sizer = document.createElement('DIV');
sizer.style['display'] = 'inline';
sizer.style['position'] = 'absolute';
sizer.style['visibility'] = 'hidden';
if (typeof element == 'string') {
sizer.innerHTML = element;
} else {
sizer.appendChild(element.cloneNode(true));
}
document.body.appendChild(sizer);
var size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight);
// If the width is bigger than the max width then set the width and size again
if (opt_maxWidth && size.width > opt_maxWidth) {
sizer.style['width'] = this.px(opt_maxWidth);
size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight);
}
// If the height is bigger than the max height then set the height and size
// again
if (opt_maxHeight && size.height > opt_maxHeight) {
sizer.style['height'] = this.px(opt_maxHeight);
size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight);
}
document.body.removeChild(sizer);
delete sizer;
return size;
};
Specifically, this line:
var size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight);
Upon investigating what values safari reports, I confirmed that safari does indeed report different values when displaying the page locally vs. online.
Doing more testing, I also found that the issues only start when I add an image to the info bubble (check the marker off the coast of Africa).
here is the content that I'm trying to put in the info_bubble
info_content = '<div class="bubble">' +
'<h1>' + markerData.name + '</h1>' +
'<div class="icons">' +
icon_html +
'</div>' +
'<img src="' + markerData.image + '"/>' +
'<p>' + markerData.description + '</p>' +
'<p><a target="_blank" href="' + markerData.url + '"><img src="learn_more.png"/></a></p>' +
'</div>';
Any ideas on what's happening here? is there a better way to calculate the required size?
Update: This may be a bug with Safari. I just spent some time in the debugger and if I set a breakpoint and manually step through the functions, it does the right thing, but if I just let it run, it continues to misbehave. So I guess the question is now: is there a workaround?

Is it possible to use cloneNode to clone multiple divs?

I'm trying to clone to divs in and append them to to other divs (their parents). I'm using clonenode for this but it doesn't seem to work. It clones the div in the first function and appends it to the parent of the div in the second function! Not sure what I'm doing wrong.
Here's the code (*EDIT:*var added):
function cloneQ() {
//Cloning questions and shit
cloneQ.id = (cloneQ.id || 0) + 1;
var question = document.getElementById("question");
var clone = question.cloneNode(true);
var numberOfQuestions = $('.question').length;
var id = "questioncon" + cloneQ.id;
clone.id = id;
question.parentNode.appendChild(clone);
var inid = "question" + cloneQ.id;
var optionid = "optionsdiv" + cloneQ.id;
$('#' + id + ' ' + '.' + 'questionin').attr('id', inid);
$('#' + id + ' ' + '.' + 'options').attr('id', optionid);
$('#' + id + ' h2').html('Question ' + cloneQ.id);
//Question Cloned
}
function cloneforPrint() {
cloneforPrint.id = (cloneforPrint.id || 0) + 1;
var questionprint = document.getElementById("questionprint");
var cloneprint = questionprint.cloneNode(true);
var printid = "questionprint" + cloneforPrint.id;
cloneprint.id = printid;
questionprint.parentNode.appendChild(clone);
var printinid = "thequestionprint" + cloneforPrint.id;
$('#' + printid + ' ' + '.' + 'thequestionprint').attr('id', printinid);
}
LIVE here: http://bit.ly/R8hB2m

Edit : Global vars are the problem.
You aren't putting var in front of your variables, making them global. The cloneForPrint function is picking up vars defined in cloneQ.
Init all the variables properly and you'll get some errors indicating where the problems are.
CloneQ is indeed appending to questions parent, but cloneForPrint then moves it somewhere else.
-- Old answer --
There's not enough here to work out what the problem is. My 1st guess is that the question element has the same parent as the questionprint element.
Based on the code given, cloneQ should definitely append to questions parent. So to give the appearance you've specified the DOM probably doesn't look like what you expect.