Accordion doesn't expand - javascript

I've created an accordion with the help of a tutorial and some demo files and even though the demo file works, when I transferred it over to my HTML file, it doesn't expand upon clicking. The weird thing is that when I copy pasted it to a jsfiddle, it works. I'm not sure what I'm doing wrong here.
Heres my HTML,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>What is Diabetes?</title>
<script type="text/javascript" src="js/accordion.js"></script>
<script
src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous">
</script>
<link href="https://fonts.googleapis.com/css?family=Ek+Mukta:300,400|Roboto:100,200,300,400,800,900|Source+Sans+Pro:300,400|Raleway:100,200,300,400,500,800,900" rel="stylesheet">
<link href="css/accordion.css" rel="stylesheet" type="text/css">
<!--Fonts-->
</head>
<body>
<div id="container"> <!-- Container for Everything -->
<div class="divider1"></div>
<div class="sectionbanner">
<h2>WHAT IS DIABETES?</h2>
</div>
<div class="divider1"></div>
<div id="whatisdiabetes">
<p>Diabetes or diabetes mellitus is a chronic disease where the body does not make or does not use insulin properly, resulting in having too much sugar (glucose) in the blood. Sugar comes from the food we eat. The body needs sugar to make energy. The amount of sugar in the blood of a normal person is closely controlled by a substance called insulin. Insulin is made by the pancreas, a gland found below the stomach. People with diabetes either do not produce enough insulin or the insulin produced does not work well. As a result, sugar builds up in the blood.<br><br>
Over time, high sugar levels can give rise to problems like infections, blindness, kidney disorders, stroke, heart disease, and foot and leg disorders.</p>
</div>
<div id="faq">
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">Accordion Section #1</a>
<div id="accordion-1" class="accordion-section-content">
<p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
</div><!--end .accordion-section-content-->
</div><!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-2">Accordion Section #2</a>
<div id="accordion-2" class="accordion-section-content">
<p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
</div><!--end .accordion-section-content-->
</div><!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-3">Accordion Section #3</a>
<div id="accordion-3" class="accordion-section-content">
<p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
</div><!--end .accordion-section-content-->
</div><!--end .accordion-section-->
</div><!--end .accordion-->
</div>
</div>
</body>
</html>
As for my JS and CSS, it is exactly how I put it in the jsfiddle. I'm honestly stumped and confused as to why it works in jsfiddle but not when I put it in my HTML using Dreamweaver.

Related

.attr() not working as intended

I want the user to change the text color, width, height etc of a div with a simple button click. I can't get this to work on a div.
However, if I have the exact same code put on an image instead of a div, it works.
Here's the little demo I'm working with:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<button id="mainButton">Click me</button>
<div id="dummyText">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel,
aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum
felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies
nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</div>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
<script>
$(document).ready(function() {
$("#mainButton").on('click' ,function(){
$('div').attr('width','500');
$('img').attr('width', '500');
});
});
</script>
</body>
</html>
It's probably something that I'm overlooking, but can't quite put my finger on it.
Thanks in advance
You'll want to switch out .attr for .css
$('div').css('width','500');
$('img').css('width', '500');
https://codepen.io/MathiasaurusRex/pen/mKwGaz
You could do
$('div').width(500);
$('img').width(500);
or:
$('div').css('width', '500px');
$('img').css('width', '500px');

Bootstrap collapse panel not working on mobile

