styling elements with Javascript without being noticed - javascript

I have a webpage which has content layout like 1,2,3 in markup (and also for no-js
) while visually I want it to be 2,3,1.
I'm using Javascript (jQuery) to swap their position. But the problem is, the Javascript code is executed after page loads and therefore the swap process can be obviously seen.
The only solution (and a bad one) I can think of now is to hide the whole body first and restore body when the swap is done.
$(function() {
$("#div2, #div3").insertBefore("#div1");
$("body").css({display: "block"});
});
<body style="display: none;">
...
<div id="div1">...</div>
<div id="div2">...</div>
<div id="div3">...</div>
...
<!-- in case JS is disabled, use css to restore -->
<!-- style should not be here, that's why I said it's a bad one. -->
<style type="text/css">
body {display: block !important;}
</style>
</body>
Anyone got a better idea?

Try executing JavaScript instantly after those three elements:
<div id="div1">...</div>
<div id="div2">...</div>
<div id="div3">...</div>
<script type="text/javascript"> $("#div2, #div3").insertBefore("#div1"); </script>
Of course, it's a pollution of your HTML, but, in any case, it's better than hiding the whole body element (the page will flicker in some old browsers).

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.

How do you display specific text onscreen using jQuery and HTML?

I'm new to Javascript. With the code below, I'm interested in displaying three values. The first problem that I've encountered is the document.write won't work. What am I typing in wrong? The other problem is that I'd like to display
the text that the first_div contains on the screen in the browser window. I believe that all of the divs in the first_div will show the text 'value.' How do I get this to display?
<html>
<head>
</head>
<body>
<div class= 'first_div'>
<p>Content</p>
<div class='comment'></div>
<div class='comment'></div>
<div id='pagination'></div>
</div>
<script type='text/javascript'>
document.write("Hello");
jQuery(function() {
$('#pagination').addClass('comment');
$('.first_div.comment').text('value');
$(document.body).append('hello');
});
</script>
</body>
</html>
Currently .first_div.comment is looking for an element with both classes. You want an element .first_div with a child element .comment. To do this, use a space to select all descendants (not just children) of what was prior to the space.
Your line of code would then look like this: $('.first_div .comment').text('value');
Learn more about CSS selectors here (this will help you for other similar problems): https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors#Information_Selectors_based_on_relationships

nav going below content on browser resize

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");

JavaScript - Hide a Div at startup (load)

I have a div in my php page that uses jQuery to hide it once the page has loaded. But is there a way to hide it from the very start of loadup?
The reason I ask is because for a brief second, you can see the div when the page is loading, and then hides when the page is fully loaded.
It looks unprofessional.
Just wondering if there is a way around this?
Thanks
Use css style to hide the div.
#selector { display: none; }
or Use it like below,
CSS:
.hidden { display: none; }
HTML
<div id="blah" class="hidden"><!-- div content --></div>
and in jQuery
$(function () {
$('#blah').removeClass('hidden');
});
I've had the same problem.
Use CSS to hide is not the best solution, because sometimes you want users without JS can see the div..
The cleanest solution is to hide the div with JQuery. But the div is visible about 0.5 seconde, which is problematic if the div is on the top of the page.
In these cases, I use an intermediate solution, without JQuery. This one works and is immediate :
<script>document.write('<style>.js_hidden { display: none; }</style>');</script>
<div class="js_hidden">This div will be hidden for JS users, and visible for non JS users.</div>
Of course, you can still add all the effects you want on the div, JQuery toggle() for example.
And you will get the best behaviour possible (imho) :
for non JS users, the div is visible directly
for JS users, the div is hidden and has toggle effect.
Barring the CSS solution. The fastest possible way is to hide it immediatly with a script.
<div id="hideme"></div>
<script type="text/javascript">
$("#hideme").hide();
</script>
In this case I would recommend the CSS solution by Vega. But if you need something more complex (like an animation) you can use this approach.
This has some complications (see comments below). If you want this piece of script to really run as fast as possible you can't use jQuery, use native JS only and defer loading of all other scripts.
Why not add "display: none;" to the divs style attribute? Thats all JQuery's .hide() function does.
This method I've used a lot, not sure if it is a very good way but it works fine for my needs.
<html>
<head>
<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
</head>
<body>
<div id="HiddenStuff1" style="display:none">
CONTENT TO HIDE 1
</div>
<div id="HiddenStuff2" style="display:none">
CONTENT TO HIDE 2
</div>
<div id="HiddenStuff3" style="display:none">
CONTENT TO HIDE 3
</div>
<input id="YOUR ID" title="HIDDEN STUFF 1" type=button name=type value='HIDDEN STUFF 1' onclick="setVisibility('HiddenStuff1', 'inline');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'none');";>
<input id="YOUR ID" title="HIDDEN STUFF 2" type=button name=type value='HIDDEN STUFF 2' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'inline');setVisibility('HiddenStuff3', 'none');";>
<input id="YOUR ID" title="HIDDEN STUFF 3" type=button name=type value='HIDDEN STUFF 3' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'inline');";>
</body>
</html>
Using CSS you can just set display:none for the element in a CSS file or in a style attribute
#div { display:none; }
<div id="div"></div>
<div style="display:none"></div>
or having the js just after the div might be fast enough too, but not as clean

