Appended anchor link is not active on Safari / iPhone - javascript

I've got a function, used by a lot of different parts of my site which calls a confirmation box. When it's called it formats the box with the various elements and appends it to the body, like so...
$('body').append("<div id=\"confirmation\">confirmed cancel</div>");
Now, this works perfectly for everything accept the iPhone Safari browser, which doesn't seem to activate, or load the anchor into the DOM properly... it is not clickable. This is the problem, tho the box appears correctly, touching the anchor does nothing. Console.log proves this.
Any ideas?

Have you tried doing
$div = $('<div>', { id : "confirmation"});
$aConfirmed = $('<a>', { href : "#", class : "confirmed", text: "confirmed"});
$aCancel = $('<a>', { href : "#", class : "cancel", text: "Cancel"});
$div.append($aConfirmed).append($aCancel);
$('body').append($div);
And then use some event handlers like (this assumes jQuery > 1.7
$(document).on("click", "a.confirmed", function(){
confirmed();
});
$(document).on("click", "a.cancel", function(){
closeConfirm();
});

Try using something other than an anchor tag for testing and see if that works.

This very particular situation was solved by moving the anchor so it did not overlay an embedded video. When the anchor was placed over the embedded video on the iPhone - touch events above it were disregarded in favour of the touch to take to quicktime and play video event.

Related

Open fancybox iframe when click on a div

Using fancybox2 and try to open YouTube video when click on div
<div class="vid" data-href="http://www.youtube.com/embed/gGFXXWsCiVo?autoplay=1">This DIV should open fancybox</div>
$(".vid").fancybox({
type: "iframe",
onStart: function (el, index) {
var thisElement = $(el[index]);
$.extend(this, {
href: thisElement.data("href")
});
}
});
But its dosent work, please help.
jsfiddle
Well, I don't know why you are complicating this fancybox thing like this,
Why do you need your 'thisElement' var? You should give us some more details to be sure we really understand what you need... I give you here some tips to open fancybox.. :
when you use fancybox, just start it like this :
//event function(){
$('.vid').click(function(){
$.fancybox({
//settings
'type' : 'iframe',
'width' : 640,
'height' : 480,
//You don't need your thisElement var, see below :
'href' : $(this).data('href')
});
});
and put your settings into it,
here is a starting point for you, now just customize it to make it better for your needs :
http://jsfiddle.net/rtp7dntc/9/
Hope it helps!
To make things much simpler you could use the special data-fancybox attributes on your div like
<div class="vid" data-fancybox-href="http://www.youtube.com/embed/gGFXXWsCiVo?autoplay=1" data-fancybox-type="iframe">This DIV should open fancybox</div>
Then use a script as simple as this
jQuery(document).ready(function ($) {
$('.vid').fancybox();
}); // ready
See JSFIDDLE
NOTE:
The disadvantage of triggering fancybox programmatically as in the accepted answer is that it will only trigger a single fancybox but won't work for a gallery, while you can bind a fancybox gallery of several divs using the data-fancybox-group attribute.

Fancybox close button not showing when using different template

I have a page where I need to use 2 different FancyBox styles for different elements on the page. To achieve that, I added tpl option and modified stylesheet accordingly. Here is what I have:
$(document).ready(function() {
$(".login").fancybox({
closeClick : false,
closeBtn : true,
tpl: {
wrap : '<div class="fancybox-wrap1" tabIndex="-1"><div class="fancybox-skin1"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>'
}
});
});
In my CSS, I added new styles for .fancybox-wrap1 and .fancybox-skin1. Styles work great BUT on the FancyBox with modified template "close" button completly disappears! I tried both adding and deleting closeBtn from tpl but it doesn't seem to make any difference.
I also have a demo here (eventually I will need different background-images for FancyBox, not just background-color, that's why I'm doing it).
What am I doing wrong? Any help will be greatly appreciated!
Your .fancybox-skin1 div still needs to have the fancybox-skin class applied to it. If you look at the Fancybox code version 2.1.2 (sometimes that's the only way to figure things out when they aren't well documented) you'll see that it finds the skin by searching for that class (line 884):
$.extend(coming, {
skin : $('.fancybox-skin', coming.wrap),
outer : $('.fancybox-outer', coming.wrap),
inner : $('.fancybox-inner', coming.wrap)
});
then it uses that reference to append the closeBtn (line 1440):
// Create a close button
if (current.closeBtn) {
$(current.tpl.closeBtn).appendTo(F.skin).bind('click.fb', F.close);
}

grumble.js, jQuery plugin (Bubble popups): how to make it not polute my document body with unremovable trash?

I want to show a popup many on click. I want that many to be in a bubble. So I created a demo: here. But that Bubble generator plugin i use tends to keep tons of trash in the DOM each time it shows a popup. Well so I tried to destroy trash via
$('.grumble-text').remove();
$('.grumble').remove();
$('.grumble-button').remove();
But it somehow brakes it at all=( So how to change grumble-bubble popup plugin code to make it either keep DOM clean or at least make plugin independent of trash it creates?
I've recently updated the plugin to provide better control of positioning and angle. The update also persists the grumble, invoking the plugin more than once on an element will not create extra left over DOM.
Try updating to the latest code. The code below should now work as you expect.
var html = ''
+'Download me'
+'<br/>'
+'Edit me'
+'<br/>'
+'Delete me';
var $grumble = $('#grumble3');
$grumble.mouseup(function(eventObj) {
$grumble.grumble({
text: html ,
angle: (Math.random() * 360 + 150),
distance: 30,
hideOnClick: true,
onShow: function() {
$grumble.addClass("hilight");
},
onBeginHide: function() {
$grumble.removeClass("hilight");
}
});
}).mousedown(function() {
$grumble.addClass("hilight");
});
Thanks for your interest. If there are any further problems please raise them as bugs on the github page. https://github.com/jamescryer/grumble.js
Use the grumble and button parameters on the onHide callback like this:
$('#grumble').grumble({
text: 'Whoaaa, this is a lot of text that i couldn\'t predict',
angle: 85,
distance: 50,
showAfter: 4000,
hideAfter: 2000,
onHide: function(grumble, button) {
grumble.bubble.remove();
grumble.text.remove();
button && button.remove();
}
});
This allows you to remove only the "trash" (I prefer "leftovers") associated with that specific tooltip/popup/bubble. Note that button only exists if hasHideButton is true, hence the button && existence check.
Why do you want to remove it? Is the 'trash' causing problems with browser performance?
In general, the only way to do this is to dig into the plugin source and add a function to remove the plugin, if one is not already present. If you just remove the related DOM elements you will leave behind references to them and events handlers that access them.

Opening Shadowbox from javascript function

I'm trying to open Shadowbox from within a radio button onclick event on a asp.net web form without success. I was initially opening it using a button click which worked fine, but now need to make sure it happens when the radio button option is selected. I then tried to click the button in javascript (button.click()), but that only worked in IE and Newer versions of firefox. So I have opted to use Shadowbox.open, but it is causing some issues. Here is my code:
if (yes.checked == true)
{
var url = 'http://localhost:52963/items.aspx';
Shadowbox.open( { content: url,
type: "iframe",
title: "sbTitle ",
options: { initialHeight:350,
initialWidth:450,
loadingImage:"loading.gif",
handleUnsupported: 'link'
}
});
}
This just seems to bring up the overlay but doesn't open the web page inside it. Anyone know where I'm going wrong?
Apparently I needed to add a player as well as a type. So the amended code is this:
Shadowbox.open( { content: url,
type: "iframe",
player: "iframe",
title: "sbTitle ",
options: { initialHeight:350,
initialWidth:450,
loadingImage:"loading.gif",
handleUnsupported: 'link'
}
});
I had a lot of trouble with this, I tried firing click using .trigger('click') from jquery , but that didnt work in chrome (worked in firefox)
Turns out the answer is pretty simple, similar to e-on answer, but dialed down.
Your images are in a normal shadowbox gallery
<div class="gallery">
<a href="/img1.jpg" rel="shadowbox[gallery1]" >
<img id="Image0" src="/img1.jpg" />
</a>
<a href="/img2.jpg" rel="shadowbox[gallery1]" >
<img id="Image1" src="/img2.jpg" />
</a>
</div>
Then your clickable link
Click to view all images
I wired up the clickable link via jquery in a document.ready call
$('.galleryLauncher').click(function () {
//gallery to launch
var id = $(this).attr('gallery');
//get the first item out of the cache
var content = Shadowbox.cache[1].content;
//default options object
var options = {};
//now we can open it
Shadowbox.open({
content: content,
player: "img",
gallery: id,
options: options
});
return false;
});

jQuery UI Dialog and Flash in IE

I've been trying to get Zero Clipboard and jQuery UI Dialog to play nice together, and it's proving to be rather difficult.
Zero Clipboard allows copying to clipboard from Javascript by placing a transparent Flash movie over a button, so that the user clicks on the Flash when he tried to click the button. This works nicely and cross-browser as you can see in the demo page.
However, when trying to use this in a jQuery UI Dialog box something seems to go wrong.
First, I discovered that the flash element must be placed inside the dialog element, otherwise Chrome and IE refuse to respond to click events. This means I can't use the glue convenience method, but that's OK.
However, now IE for some reason won't accept the setText method on the Flash element.
An example of what I did is here. My code starts around line 300, and the most relevant lines are:
$("#showme").dialog({autoOpen: false, width: 550, height: 200});
$("#showme").bind("dialogopen", function() {
if($("#clipflash").length == 0) {
var btn = $("#d_clip_button");
$("<div id='clipflash' style='position:absolute; background: #f00; z-index: 9999' />")
.css(btn.position())
.width(btn.width())
.height(btn.height())
.html(clip.getHTML(btn.width(), btn.height()))
.appendTo("#showme");
}
});
I colored the div red so it's easier to spot and set its z-index to 9999, just to be safe. I then set the position and size to cover the "button", and add the HTML for the Flash element with clip.getHTML().
I've been working on this for several hours now, so any help would be greatly appreciated.
Almost forgot: my problem is that IE7 says "Object does not support this property or method" inside the Zero Clipboard code.
UPDATE
powtac's comment points to something that looks really promising:
I forgot the own golden rule: In
order for the Flash ExternalInterface
to work in IE 7, you have to stuff the
EMBED/OBJECT HTML into the DIV element
AFTER it gets appended to the DOM. Stupid IE.
However, switching the lines .html(clip.getHTML(btn.width(), btn.height())) and .appendTo("#showme") didn't help. Even doing a setTimeout for adding the flash HTML later did not help. I feel like I'm really close, though...
OK, so powtac did point me in the right direction, but there was one element missing: using the jQuery html() function did not have the same effect as simply setting innerHTML. If would be nice if somebody could explain why.
So, the fixed code looks like this:
$("#showme").bind("dialogopen", function() {
if($("#clipflash").length == 0) {
var btn = $("#d_clip_button");
$("<div id='clipflash' style='position:absolute; background: #f00; z-index: 9999' />")
.css(btn.position())
.width(btn.width())
.height(btn.height())
.appendTo("#showme")
[0].innerHTML = clip.getHTML(btn.width(), btn.height());
}
});
Also, I forgot to put DOCTYPE in the example page, so the offsets are wrong in IE. My bad.
I adapted your answer to a reusable method, and fixed a few position issues (I had to add position:absolute, and use outerWidth() and outerHeight().
Demo.
function setupCopier(selector, buttonSelector, callback, opt_dialogSelector){
var copiedText = $(selector).text();
ZeroClipboard.setMoviePath('http://dl.dropbox.com/u/464119/Programming/javascript/libraries/ZeroClipboard/ZeroClipboard.swf');
var clip = new ZeroClipboard.Client();
clip.setText(copiedText);
clip.addEventListener('complete', callback);
$(buttonSelector).each(function(){
clip.glue(this);
});
// Make sure Zero Clipboard is on top
$("#ZeroClipboardMovie_1").
parent().
css("z-index", 2000);
if (opt_dialogSelector) {
$(opt_dialogSelector).bind("dialogopen", function() {
if($("#clipflash").length === 0) {
var btn = $(opt_dialogSelector).find(buttonSelector);
$("<div id='clipflash' style='position:absolute; z-index: 9999' />")
.css(btn.position())
.width(btn.outerWidth())
.height(btn.outerHeight())
.appendTo(opt_dialogSelector)
[0].innerHTML = clip.getHTML(btn.outerWidth(), btn.outerHeight());
}
});
}
}
$(function(){
setupCopier('#copy-div', '.copy-button', function(){
alert("Copied");
}, '#dialog');
$("#open-dialog-button").click(function(){
$("#dialog").dialog("open");
});
$("#dialog").dialog({autoOpen: false, modal: true, resizable: false, draggable: false,
title: "Create your Free Personal Bar now", height:200, width:300});
});

Categories

Resources