Hi, I'm tyring to make a mobile version of a website. I used collapse panel from Bootstrap so the user can view specified content easily. Everything works perfectly in desktop mode, but when I go in mobile, if I toggle the collapse div, the fonts and the content shrinks for a reason I don't understand. I tried different version of imports (bootstrap, jquery) and I read the existing related problems but I didn't find any answer so far.
Here's a picture of the current behavior of the code (tested on a real phone):
http://imgur.com/Mfnj4hA
Here's the code:
<html lang="en">
<head>
<!-- STYLE IMPORT -->
<link rel="stylesheet" href="../libs/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../libs/font-awesome/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/png" href="../img/brand-image.png" />
<!-- SCRIPT IMPORT -->
<style>
.panel-heading a:after {
font-family:'Glyphicons Halflings';
content:"\e114";
float: right;
color: grey;
}
.panel-heading a.collapsed:after {
content:"\e080";
}
</style>
</head>
<body>
<div class="fluid-container">
<div class="panel panel-default">
<div class="panel-heading"><a data-toggle="collapse" data-target="#collapseOne" href="#collapseOne">Panel 1</a></div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="panel panel-primary">
<div class="panel-heading"><i class="fa fa-check" style="padding-right:25px"></i> Lorem Ipsum</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor faucibus lacus in lacinia. Mauris sed sem nibh. In sem sapien, aliquam et placerat vitae, rutrum eget nunc. Maecenas consequat molestie fringilla. Nunc non pellentesque augue. Fusce egestas, urna pellentesque aliquam interdum, mi enim efficitur sem, et pretium orci diam eu ipsum. Vestibulum lobortis pellentesque massa sed gravida. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tortor mi, consectetur at molestie sit amet, aliquet eu felis. Integer euismod rhoncus egestas. Donec porta ligula vel libero maximus molestie. Fusce porttitor dictum magna vitae maximus. Cras pulvinar consectetur orci, ac tincidunt libero condimentum nec. Sed molestie lacinia neque sed sollicitudin.
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading"><i class="fa fa-check" style="padding-right:25px"></i> Morbi quis magna</div>
<div class="panel-body">
Morbi quis magna scelerisque, egestas leo id, sodales lectus. Aliquam vel commodo leo. Vestibulum imperdiet maximus felis, quis ullamcorper tellus sodales in. Nunc aliquet, lectus a maximus pellentesque, dolor neque tempor sem, vitae dignissim enim neque et arcu. Nullam at sagittis tortor, sed imperdiet turpis. Quisque non leo sollicitudin, tincidunt felis a, fringilla tellus. Phasellus ipsum lorem, sodales non dolor nec, viverra rutrum magna. Phasellus quam purus, efficitur ac sodales ac, pretium ac tellus. Aenean pulvinar felis sollicitudin tellus bibendum, ac vestibulum nulla facilisis. Mauris maximus, dui in gravida molestie, tellus nisl convallis ex, ut fermentum orci odio at mauris. Donec et erat eget diam ultrices auctor et vitae felis. Nullam et arcu ligula. Proin nec tristique dui, ut luctus velit.
</div>
</div>
<div class="fluid-container">
<button type="button" class="btn btn-primary" style="width:100%;font-size:20pt;padding:20px" data-toggle="collapse" data-target="#collapseOne" href="#collapseOne"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Thank you for your help.
Defining your viewport to device-width is important, when you do responsive web development.
Add this to the head section:
<meta name="viewport" content="width=device-width, initial-scale=1">
You can find the bootstrap bioler template here: http://getbootstrap.com/getting-started/

tabs and pills in bootstrap

