CSS & Javascript, Need Hide Auto-Generated HTML By Default - javascript

I am writing a free online e-book which needs a few minor formatting tweaks:
http://rperl.org/learning_rperl.html
The "Full Table Of Contents" at the very top of the page starts out by being visible for a few seconds, then finally collapses itself to be hidden. What we need is for it to start as hidden, and not be visible at all for the several seconds while the page loads. You can see that I have already tried to solve this issue by setting "var index_hidden=1;" at the following link, otherwise the table of contents would never hide itself at all:
https://github.com/wbraswell/rperl/blob/gh-pages/javascripts/metacpan_rperl.js#L832-L833
It probably shouldn't matter, but I'm using some custom Perl scripts to generate this file from Perl POD source, I can give more info if needed.

Although the described behavior does not appear for me (OSX + Firefox). Here's what you might do:
Hide the element by default using CSS. Add this to your head element (extend with stronger hiding CSS when needed).
<style>.wait-for-js { display: none; }</style>
And hide your element by adding the class
<div id="index-container" class="hide-index wait-for-js">
Last but not least, to make this trick functional. Remove the class as soon as JS is loaded, which would also mean that other logic has been loaded and you're save to show the table of contents. Be sure to load this JavaScript last thing you'll do.
<script>
document.getElementById('index-container').className = 'hide-index';
</script>
Or if you're using jQuery
<script>$('.wait-for-js').removeClass('wait-for-js');</script>
Welcome to SO!

Related

PhantomJS cutting off content in header/footer with PDFs

I'm using PhantomJS to dynamically generate a PDF. However it seems to always cut off some content in between the footer and header.
Relevant files:
HTML content: http://bit.ly/146Ljdp
rasterize.js file: http://bit.ly/12iSC7y
Example PDF file: http://bit.ly/10Aa309
As you can see in the PDF file, the content is cut off between page 5 and 6.
I've looked into the existing Qt and PhantomJS bugs, and am not completely sure on whether I'm not doing something right, or it's simply a bug.
AFAIK the most ideal option is to use page-break-inside:avoid, however Qt doesn't seem to support that yet.
The code content inside the PDF/document uses tables, and apparently there's been issues with that in the past: 927, 989, 1038, 880. I tried removing all of the table elements (table, tr, td, etc) and replaced them with divs. It looked exactly the same in the browser and PDF file, but it was still being cut off.
I tried a javascript hack to check each element if the top position and bottom position were on different pages, and if so, add a page-break-before... however I couldn't properly get the individual page size, to check the relative position from the header on each page. $('element').offset().top returns the position from the top of the entire document, not the current page.
Any ideas on what I'm doing wrong?
The is a tricky, But i solved it using simple logic.
Cast element to display as a Block element and it works.
display:block;
page-break-inside:avoid;

Dealing with non js users - set elements to display:none / opacity :0 before page is rendered

I have done a bit of a web development faux pas by not starting with a functioning page and then building js functionality on top. The site I am redeveloping is an old site which has lots of pretty jquery animations.
I have gone to great trouble to ensure all page loads can be handled with or without ajax but I have just realised this is entirely pointless since the initial page load produces several elements which load with properties of display:none; or opacity:0; and are animated to be visible on doc ready
I would very much like to rectify this but there are several reasons I did it in the first place:
1: to hide a flash of unstyled menu before a jquery plugin kicks in. (I will replace this with a non js menu and animate into the jquery menu to solve this)
2: The other reason is that I like the initial animation on page load and would ideally like to keep it. But this presents a problem since I would like to have the bulk of the page invisible for js users and visible for non js users on load but how can I ensure that my elements css properties are changed BEFORE the page is rendered - I have tried doing this with jquery but by the time the jquery library has loaded (without caching) my page has already rendered so the content is flashed up before being hidden and animated back in?
This block will be visible only for users with JS turned off.
<noscript>html code here</noscript>
You can add some styles like this:
<noscript>
<style>
#content{
background: red;
}
</style>
</noscript>
You can add the following in your <head>:
<script>document.documentElement.className+='js'</script>
Then you can style javascript-enabled browsers differently using the js class on the html element, f.ex:
html .animate{opacity:1} /* all browsers */
html.js .animate{opacity:0} /* js-enabled browsers */
The class is added already in the head, so there is no flicker in the rest of the DOM.
You can also use the noscript tag, but personally I think this is cleaner because you can administrate the styles in a single stylesheet.

