I am trying to put a Google Plus One and other social media buttons inline next to each other. For some reason the Google Plus button has moves it down by a few pixel. It says there is a p tag separating them but there is no p tag in the code. The Google Plus code has it's own div tag but I don't know how to align it with the other buttons. I am using Wordpress.
Is there a better way to align these?
<iframe style="border: none; overflow: hidden; width: 52px; height: 20px;" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fjrbweddings&width=100&layout=button&action=like&show_faces=false&share=false&height=35" width="300" height="150" frameborder="0" scrolling="no"></iframe><iframe style="border: none; overflow: hidden; width: 60px; height: 20px;" src="//www.facebook.com/plugins/share_button.php?href=http%3A%2F%2Fjrbweddings.com%2Fleena-joel&layout=button" width="300" height="150" frameborder="0" scrolling="no"></iframe><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" alt="" /><script src="//assets.pinterest.com/js/pinit.js" async="" defer="defer" type="text/javascript"></script> <a class="twitter-share-button" href="https://twitter.com/share" data-text="Check out this Wedding Video!" data-related="jrbweddings" data-count="none">Tweet</a><script>// <![CDATA[ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); // ]]></script><script src="https://apis.google.com/js/platform.js" async="" defer="defer"></script><div class="g-plusone" data-align="right" data-size="medium" data-annotation="none"></div><div align="right">Wedding Photographer: Gio Morales</div>
example of how I want it to look but need google plus:
<p class="split-para">
<iframe style="border: none; overflow: hidden; width: 52px; height: 20px;" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fjrbweddings&width=100&layout=button&action=like&show_faces=false&share=false&height=35" width="300" height="150" frameborder="0" scrolling="no"></iframe>
<iframe style="border: none; overflow: hidden; width: 60px; height: 20px;" src="//www.facebook.com/plugins/share_button.php?href=http%3A%2F%2Fjrbweddings.com%2Fleena-joel&layout=button" width="300" height="150" frameborder="0" scrolling="no"></iframe>
<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark">
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" alt="" />
</a>
<script src="//assets.pinterest.com/js/pinit.js" async="" defer="defer" type="text/javascript"></script>
<a class="twitter-share-button" href="https://twitter.com/share" data-text="Check out this Wedding Video!" data-related="jrbweddings" data-count="none">Tweet</a>
<script>//
<![CDATA[!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');// ]]>
</script>
<span>Wedding Photographer:
Gio Morales
</span>
I've found out that this jQuery code works but it disables the plug in that's on the page and the 'Wedding Photographer' text that's right justified:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $("iframe[src='//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fjrbweddings&width=100&layout=button&action=like&show_faces=false&share=false&height=35']").unwrap();
Changing
<div class="g-plusone" data-align="right" data-size="medium" data-annotation="none"></div>
to
<span class="g-plusone" data-align="right" data-size="medium" data-annotation="none"></span>
should work, because div is a block element while span is an inline one. Since it was a block element it was being pushed down the page a bit.
Related
does anyone know how to make a button in HTML load another HTML page inside of an iframe?
I don't understand online tutorials for this, and here's what I tried :
<div class="flex-container"> <!-- la sidebar et le iframe seront dedans -->
<div class="sidebar">
<button style="margin-top: 100px;" onclick="Function1">Thés</button>
<button>Tisanes</button>
<button>Théières</button>
</div>
<!--FUNCTION1-->
<script>
function Function1() {
document.getElementById(src="accueil.html").innerHTML = src="Thés.html" TARGET="iframe";
}
</script>
<iframe src="accueil.html" frameborder="0" style="border: none; width: inherit; height: 710px; id="iframe">
</iframe>
</div>
</body>
</html>
Is this even how it's supposed to be done? Cause nothing is happening when the button Thés is clicked.
I'm quite new and I'm bad with javascript. Thanks if anyone has the patience to explain this to me.
<div class="sidebar">
<button style="margin-top: 100px;" onclick="Function1()">Thés</button>
<button>Tisanes</button>
<button>Théières</button>
</div>
<iframe src="./accueil.html" frameborder="0" style="border: none; width: inherit; height: 710px;" id="iframe">
</iframe>
<!--FUNCTION1-->
<script>
function Function1() {
const iFrame = document.getElementById('iframe');
iFrame.src = "Thes.html";
console.log(iFrame)
}
</script>
<div id="537267839_INSERT_SLOT_ID_HERE"
style="width:768px;height:90px;margin:auto;">
<noscript>
<p align="center">
<iframe id="a1651026db" name="a1651026db" src="//oncampusweb-d.openx.net/w/1.0/afr?auid=537267839&cb=INSERT_RANDOM_NUMBER_HERE"frameborder="0" scrolling="no" width="728" height="90" align="center"display:block;>
</p>
</iframe></noscript>
</div>
<script type="text/javascript">
var OX_ads = OX_ads || [];
OX_ads.push({
slot_id: "537267839_INSERT_SLOT_ID_HERE",
auid: "537267839"
});
</script>
<script type="text/javascript" src="//oncampusweb-d.openx.net/w/1.0/jstag">
</script>
In this code I want to center the ad being placed. I can't figure out how. I tried align="center" in style and margin:auto but it doesnt work.
Try:
margin: 0 auto;
0 for the top/bottom and auto for left/right
Try using a flex box to center align child components both vertically and horizontally.
<div id="537267839_INSERT_SLOT_ID_HERE"
style="width:768px;height:90px;display:flex;justify
content:center;align-items:center;">
Wrap it:
<div style="width:100%; text-align:center">
your code goes here
</div>
I have some iframes (YouTube videos) and I want to put a link over the iframe. What I want to do is to place every link exactly over the iframe, but this is happening only for the first row (the first 3 iframes), while the others (4th link and beyond) it's been placing next to third link.
Here is the code
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
openEffect: 'none',
closeEffect: 'none',
nextEffect: 'none',
prevEffect: 'none',
padding: 0,
margin: [20, 60, 20, 60] // Increase left/right margin
});
$('iframe').each(function() {
var source = $(this).attr('src');
$(this).attr('src', source + "&showinfo=0&rel=0&controls=2");
});
$('iframe').addClass('col-xs-12 col-md-4');
$('iframe').attr('href', '#');
var width = $('iframe').width();
$('iframe').css({
'height': 0.6 * width + 'px'
});
var height = $('iframe').height();
$('p').each(function() {
$(this).prepend('<a href="' + $(this).find('iframe').attr('src') + '" class="wrapper col-xs-12 col-md-4 fancybox fancybox.iframe"><a/>');
})
//$('.wrapper').width(width);
$('.wrapper').height(height);
.entry-content p {
margin: 0 0 0 0 !important;
}
.entry-content p iframe {
margin-bottom: 30px;
display: inline-block;
}
.wrapper {
border: none;
position: absolute;
vertical-align: baseline;
float: left !important;
z-index: 9999 !important;
}
.fancybox-type-iframe .fancybox-nav {
width: 60px;
}
.fancybox-type-iframe .fancybox-nav span {
visibility: visible;
opacity: 0.1;
}
.fancybox-type-iframe .fancybox-nav:hover span {
opacity: 1;
}
<link href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" rel="stylesheet" />
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content-left-wrap col-md-12">
<div class="entry-content">
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
</div>
</div>
</div>
You can alse find a snippet at https://jsfiddle.net/vg734x3u/1/ and see the result here.
Thank you!
I observed a typo when you prepend an anchor to each p element. <a/> shall be </a>. I also observed a semicolon is missing. If you run JSHint on the fiddle, you will see the problem.
Anyway check out this fiddle. It puts a link over each iframe by modifying the style sheet either. You can start from here and make the layout of your page prettier.
I'd like to have a slideshow of my work but I'm new to html/css/jquery. I'm working with a jquery plugin that looks like this:
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$('#slider').cycle({
fx: 'scrollHorz',
speed: 'fast',
timeout: 0,
next: '#next',
prev: '#prev'
});
</script>
HTML looks like this:
<div align="center" id="slideshow">
<div class="controller" id="prev"></div>
<div id="slider">
<img src="Images/Logo_01.jpg" width="960" height="576" alt="logo"/>
<img src="Images/Logo_02.jpg" width="384" height="640" alt="logo"/>
<img src="Images/Logo_03.jpg" width="640" height="640" alt="logo"/>
<img src="Images/Logo_04.jpg" width="960" height="510" alt="logo"/>
<img src="Images/Logo_05.jpg" width="956" height="640" alt="logo"/>
</div>
<div class="controller" id="next"></div>
</div>
I've been modifying the slider id & I've tried everything I know-margin:0 auto;, text-align: center, display: block; but nothing's working. help?
Try this:
Using jQuery
$('#slider img').css({position: 'relative', margin: 'auto'});
Using CSS, you have to use !important as cycle jQuery plugin is adding inline CSS to images
#slider img {
position: relative !important;
margin: auto !important;
}
There is a blank image (blank.png) with background hover effect, which works. I click on the image and it hides, then the video div shows, which works. What I can't figure out is how to get the video to play on the click on original blank image.
I have it working most of the way, but can't get the video to play on click of the image.
I am not the best with scripting.
An example of what I have done:
http://jsfiddle.net/3s8EC/2/
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.custom-th').click(function() {
$('.custom-th').fadeOut('fast', function() {
$("#thevideo").css("display","block");
});
});
});
</script>
<style>
#imageID {background: url(http://edigi.co/Video-Intro.jpg) no-repeat;
height: 370px;
width: 100%;
}
#imageID:hover {
background: url(http://edigi.co/Video-Intro-Hover.jpg) no-repeat;
}
</style>
<div style="width: 100%; height: 370px; background-color: #000;">
<div id="promovid">
<div class="custom-th">
<img src="http://edigi.co/blank.png" id="imageID" width="100%" height="370" />
</div>
<div id="thevideo" style="display:none; padding: 0px;">
<center>
<video onclick="this.play();" preload="auto" width="600" height="370">
<source src="http://edigi.co/Impatto_Branding_Agency-Large.mp4" type="video/mp4"/>
</video>
</center>
</div>
</div>
</div>
Any help is appreciated, but since I am not the best with scripting an actual example, or edit the jsfiddle, would be totally super awesome.
Thanks in advance for the help.
Just add a $("video").click();
Like this:
$(document).ready(function() {
$('.custom-th').click(function() {
$('.custom-th').fadeOut('fast', function() {
$("#thevideo").css("display","block");
$("video").click();
});
});
});
Add an id to the video if you have multiple videos on the page and use it's id instead of "video" in the selector.