Develop Reference

Issue with tabbed content in HTML and JavaScript

I am very much a beginner & having trouble surfacing tabbed content with HTML and JavaScript (I don't believe the issue is due to my CSS).
Essentially, when I review the HTML file on my local browser, I only see the content in the first tab, but then when I click on tabs 2, 3 or 4, nothing happens. I want to work out how to display content in the correct tab. Can you help?
My HTML:
function openMe(inside) {
var i, content;
content = document.getElementByClassName("content");
for (i = 0; i < content.length; i++) {
content[i].style.display = "none";
}
document.getElementById(inside).style.display = "block";
}
<div class="wrapper">
<div class="tabs">
<button onclick="openMe('first')" class="tab">FREELANCERS</button>
<button onclick="openMe('second')" class="tab">GET VERIFIED</button>
<button onclick="openMe('third')" class="tab">SECURITY</button>
<button onclick="openMe('forth')" class="tab">SETTINGS</button>
</div>
<div id="first" class="content">
<h2>FREELANCERS</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada turpis non sodales aliquam. Proin vel pretium nunc, eu mattis nibh.</p>
</div>
<div id="second" class="content">
<h2>GET VERIFIED</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada turpis non sodales aliquam. Proin vel pretium nunc, eu mattis nibh.</p>
</div>
<div id="third" class="content">
<h2>SECURITY</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada turpis non sodales aliquam. Proin vel pretium nunc, eu mattis nibh.</p>
</div>
<div id="forth" class="content">
<h2>SETTINGS</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada turpis non sodales aliquam. Proin vel pretium nunc, eu mattis nibh.</p>
</div>
</div>
Thank you,
Liam

The correct method is document.getElementsByClassName (with an extra s after Element). Otherwise you'll get an error in your console telling you that the method doesn't exist.
Here it is working nicely with just that simple correction (although you may want to consider whether you actually want all of them displayed at the start, or should some be hidden by default?
function openMe(inside) {
var i, content;
content = document.getElementsByClassName("content");
for (i = 0; i < content.length; i++) {
content[i].style.display = "none";
}
document.getElementById(inside).style.display = "block";
}
<div class="wrapper">
<div class="tabs">
<button onclick="openMe('first')" class="tab">FREELANCERS</button>
<button onclick="openMe('second')" class="tab">GET VERIFIED</button>
<button onclick="openMe('third')" class="tab">SECURITY</button>
<button onclick="openMe('forth')" class="tab">SETTINGS</button>
</div>
<div id="first" class="content">
<h2>FREELANCERS</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada turpis non sodales aliquam. Proin vel pretium nunc, eu mattis nibh.</p>
</div>
<div id="second" class="content">
<h2>GET VERIFIED</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada turpis non sodales aliquam. Proin vel pretium nunc, eu mattis nibh.</p>
</div>
<div id="third" class="content">
<h2>SECURITY</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada turpis non sodales aliquam. Proin vel pretium nunc, eu mattis nibh.</p>
</div>
<div id="forth" class="content">
<h2>SETTINGS</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada turpis non sodales aliquam. Proin vel pretium nunc, eu mattis nibh.</p>
</div>
</div>

you have a typo in your javasript function with document.getElementsByClassName();
function openMe(inside) {
var i, content;
content = document.getElementsByClassName("content");
for (i = 0; i < content.length; i++) {
content[i].style.display = "none";
}
document.getElementById(inside).style.display = "block";
}

Select all tags within divs with certain class [duplicate]

This question already has answers here:
document.getElementsByClassName doesn't work
(2 answers)
Closed 7 years ago.
I've been trying to find a solution to my problem for days now without any luck, I found this: getElementsByClassName doesn't work but it's not a solution to my problem since I want to access all tags and change them, so here we go:
I want to be able to change the style of tags that are within divs with a certain class. I started out by trying this with an ID on a div and that works exactly the way I want it, but since the page where I will use this will have the same div's appear several times I have to use class instead and I can't get it to work. I have to use javascript and not jQuery.
Example of how it worked with ID:
var images = document.getElementById("test").getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
images[i].align = "right";
}
<div id="test">
<img src="http://galerie32.de/images-designer/thumbs/dummy-user.jpg" width="100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis turpis justo, eu egestas elit aliquet sit amet. Vivamus convallis, dolor a euismod scelerisque, nisi lorem placerat nisi, sed euismod ligula eros in lorem. Pellentesque vel ante semper,
convallis ante in, mollis odio.
</p>
<img src="http://galerie32.de/images-designer/thumbs/dummy-user.jpg" width="100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis turpis justo, eu egestas elit aliquet sit amet. Vivamus convallis, dolor a euismod scelerisque, nisi lorem placerat nisi, sed euismod ligula eros in lorem. Pellentesque vel ante semper,
convallis ante in, mollis odio.
</p>
</div>
Example of how I want it to work:
var images = document.getElementsByClassName("test").getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
images[i].align = "right";
}
<div class="test">
<img src="http://galerie32.de/images-designer/thumbs/dummy-user.jpg" width="100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis turpis justo, eu egestas elit aliquet sit amet.
</p>
<img src="http://galerie32.de/images-designer/thumbs/dummy-user.jpg" width="100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis turpis justo, eu egestas elit aliquet sit amet.
</p>
</div>
<div class="test">
<img src="http://galerie32.de/images-designer/thumbs/dummy-user.jpg" width="100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis turpis justo, eu egestas elit aliquet sit amet.
</p>
<img src="http://galerie32.de/images-designer/thumbs/dummy-user.jpg" width="100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis turpis justo, eu egestas elit aliquet sit amet.
</p>
</div>
I understand that there should be a completely different way of writing the statement when I want to access the classes, but I can't figure out how.
Anyone who knows and can give me some pointers?