I have a tab structure consisting of 5 tabs. All tabs are working fine. Now in my first tab, I have few header tags which are same as the other 4 tabs. So when clicking of each of them, I want to change the active tab and also the contents. My code is as below.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills" id="myTab">
<li class="active"><a data-toggle="tab" href="#overview">Overview</a>
</li>
<li><a data-toggle="tab" href="#tab1">tab1</a>
</li>
<li><a data-toggle="tab" href="#tab2">tab2</a>
</li>
<li><a data-toggle="tab" href="#tab3">tab3</a>
</li>
<li><a data-toggle="tab" href="#tab4">tab4</a>
</li>
</ul>
<div class="tab-content">
<div id="overview" class="tab-pane fade in active">
<p>overview</p>
<br>
<a href="#tab1">
<h3>tab1 link</h3>
</a>
<br>
<a href="#tab2">
<h3>tab2 link</h3>
</a>
<br>
<a href="#tab3">
<h3>tab3 link</h3>
</a>
<br>
<a href="#tab4">
<h3>tab4 link</h3>
</a>
</div>
<div id="tab1" class="tab-pane fade">
<p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean
volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
</div>
<div id="tab2" class="tab-pane fade">
<p>WInteger convallis, nulla in sollicitudin placerat, ligula enim auctor lectus, in mollis diam dolor at lorem. Sed bibendum nibh sit amet dictum feugiat. Vivamus arcu sem, cursus a feugiat ut, iaculis at erat. Donec vehicula at ligula vitae venenatis.
Sed nunc nulla, vehicula non porttitor in, pharetra et dolor. Fusce nec velit velit. Pellentesque consectetur eros.</p>
</div>
<div id="tab3" class="tab-pane fade">
<p>Donec vel placerat quam, ut euismod risus. Sed a mi suscipit, elementum sem a, hendrerit velit. Donec at erat magna. Sed dignissim orci nec eleifend egestas. Donec eget mi consequat massa vestibulum laoreet. Mauris et ultrices nulla, malesuada volutpat
ante. Fusce ut orci lorem. Donec molestie libero in tempus imperdiet. Cum sociis natoque penatibus et magnis dis parturient.</p>
</div>
<div id="tab4" class="tab-pane fade">
<p>Donec vel placerat quam, ut euismod risus. Sed a mi suscipit, elementum sem a, hendrerit velit. Donec at erat magna. Sed dignissim orci nec eleifend egestas. Donec eget mi consequat massa vestibulum laoreet. Mauris et ultrices nulla, malesuada volutpat
ante. Fusce ut orci lorem. Donec molestie libero in tempus imperdiet. Cum sociis natoque penatibus et magnis dis parturient.</p>
</div>
</div>
Any help soon will help.
Based off bootstrap documentation here
Use a jquery function like this
$('a').click(function(e) {
e.preventDefault();
var href = $(this).attr('href');
$('#myTab a[href="' + $(this).attr('href') + '"]').tab('show');
})
THat will work on any a link you click and take you to the tab its href is set to
Look at this codepen
You just have to place the content inside tab-content to make it work.
This will work like you want it to. Try it:
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills" id="myTab">
<li class="active"><a data-toggle="tab" href="#tab1">tab1</a>
</li>
<li><a data-toggle="tab" href="#tab2">tab2</a>
</li>
<li><a data-toggle="tab" href="#tab3">tab3</a>
</li>
<li><a data-toggle="tab" href="#tab4">tab4</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<p>overview</p>
<br>
<div id="tab1" class="tab-pane fade in active">
<p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean
volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
</div>
<div id = "tab2" class = "tab-pane fade">
<br>
<p>WInteger convallis, nulla in sollicitudin placerat, ligula enim auctor lectus, in mollis diam dolor at lorem. Sed bibendum nibh sit amet dictum feugiat. Vivamus arcu sem, cursus a feugiat ut, iaculis at erat. Donec vehicula at ligula vitae venenatis.
Sed nunc nulla, vehicula non porttitor in, pharetra et dolor. Fusce nec velit velit. Pellentesque consectetur eros.</p>
</div>
<br>
<div id="tab3" class="tab-pane fade">
<p>Donec vel placerat quam, ut euismod risus. Sed a mi suscipit, elementum sem a, hendrerit velit. Donec at erat magna. Sed dignissim orci nec eleifend egestas. Donec eget mi consequat massa vestibulum laoreet. Mauris et ultrices nulla, malesuada volutpat
ante. Fusce ut orci lorem. Donec molestie libero in tempus imperdiet. Cum sociis natoque penatibus et magnis dis parturient.</p>
</div>
<div id="tab4" class="tab-pane fade">
<p>Donec vel placerat quam, ut euismod risus. Sed a mi suscipit, elementum sem a, hendrerit velit. Donec at erat magna. Sed dignissim orci nec eleifend egestas. Donec eget mi consequat massa vestibulum laoreet. Mauris et ultrices nulla, malesuada volutpat
ante. Fusce ut orci lorem. Donec molestie libero in tempus imperdiet. Cum sociis natoque penatibus et magnis dis parturient.</p>
</div>
</div>
Run this codepen

Background Scrolling layout

