Applying layer of JS before the HTML loads - javascript

I have a .html loaded to clients. On it, jQuery does some modifications.
The problem is that the page loads in two steps: first the original .html, then, a fraction of a second later, the modified .html.
This approach causes jerkyness. Is there a way to show the .html only once JavaScript has acted upon it?

If you MUST do this, then something like this:
Javascript:
$(document).ready(function(){
myfunction();
$("#wrapper").show();
}
CSS:
div#wrapper{ display: none; }
HTML:
<div id="wrapper">
<!-- my page stuff that i dont want to be jerky -->
</div>
However, I would raelly advise that you find a way to apply the styles/data to the page before you generate it (e.g. with PHP, ASP etc.),

You can use CSS to set default properties of the parts you are changing, if these are stylistic changes and not HTML changes.
You can also use jQuery's .load() to reload page fragments instead of the whole page.
Or, use css to set body { display: none; } and using (document).ready() to $('body').show().

Related

Updating a simple jQuery / CSS code

I was hoping someone could help me out with this simple question: I’ve just started to learn jQuery and found a code to show hidden text after selecting an item.
I’d like to update it so that:
a.) The selected item is bold
b.) I can add placeholder text instead of starting off with a blank hidden text field
I foolishly assumed I could solve a.) by using the :active property in css, but that only works as long as the link is clicked on. (As soon as you release the mouse button it’s gone.) Just like b.), this is probably only possible by using jQuery as well? If so, would be really great if you could show me how to solve it. :)
The codes: http://jsfiddle.net/KUtY5/1/
JS
$(document).ready(function(){
$("#nav a").click(function(){
var id = $(this).attr('id');
id = id.split('_');
$("#menu_container div").hide();
$("#menu_container #menu_"+id[1]).show();
});
});
CSS
#menu_container {
width: 650px;
height: auto;
padding-left: 30px;
}
#menu_container div {
display:none;
}
HTML
<div id='nav'>
<a id="show_apps">Appetizers</a> | <a id="show_soups">Soups and Salads</a> | <a id="show_entrees">Entrees</a>
</div>
<div id="menu_container">
<div id="menu_apps">
Content of the App Section Here
</div>
<div id="menu_soups">
Content of the Soups Section Here
</div>
<div id="menu_entrees">
Content of the Entrees Section Here
</div>
</div>
Updated fiddle
You can realize a) using a custom class bold for example and the following code :
CSS
.bold{ font-weight: bold;}
JS
$(this).addClass('bold').siblings('a').removeClass('bold');
For b) I can't find any textfield in your code.
Hope this helps.
I have added some extra lines to your code and you can check it from here http://jsfiddle.net/KUtY5/483/.
You bold like this
$("#nav a").css("font-weight", 400); // First you make them thin
$(this).css("font-weight", 800); // Than you make them bold
You put placeholder like this
<div id="placeholder">
Placeholder
</div>
$("#placeholder").hide();
On the other hand I recommend you not to hide menu container. Rather hide the elements inside the menu_container. So you can put a plcaeholder in menu container and you can hide it.
To figure this out 2 questions must be asked / solved
how do you normally make text bold on a page... css right?
where do you want those styles to be defined? There are 2 places:
a. You can define it inside the javascript.
b. You can define it inside the projects css through normal methods (inline, external, embedded).
What's the difference? If you define it inside the javascript the code is self-contained. What i mean by that is you can copy/paste the JS code from one project to the next and you don't need to worry about copying related styles from the stylesheets or other sources because it's all in the JQuery that you've written.
In contrast if you define it outside the javascript in the regular places the code may not be self-contained however some find it easier to manage in the scope of that particular project because all your css is contained in one place (external stylesheet typically).
If you want to take option a, see the .css() method
If you want to take option b, see the style manipulation (toggle class in particular)
Note the examples in the above references should get you 90% of the way to understanding it.
Some final words. Learn Jquery, but i advise you to stay away from it as much as possible because it implements DOM thrashing instead of DOM caching (sizzle engine).
This video series will briefly go into why Jquery sucks for performance in the first video and the rest of the series is about how to create modular vanilla JS.
JQuery goes back and searches the DOM every time you need to make a change that is what
$.(*element*) is doing instead of just caching it.
The more nodes you have in the DOM the more processing power is used searching (because it has to go through the entire tree).
Then on top of that the more elements you have to make changes to (say if you use a css class selector) you have to add even more processing on top of that.
All this is fine if you're on a desktop, but what about a mobile platform? Where would you get all this processing power from?... It doesn't exist.

reccommended way to output HTML from JavaScript