The code document.getElementsByClassName("test") gives you a list of elements, not one element. Do a loop (for) on these elements. In this loop, call getElementsByTagName("img").

How to prevent overlapping slides and ensure dynamic container resizing in jquery cycle2 nested slideshows?

I am using cycle2 (http://jquery.malsup.com/cycle2/) to produce a main slideshow containing a number of other slideshows (which contain images and text of variable heights). I want the height of the parent and current slideshow (and container) to resize to the current slide height. This nearly works but I am having a few problems that I can't for the life of me see why and would be massively grateful if someone could point me in the right direction.
You can see a live fiddle at http://jsfiddle.net/deshg/x8xaxx39/
My questions are:
1) Why on first load does it show the 2nd nested slideshow through the first one (when i click on the main pager it fixes it)?
2) Why on first load does cycle-slideshow height not match the current slide height as i'm using the wait command to wait for the images to load and have auto-height set to container (when i click on the main pager it fixes this as well)?
3) Is it a bug that when you manually drag to resize the viewport width sometimes the cycle-slideshow height value is not updated which means the parent height doesn't update or is there a way to solve this?
4) When you click to view gallery 2 and then click back to view gallery 1 the gallery 1 pager (the thumbnails at the bottom) don't work as gallery 2 has a higher z-index despite not being part of the active slide? How do I ensure the active slide has the highest z-index?
Thanks so much for any advice you can give, it doesn't seem to be playing nice for me!
Dave
FYI the related code is:
<div class="module">
<div class="inner">
<h2>GALLERIES</h2>
<!-- empty element for pager links -->
<div id="custom-pager-galleries" class="custom-pager"></div>
<p>Ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<div class="cycle-slideshow gallery"
data-cycle-fx="fade"
data-cycle-timeout=0
data-cycle-slides="> div"
data-cycle-pager="#custom-pager-galleries"
data-cycle-pager-template="<a href=#> {{name}} </a>"
data-cycle-loader="wait"
data-cycle-auto-height="container"
data-cycle-hide-non-active="true"
>
<div data-name="Gallery 1">
<div class="cycle-slideshow"
data-cycle-fx="fade"
data-cycle-timeout=0
data-cycle-slides="> div"
data-cycle-pager="#custom-pager-gallery"
data-cycle-pager-template="<a href='#'><img src='{{imgsrc}}' class='gallerythumbnail gt{{index}}'></a>"
data-cycle-loader="wait"
data-cycle-auto-height="container"
>
<div data-imgsrc="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach2.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 1</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
<div data-imgsrc="http://malsup.github.io/images/beach3.jpg">
<img src="http://malsup.github.io/images/beach3.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 2</strong></p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
<div data-imgsrc="http://malsup.github.io/images/beach1.jpg">
<img src="http://malsup.github.io/images/beach1.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 3</strong></p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
<div data-imgsrc="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach2.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 4</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
<div data-imgsrc="http://malsup.github.io/images/beach3.jpg">
<img src="http://malsup.github.io/images/beach3.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 5</strong></p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
</div>
<div class="pager">
<div id="custom-pager-gallery" class="custom-pager gallerythumbnails"></div>
</div>
</div>
<div data-name="Gallery 2">
<div class="cycle-slideshow"
data-cycle-fx="fade"
data-cycle-timeout=0
data-cycle-slides="> div"
data-cycle-pager="#custom-pager-gallery2"
data-cycle-pager-template="<a href='#'><img src='{{imgsrc}}' class='gallerythumbnail gt{{index}}'></a>"
data-cycle-loader="wait"
data-cycle-auto-height="container"
>
<div data-imgsrc="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach2.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 2</strong></p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
<div data-imgsrc="http://malsup.github.io/images/beach1.jpg">
<img src="http://malsup.github.io/images/beach1.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 1</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
<div data-imgsrc="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach2.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 3</strong></p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
<div data-imgsrc="http://malsup.github.io/images/beach3.jpg">
<img src="http://malsup.github.io/images/beach3.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 4</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
<div data-imgsrc="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach2.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 5</strong></p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
</div>
<div class="pager">
<div id="custom-pager-gallery2" class="custom-pager gallerythumbnails"></div>
</div>
</div>
</div>
</div>
</div>

