I have a card that I want the user to be able to open in a new tab by using mouse middle button. So for this purpose I added a link <a> with an href that is being automatically generated for each card. The problem is that the route I'm trying to navigate to takes as parameters some complex structures that cannot be passed directly in the route link. Sometimes the user just clicks on the card and the browser takes the link instead of the js method that passes the parameters. As a result the new route is loaded like there where no parameters (this is the correct behavior if it were in a new tab).
const openDocument = function (){
console.log('open doc in the same tab using custom router params');
//params contains also a big array of numbers that cannot be passed in route
}
.container{
background-color: gray;
width:200px;
height: 200px;
padding: 30px;
}
.global-link{
position: absolute;
background-color:red;
min-width: 230px;
min-height: 230px;
margin-left: -15px;
margin-top: -15px;
}
.card-container{
background-color: green;
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="container">
<a class="global-link"></a>
<div class="card-container" ng-click="openDocument()">
</div>
<div>
I solved this issue by preventing the onclick event default behavior. And then executing openDocument() method.
<a class="global-link" href="document/id" ng-click="$event.preventDefault(); openDocument();"></a>
And it works really well because angular wont intercept the middle or right click, so you will be able to open in a new tab etc.
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;
}
I am having a very strange layout issue with list-items generated using ng-repeat.
Plunker here
If you look at the view, you will see that the li in green (not generated using ng-repeat) goes to the next line because of the unexpected space. Also, if you change the width of li to 33%, you will see that the last li (Add User) is not aligned correctly.
I can work around this with some css tricks, but I want to understand why this is happening and if there is any way to avoid this. Has anyone encountered this before and figured out why this is happening?
Adding code below only because plunker link needs to be accompanied with some code
.users * {
box-sizing: border-box;
}
.users ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.users ul li {
width: 49%;
margin: 5px 1% 0 0;
padding: 0;
display: inline-block;
}
.users ul li.user {
background: yellow;
}
.users ul li.add-user {
background: lightgreen;
}
It's because you have a blank space (created by the carriage return) beetween the closing </li> and the <li class="add-user">
Write your html like this and the last li will be displayed correctly :
...
<li class="user" data-ng-repeat="user in vm.users track by $index">
<div>{{ user.name }}</div>
</li><li class="add-user">
<div>
<a>Add Child</a>
</div>
</li>
...
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;
}
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