I know this has probably been asked before, but here goes: I have a web application that needs to generate modal dialogs. alert, confirm, and prompt are too simple and ugly, and that modal window function...it's a long story. I can't use it. So, I'm going to create the modal box using DOM functions and CSS. However, I need to put quite a lot of content into the dialog, and I'm wondering what the best way to do this is. Putting the HTML into a string and using innerHTML is unwieldy. I could use the DOM, but that's annoying and takes too much time to code. I know I can use a script with a weird type tag (something like x-random/x-htmlstuff) and then copy it's content to the innerHTML, but is there a better, more "official" way to do this?
if the layout of the modals are static, just put them into the HTML of the page. Use CSS to set them to display: none when the page is displayed normally. When you want to display the model, use
document.getElementById('modal-id').style.display = 'block';
I've heard that some people use this solution:
<script type="text/html" id="popup_html">
html...
</script>
(of course, you should make it invisible)
But, most likely, if you're trying to write a lot of HTML from javascript, then you should retrace and think if there's a better way.
If you're using the same div multiple times, you should just create it in the HTML page, and display it when needed
if you're creating a new element - see if you can use the document.createElement and appendChild methods (assuming there aren't many nodes involved)
if neither apply - retrace. For large projects, maybe object-oriented javascript can help.
There's no magical way that I'm aware of. I usually just use innerHTML and write the HTML out in a well formatting from such as:
box.innerHTML = "<div id='boxChild'>\n" +
" <p>Put whatever content here</p>\n" +
"</div>";
The \n make it so if you view your code, it will be well formatted, and no one long string once the JS writes it.
A way to do this, is to generate the popups within the html and show or hide them when you need, like this:
<div class="myPopup">
<div class="pop-message msg-01">This a pre generated alert with the id: <span class="dynamic-field-01"></span></div>
<div class="pop-message msg-02">This another pre generated alert with the id: <span class="dynamic-field-02"></span></div>
<div class="pop-message msg-03">...</div>
</div>
.pop-message {
display: none;
}
Now while user navigates the page, you are going to hide and show the .pop-message's while replacing those .dynamic-field's if needed.
I would suggest having the HTML for your modal content in separate files, and then loading it asynchronously when you need it to popup the modal.
partials/modal.html
<div class="content">My modal content</div>
main.js
var modalContent = null;
function _fillModal() {
modal.innerHTML = modalContent; // something like this
}
function openModal() {
if (!modalContent) {
// XMLHttpRequest, which populates the modalContent variable
// and in the callback, calls _fillModal()
}
// If already filled, just call
_fillModal()
}
If you want the content to be dynamic, make modal.html a template, and use a JS template library (for example http://underscorejs.org/#template), or write a simple RegExp replace yourself.
I'd suggest loading it with innerHTML or using jQuery to simplify things, but if you need
a modal window, could you use the jQuery UI modal dialog, shown here?
If you have the content loaded in divs in your HTML, and have them have css display:none;, and then show them with
document.getElementById("unshown-div").style.display="block";
If you can use jQuery, a modal box could be done with
<div id="modal" style="display:hidden">
Here is a modal dialog bbox
</div>
and your script:
$("#dialog").dialog();
Whatever you do, just don't use document.write()

Can I create an HTML pop up that do not use Javascript? or can I put the Javascript into the <body> section?

I have to create a pop up that will be show when the user click on a link.
I think that I can not use Javascript because I have no access to the full template so I can't put the javascript into the <head></head> section of the page (I can't modify it)
Can I create a pure HTML pop up withous use Javascript or alternatively can I declare my Javascript into the <body></body> of my html code and not into the <head></head> section?
Tnx
Andrea
Yes, you can do this in pure html and css. The trick is to use the :target pseudo selector. Rules with :target will match when the url anchor matches a particular id. You can update the url anchor by creating a plain anchor link. This does have a slight jumping effect because we're using anchors, but it is possible.
So for example: http://jsfiddle.net/X49zJ/1/
Click to Trigger The Modal
<div id="modal"> I am a Hidden Modal</div>
And CSS:
#modal {
display: none;
width: 300px;
height: 100px;
border:1px solid #CCC;
background:#EEE;
}
#modal:target {
display: block;
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/:target for more information on the :target and also this demo for a much prettier lightbox.
For more flexibility you can always add javascript. If your javascript is non-essential, it's generally best practice to put javascript at the bottom of the body, or add the script tag with the async attribute so it doesn't pause rendering of content when it loads.
You can do this with HTML and CSS, like so.
To answer your second question, generally it's possible to put Javascript in the <body> section of your page as well.
You cannot do this without javascript, however you can put script tags literally anywhere in your page and it should work, so try this.
<div>
<h1 id="test">New Content</h1>
<script>
var test = document.getElementById('test');
test.addEventListener('click', function() {
alert('clicked');
});
</script>
</div>
It's permittable to use target="_blank" in the <a> tag if you're using HTML5, which will generally make the link open in a new tab in modern browsers. This is preferred by quite a lot of users so you may want to consider this.
Putting JavaScript into the body of the page should be perfectly fine if you have complete control over the HTML. It is put within simple <script> tags, after all — there's no need for it to be in the <head>.
If whatever CMS you're using filters out <script> tags but you still have control over HTML attributes, you might be able to get away with putting JavaScript in an onclick attribute:
Link
Here you can find a walk-through http://dsheiko.com/weblog/fancy-modal-windows-without-javascript/
It opens pop-up and blurs the modal underlay. Here how it looks codepen.io/dsheiko/pen/jCcld
It also describes how you can enhance it with such goodies as closing on Esc press and by clicking outside modal content and provides JavaScript fallback for IE8.

