I'm just started making my first Meteor app and I wanted my div to to be the same height as the page, so logically I set the height to 100%. It didn't work. Then I set the width to 100%. That also didn't work. Is there a mistake in my code? Or maybe does Meteor parse css weirdly?
<head>
<title>Facer</title>
</head>
<body>
</body>
<template name="home">
<div id="face">
<img id="faceimg" src="http://raritea.com/raritea/images/logo.svg"/>
</div>
</template>
CSS:
body {
margin: 0px;
background-color: grey;
}
#face {
background-color: black;
width: 100%;
height: 100%;
}
JS:
Router.map(function(){
this.route('home', {path: '/'});
});
Or maybe does Meteor parse css weirdly? No, meteor works exactly like other web framework.
Try with this css.
#face {
background-color: black;
width: 100%;
height: 100%;
position: absolute;
}
Also in order to use iron:route and get off the <body> tag i recommend you to use the layout template, like this.
<template name="layout">
{{> yield}}
</template>
Router.configure({
layoutTemplate:'layout',
})
The {{> yield}} helper will take care of us to render the template home
Here is the MeteorPad with the div full width/height on the screen.
Tutorial iron:router
Check the Manuel Schoebel iron router tutorial is a good start point
Related
I have this website - https://www.emeraldhill.rs/
On the home page, there is this part - https://prnt.sc/qp2ri0
If you click on any of these images it will take you to the page "Reference". Right after the page is loaded, depending on the position of the building you selected on the home page, it will start scrolling until it finds the right block. I set the anchor links.
What I want is to avoid the scrolling part and land on the block that I choose on the home page instantly.
How can I achieve this?
The website is built with Divi theme.
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_scrollintoview
<html>
<head>
<style>
#myDIV {
height: 250px;
width: 250px;
overflow: auto;
background: green;
}
#content {
margin:500px;
height: 800px;
width: 2000px;
background-color: coral;
}
</style>
</head>
<body>
<button onclick="myFunction()">Scroll</button>
<div id="myDIV">
<div id="content">
Some text inside an element.
</div>
</div>
<script>
function myFunction() {
var elmnt = document.getElementById("content");
elmnt.scrollIntoView();
}
</script>
</body>
</html>
This is what you exactly need,and the referance link is provided above.
I gave you what you want in javascript.
I am not good in wordpress but i think you can edit divi theme.
Hey I create Ember application , And I try to set Sticky Footer.
I try to do this by this tutorial Sticky Footer On CSS-Tricks , Cause it's work for me once.
But with Ember its dosen't work
My css:
.mainFooter {
height:100px;
color:white;
background-color: #0c2635;
text-align:center;
}
.wrapper {
min-height: 100%;
margin-bottom: -100px;
}
.wrapper:after {
content: "";
display: block;
}
.mainFooter, .wrapper:after {
height: 100px;
}
My HTML:
<footer class="mainFooter">
SOME TEXT
</footer>
As I said, it's dosent work.
I watch the source code via the Inspector and I saw that Ember added its own wrapper to content the I put in the application.hbs file, this wrapper have a class named ember-view so I try to do:
.ember-view {
min-height: 100%;
}
But it's dosent work either, the footer displayed in the middle of the page.
Someone maybe try this and successid?
I would like to know about a solution to this problem.
I don't know how to fake an Ember app in jsfiddle/codeopen so I upload the app to my server, url: http://drawyourgif.pe.hu/dist/
EDIT
According to the solution that kumkanillam sugest I did so:
Application.hbs:
{{outlet "modal"}}
{{partial "header"}}
<div id="gif" class="wrapper">
{{outlet}}
</div>
{{partial "footer"}}
app.js
App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
rootElement: '#gif',
Resolver
});
And I get this error in the console:
ember.debug.js:43272Uncaught TypeError: Cannot read property 'tagName' of undefined
What I did wrong?
.ember-view will be included for all ember component by default so it's not good to apply css property for this class.
there may be many ways but the below should help.
You can wrap your application.hbs to render inside your page-wrap div.
for this you need to include the below line in
index.html
<div id="app-name" class="wrapper">
{{content-for "body"}}
</div>
application.hbs
<h1> Content </h1>
{{outlet}}
<div id="footer">
<p>I'm the Sticky Footer. inside application.hbs</p>
</div>
Configure rootElement in app.js. that will force entire app to include it in app-name div.
app.js
App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
rootElement: '#app-name',
Resolver
});
app.css
#wrapper {
min-height: 100%;
overflow: auto;
}
#footer {
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 50px;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
}
Final Update:
You don't need to change anything in app.js. just look at the sample twiddle. I think this will help you
SAMPLE TWIDDLE
Here is a solution that uses flexbox. You may not want to use flexbox because you're unfamiliar with it, but I'll submit this answer for later google searches.
Here's a codepen with very little content in the main body: http://codepen.io/anon/pen/KgXgjV
Here's the same css with much more content in the main area: http://codepen.io/anon/pen/dpVpBK
Here is an example of why position: absolute doesn't work: https://ember-twiddle.com/f620502b8172f4181c9d58503e02e39c?openFiles=templates.application.hbs%2C
HTML
<html>
<body>
<div id="root" class="ember-application">
<div id="ember332" class="ember-view">
<div class='main-content'>
<h1>Welcome to Ember Twiddle</h1>
<br />
<p>
this page has very little content
</p>
</div>
<div id="footer">
<p>I'm the Sticky Footer. inside application.hbs</p>
</div>
</div>
</div>
</body>
</html>
CSS
/* this is just to reset codepen */
/* probably not necessary on ember */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* end reset */
html, body, #root {
height: 100%;
}
.ember-view {
display: flex;
flex-direction: column;
min-height: 100vh;
background: lightblue;
}
.main-content {
flex: 1;
}
#footer {
width: 100%;
height: 50px;
background-color: grey;
}
I have the following configuration in a simple html file:
* {
box-sizing: border-box;
}
html, body {
height: 100%;
min-height: 100%;
margin: 0;
}
section {
display: block;
width: 100%;
min-height: 100%;
padding: 1em
}
.b1 {
background: #2AC56D
}
.b2 {
background: #fae10c
}
.b3 {
background: #03a9f4
}
<section class="b1">1
</section>
<section class="b2">2
</section>
<section class="b3">3
</section>
Then I try to use AngularJS Routing in the following way: the section elements go into a template called template.html like this:
<section class="b1">1
</section>
<section class="b2">2
</section>
<section class="b3">3
</section>
And I add to the main file the AngularJS, the ng-route dependencies and the following script like this:
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script>
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: 'template.html'
}).otherwise({
redirectTo: '/'
});
});
</script>
</head>
<body data-ng-app="app">
<div data-ng-view>
</div>
</body>
It is working on the scripting part, but the section elements are no longer full height and look like this.
What is really the issue and, more important, how can I correct it? What I really need is to have some div's or section's at least full screen height.
Thank you.
Hmmm, To make height: 100%; work properly, you need to set in its parent div too.
Suppose this html:
<div id="main">
<section>1</section>
</div>
Then just applying 100% height in section won't work. You need to set fixed height for the parent element. So, use:
#main{
height: 100%;
}
You already set 100% height in html,body tag that's good.
So, in your case, apply like this:
div[data-ng-view]{
height: 100%;
}
I'm using Polymer for a new version of my website and I'm having some issues with displaying a data-bound background-color in all browsers.
Here is a live example. In Chrome it works as one would expect, with a red background-color showing up (depicted in the image below)
Now, in Firefox and IE 11 the background-color does not show up, resulting in something like this:
Now, I expect this has something to do with the polyfill, since Chrome is the only browser to natively support custom elements as shown in the browser compatibility page
Here's my code (same as in live example):
<polymer-element name="leiding-card" attributes="bgColor">
<template>
<style>
:host{
display: block;
position: relative;
padding: 20px;
border-radius: 2px;
background-color: {{bgColor}};
}
.profilePic{
width: 50px;
height: 50px;
border-radius: 25px;
margin: 10px;
background-size: 50px 50px;
}
</style>
<link rel="stylesheet" href="default_styles.css">
<paper-shadow z="1" animated="true"></paper-shadow>
<div class="white">
<content select="h1"></content>
<template repeat="{{p in people}}">
<div layout horizontal wrap around-justfied>
<div class="profilePic" center style="background-image: url({{p.profilePic}});"></div>
<div style="margin-right: 10px;">
<p>{{p.name}} {{p.lastname}}</p>
<h4>{{p.email}}</h4>
</div>
</div>
</template>
</div>
</template>
<script>
Polymer('leiding-card',{
ready: function(){
this.people = [
{name: "John", lastname: "Snow", profilePic: "http://lorempixel.com/output/cats-q-c-640-480-3.jpg", email: "john.snow#john.snow"},
{name: "Other", lastname: "Bastard", profilePic: "http://lorempixel.com/output/cats-q-c-640-480-8.jpg", email: "other.bastard#other.bastard"}
]
}
});
</script>
</polymer-element>
I've already tried doing stuff like polyfill-next-selector { content: ':host'; }, but I can't really find an example of it online and usually I don't see any issues with directly applying styles to the :host.
There's an open bug around bindings not working in style tags under the polyfill - https://github.com/Polymer/polymer/issues/270. Looks like there's a workaround provided in the bug notes, see http://jsbin.com/pelon/1/edit
The bootstrap documentation on that topic is a little confusing to me. I want to achieve similar behaviour like in the docs with the affix navbar: The navbar is below a paragraph / page heading, and upon scrolling down it should first scroll along until reaching the top of the page, and then stick there fixed for further scrolldowns.
As jsFiddle does not work with the navbar concept, I've set up a separate page for usage as a minimal example: http://i08fs1.ira.uka.de/~s_drr/navbar.html
I use this as my navbar:
<div class="navbar affix-top" data-spy="affix" data-offset-top="50">
<div class="navbar-inner">
<div class="container">
<div class="span12">
<a class="brand" href="#">My Brand</a>
This is my navbar.
</div>
</div> <!-- container -->
</div> <!-- navbar-inner -->
</div> <!-- navbar -->
I thinkg i would want data-offset-top to be of value 0 (since the bar should "stick" to the very top" but with 50 there is at least some effect watchable.
If also put the javascript code in place:
<script>
$(document).ready (function (){
$(".navbar").affix ();
});
</script>
Any help appreciated.
I was having a similar problem, and I believe I found an improved solution.
Don't bother specifying data-offset-top in your HTML. Instead, specify it when you call .affix():
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
The advantage here is that you can change the layout of your site without needing to update the data-offset-top attribute. Since this uses the actual computed position of the element, it also prevents inconsistencies with browsers that render the element at a slightly different position.
You will still need to clamp the element to the top with CSS. Furthermore, I had to set width: 100% on the nav element since .nav elements with position: fixed misbehave for some reason:
#nav.affix {
position: fixed;
top: 0px;
width: 100%;
}
One last thing: When an affixed element becomes fixed, its element no longer takes up space on the page, resulting in the elements below it to "jump". To prevent this ugliness, I wrap the navbar in a div whose height I set to be equal to the navbar at runtime:
<div id="nav-wrapper">
<div id="nav" class="navbar">
<!-- ... -->
</div>
</div>
.
$('#nav-wrapper').height($("#nav").height());
Here's the obligatory jsFiddle to see it in action.
Just implemented this for the first time, and here's what I've found.
The data-offset-top value is the amount of pixels that you must scroll in order for the affixing effect to take place. In your case, once 50px is scrolled, the class on your item is changed from .affix-top to .affix. You'd probably want to set data-offset-top to about 130px in your use case.
Once this class change occurs, you must position your element in css by styling the positioning for class .affix. Bootstrap 2.1 already defines .affix as position: fixed; so all you need to do is add your own position values.
Example:
.affix {
position: fixed;
top: 20px;
left: 0px;
}
To fix this very issue I have modified the affix plugin to emit a jQuery event when an object is affixed or unaffixed.
Here is the pull request: https://github.com/twitter/bootstrap/pull/4712
And the code: https://github.com/corbinu/bootstrap/blob/master/js/bootstrap-affix.js
And then do this to attach the navbar:
<script type="text/javascript">
$(function(){
$('#navbar').on('affixed', function () {
$('#navbar').addClass('navbar-fixed-top')
});
$('#navbar').on('unaffixed', function () {
$('#navbar').removeClass('navbar-fixed-top')
});
});
</script>
You need to remove .affix() from your script.
Bootstrap gives the option of accomplishing things either via data-attributes or straight JavaScript most of the time.
I've got this from the twitterbootstrap's source code and it's working pretty well:
HTML:
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul id="navbar" class="nav nav-list bs-docs-sidenav">
...
</ul>
</div>
</div>
CSS:
.bs-docs-sidenav {
max-height: 340px;
overflow-y: scroll;
}
.affix {
position: fixed;
top: 50px;
width: 240px;
}
JS:
$(document).ready(function(){
var $window = $(window);
setTimeout(function () {
$('.bs-docs-sidenav').affix({
offset: {
top: function (){
return $window.width() <= 980 ? 290 : 210
}
}
})
}, 100);
});
You just need to remove the script. Here is my example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<style>
#content {
width: 800px;
height: 2000px;
background: #f5f5f5;
margin: 0 auto;
}
.menu {
background: #ccc;
width: 200px;
height: 400px;
float: left;
}
.affix {
position: fixed;
top: 20px;
left: auto;
right: auto;
}
</style>
</head>
<body>
<div id="content">
<div style="height: 200px"></div>
<div class="affix-top" data-spy="affix" data-offset-top="180">
<div class="menu">AFFIX BAR</div>
</div>
</div>
</body>
</html>
Thanks to namuol and Dave Kiss for the solution.
In my case I had a tiny problem with navbar height and width when I used afflix and collapse plugins together. The problem with width can be easily solved inheriting it from parent element (container in my case). Also I could manage to make it collapsing smoothly with a bit of javascript (coffeescript actually). The trick is to set wrapper height to auto before collapse toggle occurs and fix it back after.
Markup (haml):
#wrapper
#navbar.navbar
.navbar-inner
%a.btn.btn-navbar.btn-collapse
%span.icon-bar
%span.icon-bar
%span.icon-bar
#menu.nav-collapse
-# Menu goes here
CSS:
#wrapper {
width: inherit;
}
#navbar {
&.affix {
top: 0;
width: inherit;
}
}
Coffeescript:
class Navigation
#initialize: ->
#navbar = $('#navbar')
#menu = $('#menu')
#wrapper = $('#wrapper')
#navbar.affix({offset: #navbar.position()})
#adjustWrapperHeight(#navbar.height())
#navbar.find('a.btn-collapse').on 'click', () => #collapse()
#menu.on 'shown', () => #adjustWrapperHeight(#navbar.height())
#menu.on 'hidden', () => #adjustWrapperHeight(#navbar.height())
#collapse: ->
#adjustWrapperHeight("auto")
#menu.collapse('toggle')
#adjustWrapperHeight: (height) ->
#wrapper.css("height", height)
$ ->
Navigation.initialize()
My solution for attach the navbar :
function affixnolag(){
$navbar = $('#navbar');
if($navbar.length < 1)
return false;
h_obj = $navbar.height();
$navbar
.on('affixed', function(){
$navbar.after('<div id="nvfix_tmp" style="height:'+h_obj+'px">');
})
.on('unaffixed', function(){
if($('#nvfix_tmp').length > 0)
$('#nvfix_tmp').remove();
});
}
Similar to the accepted answer, you can also do something like the following to do everything in one go:
$('#nav').affix({
offset: { top: $('#nav').offset().top }
}).wrap(function() {
return $('<div></div>', {
height: $(this).outerHeight()
});
});
This not only invokes the affix plugin, but will also wrap the affixed element in a div which will maintian the original height of the navbar.