What you're trying to do is not easy, or provided for "out of the box".
First,
data-cycle-auto-height="container"
is not an allowed option. Check the API. It needs to be an integer, a ratio, or the string "calc".
Second, autoheight can be tricky. You're on the right track with using the wait option on the loader. The problem is that the parent slideshow will still initialize before the children slideshows initialize, simply because it occurs earlier in markup. What you probably want to do is initialize the child slideshows, then initialize the parent slideshow as a callback once both of the child slideshows are fully loaded. Only then will they have layout height that the parent slideshow can use for autoheight calculations. You will need to move off of the declarative syntax, and instead to call cycle slideshow imperatively. I would suggest using jQ deferred objects, and when() syntax to simplify the callback structure.
In semi-pseudo-code:
var childSs1 = new $.Deferred();
var childSs2 = new $.Deferred();
$('.child-slideshow1).on("cycle-post-initialize", function() {
childSs1.resolve();
});
$('.child-slideshow2).on("cycle-post-initialize", function() {
childSs2.resolve();
});
// The following will be called asynchronously
$.when( childSs1, childSs2 ).done(function () {
$(.parent-slideshow).cycle({options});
});
Third, you are most likely running into issues with event bubbling. If an event fires on a child slideshow, that synthetic event will bubble to all parent elements in the DOM, including your parent slideshow(s). That is going to confuse the heck out of the parent slideshow, because it's going to interpret those events as applying to it. Cycle2 wasn't really written with this use case in mind. That isn't to say it can't be done. But you probably will need to do lock down bubbling on all cycle events with something drastic like:
$( ".all-slideshows" ).on("cycle-after cycle-before cycle-bootstrap
cycle-destroyed cycle-finished cycle-initialized cycle-next
cycle-pager-activated cycle-paused cycle-post-initialize
cycle-pre-initialize cycle-prev cycle-resumed
cycle-slide-added cycle-slide-removed cycle-stopped
cycle-transition-stopped cycle-update-view", function( event ) {
event.stopPropagation();
});
Also, it would make it easier for people to help out if you reduced your fiddle as much as possible. Hope this helps.

Javascript library for first access guide

Anyone knows a javascript library to create a first access guide to a web application?
When user login for the first time I want to show a step by step guide, or dialog balloons indicating how to use my web application.

Yes, there is Intro.js which is good:
you simply add attributes to your tags like so:
<div class="span6" data-step="2" data-intro="Ok, wasn't that fun?" data-position='right'>
<h4>Section One</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
<h4>Section Two</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
<h4>Section Three</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
</div>

Flexible Font Size for fixed width and height

I need to make each of my <p> have flexible font size with fixed width and height.
Current code
CSS
p{
width:500px;
height:100px;
background-color:#F0F0F0;
margin:10px;
padding:5px;
font-size:24px;
}
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros. consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros.</p>
<br><br><br>
<br><br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros, faucibus sit amet aliquet ac, varius id eros.</p>
<br><br><br>
<!-- This one is perfect -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros.</p>
Check and try the code in jsfiddle
http://jsfiddle.net/8GNAV/
And this the output I want to reach
http://jsfiddle.net/8GNAV/1/

The general idea is to get overflow:hidden, then keep shrinking the text until the scrollHeight is less than the offsetHeight. Like so:
[].forEach.call(document.getElementsByTagName('p'),function(p) {
p.style.overflow = "hidden";
var f = 24;
while(f > 6 && p.scrollHeight > p.offsetHeight) {
f--;
p.style.fontSize = f+"px";
}
});
Demo