We Keep Coding

Javascript show/hide, show first div on page load

Can you help me to make the first div show on page load?
function showStuff(element) {
var tabContents = document.getElementsByClassName('tabContent');
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].style.display = 'none';
}
var tabContentIdToShow = element.id.replace(/(\d)/g, '-$1');
document.getElementById(tabContentIdToShow).style.display = 'block';
}
.tabContent {
display:none;
}
<div tabindex="1" class="tabs"><div id="tabs1" onclick="showStuff(this)">CARATTERISTICHE</div><div class="triangle-down-tab"></div></div>
<div id="tabs2" onclick="showStuff(this)">DESTINATARI</div><div class="triangle-down-tab"></div></div>
<div tabindex="3" class="tabs"><div id="tabs3" onclick="showStuff(this)"><i class="fa fa-calendar" style="color:#000000;"></i> CALENDARIO</div><div class="triangle-down-tab"></div></div>
<a name="contenuto"><hr></a>
<div id="tabs-1" class="tabContent">
<p>tab 1</p>
</div>
<div id="tabs-2" class="tabContent">
<p>tab 2 tab 2 </p>
</div>
<div id="tabs-3" class="tabContent">
<p>tab 3 tab 3 tab 3</p>
</div>
This is my actual code. jsFiddle
Thanks!

You could try running a function when the document is ready.
$(document).ready(function () {
showTab("tabs-1");
function showTab(divId) {
//Get the element
var divElement= document.getElementbyId(divId);
//Set the css property "display" from "none" to be "block";
divElement..style.display = "block";
}
}):
The function should run once the page has fully loaded.
Let me know how it goes.

I sure can. When you do this kind of stuff best use css. That way when the dom loads the css will kick in and your desired effect will show.
Further more its easier to understand and easier to code up.
.tabContent {
display:none;
}
.tabContent.active {
display:block;
}
Then in the HTML
<div id="tabs-1" class="tabContent active">
So when the page loads tab one is active
Then in your JS
function showStuff(element) {
var tabContents = document.getElementsByClassName('tabContent');
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].className="tabContent";
}
var tabContentIdToShow = element.id.replace(/(\d)/g, '-$1');
document.getElementById(tabContentIdToShow).className="tabContent active";
}
Updated fiddle!
https://jsfiddle.net/rb5c5095/3/
We could improve things since we know all the tabs will be made invisible at boot up and tab 1 will show. So when a tab is clicked we could just search the tab who has .active class and remove it, then apply the .active class to the new tab. This would have the benefit that any extra css you add in your html markup would not be removed by the JS code, but i reckon you can work that out and if you can't get back to me i can show you :-)

Here I am invoking the function (upon page load) that tweaks the css of the desired block;
Same can be achieved by $(document).ready;
I took this approach to avoid jquery;
window.onload = showDivOne();
function showDivOne() {
document.getElementById("tabs-1").style.display = "block";
}

What is the best way to implement previous and next page logic

I have a webpage which is a huge form (6 pages long). In order to make it more user friendly, I decided to break this down into different sections (div tags).
I have placed Previous and Next button on page. On previous click it should display the previous div tag I was at and next should display the next div tag. I was wondering what would be the best way to implement it? So far I have this function which I know is hardcoded for div tag called GeneralSection. Just like GeneralSection, I have 20 more sections. Any ideas how should I go about it ? Help appreciated! :)
$(document).ready(function () {
$("#imgNext").click(function () {
$("#GeneralSection").hide();
});
});

