We Keep Coding

jQuery selector as parameter is not working

I have this little function to print the image size.
while it works when I just call the function
with size('#prototype); for example, it is not working anymore on resize('#protoimg).
Why? Can anyone help me out, please?
$(document).ready(function(){
function size(a){
var height = $(a).height();
var width = $(a).width();
$('#picbox').find('p.size').remove();
$('#picbox').append('<p class="size">' + width + '-' + height + '</p>');
}
size('#protoimg');
$(window).resize(size('#protoimg'));
)};

Try this:
$(function() {
size('#protoimg')
});
$(window).resize(function() {
size('#protoimg');
});
function size(a){
var height = $(a).height();
var width = $(a).width();
$('#target').html('<p class="size">' + width + '-' + height + '</p>');
}
If #protoimg is an image file, make sure you set attribute width="100%"to avoid overflow.

Try to put to remove the function size(a) out of the $(document).ready(); and put the $(window).resize(); inside
Like this:
function size(a){
var height = $(a).height();
var width = $(a).width();
$('#picbox').find('p.size').remove();
$('#picbox').append('<p class="size">' + width + '-' + height + '</p>');
}
$(document).ready(function(){
$(window).resize(function() {
size('#protoimg');
});
});

Just remember,the $(window).resize(parameter) need a function as the parameter.But the size('#protoimg') is a result of function.so the correct code is:
$(document).ready(function(){
function size(a){
var height = $(a).height();
var width = $(a).width();
$('#picbox').find('p.size').remove();
$('#picbox').append('<p class="size">' + width + '-' + height + '</p>');
}
size('#protoimg');
$(window).resize(function(){
size('#protoimg');
});
)};

Logical ">" and "<" not working inside Jquery function

I have the following code :
<script type="text/javascript">
jQuery(function($) {
var main_content = $('#container'),
position_top = $('#j_idt7\\:idA').position().top,
position_left = $('#j_idt7\\:idA').position().left,
position_width = $('#j_idt7\\:idA').width(),
position_height = $('#j_idt7\\:idA').height(),
gen_box = null,
i = 1;
console.log( 'Top Image: ' + position_top + 'px');
console.log( 'Left Image: ' + position_left + 'px');
console.log( 'Width Image : ' + position_width + 'px');
console.log( 'Height Image : ' + position_height + 'px');
main_content.selectable({
start: function(e) {
x_begin = e.pageX,
y_begin = e.pageY;
},
stop: function(e) {
x_end = e.pageX,
y_end = e.pageY;
if(x_end > position_left + position_width )
return;
if( x_end - x_begin >= 1 ) {
width = x_end - x_begin,
height = y_end - y_begin;
} else {
width = x_begin - x_end,
height = y_end - y_begin;
var drag_left = true;
}
if(width==0 & height==0)
{return;}
$(this).append('<div class="gen_box_' + i + '">Test</div>');
gen_box = $('.gen_box_' + i);
$(gen_box).css({
'background' : '#006600',
'width' : width,
'height' : height,
'position' : 'absolute',
'left' : x_begin,
'text-align' : 'center',
'vertical-align': 'middle',
'Opacity' : '0.3',
'top' : y_begin
})
.draggable({ grid: [1, 1] })
.resizable({
start: function( event, ui ){
var x = event.clientX;
var y = event.clientY;
if(x!=13)
console.log('Test');
}
});
drag_left ? $(gen_box).offset({ left: x_end, top: y_begin }) : false;
i++;
}});
});
</script>
Once I put "==" or "!=" in the part :
if(x!=13)
console.log('Test');
It works without any problem, once I change it by "<" or ">" I got an error in the console saying :
Uncaught SyntaxError: Unexpected token ;
This is really weird !! Any help please ?

You can find escape html code here.
escape html

Use an editor that is designed for writing code.
It looks like the one you're using (which is it?) is ill-suited to writing code: it seems to be HTML encoding your tokens: & is becoming & throughout, and so on.
Likely the same is happening with < and >: they are being HTML-encoded to < and > respectively, and the semicolon in that replacement is causing your syntax error.

Custom Twitter Button with Dynamic Content and Popup Window

I am using the following code which does 2 out of the 3 things I want it to do, shares dynamic content with a custom twitter button:
<script type="text/javascript">
// <![CDATA[
var twtTitle = document.title;
var twtUrl = location.href;
var maxLength = 140 - (twtUrl.length + 1);
if (twtTitle.length > maxLength) {
twtTitle = twtTitle.substr(0, (maxLength - 3)) + '...';
}
var twtLink = 'http://twitter.com/home?status=' + encodeURIComponent(twtTitle + ' ' + twtUrl);
document.write('<a href="' + twtLink + '" target="_blank"' + '><img src="images/twitter.png" border="0" alt="Tweet This!" /' + '><' + '/a>');
// ]]>
</script>
What I would like it to do is also popup in a window rather than a full page view. My knowledge of script is limited so I don't know where to insert the appropriate popup code.
Any help?

instead of document.write you need window.open. Make sure the event is done in a click action, otherwise popup blockers would stop your script
<script type="text/javascript">
function fbs_click() {
var twtTitle = document.title;
var twtUrl = location.href;
var maxLength = 140 - (twtUrl.length + 1);
if (twtTitle.length > maxLength) {
twtTitle = twtTitle.substr(0, (maxLength - 3)) + '...';
}
var twtLink = 'http://twitter.com/home?status=' + encodeURIComponent(twtTitle + ' ' + twtUrl);
window.open(twtLink);
}
</script>
And in your HTML add your image tag like this:
Hope this helps

You can place an ID="twitPop" on the anchor and use this as well.
$('#twitPop').click(function(event) {
var width = 575,
height = 400,
left = ($(window).width() - width) / 2,
top = ($(window).height() - height) / 2,
url = this.href,
opts = 'status=1' +
',width=' + width +
',height=' + height +
',top=' + top +
',left=' + left;
window.open(url, 'twitter', opts);
return false;
});

why wont jQuery remove() work in this case?

Im trying to cause a canvas element to be added to the DOM and then removed after a set time. The killbox() function gets called, but the element is not removed. I believe I have the syntax right, and that there is some underlying issue with removing dynamically added DOM elements.
//con is short for console.log()
function spawnCanvas(e) {
con(e);
var boxheight=50;
var boxwidth=50;
var xpos = e.clientX - boxwidth/2;
var ypos = e.clientY - boxheight/2;
var id = xpos.toString() + ypos.toString();
con("id:" + id);
var tag = "<canvas width='" + boxwidth +
"' height='" + boxheight +
"' style='position:absolute; border:1px solid #000; left:" +
xpos + "px; top:" + ypos + "px;' id='" + id + "'></canvas>";
con(tag);
var t = $(tag);
$("body").append(t);
var p = setTimeout("killbox(" + id + ")", 1500);
}
function killbox(id){
con("in killbox. id:" + id);
$('#id').remove();
}

Within killbox you are removing the element with the literal id id. Instead try;
$('#' + id).remove();
The above will remove the element that has the id that the "id" variable is set to.

Are you sure you don't want $("#" + id).remove();?

because you are searching with an element with the ID id, but you rather wanted to pass the parameter from the function
function killbox(id){
con("in killbox. id:" + id);
$('#'+id).remove();
}

Javascript passing string parameter - then using setStyle

Current function:
function SetPopup() {
x$('body').setStyle('overflow', 'hidden');
x$('#divOne').setStyle('height', document.body.offsetHeight + 'px');
x$('#divOne').setStyle('width', 100 + '%');
x$('#divOne').setStyle('display', 'block');
}
What I would like to do is change this function such that 'divOne' would be read-in as a parameter like this:
function SetPopup(string x) {
x$('body').setStyle('overflow', 'hidden');
x$('#x').setStyle('height', document.body.offsetHeight + 'px');
x$('#x').setStyle('width', 100 + '%');
x$('#x').setStyle('display', 'block');
}
But obviously that doesnt work.
What would I need to do to include x where I have optimistically placed it in the bottom function?

Try this:
function SetPopup(elem) {
x$('body').setStyle('overflow', 'hidden');
x$('#' + elem).setStyle('height', document.body.offsetHeight + 'px');
x$('#' + elem).setStyle('width', 100 + '%');
x$('#' + elem).setStyle('display', 'block');
}

function SetPopup(x) {
x$('body').setStyle('overflow', 'hidden');
x$('#'+x).setStyle('height', document.body.offsetHeight + 'px');
x$('#'+x).setStyle('width', 100 + '%');
x$('#'+x).setStyle('display', 'block');
}