Web Development

<div id="tabs">
  <ul>
    <li><a href="#NewRequest">New Request</a></li>
    <li><a href="#ExistingRequest">Existing Request</a></li>
    <li><a href="#RequestDetails">Request Details</a></li>
  </ul>
  ...
  ...
  </div>

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    /* Init DataTables */
$("#example").dataTable( {
	"sProcessing" : true,
"sDom":'T<"clear">',
"sJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": 'T<"clear"><"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>',
    "sAjaxSource" : "userDetails.php?loginName=<?php echo $user; ?>",
    "sAjaxDataProp" : "",
    "sDestroy" : false,
        "sScrollXInner": "110%",
    "fnServerData" : function(sSource, aoData, fnCallback) {
        request = $.ajax({
            "dataType" : "json",
            "type" : "GET",
            "url" : sSource,
            "data" : aoData,
            "success" : fnCallback
        });
    },
         "aoColumns" : [

         { "mDataProp": "RequestID", "sWidth": "50px", sSortable: true,
           "bSearchable": false,
           "bSortable": false,
           "fnRender": function (oObj)
            {
             // oObj.aData[0] returns the RequestID
                return "<a href='viewdetails.php?RequestID="
                                + oObj.aData["RequestID"] + "'> " + oObj.aData["RequestID"] + " </a>";
                        }
                       },
          { mDataProp: "RequestDate",  "sWidth": "100px", sSortable: true },
          { mDataProp: "RequestorFullName",  "sWidth": "150px", sSortable: true },
          { mDataProp: "PrimarySiteContactDisplay",  "sWidth": "250px", sSortable: true },
          { mDataProp: "RequestLocation",  "sWidth": "150px", sSortable: true },
          { mDataProp: "RequestDescription",  "sWidth": "200px", sSortable: true },
          { mDataProp: "RequestStatus",  "sWidth": "100px", sSortable: true },

        ],
      })
$('#cityworks tbody tr').click(function () {
    if ($(this).hasClass('selected')) $(this).removeClass('selected');
    else
    {
        $(this).siblings('.selected').removeClass('selected');
        $(this).addClass('selected');
    }
  });
  $(window).bind('resize', function () {
 oTable.fnAdjustColumnSizing();
 });
   jQuery('.dataTable').wrap('<div class="scrollStyle" />');
   });
</script>

// oObj.aData[0] returns the RequestID
   return "<a href='viewdetails.php?RequestID="
                   + oObj.aData["RequestID"] + "'> " + oObj.aData["RequestID"] + " </a>";

//Reference http://www.jssor.com/development/slider-with-caption.html
//Reference http://www.jssor.com/development/reference-ui-definition.html#captiondefinition
//Reference http://www.jssor.com/development/tool-caption-transition-viewer.html

var _CaptionTransitions = [];
_CaptionTransitions["L"] = { $Duration: 800, $FlyDirection: 1, $Easing: $JssorEasing$.$EaseInCubic };
_CaptionTransitions["R"] = { $Duration: 800, $FlyDirection: 2, $Easing: $JssorEasing$.$EaseInCubic };
_CaptionTransitions["T"] = { $Duration: 800, $FlyDirection: 4, $Easing: $JssorEasing$.$EaseInCubic };
_CaptionTransitions["B"] = { $Duration: 800, $FlyDirection: 8, $Easing: $JssorEasing$.$EaseInCubic };
_CaptionTransitions["TL"] = { $Duration: 800, $FlyDirection: 5, $Easing: $JssorEasing$.$EaseInCubic };
_CaptionTransitions["TR"] = { $Duration: 800, $FlyDirection: 6, $Easing: $JssorEasing$.$EaseInCubic };
_CaptionTransitions["BL"] = { $Duration: 800, $FlyDirection: 9, $Easing: $JssorEasing$.$EaseInCubic };
_CaptionTransitions["BR"] = { $Duration: 800, $FlyDirection: 10, $Easing: $JssorEasing$.$EaseInCubic };

_CaptionTransitions["WAVE|L"] = { $Duration: 1500, $FlyDirection: 5, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseOutWave }, $ScaleVertical: 0.4, $Round: { $Top: 2.5} };
_CaptionTransitions["MCLIP|B"] = { $Duration: 600, $Clip: 8, $Move: true, $Easing: $JssorEasing$.$EaseOutExpo };

var options = {
    $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
    $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
    $FillMode: 4,
    $CaptionSliderOptions:
    {                                                   //[Optional] Options which specifies how to animate caption
        $Class: $JssorCaptionSlider$,                   //[Required] Class to create instance to animate caption
        $CaptionTransitions: _CaptionTransitions,       //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
        $PlayInMode: 1,                                 //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
        $PlayOutMode: 3                                 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
    }
};

var jssor_slider1 = new $JssorSlider$("slider1_container", options);

<?php
    $mysql_command = "CALL sp_populate_channel_media(:param_channel_guid)";
    $mysql_query = $mysql_connection->prepare($mysql_command);
    $mysql_query->bindParam(':param_channel_guid', $_GET["id"], PDO::PARAM_STR);
    $mysql_query->execute();

    $mysql_row_count = $mysql_query->rowCount();

    if ($mysql_row_count <= 0) {
?>
<img src="<?php echo $_SESSION["volow_domain_name"]; ?>images/temp_volow.png" width="700px" height="400px" />
<?php } else { ?>
<div id="slider1_container" style="position: relative; width: 700px; height: 400px;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
    <center><img src="<?php echo $_SESSION["volow_domain_name"]; ?>images/loading_200X200.gif" /></center>
</div>
<div u="slides" style="position: absolute; left: 0px; top: 0px; width: 700px; height: 400px; overflow: hidden;">
<?php while($mysql_row = $mysql_query->fetch()) { ?>
<!-- Jssor Slider Begin -->
<!-- You can move inline styles (except 'top', 'left', 'width' and 'height') to css file or css block. -->                
<!-- Slides Container -->                    
<div>
    <a href="<?php echo $_SESSION["volow_domain_name"]; ?>article?aid=<?php echo $mysql_row['article_guid']; ?>"><img u="image" src="<?php echo $_SESSION["volow_domain_name"]; ?>gallery/members/<?php echo $mysql_row['member_guid']; ?>/<?php echo $_GET["id"]; ?>/<?php echo $mysql_row['article_guid']; ?>/<?php echo $mysql_row['file_name']; ?>.png" /></a>
    <?php if (isset($mysql_row['media_title'])) { ?>
    <div u="caption" t="MCLIP|B" style="position: absolute; top: 350px; left: 0px; width: 700px; height: 50px;">
        <div style="position: absolute; top: 0px; left: 0px; width: 700px; height: 50px; background-color: Black; opacity: 0.5; filter: alpha(opacity=50);"></div>
        <div style="position: absolute; top: 0px; left: 0px; width: 700px; height: 50px; color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;">
            <?php echo $mysql_row['media_title']; ?>
        </div>
    </div>
    <?php } ?>
</div>
<!-- Slide -->
<!-- Jssor Slider End -->
<?php } ?>
</div>
</div>
<?php } ?>