You could just iterate through an array of elements.
Here's a simple JSBin that should get you going: https://jsbin.com/siyutumizo/edit?html,js,output
$(document).ready(function() {
var $steps = $('.step');
var currentStep = 0,
nextStep;
$steps.slice(1).hide(); //hide all but first
$('#next').on('click', function(e) {
e.preventDefault();
nextStep = currentStep + 1;
if (nextStep == $steps.length) {
alert("You reached the end");
return;
}
$($steps.get(currentStep)).hide();
$($steps.get(nextStep)).show();
currentStep = nextStep;
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="wizard">
<div class="step">1</div>
<div class="step">2</div>
<div class="step">3</div>
<div class="step">4</div>
<div class="step">5</div>
<div class="step">6</div>
</div>
<button id="next">Next</button>
</body>
</html>

Another way of implementing this is through siblings.
Jsbin: https://jsbin.com/tarajuyusu/edit?html,js,output
$(function() {
$('div#GeneralSection').slice(1).hide(); // hide all section, except for first one
$('#imgNext').on('click', function() {
var section = $('div#GeneralSection').filter(':visible');
if ($(section[0].nextElementSibling).attr('id') != "GeneralSection")
return;
section.hide();
$(section[0].nextElementSibling).show();
});
$('#imgPrev').on('click', function() {
var section = $('div#GeneralSection').filter(':visible');
if ($(section[0].previousElementSibling).attr('id') != "GeneralSection")
return;
section.hide();
$(section[0].previousElementSibling).show();
});
});

Give each section class pages and per section ids page-1, page-2 like that
$(document).ready(function () {
var pages = $(".pages").length;
$("#imgNext").click(function () {
var nextPageNo = parseInt($(".pages:visible")[0].id.split('-')[1])+1;
if(nextPageNo > pages)
return false;
$(".pages:visible").fadeout();
$("#page-"+nextPageNo).fadeIn();
});
});
Havent fully tetsted but this should get you going.
Update
HTML
<div id="container">
<div id="page-1" class="pages">1</div>
<div id="page-2" class="pages">2</div>
<div id="page-3" class="pages">3</div>
<div id="page-4" class="pages">4</div>
<div id="page-5" class="pages">5</div>
<div id="page-6" class="pages">6</div>
</div>
CSS
.pages{
display: none;
}
#page-1{
display: block;
}

jquery, find div class name at a certain position while scrolling

A fixed div (fixed_div) stays at the top to display a Google map inside it. Then a big div (big_div) stays beneath it. The big div has inside it many small divs with class small_div. Each small div has an id small_div_n where n=0,1,2,3.. consecutively. The big div is scrolled beneath the fixed div.
HTML:
<div class="fixed_div" >
</div><!-- end of class fixed_div -->
<div class="big_div">
<div class="small_div" id="small_div_0">
</div><!--end of class small_div -->
<div class="small_div" id="small_div_1">
</div><!--end of class small_div -->
<div class="small_div" id="small_div_2">
</div><!--end of class small_div -->
</div><!--end of class big_div -->
css:
.fixed_div {
position:fixed;
height:100px;
}
.big_div {
padding-top:100px;
}
.small_div {
min-height:80px;
}
Small divs have a variable height property.
If I am able to know that a new small_div has reached the lower part of the fixed div , I can find the corresponding id of the small div and can understand which google map is to be shown in the fixed div through an ajax call.
How to sense that a new small_div has reached the lower part of the fixed div?
EDIT: the big div has a min-height property.

<script>
(function() {
var fixed = $('div.fixed_div');
$(window).on('scroll',function() {
var currentFixedDivPosition = fixed.position().top + fixed.height() + $(window).scrollTop();
var temp, whichOne;
$('div.small_div').each(function(i,s) {
var diff = Math.abs($(s).position().top - currentFixedDivPosition);
if(temp) {
if(diff < temp) {
temp = diff;
whichOne = s;
}
}else {
temp = diff;
whichOne = s;
}
});
console.log(temp, $(whichOne).attr('id') + ' was closest');
});
})();
</script>
Here is a fiddle : http://jsfiddle.net/s3JKk/ , I'm not sure I understood correctly what you wanted, but I hope this will at least give you some start. :) Good Luck!

Hope that following code fulfills the purpose,
I have added a code to dynamically append a small DIV element to a big_div element
Then I added an event listener which detects any new entries to big_div
// the system will append a new DIV when the button is clicked
document.getElementById("add").addEventListener("click", function(){
addDiv();
});
// an event listener which listenes to any new added element to big_div
$('#big_div').on('DOMNodeInserted', function(e) {
// here I am getting the id of the last added element
var newdivid = document.getElementById("big_div").lastChild.id;
document.getElementById("div_status").innerHTML = "new small div added, id: " + newdivid;
});
function addDiv() {
var smalldiv = document.createElement("div");
// here I am setting the id of the newly created DIV to any random string
smalldiv.setAttribute("id", Math.random().toString(36).slice(-5));
smalldiv.appendChild(document.createTextNode("small div"));
document.getElementById("big_div").appendChild(smalldiv);
}
.fixed_div {
position:fixed;
height:100px;
}
.big_div {
padding-top:100px;
}
.small_div {
min-height:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fixed_div" >
fixed div
<p id="div_status">No Status</p>
</div><!-- end of class fixed_div -->
<div class="big_div" id="big_div">
<div class="small_div" id="small_div_0">
div 0
</div><!--end of class small_div -->
</div><!--end of class big_div -->
<button type="button" id="add">Add Small DIV</button>

Javascript: Refere to Div Tags

I have a CSS style sheet that has the following:
div.box img {
width:100px;
height:100px;
border:1px solid;
display:inline;
}
This div tag basically re-sizes my image. My HTML file has the following:
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript">
function doMove(){
//move object
}
</script>
</head>
<body>
<h1>JavaScript Animation</h1>
<div class="box">
<img src="dp.png"/>
</div>
I want to be able to move this box to the left once doMove() is called. How do i refer to my DIV tag in my stylesheet in javascript?

Assuming that you want only the div with the class-name of box:
var divs = document.getElementsByTagName('div');
var divsNum = divs.length;
for (i=0; i<divsNum; i++){
if (divs[i].className == 'box'){
divs[i].style.marginLeft = '-100px';
}
}
JS Fiddle demo.

If you're just trying to move that one div, the easiest thing would be to assign an id to that div:
<div id="box1" class="box>
And then to reference that div in your javascript, you would do:
var box1 = document.getElementById("box1");

<div id="yourDiv" class="box">
<img src="dp.png"/>
</div>
function doMove(){
var yourDiv = document.getElementById("yourDiv");
}

JS: Hiding DIV based on another DIVs content

I am looking to hide a number of DIVs based upon the specific text of another DIV. My Javascript (below) isn't working.
The HTML:
<div id="LEGEND">abAB</div>
<div id="small-a"></div>
<div id="small-b"></div>
<div id="big-a"></div>
<div id="big-b"></div>
If the LEGEND DIV contains the text a, then I want it to show only DIV small-a.
If the LEGEND DIV contains the text bA, then I want it to show only DIV small-b and big-a.
The Javascript:
<script>
window.onload = function ShowHide{
if (document.getElementById('LEGEND').indexOf("a") > 0){
document.getElementById('small-a').style.display = 'block';}
if (document.getElementById('LEGEND').indexOf("b") > 0){
document.getElementById('small-b').style.display = 'block';}
if (document.getElementById('LEGEND').indexOf("A") > 0){
document.getElementById('big-a').style.display = 'block';}
if (document.getElementById('LEGEND').indexOf("a") > 0){
document.getElementById('big-b').style.display = 'block';}
</script>

You are forgetting a couple of things.
A function declaration should be like this
function functionName(args) {
}
You have to hide the divs using style.display = "none"
Example:
<div id="LEGEND">abB</div>
<div id="small-a" style="display: none;">This is small-a</div>
<div id="small-b" style="display: none;">This is small-b</div>
<div id="big-a" style="display: none;">This is big-a</div>
<div id="big-b" style="display: none;">This is big-b</div>
<script>
function showElement(id) {
document.getElementById(id).style.display = "block";
}
window.onload = function ShowHide() {
var legend = document.getElementById("LEGEND").innerHTML;
if(legend.indexOf("a") != -1) showElement("small-a");
if(legend.indexOf("b") != -1) showElement("small-b");
if(legend.indexOf("A") != -1) showElement("big-a");
if(legend.indexOf("B") != -1) showElement("big-b");
}
</script>

The problem is that your code changes the other div elements to block-level elements when div is already a block-level element. You need to set them not to display initially using CSS and then reveal them in the JavaScript.
Try this instead:
<div id="LEGEND">abAB</div>
<div id="small-a" style="display: none;"></div>
<div id="small-b" style="display: none;"></div>
<div id="big-a" style="display: none;"></div>
<div id="big-b" style="display: none;"></div>
<script type="text/javascript">
window.onload = function() {
if (document.getElementById('LEGEND').indexOf('a') > 0) {
document.getElementById('small-a').style.display = 'block';
...
// etc.
}
}
</script>

First, try making sure the window.onload is being called:
window.addEventListener('load', ShowHide, false);
function ShowHide()
{...
Second, you should be looking at the InnerHTML of the element:
if (document.getElementById('LEGEND').innerHTML.match("a") == "a"){...
Third, each if statement should also contain an else (replace divName with real div names):
else {
document.getElementById('divName').style.display = 'none'}
Hope that helps!
~md5sum~
EDIT:
Also, I'm not 100% sure on this, but I believe that the syntax:
window.onload = function ShowHide{
will completely fail. I think that the syntax should be:
window.onload = function(){

If me, I will do like this. you dont need to touch HTML part, everything is done in javascript.
you can extend it to CDEFGH...
and you don't need to set <div id="small-X" style="display: none;"> for each tags too. :-)
<body>
<script>
window.onload=function(){
x=document.getElementsByTagName("div");
//first hide everything with small- or big-
for(i in x)
if(/small-|big-/.test(x[i].id))
x[i].style.display="none";
//then turn on each tags based on LEGEND
x= document.getElementById("LEGEND").innerHTML;
for(i=0;i<x.length;i++)
document.getElementById((x[i]<='Z'?'big-':'small-')+x[i].toLowerCase()).style.display='block';
}
</script>
<div id="LEGEND">aAB</div>
<div id="small-a">a</div>
<div id="small-b">b</div>
<div id="big-a">A</div>
<div id="big-b">B</div>
</body>

You need to set the style.display property to none.