We Keep Coding

How do I create a transparent button in Java Script (Smartface)

I am just trying to make a transparent button in the smartface cloud IDE using java script, and every time I make it transparent it wont read a click. I can increase the opacity all the way to alpha = .1 but when I set it equal to zero it wont work. How can I fix this, or is there another way to do this. I just want the button to take this form...
left : "50%",
top : "50%",
height : "50%",
width : "50%",
(The bottom right hand corner)
This is the code I have for the button (It doesn't work)
var myTextBtn = new SMF.UI.TextButton({
left : '50%',
top : '50%',
width : '50%',
height : '50%',
text : "",
onPressed : alert("Pressed"),
});
myTextBtn.alpha = 0;
page1.add(myTextBtn);

alpha shouldn't affect click unless it is 0. The problem is onPressed accepts callback function. But you are calling alert function there and giving its result to onPressed property.
Try this:
var myTextBtn = new SMF.UI.TextButton({
left : '50%',
top : '50%',
width : '50%',
height : '50%',
text : "",
onPressed : function() {
alert("Pressed");
}
});
myTextBtn.alpha = 0.5;
page1.add(myTextBtn);

How set element alignment according to window size

I want to set the pop up according to window size , alignment like top-left ,top-right, center ,bottom-left ,bottom-right ,bottom-center .how can we set element according to browser window
but the these things fails if i want to select bottom left position .my pop up goes out of window .
example : top : 5% according to window size
left: 45% according to window size
$(id).css('top', '5%');
$(id).css('left', '45%');
i also want to know .what is the meaning of
winH/2-$(id).height()/2

You can do the following to change an elements css on resize:
winH is the window size
winH/2-$(id).height()/2 is window size divided by 2 subtract chosen div height divided by 2
$(window).resize(function()
{
var winH= $(window).height();
if (windowHeight > 400)
{
$(".testDiv").css({
"height" : "20%",
"width" : "20%",
"margin-left": "45%",
"margin-top" : "5%"
});
}
});
JSFIDDLE EXAMPLE

Not able to scroll the image inside fancybox after Initializing Elevate Zoom

I have a dynamic fancy-box image gallery with Elevate Zoom Implemented in it, When the user clicks on from the fancy-box image the Elevate Zoom plugin is initialized and can see the magnified image in the fancy-box.
After disabling the Elevate Zoom plugin I'm not able to scroll the image from the fancy-box.
Is there any way to bind the scroll feature back to the fancy-box div after disabling the Elevated Zoom ?
I'm using Fancy-box 2.15v and Elevate Zoom 3.0.8v
$(".fancybox-thumb").attr("rel","gallery").fancybox({
scrolling: 'no',
prevEffect : 'none',
nextEffect : 'none',
type :'image',
maxHeight : '150%',
maxWidth : '90%',
fitToView : true,
arrows : true,
mouseWheel : false,
afterShow : function(){
$('.fancybox-image').click(function() {
$('.fancybox-image').elevateZoom({
zoomType : "lens",
scrollZoom : true,
lensSize : 900,
});
$('#fancybox-buttons').hover(function() {
$('.zoomContainer').remove();
$('.zoomWindowContainer').remove();
$(".zoomLens").remove();
});
});
},
beforeClose: function(){
$(".zoomContainer").remove();
$('.zoomWindowContainer').remove();
$(".zoomLens").remove();
}
});

WebKit jQuery animation bug

I have two sites I'm working on where I use jQuery to animate some objects via CSS properties. Everything works fantastic in Firefox but there ware some webkit bugs where my objects disappear and reappear off screen before the animation starts.
http://coreytegeler.com/gl/ (click the text box)
$('#front-nav-wrapper').css({'position' : 'fixed','top': '55px', 'opacity' : '1' });
http://coreytegeler.com/justin/ (click any of the boxes)
$("#nav ul li").click(function() {
$("#nav ul li#a").animate({'margin-top' : '-300px' , 'margin-left' : '0px', 'left' : '10px'}, 500, 'swing');
$("#nav ul li#b").animate({'margin-top' : '-200px' , 'margin-left' : '0px', 'left' : '10px'} , 500, 'swing');
$("#nav ul li#c").animate({'margin-top' : '-100px' , 'margin-left' : '0px', 'left' : '10px'} , 500, 'swing');
$("#nav ul li#d").animate({'left' : '10px'} , 500, 'swing');
$("#nav").animate({'margin-top' : '100px'} , 500, 'swing');
});
I'm sure this has to be a known error with an easy fix but I can't seem to find a fix yet :(

From what I can make out, the problem seems to be that webkit can't animate the left property from what is initially an 'auto' value to a pixel offset. What it does is set the property to 0 and then animate from there.
The one solution I can suggest, is to calculate the current pixel offset of each li element immediately before starting the animation, and set their left properties to those offsets.
Something like this:
$("#nav ul li").each(function(){
$(this).css('left', $(this).position().left + 'px');
});
jsFiddle example
This is based on your second example link.

Setting width and height of fancybox

I've tried the following code with little to no avail:
$(document).ready(function(e){
$(".iframe").fancybox(
{
height: 950,
width: 400 }
);
});
I've put everything in quotes and everything without quotes and nothing seems to have any effect of the fancybox. There does seem to be some effect on the width, but it's irregular and temperamental. From what I can tell, all including the width does it set the width to it's default value.

Try:
$(document).ready(function() {
$(".iframe").fancybox({
maxWidth : 950,
maxHeight : 400,
fitToView : false,
width : '100%',
height : '100%',
autoSize : false
});
});