CSS/js cascading Verticle Menu accordion: trying to make my active page show as active

given up tearing my hair out, can anyone help?
I'm trying to get the active page to apply a separate style, in the example same as when you click on test1 ie have the dark background hen on the homepage or about us.
http://www.tait-design.com/devsites/test-nav/index.asp
the main pages don't go anywhere ie test1 but the page test1-1 and test2-1 do as examples
I think the issue will lie in the js
http://www.tait-design.com/devsites/test-nav/js/accordion.js
and maybe the css (can't put the full url in)
/css/black.css
I've made a couple of the classes different colors on the text to help identify
I've picked up someone else's work I suspect it's a template site, which has been altered, the left nav wasn't done as an include so each page had a seperate markup to make the active page ...look active. I've changed this to asp just for the includes to work off my site, it will be php though.
This can be done purely in CSS, no Javascript is required.
First, give unique classes to each of the body tags on your pages.
For instance, on the home page it would be something like <body
class="home">.
Then give the anchor tag of the matching link the same class (ie, - see that I've added a
second class to the link).
Now you can specifically style that link in CSS when it's the active
page:
body.home #menu-1 a.home {
// whatever styling you like
}

How to stop page load in html static page

Is there in HTML (javascript) or other static html tech
can:
Stop page loading (if browser does not download yet)
Stop page rendering (from where the code placed)
Stop javascript executed (from where the code placed)
Simply put, is there a code like
<script>window.StopWhateverBelow()</script>
To let browser totally ignore whatever below the code.
UPDATE
I understand the browser may already download the whole thing. What I want is, from the code, page should stopped, for example: if I put the code just after <body> visitor should see blank page, if I put the code in middle of the page, page should be just half like you pressed ESC
ANSWER
As bukko suggested, comments done the trick. But not full, just half
If you put <!-- in html page, the rest will be ignored. And in Javascript
document.write('<!--');
Done the trick.
For about make sense:
Here is how this code make sense: when you page load some offpage script, the script is dynamic. When the script code found something wrong (or match some condition), you have one more option to stop the page from rendering, loading, download...
You could do window.stop(); for most browsers besides Internet Explorer. For IE, I had to use document.execCommand('Stop');
If you already have html comments on your page, #bukko's solution doesn't fully work. Stuff after the html comment will get rendered normally.
Something else to try is:
document.write('<script type="text/undefined">')
The rest of the document gets interpreted as part of the script tag, and because the script isn't text/javascript, it gets ignored.
Worked for me, thought I'd share it.
Edit
I've seen the script trick not work in Chrome.
This does work, but I have not done extensive browser testing:
document.write('<style type="text/undefined">')
window.stop(); //works in all browsers but IE
if ($.browser.msie) {document.execCommand("Stop");}; //works in IE,
document.execCommand works in IE, however it does stop some of FF, NS and some other browsers' functions. Like displaying GIF's animation for example. Using "if browser is IE" makes these two codes work perfectly in all browsers.
Well, there is:
<!--
terminated by
-->
for HTML, but scripts will ignore this.
What you are asking makes no logical sense. Simply for two reasons:
Data is ALREADY sent to the user (HTML / JS) so even tho if you COULD hide content, the data would sitll be there for a user to see (if they view source for instance).
Why would you stop 'execution' of a page? It loads simple html structure and reults in a visual display, you should focus on the server site (php for instance) to hide or not send the content in the first place.
If you want to visually hide elements tho, you could use CSS styles (hide divs or the like) with simply adding style="display:none;" to a div like so:
<div style="display:none;">
This text will be downloaded by the user, but hidden from view due to CSS inline style
</div>
If you want to add commenting (thats just for your reference), then use comment formatting:
<!-- this is a comment and will not show up to a user -->
Reference for comments: http://htmlhelp.com/reference/wilbur/misc/comment.html
put window.Stop() wherever you want to stop the page from getting renderred
You could also hide the body like that:
var style = document.createElement("style");
style.innerHTML="body { display:none !important; }";
document.getElementsByTagName("HEAD")[0].appendChild(style);
HTML is static content so the server reads whatever you have written in the file unless you comment it out. For a dynamic file like what you are asking for you need to use php which can do this type of thing.
Just not much related to the question, but I thought it may be useful for some persons. If you want to jump to other page during page loading use window.location = "somepage.html"; or you can redirect users to the previous page: window.history.go(-1); Useful in JavaScript conditional statements
If you are using ASP or PHP, HTTP protocol automatically stops but HTTPS protocol don't stop automatically.
To stop it use:
In ASP:
dim r= accept.secure.protocol
r.onload=window.callback('c')
//to firefox,opera,safari
new clientObject(r).access()
// to chrome,ie
forEachElement(a==null);
PHP code:
$a.window ;
All this scripts sends the browserstring "elementcast" by post method
The stop methods can break things that have already started to load.
If you want to load everything above a certain point and skip everything below a certain point:
<p>Everything works above this point.</p>
<pre style="display: none !important;">
<p>As long as the PRE tag remains open,
nothing works below this point</p>
<script>document.write('Nope');

