nav going below content on browser resize - javascript

I have a strange problem I can't figure out. I'm developing some navigation (that is responsive) independent from the rest of my site, and all is going well, except for one thing. If you load the page at a normal desktop size, the navigation is correctly above the placeholder image. But if you resize the browser window skinnier to where it switches to tablet size, and then resize it wider again, the navigation goes below the placeholder image.
Maybe it's something simple or maybe it's not. I can't figure it out.
My html structure is
<body>
<div id="page">
<div id="wrapper">
<nav></nav>
<section id="content"></section>
</div>
</div>
</body>
So I'm not sure how the content section is getting above the nav, but if you inspect the code and look at the html after doing the resize I describe above, the code becomes
<body>
<div id="page">
<div id="wrapper">
<section id="content"></section>
<nav></nav>
</div>
</div>
</body>
I'm not sure if it's the javascript I'm using or what the deal is that is juggling that and not resetting it. Surely it's not a missing CSS declaration...
EDIT: Resolved! Thanks Chris!

Looking at the code beginning on line #2619, the destroy function expects there to be an element #header, which doesn't exist. Add the element #header as the first element within your #wrapper and the issue will resolve. I'm assuming this isn't your JavaScript, so I wouldn't recommending changing it; instead, adjust your markup to give it what it expects.

Try changing the navigation.js line
a.elt.insertAfter("#content");
to
a.elt.insertAfter("#header");

Related

Set text after a three.js scene defined by a <div id="mainWindow">

I have coded a small Three.js animation that I put i following way in my HTML page :
<div id="mainWindow" class="popup_block">
<!-- Javascript for simulation -->
<script src="../temp/webgl-debug.js"></script>
<script src="../temp/three.min.js"></script>
<script src="../temp/Detector.js"></script>
<script src="../temp/TrackballControls.js"></script>
<script src="../temp/OrbitControls.js"></script>
<script src="../temp/dat.gui.js"></script>
<script src="./main_simulation.js"></script>
<br>
This is a test : I want to put text below the "div id="mainWindow", not above like here :<br>
How could I do that ???
</div>
where I handle the Three.js scene of "mainWindow" in main_simulation.js
Unfortunately, I can't get to put after </div> some text or other HTML elements : they are systematically put above the <div id="mainWindow">... </div> block
You can see this issue on the following link :
Can't put text below Three.js
Maybe this problem comes from the fact that I am loading JS scripts at the bottom of HTML page but I am not sure.
If I load JS scripts in <head> section, I can't make appear the Three.js scene.
Could anyone give me a trick to put text after the main div of Three.js ?
Regards
UPDATE 1 :
I have also tried with :
<div id="mainWindow" class="popup_block"></div>
<!-- Javascript for simulation -->
<script src="../temp/webgl-debug.js"></script>
<script src="../temp/three.min.js"></script>
<script src="../temp/Detector.js"></script>
<script src="../temp/TrackballControls.js"></script>
<script src="../temp/OrbitControls.js"></script>
<script src="../temp/dat.gui.js"></script>
<script src="./main_simulation.js"></script>
<br>
This is a test : I want to put text below the "div id="mainWindow", not above like here :<br>
How could I do that ???
But the problem is still present
UPDATE 2 :
Here's an illustration of my issue :
In HTML source, the text is located below the three.js div, but the rendering makes put it above.
UPDATE 3 :
First of all, its not really a matter of three.js, but there is still an important issue to address.
Whatever functions You have, either plain image positioning, or three.js placing the renderer in a div, It's easy to lose track of what is appended where.
It can happen when the html skeleton is being rather scarce, for most of the page is created in js. It's a bit unclear to anyone but the original developer, so he needs to keep track of what is going on. Imo this is a bit impractical.
I wouldn't create elements in the body in js, I'd rather append them to existing wrapper containers, so I could easily manage them with any css:
<div id="mainWindow"></div>
<div id="image"></div>
<div id="below"></div>
if You switch the target div from the body, to #image, You can rearrange them however You like, without making any changes in the js code, which could cause a chain of unpredicted behaviour.
Now the desired arrangement could be made using the position:relative; css property.

