I want to include a "google+1" button on a page, yet I want to use a custom image with a custom size for it and preferably without javascript, much like is possible to do with Facebook and Twitter. I don't care if it don't show the count number for now.
Finally! Found a nice solution to this problem. So simple and working :) Hope it helps you!
<a href="https://plus.google.com/share?url=ADD_YOUR_URL" >
<img src="path_to_your_image" alt="Google+" title="Google+"/>
</a>
Source: http://notesofgenius.com/how-develop-custom-google-plus-button/
This is the official example from the google developers page:
Also consider that the URL was updated.
<a href="https://plus.google.com/share?url={URL}" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">
<img src="https://www.gstatic.com/images/icons/gplus-64.png" alt="Share on Google+"/>
</a>
use opacity 0 to just make it invisible. Then use background for making it looks like what you want.
<style>
.my_custom_googleplusone{
overflow: hidden;
background: url(blahblah.png);
}
.my_custom_googleplusone:hover{
background: url(blahblah2.png);
}
</style>
<div class="my_custom_googleplusone">
/// GOOGLE BUTTON WITH OPACITY OF 0 (and z-index 1 with absolute position);
</div>
You can overlay an image and keep functionality:
http://tcg.ellininc.com/buttonTest/
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<style>
.my_custom_googleplusone{
overflow: hidden;
background-image: url(styled.png);
background-repeat: no-repeat;
height: 30px;
width: 161px;
position: absolute;
pointer-events: none;
}
.my_custom_googleplusone:hover{
visibility: hidden;
}
.hideMe {
height: 30px;
width: 161px;
overflow: hidden;
position: absolute;
z-index: -1; !Important
}
</style>
</head>
<body>
<div><g:plusone></g:plusone></div><br />
<div class="my_custom_googleplusone"></div>
<div class="hideMe"><g:plusone></g:plusone></div>
</body>
My apologies for any extraneous css.
If you were willing to use JavaScript, this will give a more official experience.
HTML
<a href="#" onclick="gPlus('http://example.com');" title="+1">
<img src="custom-image.png" alt="Google+ +1 Button">
</a>
JavaScript
function gPlus(url){
window.open(
'https://plus.google.com/share?url='+url,
'popupwindow',
'scrollbars=yes,width=800,height=400'
).focus();
return false;
}
If you include that function globally, you can have such buttons all over the place without using multiple, lengthy, in-line onClicks.
I used Chrome's element inspector to figure out the elements to target (you could also use Firebug):
The original sprite for +1 is here: https://ssl.gstatic.com/s2/oz/images/stars/po/Publisher/sprite.png
On my implementation, the rendered <a> has a classes of a-sb-ig-e and a-sb-ig-ps-e and its parent is a <div> with a class of a-sb-ML
From there, you could simply style the button within your own CSS. Similarly, you can also style the counter bubble by inspecting it and figuring out its element's classes.
Edit: since the +1 button is called within an iframe, what I described above won't work. What you could do instead is target the +1 div and set its opacity to 0, then place it on top of your own image. The div ID to target is #___plusone_0
Considering the button resides in an iframe and due to cross-domain restrictions, altering this is unlikely.
This is my solution for using a custom icon for the official google +1 code
+1 Button - Google+ Platform - Google Developers
<style type="text/css">
.google-plus-container {
position: absolute; /* just to position the container where i wante the button, position absoliute or relative is required*/
right: 0;
top: 0; }
.google-plus-iframe {
z-index: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
.google-plus-icon {
z-index: -1;
width: 32px;
height: 20px;
background: transparent url(http://static.educations.com/masterpages/pics/icons/social/gplusbw.png) no-repeat;
position: absolute;
top: 0;
right: 0;
}
<div class="google-plus-container">
<div class="google-plus-icon"></div>
<div class="google-plus-iframe">
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium" data-annotation="none"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
window.___gcfg = { lang: 'sv' };
(function () {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
Works like a charm
You should use this now: https://plus.google.com/share?url=URL_HERE
Related
So I was wondering If there was a way to put a page counter in Onsen,
by that I mean the little three dots that you at the bottom of your iphone when scrolling through pages
Im using something similar to this ->
http://codepen.io/negibouze/pen/jEvOYz
enter code here
So i want it that the three dots float at the bottom of my screen to indicate that the user can swipe left or right, and dots change as I scroll, so if Im on the second page, the second dot is bigger than the rest
If you're using <ons-carousel> as in the template, just add an id to the carousel and add an postchange event listener (on the initialization of the page where the carousel is) where you can change the sizes of the dots.
Also change the content of the <ons-carousel-cover> tag to a list containing images of dots or something similar.
Example Javascript:
<script>
ons.bootstrap();
document.addEventListener("init",function(event){
if(event.target="#id_of_ons_page_containing_carousel"){
$('#id_of_carousel').on("postchange", function(){
var index=document.querySelector('#id_of_carousel').getActiveIndex();
$('#dot0').height(10);
$('#dot1').height(10);
$('#dot2').height(10);
$('#dot'+index).height(15);
});
}
});
</script>
In this case the <ons-carousel-cover> has the following content:
<ons-carousel-cover><div class="cover-label center">
<ul>
<li><div>
<img id="dot0" height="15" src="White_dot.png" alt="" />
</div></li>
<li><div>
<img id="dot1" height="10" src="White_dot.png" alt="" />
</div></li>
<li><div>
<img id="dot2" height="10" src="White_dot.png" alt="" />
</div></li>
</ul>
</div></ons-carousel-cover>
In order for the dots to appear in one line add the following css:
ul {
list-style: none;
padding-left: 0;
}
ul li{
display: inline;
min-height: 40px;
}
ul li div{
display: table-cell;
vertical-align: middle;
height: 40px;
line-height: 40px;
}
Under my root div react creates another div "automatically". Is there a way to add a class to that div? I need to add height: 100% to it to prevent the background content to scroll in mobile when an overlay is shown.
This is how it is shown when i inspect the element on the site. I need to add height:100% to the data-reactroot div when a button is clicked. But that div is nowhere in my source code.
<div id="root">
<div data-reactroot data-reactid="1" data-react-checksum="161698...
I could add this code in the container's componentDidMount()
let root = document.querySelectorAll('[data-reactroot]')[0];
if (root) {
root.style.height = '100%';
}
But isnt there a better way to do it? This feels like kind of hacky (in a bad way)
#root > [data-reactroot] { height: 100% } in your CSS should work.
Or just the tag itself:
[data-reactroot] { ... }
If you want to use in-line css, just make your top div position is absolute and left, top, right, bottom is zero.
So if you inspect the element:
<div id="root">
<div data-reactroot>
<div style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px>
....
So simple by using the id reference
#root{
/* your css here! */
}
I have a web page built in angularjs .
<html>
<head></head>
<body ng-app="app1" ng-controller = "ctrl1">
<header></header>
<div ng-view></div>
<footer></footer>
</body>
</html>
Here the header and footer is always fixed, but in content section when I am doing routing and in one of the view I have header which I always want to be fixed.
The problem is when use position:fixed for that content header and while moving the scroll of main page , the content below the header seems to move upwards.
so my question is how can I create that header in such a way that while scrolling down the content section or main section the header should always be fixed.
Any help is appreciated !!!
Thanks
WHat you need to do is add a padding-top to you content that is equal to the height of your header. That way your content will never scroll up below the header
.content-header {
height: 30px;
position: absolute;
top: 0px;
}
.content-container {
padding-top: 30px;
overflow: scroll;
position: relative;
}
Use overflow: scroll; for that div.
<div class="content" ng-view></data>
.content {
width: 150px;
height: 150px;
overflow: scroll;
}
Refer : http://www.w3schools.com/cssref/pr_pos_overflow.asp
You could use bootstrap to ease your task.
Kindly refer to :
https://getbootstrap.com/examples/navbar-fixed-top/
Hope this helps you.
I am using Angularjs UI Bootstrap Tab set. In order to avoid initial flicker issue, with tab names, I am using ng-cloak, but surprisingly still the initial flicker is appearing. I guess it is due to the large html content I have. Can any one suggest any fix for this?
The following is my tab set, and tab names are causing initial flicker issue.
<body >
<div class="splash" ng-controller="ApplicationController" ng-cloak>
<p>Please wait while loading!</p>
</div>
<div id="content" data-ng-controller="MainCtrl" ng-init="init()" ng-cloak>
<tabset>
<tab ng-repeat="eachTab in chartsTabs" heading="{{eachTab.tabName}}" select="createChartsPerTab(recordsSet, eachTab)"> </tab>
</tabset>
</div>
</body>
The following is my piece of code using ng-cloak:
<div id="splash" data-ng-controller="MainCtrl" ng-init="init()" ng-cloak>
And in my custom css file I have :
[ng:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
What I would suggest is, as your tab name is seen with flicker effect, the issue is at the directive level, you can modify your directive tab's template html to include a ng-cloak wherever the name of tab appears.
You should also put a ng-cloak directive on your other container. I.e.
<body ng-controller="ApplicationController">
<!-- Please note that this splash is a separate div beside the main div -->
<div class="splash" ng-cloak>
<p>Please wait while loading!</p>
</div>
<!-- and here comes your content div -->
<div id="content" ng-controller="ContentController" ng-cloak>
<!-- everything else here -->
</div>
</body>
and your custom css looks like:
/* this css rule is to hide everything with the ng-cloak directive */
[ng-cloak] {
display: none !important;
}
/* this css rule displays the splash element if the ng-cloak directive is active */
[ng-cloak].splash {
display: block !important;
}
/* just style your splashscreen */
.splash {
position: absolute;
background-color: #ededed;
color: #ffffff;
display: none;
bottom: 0;
left: 0;
right: 0;
top: 0;
z-index: 5000;
}
.splash p {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 500px;
height: 20px;
text-align: center;
margin: auto;
}
ng-cloack could not be used until the angularjs library is not loaded completeley.
try to work with the directive ng-include because it will only show the content after angularjs library is loaded and everything is compiled.
for example:
<html lang="en" ng-app="myApp">
<body ng-cloak ng-controller="YourController">
<div class="container">
<div ng-include="'templateWhichIsCompletelyCompiled.html'"></div>
</div>
</body>
</html>
I am trying to align two divs horizontally. My list in the 2nd div is horizontally aligned, but the two divs fail to align horizontally as inline-blocks. Any help would be greatly appreciated.
Here is the CSS and HTML code:
CSS
#wrapper {
margin:0 auto;
width:100%;
position:relative;
}
.navit {
position:relative;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
display:inline;
}
.container-logo {
display:inline-block;
}
.container-user {
display:inline-block;
}
#user-nav-container ul li {
display:inline;
}
#user-nav-container ul li a {
background-color:#000000;
color:#FFF;
font-size:14px;
}
#user-nav-container ul {
list-style-type:none;
background-color:#000000;
}
HTML
<html>
<body>
<div id="wrapper">
<header id="top">
<div id="navbar" class="navit">
<div id="logo-container" class="container-logo"><a href="http://www.site.com/" id="logo">
<h1>ServiceMyResume.com</h1>
</a></div>
<div id="user-nav-container" class="container-user">
<ul>
<li>Site 1</li>
<li>Site 2</li>
</ul>
</div>
</div>
</header>
</div>
</body>
</html>
Fiddle: http://jsfiddle.net/8TfzJ/
Get rid of:
#user-nav-container ul li {
display:inline;
}
This is what is causing your nav elements to be horizontal instead of vertical.
http://jsfiddle.net/8TfzJ/1/
Update
To vertiacaly align the two elements add vertial-align top to them, see: http://jsfiddle.net/8TfzJ/2/.
Note in the fiddle I've added a border so you can see the elements are vertially aligned. You may need to adjust margins and padding of the contained elements to fully achieve what you are looking for. Use Firebug for Firefox to help you here. You can inpect an experiment with the CSS in the borwser.
In a modern browser you should see:
See this article for some inf on the drawbacks of inline-block and how to over come them:http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
On a side note, you shouldn't put block elements e.g. h1 inside inline elements e.g. a. It should be the other way around. Try validating it here: http://validator.w3.org/#validate_by_input+with_options
I know it is not as inline-blocks, but you you mean something like this JSFiddle?
#navbar:after
{
display: table;
content: "";
clear: both;
}
#logo-container,
#user-nav-container
{
float: left;
}