Develop Reference

How to scroll Facebook page chat contact list section by javascript?

I am working on a puppteer script to evaluate facebook page chat's contact list section. contact list section's class name is fixed but height varies based on the screen size.
<div class="_24tx" style="height: 143px;">
when I tried to scroll the section by the following javascript code programmatically it didn't work.
document.querySelector('._24tx').scrollTop = document.querySelector('._24tx').scrollHeight
Here are the things I tried to scroll. But the section doesn't scroll.
Here is the html code of this section
<div class="_24tx" style="height: 143px;">
<div style="position: absolute; height: 80px; width: 100%; pointer-events: auto; transform: translate(0px, 0px);">
<div class="_4k8w _8gcz _75ux _5_n1 _284c _5m10" role="presentation">
<div class="_6yv6 clearfix _ikh">
<div class="_11eh _4bl7">
<div class="_5m0- _5m10" style="width: 40px; height: 40px;"><img class="_1-3q img" height="40"
src="https://scontent.fdac6-1.fna.fbcdn.net/v/t1.0-1/p100x100/80994426_155703309073913_5851419077058232320_o.jpg?_nc_cat=108&_nc_sid=7206a8&_nc_eui2=AeF9hYSwS5n7sfQ6UXVP6oNA1WrvDxpHbcPVau8PGkdtw0zvRFSJU0BwcRn-PqdKW_4&_nc_ohc=imbT4oyNr9sAX-T-FeN&_nc_ht=scontent.fdac6-1.fna&_nc_tp=6&oh=f122e376389993a39af8755993a1d10d&oe=5F3DE7AE"
width="40" alt="">
<div class="_5m17">
<div class="_5m18"></div>
</div>
</div>
</div>
<div class="_4bl9">
<div class="_284g _4bl9">
<div class="_4k8x">
<div class="_4ik4 _4ik5" style="line-height: 18px; height: 18px; -webkit-line-clamp: 1;">
<span>Tiffany Hwang</span></div>
</div>
<div class="_4k8y">
<div class="_4ik4 _4ik5" style="line-height: 18px; height: 18px; -webkit-line-clamp: 1;">
<span><span>Hello</span></span></div>
</div>
</div>
<div class="_11ei _4bl7">
<div class="">
<div class="_4ugl">
<div class="_5hhj"><span class="accessible_elem">Today</span><abbr aria-hidden="true"
class="timestamp" title="Today">8:31 PM</abbr></div>
</div>
<div class="_4a51" role="grid" tabindex="-1"><a href="#">
<div data-tooltip-content="Move to Done" data-hover="tooltip"
data-tooltip-position="right" class="_4ocz _2x0y" data-tooltip-delay="2000">
<div class="_18am"></div>
</div>
</a><a href="#">
<div data-tooltip-content="Mark as Follow Up" data-hover="tooltip"
data-tooltip-position="right" class="_4ocz _63kh" data-tooltip-delay="2000">
<div class="_63ki"></div>
</div>
</a></div>
</div>
</div>
<div direction="left" class="clearfix">
<div class="_ohe lfloat"></div>
<div class="">
<div class="_6yv4">
<div class="_3qn7 _61-0 _2fyi _3qng">
<div class="_6yv3" data-tooltip-content="ad_id.6161496302357" data-hover="tooltip">
<div class="_ke0 _4-u2 _4-u8"
style="background-color: rgb(114, 167, 55); border: none;"></div>
ad_id.616...
</div>
</div>
<div class="_3qn7 _61-0 _2fyi _3qng">
<div class="_6yv3" data-tooltip-content="ad_id.6182848562757" data-hover="tooltip">
<div class="_ke0 _4-u2 _4-u8"
style="background-color: rgb(251, 146, 64); border: none;"></div>
ad_id.618...
</div>
</div>
<div class="_6yv3">+2 more</div>
<div class="_7136"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="position: absolute; height: 80px; width: 100%; pointer-events: auto; transform: translate(0px, 80px);">
<div class="_4k8w _8gcz _75ux _5_n1 _284c _5m10" role="presentation">
<div class="_6yv6 clearfix _ikh">
<div class="_11eh _4bl7">
<div class="_5m0- _5m10" style="width: 40px; height: 40px;"><img class="_1-3q img" height="40"
src="https://scontent.fdac6-1.fna.fbcdn.net/v/t1.0-1/p100x100/106221023_280175709922712_3201346937707756688_n.jpg?_nc_cat=104&_nc_sid=7206a8&_nc_eui2=AeHJJCuxGcY8uiLUfZlrjzW1rW1uRGedHyytbW5EZ50fLGK3GT0w7vRgfLB7cHKGNEY&_nc_ohc=hciXweYdgVgAX98T_6v&_nc_ht=scontent.fdac6-1.fna&_nc_tp=6&oh=0dc232174a7e0620724bd755e3b7d2b4&oe=5F3B87FC"
width="40" alt="">
<div class="_5m17">
<div class="_5m18"></div>
</div>
</div>
</div>
<div class="_4bl9">
<div class="_284g _4bl9">
<div class="_4k8x">
<div class="_4ik4 _4ik5" style="line-height: 18px; height: 18px; -webkit-line-clamp: 1;">
<span>Farzana Oni</span></div>
</div>
<div class="_4k8y">
<div class="_4ik4 _4ik5" style="line-height: 18px; height: 18px; -webkit-line-clamp: 1;">
<span><span>Hi</span></span></div>
</div>
</div>
<div class="_11ei _4bl7">
<div class="">
<div class="_4ugl">
<div class="_5hhj"><span class="accessible_elem">Today</span><abbr aria-hidden="true"
class="timestamp" title="Today">8:31 PM</abbr></div>
</div>
<div class="_4a51" role="grid" tabindex="-1"><a href="#">
<div data-tooltip-content="Move to Done" data-hover="tooltip"
data-tooltip-position="right" class="_4ocz _2x0y" data-tooltip-delay="2000">
<div class="_18am"></div>
</div>
</a><a href="#">
<div data-tooltip-content="Mark as Follow Up" data-hover="tooltip"
data-tooltip-position="right" class="_4ocz _63kh" data-tooltip-delay="2000">
<div class="_63ki"></div>
</div>
</a></div>
</div>
</div>
<div direction="left" class="clearfix">
<div class="_ohe lfloat"></div>
<div class="">
<div class="_6yv4">
<div class="_3qn7 _61-0 _2fyi _3qng">
<div class="_6yv3" data-tooltip-content="ad_id.6195306188957" data-hover="tooltip">
<div class="_ke0 _4-u2 _4-u8"
style="background-color: rgb(251, 146, 64); border: none;"></div>
ad_id.619...
</div>
</div>
<div class="_3qn7 _61-0 _2fyi _3qng">
<div class="_6yv3" data-tooltip-content="messenger_ads" data-hover="tooltip">
<div class="_ke0 _4-u2 _4-u8"
style="background-color: rgb(114, 167, 55); border: none;"></div>
messenger...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="_5-dk">
<div class="_1t0r _1t0s _4jdr" tabindex="0" style="top: 0px; height: 143px; z-index: 99;">
<div class="_1t0w _1t0z _1t0_" style="height: 22px; transform: translate(0px, 4px);"></div>
</div>
</div>
</div>
How to scroll this section? Thanks in advance.

