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.
Hi I'm adding a popover to UI grid in AngularJS. The idea is when the user mouse-over a row a popover will show up, and the popover contains a directive. I've successfully implemented this part, but now the problem is that part of the popover is blocked by the ui grid table, like this:
I want to bring the popover to the front, and I've tried setting z-index for both the ui grid table and the popover. Related code is here:
JS part:
function rowTemplate() {
var template = [];
...
template.push('popover-template="\'popover.html\'" popover-placement="bottom" popover-trigger="click"></div>');
return template.join(' ' );
}
HTML:
<div class="gridStyle" ui-grid="vm.grid" ui-grid-resize-column ui-grid-selection style="margin-top:0px; height:200px; z-index: 4; position: relative">
</div>
<script type="text/ng-template" id="popover.html">
<div style="height: 150px; width: 600px; overflow-x: auto; overflow-y: hidden; z-index: 10; position: relative">
<directive-related part />
</div>
</script>
But after I set the z-index it's still not working. How can I resolve this?
Some of my references are here: popover: popover, z-index: z-index.
Thanks!
Note: I am making the assumption here that you are using ui-bootstrap.
I have found that usually you need to use the append-to-body attribute with ui-grid custom formats.
Try changing the template like so to add that attribute:
template.push('popover-template="\'popover.html\'" popover-append-to-body="true" popover-placement="bottom" popover-trigger="click"></div>')
I want to change the class of one div while hovering over another div using AngularJS directives. Here is what I have so far http://jsfiddle.net/E8nM5/38/
HMTL
<div ng-controller="Ctrl" ng-app>
<div ng-class="my-class">This div will change class when one hovers over bottom DIV </div>
<br/>
<div class="hover-div" ng-mouseenter="my-class = 'highlight'" ng-mouseleave="my-class = 'lowlight'">HOVER OVER ME TO CHANGE THE UPPER DIV's CLASS</div>
</div>
CSS
div.highlight {
padding: 10px;
background: red;
color: white;
}
div.lowlight {
padding: 10px;
background: blue;
color: white;
}
div.hover-div {
padding: 10px;
background: green;
color: white;
}
JS
function Ctrl($scope){
}
Any ideas?
Change my-class to myclass (i.e. the dash causes problem).
<div ng-controller="Ctrl" ng-app>
<div ng-class="myclass">This div will change class when one hovers over bottom DIV </div>
<br/>
<div class="hover-div" ng-mouseenter="myclass = 'highlight'" ng-mouseleave="myclass = 'lowlight'">HOVER OVER ME TO CHANGE THE UPPER DIV's CLASS</div>
</div>
Updated: the reason my-class isn't allowed in the expression is because AngularJS treats the dash as minus symbol and tries to parse it that way. Apparently, it can't parse the statement my - class = 'highlight'. Unfortunately, after reading AngularJS parser code, I can't find a way to "help" it distinguish between dash and minus.
You need to remove the hyphen from my-class so it will work properly in your Controller. Other than that it looks like you have it mostly done. Here's a little snippet - I also added it as text in the div so you can see it change
Your HTML File:
<div class="{{myClass}}"> {{myClass}} </div>
<div class="hover" style="height:50px; width:50px; border:1px solid black;" ng-mouseleave="myClass='test'" ng-mouseenter="myClass='hola'"> </div>
Controller
function Ctrl($scope){
$scope.myClass="test";
}
Currently I have something like this. The "Page" and "Row" elements are created dynamically using javascript.
The problem rises when there are multiple Pages, and a Row in the Page 1 is deleted, for example. The empty space should be filled by the element that is below, if the empty space is at the end of the page, then the first element of the next page should fill the empty space, and so on. At the end it should look like this.
I can solve this rearranging/recreating the entire PageCont.
Is there a way I can achieve this using pure CSS? So the rearranging would be handled by the rendering engine of the browser.
Something like this inline-block but with vertical direction.
Any help is highly apreciated.
HTML:
<div class="PageCont">
<div class="Page">
<div class="Row">1</div>
<div class="Row">2</div>
<div class="Row">3</div>
<div class="Row">4</div>
</div>
<div class="Page">
<div class="Row">5</div>
<div class="Row">6</div>
<div class="Row">7</div>
<div class="Row">8</div>
</div>
<div class="Page">
<div class="Row">9</div>
</div>
</div>
CSS:
.PageCont
{
height: 300px;
width: 350px;
border:2px solid red
}
.Page
{
float:left;
margin-left:10px;
}
.Row
{
height:50px;
width:50px;
background-color:blue;
color:white;
margin-top:10px;
}
The operation could be successfully performed trivially if it included horizontal wrapping, with plain simple CSS. However since this case involves vertical wrapping javascript be necessary with your current implementation. If you were to use columns you wouldn't need the javascript and CSS is all that's needed.
Here is a fiddle where I've implemented it http://jsfiddle.net/eQvaZ/
The HTML is as follows:
<body>
<div class="pageCont">
<div class="Row">C1</div>
<div class="Row">C2</div>
<div class="Row" id="to-remove">C3</div>
<div class="Row">C4</div>
<div class="Row">C5</div>
<div class="Row">C6</div>
<div class="Row">C7</div>
</div>
<div>Removing C3 in 5 seconds...</div>
</body>
The CSS:
.pageCont{
column-count:2;
column-rule:0px;
-webkit-column-count: 2;
-webkit-column-rule: 0px;
-moz-column-count: 2;
-moz-column-rule: 0px;
padding:10px;
height: 250px;
width: 200px;
border:2px solid red
}
.Row {
height:50px;
width:50px;
background-color:blue;
color:white;
margin-bottom:10px;
}
The bit of JavaScript to remove an item:
setTimeout( function(){
var to_remove = document.getElementById('to-remove');
to_remove.parentNode.removeChild(to_remove);
}, 5000);
Let me know if you have any questions regarding this implementation.
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