using perl CGI jquery iframe , understanding parallel divs and vhost setting , Ribbon



Use this script on your OWN risk :) .. ( but it works )

this is this Vhost required for perl scripting

<VirtualHost *:80>
ServerAdmin webmaster@dummy-host.example.com
DocumentRoot /var/www/html
ServerName site2.example.com
ErrorLog logs/site2.example.com-error_log
CustomLog logs/site2.example.com-access_log common


ScriptAlias /cgi-bin/ "/var/www/cgi-bin/"
<Directory "/var/www/cgi-bin">
        Options +ExecCGI
        AddHandler cgi-script .cgi .pl
</Directory>

</VirtualHost>

-----------------------------------------------------------------------------------------------


#!/usr/bin/perl

use strict;
use warnings;
use Data::Dumper;
use CGI;

my $cgi = new CGI;

my $server_html = '192.168.1.101/test';
my $server = '192.168.1.101/cgi-bin/test.pl';

my %input ;

for my  $key ( $cgi->param() ) {
    $input{$key} = $cgi->param($key);
}

# unhash this for testing
#my %hash_dir_data = (

#            '20-03-2014' => [ 'jenkins_link_20-03-2014-11_21.html','jenkins_link_20-03-2014-11_22.html','jenkins_link_20-03-2014-11_23.html','jenkins_link_20-03-2014-11_24.html'],
#            '21-03-2014' => [ 'jenkins_link_21-03-2014-11_21.html','jenkins_link_21-03-2014-11_22.html','jenkins_link_21-03-2014-11_23.html','jenkins_link_21-03-2014-11_24.html'],
#            '22-03-2014' => [ 'jenkins_link_22-03-2014-11_21.html','jenkins_link_22-03-2014-11_22.html','jenkins_link_22-03-2014-11_23.html','jenkins_link_24-03-2014-11_24.html'],
#            '23-03-2014' => [ 'jenkins_link_23-03-2014-11_21.html','jenkins_link_23-03-2014-11_22.html','jenkins_link_23-03-2014-11_23.html','jenkins_link_23-03-2014-11_24.html'],
#            '24-03-2014' => [ 'jenkins_link_24-03-2014-11_21.html','jenkins_link_24-03-2014-11_22.html','jenkins_link_24-03-2014-11_23.html','jenkins_link_22-03-2014-11_24.html']
#   );


#hash this out for testing
my %hash_dir_data = find_files_data();


html_css_js();



#<span>21-03-2014 </span>
#<a class="Days_list" href="http://www.rapidtables.com/web/tools/linked-page.htm">The Link Text</a>
my $counter = 1;

foreach my $dir ( sort keys %hash_dir_data ) {
   print '<span onclick="return showHide(\''.$counter.'\')" >'.$dir.' </span> ';
   print '<div style="display:none;"  id="Days_list-'. $counter .'"   > ';
   foreach my $Jhtmlfile ( @{$hash_dir_data{$dir}}) {
   #print '<a    style="display:none;" id="Days_list-'. $counter .'"  class="Days_list" href="http://'.$server.'/'.$dir.'/'.$Jhtmlfile .'"> '. $Jhtmlfile .'</a>';
   print '<a  class="Days_list" href="http://'.$server.'?jenkinslink='.$dir.'/'.$Jhtmlfile .'"> '. $Jhtmlfile .'</a>';

    }
   print '</div>';
   $counter++ ;

}

print '</div>';

my $input;


if ( $input{'jenkinslink'} )  {
  html_iframe( $input{'jenkinslink'}, $server_html );

}











sub html_iframe {

my  $jenkinslink = $_[0];

my $server_html = $_[1] ;

print '<div class="myiframedata" >';
#file  FILEAHERE
print '<iframe src="http://'. $server_html .'/'. $jenkinslink.'" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px"  >';
print '</iframe>';
print '</div>';

print '</div>';
}