Preload and run jQuery/javascript before viewing the page

I'm working on a project where there's quite a lot of jQuery going on. So when I go to the page, I can see the jQuery running (e.g. $.button() elements on the page still appear as normal html elements before jQueryUI is loaded :S) so initially it looks all ugly THEN, once all the JS is loaded and executed, it looks "nice".
It's not just a case of preloading images or whatever, I want to RUN the jQuery code, but "hide" it from visitors so that once the page is opened, it looks "nice" straight away OR displays a black screen saying "Loading..." until the jQuery has finished running.
Take a look here: http://www.filamentgroup.com/ , though I'm not sure that actually runs the site's javascript before displaying it, but it shows the basic idea of having a dark screen saying "Loading...".. I suspect that's what happens in large web apps such as SlideRocket though it does use flash... :S
You answered the question yourself. Have some kind of loading screen that hides the page until all of the jQuery is run.
Try something like the following.
This goes at the top of your page:
<div id="loadingMask" style="width: 100%; height: 100%; position: fixed; background: #fff;">Loading...</div>
Here's your jQuery:
$(document).ready( function() {
/*
* ... all of your jQuery ...
*/
// At the bottom of your jQuery code, put this:
$('#loadingMask').fadeOut();
});
Wrap all of your jQuery that you want "preloaded" into this :
$(window).load(function() {
//Your jQuery here
});
or alternatively, not all of your jQuery code inside of that wrapper. Rather, put your jQuery DOM changes into a
$(document).ready(function(){
//jQuery
}))
and then have a wrapper for all your site content.
<div id="everything-wrapper">
<!-- put your body here -->
</div>
and set the display to none in your CSS
#everything-wrapper {
display : none;
}
and then with the window load like earlier
$(window).load(function() {
$("#everything-wrapper").show();
// or
$("#everything-wrapper").fadeIn("fast");
// to be fancy with it
});
I was having a similar issue with an artifact popping up briefly during page loads in IE8. The solution I used was to change the visibility of the container to hidden at line 1 of the css. Then showed the element at the end of the jquery file. If the css and jquery start arguing, the element isn't shown until the argument is resolved.
I would have a overlay as part of your static CSS and HTML, then when JQuery loads via
$(document).ready() you can hide the overlay
The answer by Christopher is most likely the way FilamentGroup do it. You can have javascript "preloaded", it loads inline with the rest of the page, and due to it usually being larger than the rest of the page takes longer to download. You can't make javascript load first, that's not the way it works.
However, the principle to make it work is to "hide" your page from view in CSS (or with inline styles as the CSS will still have to load) then once everything is ready in javascript show it all again. If you notice there is a gap between the page displaying (nothing) and the javascript loading showing on FilamentGroup. That is because they hide the page, the javascript loader loads, then once the rest of the javascript has finished it hides the loader and shows the page.
Dude, I did you up a sample. I hope you likes. I use something like this on my own site.
http://jsfiddle.net/jMVVf/

Categories

Resources