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.
Related
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.
Is it possible to hide the text "Facebook social module" in Facebook IFRAME like box ?
Ps: The text div belong to a class "clearfix pvs phm" so here is what I tried in my CSS:
.clearfix.pvs.phm{visibility:hidden;}
<!-- HTML -->
<iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FFacebookDevelopers&width=180&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:180px; height:258px;" allowTransparency="true"></iframe>
Sure. First of all, find it's div, table etc. via DOM. Second, add css it's div id (for example face-social), class etc. to these lines;
#face-social{
display: none;
}
if you don't like that solution. You must try iframe. That's why you have to use again CSS and iframe width, height values.
Edit: Change it to;
.clearfix.pvs.phm
{display:none
}
Currently I am using iframes to create tabular navigation for one module.
On module main page I have two tabs, inside one of those frames I have another two tabs after a single selection box. The content inside frames for 3rd and 4th tab will contain most of the content, that will get the frame to overflow. So.. what I want is to start the scroll bar not from 1st/2nd tab (or not first frames created) but from 3rd and 4th tab instead.
1st Tab| 2nd Tab
(SelectBox)
3rdTab | 4th Tab
(The rest of content)
Below is some code example (first frame):
<table>
<tr>
// create tab with td
</tr>
<tr>
// create tab with td
</tr>
</table>
<div id="newstabs" class="bg2" style="border-left:0px; border-right:0px; border-bottom:0px;">
<iframe src ="Download.asp" width="158" height="274" id="download3" frameborder="0"></iframe>
</div>
<div id="newstabs0" style="position:absolute; top:0; left:0; visibility: hidden; margin: 10px;">
<iframe src ="Download.asp" width="158" height="274" id="download2" frameborder="0"></iframe>
</div>
<div id="newstabs1" style="position:absolute; top:0; left:0; visibility: hidden; margin: 10px;">
<iframe src ="Upload.asp" width="158" height="274" id="upload" frameborder="0"></iframe>
</div>
The Download.asp has similar iframe setup, which is where I want the scrolling to work, not from the main page.
How can I do this? Setting scrolling="no" in the main page's iframs disables scrolling on Download.asp page as well.
i have this html on mobile app:
<header class="bar-title">
<a class="button-prev" onclick="history.back(-1)">
BACK
</a>
<h1 class="title">FACEBOOK</h1>
</header>
<div style="overflow:auto;-webkit-overflow-scrolling:touch; height: 100%; width: 100%; padding-top: 42px;" >
<iframe style="height: 100%; width: 100%;" src="https://www.facebook.com/pages/SOMEPAGE" ></iframe>
</div>
but i get error:
Refused to display 'https://www.facebook.com/pages/SOMEPAGE' in a frame because it set 'X-Frame-Options' to 'DENY'
little comment: i dont have access to facebook page options
X-Frame-Options is an response header.
The X-Frame-Options HTTP response header can be used to indicate
whether or not a browser should be allowed to render a page in a
or . Sites can use this to avoid clickjacking attacks,
by ensuring that their content is not embedded into other sites.
It means facebook blocks this kind of behaviour
I have a header.jsp which is included in all pages of my application. The header also contains the navigation menu with 4 page links. When a user will click one of these links to go to the respective page, the whole page reloads. How can i change the color of the link for the current page in the header. below is the header.
<td class="navBtn" onClick="className='navBtnSel';">Customer</td>
<td class="navBtn" onClick="className='navBtnSel';">Branch</td>
<td class="navBtn" onClick="className='navBtnSel';">Reports</td>
<td class="navBtn" onClick="className='navBtnSel';">Create User</td>
<td class="navBtn" onClick="className='navBtnSel';"><div style="padding-right: 14px;">Log Out</div></td>
and this header is included in other pages as below..
<tr>
<td colspan="2" align="left"><iframe src ="Header.jsp?stflg=C" name="head" scrolling="no" frameborder="0" id="head" style="height: 150px; width: 100%;"></iframe></td>
</tr>
<tr>
<td id="searchCell" width="21%" align="left"><iframe style="height: 590px; margin-left: 10px; margin-right: 0px; width: 250px;" frameborder="0" id="search" name="search" src ="SearchFill.do" scrolling="no"></iframe></td>
<td id="bodyCell"width="79%"><iframe style="height: 590px; border-collapse: collapse; width: 100%;" frameborder="0" id="body" name="body" scrolling="auto" src="body.jsp"></iframe></td>
</tr>
I am a beginner in front end. please help.
You can add something like menu_id into each menu-link. Example:
<a href="BranchTemplate.jsp?menu_id=2" ... </a>
The menu_id variable will serve to identify active menu.
You first need a method of reliably identifying the current page. I've found it effective to add a unique ID to each body tag, and an ID to each link, resulting in something like this:
<body id="about">
....
<nav>
<a class="n-main" href="main.html">
<a class="n-about" href="about.html">
</nav>
Then you can re-style current links with a specification like this:
body#main a.n-main, body#about a.n-about { color: red; }
Only the link which is inside the body#about will turn red.
Using backend code, you could also add a .current class to the appropriate link, and then just write a style specification for that.
You need to investigate some server-side technologies to handle the 'include' you are trying to do with the iframe. (Like PHP, ASP.NET, etc.)
With your iframe approach, you are going to make navigating between pages far more complicated than it needs to be.