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.
Related
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>
I'm trying to make 4 small boxes get bigger whenever you hover over the box on top of them as an aesthetic style.
I have tried looking for examples online and on StackOverflow but every example I tried did not work either because it was in JavaScript and I just didn't understand it or it was in J Query and I'm not using J Query (I'm not certain if I should). This is what I'm trying to get. https://imgur.com/a/jy4ozCe
I have all the HTML and CSS done except I can't seem to make the function work. I am new to React and Javascript and I'm a bit lost at the moment.
I tried
JS
function animation(color) {
document.getElementsByClassName('animated-box').style.backgroundColor = 'color';
}
HTML
<div className="hp-left">
<div className="home-card-top-left">
<iframe title="JSX" width="100%" height="100%" src="https://www.youtube.com/embed/rUvUKWbyMgM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />
<div className="animated-box"></div>
</div>
<div className="home-card-bottom-left" onmouseover={animation('red')} onmouseout={animation('white')}>
<a href="https://www.gofundme.com/gamehubgg?fbclid=IwAR1QApuq8jTeihAAcx8Y_1i23PSDLXEo9nDocQvUHuOMIxVLMK6x2pqcRK0">
<img
className="haloimg"
src={
"https://zach-miller.com/wp-content/uploads/2017/03/its-giveaway-time.jpg"
}
width="50%"
height="100%"
alt="Halo Pic"
/>
</a>
</div>
</div>
which was an answer someone gave on StackOverflow but that gives me
"TypeError: Cannot set property 'backgroundColor' of undefined"
This is just a snippet of the "div" I want to hover over and the box.
I want to hover over the bigger section and make the small box grow until it is encompassing the big box. I tried to do this in CSS but it wouldn't work there either because it is behind the div. I want to do it in JS or JSX anyways.
If I right understand what you want, is it?
If i wrong, please give more details, with mo examples!
.box-hover {
color: white;
background: green;
padding: 20px;
}
.box-hover:hover ~ * {
border-width: 10px;
}
.box-border {
width: 50px;
height: 50px;
background: red;
border: 1px solid black;
margin: 10px;
transition: .3s;
}
<div class='box-hover'>hover on me</div>
<div class='box-border'></div>
<div class='box-border'></div>
<div class='box-border'></div>
<div class='box-border'></div>
You can do it using state and handleMouseHover with:
<div
onMouseEnter={this.handleMouseHover}
onMouseLeave={this.handleMouseHover}
>
Example: https://codesandbox.io/s/j4x14q6q35
For onhover style you can user transform: scale.
Sorry, i don't know jsx, here vanilla js )))
let
boxHover = document.querySelector('.box-hover'),
boxBorder = document.querySelectorAll('.box-border');
boxHover.addEventListener("mouseover", function() {
for (let i = 0; i < boxBorder.length; i++) {
boxBorder[i].style.borderWidth = '10px'
}
})
.box-hover {
color: white;
background: green;
padding: 20px;
border: 1px solid black;
}
.box-border {
width: 50px;
height: 50px;
background: red;
border: 1px solid black;
margin: 10px;
transition: .3s;
}
<div class='box-hover'>hover on me</div>
<div class='box-border'></div>
<div class='box-border'></div>
<div class='box-border'></div>
<div class='box-border'></div>
This only happens on chrome (maybe all webkit browsers?) - when I embed the map like so:
<iframe
id="contactsMap"
frameborder="0"
scrolling="no"
marginheight="0"
marginwidth="0"
src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=<?= $contact['imagePopupAddress'] ?>&aq=&sll=<?= $contact['mapLocation'] ?>&sspn=<?= $contact['mapLocation'] ?>&vpsrc=0&ie=UTF8&hq=&hnear=<?= $contact['imagePopupAddress'] ?>&t=m&z=16&ll=<?= $contact['mapLocation'] ?>&output=embed">
</iframe>
It shows up all nicely, but if I create a div that overlays the map, the text in that div shows up all blurry (and images too).
What I have tried:
* {
-webkit-font-smoothing: subpixel-antialiased !important;
}
.google-map.google-map-wide
{
-webkit-transform: none !important;
}
What else could I try?
Edit http://jsfiddle.net/31pxt917/
Blur happens because You are using skew transformation and then skew back. Better way would be using separate dom element, or pseudo element (:before or :after). Something like this fiddle
<div style="position: relative">
<iframe id="contactsMap" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=703 8th Ave&aq=&sll=40.758595, -73.988841&&sspn=40.758595, -73.988841&&vpsrc=0&ie=UTF8&hq=&hnear=703 8th Ave&t=m&z=16&ll=40.758595, -73.988841&output=embed"></iframe>
<div class="overlay">
<div class="content">
<span>some text goes here</span>
a random link
</div>
</div>
</div>
#contactsMap {
width: 100%;
float:left;
height:300px;
position:relative;
}
.overlay{height: 300px;}
.overlay:before {
content: '';
display: block;
width:100%;
height:150px;
background:#000;
color:#fff;
position:absolute;
bottom: 0;
-webkit-transform: skew(-9deg);
-moz-transform: skew(-9deg);
-o-transform: skew(-9deg);
transform: skew(-9deg);
}
.content {
top: 150px;
height: 150px;
width: 100%;
position: absolute;
padding: 5px 15px;
}
.overlay a, .overlay span {
color:#fff;
}
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">
I am having problems with some content not fixed into one place when I resize the window on a browser, I basically have 3 div id box elements placed next to each other.
They are positioned fine however when I resize the screen they seem to fall below one another.
I have min-width: 947px; in the body of the CSS however this does not do anything.
HTML:
<div id ="featured1">
</div>
<div id ="featured3">
</div>
<div id ="featured2">
</div>
CSS:
#featured1{
float:left;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
margin-left:150px;
border:1px solid black;
width:250px;
height:150px;
}
#featured2 {
display: inline-block;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
}
#featured3 {
float:right;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
margin-right:200px;
}
For some reason when I try resizing the screen with this code the elements fall below each other, I am looking for the content to completely remain the same and not resize at all.
Here is the working example: jsFiddle link
use
display: inline-block;
on all 3 divs, then they wont go down.
Note: this property will not work on IE7 and smaller versions.
You have given your body a min-width:947px but the actual width occupied by all divs including the margin and borders, etc is 1150px.
Thats why its breaking.
Please add vertical-align: top; property on all the divs
This should help. FYI. When writing in CSS make sure you minify the code. Google developer has a great section on this (https://developers.google.com/speed/pagespeed/service/MinifyCSS).
HTML:
<div id="container">
<div id="featured1">
Featured 1
</div>
<div id="featured2">
Featured 2
</div>
<div id="featured3">
Featured 3
</div>
</div>
CSS:
#container {
position: absolute;
width: 836px;
height: 190px;
}
#featured1, #featured2, #featured3 {
position: relative;
font-family: 'Lobster13Regular';
font-size: 35px;
float: left;
left: 20px;
top: 20px;
width: 250px;
height: 150px;
border: 1px solid #000;
overflow: hidden; /*Remove if you are not going to overflow text in each element*/
}
#featured2, #featured3 {
margin-left: 20px;
}