How to show hidden content where the contents images don't load until the content is shown?

What would be a good way to show hidden content with javascript, without having the image elements <img src="myimage.jpg"> of the hidden content load their images in google chrome or any other browsers until the content is actually shown?
hiding the content with the css rule display: none will not prevent the images from loading, and I would like to avoid using ajax calls.
EDIT 1 as discussed in the comments, a better alternative would be to use a template. As an example I picked John Resig’s Microtemplating engine:
<div id="content_container">
<script type="text/html" id="content">
<div>
<img src="..."/>
</div>
</script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = tmpl('content', {});">show div</button>
See fiddle
EDIT 2
As the original poster commented, it's perfectly possible to grab the contents of a <script type="text/html"> element. Templating engine's not necessary:
<div id="content_container">
<script type="text/html" id="content">
<div>
<img src="..."/>
</div>
</script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = document.getElementById('content').innerHTML;">show div</button>
First Answer
(see in edits)
To do what you want within your requirements you could have javascript write the content when you want it displayed. So you would store your HTML in a javascript string and just use script to then insert it into the page when you want it. Its not a very nice way of doing it but it would mean that it would only load images at that point.
Alternatively you could put the HTML in but have the images pointing at nothing (or a blank placeholder, etc.) and then use script to programatically populate the image sources to the correct values when you call the show function to show the page.
Which of these you choose is probably more about readability than anything else though I would favour the second approach (just tweaking the image sources).
First, define a CSS style:
.invisible {
display: none;
}
Add this class to the objects in the HTML. Then anywhere in the JavaScript, simply add or remove the class, or change the display to block or float etc. In jQuery:
http://api.jquery.com/addClass/
http://api.jquery.com/show/
EDIT:
If you don't want the image to load, then use an AJAX call instead.
http://api.jquery.com/jQuery.get/
jQuery.get('myImage.jpg', function(data) {
jQuery('.imageContainer').html(data);
});
EDIT 2:
Load the src into the img once it's needed. You could check the scroll position etc.
http://jsfiddle.net/LYMRV/
Seems like it is possible to hide content using a script tag with type="text/html", it even prevents any images and iframes from loading in the background,
for example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
document.addEventListener('click',function(e){
if(e.target.id=='content_show'){
e.preventDefault();
document.getElementById('content_visible').innerHTML = document.getElementById('content_hidden').innerHTML;//document.getElementById('content_hidden').text also works
}
});
</script>
</head>
</body>
<img src="image1.jpg"/>
<script type="text/html" id="content_hidden">
<img src="image2.jpg"/>
<img src="image3.jpg"/>
<img src="image4.jpg"/>
</script>
Show Content
<div id="content_visible"></div>
</body>
</html>
Only thing to keep in mind is to avoid placing script tags inside #content_hidden.
Now if anyone is friendly enough to point out every flaw in this method, so that we can all benefit.

Categories