I am experiencing a weird issue with iframes displayng on some phones and not displaying on some phones.
(Displays on all androids)
(Does not work on iphone 6,7 but works on 7 plus and the 7S and a few other iphones)
<div class="col-lg-6 col-md-6">
<iframe src='http://app.brandyourcar.com/signup/index/form-main-display-group-thingy' style='border: 0;' width='100%' height='770px' scrolling='no'></iframe>
</div>enter code here
I have tried a lot of the solutions on Stack and none seem to work for me.
few examples :1.) <div id="scroller" style="height: 400px; width: 100%; overflow: auto;">
<iframe height="100%" id="iframe" scrolling="no" width="100%" id="iframe" src="url" />
</div>
2.) <div id="scroller" style="height: 400px; width: 100%; overflow: auto;">
<iframe height="100%" id="iframe" scrolling="no" width="100%" id="iframe" src="data/testdocument.pdf" />
</div>
and many other Java script solutions.
This happens because the latest versions of safari have a new security feature called "prevent cross site tracking" enabled by default that doesn't allow the third party cookies. The user can disable this, but I'm trying to find a workaround to avoid the user intervention. For now, you can detect if the third party cookies are allowed and if not you can display an alert message saying how to disable this feature.
I hope it helps.
Related
Has anyone experienced any trouble embedding youtube videos into the Foundation 5 large-3 columns class?
<div class="large-3 columns">
<p>
<img src="http://example.com/large.png?111"><br />
</p>
</div>
This class css is as follows:
media="all"
#media only screen and (min-width: 64.063em)
.large-3 {
position: relative;
width: 25%;
}
I used the same for a youtube embed, and it distorted it terribly. Any suggestions?
There is a special component in ZURB Foundation called flex-video that you can use to create responsive YouTube (and Vimeo) embeds. Here is an example:
<div class="flex-video widescreen">
<iframe width="560" height="315" src="https://www.youtube.com/embed/LyszBoO_r7Y" frameborder="0" allowfullscreen></iframe>
</div>
You can also use a Vimeo video embed by adding the .vimeo class. These are also avaialble via the Sass Mixins and can be applied to any existing class or element in CSS by using #include flex-video-container();
NOTE: this also works for the latest version, ZURB Foundation for Sites v6.
YouTube videos require special handling to become responsive but there's a solution! Use FitVids.js: https://github.com/davatron5000/FitVids.js
I am working on a legacy application which works in ie but not in Safari.
The image in the code will not render in Safari.
<section class="feature pointer clickableSection tooltipContainer" id="SearchSection"
data-scd-nextScreen="#Url.Action("FullSearch", "Company")"data-placement="bottom"
data-toggle="tooltip" data-title="Click here to SEARCH Addresses">
<img src="#Url.Content("~/images/phonebook.png")" alt="Click here to SEARCH Addresses" />
<h3><span style="text-decoration: underline">Search Addresses</span><span id="searchHeading"></span></h3>
<div class="loadMessage"></div>
</section>
I have got the Safari Web Inspector up and running, but I cannot see where I can find out where the problem is. I am new to using this tool.
I found where the problem is.
In my CSS which I did not publish, it has;
section.feature img {
color: #999;
/*content: attr(alt);*/
font-size: 1.5em;
font-weight: 600;
height: 140px;
width: 200px;
}
I have commented out the line that is not compatable with Safari, ie content: attr(alt);
This is the first time I saw this... I have text in my code and it says Passport and Visa Requirements. This is my markup
<div class="rectangle"><span>Passport and Visa Requirements</span></div>
Crazy thing happens on the live server, somehow a link is injected on the word "visa". This is the markup I see in firebug.
<div class="rectangle">
<span>
Passport and
<a id="_GPLITA_0" title="Click to Continue > by CouponDropDown" style="text-decoration:underline" href="http://i.txtsrving.info/click?v=" in_rurl="http://i.txtsrving.info/click?v=" in_hdr="">
Visa
<img src="http://cdncache1-a.akamaihd.net/items/it/img/arrow-10x10.png" style="display: inline; vertical-align: super; margin: 0px 0px 0px 3px; padding: 0px; border: 0px none; height: 10px;">
</a>
Requirements
</span>
</div>
Is my htaccess file not configured properly? How do I deal with this? Is this a security issue?
http://www.bleepingcomputer.com/virus-removal/remove-coupondropdown
This is probably adware on your computer, affecting your browser. Your website is probably fine.
How can i have the subscribe counter button like this site (http://atomsforpeace.info/) on the right on the top?
This is not the right embed code. It should be
<div class="g-ytsubscribe" data-channel="CHANNELNAME"></div>
<script src="https://apis.google.com/js/plusone.js"></script>
Read more here iframe www.youtube.com/subscribe_embed? google plus
Viewing the source of their page gives you the code they've used:
<iframe frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 147px; margin: 0px; left: 0px; visibility: visible; height: 24px;" tabindex="0" vspace="0" width="100%" src="https://www.youtube.com/subscribe_embed?bsv&usegapi=1&channel=[YOUR CHANNEL NAME HERE]&theme=dark&hl=en-US&origin=http%3A%2F%2F[YOUR HOSTNAME HERE]&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.Hm9QrP5wPuw.O%2Fm%3D__features__%2Fam%3DEQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAItRSTOJmMfO7AjAhJbN5yM-BshnzKg53Q#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Conload&id=I0_1371683853533&parent=http%3A%2F%2F[YOUR HOSTNAME HERE]&rpctoken=33681162" data-gapiattached="true"></iframe>
(make sure you substitute for the [YOUR CHANNEL NAME HERE] and [YOUR HOST NAME HERE] blocks)
My problem:
I have a css div with a table (jquery-mobile 1.0), - If I add too much rows in the div (overflow) the touch event isnt't fireing the javascript functions...any idea?
it,s not fireing the functions and " overflow, before it's working fine !)
$('#mytable').append('<tr><td width=20%>
<a href=add.html onclick=setId('+row.UserId+');>
<img src=./icons/patientendaten.png width=48px height=48px></a></td>
<td width=20%>'+row.Datum+'</td><td width=20%>'+row.Patient+'</td>
<td width=20%><center><a href=# onclick=delete_entry('+row.UserId+');>
<img src=./icons/delete.png></a></center></td><td width=20%><center>
<img src=./icons/edit.png></center>
</td></tr>');
More Details:
<div data-role="content">
<div id="twitter">
<div class="ui-grid-d">
<div class="ui-block-a"><div class="ui-bar ui-bar-d">Akte</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-d">Datum</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-d">Patient/in</div></div>
<div class="ui-block-d"><div class="ui-bar ui-bar-d">Löschen</div></div>
<div class="ui-block-e"><div class="ui-bar ui-bar-d">Fallbeisp. erstellen</div></div>
<br>
<table id=mytable>
</table>
</div>
</div>
</div>
I am using jquery mobile 1.0 and the newest phonegap 1.7 on android 3.2
In addition the logcat gives me (when I am adding row nr. 6)
05-24 23:59:18.030: E/libEGL(16161): call to OpenGL ES API with no current context (logged once per thread)
05-24 23:59:18.030: D/ShaderProgram(16161): couldn't load the vertex shader!
Here is my div:
Logcat:
05-23 17:05:51.800: V/webview(30492): singleCursorHandlerTouchEvent -getEditableSupport FASLE
I came up with the solution that the blue div is the problem...jquery-mobile/phonegap have a problem with that overflow which leads to the error !
05-24 23:59:18.030: E/libEGL(16161): call to OpenGL ES API with no current context (logged once per thread)
05-24 23:59:18.030: D/ShaderProgram(16161): couldn't load the vertex shader!
#twitter {
position:absolute;
top:140px;
left:40px;
width: 880px;
height: 400px;
border: 5px solid;
border-color: #458d91;
-moz-border-radius:16px;
-khtml-border-radius:16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding-top: 10px;
padding-left:10px;
padding-right:10px;
padding-bottom: 10px;
overflow: auto;
}
If I am deleting the overflow and height, then there isn't any problem.
Using lists in that case is maybe a better way to go.
I also tried different jquery-mobile, jquery - in combination with different phonegap versions - this was tested on the samsung galaxy 10.1 tablet - android 3.2
Hope this helps.