Put inner div scrollable inside of outer div | Senior Full Stack Developer, Coder, C#, Java, Linux, Network, PHP, Cloud

var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);

// Now create and append to iDiv
var innerDiv = document.createElement('div');
innerDiv.className = 'block-2';

// The variable iDiv is still good... Just append to it.
iDiv.appendChild(innerDiv);

1

2

3

4

5

6

7

8

9

10

11

var iDiv = document.createElement('div');

iDiv.id = 'block';

iDiv.className = 'block';

document.getElementsByTagName('body')[0].appendChild(iDiv);

// Now create and append to iDiv

var innerDiv = document.createElement('div');

innerDiv.className = 'block-2';

// The variable iDiv is still good... Just append to it.

iDiv.appendChild(innerDiv);

window.onload = function(){
   var link = "http://www.kutayzorlu.com/"
var iframe = document.createElement('iframe');
iframe.frameBorder=0;
iframe.width="300px";
iframe.height="250px";
iframe.id="randomid";
iframe.setAttribute("src", link);
document.getElementById("ad54").appendChild(iframe);
}

1

2

3

4

5

6

7

8

9

10

window.onload = function(){

var link = "http://www.kutayzorlu.com/"

var iframe = document.createElement('iframe');

iframe.frameBorder=0;

iframe.width="300px";

iframe.height="250px";

iframe.id="randomid";

iframe.setAttribute("src", link);

document.getElementById("ad54").appendChild(iframe);

}

<input type="button" value="Show" onclick="showDiv();">
<input type="button" value="Hide" onclick="hideDiv();">
<input type="button" value="Set fixed bottom position" onclick="setBottomPos('10px');">
<input type="button" value="Set auto bottom position" onclick="setBottomPos('auto');">

<div id="outer">
	<div class="inner">
		<h4>Search results</h4>
		<table>
			<tr><th>Internal user</th><th>External domain</th><th># in</th><th>Last in</th><th># out</th><th>Last out</th><th>Is member</th></tr>
			<tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>
			<tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>
			<tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>
			<tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>
			<tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>
			<tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>
			<tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>
			<tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>
			<tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>
			<tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>
			<tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>
			<tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>
			<tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>
			<tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>
			<tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>
			<tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>
			<tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>
			<tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>
			<tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>
			<tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>
		</table>
	</div>
</div>
#outer {
	display: block;
	position: fixed;
	left: 1px;
	top: 40px;
	width: auto;
	right: auto;
	bottom: auto;
	z-index: 1000;
	border: 2px solid silver;
    height: 100%;
}
#outer .inner {
	background-color: white;
	border: 1px solid black;
	padding: 2px;
	overflow-y: scroll;
    height: 100%;     
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}
table th, table td {
	padding: 1px 1px 1px 5px;
}
table th:first-child, table td:first-child {
	padding: 1px 1px 1px 1px;
}

function getDiv()
{
	return document.getElementById('outer');
}
function showDiv()
{
	getDiv().style.display='block';
}
function hideDiv()
{
	getDiv().style.display='none';
}
function setBottomPos(newPos)
{
	getDiv().style.bottom=newPos;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

<h4>Search results</h4>

<table>

<tr><th>Internal user</th><th>External domain</th><th># in</th><th>Last in</th><th># out</th><th>Last out</th><th>Is member</th></tr>

<tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>

</table>

</div>

#outer {

display: block;

position: fixed;

left: 1px;

top: 40px;

width: auto;

right: auto;

bottom: auto;

z-index: 1000;

border: 2px solid silver;

height: 100%;

}

#outer .inner {

background-color: white;

border: 1px solid black;

padding: 2px;

overflow-y: scroll;

height: 100%;

}

table {

border-collapse: collapse;

border-spacing: 0;

width: 100%;

}

table th, table td {

padding: 1px 1px 1px 5px;

}

table th:first-child, table td:first-child {

padding: 1px 1px 1px 1px;

}

function getDiv()

{

return document.getElementById('outer');

}

function showDiv()

{

getDiv().style.display='block';

}

function hideDiv()

{

getDiv().style.display='none';

}

function setBottomPos(newPos)

{

getDiv().style.bottom=newPos;

}

    function closer(){
        var el = document.getElementById("window0");
        el.style.display = "none";
       // alert("closed");
    }

    function apply() {

        var el = document.getElementById("window0");
        el.style.display = "";
        $('#window0').jqxWindow({height: 'auto', width: 300, position: {x: offset.left + 50, y: offset.top + 50}});
        //createElements();
        //alert("runned ");
    }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

function closer(){

var el = document.getElementById("window0");

el.style.display = "none";

// alert("closed");

}

function apply() {

var el = document.getElementById("window0");

el.style.display = "";

$('#window0').jqxWindow({height: 'auto', width: 300, position: {x: offset.left + 50, y: offset.top + 50}});

//createElements();

//alert("runned ");

}

# Code example 1
$('.popup').click(function (event) {
    event.preventDefault();
    window.open($(this).attr("href"), "popupWindow", 
         "width=600,height=600,scrollbars=yes");
});


# Other part of the Code 
<a href="http://kutayzorlu.com" class="popup">Coder web site</a>

1

2

3

4

5

6

7

8

9

10

# Code example 1

$('.popup').click(function (event) {

event.preventDefault();

window.open($(this).attr("href"), "popupWindow",

"width=600,height=600,scrollbars=yes");

});

# Other part of the Code

<a href="http://kutayzorlu.com" class="popup">Coder web site</a>

<script type="text/javascript">

    function openEditProfile_editUser_kutayzorlu.com() 
    {
        var frm = document.getElementById('result');
        frm.src = 'editUser_kutayzorlu.com.jsp';
    }

</script>

onclick="openEditProfile_editUser_kutayzorlu.com()"

1

2

3

4

5

6

7

8

9

10

11

function openEditProfile_editUser_kutayzorlu.com()

{

var frm = document.getElementById('result');

frm.src = 'editUser_kutayzorlu.com.jsp';

}

</script>

onclick="openEditProfile_editUser_kutayzorlu.com()"

document.getElementById('kutayzorlu_com').style.display='none'; 

>For displaying

document.getElementById('kutayzorlu_com').style.display='block'; 

>or 

document.getElementById('kutayzorlu_com').style.display='';

1

2

3

4

5

6

7

8

9

document.getElementById('kutayzorlu_com').style.display='none';

>For displaying

document.getElementById('kutayzorlu_com').style.display='block';

>or

document.getElementById('kutayzorlu_com').style.display='';

<html>
    <head>
        <title></title>
 
      <script type="text/javascript" src="jquery/1.2.6/jquery.js">
      </script>
 
        <script type="text/javascript">
            var windowSizeArray = [ "width=200,height=200",
                                    "width=300,height=400,
                                     scrollbars=yes" ];
 
            $(document).ready(function(){
                $('.newWindow').click(function (event){
 
                    var url = $(this).attr("href");
                    var windowName = "popUp";//$(this).attr("name");
                    var windowSize = windowSizeArray[$(this).attr("rel")];
 
                    window.open(url, windowName, windowSize);
 
                    event.preventDefault();
 
                });
            });
        </script>
    </head>
 
    <body>
        <a href="http://www.kutayzorlu.com/" rel="0" class="newWindow" >Open kzcom click me</a>
        <a href="http://www.kutayzorlu.com/ip/" rel="1" class="newWindow" >click me kzcom for ip</a>
    </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

<html>

<head>

</script>

var windowSizeArray = [ "width=200,height=200",

"width=300,height=400,

scrollbars=yes" ];

$(document).ready(function(){

$('.newWindow').click(function (event){

var url = $(this).attr("href");

var windowName = "popUp";//$(this).attr("name");

var windowSize = windowSizeArray[$(this).attr("rel")];

window.open(url, windowName, windowSize);

event.preventDefault();

});

</script>

</head>

<body>

<a href="http://www.kutayzorlu.com/" rel="0" class="newWindow" >Open kzcom click me</a>

<a href="http://www.kutayzorlu.com/ip/" rel="1" class="newWindow" >click me kzcom for ip</a>

</body>

</html>

<HTML>
<HEAD>
  <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript">
    function showDuck(){
      $('#id_kutay').show();
      $('#id_zorlu').show;
    }

    function hideDuck(){
      $('#id_kutay').hide();
    }

  </script>
</HEAD>
    <BODY>
        <div style="display:block;position:absolute;top:20px;left:20px;z-index:997;">
            <iframe name="UBERFRAME" src="index2.html" 
frameborder="0" allowtransparency="yes" scrolling="no" 
style="width:800; height:480; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
        </div>
        <div id="id_kutay" name="id_kutay" style="display:none;position:absolute;top:20px;left:20px;z-index:998;">
            <iframe id="overlayframe" name="OVERLAY" src="testframe.html" frameborder="0" allowtransparency="yes" scrolling="no" style="width:800px; height:428px; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
        </div>

    </BODY>
</HTML>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<HTML>

<HEAD>

function showDuck(){

$('#id_kutay').show();

$('#id_zorlu').show;

}

function hideDuck(){

$('#id_kutay').hide();

}

</script>

</HEAD>

<BODY>

frameborder="0" allowtransparency="yes" scrolling="no"

style="width:800; height:480; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>

</div>

</div>

</BODY>

</HTML>

$(document).ready(function(){
 
  $('a[href=http://www.google.com]').click(function(){
    window.open(this.href);
    return false;
  });
});

1

2

3

4

5

6

7

$(document).ready(function(){

$('a[href=http://www.google.com]').click(function(){

window.open(this.href);

return false;

});

$(function() {
  // call the tablesorter plugin
  $("table").tablesorter({
      selectorSort : 'a'
  });
});

1

2

3

4

5

6

$(function() {

// call the tablesorter plugin

$("table").tablesorter({

selectorSort : 'a'

});

<table class="tablesorter">
  <thead>
    <tr>
      <th><a href="#">Account #</a> aa</th>
      <th><a href="#">First Name</a> bb</th>
      <th><a href="#">Last Name</a> cc</th>
      <th><a href="#">Age</a> dd</th>
      <th><a href="#">Total</a> ee</th>
      <th><a href="#">Discount</a> ff</th>
      <th class="sorter-false"><a href="#">Diff</a> gg</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A43</td>
      <td>Peter</td>
      <td>Parker</td>
      <td>28</td>
      <td>9.99</td>
      <td>20.3%</td>
      <td>+3</td>
    </tr>
  </tbody>
</table>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<thead>

<tr>

<th><a href="#">Account #</a> aa</th>

<th><a href="#">First Name</a> bb</th>

<th><a href="#">Total</a> ee</th>

<th><a href="#">Discount</a> ff</th>

</tr>

</thead>

<tbody>

<tr>

<td>Peter</td>

<td>Parker</td>

</tr>

</tbody>

</table>

<a href="/kutayzorlu" class="terms">Kutay Zorlu</a>
jQuery

$(document).ready(function(){
 
  $('a.terms').click(function(){
    window.open(this.href);
    return false;
  });
 
});

1

2

3

4

5

6

7

8

9

10

11

<a href="/kutayzorlu" class="terms">Kutay Zorlu</a>

jQuery

$(document).ready(function(){

$('a.terms').click(function(){

window.open(this.href);

return false;

});

Example 1 (Append div)

Example 2 (Iframe inside of div)

Example 3 (Put inner div scrollable inside of outer div)

Example 4 ( Open and close Div with Javascript style )

Example 5 ( Open Popup with JS)

Example 6 ( Open page inside of DIV )

Example 7 ( Change Style of DIV by JS show and hide a DIV)

Example 8 ( Open page inside of DIV )

Example 9 ( Show or HIDE a dive with javascript )

Example 10 ( Open new window with Attribute of “a” Tag which url is google.com )

Example 11 ( JQX Widgets Repository for the Library example JS codes )

Example 12 ( Table sort order library examples )

Example 13 ( Create event for a tag html with jquery, click url an open window js )

Example 14 ( )

Example 15 ( )

Example 16 ( )

Example 17 ( )

Example 18 ( )

Example 19 ( )

Example 20 ( )

Example 15 ( )

Example 14 ( )

Example 15 ( )

Example 14 ( )

Example 15 ( )

Example 14 ( )

Example 15 ( )

Example 14 ( )

Example 15 ( )