Element.scrollIntoView does the job. It has an optional block parameter which can be set to either start, center, end or nearest. The scroll to the bottom of an element { block: 'end' } should be used:
await page.evaluate(() => {
document.querySelector('._24tx').scrollIntoView({ block: 'end' }));
});

malihu custom scrollbar puts <div class='mCSB_draggerRail'></div> in wrong place on electron

malihu custom scrollbar puts <div class='mCSB_draggerRail'></div> in wrong place on electron.
I looked at the versions in my browser and it works just fine. HTML Code it generates looks something like this:
<div class="servers-container mCustomScrollbar _mCS_1" style="overflow: auto;" data-mcs-theme="light-thick">
<div id="mCSB_1" class="mCustomScrollBox mCS-light-thick mCSB_vertical mCSB_inside" style="max-height: none;"
tabindex="0">
<div id="mCSB_1_container" class="mCSB_container" style="position: relative; top: 0px; left: 0px;"
dir="ltr">
<div class="servers">
</div>
</div>
<div id="mCSB_1_scrollbar_vertical"
class="mCSB_scrollTools mCSB_1_scrollbar mCS-light-thick mCSB_scrollTools_vertical"
style="display: block;">
<div class="mCSB_draggerContainer">
<div id="mCSB_1_dragger_vertical" class="mCSB_dragger"
style="position: absolute; min-height: 30px; top: 0px; display: block; height: 372px; max-height: 495px;">
<div class="mCSB_dragger_bar" style="line-height: 30px;"></div>
</div>
<div class="mCSB_draggerRail"></div>
</div>
</div>
</div>
</div>
But in electron itself, it generates inside which leads to funky behaviour...
Here is what it generates in electron itself:
<div class="servers-container mCustomScrollbar _mCS_1" style="overflow: auto;" data-mcs-theme="light-thick">
<div id="mCSB_1" class="mCustomScrollBox mCS-light-thick mCSB_vertical mCSB_inside" style="max-height: none;"
tabindex="0">
<div id="mCSB_1_container" class="mCSB_container" style="position: relative; top: 0px; left: 0px;"
dir="ltr">
<div class="servers">
</div>
</div>
<div id="mCSB_1_scrollbar_vertical"
class="mCSB_scrollTools mCSB_1_scrollbar mCS-light-thick mCSB_scrollTools_vertical"
style="display: block;">
<div class="mCSB_draggerContainer">
<div id="mCSB_1_dragger_vertical" class="mCSB_dragger"
style="position: absolute; min-height: 30px; display: block; height: 77px; max-height: 316px; top: 0px;">
<div class="mCSB_dragger_bar" style="line-height: 30px;"></div>
<div class="mCSB_draggerRail"></div>
</div>
</div>
</div>
</div>
</div>
Here is code which i used to implement this scrollbar:
<script defer src="js/jquery.min.js"></script>
<script defer src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<script defer src="renderer.js"></script>
<script>
const $ = require('jquery');
require("jquery-mousewheel")($);
require("malihu-custom-scrollbar-plugin")($);
(function($){
$(window).load(function(){
$(".horizontalScrollbar").mCustomScrollbar({
scrollButtons:{ enable:false },
horizontalScroll:true,
advanced:{autoExpandHorizontalScroll:true}
});
});
});
</script>
Also it gives Uncaught ReferenceError: jQuery is not defined error any time i run it. I have no idea what is going on pls help.
P.S. If anything is needed to solve this mystery, i'll attach it.