sub html_css_js {
print "Content-type: text/html\n\n";

print   <<'EOF'
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>
        <script>

function showHide(id) {
   $( '#Days_list-'+id ).toggle("slow");
}

        </script>
        <style>

.ListDown {
    float: left;
    left: 0;
    overflow: auto;
    position: relative;
    width: 24%;
    margin-top:3%;
}

.ListDown span {
 background: -moz-linear-gradient(center top , #003366 5%, #003F7F 100%) repeat scroll 0 0 #003366;
    border-color: #000000;
    border-image: none;
    border-style: solid;
    border-width: 0 0 1px 1px;
    color: #FFFFFF;
    display: block;
    font-family: Arial;
    font-size: 9px;
    font-weight: bold;
    padding: 15px;
    text-align: left;
    width: 187px;
    height: 0px;
}

 a.Days_list:link {
   color: Teal;
   background-color: #FFFFFF;
   text-decoration: none;
   target-new: none;
   display: block;
   /*background: -moz-linear-gradient(center top , #003366 5%, #003F7F 100%) repeat scroll 0 0 #003366;*/
    border-color: #000000;
    border-image: none;
    border-style: solid;
    border-width: 0 0 1px 1px;
    color: #FFFFFF;
    display: block;
    font-family: Arial;
    font-size: 9px;
    font-weight: bold;
    padding: 15px;
    text-align: left;
    width: 187px;
    height: 0px;
   color: #0000FF;
   background-color: #FFFFC0;
   text-decoration: underline;
   target-new: window;

  }


.myiframedata {
    float: left;
    overflow: visible;
    padding: 0;
    position: relative;
    right: 1%;
    width: 58%;
    margin-top:3%;
}
.myiframedata iframe {
    border: 13px solid #FFFFFF;
    float: left;
    height: 110%;
    width: 148%;
    margin-top: -16px;
}

.topbar{
   position:fixed;
   top:0;
   left:0;
   width:100%;
   height:28px;
   background-color:black;
    -webkit-box-shadow: #B3B3B3 2px 2px 2px;
    -moz-box-shadow: #B3B3B3 2px 2px 2px;
    box-shadow: #B3B3B3 2px 2px 2px;
    z-index: 1;

}



         </style>
    </head>
    <body>
<div>
<object   class="topbar" data="http://192.168.1.101/ribbon.html" scrolling=no>
<embed  scrolling="no" src="http://192.168.1.101/ribbon.html" > </embed>
</object>



<div class="ListDown" >


EOF



}








sub find_files_data {

my $datapath = '/var/www/html/test';
my %ret_hash_data ;

opendir( FH,  $datapath) or die "cannot open file ";
my @alldir = readdir FH;
close( FH) ;

foreach my $diri (@alldir) {
  next unless  $diri =~ /\d{2}-\d{2}-\d{4}$/;

   opendir ( FRE, $datapath.'/'.$diri) or die "cannot open file $datapath.$diri  $! " ;
   my @J_htmla_files =  readdir FRE;
   close (FRE);

   foreach my $J_files ( @J_htmla_files ) {
        next unless $J_files =~ m/^.*\.html$/;

        push ( @{$ret_hash_data{$diri}}, $J_files ) ;

   }


}

return %ret_hash_data ;


}

-----------------------------------------------------------------------------------------------------

the iframe html file see FILEAHERE

<html>
<head>



<style>

.CSSTableGenerator {
    border: 0px solid #000000;
    border-radius: 0px;
    box-shadow: 10px 10px 5px #888888;
    margin: 74px;
    padding: 0px;
    width: 84%;
    margin: 11;
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    border-radius: 22px;

}
.CSSTableGenerator table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0px;
    padding: 0;
    width: 100%;
}


.CSSTableGenerator td {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #CCCCCC;
    border-color: #000000;
    border-image: none;
    border-style: solid;
    border-width: 0 1px 1px 0;
    color: #000000;
    font-family: Arial;
    font-size: 10px;
    font-weight: normal;
    padding: 7px;
    text-align: left;
    vertical-align: middle;
    height: 20px;
}


.CSSTableGenerator span {
    -webkit-border-radius: 22px 22px 0px 0px;-moz-border-radius: 22px 22px 0px 0px;border-radius: 22px 22px 0px 0px;
    background: -moz-linear-gradient(center top , #003366 5%, #003F7F 100%) repeat scroll 0 0 #003366;
    border-color: #000000;
    border-image: none;
    border-style: solid;
    border-width: 0 0 1px 1px;
    color: #FFFFFF;
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    display:block;
    padding: 15px;
}


</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script  >

function showHide(id) {
   $( '#tabledata-'+id ).toggle("slow");
}


</script>
</head>
<body>
    <div class="CSSTableGenerator" >
       <span onclick="return showHide('1')" > I am here to ooooooo </span>
                <table   style="display:none;"   id="tabledata-1"  >
                    <tr >
                        <td> Title 1 i am here </td>
                    </tr >
                    <tr>
                        <td >  Row 1 </td>
                    </tr>
                    <tr>
                        <td >  Row 2 </td>
                    </tr>
                    <tr>
                        <td >  Row 2 </td>
                    </tr>
                    <tr>
                        <td >  Row 3 </td>
                    </tr>
                </table>
            </div>
    <div class="CSSTableGenerator" >
       <span onclick="return showHide('2')" > I am here to ooooooo </span>
                <table  style="display:none;" id="tabledata-2"  >
                    <tr>
                        <td> Title 1 </td>
                    </tr>
                    <tr>
                        <td >  Row 1 </td>
                    </tr>
                    <tr>
                        <td >  Row 2 </td>
                    </tr>
                    <tr>
                        <td >  Row 2 </td>
                    </tr>
                    <tr>
                        <td >  Row 3 </td>
                    </tr>
                </table>
            </div>
    <div class="CSSTableGenerator" >
       <span onclick="return showHide('3')"> I am here to ooooooo </span>
                <table  style="display:none;" id="tabledata-3"  >
                    <tr>
                        <td> Title 1 </td>
                    </tr>
                    <tr>
                        <td >  Row 1 </td>
                    </tr>
                    <tr>
                        <td >  Row 2 </td>
                    </tr>
                    <tr>
                        <td >  Row 2 </td>
                    </tr>
                    <tr>
                        <td >  Row 3 </td>
                    </tr>
                </table>
            </div>
</body>
</html>

--------------------------------------------------------------------------------------------------------------------------------------
header navigation bar  ribbon.html

<style>

#menu_wrap {
    list-style-type: none;
    font-size: smaller;
    margin-top: -14px;
}
.button a {
    cursor: pointer;
    float: left;
    font: 700 13px/100% Arial,Helvetica,sans-serif;
    height: 7px;
    min-width: 36px;
    padding: 10px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    font-size: smaller;
}

</style>

<ul id="menu_wrap" class="l_Blue">
    <li class="button"><a href="#">Home</a>
    </li>
    <li class="button"><a href="#">portfolios</a>
    </li>
    <li class="button"><a href="#">Latest Projects</a>
    </li>
    <li class="button"><a href="#">Top Sales</a>
    </li>
    <li class="button"><a href="#">new post</a>
    </li>
    <li class="button"><a href="#">advertise</a>
    </li>
    <li class="button"><a href="#">about us</a>
    </li>
</ul>





--------------------------------------------

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Other Articles

Enter your email address: