We Keep Coding

Don't load div that is displayed none in the dom using JS

I have 2 divs, one of them is for Internet explorer and the other for the rest of the browsers. The one which is for IE is hidden using display:none for the other browsers and displayed using media query for Internet explorer. Everything works fine at the moment. But this doesn't seem like the ideal solution since the display:none div does appear in the DOM which isn't good for performance. How do I initialize only the elements that are visible or how do I not initialize elements using JS that have display:none
<div style="display:none"id="explorer">Internet explorer</div>
<div id="rest">Chrome,Firefox,etc</div>
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
#explorer{
display: block !important;
}
#rest{
display: none;
}
}
So if you load this in Chrome, <div style="display:none"id="explorer">Internet explorer</div> won't display in the view, but you will be able to see it through the dev tools. I would like this not to initilize at all using JS for chrome, firefox, etc and not initialize <div id="rest">Chrome,Firefox,etc</div> for IE.

Unfortunately if you write it in the HTML document the normal way, some things are going to happen before CSS or JS get involved. So you would need to have neither div in the document and insert one or the other with JS.
if (isInternetExplorer) {
var ieContent = document.createElement(‘div’)
...
document.body.appendChild(ieContent)
} else {
var modernContent = document.createElement(‘div’)
...
document.body.appendChild(modernContent)
}
How to get your pages’ contents into JS is the annoying part. One way that lets everything remain in your .html file would be:
<script type='text/html' id='ieContent'>
<div>hello internet explorer</div>
</script>
ieContent.innerHTML = document.getElementById('ieContent').innerText
If possible, it would be better to make your server detect IE and redirect to a whole different .html file; then you have 2 straightforward and well-separated files and no wizardry. And even before then I would question the impact of your invisible div and what you gain by making things more complicated than that.

Control the way elements load according to device (mobile/tablet,etc)

I need to use Javascript/jQuery to control the way my elements load, meaning if I am on iPhone or Android mobile and for iPad and tablets. I dun wanna use CSS media queries, I need it in Javascript or jQuery. Any hints or links to read would be nice, thanks

You could detect device width and change settings / elements from there ?
var viewSize = $(window).width();
/* if is below 481px then it might be a phone :) */
if (viewSize < 481) {
//something special
}
...

I used screen.width and it worked fine. Just make sure that your script is right before the end of the page to guarantee that all elements are loaded. Here is the code:
<script type="text/javascript">
$(document).ready(function() {
if ((screen.width>720)) {
document.getElementById("photos").style.marginLeft="110px";
document.getElementById("videos").style.marginRight="100px";
}
});
</script>

Font size relative to container

i am designing a site that adjusts itself to the window size, and i need to make the text size relative to it's container (a div). I searched about doing it with css, and found out that it is not possible. So i am trying with JavaScript, but i am not a JavaScript programmer. So i searched each piece of the code i needed and compiled it to this:
<script type="text/javascript">
$(document).ready(function() {
while(true) {
document.getElementById("text").style.fontSize = $("container").height();
}
});
</script>
(the "while" is to re-size it constantly, considering that the user might re-size the window)
I put the script in the "head" tag, and it doesn't work. I don't know if the script is wrong, or if it is not running. What am i doing wrong?
Also i want to put a delay in the end of the script, to avoid it running like crazy, but i don't know how to do that.
Thanks in advance,
Luca
Thanks to the answers, but nothing working.
I guess that the script is not running, what can be wrong??? Please help!

http://jsfiddle.net/AyRMC/
You can use viewport units:
.vw{
font-size:3vw;
color:red;
}
.vh{
font-size:3vh;
color:green;
}
.vmin{
font-size:3vmin;
color:blue;
}
Doesn't have full support quite yet, but IE10, Chrome, Firefox, and Safari all support it.
One downside (or possible upside) is that, at least in chrome, the text doesn't scale as the viewport is resized.
Compatibility: http://caniuse.com/viewport-units

You should try something like this instead (if I understand correctly what you want to do):
$(".container").each(function(){ //if container is a class
$('.text', $(this)).css({'font-size': $(this).height()+"px"}); //you should only have 1 #text in your document, instead, use class
});
or something more like this
$(window).resize(function(){
$('.text').css({'font-size': $('#container').height()+"px"});
});

If you mean that you are making a responsive site, then you can change the font-size based on document.documentElement.clientWidth inside of the window resize handler.
Also, you can use em units instead of pixels which are scalable and mobile-friendly.
CSS3 also has a new interesting "root em" unit :
CSS3 introduces a few new units, including the rem unit, which stands
for "root em". If this hasn't put you to sleep yet, then let's look at
how rem works.
The em unit is relative to the font-size of the parent, which causes
the compounding issue. The rem unit is relative to the root—or the
html—element. That means that we can define a single font size on the
html element and define all rem units to be a percentage of that.
http://snook.ca/archives/html_and_css/font-size-with-rem

Try this:
<script type="text/javascript">
$(document).ready(function() {
$(window).resize(function() {
document.getElementById("text").style.fontSize = $(".container").height();
// let container is a class
});
});
</script>

You can use the .resize() event handler which will only fire when the window is resized
var constant = [Some magic number]
$(window).resize(function() {
var fontSize = $(this).height()*$(this).width()*constant;
$(html).css("font-size",fontSize)
}
Using a constant to calculate the font size based on the new width/height

How can I hide some ID elements using Javascript if the browser window is less than a given size?

I have been looking for an answer to this problem for hours and can't find anything that works.
I need to make some elements if a web page not visible if the browser window width is less than a given size. This is because there are some fixed position "buttons" on the left side of the window which expand when rolled-over, BUT if the window is less than about 1056 pixels in width, the buttons overlap the main page contents.
I have a script for returning the window size and putting that value into a variable.
I have got it to show a message if the variable value is less than 1056. (for testing)
I have seen ways how to make things visible or not with jQuery and and with Javascript but none of them work for me.
The id of the image I'm trying to hide is #go2.
here is a part of the script I have been trying to get to work:
if (viewportwidth <1056)document.write('<p>Your viewport width is LESS than 1056</p>');
if (viewportwidth <1056)document.getElementById('go2').style.display = 'none';
I have had to use {literal} tags as the pages are using SMARTY templates!
I am very new to javascript and jQuery and wouold appreciate any help.
Thanks.

To make sure that the behavior happens when the user resizes the window, you can also bind to the resize event:
jQuery(window).resize(function() {
if(jQuery(window).width() < 1056) {
jQuery(".hide-these").hide();
}
});

You can do, with jQuery:
if(viewportwidth <1056) {
$('.target').hide();
}
Also, you can hide the elements with CSS3, like so:
#media only screen and (min-width: 1056px) {
#go2 {
display:none;
}
}

CSS3 media queries do what you want without Javascript, however browser support is pretty patchy:
http://www.w3.org/TR/css3-mediaqueries/
Alternatively, you could use Javascript as you've suggested above, with the usual caveats about JS being turned on etc. JQuery makes it easier, if you like Javascript libraries:
http://www.ilovecolors.com.ar/detect-screen-size-css-style/
If not, there are plenty of tutorials you can Google that explain how to query window size with Javascript.

Rotating Div using javascript

Here is a link: http://www.avineon.com/
Open this link see on the top. Four images are rotating.
I need something similiar using Javascript.
Is it possible by using Javascript.

I don't think you'll have much luck if you try to do that in pure javascript. It might be possible using the emerging canvas and SVG libraries such as Raphael, but you'll still have cross-browser issues. That site used Flash, and I'd recommend using that if you wanted such an effect.
...why you'd want that on your website is another story though...

You could so something similar, but not exact.
Transparency = Supported in FF, Safari, IE7+
Changing image width = Place image in div with this Css
.class img {
display: block;
width: 100%;
height: 100%
}
This will make the image stretch to fill the .class div. You can then use JS to make this div narrower like the carousel does, and the image contained will animate within the div.
You would then need to track the mouse locations to determine how fast it spins.
You can use an equation using cosine for smooth acceleration from the far ends (IIRC)
You will not however be able to get the images in reverse, unless you create a copy in a server side language or use canvas.

Your best bet would not be to attempt to render something in actual 3D, but rather to use visual tricks to approximate a 3D effect. That is, use perspective / image deformation to make it look like a cube is rotating, similar to what is implemented at this page, which has a better explanation of the math involved.
Really, though, you're probably better off just using Flash.

That effect is possible in JavaScript simply by modifying each of the images width, height, and left styles over time. It's an involved script, but only needs to interpolate those three styles on the each of the image elements.
To get the rotation effect, decrement the width style of the image in a setInterval function while moving the left style property. There is a slight decrement on the height also.
You'll need two images for each side, a front and reverse. When the width decrements to zero, swap the image with it's flipped version and start incrementing the width.
Alternatively use Webkit's, and Firefox's transform css properties.
Or try one of these coverflow components that look similar:
Protoflow,
ImageFlow

<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">\n');
document.write('.dyncontent{display: none; width: 728px; height: 90px;}\n');
document.write('</style>');
}
var curcontentindex=0;
var messages=new Array();
function getElementByClass(classname){
var inc=0;
var alltags=document.all? document.all : document.getElementsByTagName("*");
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
messages[inc++]=alltags[i];
}
}
function rotatecontent(){
//get current message index (to show it):
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0;
//get previous message index (to hide it):
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1;
messages[prevcontentindex].style.display="none"; //hide previous message
messages[curcontentindex].style.display="block"; //show current message
}
window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent");
setInterval("rotatecontent()", 5000);
}
}
</script>
<table width="100%">
<tr align="center">
<td>
<div class="dyncontent" style="display: block">
first
</div>
<div class="dyncontent">
second
</div>
<div class="dyncontent">
Third
</div>
</td>
</tr>
</table>
</body>
</html>