I solved this issue.
Jinixx uploaded a fix for this issue:
malihu-custom-scrollbar-plugin 3.1.7
This issue caused by new jQuery 3.5.x that included some breaking changes. (source)

HTML not transferring to PDF using JSPDF

I am trying to use jspdf to print div element into pdf. However its giving me margin error.I am not sure where I am going wrong. I have added margins but its coming in line bey line and is missing CSS which I have written. As requested I have added the HTML code as well.
Below is the js I have written
margins = {
top: 70,
bottom: 40,
left: 30,
width: 550
};
function genIdCards(){
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.setFontSize(18);
pdf.fromHTML(document.getElementById('id-card'),
margins.left, // x coord
margins.top,
{
// y coord
width: margins.width// max width of content on PDF
},function(dispose) {
pdf.save('Test.pdf');
},
margins);
};
<script src="https://unpkg.com/jspdf#latest/dist/jspdf.min.js"></script>
<button onclick="genIdCards()">Generate PDF</button>
CSS
.id-card {
height: auto;
float: left;
background: #fff;
width: 500px;
margin: 40px;
border: 1px solid #7c0000;
}
.apeejay-school {
height: 97px;
width: 100%;
background: #7c0000;
}
.logo {
width: 20%;
height: auto;
float: left;
text-align: center;
}
.logo img {
margin-top: 8px;
}
.apeejay-school-content {
width: 75%;
height: auto;
float: left;
padding-left: 10px;
text-align: center;
}
below is the html
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
<?php include_once("../header.php"); ?>
</head>
<!-- END HEAD -->
<body class="page-header-fixed page-sidebar-closed-hide-logo page-container-bg-solid page-content-white">
<div class="page-wrapper">
<?php include_once("../navbar.php"); ?>
<!-- BEGIN HEADER & CONTENT DIVIDER -->
<div class="clearfix">
</div>
<!-- END HEADER & CONTENT DIVIDER -->
<!-- BEGIN CONTAINER -->
<div class="page-container">
<?php include_once("../side_bar.php"); ?>
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
<!-- BEGIN CONTENT BODY -->
<div class="page-content">
<div class="page-bar">
<ul class="page-breadcrumb">
<li>
Student Management
<i class="fa fa-circle"></i>
</li>
<li>
<span>ID Cards</span>
</li>
</ul>
</div>
<?php include_once("../lcode.php");?>
<br><br>
<div class="row">
<div class="col-sm-3">
<label> Academic Year*</label>
<select id="acadyear" name="acadyr" class="form-control">
<option value="" selected="selected">--Please select--</option>
<?php fetch_acad_yr($conn);
?>
</select>
</div>
<div class="col-sm-3">
<label> Class</label>
<select id="acadclass" name="cclass" class="form-control">
<option value="" selected="selected">--Please select--</option>
<?php fetch_class($conn);
?>
</select>
</div>
<div class="col-sm-3">
<label>Section</label>
<select id="section" name="csec" class="form-control">
<option value="" selected="selected">--Please select--</option>
<?php fetch_section($conn);
?>
</select>
</div>
<div class="col-sm-3">
<button id="liststudents" type="submit" class="btn btn-primary" name="process" style="margin-top: 6%;"><span class="glyphicon glyphicon-ok"></span> Display List</button>
</div>
</div>
<br>
<button id="genId" type="submit" class="btn btn-success" onclick="genIdCards()"><span class="glyphicon glyphicon-ok"></span> Generate Id Cards</button>
<br><br><br>
<div class="row">
<div class="col-lg-6 col-xs-12 col-sm-12">
<div class="portlet light">
<div class="table-responsive">
<table id="liststu" class="table table-condensed table-hover">
<thead>
<tr>
<th><input type="checkbox"></th>
<th>Student ID</th>
<th>Name</th>
<th>Class and Section</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-6 col-xs-12 col-sm-12">
<div id="id-card" class="id-card">
<div class="apeejay-school">
<div class="logo"><img src="logo.png" alt="apeejay School"></div>
<div class="apeejay-school-content">
<div class="apeejay-school-txt">
Apeejay School
</div>
<div class="school-location text-center">
college Road , Charkhi Dadri-127306
</div>
<div class="ph-fax text-center">Ph.:01250-222172, Fax : 01250-225172</div>
<div class="email-apeejay-school text-center">Email : skool.ms.chkd#ap.edu</div>
</div>
</div>
<div class="clearfix"></div>
<div class="student-information">
<div class="student-details">
<div name="idName" class="name">Atul Kumar</div>
<div class="student-details-txt">
<div class="category">F / Name :</div>
<div name="idFname" class="category-detail">O P Sharma</div>
</div>
<div class="student-details-txt">
<div class="category">Admin . No.:</div>
<div name="idAno" class="category-detail">001</div>
</div>
<div class="student-details-txt">
<div class="category">Class :</div>
<div name="idCls" class="category-detail"> VI</div>
</div>
<div class="student-details-txt">
<div class="category">House :</div>
<div name="idHouse" class="category-detail">Nayak</div>
</div>
<div class="student-details-txt">
<div class="category">Address :</div>
<div name="idAdd" class="category-detail">25/2 , Krishana Colony, <br>Bhiwani</div>
</div>
<div class="student-details-txt">
<div class="category">Phone No :</div>
<div name="idPhnum" class="category-detail">XXXXXXXXXXXXXXX </div>
</div>
</div>
<div class="student-bio">
<div name="idSession" class="session">2009-2010</div>
<div class="student-pic"><img id="<?php echo ASSETIMG_PATH ?>" class="student-pic" name="stuimg" alt="Student"></div>
<div class="sinature"></div>
<div class="principal">Principal Sign</div>
</div>
</div>
</div>
<!--
<div class="portlet light">
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
</div>
-->
</div>
</div>
</div>
</div>
<!-- END QUICK SIDEBAR -->
</div>
</div>
<!-- END CONTAINER -->
<?php include_once("../footer_text.php"); ?>
</div>
<div id="idhtml">
</div>
<div class="quick-nav-overlay"></div>
<?php include_once("../footer.php"); ?>
<script type="text/javascript" src="<?=ASSET_PATH?>assets/staff_js/validation.js"></script>
<script type="text/javascript" src="<?=ASSET_PATH?>assets/staff_js/stumgmt/jspdf.min.js"></script>
<script type="text/javascript" src="<?=ASSET_PATH?>assets/staff_js/stumgmt/icard.js"></script>
</body>
</html>