dynamically change LESS variables in page with JavaScript

I'm trying to use less.js to modify LESS variables dynamically with JavaScript. However, I can't seem to get it to work with modifyVars, watch, or refresh.
I tried putting the stylesheet link tag before loading less.js, using less.modifyVars({'#bg': '#00ff00'}), but no change occurs to the background. The less file I'm using is simple:
#bg: #000;
body { background-color: #bg; }
I also tried putting the stylesheet link tag after less.js, as mentioned in this question, and using less.sheets.push($('#less-link')[0]) followed by a call to modifyVars and then refresh. No change in the background color.
I also tried commenting out the #bg: #000; in the LESS file, then setting it via modifyVars. No luck: I end up with a Less::ParseError: variable #bg is undefined.
How can I dynamically change LESS variables and have the page appearance update to reflect those changes?
Edit: hm, this may be some Rails magic happening. When I loaded my less file, the variable definition was gone and all I saw was body { background-color: #000; }. When I switched to using a <style type="text/less"> block of LESS embedded in the page and used this override LESS JavaScript, I was able to change a variable with less.Override('#bg', '#00ff00') and the page's background color immediately changed. Thanks to this answer. Now I'll try it with less.js using the <style> tag instead of <link>.
Edit: looks like less-1.3.3.min.js wants LESS to be loaded in link tags--I get TypeError: Cannot read property 'href' of undefined when I try to use modifyVars and my page looks like this:
<style type="text/less">
#bg: #000;
body {
background-color: #bg;
}
</style>
<script src="/assets/less-1.3.3.min.js?body=1" type="text/javascript"></script>
Instead of doing the variable replacing client-side, since I was doing it in a Rails app anyway, I moved it server-side. I'm using the Ruby bindings for LESS to parse some LESS that includes my custom variables, rendering the parsed result with content_type: 'text/css' and using an AJAX request to add a stylesheet link to the rendered CSS.

Progressive enhancement and "flash of unhidden content"?

I am trying to build a progressively enhanced page that works for JS and non-JS users. I would like to hide some form controls initially for JS users, but always show them for non-JS users.
My question is about how to do this without creating a distracting "visible, then instantly hidden" flash of content for JS users.
For example, in the JS version, I want to collapse part of my search form, and instead show a 'click here for extra options' button. I do this as follows:
$(document).ready(function() {
$("#extra-options").hide();
...
$("#show-extra-options").click(function() {
$("#extra-options").slideToggle();
});
});
This works, but it means that for JS users, when the page loads, the extra options are visible for 500ms or so, then they vanish. It's rather distracting.
Is there any sensible way to get around this?
StackOverflow has just suggested this answer: is this sensible? Sorry if this is now a duplicate question, but I figure it's still worth writing this question in my own language, as I didn't find the answer during searching.
Add this in your script tag in the head:
$('html').addClass('js');
Then you can use that to show and hide elements:
.hasJs { display: none; }
.js .hasJs { display: block; }
.js .noJs { display: none; }
You can hide content for either users with or without Javascript:
<div class="hasJs">Some content only visible for JS users.</div>
<div class="noJs">Some content only visible for non-JS users.</div>
As the class and CSS are in the head, the elements will already be styled when they come into existance when the body is parsed.
Demo: http://jsfiddle.net/Guffa/YuAyr/
This is a similar approach to the one in the first answer to the question that you linked to, but this is somewhat cleaner because you don't have to add a class to the html element in the markup, and the code simply adds the class instead of removing it.

Categories