The image shows what it will look like when I print one of the Iframes I have, my problem is how can I join the other three Iframes (there almost same in height and width, actually look like this too) and I want to fill this whole print page with those three other Iframes content. Btw I use this Iframe cause I want to get the content from other page, and use the button in my main page to print or generate report with those.
Here's the Iframes
<iframe src="temperature(1).php" scrolling="no" style="border: 0px none; margin-left: -1000px; height:200px; visibility:none; margin-top:-700px; width: 1000px;" name="temp" id="temp"></iframe>
<iframe src="turbidity(1).php" scrolling="no" style="border: 0px none; margin-left: -1000px; height:200px; visibility:none; margin-top: -1000px; width: 1000px;" name="ntu"></iframe>
<iframe src="water-level(1).php" scrolling="no" style="border: 0px none; margin-left: -1000px; height:200px; visibility:none; margin-top: -1000px; width: 1000px;" name="waterlevel"></iframe>
<iframe src="pH(1).php" scrolling="no" style="border: 0px none; margin-left: -1000px; height:200px; visibility:none; margin-top: -1000px; width: 1000px;" name="pH"></iframe>
And the button I use to print, but this thing can only print 1 of those four frames, I don't know how can I join the four and print them in one page with some approach out there... which is what I want to happen...
<button class="btn btn-primary btn-sm ml-5 float-right mr-4" onclick="frames['waterlevel'].print()">Generate Report</button>
Related
I need a global solution to center a facebook iframe like button which can have different like urls and different locales (and languages - in my case 40+). So the button will have different widths in the end.
According to that I removed the width attribute and added the locale param. The iframe gets 300px wide and its not possible to center it.
See the problem in this example:
.mydiv {
padding: 30px 0;
background: red;
text-align: center;
}
.mydiv span {
font-family: sans-serif;
text-decoration: underline;
display: block;
margin-bottom: 10px;
}
.mydiv iframe {
background: green;
}
<div class="mydiv">
<span>locale en_US</span>
<iframe src="https://www.facebook.com/plugins/like.php?locale=en_US&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&layout=button_count&action=like&size=small&show_faces=true&share=false&height=21&appId=848263035268773" height="21" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
<span>locale de_DE</span>
<iframe src="https://www.facebook.com/plugins/like.php?locale=de_DE&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&layout=button_count&action=like&size=small&show_faces=true&share=false&height=21&appId=848263035268773" height="21" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
Important here: I have to use the iframe soultion of the facebook like button, not the js sdk version.
.mydiv {
padding: 30px 0;
background: red;
text-align:center;
}
Add text-align:center to your containing div.
I'm trying to cover a video with a div so it's not visible. Then when you hover over the div it's heigth shrinks to let the video controls visible.
I don't know why I get this weird glitch: https://i.gyazo.com/aff58e50903009f7515a9cbd9b045f91.mp4
This is the slice with the video and overlay in question:
<div class="ytsound-cover" ng-class="{'ytsound-cover-lower': hover, 'ytsound-cover': !hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false" id="cover">
</div>
<div id="ytsound">
<iframe width="300" height="250" src="//www.youtube.com/embed/TbsBEb1ZxWA?autoplay=1&loop=1&playlist=TbsBEb1ZxWA&showinfo=0&start=65" frameborder="0" allowfullscreen></iframe>
</div>
Style here:
.ytsound-cover{
background: #fff;
height: 250px;
position: absolute;
width: 301px;
}
.ytsound-cover-lower {
background: #fff;
height: 205px;
position: absolute;
width: 301px;
}
Whole thing is loaded inside an ng-view.
But anyway, here is all the source code, I'm hosting it on github:
https://github.com/Vacanor/gifsound
I'd love some pointing towards why that is happening.
PD: I don't know if it does have any effect but I use flexbox
try wrapping these divs by another div just like below-
<div class="main-cover">
<div class="ytsound-cover" id="cover"></div>
<div id="ytsound">
<iframe width="300" height="250" src="//www.youtube.com/embed/TbsBEb1ZxWA?autoplay=1&loop=1&playlist=TbsBEb1ZxWA&showinfo=0&start=65" frameborder="0" allowfullscreen></iframe>
</div>
</div>
make style like-
.main-cover{
position:relative;
height:250px;
width:301px;
}
.ytsound-cover{
background: #fff;
height: 250px;
position: absolute;
width: 301px;
}
.main-cover:hover .ytsound-cover{
height:205px
}
I am using below code to load some content in iFrame.
<html>
<head></head>
<body>
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width:550px; height:280px;" onClick=onStopRecording();>
<div style="overflow: hidden; margin-top: -100px; margin-left: -25px;"></div>
<iframe id="exIframe" src="http://example.com" scrolling="no" frameborder="0" style="height: 280px; border: 0px none; width: 550px; margin-top: -60px; margin-left: -24px;"></iframe>
</div>
</div>
</body>
</html>
Now when I click the URL inside the iFrame, it needs to redirect to that URL and get loaded in main window itself.
But it is loading inside the iFrame.
Please note that I am using third party site inside the iFrame where I can't change its code
I am trying to use Google SignIn button in one of my applications. I have got this working fonr on Chrome. But, when I try to lad the page which contains this button in Firefox and IE, the button never showed up, and upon further trouble shooting, I noticed that the height, width and other parameters are set to "1px". I have copied the generated HTML below. Any clues?
<div id="___signin_0" style="text-indent: 0px; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 1px; position: relative; height: 1px;"><button style="opacity: 0; z-index: 10000; left: 0px; top: 0px; position: absolute; cursor: pointer; outline: 0px none; width: 1px; height: 1px;">Sign in with Google</button><iframe title="Sign in with Google" data-gapiattached="true" src="https://apis.google.com/_/widget/render/signin?usegapi=1&type=red&scope=profile%20email&width=standard&height=standard&cookiepolicy=single_host_origin&clientid=xxxxxxxx.com&origin=http%3A%2F%2Flocalhost%3A2098&url=http%3A%2F%2Flocalhost%3A2098%2F&gsrc=3p&ic=1&jsh=m%g#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&id=I0_12343&parent=http%3A%2F%2Flocalhost%3A2098&pfname=&rpctoken=42643494" name="I0_1234455" id="I0_1234455" vspace="0" tabindex="0" style="position: static; top: 0px; width: 1px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 1px;" scrolling="no" marginwidth="0" marginheight="0" hspace="0" frameborder="0" width="100%"></iframe></div>
Edit:
My code that renders the button is as shown below:
<span id="signinButton" style="display:block">
<span
class="g-signin"
data-callback="signinCallback"
data-clientid="xxxxxxxxxxxxxxxx.com"
data-cookiepolicy="single_host_origin"
data-height="standard"
data-width="standard"
data-scope="profile email">
</span>
</span>
Google doesn't allow people to change their Logos or Styles thats why whatever the styles you gave is overridden by google script
I Think This URL May help
https://developers.google.com/identity/sign-in/web/build-button
I've made a lot of search to also make that work, however, I think googles iframe can't be changed at all. You can set a MINIMUM width but you can't change the width itself and neither the MAXIMUM (which is 400 by default). The height can't be changed at all. It's sad that they're removing the old javascript button (probably because people was making a lot of misconfiguration?), they really need to make style fully customizable. If anyone has the solution let me know too, but I can say after a lot of search and reading their docs that this is not possible (yet)
I was looking at the code builder for google when I found that the data-width attribute for the signin button could be set to a number, instead of standard. Here is an example with your code:
<span id="signinButton" style="display:block">
<span
class="g-signin"
data-callback="signinCallback"
data-clientid="xxxxxxxxxxxxxxxx.com"
data-cookiepolicy="single_host_origin"
data-height="standard"
data-width="400"
data-scope="profile email">
</span>
</span>
I noticed that you used <span> tags, while in my case, I used <div>s.
I have this iframe:
<iframe width='828'
height='465'
frameborder='0'
allowfullscreen
src='https://www.firedrive.com/embed/B027D40BFCD0BBC0'>
</iframe>
and would like to cover/remove the Firedrive logo in the corner to make it unclickable. How can I do this. I've been searching on the web for hours but nothing seems to work for me.
Jsfiddle: http://jsfiddle.net/aZ5p6/
Beware: THE IFRAME CONTAINS ADS. The logo is at the top right corner of the iframe.
I'm a newbie at html, please do not simply tell me how to solve it, spoon feed me the code.
You must add a container/wrapper around the iframe. Try this:
CSS
.wrapper{
position:relative;
z-index: 1;
display: inline-block;
}
.hidelogo{
position: absolute;
width: 150px;
height: 40px;
background: #222;
right: 0px;
bottom: 6px;
z-index:999;
display: block;
color: #fff;
}
HTML
<div class="wrapper">
<div class="hidelogo"></div>
<iframe width='828' height='465' frameborder='0' allowfullscreen src='https://www.firedrive.com/embed/B027D40BFCD0BBC0'></iframe>
</div>
DEMO HERE
Checkout
Your Log blocked by a Div with Id Blocker .Give the background color that you want or if you want any other logo give it as the background image of this div
CSS
#Blocker{
position:absolute;
z-index:10;
right:10px;
bottom:5px;
height:15px;
width:100px;
background-color:orange;
}
#frame{
height:100%;
width:100%;
position:absolute;
}
#Wrapper{
height:100%;
width:auto;
border:solid red 2px;
}
HTML
<div id="Wrapper">
<iframe id="frame" width='828' height='465' frameborder='0' allowfullscreen src='https://www.firedrive.com/embed/B027D40BFCD0BBC0'>
</iframe>
<div id="Blocker">
Logo Blocked
</div>
</div>
100% Work
iFrame has some limitation but there is another way is .load()
for external URL you need to add CSS also if you want the same look.
HTML :
<div id="urlDetails"></div>
JS:
$('#urlDetails').load('http://www.example.com/page.php #content');
Note: All data available in id="content" will appear here you can also use with a class name.
CSS (optional)
<link rel="stylesheet" href="http://example.com/css/style.cssenter code here">