Develop Reference

Show/hide error div function detect I tag as a div

I'm trying to create a function to show and hide <div> when I click the <i> tag, but the <i> tag itself is detected as a div so it will leave a blank space and it looks bad, anyone know how to fix this?
function updateItems(tgt, delta) {
var $items = $(tgt).closest("div").children();
var $current = $items.filter('.current');
$current = $current.length ? $current : $items.first();
var index = $current.index() + delta;
// Range check the new index
index = (index < 0) ? 0 : ((index > $items.length) ? $items.length : index);
$current.removeClass('current');
$current = $items.eq(index).addClass('current');
// Hide/show the next/prev
$(".prev").toggle(!$current.is($items.first()));
$(".next").toggle(!$current.is($items.last()));
}
$(".next").click(function(e) {
updateItems(e.target, 1);
});
$(".prev").click(function(e) {
updateItems(e.target, -1);
});
// Cause initial selection
$(".group").each(function() {
updateItems(this, 0)
});
.current{
background-color:#aaa;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/fontawesome.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/solid.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js"></script>
<div class="container-fluid padding adungcontent">
<div class="row padding">
<div class="col-lg-4 text-center reveal">
<img src="img/agunglogo.png" alt="Agung logo" class="img-fluid" alt="Responsive image">
</div>
<div class="col-lg-8 text-justify reveal group">
<div>
<p>Test
</p>
</div>
<div>
<h2>Vision</h2>
<h2>Mission</h2>
</div>
<div>
<h2>Achievements</h2>
</div>
<div>
<h2 class="text-center">Values</h2>
</div>
<section>
<i class="fas fa-angle-right next"></i>
<i class="fas fa-angle-left prev"></i>
</section>
</div>
</div>
</div>

The problem is not that the <i> element is detected as a div, but that you are selecting the parent <div> with closest() and then selecting all it's children with children(), which includes the <i>.
function updateItems(tgt, delta) {
var $items = $(tgt).closest("div").find("div");
var $current = $items.filter('.current');
$current = $current.length ? $current : $items.first();
var index = $current.index() + delta;
// Range check the new index
index = (index < 0) ? 0 : ((index > $items.length) ? $items.length : index);
$current.removeClass('current');
$current = $items.eq(index).addClass('current');
// Hide/show the next/prev
$(".prev").toggle(!$current.is($items.first()));
$(".next").toggle(!$current.is($items.last()));
}
$(".next").click(function(e) {
updateItems(e.target, 1);
});
$(".prev").click(function(e) {
updateItems(e.target, -1);
});
// Cause initial selection
$(".group").each(function() {
updateItems(this, 0)
});
.current{
background-color:#aaa;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/fontawesome.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/solid.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js"></script>
<div class="container-fluid padding adungcontent">
<div class="row padding">
<div class="col-lg-4 text-center reveal">
<img src="img/agunglogo.png" alt="Agung logo" class="img-fluid" alt="Responsive image">
</div>
<div class="col-lg-8 text-justify reveal group">
<div>
<p>Test
</p>
</div>
<div>
<h2>Vision</h2>
<h2>Mission</h2>
</div>
<div>
<h2>Achievements</h2>
</div>
<div>
<h2 class="text-center">Values</h2>
</div>
<section>
<i class="fas fa-angle-right next"></i>
<i class="fas fa-angle-left prev"></i>
</section>
</div>
</div>
</div>

How can i make delete button on same row as li delete the li that is on same line

I have a to do app.
Delete button wont delete the li element that is on same line...how can I do it ? I tried different approaches but none work...the one that is in code only deletes when I press first li element button but I want to delete random.
My Code:
function adauga() {
var inp = document.getElementById('usr').value;
var list = document.getElementById('lista1');
var li = document.createElement('li');
var lungime = document.getElementById("lista1").getElementsByTagName('li').length;
for(var i = 0; i < lungime ; i++) {
li.setAttribute("id",i);
}
li.appendChild(document.createTextNode(inp));
var button = document.createElement("button");
button.innerHTML = "Delete";
button.setAttribute("class","btn btn-primary");
button.setAttribute("onclick","sterge()");
button.setAttribute("id","ste");
li.appendChild(button);
list.appendChild(li);
}
function sterge() {
$('#ste').on('click', function(){
$(this).parent().remove();
});
}
<link rel="stylesheet" type="text/css" href="stil.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap /3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="centru">
<div class="row">
<div class="col-lg-12">
<h2>TO DO LIST</h2>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<input type="text" class="form-control" id="usr" placeholder="Input task...">
</div>
<div class="col-lg-6">
<button type="button" class="btn btn-primary" onclick="adauga()">Primary</button>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="list-group" id="lista1">
</ul>
</div>
</div>
</div>
When I click button on same line with li I would like li to disappear.

You have to use Delegated event handlers.
Delegated event handlers have the advantage that they can process events from descendant elements that are added to the document at a later time.
The attribute id must be unique in a document. Use class instead of id.
Change:
$('#ste').on('click',function(){
To
$('body').on('click', '.ste', function(){
function adauga() {
var inp = document.getElementById('usr').value;
var list = document.getElementById('lista1');
var li = document.createElement('li');
var lungime = document.getElementById("lista1").getElementsByTagName('li').length;
for(var i = 0; i < lungime ; i++) {
li.setAttribute("id",i);
}
li.appendChild(document.createTextNode(inp));
var button = document.createElement("button");
button.innerHTML = "Delete";
button.setAttribute("class","btn btn-primary");
button.setAttribute("onclick","sterge()");
button.setAttribute("class","ste");
li.appendChild(button);
list.appendChild(li);
}
function sterge() {
$('body').on('click', '.ste', function(){
$(this).parent().remove();
});
}
<link rel="stylesheet" type="text/css" href="stil.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap /3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="centru">
<div class="row">
<div class="col-lg-12">
<h2>TO DO LIST</h2>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<input type="text" class="form-control" id="usr" placeholder="Input task...">
</div>
<div class="col-lg-6">
<button type="button" class="btn btn-primary" onclick="adauga()">Primary</button>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="list-group" id="lista1">
</ul>
</div>
</div>
</div>

Ckeditor instance can't destroy?

How i can destroy ckeditor instance?
i have a problem ckeditor instance double. i will to destroy it.
i will check code console.log(editorID) same in the images. I see the
textarea if i add chapter1 i have 2 instance is textarea0 and
textarea1. If i add chapter2 i have 3 instance is textarea0, textarea1
and textarea2. I think this code is not destroy instance. Can you help
me for this issue? Thank you.
I'm apologize. I'm not good at English.
function loadEditors() {
var $editors = $("textarea.editors");
console.log($editors.length);
if ($editors.length) {
$editors.each(function() {
var editorID = $(this).attr("id");
var instance = CKEDITOR.instances[editorID];
if (instance) { instance.destroy(true); }
console.log(editorID);
CKEDITOR.replace(editorID);
});
}
}
If i cut out ckeditor this code is work and attribute id textarea is
true. See the code example.
$(document).ready(function() {
//CKEDITOR.replaceAll('editors');
$("#chapter").on("click",function(){
var i = $('.nav-tabs li').length;
$('.nav-tabs li:last-child').clone().removeClass('active').appendTo(".nav-tabs").find('a').attr('href','#chapter'+i).attr('aria-controls','chapter-'+i).text("Chapter "+i);
$('.tab-pane:last-child').clone().removeClass('active').appendTo(".tab-content").attr('id','chapter'+i);
$('.tab-pane:last-child').find('textarea').first().attr('id','textarea'+i).val('textarea'+i);
//loadEditors();
});
/* var $editors = $("textarea.editors");
if ($editors.length) {
$editors.each(function() {
var instance = CKEDITOR.instances[$(this).attr("id")];
if (instance) { $(this).val(instance.getData()); }
});
}*/
/* function loadEditors() {
var $editors = $("textarea.editors");
console.log($editors.length);
if ($editors.length) {
$editors.each(function() {
var editorID = $(this).attr("id");
var instance = CKEDITOR.instances[editorID];
if (instance) { instance.destroy(true); }
console.log(editorID);
CKEDITOR.replace(editorID);
});
}
}*/
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.ckeditor.com/4.5.4/standard-all/ckeditor.js"></script>
<div class="pull-right"><button type="button" class="btn btn-default" id="chapter"><i class="fa fa-plus"></i> Add Chapter</button></div>
<div class="clearfix"></div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Chapter 0</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="chapter0">
<h3>Chapter 0</h3>
<div class="form-group">
<label for="writter_detail_description" class="col-sm-2 control-label">detail </label>
<div class="col-sm-10">
<textarea class="form-control editors" name="writter_detail_description[]" id="textarea0" rows="10">textarea0</textarea>
</div>
</div>
</div>
</div>

try this
setTimeout(function () { CKEDITOR.replace('editorID'); }, 150);

I'm complete.
I add my code
$('.tab-pane:last-child').find('textarea').parent().find('div').remove();
and change function
function loadEditors() {
var $editors = $("textarea.editors");
console.log($editors.length);
if ($editors.length) {
$editors.each(function() {
var editorID = $(this).attr("id");
var instance = CKEDITOR.instances[editorID];
if(instance) {
delete instance;
}else{
console.log(editorID);
CKEDITOR.replace(editorID);
}
});
}
}
$(document).ready(function() {
CKEDITOR.replaceAll('editors');
$("#chapter").on("click",function(){
var i = $('.nav-tabs li').length;
$('.nav-tabs li:last-child').clone().removeClass('active').appendTo(".nav-tabs").find('a').attr('href','#chapter'+i).attr('aria-controls','chapter-'+i).text("Chapter "+i);
$('.tab-pane:last-child').clone().removeClass('active').appendTo(".tab-content").attr('id','chapter'+i);
$('.tab-pane:last-child').find('textarea').first().attr('id','textarea'+i).val('textarea'+i);
$('.tab-pane:last-child').find('textarea').parent().find('div').remove();
loadEditors();
});
function loadEditors() {
var $editors = $("textarea.editors");
console.log($editors.length);
if ($editors.length) {
$editors.each(function() {
var editorID = $(this).attr("id");
var instance = CKEDITOR.instances[editorID];
if(instance) {
delete instance;
}else{
console.log(editorID);
CKEDITOR.replace(editorID);
}
});
}
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.ckeditor.com/4.5.4/basic/ckeditor.js"></script>
<div class="pull-right"><button type="button" class="btn btn-default" id="chapter"><i class="fa fa-plus"></i> Add Chapter</button></div>
<div class="clearfix"></div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Chapter 0</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="chapter0">
<h3>Chapter 0</h3>
<div class="form-group">
<label for="writter_detail_description" class="col-sm-2 control-label">detail </label>
<div class="col-sm-10">
<textarea class="form-control editors" name="writter_detail_description[]" id="textarea0" rows="10">textarea0</textarea>
</div>
</div>
</div>
</div>

Error in d3.js using jQuery and dc.js

I'm new in programming, and I'm trying to implement a search button that can enable me to filter datas .
I have on my serv a JSON data at the url /tweets_complet . Then I want to get another JSON which depends on the input from the search button . Once I have the two JSON, I wrote some code, which I think is not important .
Here is the js code :
function main(){
$.getJSON("/tweets_complet", insererDonneesJson);}
function insererDonneesJson(data){
$('button').on('click', get_data);
function get_data() {
var cashtagg=$('#cash').val();
$.getJSON("/"+cashtagg, filter);
function filter(data2) {
//Tweets datas
var tweets = data;
var dateFormat = d3.time.format("%Y-%m-%d %H:%M:%S");
tweets.forEach(function(d) {
d["cleandate"] = dateFormat.parse(d["cleandate"]);
d["cleandate"].setSeconds(0);
});
//Create a Crossfilter instance
var ndx = crossfilter(tweets);
//Define Dimensions
var cleandateDim = ndx.dimension(function(d) { return d["cleandate"]; });
var sentimentDim=ndx.dimension(function(d) { return d["sentiment"]; });
var bnscoreDim=ndx.dimension(function(d) { return d["bnscore"]; });
var tickerDim=ndx.dimension(function(d) { return d["collection_name"];});
var newTickerDim = tickerDim.filter(cashtagg);
//Calculate metrics
var numTweetsByTicker=newTickerDim.group()
var numTweetsByDate = cleandateDim.group();
var numTweetsByBnscore = bnscoreDim.group();
var totalScoreByDate = cleandateDim.group().reduceSum(function(d) {
return d["sentiment"]*10/(numTweetsByDate.size());})
var all = ndx.groupAll();
var numTweetsBySentiment = sentimentDim.group();
//Define values (to be used in charts)
var minDate = cleandateDim.bottom(1)[0]["cleandate"];
var maxDate = cleandateDim.top(1)[0]["cleandate"];
//Datas cashtag
var datas = data2;
var dateFormatO = d3.time.format("%Y-%m-%d");
datas.forEach(function(d) {
d["Date"] = dateFormatO.parse(d["Date"]);
});
// Create a Crossfilter instance
var ndxO = crossfilter(datas);
// Define Dimensions
var dateDimO = ndxO.dimension(function(d) { return d["Date"]; });
var volumeDimO=ndxO.dimension(function(d) { return d["Volume"]; });
var scoreDimO=ndxO.dimension(function(d) { return d["Low"]; });
// Calculate metrics
var groupeVolumeO = dateDimO.group().reduceSum(function(d) { return d["Volume"]/10000000;});
var groupeScoreO = dateDimO.group().reduceSum(function(d) { return d["Low"];});
var allO = ndxO.groupAll();
// Define values (to be used in charts)
var minDateO = dateDimO.bottom(1)[0]["Date"];
var maxDateO = dateDimO.top(1)[0]["Date"];
var minVolumeO = (volumeDimO.bottom(1)[0]["Volume"])/10000000;
var maxVolumeO = (volumeDimO.top(1)[0]["Volume"])/10000000;
var minScoreO = scoreDimO.bottom(1)[0]["Low"];
var maxScoreO = scoreDimO.top(1)[0]["Low"];
//Charts
var timeChart = dc.barChart("#time-chart");
var pieChart= dc.pieChart("#pie-chart")
var numberTweetsND = dc.numberDisplay("#number-tweets-nd");
var hitslineChart = dc.lineChart("#chart-line-hitsperday");
var shareChart = dc.lineChart("#share-chart");
var volumeChart = dc.lineChart("#volume-chart");
numberTweetsND
.formatNumber(d3.format("d"))
.valueAccessor(function(d){return d; })
.group(all);
timeChart
.width(800)
.height(160)
.margins({top: 10, right: 50, bottom: 30, left: 50})
.dimension(cleandateDim)
.group(numTweetsByDate)
.transitionDuration(500)
.x(d3.time.scale().domain([minDate, maxDate]))
.elasticY(true)
.xAxisLabel("Day")
.yAxis().ticks(8);
pieChart.width(350)
.height(330)
.dimension(sentimentDim)
.group(numTweetsBySentiment)
.colors(['red','black','green']);
hitslineChart
.width(600).height(330)
.dimension(cleandateDim)
.group(totalScoreByDate)
.x(d3.time.scale().domain([minDate,maxDate]));
volumeChart
.width(800).height(330)
.dimension(dateDimO)
.group(groupeVolumeO)
.x(d3.time.scale().domain([minDateO,maxDateO]));
// .y(d3.scale.linear().domain([minVolumeO,maxVolumeO]));
shareChart
.width(800).height(330)
.dimension(dateDimO)
.group(groupeScoreO)
.x(d3.time.scale().domain([minDateO,maxDateO]));
// .y(d3.scale.linear().domain([minScoreO,maxScoreO]));
dc.renderAll();
}}};
$(document).on('ready', main);
And the HTML code :
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="./static/lib/css//bootstrap.min.css">
<link rel="stylesheet" href="./static/lib/css/keen-dashboards.css">
<link rel="stylesheet" href="./static/lib/css/dc.css">
<link rel="stylesheet" href="./static/css/custom.css">
</head>
<body class="application">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="./">InTwittiv</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Description</li>
<li>Analyse</li>
</ul>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<!-- <a href="#" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-search"></span>
<div class="col-sm-10">
<input type="text" class="form-control" id="cashtag" placeholder="Cashtag">
</div>
</a> -->
<div class="col-sm-3 col-md-3 pull-right">
<div class="form-group">
<input id="cash" type="text" placeholder="Change Cashtag here" >
<button class="btn btn-sm btn-success">Chercher</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
<div class="chart-wrapper">
<div class="chart-title">
Tweet Volume
</div>
<div class="chart-stage">
<div id="time-chart"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="chart-wrapper">
<div class="chart-title">
Sentiment repartition
</div>
<div class="chart-stage">
<div id="pie-chart"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="chart-wrapper">
<div class="chart-title">
Sentiment repartition
</div>
<div class="chart-stage">
<div id="chart-line-hitsperday"></div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="chart-wrapper">
<div class="chart-title">
Total nb of tweets
</div>
<div class="chart-stage">
<div id="number-tweets-nd"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
<div class="chart-wrapper">
<div class="chart-title">
Volume (*10^6)
</div>
<div class="chart-stage">
<div id="volume-chart"></div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="chart-wrapper">
<div class="chart-title">
Share Price
</div>
<div class="chart-stage">
<div id="share-chart"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<p class="small text-muted">Built by Keyrus Capital Markets</p>
</div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="./static/lib/js/bootstrap.min.js"></script>
<script src="./static/lib/js/crossfilter.js"></script>
<script src="./static/lib/js/d3.js"></script>
<script src="./static/lib/js/dc.js"></script>
<script src="./static/lib/js/queue.js"></script>
<script src="./static/lib/js/d3.layout.cloud.js"></script>
<script src="./static/lib/js/keen.min.js"></script>
<script src='./static/js/graph2.js' type='text/javascript'></script>
</body>
</html>
When I run the serv, I can enter a value in the input (FB for example) and it works . However, from here, I can't change the "cash" value into something else like AAPL since I get the error
Uncaught TypeError: undefined is not a function
d3.js:2716
This line is :
var n = d3_time_numberRe.exec(string.slice(i, i + 4));
I have no clue about the reason of the issue since I'm not familiar with $ and buttons...
Any help would be appreciated :)

js slideshow classname property of null

I am making a slideshow for a website i am making.
but my slideshow keeps getting error
Cannot set property 'className' of null
here is my code:
window.onload=function(){
var slideshow = document.getElementsByClassName('slideshow').item(0),
train = slideshow.getElementsByClassName('train').item(0),
lists = document.getElementsByClassName('btns').item(0).getElementsByClassName('btn'),
currentSlide = 0;
(go2slide = function (n) {
if(n>lists.length-1) n=0;
if(n<0) n=lists.length-1;
train.style.left=(-310*n)+'px';
lists.item(currentSlide).className = '';
lists.item(n).className = 'active';
currentSlide=n;
})(0); // set active of first li
nextSlide = function(){
go2slide(currentSlide+1);
}
prvSlide = function(){
go2slide(currentSlide-1);
}
var autoPlayIv = false;
(autoPlayStart = slideshow.onmouseout = function(){
if(autoPlayIv) return;
autoPlayIv = setInterval(nextSlide, 2000);
})(); // run auto play
autoPlayStop = slideshow.onmouseover = function(){
clearInterval(autoPlayIv);
autoPlayIv = false;
}
slideshow.getElementsByClassName('next').item(0).onclick=nextSlide;
slideshow.getElementsByClassName('previous').item(0).onclick=prvSlide;
for (var i=0; i<lists.length; i++) {
(function(j){
lists.item(j).onclick=function(){
go2slide(j);
}
})(i);
}
}
i DO have a li tag classes as btn and a btns ul.
its item(0).
and here is the html related to it
<div class="body">
<div class="slide">
<div class="s1">
<div class="slideshow">
<div class="train">
<script type="text/javascript">
var slidesLen = 3;
for(var i=1;i<=slidesLen;i++){
document.write("<div style=\"background-image:url('../images/pic"+i+".jpg');\"></div>");
}
</script>
</div>
<div class="previous"></div>
<div class="next"></div></div>
<ul class="btns">
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
</ul>
</div>
<div class="s2"></div>
<div class="s3"></div>
<div class="s4"></div>
<div class="s5">
<div class="I"></div>
<div class="II"></div>
<div class="III"></div>
</div>
</div>
<div class="text"></div>
</div>
and of course its only the body.php i am posting here. I don't think header.php which contains the menu and the css and js association tags are needed. tell me if it is