Basically, I am creating a web page for my school project... sorry for silly explanation but..
I want to have fixed navigation bar at the top of the site and when you click any link it will move you up or down to the requested content (not to different subpage, just scrolling up/down)..
see example here: http://www.danbrown.com/
however I need just the simplest way how to do it...and I didnt find any tutorial whatsoever.
Thanks
You need to use fixed position for you menu.
http://www.w3schools.com/css/css_positioning.asp
And to scroll to a particular spot in the page use link anchor.
http://www.echoecho.com/htmllinks08.htm
I could code the ole thing for you but you will learn nothing.
Link anchors are totally the easiest and most reliable way to do what you want.
<a name="a">text</a> or <a id="a">text</a> both set an anchor point somewhere, and text will scroll the viewport to that link.
You can also set the id attribute on other elements, say, headings, to make them into anchor targets, but the name property will only work on <a> tags.
As a starting point, you could use the following twitter bootstrap demo to do the fixed navigation bar.
The jquery code is just needed to make a scroll animation. It would also work with-out jQuery.
In the demo you should do a change effect to the navigation to show the current scroll position. That's not in the demo.
You can find the same code here at jsFiddle.
The initial scroll effect is not difficult to do. Please check my anwser in this SO question that will help you to do that effect.
(You could also do the fixed navigation with the code from the counter example and do your own menu styling.)
$(function () {
// source for transition animation from here: https://stackoverflow.com/questions/12643510/css3-transitions-with-anchors
$('a[href^=#]').on("click", function (e) {
var t = $(this.hash);
var t = t.length && t || $('[name=' + this.hash.slice(1) + ']');
if (t.length) {
var tOffset = t.offset().top;
$('html,body').animate({
scrollTop: tOffset - 20
}, 'slow');
e.preventDefault();
}
});
});
body {
min-height: 2000px;
padding-top: 50px;
}
/* anchor style to scroll to the right position */
a.anchor {
display: block;
position: relative;
top: -20px;
visibility: hidden;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Dummy 1
</li>
<li>Dummy 2
</li>
<li>Contact
</li>
<li class="dropdown"> Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row"> <a class="anchor" id="dummy1"></a>
<h1>Dummy 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
<div class="row"> <a class="anchor" id="dummy2"></a>
<h1>Dummy 2</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
</div>

Is it possible to add two div boxes inside a html with javascript?

Hello I will make a html page, and see if it is possible to add 2 div boxes inside an html page with use of javascript ?
<h1>HEDER TEXT HERE</h1>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibu magna mollis euismod.</p>
<h2 class="clear">Main contributors</h2>
<!-- START DIV CLASS="article" BOX HERE-->
<h3>Aenean lacinia bibendum.</h3>
<p class="clear">Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget.</p>
<figure class="clear">
<img src="img/klint-faaborg-chair.jpg" alt="Faaborg chair">
<figcaption>Consectetur Fusce Quam</figcaption>
</figure>
<!-- Close DIV CLASS="article" BOX HERE-->
<!-- START DIV CLASS="article" BOX HERE-->
<h3>Magna Risus Bibendum</h3>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui.Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum.</p>
<figure>
<img src="img/ph-artichoke-lamp.jpg" alt="Artichoke lamp">
<figcaption>Consectetur Fusce Quam</figcaption>
</figure>
<!-- Close DIV CLASS="article" BOX HERE-->
<h2 class="clear">Read more</h2>
Yes it's entirely possible.
You can use just plain old javascript:
document.body.innerHTML += '<div>Stuff inside a div.</div><div>another div!</div>';
Yes It is possible, you can accomplish this in several ways, this is just one way using standard Javascript. As you can see when the button is clicked I append a div to the body.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<button id='button' onclick='addDivs()'>Click me for magic</button>
<script>
var addDivs = function(){
var h = document.createElement('div');
h.innerHTML = 'I am a div';
document.body.appendChild(h);
}
</script>
</body>
</html>
<script type="text/javascript"><!--
function add_h3() {
// creates a H3 element, class and html content
var new_h3 = document.createElement('h3');
new_h3.className = 'cls';
new_h3.innerHTML = 'The <i>html text</i> content';
// gets the reference tag
var reference = document.getElementById('idiv');
// add 'new_h3' before 'reference', inside body
document.body.insertBefore(new_h3, reference);
}
--></script>
The reference element
Add H3

Categories

Resources