This is my WordPress website europeanvirtualassistant.com
if you test it on phone it redirects to europeanvirtualassistant.youcanbookme.com I want to remove this redirection but I am unable to find the reason of this redirection. I have checked WP plugin and there is mobile redirect plugin installed. I have checked my header/footer files of theme. and I have also checked .htaccess I have downloaded theme and searched in all files and nothing is in it aswell but there is nothing like which is causing this weird redirection on iPad and mobile. Can anyone help me out in this.
I believe this part is doing that
<div class="overlay-content overlay-content-3280 spb-popup-class-3280">
<p><p>
<iframe id="ycbmiframeeuropeanvirtualassistant" style="width: 100%; height: 1000px; border: 0px; background-color: transparent;" src="https://europeanvirtualassistant.youcanbook.me/?noframe=true&skipHeaderFooter=true" width="300" height="150" frameborder="0"></iframe></p>
<p><script>
<![CDATA[
window.addEventListener && window.addEventListener("message", function(event){if (event.origin === "https://europeanvirtualassistant.youcanbook.me"){document.getElementById("ycbmiframeeuropeanvirtualassistant").style.height = event.data + "px";}}, false);]]></script></p>
as ycbm may not support mobile and is detecting modal height.
Related
Recently, I am working on the Hosted Payment Fields https://www.braintreepayments.com/blog/your-checkout-our-iframes/. And when i input something wrong, The container div 's class is changed, how does this worked? I think there is no way to call the parent with different domain?
the code with bad input.(class : "braintree-hosted-fields-invalid")
<div class="form-control braintree-hosted-fields-invalid" id="hosted-fields-number">
<iframe src="https://assets.braintreegateway.com/hosted-fields/2.15.5/hosted-fields-frame.html#5c7db060-9271-4eac-b4a2-0f405d743293" frameborder="0" allowtransparency="true" scrolling="no" type="number" name="braintree-hosted-field-number" id="braintree-hosted-field-number" style="border: none; width: 100%; height: 100%; float: left;">
</iframe>
<div style="clear: both;">
They're presumably using web messaging, which is specifically designed to provide cross-origin communication. So their script running on the parent page listens for messages from their script running in the iframe and responds to those messages by updating the classes on the field.
Ok, so my company has a downloads page allowing visitors to download information about products or catalogs which can be found here: Downloads
The problem is, when you click on the Brandfolder image, a popup is supposed to appear, which works fine on Google Chrome, Opera, & Safari. However in Internet Explorer and Mozilla Firefox I get a console error stating that:
Brandfolder is not defined
referring to this file:
<div class="container-fluid page-downloads" id="downloads-page-container">
<div class="content-well col-sm-10 col-sm-offset-1 col-xs-12" style="float: none;">
<div class="col-xs-12 col-sm-12" style="padding: 0; margin-bottom: 65px;">
<h1 class="downloads-title">BRANDFOLDER</h1>
<hr />
<div class="brandfolder-section col-xs-12 col-sm-6">
<!-- ONCLICK ISSUE --><button onclick="Brandfolder.showEmbed({brandfolder_id: 'finisswim'});return false;" title="FINIS, Inc. Logos & Other Brand Assets" style="border: none; background-color: transparent; padding: 0; margin: 0;">
<img src="/sca/site-images/Brandfolder-Web-Button.jpg" class="downloads-banner img-responsive catalog-img" alt="Brand Folder">
</button>
</div>
</div>
...
...
...
</div>
</div>
<!-- BRANDFOLDER JS FILE -->
<script type="text/javascript" async="true" src="//d2sdf28wg0skh3.cloudfront.net/bf.min.js"></script>
So I made sure that the file is being loaded and that the content matches, which it does. and then I went to the console, logged window, and checked if Brandfolder populated, and it didn't (but it did in Chrome, Opera, & Safari).
Since it wasn't working, I pulled it down to my localhost, fired it up and it worked fine on all browsers... wtf
my localhost is an exact copy of the live site which is hosted through the NetSuite SuiteCommerce Advanced platform (hate this platform with a passion) any ideas what could be going wrong, seeing how it works in chromium-based browsers but not in others, and works fine in a development environment?
any input is appreciated! - Thanks
Paul with Brandfolder here. For some reason, probably due to NetSuite, the JS snippet for bf.min.js isn't getting loaded in Firefox but it is on other browsers.
Make sure that the following JS code is getting fired on every browser:
<script type="text/javascript">(function(){var e=document.createElement("script");e.type="text/javascript";e.async=!0;e.src="//cdn.brandfolder.com/bf.min.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script>
I set breakpoints on the following function:
if (document.addEventListener && document.addEventListener("DOMContentLoaded", init, !1),
/WebKit/i.test(navigator.userAgent))
var _timer = setInterval(function() {
/loaded|complete/.test(document.readyState) && (init(),
clearInterval(_timer))
}
, 10);
window.onload = init;
The init function is called only on webkit because of the /WebKit/i.test(navigator.userAgent) statement.
In my opinion the DOMContentLoaded event is fired before the script is loaded successfully.
I am developing a web application for a router, and I have two buttons, Scan and Reboot in two different pages . The function for scan is to scan all the connected devices and displaying ( using php ), and that for Reboot is to reboot the whole system. I am using openwrt. I am planning to use a scanning spinner and a rebooting spinner in these pages while it is doing these processes. I got this reference and I tried this but I guess it is not working for the scan and reboot. So Is there a way to make this work using pure JS. (I got images from this link)
EDIT
Here is my code for reboot page
JS
function spin(){
window.onload=document.getElementById("loading").style.display = "none";
}
CSS
#loading {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block; z-index: 99}
#loading-image {position: absolute;top: 40%;left: 45%;z-index: 100}
HTML PHP
<body onload="spin();">
<div id="loading">
<img id="loading-image" src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif" alt="Loading..." />
</div>
<form name="reboot" style="height: 56px;" action="reboot.php" method="post">
<input type="submit" name="reboot" value="Reboot">
</form>
<?php
if (isset($_POST['reboot']))
shell_exec("reboot");
?>
Okay then, lets see now. Where to start?
A number of issues seem apparent to me when I review your method of achieving the task.
1. - you never actually do anything to make the image visible.
2. - you use both window.onload and body.onload
3. - you use the CSS to make the image visible, yet by default, use Javascript to then immediately hide it again. A better option would be to hide it with the css, using the javascript to show it only if that's the appropriate action.
4. - When you click the button, you ask for the same file again - passing Reboot=reboot as a POST parameter. This is all fine and good. But begs the question - how will you then indiate that the reboot has completed? You just get left with a page that says "loading" - it seems rather confusing.
I'm too tired to even consider thinking about a better way to approah the problem. There's likely several solutions to the problem already available.
I suspect that using ajax to periodically poll the server, waiting for any response would be a reasonable way to see when the router is online again. I've only provided a means by which you can show the image if the page is loaded as a result of pressing the button.
reboot.php
<!DOCTYPE html>
<html>
<head>
<script>
</script>
<style>
#loadingDiv
{
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: none;
z-index: 99
}
#loading-image
{
position: absolute;
top: 40%;
left: 45%;
z-index: 100
}
</style>
</head>
<body>
<div id="loadingDiv">
<img id="loading-image" src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif" alt="Loading..." />
</div>
<form name="rebootForm" style="height: 56px;" action="reboot.php" method="post">
<input type="submit" name="reboot" value="Reboot"/>
</form>
<?php
if (isset($_POST['reboot']))
{
shell_exec("reboot");
echo "<script>document.getElementById('loadingDiv').style.display = 'block';</script>";
}
?>
</body>
</html>
I have a Flash Animation inside of iFrame. And when I try to hide it, IE10 keep it displayed and overlapping other content.
<body style="background-color: #EEE">
Testing IE10
<div id="swfDiv">
<iframe src="swf.html" width="500" height="50"></iframe>
<br />
<button onclick="document.getElementById('swfDiv').style.display='none'">Hide</button>
</div>
<div style="background-color: #DDD">
This try to hide the animation, but it is not working on IE10. <br/> It works fine in others browsers and earlier versions of IE.
</div>
</body>
Update 02/08/2013
I found the same problem in Safari (5.1.7)
Apparently the best solution will be move it off the screen:
.xhide
{
display: block;
position: absolute;
left:-9999px;
}
We can add this class on click to hide it, something like:
document.getElementById('swfDiv').className = "xhide";
Navigating away before closing the iframe solved my problem on a XBAP, I think it will work for flash too
var $iframe = $("#id");
$iframe[0].src = 'about:blank';
$iframe.remove();
I've entered this into my code to use facebook comments:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="google.com" num_posts="10" width="610"></fb:comments>
But it cuts of the comments like this http://cl.ly/77fB and the loading graphic doesn't go away. I've tried removing all css that I have and js and it still does the same thing. I looked that code and the iframe that the facebook comments api generates sets a height of 200px. Here's the iframe source code:
<iframe id="f1c27030c" name="f1f67bf5c4" scrolling="no" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; overflow-x: hidden; overflow-y: hidden; height: 200px; width: 610px; " class="fb_ltr" src="http://www.facebook.com/plugins/comments.php?channel_url=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D2%23cb%3Df3ec50dad4%26origin%3Dfile%253A%252F%252Flocalhost%252Ff17ab9b71%26relation%3Dparent.parent%26transport%3Dpostmessage&href=google.com&locale=en_US&numposts=12&sdk=joey&width=610"></iframe>
Not sure what else to do. Thanks!
Update:
So because files I'm loading the comments from are local Chrome is saying it's not safe to load it all: http://cl.ly/77X7
I uploaded the file to my server and it loaded all the way.
Thanks for your help!
This comes from the fact that you put google.com as the URL : Facebook servers tries to contact google.com to finish loading your comments.
Try with localhost instead of google.com, it will show the error message.
So you have to put the URL of the page on which the comments are displayed. It will not work otherwise.
Hope that helps.