Foundation <nav data-topbar> disallows writing a <section> into <div>

Is this behaviour expected, or a bug?
When using Zurb Foundation 5's top-bar component, the rendered HTML is doesn't allow me to put a «section» tag inside of a «div». I have troubleshooted enough to know that this only occurs when you add the data-topbar attribute to the «nav». I am able to add a «ul» element in the «div» and have it render properly. However, the «section class="tob-bar-section"» is fighting me.
Markup written to file:
<nav data-topbar="topbar">
<div>
<section></section>
</div>
</nav>
Markup rendered by browsers (FF/Chrome):
<nav data-topbar="topbar">
<div></div>
<section></section>
</nav>
Thank you for any help!
It may not be the classiest solution, but seeing as no matter what route I took short of rewriting my app, this problem was persistent.
Instead of fighting it, I just moved the section on it's own.
topBarReposition: function () {
var topbar = $(".header_wrap .top-bar-section"),
sibling = $(".header_wrap .row ul");
$(sibling).after(topbar);
}

windows.print results in empty page

So I'm trying to add a print button to an html page. Most of the page is not supposed to appear in print, so I hide everything in print and then reveal only the one div that is supposed to be printed (or this is what I'm trying to do). But when I try the print button out, the resulting page is completely empty. The html structure of the page looks like this:
<body>
<div id="fullpage">
<div class="section">
some stuff that should not be printed
</div>
<div class="section">
even more stuff that should not be printed
</div>
<div class="section" id="results_page">
<img id="result_image" class="archiv" src="./images/heumarkt/APDC0013.JPG">
<div class="content_wrapper" id="result_text">
<h1 id="result_h1">some stuff</h1>
<h2 id="result_h2">more headlines</h2>
<p id="result_p1">some text</p>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(true)">print</button>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(false)">print without picture</button>
</div>
</div>
</div>
</body>
And here is the CSS that is supposed to hide everything except the div with the id "results_page" (of course the buttons in that div are also supposed to be hidden in print).
#media print {
*{
background-color:transparent;
}
div#fullpage .section, .print_trigger, .unprintable{
display:none;
}
div#fullpage #results_page{
display:block;
}
#result_image,
#result_text {
float: none;
margin: 50px;
}
}
The javascript function is pretty simple, depending on what button the user clicks it adds the "unprintable" class to the picture element and then prints the document (I'm not sure if the html, the css or the js are the culprit here, this is why I include all of this in the question):
function print_stadtarchiv(print_picture){
if(!print_picture) $('#result_image').addClass = 'unprintable';
window.print();
}
So, given all of this, what could be causing the empty page my printer spits out?
For anyone who is having this problem(especially if using bootstrap), it may be a CSS issue and NOT a javascript issue.
My dilemma was that we had a print button towards the top of the page that called "window.print()" function. And it resulted in a blank print preview page. The weird part was that is was working completely fine several weeks ago.
So first, like many threads have mentioned, check that this is not a javascript issue indeed. My call to window.print() did truly bring up the print preview window(meaning we weren't accidentally overriding the print function with another variable somewhere.)
The issue was with Bootstrap's container and container-fluids classes not displaying for print modes. Apparently these classes are being told to be not displayable on print styles(presumably from bootstrap style sheet).
All I had to do was add the following CSS print rules:
.container, .container-fluid {
width: auto;
display: block!important;
}
and it displayed again! This is also hinted at through bootstrap documentation here: http://getbootstrap.com/getting-started/#support-printing
So in a nutshell, check if the CSS is the issue, and stop blaming that poor Javascript.
Here you go:
function print_stadtarchiv(print_picture) {
if(!print_picture) $('#result_image').addClass('unprintable');
return window.print();
}
It also looks like you have no DOCTYPE or html tags... This is likely to cause all sorts of rendering/not-rendering based issues.
<!DOCTYPE html>
<html>
<body>
<div id="fullpage">
<div class="section">
some stuff that should not be printed
</div>
<div class="section">
even more stuff that should not be printed
</div>
<div class="section" id="results_page">
<img id="result_image" class="archiv" src="./images/heumarkt/APDC0013.JPG">
<div class="content_wrapper" id="result_text">
<h1 id="result_h1">some stuff</h1>
<h2 id="result_h2">more headlines</h2>
<p id="result_p1">some text</p>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(true)">print</button>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(false)">print without picture</button>
</div>
</div>
</div>
</body>
</html>
To anyone having the same problem: I couldn't figure out what was causing it, but I could get it done using the window.frame approach elaborated in this answer.

Force vertical scrollbar to bottom

I have a chat window, and I want to always see bottom of this chat. I tried two ways, both of them are here: http://jsfiddle.net/9hMXL/518/ and none of it works.
What am I doing wrong?
Also, since SO requires me to put some code here, here is html of the page:
<div id="contt" class="cont">
<div class="inner">
<p>Hi there! Nice scrollbars, aren't they?</p>
</div>
</div>
#contt doesn't have the scrollbar. window does.
$(window).scrollTop(400);
http://jsfiddle.net/9hMXL/519/
$(window).scrollTop(window.height)
Or if you're using an internal frame, use it in place of window.

Footer template blinks even using ng-cloak in AngularJS

I'm sucessful create and display templates with some data retrieved from REST service using AngularJS but, when JSON response is still loading, the browser show the footer template at the top and, when response return the JSON data, the footer goes to the bottom.
This occurs very quickly, but the footer template blinks at the top of the page before goes to the bottom.
I've tried using the ng-cloak approach, unfortunately, the problem still happening. I put the CSS to ng-cloak as the API Reference recommend.
Here is my app code:
<body>
<div data-ng-controller="HeaderCtrl" data-ng-include="'app/partials/header.html'"></div>
<div data-ng-controller="MenuCtrl" data-ng-include="'app/partials/lista-menu.html'"></div>
<div ng-view="main" ></div>
<footer class="nav" data-ng-include="'app/partials/footer.html'" ></footer>
I try put the ng-cloak on body tag, ng-view, footer, and also inside the ng-view html template. This code represents all attempts (Note: I've try to use separately and together, with ng-cloak class and not)
<body ng-cloak class="ng-cloak">
<div data-ng-controller="HeaderCtrl" data-ng-include="'app/partials/header.html'"></div>
<div data-ng-controller="MenuCtrl" data-ng-include="'app/partials/lista-menu.html'"></div>
<div ng-view="main" ng-cloak class="ng-cloak"></div>
<footer class="nav" data-ng-include="'app/partials/footer.html'" ng-cloak class="ng-cloak"></footer>
Unfortunately after all these changes, the footer template still blink on top before loading is complete.
Anyone can help me to fix this?
Is any Bootstrap trick to put the footer on bottom, even when the main div is without height? I've tried use the nav-fixed-bottom tag but I dont want to have the bottom fixed on screen when the page has high height values.
Thanks!!!
Have you double checked whether you have any CSS rules that may be conflicting with the ng-cloak rule? This could happen with other styles, libraries etc.
If you have any rules that conflict, just adding display:none; may not be enough.
See Angularjs - ng-cloak/ng-show elements blink
If this is the case, the solution is to use !important to overcome this:
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
ng-cloak and/or ng-bind can't help solve this problem, because this is not a "flash of uncompiled content" problem. Those directives are meant to hide content until Angular has had a chance to compile the HTML.
The problem you are trying to solve is more like: "I'm adding stuff to the page dynamically and stuff is moving around". If you want to show the footer only after the main content is loaded, I like the solution #Alex presented in his comment.
As Alex and Mark said, ng-cloak doesn't provide any benefit in this case. However I used something that worked for me and may also help others.
Initially, I don't display the footer.
.footer {
display: none;
}
then after the Angular is done with loading the content, the footer appears.
var app = angular.module('app', [...])
.run(function($rootScope) {
$rootScope.$on('$viewContentLoaded', function(event){
$('.footer').fadeIn(500);
});
});

Categories