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.
Related
I would like to present desktop users with a phone image and overlay an iframe that displays an external website to fit the phone screen. Both should be responsive.
If possible, When the visitor is already on a mobile phone then they should see the the same thing that is seen on the desktop, but without the phone as a frame.
Does anyone know how this can be done?
Here is the method that I use for responsive stacked divs.
This will work for both methods you asked for, but I would suggest not loading a desktop version to the mobile users, for bandwidth purposes being they have no option to prevent the content to load.
It is based on percentages and from my experience, it has the best responsive results, with minimal coding. Once you replace the photo, you will need to adjust the width and height percentage values in the CSS to scale as desired.
The Markup
<div id="container">
<div id="photo">
<img src="https://d3nj7353mvgauu.cloudfront.net/media/categories/iphone-6-6s-6-plus-6s-plus-1.png" width="100%" height="auto">
<div id="site">
<iframe src="https://www.godaddy.com/" width="99%" height="99%"></iframe>
</div>
</div>
</div>
The CSS
#container {
position: relative;
width: 100%;
max-width: 600px;
height: auto;
}
#photo {
position: absolute;
width: 100%;
}
#site {
position: absolute;
width: 100%;
max-width: 43%;
height: 76%;
top: 11.75%;
left: 28.25%;
border: none;
}
JsFiddle Demo Link
I have working plunker with my accordion:
http://plnkr.co/edit/Qk4AxzXLuDDAAXt3wZ6z?p=preview
Did the same in my project and when I click to the accordion header, it shows accordion content but its height is 1px and data successfully binds.
What's wrong? :(
(it's not a problem with angular and bootstrap version)
You need to handle the CSS on your own. Refer following dummy CSS for your purpose:
#accordion .ui-accordion-content {
width: 100%;
background-color: #f3f3f3;
color: #777;
font-size: 10pt;
line-height: 16pt;
}
where #accordian is id of the div.
I'm using ion-slide-box, but the issue is, my ion-slides image is not in the same size, its dynamically repeated different size image using ng-repeat
<ion-slide ng-repeat="sliderimages in sliderimages">
<img src={{sliderimages.url}} style="width:100%;height:auto;"/>
</ion-slide>
</ion-slide-box>
I used this CSS to fit image height to all
.slider {
height: 200px;
width:100%;
}
.slider-slide {
color: #000;
background-color: #fff;
height: 100%;
width:100%;
}
but the height is not so fit
I have to add any size of images and that to be fit in the Ionic slider.
max-width: 100vw !important;
max-height: 100vh !important;
this worked for me ;-)
Do not apply an explicit width or height to the image tag. Instead, give it:
max-width:100%;
max-height:100%;
Example: http://jsfiddle.net/xwrvxser/1/
Regards.
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 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