I am not sure if this is the right place to ask this question, however I can't think of any other place where I can find answer to this.
I have noticed, this weird iframe on bottom of quite a few website. Weird because all of them same ip address. Here is screenshot from stackoverflow and bundler.io:
It may sound far fetched but could it be possible that someone is listening on me? I just concerned. I am using chrome: 41.0.2272.118 (64-bit)
and my os is ubuntu 14.04
I am talking about this:
<iframe id="fn_layer8" src="http://223.224.131.144:80/l8/Layer8Servlet" target="_blank" frameborder="no" style="display: block !important; opacity: 0 !important; z-index: 2147483646 !important;">
#document
<html>
<head>
<style type="text/css"></style>
</head>
<body>
<pre style="word-wrap: break-word; white-space: pre-wrap;"></pre>
</body>
</html>
</iframe>
<div id="fnscreenOverlay" style="position: fixed !important; bottom: 0px !important; left: 0px !important; top: auto !important; right: auto !important; height: 2571px !important; z-index: 2147483645 !important; width: 100% !important; text-align: center !important; margin: 0px !important; padding: 0px !important; border: 0px !important; opacity: 0 !important; display: none !important; background-color: transparent !important;"></div>
If you're seeing this on pages that you normally wouldn't + sites that aren't connected in anyway (ie. same network) then there's a few reason I could think of (just speculation):
Malware on your computer
Browser add on that injects this iframe
If you open these sites in a different browser, does it still happen? If not, then it's option 2.
I would look into some security software/malware removers.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
This post was edited and submitted for review 1 year ago and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
I am trying to add class to element.
.html5-video-player {
-webkit-transform: rotate(90deg) !important;
-moz-transform: rotate(90deg) !important;
-o-transform: rotate(90deg) !important;
-ms-transform: rotate(90deg) !important;
transform: rotate(90deg) !important;
}
test
I can't add CSS to element. I need to rotate in mobile devices. So I will later add bootstrap class #media (max-width: 767.98px) { to element after make it working.
Here is codepen.
I can't directly embed video in my website as I don't have space for that. I need it as link or link button. If watch_popup method don't work, I can also try bootstrap modal which has button, clicking on it will pop up embeded video. Rotating that to 90 degree to full screen also acceptable. Or any other javascript/jQuery method out there to make it happen? I need the rotation(Full screen) in mobile devices only.
I added the video content in <iframe>. Clicking <button> rotates <iframe> 90 degrees.
function rotate(){
document.getElementById("special-container").setAttribute("style", "display: inline !important");
document.getElementById("camera_view").setAttribute("style","transform: rotate(90deg)");
}
a{
background-color: #4CAF50;
border: none;
color: white;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a onclick="rotate()">Rotate</a>
<div id="special-container" class="embed-responsive embed-responsive-16by9" style="display: none;">
<iframe id="camera_view" class="embed-responsive-item container well well-small span6"
style="height: 720px; width: 1280px; background-color: #2e2e2e;"
src="https://www.youtube.com/watch_popup?v=p-_qed5LTTg">
</iframe>
</div>
</body>
</html>
You forgot class="html5-video-player" in thé link 'a'
I'm looking to create a floating action button for my mobile application. Similar to the ones used in the Gmail and WhatsApp mobile applications (see the red button in the image).
I'm building a small app using jQuery Mobile and I would like the button to bring the user to another page. I've been researching for quite a while, with mixed results, but the main problem seems to be that the button doesn't sit above all of the other content on the page and doesn't stay fixed in a position once the user scrolls the page.
Does anyone have any resources or knowledge that could assist? Thank you
The JQM footer has already the fixed positioning and the correct z-index which plays nicely together with the other JQM widgets, like panels and so on. Why don't use that?
The classes ui-btn-left and ui-btn-right don't behaves well in footer, so I am using a grid with transparent background. The advantage with this approach is that You can quickly add more buttons, if You need it later.
.ui-footer {
border-width: 0 !important;
background: transparent !important;
}
.ui-grid-d {
overflow: visible !important;
background: transparent !important;
}
.ui-grid-d > .ui-block-a,
.ui-grid-d > .ui-block-b,
.ui-grid-d > .ui-block-c,
.ui-grid-d > .ui-block-d,
.ui-grid-d > .ui-block-e {
text-align: center !important;
background: transparent !important;
padding-top: .3em;
padding-bottom: .9em;
}
.ui-icon-big {
height: 40px !important;
width: 40px !important;
margin-top: -18px !important;
border-radius: 20px !important;
}
.ui-icon-big:after {
width: 32px !important;
height: 32px !important;
background-size: 22px !important;
background-color: #F4123D !important;
background-color: rgba(244, 18, 61, 0.8) !important;
margin-top: -16px !important;
margin-left: -16px !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="script.js">
</script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-role="content">
<h3>Page content</h3>
<hr>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div class="ui-grid-d">
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
<div class="ui-block-d"></div>
<div class="ui-block-e">
</div>
</div>
</div>
</div>
</body>
</html>
Moreover, You can decide to use data-tap-toggle="false" on not (default is true) to allow Your users to show the footer buttons on demand, when the page content is bigger than the screen height.
this is more a CSS question than a JS question although you could use either to solve it. In CSS that button element or whatever element contains it should have the attributes; position: absolute; and a z-index: x; (a z-index which is higher than any other element in the DOM). If you try to solve this with JS then you still have to have a z-index property and that only works when and element has a fixed, absolute, or relative position attribute... so you may as well just use CSS. you could use js to determine the hight of the window (the device height on mobile since the browsers are not resize-able like on a desktop) and then set the top: Xpx attribute so that to button appears to be in the same position regardless of the device.
I think this pen would help you. It has a tutorial link.
To make sure that your button is above all other elements, add z-index: 999 to your button in css.
You can think of z-index as layers.
So a z-index: 2 element will be above a z-index:1 element.
For further details about the z-index css property go here and here.
Here you are:
https://material.io/develop/web/components/buttons/floating-action-buttons/
Read more about it here:
https://material.io/design/components/buttons-floating-action-button.html
Have you tried using the "fixed" or "sticky" property values in CSS to hold the image in a relative position to browser window or user's scroll position?
Hope this helps, it's the first idea that comes to mind.
https://www.w3schools.com/cssref/pr_class_position.asp
I want to remove the iframe that is appearing between html and head tag. It do not appear in the desktop version. Whenever I open site on mobile version, it appears between HTML and Head tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<iframe scrolling="no" style="background-color: transparent !important; display: block !important; z-index: 2147483637 !important; border: none !important; width: 320px !important; height: 66.6667px !important; position: fixed !important; bottom: 0px !important; left: 0px !important;"></iframe>
<head id="ctl00_headerMaster">
<title>How to get iframe between html tag and head tag</title>
</head>
<body id="ctl00_edubody">
<h1>How to get iframe between html tag and head tag</h1>
</body>
</html>
First of all, it's invalid to put iframe as the direct child of HTML tag. We can't predict how it handles by the browser so the below code may fail.
Use prevAll() to get the iframe and remove using remove() method.
$('head').prevAll('iframe').remove();
Or get the direct child of HTML tag and remove it.
$('html > iframe:first-child').remove();
Example page source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Page</title>
</head>
<body>
<div class="main" style="height: 100%;">
<div class="header" style="height: 100px; background-color: green;"></div>
<iframe src="http://www.wikipedia.com"
style="height: 200px; width: 100%; border: none;"></iframe>
<div class="footer" style="height: 100px; background-color: green;"></div>
</div>
</body>
</html>
The problem is, that height of 200px from the IFrames inline style is ignored on mobile safari:
Also I'd like to change the height of the IFrame dynamically via vanilla JavaScript which is not working at all with the following code:
document.getElementsByTagName('iframe')[0].style.height = "100px"
The value of the height style is changed correctly according to the dev tools but it's simply ignored since the actually rendered height of the IFrame doesn't change.
This only seems to be a problem in mobile Safari and is working as expected on the latest versions of desktop Safari, Firefox, Chrome, Androids WebView etc.
Testpage: http://devpublic.blob.core.windows.net/scriptstest/index.html
Ps.: I tested this with various devices on browserstack and also took the screenshots there since I don't have no actual iDevice at hand.
It looks like this: How to get an IFrame to be responsive in iOS Safari?
iFrames have an issue on iOS only, so you have to adapt your iframe to it.
You can put a div wrapping the iframe, set css on the iframe and, what worked for me, was to add: put the attribute scrolling='no'.
Wishing you luck.
I got the same issue. And after tried all solutions I could find, I finally found how to solve it.
This issue is caused by the iOS Safari, it will auto-expend the hight of iframe to fit the page content inside.
If you put the scrolling='no' attribute to the iframe as <iframe scrolling='no' src='content.html'>, this issue could be solved but the iframe could not show the full content of the page, the content which exceeds the frame will be cut.
So we need to put a div wrapping the iframe, and handle the scroll event in it.
<style>
.demo-iframe-holder {
width: 500px;
height: 500px;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
.demo-iframe-holder iframe {
height: 100%;
width: 100%;
}
</style>
<html>
<body>
<div class="demo-iframe-holder">
<iframe src="content.html" />
</div>
</body>
</html>
references:
https://davidwalsh.name/scroll-iframes-ios
How to get an IFrame to be responsive in iOS Safari?
Hope it helps.
PROBLEM:
I was having the same issue. Sizing/styling the iframe's container div and adding scrolling="no" to the iframe didn't work for me. Having a scrolling overflow like Freya describes wasn't an option, either, because the contents of my iframe needed to size depending on the parent container. Here's how my original (not working, overflowing its container) iframe code was structured:
<style>
.iframe-wrapper {
position: relative;
height: 500px;
width: 100%;
}
.iframe {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
</style>
<div class="iframe-wrapper">
<iframe frameborder="0" scrolling="no" class="iframe" src="content.html"></iframe>
</div>
SOLUTION:
This super simple little CSS hack did the trick:
<style>
.iframe-wrapper {
position: relative;
height: 500px;
width: 100%;
}
.iframe {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100px;
min-width: 100%;
height: 100px;
min-height: 100%;
}
</style>
<div class="iframe-wrapper">
<iframe frameborder="0" scrolling="no" class="iframe" src="content.html"></iframe>
</div>
Set the iframe's height/width to some small, random pixel value. Set it's min-height & min-width to what you actually want the height/width to be. This completely fixed the issue for me.
I am trying to override the typical jQuery Mobile background with a .jpg. I cannot, for the life of me, figure this out. It is driving me nuts! I have been all over SO and Google to no avail with anyone's answers.
My current header information
<head>
<title>Veolia Water Splash Guide</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"/>
<link rel="stylesheet" href="./css/stylo.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="./js/main.js"></script>
</head>
The process my application is following:
index.html loads as a picture fades in. (This CSS override works perfect)
After the image has faded in, I do a $.mobile.changePage() to another page, not a multipage format
This is where it fails, the background loads up, but then gets overridden by something. I just cannot seem to figure out what is overriding it.
This is my CSS
#logo
{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
width: 80%;
}
body
{
background: url('../img/background.jpg') !important;
background-repeat:repeat-y !important;
background-position:center center !important;
background-attachment:scroll !important;
background-size:100% 100% !important;
}
.ui-page .ui-body-c .ui-page-active .ui-overlay-c .ui-mobile-viewport
{
background: transparent !important;
}
Anyone have some pointers or know what I am doing wrong? The background flashes for a split second, but then gets tossed out...
Thanks in advance for any help!
First, you need commas between the CSS classes you are setting to transparent. Next, as ui-overlay-c is also applied to the body, you can set its background image along with the body's.
So together, set the transparency first, then the body background:
.ui-page, .ui-body-c, .ui-page-active, .ui-overlay-c, .ui-mobile-viewport
{
background: transparent !important;
}
body, .ui-overlay-c
{
background: url('http://www.hdwallpapers.in/wallpapers/digital_layers-1440x900.jpg') !important;
background-repeat:repeat-y !important;
background-position:center center !important;
background-attachment:scroll !important;
background-size:100% 100% !important;
}
Here is a working fiddle of the above: http://jsfiddle.net/ezanker/5GgR9/