Move out the pdf.save() from function(dispose){}, below is the working one
margins = {
top: 70,
bottom: 40,
left: 30,
width: 550
};
function genIdCards() {
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.setFontSize(18);
pdf.fromHTML(document.getElementById('id-card'),
margins.left, // x coord
margins.top, {
// y coord
width: margins.width // max width of content on PDF
},
function(dispose) {
pdf.save('Test.pdf');
},
margins);
};
#id-card {
height: auto;
float: left;
background: #fff;
width: 500px;
margin: 40px;
border: 1px solid #7c0000;
}
.apeejay-school {
height: 97px;
width: 100%;
background: #7c0000;
}
.logo {
width: 20%;
height: auto;
float: left;
text-align: center;
}
.logo img {
margin-top: 8px;
}
.apeejay-school-content {
width: 75%;
height: auto;
float: left;
padding-left: 10px;
text-align: center;
}
<script src="https://unpkg.com/jspdf#latest/dist/jspdf.min.js"></script>
<div id='id-card'>
<div class="logo">
<img src="test.jpg">
</div>
<div class=".apeejay-school">
<div class="apeejay-school-content">
Some content for testSome content for testSome content for testSome content for testSome content for testSome content for testSome content for test
</div>
</div>
</div>
<button onclick="genIdCards()">Generate PDF</button>

