I recently use this code.
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4ef86ce41df36324"></script>
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
but google plus button is not working and I found out that it is not working because I have included this code in my page.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
how to resolve this issue
thanks
For me, the reason that the google plus button, and also the tweet button wasn't working was because on the surrounding div I had a margin-top: -50px; in my CSS. As soon as this was removed then all started to work.
I changed the CSS to use position: relative; top: -50px; instead and it all worked.
No idea why a negative top margin should cause such an issue.
I don't know why the documentation include this,
<a class="addthis_button_google_plusone_share"></a>
Related
Rendertron is loading my webpage, but it is prefacing the CSS file (bundled app.css via webpack) with the following PRE tag and HTML tags:
<html><head><base href="https://redacted-for-security.com/css"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">#font-face{font-family:swiper-icons;font-style:normal;font </pre></body></html>
This obviously breaks the page layout for the render.
Does anyone know why it is doing this?
Many thanks
This is because of the <head>.
The CSS property page-break-after: avoid doesn't work in any WebKit or Mozilla based browsers, so you can alternatively use the page-break-inside: avoid over the heading and an acceptable amount of the text to prevent this page break:
CSS
<style type="text/css">
.nobreak {
page-break-inside: avoid;
}
</style>
HTML
<div class="nobreak">
<h3>Heading!</h3>
<p>Some things:</p>
</div>
<ul>
<li>Thing one</li>
<li>Thing B</li>
<li>Thing 4</li>
</ul>
Relvant sources:
How do I avoid a page break immediately after a heading
I´ve got a little problem. Whilest experimenting with Bootstrap and W3.CSS, I decided to create a w3-navbar.
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="rsc/bootswatch-cosmo.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="w3-top">
<div class="w3-bar w3-black w3-hide-small w3-hide-medium">
<i class="fa fa-vcard fa-fw" ></i> SAMPLE
<i class="fa fa-star fa-fw"></i> SAMPLE
<i class="fa fa-image fa-fw"></i> SAMPLE
<i class="fa fa-user-circle fa-fw"></i> SAMPLE
</div>
</div>
It´s looking awesome without bootstrap, but when I add the bootstrap libraries the text of the navigation bar elements turns blue.
Is there a way to fix this problem? As seen above I even added style="text-decoration: none;" to all the navbar-elements to remove the blue, but it just wont go away.
Thanks in advance for all helpful answers,
- SearchingSolutions
When working with styles that get applied by a 3rd party stylesheet, it is sometimes necessary to use the !important declaration to override those styles. For instance you might try:
.w3-bar-item, .w3-bar-item:hover
{
color: #000 !important;
text-decoration: none !important;
}
Note that the best practice is generally not to use !important because it undermines the normal specificity rules by which the browser decides which styles to apply in cases where there are multiple. However, if your 3rd party styles used it, you may have no other choice. Alternatives are checking to make sure bootstrap's CSS is loaded FIRST, so that it gets overridden, or modifying the bootstrap CSS directly to remove the color. However if you change bootstrap's CSS file, it will make upgrading it a pain later.
Why are you using 2 different libraries on the same page?.
A class conflict is destined to happen most of the times.
Anyways this shd do the trick.
a:hover, a:visited, a:link, a:active
{
text-decoration: none;
}
This should keep all your links normal.
I am a designer, new to mapbox. (So, I may need things explained to me like I'm a four-year old, pretty please).
I created a map with labels using their plain editor (not Studio) and placed it on my page here.
I want to add a custom legend, possibly in a custom position. I tried using their example, but my map doesn't even show up at all. When I comment out mapbox's CSS link ref in the head, it almost works, but shows all wacky. See that one here.
Here's the added HEAD code per mapbox's legend example that I have on my page:
<script src="https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.js"></script>
<style>
body {
margin:0;
padding:0;
}
#map {
position:absolute;
top:0;
bottom:0;
width:100%;
}
.legend label,
.legend span {
display:block;
float:left;
height:15px;
width:20%;
text-align:center;
font-size:9px;
color:#808080;
}
</style>
Then here's the BODY code I added for the mapbox elements.
<div id="legend" style="display:none;">
<strong>The Title or Explanation of your Map</strong>
<nav class="legend clearfix">
<span style="background:#F1EEF6;"></span>
<span style="background:#BDC9E1;"></span>
<span style="background:#74A9CF;"></span>
<span style="background:#2B8CBE;"></span>
<span style="background:#045A8D;"></span>
<label>0 - 20%</label>
<label>40%</label>
<label>60%</label>
<label>80%</label>
<label>100%</label>
<small>Source: Name of source</small>
</nav>
</div>
<div id="map"></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoibW1hcm1vbCIsImEiOiIzZTkxMDM4ZDI5MDZiMDY2MzFlOGQ4YzZiYmY2NmMzOSJ9.Cr8JtBNsYIl3LTxYZkaFPA';
var map = L.mapbox.map('map', 'mmarmol.2a3461fc');
map.legendControl.addLegend(document.getElementById('legend').innerHTML);
</script>
All other code is Bootstrap for the rest of my page. It seems like I have a CSS issue, or is it a js issue? Any ideas?
Thank you!
Currently I'm embedding Youtube videos with the following HAML code in a Twitter Bootstrap based site:
.row
.span12
%iframe.span11{ :height => "720", :frameborder => "0", :allowfullscreen => nil, :src => v.video_url }
Unfortunately, this doesn't respond well when resizing the browser or on mobile devices because of the static height.
What would be a better (more dynamic and responsive) way to implement this embedded iframe for Youtube?
Try this "Responsive video CSS", it works perfect for me: https://gist.github.com/2302238
<section class="row">
<div class="span6">
<div class="flex-video widescreen"><iframe src="https://www.youtube-nocookie.com/embed/..." frameborder="0" allowfullscreen=""></iframe></div>
</div>
<div class="span6">
...
</div>
</section>
I implemented a pure CSS solution which works great.
Here is an example of code in my view using the iframe code generated in YouTube.
<div class="video-container">
<iframe width="300" height="168" src="http://www.youtube.com/embed/MY__5O1i2a0" frameborder="0" allowfullscreen></iframe>
</div>
Here is an example of code in another view where instead of using iframe I used the body field generated from the AutoHtml gem, which is used for embedding different types of video links into a web page. This is good if you have a model where a link needs to be dynamically embedded into the same web page.
<div class="video-container">
<span style="text-align: center;"><%= #livevideo.body_html %></span>
</div>
Here is the CSS code:
.video-container {
position: relative; /* keeps the aspect ratio */
padding-bottom: 56.25%; /* fine tunes the video positioning */
padding-top: 60px; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Here is the YouTube video which explains in great detail how the code works and give one or two blog posts to check out.
http://www.youtube.com/watch?v=PL_R3zEjqEc
Bootstrap 3.2.0 comes with a several improvements and a large number of bug fixes. A framework for building websites with a responsive design, Bootstrap was missing support for responsive , and elements, feature added in this latest version.
The HTML for a responsive YouTube 16:9 video that adjusts its size based on the width of the page it is displayed in looks like this:
On your container(maybe DIV) add class="embed-responsive embed-responsive-16by9"
This is probably best done with jQuery: http://www.seanmccambridge.com/tubular/ or http://okfoc.us/okvideo/
Just to automatize #Bart's answer, I've created a simple Javascript snipped that automatically wraps iframe elements within <div class="flex-video">
$(document).ready(function() {
$('iframe').each(function() {
$(this).wrap('<div class="flex-video"></div>');
});
});
If using bootstrap, the method below is without a doubt the easiest way to implement a responsive embed:
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Documentation can be found here: http://getbootstrap.com/components/#responsive-embed.
I am using AnythingSlider to place content on this dev for a new site:
http://sitedev.lcadfiles.com/interactive_barrett.html
When the slider first loads on a given page, there is a slight jump (the entire slider, arrows, etc. moves a few pixels before settling into the correct position). After landing, it all appears to work fine. The shift doesn't appear to be browser specific, as it occurs on my older and newer machines with 4 different browsers (and various browser versions).
Is there something I have set wrong? I assume it might be somewhere global, like the anythingSlider.js (or perhaps the .css - though this seems less likely), but didn't see anything that stood out.
Had the same problem. A quick workaround (works for me).
eg. you have html code like below, add a style="visibility:hidden;" to your anythingslider container.
<div id="slider_nest" style="visibility:hidden;">
<ul id="your_anythingslider">
...
</ul>
</div>
in the js code, change the style to visible when document ready. eg.(JQuery)
jQuery(document).ready(function($) {
$('#slider_nest').css('visibility', 'visible');
...
$('#your_anythingslider').anythingslider();
...
}
Hope it helps!
Update: add a slider mask with a loader gif.
eg. in the html, you will have something like below:
<div id="slider_mask" style="background: #000 url('ajax-loader.gif') no-repeat center; display:block; height:568px; width:1050px; margin:0 auto;">
</div>
<div id="slider_nest" style="display:none; height:568px; width:1050px; margin:0 auto;">
<ul id="your_anythingslider">
...
</ul>
</div>
Now in the js (JQuery):
jQuery(document).ready(function($) {
$('#slider_mask').hide();
$('#slider_nest').css({'display':'block'});
...
OMG, this finally solved our problem! Thank you.
Since I'm using the Wordpress plugin on a custom theme, I had to adjust it a bit like this:
Add this before the shortcode in the header.php file:
<div id="slider_mask" style="background: #FFF url('ajax-loader.gif') no-repeat center;display:block; height:323px; width:940px; margin:0 auto;">
</div>
Add this in the section of header.php file:
<script type="text/javascript">
$(document).ready(function(){
$('#slider_mask').hide();
$('.anythingSlider').css({'display':'block'});
}
Add this to the CSS file:
.anythingSlider {display:none;}