I have implemented ZeroClipboard functionality on our site - http://couponvoodoo.com/rcp/Jabong.com/coupons-offers?field_offer_type_tid=All
I am using Drupal-7
It is working fine on the desktop version but not working on the mobile version of the site.
I have put the following code in the footer :
<script type="text/javascript">
copy_coupon_footer();
function copy_coupon_footer(){
var divArray = document.getElementsByClassName("unlock_best_coupon");
for (var i = 0, len = divArray.length; i < len; ++i) {
var offer_type = divArray[i].getAttribute('data-clipboard-text');
// alert('offer_type '+offer_type );
try{
var id = divArray[i].getAttribute( 'id' );
var client = new ZeroClipboard( document.getElementById(id), {moviePath:'/moviePath' } );
client.on( 'load', function(client) {
client.on( 'complete', function(client, args) {try{
var url = this.getAttribute("href");
var coupon_code = url.split('&c=')[1].split('&')[0];
this.innerHTML = coupon_code;
var classname = this.className+' copied_coupon';
this.setAttribute("class",classname);
// window.open(url,'_blank');
window.location.href = url;
}catch(e){}
} );
} );
}catch(e){alert(e.message);}
}
return false;
}
</script>
ZeroClipboard requires Adobe Flash in order to perform it's clipboard function and thus it will not work in any browser that does not have Adobe Flash installed.
So, since there are hardly any mobile devices with Adobe Flash (only a few older Android devices), it won't work on mobile devices.
When I asked this question about an alternative to ZeroClipboard that doesn't require Adobe Flash, no other solutions were offered.
This answer may be a bit late, but I have created a pure JavaScript alternative to zeroclipboard that is very easy to use. Here it is: Github repository. Here is the code:
function clip(text) {
var copyElement = document.createElement('input');
copyElement.setAttribute('type', 'text');
copyElement.setAttribute('value', text);
copyElement = document.body.appendChild(copyElement);
copyElement.select();
document.execCommand('copy');
copyElement.remove();
}
Related
I need to use a content of a .txt file on a web page. The problem is that I can't do it easy way (server-side php). I figured out the trick of opening a text file in the iframe and then asking for innerHTML/innerText. It turns out that people were there before - found the following code, much cleaner than my attempts, at https://zipcon.net/~swhite/docs/computers/browsers/extern_via_iframe.html
It works locally under FireFox and IE, but does not under Chrome. How to make it work under Chrome?
function getIframeContentText( frameID )
{
var elt = document.getElementById(frameID);
//alert( "getIframeContentText:" + elt );
//alert( "getIframeContentText Content:" + elt.contentDocument );
if( elt.contentDocument ) // DOM
{
var iframe_doc = elt.contentDocument;
var range = iframe_doc.createRange();
range.selectNodeContents( iframe_doc.body );
return range.toString();
}
else // IE6
{
var iframe_doc = document.all[frameID].contentWindow.document;
//return iframe_doc.body.innerHTML; // gets HTML
return iframe_doc.body.outerText;
}
}
This is because handling iFrames in ie and firefox is differentthan chrome ,because of chromes same-origin policy
start the browser using chrome.exe --user-data-dir="." --disable-web-security
and you have to wait for the document to load fully ie all the contents of the page ,it may happen there may be iFrame inside iFrame (for generic solution )
$(window).load(function()
{
chromeFrameInitializers(document);//for handling frames and IFrames
});
function chromeFrameInitializers(document)
{
var frame=document.getElementsByTagName("frame");
for(var i=0;i<frame.length;i++)
{
var subDocFrame=frame[i].contentDocument;
//do your stuf
chromeFrameInitializers(subDocFrame)
}
var iFrame=document.getElementsByTagName("iFrame");
for(var i=0;i<iFrame.length;i++)
{
var subDocIFrame=iFrame[i].contentDocument;
//do your stuf
chromeFrameInitializers(subDocIFrame)
}
}
`
it handles for both frame and iFrame (recursively ). for this $(window).load jquery needed
I am using IE in a mobile browser. I add a javascript function to a button that when the User clicks it says 'hello'.
This works.
I then add a timer.
On a desktop browser it works.
it does not work on my mobile browser.
This is my code. (note I Had just tried placing an alert('hi'); in the swapImages() and that did not work either.
var div = document.getElementById('divImage');
var imgCached = document.getElementById('imgCached');
document.execCommand("BackgroundImageCache", false, true);
function OnImgLoaded() {
img1.src = imgCached.src;
}
var interval = 30;
var _timer;
var _index = 0;
function test() {
_timer = setInterval('swapImages()', interval);
}
function swapImages() {
imgCached.onload = OnImgLoaded();
imgCached.src = 'my server url~/' + '0000' + _index + '.jpg';
_index = _index + 1;
if (_index == 10) {
_index = 0;
clearTimeout(_timer);
}
}
UPDATE!!
I had been runningit on Chrome desktop and not IE. I am mow testing it in IE desktop. I get the same erro so now I can debug.
The error is this line:
img1.src = imgCached.src;
It tells me:
Unable to get property 'src' of undefined or null reference
I have changed the code to:
var imgLive = document.getElementById('imgLive'); (I have renamed the img control)
function OnImgLoaded() {
imgLive.src = imgCached.src;
}
I get the same error.
I look in Source and the control is correctly named..
Thanks
i'm not sure that the following line is valid in your mobile phone:
imgCached.src = 'http://127.0.0.1/Cloud/test/' ...
the timer executes successfully, but the image doesn't get the proper src since the device doesn't run a web server on it (unless you configured one).
and to answer your topic question, yes- you can use javascript timers in mobile browsers just like desktop browsers.
hope that helped.
First of all: Do you ever call the test function, that starts the timer?
Second: Maybe it's really document.execCommand("BackgroundImageCache", false, true), that fails - it may not be enabled in the mobile version of IE that you are using. You can check if it's enabled using the queryCommandEnabled function, see more here: http://msdn.microsoft.com/en-us/library/ie/ms536676(v=vs.85).aspx
I need to make iframe enter fullscreen mode,
i am using iframe to display pdf file by google docs viewer
i need this iframe to enter fullscreen.
I have found an code in the internet for displaying html video and iframe and there full screen but when i try to remove the video, the fullscreen never work
In this code the iframe (fullscreen) not working
<!DOCTYPE HTML>
<link rel="stylesheet" type="text/css" href="_styles.css" media="screen">
<title>Fullscreen API | The CSS Ninja</title>
<div class="fl">
<iframe src="http://thecssninja.com/talks/dnd_and_friends/" width="320" height="240" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><br />
<button id="fullscreeniframe" class="button">Fullscreen iframe</button>
</div>
<script>
(function(window, document){
var $ = function(selector,context){return(context||document).querySelector(selector)};
var video = $("video"),
iframe = $("iframe"),
domPrefixes = 'Webkit Moz O ms Khtml'.split(' ');
var fullscreen = function(elem) {
var prefix;
// Mozilla and webkit intialise fullscreen slightly differently
for ( var i = -1, len = domPrefixes.length; ++i < len; ) {
prefix = domPrefixes[i].toLowerCase();
if ( elem[prefix + 'EnterFullScreen'] ) {
// Webkit uses EnterFullScreen for video
return prefix + 'EnterFullScreen';
break;
} else if( elem[prefix + 'RequestFullScreen'] ) {
// Mozilla uses RequestFullScreen for all elements and webkit uses it for non video elements
return prefix + 'RequestFullScreen';
break;
}
}
return false;
};
// Will return fullscreen method as a string if supported e.g. "mozRequestFullScreen" || false;
var fullscreenvideo = fullscreen(document.createElement("video"));
// Webkit uses "requestFullScreen" for non video elements
var fullscreenother = fullscreen(document.createElement("iframe"));
if(!fullscreen) {
alert("Fullscreen won't work, please make sure you're using a browser that supports it and you have enabled the feature");
return;
}
// Should add prefixed events for potential ms/o or unprefixed support too
video.addEventListener("webkitfullscreenchange",function(){
console.log(document.webkitIsFullScreen);
}, false);
video.addEventListener("mozfullscreenchange",function(){
console.log(document.mozFullScreen);
}, false);
$("#fullscreenvid").addEventListener("click", function(){
// The test returns a string so we can easily call it on a click event
video[fullscreenvideo]();
}, false);
$("#fullscreeniframe").addEventListener("click", function(){
// iframe fullscreen and non video elements in webkit use request over enter
iframe[fullscreenother]();
}, false);
})(this, this.document);
</script>
http://www.thecssninja.com/demo/fullscreen/
I've removed video references, try that:
(function(window, document){
var $ = function(selector,context){return(context||document).querySelector(selector)};
var iframe = $("iframe"),
domPrefixes = 'Webkit Moz O ms Khtml'.split(' ');
var fullscreen = function(elem) {
var prefix;
// Mozilla and webkit intialise fullscreen slightly differently
for ( var i = -1, len = domPrefixes.length; ++i < len; ) {
prefix = domPrefixes[i].toLowerCase();
if ( elem[prefix + 'EnterFullScreen'] ) {
// Webkit uses EnterFullScreen for video
return prefix + 'EnterFullScreen';
break;
} else if( elem[prefix + 'RequestFullScreen'] ) {
// Mozilla uses RequestFullScreen for all elements and webkit uses it for non video elements
return prefix + 'RequestFullScreen';
break;
}
}
return false;
};
// Webkit uses "requestFullScreen" for non video elements
var fullscreenother = fullscreen(document.createElement("iframe"));
if(!fullscreen) {
alert("Fullscreen won't work, please make sure you're using a browser that supports it and you have enabled the feature");
return;
}
$("#fullscreeniframe").addEventListener("click", function(){
// iframe fullscreen and non video elements in webkit use request over enter
iframe[fullscreenother]();
}, false);
})(this, this.document);
I have extended the solution provided by #A.Wolff , I have added a button within the Iframe
you can check the solution right here on w3
Full screen toogle with inside/internal button| W3
Regards
I have log4javascript setup so that it displays a log as follows:
However, I would like to get rid off some stuff, and instead would like the UI to be as below:
How can this be done? I am using the InPageAppender
Not easily, I'm afraid. log4javascript doesn't provide any options to do this and the log4javascript console is embedded in an iframe making customization of the CSS difficult. I'll add a configuration option for this in log4javascript 2.0.
You could create your own simplified appender but that would require a little work. A simpler alternative is to remove the UI you don't want using the appender's load event:
var appender = new log4javascript.InPageAppender();
appender.addEventListener("load", function() {
// Find appender's iframe element
var iframes = document.getElementsByTagName("iframe");
for (var i = 0, len = iframes.length; i < len; ++i) {
if (iframes[i].id.indexOf("_InPageAppender_") > -1) {
var iframeDoc = iframes[i].contentDocument || iframes[i].contentWindow.document;
iframeDoc.getElementById("switchesContainer").style.display = "none";
iframeDoc.getElementById("commandLine").style.display = "none";
}
}
});
I'm not sure if there's a config option, but this jsfiddle might get you started:
HTML
There's a delayed log.debug here to check that hiding of the toolbars doesn't break the logging.
<script src="http://log4javascript.org/js/log4javascript.js"></script>
<script type="text/javascript">
var log = log4javascript.getLogger("main");
var appender = new log4javascript.InPageAppender();
log.addAppender(appender);
log.debug("This is a debugging message from the log4javascript in-page page");
setTimeout(function() {
log.debug("This is a debugging message from the log4javascript in-page page");
}, 2000);
</script>
JS
This code waits until the log4javascript load event has fired, and then hides the toolbars.
function removeSwitchesContainers() {
var iframes = document.querySelectorAll("iframe");
iframes = Array.prototype.slice.call(iframes);
iframes.filter(function (iframe) {
return iframe.id && iframe.id.match(/log4javascript_\d+_\d+_InPageAppender_\d+/);
});
if (iframes.length < 1) {
return;
}
var iframe = iframes[0];
var sc = iframe.contentWindow.document.querySelectorAll("#switchesContainer");
sc = Array.prototype.slice.call(sc);
sc.forEach(function (switchesContainer) {
switchesContainer.style.display = "none";
});
}
log4javascript.addEventListener("load", removeSwitchesContainers);
I am using Phonegap.0.9.6, trying to get native tab bar in iPad app but no luck
I download NativeControls from github and setup
By adding .m and .h file in plugin directory and .js file in www directory also adding that .js file in index.html. also addedNativeControls as a key and value in phonegap.plist file and using below code in index.html but no luck.
var nativeControls;
var tabBarItems = new Array('More','Favorites','Search');
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
/* When this function is called, PhoneGap has been initialized and is ready to roll */
function onDeviceReady()
{
nativeControls = window.plugins.NativeControls;
setupTabBar();
showTabBar();
}
function setupTabBar()
{
nativeControls.createTabBar();
var i = 0;
for (i = 0; i < tabBarItems.length; i++)
{
setUpButton(tabBarItems[i]);
}
nativeControls.showTabBarItems('More', 'Search', 'Favorites');
}
function showTabBar()
{
var options = new Object();
options.position = 'bottom';
nativeControls.showTabBar(options);
}
function hideTabBar()
{
nativeControls.hideTabBar();
}
function setUpButton(name)
{
var options = new Object();
options.onSelect = function()
{
alert(name);
};
nativeControls.createTabBarItem(name, name, 'tabButton:'+name, options);
}
function onFail(mesage) {
alert('Failed because: ' + message);
}
thanks.
In case anyone is still look for a solution, like I was, I found https://github.com/tblomseth/cordova-ios-tab-bar which was based on Native Controls. I made a few tweaks and a working example here: https://github.com/squerb/cordova-ios-tab-bar.
According to their wiki:
UIControls are now officially dead as of 0.9.2 and will not be
supported (it never really was officially part of the core). If you
still want this functionality have a look
at:http://github.com/phonegap/phonegap-plugins/tree/master/iPhone/NativeControls/
Source