I wrote for you the working solution. You do not have to change the position of pdf.save('Test.pdf');
var margins =
{
top: 70,
left: 30,
right: 30,
bottom: 40,
width: 550
};
function genIdCards()
{
var pdf = new jsPDF('p', 'pt', 'a4');
//pdf.setFontSize(18);
pdf.fromHTML(document.getElementById('idhtml'),
margins.left, // x coord
margins.top,
{
// y coord
width: margins.width // max width of content on PDF
},
function(dispose)
{
//headerFooterFormatting(pdf, pdf.internal.getNumberOfPages());
pdf.save('Test.pdf');
},
margins
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js" crossorigin="anonymous"></script>
<ul id="idhtml">
<li>Some text 1</li>
<li>Some text 2</li>
<li>Some text 3</li>
</ul>
<button onclick="genIdCards()">Generate PDF</button>
Edit:
After your question changing I have tried to find new solution for you. Unfortunatelly jsPDF does not support the CSS. Only simple HTML will be supported. But I wrote the new solution for you without CSS:
Please execute this snippet on codepen.io and see the PDF.

why Html form is not displaying over image

I have designed one form below the image. Now, I want to display full responsive image in a background of the form.
I tried to code but the image is displaying inside the form rather than displaying a form on full width and height image.
Where is my mistake?
HTML
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 form-box">
<div class="formhold">
<form role="form" action="" method="post" class="f1" >
<h3>Fill in the form to get Flight</h3>
<div class="f1-steps">
<div class="f1-progress">
<div class="f1-progress-line" data-now-value="16.66" data-number-of-steps="3" style="width: 16.66%;"></div>
</div>
<div class="f1-step active">
<div class="f1-step-icon"><i class="fa fa-user"></i></div>
<p>plan</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-key"></i></div>
<p>schedule</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>people</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>about</p>
</div>
</div>
<fieldset>
<h4>I want to go:</h4>
<div class="form-group">
<label class="sr-only" for="f1-first-name">From</label>
<input type="text" name="f1-first-name" placeholder="From..." class="f1-first-name form-control" id="f1-first-name">
</div>
<div class="form-group">
<label class="sr-only" for="f1-last-name">To</label>
<input type="text" name="f1-last-name" placeholder="To..." class="f1-last-name form-control" id="f1-last-name">
</div>
<div class="f1-buttons">
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
</form>
</div>
</div>
CSS
.formhold {
background: url(images/334.jpg);
background-size: cover;
}
form {
display: block;
margin: 0 auto;
}

You almost have the right idea.
I drew up a really quick code-pen mock up you can take a look at:
http://codepen.io/zsawaf/pen/vKRLAP
In summary your mistake was that you needed another container outside of the bootstrap columns that spans the entire page and holds a background image.
HTML:
<div class="container-fluid cover-img">
<div class="row">
<!-- whatever you want your form container to span -->
<div class="col-xs-offset-3 col-xs-6">
<div class="form-container">
<form>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</form>
</div>
</div>
</div>
</div>
SCSS:
.cover-img {
background-image: url(http://previews.123rf.com/images/9nong/9nong1404/9nong140400110/27534018-wood-chip-and-saw-dust-background-compressed-Stock-Photo.jpg);
background-position: center;
background-size: cover;
width: 100vw;
height: 100vh;
}
.form-container {
margin-top: 40px;
padding: 20px;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 5px;
form {
margin: 20px 0;
input {
margin: 5px 0;
width: 100%;
height: 40px;
}
}
}

Like Sinan said, you need to give the form a width and height to match the image size.
I think you can take Sinan's code and combine it with this to expand the form's width and height to match the image size.
Let's say your image size is 1024x768, then:
form {
display: block;
margin: 0 auto;
width: 1024px;
height:768px;
}

You can do it like:
.formhold {
width: 100%;
height: 100%;
opacity: 1;
visibility: inherit;
background-image: url(images/334.jpg)
background-color: rgba(0, 0, 0, 0);
background-size: inherit;
background-position: 50% 50%;
background-repeat: no-repeat;
z-index: 9999;
}

So i'm not sure if that worked for you but the last example was. Adding a wrapper div around the form with the container-fluid class and applying the background to that:
.wrapper {
background: url(images/334.jpg) no-repeat;
background-position: top center;
background-size: 100% auto;
}
And the HTML:
<div class="wrapper container-fluid">
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 form-box">
<div class="formhold">
<form role="form" action="" method="post" class="f1" >
<h3>Fill in the form to get Flight</h3>
<div class="f1-steps">
<div class="f1-progress">
<div class="f1-progress-line" data-now-value="16.66" data-number-of-steps="3" style="width: 16.66%;"></div>
</div>
<div class="f1-step active">
<div class="f1-step-icon"><i class="fa fa-user"></i></div>
<p>plan</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-key"></i></div>
<p>schedule</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>people</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>about</p>
</div>
</div>
<fieldset>
<h4>I want to go:</h4>
<div class="form-group">
<label class="sr-only" for="f1-first-name">From</label>
<input type="text" name="f1-first-name" placeholder="From..." class="f1-first-name form-control" id="f1-first-name">
</div>
</div>
Here is the link to the latest jsFiddle.

With Firebug i am able to see HTML<Div>section inside the parent, when i use Selenium to fetch the html source based <div id>, i cannot see the child

Using Firebug i am able to see the HTML section inside the parent ,
<div id="tabstop_1_ElementForTabStop" class="treeContainer" style="visibility: visible; height: 100%; overflow: auto;" tabindex="0">
<div style="width: 0px; height: 0px; overflow: hidden; position: absolute; z-index: 1;">
<div id="tree1462947337992_children">
<div id="tree1462947337992$virtual_root" class="treeNode">
<div id="tree1462947337992$virtual_root_children" class="treeChildContainer" style="margin-left: 0px; display: block;">
<div id="tree1462947337992$/users/npatel" class="treeNode" style="display: block;">
<div id="tree1462947337992$/shared" class="treeNode" style="display: block;">
<span class="masterTreeLine treeLine" style="display: block;">
<div id="tree1462947337992$/shared_children" class="treeChildContainer" style="display: block;">
<div id="tree1462947337992$/shared/Components" class="treeNode">
<div id="tree1462947337992$/shared/Sales Home" class="treeNode">
<div id="tree1462947337992$/shared/Sample Lite" class="treeNode">
<div id="tree1462947337992$/shared/Skill Portal" class="treeNode">
<div id="tree1462947337992$/shared/Trainings & Skills" class="treeNode">
</div>
</div>
</div>
</div>
</div>
</div>
but when i use Selenium using Java to fetch the html source based on the parent , i cannot see the child section of the root div
Here is my selenium code snippet:
WebElement ele = driver.findElement(By.id("tabstop_1_ElementForTabStop"));
System.out.println(ele.getAttribute("innerHTML"));
Thread.sleep(4000);
String x = (String) jse.executeScript("return arguments[0].innerHTML", ele);
String div_id = x.substring(x.indexOf("id=\"tree") + 4, x.indexOf("_children\""));
System.out.println(div_id);
ele = driver.findElement(By.id(div_id + "$/shared_children"));
System.out.println(ele.getAttribute("textContent"));
System.out.println(jse.executeScript("return arguments[0].textContent", ele));
Output of the above code gives this
Single Select Tree. . Currently selected values are , Folder. My Folders. , , The cursor node is , , Available commands. Use the up and down arrow keys to move the node cursor. Use the right arrow to expand a subtree. Use the left arrow to close an expanded subtree. Use spacebar and enterkey to select values. Use home and end keys to move to the first or last node. My FoldersShared Folders
tree1462948179598
The Complete html source as extracted from firebug is below
<!DOCTYPE html>
<html lang="en" dir="ltr" style="visibility: visible;">
<head>
<body class="masterOBIEE HTMLBody">
<div class="HeaderContainer">
<a id="idSkipContentLink" class="HeaderSkipLink" tabindex="-1" href="javascript:saw.header.skipToContent()">Skip to content</a>
<table class="masterBrandingArea HeaderTopBar" cellspacing="0" cellpadding="0" border="0" role="presentation">
<div class="HeaderBarSeparator"></div>
<table class="masterGlobalLayer HeaderSecondBar HeaderSecondBarPadding" cellspacing="0" cellpadding="0" border="0" role="presentation">
<tbody>
<tr>
<td class="HeaderTitleBarCell">
<td class="HeaderNavBarCell">
<div align="right">
<table cellspacing="0" cellpadding="0" border="0" role="presentation">
<tbody>
<tr>
<td class="HeaderAlerts">
<td class="HeaderNavMenubarCell">
<div class="HeaderMenubar" style="padding-right: 0px;">
<table cellspacing="0" cellpadding="0" border="0" role="presentation">
<tbody>
<tr>
<td title="Home">
<td>
<td>
<td>
<td title="Favorites">
<td>
<td title="Dashboards">
<span id="dashboard" class="masterMenuButton masterMenuButtonGlobal uberBarTextMenuButtonSpan" aria-haspopup="true" role="button" aria-label="Dashboard drop down menu" tabindex="0">
<span class="HeaderMenuBarText HeaderMenuNavBarText" role="presentation">
<span role="presentation">Dashboards</span>
</span>
<span class="HeaderMenuBarDropdown" role="presentation">
</span>
</td>
<td>
<td title="New">
<td>
<td title="Open">
<td>
<td>
<td title="npatel">
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td class="PageOuterBodyTopRightTd">
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
< form style = "position: absolute; top: -1000px; display:none;" >
< script src = "/analytics/res/v-0YH2UYTNo3k/b_mozilla/common/componentheader.js"
type = "text/javascript" >
< span id = "sawruler"
style = "display:none;visibility:hidden;white-space:nowrap;" > < /span>
<div class="masterGlobalLayer ComponentHeader ComponentHeaderNoSecondaryTabbar">
<div id="idSummarySectionDiv" class="masterPrimaryLayer masterComponentHeaderSummaryDiv ComponentHeaderSummaryDiv">
<table class="masterPrimaryLayer ComponentHeaderTable ComponentHeaderTableEmptyUberbar ComponentHeaderTableEmptyTabBar ComponentHeaderTableSummary" cellspacing="0" cellpadding="0" border="0">
<table class="masterPrimaryLayer PrimaryTabTable" cellspacing="0" cellpadding="0" border="0" style="table-layout:fixed;width:100%">
<tbody>
<tr>
<td class="PrimaryTabbarLeftBorder" style="width:4px"></td >
< td >
< div id = "PageContentOuterDiv"
class = "masterSecondaryLayer PageContentOuterDiv PageContentBodyDiv CatalogPageContentOuterDiv"
style = "height: 237px;" >
< table cellspacing = "0"
cellpadding = "0"
border = "0"
style = "width:100%;table-layout:fixed;" >
< tbody >
< tr >
< td class = "SecondaryTabbarLeftBorder" > < /td>
<td style="width:100%">
<div id="idCatalog" style="height: 237px;">
<div id="idCatalogSplitter" class="SplitterContainer" style="overflow: hidden; visibility: inherit; width: 1326px; height: 235px;">
<div class="SplitterContentPane" sizeshare="220px" layouttype="contentPane" style="position: relative; top: 0px; left: 0px; width: 220px; height: 235px;">
<div id="idCatalogFoldersAccordion" class="masterAccordionBottomContentAreaPanel PrimaryAccordion" style="width: 220px; height: 232px;">
<div class="AccordionPane" panename="folders" maintainstate="true" expanded="true" style="display: block;">
<div class="masterAccordionHeader masterAccordionTopHeader AccordionFirstPaneHead" style="width: 218px; position: relative; top: 0px; left: 0px;">
<div class="masterAccordionContentAreaPanel AccordionPaneBody" style="width: 214px; height: 77px; position: relative; top: 0px; left: 0px; padding: 2px;">
<div id="tree1462947337992" style="overflow: hidden; width: 214px; height: 75px;">
<div id="tabstop_1_ElementForTabStop" class="treeContainer" style="visibility: visible; height: 100%; overflow: auto;" tabindex="0">
<div style="width: 0px; height: 0px; overflow: hidden; position: absolute; z-index: 1;">
<div id="tree1462947337992_children">
<div id="tree1462947337992$virtual_root" class="treeNode">
<div id="tree1462947337992$virtual_root_children" class="treeChildContainer" style="margin-left: 0px; display: block;">
<div id="tree1462947337992$/users / npatel " class="
treeNode " style="
display: block;
">
<div id="
tree1462947337992$ / shared " class="
treeNode " style="
display: block;
">
<span class="
masterTreeLine treeLine " style="
display: block;
">
<div id="
tree1462947337992$ / shared_children " class="
treeChildContainer " style="
display: block;
">
<div id="
tree1462947337992$ / shared / Components " class="
treeNode ">
<div id="
tree1462947337992$ / shared / Sales Home " class="
treeNode ">
<div id="
tree1462947337992$ / shared / Sample Lite " class="
treeNode ">
<div id="
tree1462947337992$ / shared / Skill Portal " class="
treeNode ">
<div id="
tree1462947337992$ / shared / Trainings & Skills " class="
treeNode ">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="
overflow: auto;
display: none;
"></div>
<div style="
overflow: auto;
display: none;
"></div>
</div>
</div>
<div class="
AccordionPane " sizeshare="
170px " panename="
tasks " maintainstate="
true " expanded="
true " style="
display: block;
">
</div>
</div>
<div class="
HorizSplitter " collapsenextpane="
" layouttype="
splitter " style="
position: relative;
top: -235px;
left: 220px;
width: 7px;
height: 235px;
">
<div class="
SplitterContentPane " layouttype="
contentPane " style="
position: relative;
top: -470px;
left: 229px;
width: 1097px;
height: 235px;
">
</div>
</div>
</td>
<td class="
SecondaryTabbarRightBorder "></td>
</tr>
</tbody>
</table>
<table cellspacing="
0 " cellpadding="
0 " style="
width: 100 % ;
table - layout: fixed;
">
</div>
</td>
<td class="
PageOuterBodyCenterRight "></td>
</tr>
</tbody>
</table>
<table cellspacing="
0 " cellpadding="
0 " style="
width: 100 % ;
table - layout: fixed;
">
</div>
</body>
</html>
**Please help me on where i am going wrong or i am missing something?
Any lead will be very helpful**
Thanks in advance

I am not 100% sure what you're asking honestly, but I do see what might be causing you some issue if you are expecting innerHTML and textContent to function correctly.
this line:
System.out.println(ele.getAttribute("innerHTML"));
Will almost never print anything because innerHTML is a property, not an attribute. Is it bound ONLY within the browser. Same goes for textContent, it is NOT and attribute, it is a property and is only present in the browser.
If you want the visible text of an element from WebDriver once you have located it, call:
ele.getText()
Which will give you the equivalent of the textContent property. As far as innerHTML, you really just have to execute the script the way you are now by calling executeScript() and using the "magic" arguments[] array to pass in the WebElement, then return the value of innerHTML. I have done this before and had no issue getting the HTML for all children as well.

Some of your HTML is not properly structured,
<script type="text/javascript">
< form style = "position: absolute; top: -1000px; display:none;" >
< script src = "/analytics/res/v-0YH2UYTNo3k/b_mozilla/common/componentheader.js"
type = "text/javascript" >
Once I added closing tags for the opening <script> and <form> tags and changed the above to the HTML below, the ele.getAttribute("innerHTML") instruction returned the inner-html of that element.
<script type="text/javascript"></script>
<form style = "position: absolute; top: -1000px; display:none;"></form>
<script src = "/analytics/res/v-0YH2UYTNo3k/b_mozilla/common/componentheader.js" type = "text/javascript"></script>
Firebug might be more forgiving when it comes to incorrectly structured HTML.