Wednesday, 24 September 2014

Word Counter and PDF Reader using jquery by aavik kumar (shailesh)

AAVIK KUMAR PRODUCTION

Word Counter and PDF Reader  here is the full code 

 



viewer.html
------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html dir="ltr" mozdisallowselectionprint moznomarginboxes>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--#if GENERIC || CHROME-->
    <meta name="google" content="notranslate">
<!--#endif-->
    <title>AAVIK KUMAR PRODUCTION</title>

<!--#if FIREFOX || MOZCENTRAL-->
<!--#include viewer-snippet-firefox-extension.html-->
<!--#endif-->
<!--#if CHROME-->
<!--#include viewer-snippet-chrome-extension.html-->
<!--#endif-->

    <link rel="stylesheet" href="viewer.css"/>
<!--#if !PRODUCTION-->
    <link rel="resource" type="application/l10n" href="locale/locale.properties"/>
<!--#endif-->

<!--#if !(MOZCENTRAL || CHROME || MINIFIED)-->
    <script src="compatibility.js"></script>
<!--#endif-->

<!--#if !PRODUCTION-->
    <script src="../external/webL10n/l10n.js"></script>
<!--#endif-->

<!--#if !PRODUCTION-->
    <script src="../src/shared/util.js"></script>
    <script src="../src/display/api.js"></script>
    <script src="../src/display/metadata.js"></script>
    <script src="../src/display/canvas.js"></script>
    <script src="../src/display/webgl.js"></script>
    <script src="../src/display/pattern_helper.js"></script>
    <script src="../src/display/font_loader.js"></script>
    <script src="../src/display/annotation_helper.js"></script>
    <script>PDFJS.workerSrc = '../src/worker_loader.js';</script>
<!--#endif-->

<!--#if (GENERIC && !MINIFIED) -->
<!--#include viewer-snippet.html-->
<!--#endif-->

<!--#if !PRODUCTION-->
    <script src="ui_utils.js"></script>
    <script src="default_preferences.js"></script>
    <script src="preferences.js"></script>
    <script src="download_manager.js"></script>
    <script src="view_history.js"></script>
    <script src="page_view.js"></script>
    <script src="thumbnail_view.js"></script>
    <script src="text_layer_builder.js"></script>
    <script src="document_outline_view.js"></script>
    <script src="document_attachments_view.js"></script>
    <script src="pdf_find_bar.js"></script>
    <script src="pdf_find_controller.js"></script>
    <script src="pdf_history.js"></script>
    <script src="secondary_toolbar.js"></script>
    <script src="presentation_mode.js"></script>
    <script src="grab_to_pan.js"></script>
    <script src="hand_tool.js"></script>
    <script src="overlay_manager.js"></script>
    <script src="password_prompt.js"></script>
    <script src="document_properties.js"></script>
<!--#endif-->

<!--#if !MINIFIED -->
    <script src="debugger.js"></script>
    <script src="viewer.js"></script>
<!--#else-->
<!--#include viewer-snippet-minified.html-->
<!--#endif-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<style>

#wordcounter {
height: 100%;
width: 100%;
background-color: yellow;
    top: 0px;

}
#border {
    border: 1px solid red;
    height: 200px;
    width: 100%;
}
textarea {
    height: 100%;
    width: 100%;
    border: 0px;
}
</style>

<script type='text/javascript'>
counter = function() {
    var value = $('#text').val();

    if (value.length == 0) {
        $('#wordCount').html(0);
        $('#totalChars').html(0);
        $('#charCount').html(0);
        $('#charCountNoSpace').html(0);
        return;
    }

    var regex = /\s+/gi;
    var wordCount = value.trim().replace(regex, ' ').split(' ').length;
    var totalChars = value.length;
    var charCount = value.trim().length;
    var charCountNoSpace = value.replace(regex, '').length;

    $('#wordCount').html(wordCount);
    $('#totalChars').html(totalChars);
    $('#charCount').html(charCount);
    $('#charCountNoSpace').html(charCountNoSpace);
};

$(document).ready(function() {
    $('#count').click(counter);
    $('#text').change(counter);
    $('#text').keydown(counter);
    $('#text').keypress(counter);
    $('#text').keyup(counter);
    $('#text').blur(counter);
    $('#text').focus(counter);
});
</script>



  </head>

  <body tabindex="1">
  <!-- Word counter -->
  <div id="wordcounter">
<div id="border">
            <textarea id='text'></textarea>
        </div>
        <br/><br/>
        <center>

        <button id="count">Count</button>
        <br/>
        <br/>
        <div id="result">
            Words: <span id="wordCount">0</span><br/>
            Total Characters(including trails): <span id="totalChars">0</span><br/>
            Characters (excluding trails): <span id="charCount">0</span><br/>
            Characters (excluding all spaces): <span id="charCountNoSpace">0</span>
        </div>
        

        <br/>
        <a href="http://in.linkedin.com/in/shaileshyadavaavikkumar"><b>AAVIK KUMAR PRODUCTION</b></a><br/>
        </center>

</div>
 
 
    <div id="outerContainer" class="loadingInProgress">

      <div id="sidebarContainer">
        <div id="toolbarSidebar">
          <div class="splitToolbarButton toggled">
            <button id="viewThumbnail" class="toolbarButton group toggled" title="Show Thumbnails" tabindex="2" data-l10n-id="thumbs">
               <span data-l10n-id="thumbs_label">Thumbnails</span>
            </button>
            <button id="viewOutline" class="toolbarButton group" title="Show Document Outline" tabindex="3" data-l10n-id="outline">
               <span data-l10n-id="outline_label">Document Outline</span>
            </button>
            <button id="viewAttachments" class="toolbarButton group" title="Show Attachments" tabindex="4" data-l10n-id="attachments">
               <span data-l10n-id="attachments_label">Attachments</span>
            </button>
          </div>
        </div>
        <div id="sidebarContent">
          <div id="thumbnailView">
          </div>
          <div id="outlineView" class="hidden">
          </div>
          <div id="attachmentsView" class="hidden">
          </div>
        </div>
      </div>  <!-- sidebarContainer -->

      <div id="mainContainer">
        <div class="findbar hidden doorHanger hiddenSmallView" id="findbar">
          <label for="findInput" class="toolbarLabel" data-l10n-id="find_label">Find:</label>
          <input id="findInput" class="toolbarField" tabindex="91">
          <div class="splitToolbarButton">
            <button class="toolbarButton findPrevious" title="" id="findPrevious" tabindex="92" data-l10n-id="find_previous">
              <span data-l10n-id="find_previous_label">Previous</span>
            </button>
            <div class="splitToolbarButtonSeparator"></div>
            <button class="toolbarButton findNext" title="" id="findNext" tabindex="93" data-l10n-id="find_next">
              <span data-l10n-id="find_next_label">Next</span>
            </button>
          </div>
          <input type="checkbox" id="findHighlightAll" class="toolbarField">
          <label for="findHighlightAll" class="toolbarLabel" tabindex="94" data-l10n-id="find_highlight">Highlight all</label>
          <input type="checkbox" id="findMatchCase" class="toolbarField">
          <label for="findMatchCase" class="toolbarLabel" tabindex="95" data-l10n-id="find_match_case_label">Match case</label>
          <span id="findMsg" class="toolbarLabel"></span>
        </div>  <!-- findbar -->

        <div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
          <div id="secondaryToolbarButtonContainer">
            <button id="secondaryPresentationMode" class="secondaryToolbarButton presentationMode visibleLargeView" title="Switch to Presentation Mode" tabindex="51" data-l10n-id="presentation_mode">
              <span data-l10n-id="presentation_mode_label">Presentation Mode</span>
            </button>

            <button id="secondaryOpenFile" class="secondaryToolbarButton openFile visibleLargeView" title="Open File" tabindex="52" data-l10n-id="open_file">
              <span data-l10n-id="open_file_label">Open</span>
            </button>

            <button id="secondaryPrint" class="secondaryToolbarButton print visibleMediumView" title="Print" tabindex="53" data-l10n-id="print">
              <span data-l10n-id="print_label">Print</span>
            </button>

            <button id="secondaryDownload" class="secondaryToolbarButton download visibleMediumView" title="Download" tabindex="54" data-l10n-id="download">
              <span data-l10n-id="download_label">Download</span>
            </button>

            <a href="#" id="secondaryViewBookmark" class="secondaryToolbarButton bookmark visibleSmallView" title="Current view (copy or open in new window)" tabindex="55" data-l10n-id="bookmark">
              <span data-l10n-id="bookmark_label">Current View</span>
            </a>

            <div class="horizontalToolbarSeparator visibleLargeView"></div>

            <button id="firstPage" class="secondaryToolbarButton firstPage" title="Go to First Page" tabindex="56" data-l10n-id="first_page">
              <span data-l10n-id="first_page_label">Go to First Page</span>
            </button>
            <button id="lastPage" class="secondaryToolbarButton lastPage" title="Go to Last Page" tabindex="57" data-l10n-id="last_page">
              <span data-l10n-id="last_page_label">Go to Last Page</span>
            </button>

            <div class="horizontalToolbarSeparator"></div>

            <button id="pageRotateCw" class="secondaryToolbarButton rotateCw" title="Rotate Clockwise" tabindex="58" data-l10n-id="page_rotate_cw">
              <span data-l10n-id="page_rotate_cw_label">Rotate Clockwise</span>
            </button>
            <button id="pageRotateCcw" class="secondaryToolbarButton rotateCcw" title="Rotate Counterclockwise" tabindex="59" data-l10n-id="page_rotate_ccw">
              <span data-l10n-id="page_rotate_ccw_label">Rotate Counterclockwise</span>
            </button>

            <div class="horizontalToolbarSeparator"></div>

            <button id="toggleHandTool" class="secondaryToolbarButton handTool" title="Enable hand tool" tabindex="60" data-l10n-id="hand_tool_enable">
              <span data-l10n-id="hand_tool_enable_label">Enable hand tool</span>
            </button>
           
            <div class="horizontalToolbarSeparator"></div>

            <button id="documentProperties" class="secondaryToolbarButton documentProperties" title="Document Properties…" tabindex="61" data-l10n-id="document_properties">
              <span data-l10n-id="document_properties_label">Document Properties…</span>
            </button>
          </div>
        </div>  <!-- secondaryToolbar -->

        <div class="toolbar">
          <div id="toolbarContainer">
            <div id="toolbarViewer">
              <div id="toolbarViewerLeft">
                <button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" tabindex="11" data-l10n-id="toggle_sidebar">
                  <span data-l10n-id="toggle_sidebar_label">Toggle Sidebar</span>
                </button>
                <div class="toolbarButtonSpacer"></div>
                <button id="viewFind" class="toolbarButton group hiddenSmallView" title="Find in Document" tabindex="12" data-l10n-id="findbar">
                   <span data-l10n-id="findbar_label">Find</span>
                </button>
                <div class="splitToolbarButton">
                  <button class="toolbarButton pageUp" title="Previous Page" id="previous" tabindex="13" data-l10n-id="previous">
                    <span data-l10n-id="previous_label">Previous</span>
                  </button>
                  <div class="splitToolbarButtonSeparator"></div>
                  <button class="toolbarButton pageDown" title="Next Page" id="next" tabindex="14" data-l10n-id="next">
                    <span data-l10n-id="next_label">Next</span>
                  </button>
                </div>
                <label id="pageNumberLabel" class="toolbarLabel" for="pageNumber" data-l10n-id="page_label">Page: </label>
                <input type="number" id="pageNumber" class="toolbarField pageNumber" value="1" size="4" min="1" tabindex="15">
                <span id="numPages" class="toolbarLabel"></span>
              </div>
              <div id="toolbarViewerRight">
                <button id="presentationMode" class="toolbarButton presentationMode hiddenLargeView" title="Switch to Presentation Mode" tabindex="31" data-l10n-id="presentation_mode">
                  <span data-l10n-id="presentation_mode_label">Presentation Mode</span>
                </button>

                <button id="openFile" class="toolbarButton openFile hiddenLargeView" title="Open File" tabindex="32" data-l10n-id="open_file">
                  <span data-l10n-id="open_file_label">Open</span>
                </button>

                <button id="print" class="toolbarButton print hiddenMediumView" title="Print" tabindex="33" data-l10n-id="print">
                  <span data-l10n-id="print_label">Print</span>
                </button>

                <button id="download" class="toolbarButton download hiddenMediumView" title="Download" tabindex="34" data-l10n-id="download">
                  <span data-l10n-id="download_label">Download</span>
                </button>
                <!-- <div class="toolbarButtonSpacer"></div> -->
                <a href="#" id="viewBookmark" class="toolbarButton bookmark hiddenSmallView" title="Current view (copy or open in new window)" tabindex="35" data-l10n-id="bookmark">
                  <span data-l10n-id="bookmark_label">Current View</span>
                </a>

                <div class="verticalToolbarSeparator hiddenSmallView"></div>
               
                <button id="secondaryToolbarToggle" class="toolbarButton" title="Tools" tabindex="36" data-l10n-id="tools">
                  <span data-l10n-id="tools_label">Tools</span>
                </button>
              </div>
              <div class="outerCenter">
                <div class="innerCenter" id="toolbarViewerMiddle">
                  <div class="splitToolbarButton">
                    <button id="zoomOut" class="toolbarButton zoomOut" title="Zoom Out" tabindex="21" data-l10n-id="zoom_out">
                      <span data-l10n-id="zoom_out_label">Zoom Out</span>
                    </button>
                    <div class="splitToolbarButtonSeparator"></div>
                    <button id="zoomIn" class="toolbarButton zoomIn" title="Zoom In" tabindex="22" data-l10n-id="zoom_in">
                      <span data-l10n-id="zoom_in_label">Zoom In</span>
                     </button>
                  </div>
                  <span id="scaleSelectContainer" class="dropdownToolbarButton">
                     <select id="scaleSelect" title="Zoom" tabindex="23" data-l10n-id="zoom">
                      <option id="pageAutoOption" title="" value="auto" selected="selected" data-l10n-id="page_scale_auto">Automatic Zoom</option>
                      <option id="pageActualOption" title="" value="page-actual" data-l10n-id="page_scale_actual">Actual Size</option>
                      <option id="pageFitOption" title="" value="page-fit" data-l10n-id="page_scale_fit">Fit Page</option>
                      <option id="pageWidthOption" title="" value="page-width" data-l10n-id="page_scale_width">Full Width</option>
                      <option id="customScaleOption" title="" value="custom"></option>
                      <option title="" value="0.5">50%</option>
                      <option title="" value="0.75">75%</option>
                      <option title="" value="1">100%</option>
                      <option title="" value="1.25">125%</option>
                      <option title="" value="1.5">150%</option>
                      <option title="" value="2">200%</option>
                      <option title="" value="3">300%</option>
                      <option title="" value="4">400%</option>
                    </select>
                  </span>
                </div>
              </div>
            </div>
            <div id="loadingBar">
              <div class="progress">
                <div class="glimmer">
                </div>
              </div>
            </div>
          </div>
        </div>    
       
        <menu type="context" id="viewerContextMenu">
          <menuitem id="contextFirstPage" label="First Page"
                    data-l10n-id="first_page"></menuitem>
          <menuitem id="contextLastPage" label="Last Page"
                    data-l10n-id="last_page"></menuitem>
          <menuitem id="contextPageRotateCw" label="Rotate Clockwise"
                    data-l10n-id="page_rotate_cw"></menuitem>
          <menuitem id="contextPageRotateCcw" label="Rotate Counter-Clockwise"
                    data-l10n-id="page_rotate_ccw"></menuitem>
        </menu>

        <div id="viewerContainer" tabindex="0">
          <div id="viewer"></div>
        </div>

        <div id="errorWrapper" hidden='true'>
          <div id="errorMessageLeft">
            <span id="errorMessage"></span>
            <button id="errorShowMore" data-l10n-id="error_more_info">
              More Information
            </button>
            <button id="errorShowLess" data-l10n-id="error_less_info" hidden='true'>
              Less Information
            </button>
          </div>
          <div id="errorMessageRight">
            <button id="errorClose" data-l10n-id="error_close">
              Close
            </button>
          </div>
          <div class="clearBoth"></div>
          <textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
        </div>
      </div> <!-- mainContainer -->

      <div id="overlayContainer" class="hidden">
        <div id="passwordOverlay" class="container hidden">
          <div class="dialog">
            <div class="row">
              <p id="passwordText" data-l10n-id="password_label">Enter the password to open this PDF file:</p>
            </div>
            <div class="row">
              <input type="password" id="password" class="toolbarField" />
            </div>
            <div class="buttonRow">
              <button id="passwordCancel" class="overlayButton"><span data-l10n-id="password_cancel">Cancel</span></button>
              <button id="passwordSubmit" class="overlayButton"><span data-l10n-id="password_ok">OK</span></button>
            </div>
          </div>
        </div>
        <div id="documentPropertiesOverlay" class="container hidden">
          <div class="dialog">
            <div class="row">
              <span data-l10n-id="document_properties_file_name">File name:</span> <p id="fileNameField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_file_size">File size:</span> <p id="fileSizeField">-</p>
            </div>
            <div class="separator"></div>
            <div class="row">
              <span data-l10n-id="document_properties_title">Title:</span> <p id="titleField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_author">Author:</span> <p id="authorField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_subject">Subject:</span> <p id="subjectField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_keywords">Keywords:</span> <p id="keywordsField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_creation_date">Creation Date:</span> <p id="creationDateField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_modification_date">Modification Date:</span> <p id="modificationDateField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_creator">Creator:</span> <p id="creatorField">-</p>
            </div>
            <div class="separator"></div>
            <div class="row">
              <span data-l10n-id="document_properties_producer">PDF Producer:</span> <p id="producerField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_version">PDF Version:</span> <p id="versionField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_page_count">Page Count:</span> <p id="pageCountField">-</p>
            </div>
            <div class="buttonRow">
              <button id="documentPropertiesClose" class="overlayButton"><span data-l10n-id="document_properties_close">Close</span></button>
            </div>
          </div>
        </div>
      </div>  <!-- overlayContainer -->

    </div> <!-- outerContainer -->
    <div id="printContainer"></div>
<!--#if !(FIREFOX || MOZCENTRAL)-->
<!--#include viewer-snippet-mozPrintCallback-polyfill.html-->
<!--#endif--->
  </body>
</html>
<!DOCTYPE html>
<html dir="ltr" mozdisallowselectionprint moznomarginboxes>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--#if GENERIC || CHROME-->
    <meta name="google" content="notranslate">
<!--#endif-->
    <title>AAVIK KUMAR PRODUCTION</title>

<!--#if FIREFOX || MOZCENTRAL-->
<!--#include viewer-snippet-firefox-extension.html-->
<!--#endif-->
<!--#if CHROME-->
<!--#include viewer-snippet-chrome-extension.html-->
<!--#endif-->

    <link rel="stylesheet" href="viewer.css"/>
<!--#if !PRODUCTION-->
    <link rel="resource" type="application/l10n" href="locale/locale.properties"/>
<!--#endif-->

<!--#if !(MOZCENTRAL || CHROME || MINIFIED)-->
    <script src="compatibility.js"></script>
<!--#endif-->

<!--#if !PRODUCTION-->
    <script src="../external/webL10n/l10n.js"></script>
<!--#endif-->

<!--#if !PRODUCTION-->
    <script src="../src/shared/util.js"></script>
    <script src="../src/display/api.js"></script>
    <script src="../src/display/metadata.js"></script>
    <script src="../src/display/canvas.js"></script>
    <script src="../src/display/webgl.js"></script>
    <script src="../src/display/pattern_helper.js"></script>
    <script src="../src/display/font_loader.js"></script>
    <script src="../src/display/annotation_helper.js"></script>
    <script>PDFJS.workerSrc = '../src/worker_loader.js';</script>
<!--#endif-->

<!--#if (GENERIC && !MINIFIED) -->
<!--#include viewer-snippet.html-->
<!--#endif-->

<!--#if !PRODUCTION-->
    <script src="ui_utils.js"></script>
    <script src="default_preferences.js"></script>
    <script src="preferences.js"></script>
    <script src="download_manager.js"></script>
    <script src="view_history.js"></script>
    <script src="page_view.js"></script>
    <script src="thumbnail_view.js"></script>
    <script src="text_layer_builder.js"></script>
    <script src="document_outline_view.js"></script>
    <script src="document_attachments_view.js"></script>
    <script src="pdf_find_bar.js"></script>
    <script src="pdf_find_controller.js"></script>
    <script src="pdf_history.js"></script>
    <script src="secondary_toolbar.js"></script>
    <script src="presentation_mode.js"></script>
    <script src="grab_to_pan.js"></script>
    <script src="hand_tool.js"></script>
    <script src="overlay_manager.js"></script>
    <script src="password_prompt.js"></script>
    <script src="document_properties.js"></script>
<!--#endif-->

<!--#if !MINIFIED -->
    <script src="debugger.js"></script>
    <script src="viewer.js"></script>
<!--#else-->
<!--#include viewer-snippet-minified.html-->
<!--#endif-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<style>

#wordcounter {
height: 100%;
width: 100%;
background-color: yellow;
    top: 0px;

}
#border {
    border: 1px solid red;
    height: 200px;
    width: 100%;
}
textarea {
    height: 100%;
    width: 100%;
    border: 0px;
}
</style>

<script type='text/javascript'>
counter = function() {
    var value = $('#text').val();

    if (value.length == 0) {
        $('#wordCount').html(0);
        $('#totalChars').html(0);
        $('#charCount').html(0);
        $('#charCountNoSpace').html(0);
        return;
    }

    var regex = /\s+/gi;
    var wordCount = value.trim().replace(regex, ' ').split(' ').length;
    var totalChars = value.length;
    var charCount = value.trim().length;
    var charCountNoSpace = value.replace(regex, '').length;

    $('#wordCount').html(wordCount);
    $('#totalChars').html(totalChars);
    $('#charCount').html(charCount);
    $('#charCountNoSpace').html(charCountNoSpace);
};

$(document).ready(function() {
    $('#count').click(counter);
    $('#text').change(counter);
    $('#text').keydown(counter);
    $('#text').keypress(counter);
    $('#text').keyup(counter);
    $('#text').blur(counter);
    $('#text').focus(counter);
});
</script>



  </head>

  <body tabindex="1">
  <!-- Word counter -->
  <div id="wordcounter">
<div id="border">
            <textarea id='text'></textarea>
        </div>
        <br/><br/>
        <center>

        <button id="count">Count</button>
        <br/>
        <br/>
        <div id="result">
            Words: <span id="wordCount">0</span><br/>
            Total Characters(including trails): <span id="totalChars">0</span><br/>
            Characters (excluding trails): <span id="charCount">0</span><br/>
            Characters (excluding all spaces): <span id="charCountNoSpace">0</span>
        </div>
        

        <br/>
        <a href="http://in.linkedin.com/in/shaileshyadavaavikkumar"><b>AAVIK KUMAR PRODUCTION</b></a><br/>
        </center>

</div>
 
 
    <div id="outerContainer" class="loadingInProgress">

      <div id="sidebarContainer">
        <div id="toolbarSidebar">
          <div class="splitToolbarButton toggled">
            <button id="viewThumbnail" class="toolbarButton group toggled" title="Show Thumbnails" tabindex="2" data-l10n-id="thumbs">
               <span data-l10n-id="thumbs_label">Thumbnails</span>
            </button>
            <button id="viewOutline" class="toolbarButton group" title="Show Document Outline" tabindex="3" data-l10n-id="outline">
               <span data-l10n-id="outline_label">Document Outline</span>
            </button>
            <button id="viewAttachments" class="toolbarButton group" title="Show Attachments" tabindex="4" data-l10n-id="attachments">
               <span data-l10n-id="attachments_label">Attachments</span>
            </button>
          </div>
        </div>
        <div id="sidebarContent">
          <div id="thumbnailView">
          </div>
          <div id="outlineView" class="hidden">
          </div>
          <div id="attachmentsView" class="hidden">
          </div>
        </div>
      </div>  <!-- sidebarContainer -->

      <div id="mainContainer">
        <div class="findbar hidden doorHanger hiddenSmallView" id="findbar">
          <label for="findInput" class="toolbarLabel" data-l10n-id="find_label">Find:</label>
          <input id="findInput" class="toolbarField" tabindex="91">
          <div class="splitToolbarButton">
            <button class="toolbarButton findPrevious" title="" id="findPrevious" tabindex="92" data-l10n-id="find_previous">
              <span data-l10n-id="find_previous_label">Previous</span>
            </button>
            <div class="splitToolbarButtonSeparator"></div>
            <button class="toolbarButton findNext" title="" id="findNext" tabindex="93" data-l10n-id="find_next">
              <span data-l10n-id="find_next_label">Next</span>
            </button>
          </div>
          <input type="checkbox" id="findHighlightAll" class="toolbarField">
          <label for="findHighlightAll" class="toolbarLabel" tabindex="94" data-l10n-id="find_highlight">Highlight all</label>
          <input type="checkbox" id="findMatchCase" class="toolbarField">
          <label for="findMatchCase" class="toolbarLabel" tabindex="95" data-l10n-id="find_match_case_label">Match case</label>
          <span id="findMsg" class="toolbarLabel"></span>
        </div>  <!-- findbar -->

        <div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
          <div id="secondaryToolbarButtonContainer">
            <button id="secondaryPresentationMode" class="secondaryToolbarButton presentationMode visibleLargeView" title="Switch to Presentation Mode" tabindex="51" data-l10n-id="presentation_mode">
              <span data-l10n-id="presentation_mode_label">Presentation Mode</span>
            </button>

            <button id="secondaryOpenFile" class="secondaryToolbarButton openFile visibleLargeView" title="Open File" tabindex="52" data-l10n-id="open_file">
              <span data-l10n-id="open_file_label">Open</span>
            </button>

            <button id="secondaryPrint" class="secondaryToolbarButton print visibleMediumView" title="Print" tabindex="53" data-l10n-id="print">
              <span data-l10n-id="print_label">Print</span>
            </button>

            <button id="secondaryDownload" class="secondaryToolbarButton download visibleMediumView" title="Download" tabindex="54" data-l10n-id="download">
              <span data-l10n-id="download_label">Download</span>
            </button>

            <a href="#" id="secondaryViewBookmark" class="secondaryToolbarButton bookmark visibleSmallView" title="Current view (copy or open in new window)" tabindex="55" data-l10n-id="bookmark">
              <span data-l10n-id="bookmark_label">Current View</span>
            </a>

            <div class="horizontalToolbarSeparator visibleLargeView"></div>

            <button id="firstPage" class="secondaryToolbarButton firstPage" title="Go to First Page" tabindex="56" data-l10n-id="first_page">
              <span data-l10n-id="first_page_label">Go to First Page</span>
            </button>
            <button id="lastPage" class="secondaryToolbarButton lastPage" title="Go to Last Page" tabindex="57" data-l10n-id="last_page">
              <span data-l10n-id="last_page_label">Go to Last Page</span>
            </button>

            <div class="horizontalToolbarSeparator"></div>

            <button id="pageRotateCw" class="secondaryToolbarButton rotateCw" title="Rotate Clockwise" tabindex="58" data-l10n-id="page_rotate_cw">
              <span data-l10n-id="page_rotate_cw_label">Rotate Clockwise</span>
            </button>
            <button id="pageRotateCcw" class="secondaryToolbarButton rotateCcw" title="Rotate Counterclockwise" tabindex="59" data-l10n-id="page_rotate_ccw">
              <span data-l10n-id="page_rotate_ccw_label">Rotate Counterclockwise</span>
            </button>

            <div class="horizontalToolbarSeparator"></div>

            <button id="toggleHandTool" class="secondaryToolbarButton handTool" title="Enable hand tool" tabindex="60" data-l10n-id="hand_tool_enable">
              <span data-l10n-id="hand_tool_enable_label">Enable hand tool</span>
            </button>
           
            <div class="horizontalToolbarSeparator"></div>

            <button id="documentProperties" class="secondaryToolbarButton documentProperties" title="Document Properties…" tabindex="61" data-l10n-id="document_properties">
              <span data-l10n-id="document_properties_label">Document Properties…</span>
            </button>
          </div>
        </div>  <!-- secondaryToolbar -->

        <div class="toolbar">
          <div id="toolbarContainer">
            <div id="toolbarViewer">
              <div id="toolbarViewerLeft">
                <button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" tabindex="11" data-l10n-id="toggle_sidebar">
                  <span data-l10n-id="toggle_sidebar_label">Toggle Sidebar</span>
                </button>
                <div class="toolbarButtonSpacer"></div>
                <button id="viewFind" class="toolbarButton group hiddenSmallView" title="Find in Document" tabindex="12" data-l10n-id="findbar">
                   <span data-l10n-id="findbar_label">Find</span>
                </button>
                <div class="splitToolbarButton">
                  <button class="toolbarButton pageUp" title="Previous Page" id="previous" tabindex="13" data-l10n-id="previous">
                    <span data-l10n-id="previous_label">Previous</span>
                  </button>
                  <div class="splitToolbarButtonSeparator"></div>
                  <button class="toolbarButton pageDown" title="Next Page" id="next" tabindex="14" data-l10n-id="next">
                    <span data-l10n-id="next_label">Next</span>
                  </button>
                </div>
                <label id="pageNumberLabel" class="toolbarLabel" for="pageNumber" data-l10n-id="page_label">Page: </label>
                <input type="number" id="pageNumber" class="toolbarField pageNumber" value="1" size="4" min="1" tabindex="15">
                <span id="numPages" class="toolbarLabel"></span>
              </div>
              <div id="toolbarViewerRight">
                <button id="presentationMode" class="toolbarButton presentationMode hiddenLargeView" title="Switch to Presentation Mode" tabindex="31" data-l10n-id="presentation_mode">
                  <span data-l10n-id="presentation_mode_label">Presentation Mode</span>
                </button>

                <button id="openFile" class="toolbarButton openFile hiddenLargeView" title="Open File" tabindex="32" data-l10n-id="open_file">
                  <span data-l10n-id="open_file_label">Open</span>
                </button>

                <button id="print" class="toolbarButton print hiddenMediumView" title="Print" tabindex="33" data-l10n-id="print">
                  <span data-l10n-id="print_label">Print</span>
                </button>

                <button id="download" class="toolbarButton download hiddenMediumView" title="Download" tabindex="34" data-l10n-id="download">
                  <span data-l10n-id="download_label">Download</span>
                </button>
                <!-- <div class="toolbarButtonSpacer"></div> -->
                <a href="#" id="viewBookmark" class="toolbarButton bookmark hiddenSmallView" title="Current view (copy or open in new window)" tabindex="35" data-l10n-id="bookmark">
                  <span data-l10n-id="bookmark_label">Current View</span>
                </a>

                <div class="verticalToolbarSeparator hiddenSmallView"></div>
               
                <button id="secondaryToolbarToggle" class="toolbarButton" title="Tools" tabindex="36" data-l10n-id="tools">
                  <span data-l10n-id="tools_label">Tools</span>
                </button>
              </div>
              <div class="outerCenter">
                <div class="innerCenter" id="toolbarViewerMiddle">
                  <div class="splitToolbarButton">
                    <button id="zoomOut" class="toolbarButton zoomOut" title="Zoom Out" tabindex="21" data-l10n-id="zoom_out">
                      <span data-l10n-id="zoom_out_label">Zoom Out</span>
                    </button>
                    <div class="splitToolbarButtonSeparator"></div>
                    <button id="zoomIn" class="toolbarButton zoomIn" title="Zoom In" tabindex="22" data-l10n-id="zoom_in">
                      <span data-l10n-id="zoom_in_label">Zoom In</span>
                     </button>
                  </div>
                  <span id="scaleSelectContainer" class="dropdownToolbarButton">
                     <select id="scaleSelect" title="Zoom" tabindex="23" data-l10n-id="zoom">
                      <option id="pageAutoOption" title="" value="auto" selected="selected" data-l10n-id="page_scale_auto">Automatic Zoom</option>
                      <option id="pageActualOption" title="" value="page-actual" data-l10n-id="page_scale_actual">Actual Size</option>
                      <option id="pageFitOption" title="" value="page-fit" data-l10n-id="page_scale_fit">Fit Page</option>
                      <option id="pageWidthOption" title="" value="page-width" data-l10n-id="page_scale_width">Full Width</option>
                      <option id="customScaleOption" title="" value="custom"></option>
                      <option title="" value="0.5">50%</option>
                      <option title="" value="0.75">75%</option>
                      <option title="" value="1">100%</option>
                      <option title="" value="1.25">125%</option>
                      <option title="" value="1.5">150%</option>
                      <option title="" value="2">200%</option>
                      <option title="" value="3">300%</option>
                      <option title="" value="4">400%</option>
                    </select>
                  </span>
                </div>
              </div>
            </div>
            <div id="loadingBar">
              <div class="progress">
                <div class="glimmer">
                </div>
              </div>
            </div>
          </div>
        </div>

       
       
       
        <menu type="context" id="viewerContextMenu">
          <menuitem id="contextFirstPage" label="First Page"
                    data-l10n-id="first_page"></menuitem>
          <menuitem id="contextLastPage" label="Last Page"
                    data-l10n-id="last_page"></menuitem>
          <menuitem id="contextPageRotateCw" label="Rotate Clockwise"
                    data-l10n-id="page_rotate_cw"></menuitem>
          <menuitem id="contextPageRotateCcw" label="Rotate Counter-Clockwise"
                    data-l10n-id="page_rotate_ccw"></menuitem>
        </menu>

        <div id="viewerContainer" tabindex="0">
          <div id="viewer"></div>
        </div>

        <div id="errorWrapper" hidden='true'>
          <div id="errorMessageLeft">
            <span id="errorMessage"></span>
            <button id="errorShowMore" data-l10n-id="error_more_info">
              More Information
            </button>
            <button id="errorShowLess" data-l10n-id="error_less_info" hidden='true'>
              Less Information
            </button>
          </div>
          <div id="errorMessageRight">
            <button id="errorClose" data-l10n-id="error_close">
              Close
            </button>
          </div>
          <div class="clearBoth"></div>
          <textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
        </div>
      </div> <!-- mainContainer -->

      <div id="overlayContainer" class="hidden">
        <div id="passwordOverlay" class="container hidden">
          <div class="dialog">
            <div class="row">
              <p id="passwordText" data-l10n-id="password_label">Enter the password to open this PDF file:</p>
            </div>
            <div class="row">
              <input type="password" id="password" class="toolbarField" />
            </div>
            <div class="buttonRow">
              <button id="passwordCancel" class="overlayButton"><span data-l10n-id="password_cancel">Cancel</span></button>
              <button id="passwordSubmit" class="overlayButton"><span data-l10n-id="password_ok">OK</span></button>
            </div>
          </div>
        </div>
        <div id="documentPropertiesOverlay" class="container hidden">
          <div class="dialog">
            <div class="row">
              <span data-l10n-id="document_properties_file_name">File name:</span> <p id="fileNameField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_file_size">File size:</span> <p id="fileSizeField">-</p>
            </div>
            <div class="separator"></div>
            <div class="row">
              <span data-l10n-id="document_properties_title">Title:</span> <p id="titleField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_author">Author:</span> <p id="authorField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_subject">Subject:</span> <p id="subjectField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_keywords">Keywords:</span> <p id="keywordsField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_creation_date">Creation Date:</span> <p id="creationDateField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_modification_date">Modification Date:</span> <p id="modificationDateField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_creator">Creator:</span> <p id="creatorField">-</p>
            </div>
            <div class="separator"></div>
            <div class="row">
              <span data-l10n-id="document_properties_producer">PDF Producer:</span> <p id="producerField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_version">PDF Version:</span> <p id="versionField">-</p>
            </div>
            <div class="row">
              <span data-l10n-id="document_properties_page_count">Page Count:</span> <p id="pageCountField">-</p>
            </div>
            <div class="buttonRow">
              <button id="documentPropertiesClose" class="overlayButton"><span data-l10n-id="document_properties_close">Close</span></button>
            </div>
          </div>
        </div>
      </div>  <!-- overlayContainer -->

    </div> <!-- outerContainer -->
    <div id="printContainer"></div>
<!--#if !(FIREFOX || MOZCENTRAL)-->
<!--#include viewer-snippet-mozPrintCallback-polyfill.html-->
<!--#endif--->
  </body>
</html>

Read more »
at No comments:
Labels: , ,

Sunday, 21 September 2014

extract transform load system engineering project by aavik kumar

    AAVIK KUMAR PRODUCTION

Php+MySql Extract Transform Load System



 step by step tutorial on extract transform load system with full code
-------------
index.php

<html>
<style>
body {background-image:url("bg.jpg");}
.button-secondary {
            background: rgb(66, 184, 221);
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }
</style>
<script>
function val()
{
window.location.href="clear.php";
}
</script>
<body>
<center><h1><font color="red">Welcone to ETL System</font></h1></center>
<div style='float:right'><input type='button' value='Clear' onclick='val()'></div>
<div style="border :1px solid black ;height:auto;width:500px;margin-left:400px">
<center><h2>This part is of extraction</h2><br></center>
<form action="extract.php" method="post"
enctype="multipart/form-data">
<table><tr><td><label for="file"><h2>Filename:</h2></label></td>
<td><input type="file" name="file" id="file"></td></tr></table>
<center><input type="submit" name="submit" class='button-secondary' value="Submit"></center>
</form>
</div>
</body>
</html>
-----------------------------------------------------------------------
extract.php

<style>
body {background-image:url("bg.jpg");}
.button-secondary {
            background: rgb(66, 184, 221);
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }
</style>
<script>
function val()
{
window.location.href="clear.php";
}
</script>
<body>
<form action='transfer.php' method='post'>
<div align='center'>
<font size='6'color='red'>Information regarding type, size,storage of file:</font><br>
<div style='float:right'><input type='button' value='Clear' onclick='val()'></div>
<?php

if ($_FILES["file"]["error"] > 0)
  {
  echo "Error: " . $_FILES["file"]["error"] . "<br>";
  }
else
  {
  echo "<table><tr><td>";
  echo "Upload: </td><td>" . $_FILES["file"]["name"] . "</td></tr>";
  echo "<tr><td>Type: </td><td>" . $_FILES["file"]["type"] . "</td></tr>";
  echo "<tr><td>Size: </td><td>" . ($_FILES["file"]["size"] / 1024) . " kB</td></tr>";
  echo "<tr><td>Stored in: </td><td>" . $_FILES["file"]["tmp_name"]. "</td></tr></table>";
  }
 
  if(file_exists("upload/".$_FILES["file"]["name"]))
   {
  echo $_FILES["file"]["name"]."already exists.</br>";
 
   }
      else
{
move_uploaded_file($_FILES["file"]["tmp_name"],$_FILES["file"]["name"]);
}   
echo "</div><hr>";
$h=@fopen($_FILES["file"]["name"],"r");
$con=mysql_connect('localhost','root','');

mysql_select_db('ajay',$con);
echo "<div align='center'>";
if(!$con)
{
die("could not found");
}
else
{
echo "<font size='4' color='red'>CONNECTED TO DATABASE.</font></br>";
}



while (!feof($h))
{
$str=fgets($h,4096);//read a line
list($a,$b,$c)=(explode("-",$str));//seperate a string by means of |
echo $a."-".$b."-".$c."</br>";

$sql="INSERT into db_data(`fname`,`lname`,`phone_number`) VALUES('$a','$b','$c')";
$result=mysql_query($sql,$con);
}
fclose($h);
echo "DATABASE UPDATED.<br/>";
mysql_close($con);
 
?>
<br>
<input type='submit' class='button-secondary'value='Click here to Transfer'>
</div></form>
</body>
------------------------------------------------------------------------
transform.php

 <style>
body {background-image:url("bg.jpg");}
.button-secondary {
            background: rgb(66, 184, 221);
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }
</style>
<body>
<div align='center'>
<script>
function val()
{
//alert("hi");
window.location.href="load.php";
}

function val1()
{
window.location.href="clear.php";
}
</script>
<?php
$h=fopen("text.txt","r");
$con=mysql_connect('localhost','root','');

mysql_select_db('ajay',$con);
if(!$con)
{
die("could not found");
}
else
{
echo "CONNECTED TO DATABASE.</br>";
}

while (!feof($h))
{
$str=fgets($h,4096);//read a line
list($a,$b,$c)=(explode("-",$str));//seperate a string by means of |
echo $a."-".$b."-".$c."</br>";
$ch=strlen($c);
if($ch==10)
{
//echo $c."<br>";
$s=mysql_query("INSERT into db_table3(`fname`,`lname`,`phone_number`) VALUES('$a','$b','$c')");
$r=mysql_query($s,$con);
}
else{
$ph="022".$c."<br>";
//echo $ph;
$sq=mysql_query("INSERT into db_table3(`fname`,`lname`,`phone_number`) VALUES('$a','$b','$ph')");
$re=mysql_query($sq,$con);
}
}
fclose($h);

$sql1="select * from `db_table1`";
$res=mysql_query($sql1,$con);
while($row=mysql_fetch_array($res))
{
$fname=$row['fname'];
$lname=$row['lname'];
$phone=$row['phone_number'];
echo $fname." ". $lname." ".$phone."<br>";

$phone_number=strlen($phone);
if($phone_number=='10')
{
$s="INSERT into db_table3(`fname`,`lname`,`phone_number`) VALUES('$fname','$lname','$phone')";
$r=mysql_query($s,$con);
}
else{
$p="022".$phone;
$sq="INSERT into db_table3(`fname`,`lname`,`phone_number`) VALUES('$fname','$lname','$p')";
$re=mysql_query($sq,$con);
}
}


?>
<br>
<input type='button' class='button-secondary' value='Click here to Load' onclick='val()'>
<input type='button' value='Clear' onclick='val1()'>
</div>
</body>
--------------------------------------------------------------------------------------
load.php

<style>
body {background-image:url("bg.jpg");}
.button-secondary {
            background: rgb(66, 184, 221);
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }
</style>
<body>
<div style='float:right'><input type='button' value='Clear' onclick='val()'></div>
<script>
function val()
{
window.location.href="clear.php";
}
</script>
<?php
$con=mysql_connect('localhost','root','');

mysql_select_db('ajay',$con);
$sql="select * from `db_table3`";
$res=mysql_query($sql,$con);
echo "<table style='border:1px solid black'>";
while($row=mysql_fetch_array($res))
{
$fname=$row['fname'];
$lname=$row['lname'];
$phone=$row['phone_number'];
echo "<tr><td>".$fname."</td><td>".$lname."</td><td>".$phone."</td></tr>";
}
echo "</table>";
?>

</body>

 Download full source code extract transform load system project
at No comments:
Labels: , ,

Saturday, 20 September 2014

sound mixing mp3 player dj chat system using jquery jquery.mb.components

AAVIK KUMAR PRODUCTION


using jquery.mb.components i have created mp3 player and chat system with smily.





THIS IS FULL HTML CODE :-

<!DOCTYPE html>
<!--
  ~ /*******************************************************************************
  ~  jquery.mb.components
  ~  file: aavikkumarIndex.html
  ~
  ~ 
  ~  Licences: MIT, GPL
  ~  http://www.opensource.org/licenses/mit-license.php
  ~  http://www.gnu.org/licenses/gpl.html
  ~
  ~ 
  ~  ******************************************************************************/
  -->

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>AAVIK KUMAR jquery.mb.miniAudioPlayer</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
     <script type="text/javascript" src="inc/jquery.mb.emoticons.js"></script>
    <script type="text/javascript" src="inc/jquery.jplayer.min.js"></script>
    <script type="text/javascript" src="inc/jquery.mb.miniPlayer.js"></script>
    <link rel="stylesheet" type="text/css" href="css/miniplayer.css" title="style" media="screen"/>
    <link href='http://fonts.googleapis.com/css?family=Lekton' rel='stylesheet' type='text/css'>
   
    <script type="text/javascript">
  $(function(){
 
    $("#ta").mbSmilesBox();
 
  })
  </script>
 
   
    <style type="text/css">

            /*Generic page style*/

        body{
            margin:0px;
            background: #ffc000;
            font:normal 16px/20px Lekton, sans-serif;
        }

        .wrapper{
            position:absolute;
            padding:100px 50px;
            width:80%;
            min-height: 100%;
            margin-left: 10% ;
            top:0;
            background: #e8e8e8;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-shadow: 0 0 10px rgba(0,0,0,0.4);
        }

        .wrapper h1 {
            font-size: 26px;
        }

        button {
            padding: 3px;
            display: inline-block;
            cursor: pointer;
            color: #fff;
            background-color: #ccc;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-box-shadow: #999 1px 1px 3px;
            -webkit-box-shadow: #999 1px 1px 3px;
            border: 1px solid white;
            text-shadow: 1px -1px 2px #aaa9a9 !important;
        }

        button:hover {
            /*background-color:#fff;*/
            color: #666;
        }

        hr {
            border: none;
            background-color: #ccc;
            height: 1px;
        }
       
       
.mbSmilesWrapper{
  position:relative;
  display:inline-block;
  marginwidth-topmargin:15px;
}

    .mbSmilesBox{
      position:absolute;
      width:290px;
      background:#f3f3f3;
      padding:5px;
      -moz-box-shadow: #666666 1px 1px 6px;
      -webkit-box-shadow: #666666 1px 1px 6px;
      margin-top:-5px;
      z-index:1001;
    }
    span.emoticon{
      background-color:#f3f3f3;
      display:block;
      float:left;
      width:25px;
      height:25px;
      cursor:pointer;
      border-bottom:1px dotted #ccc;
      border-right:1px dotted #ccc;
      padding:3px;
    }
    span.emoticon:hover{
      position:relative;
      z-index:1;
      background-color:#fff;
      -moz-box-shadow: #666666 1px 1px 6px;
      -webkit-box-shadow: #666666 1px 1px 6px;
    }
   
    span.mbSmilesButton img{
        width:12px;
        height:12px;
    }
    span.mbSmilesButton{
        position:absolute;
        right:5px;
        z-index:1000;
    }
   
    #render{
      width:500px;
      background:#f3f3f3;
      padding:5px;
      -moz-box-shadow: #666666 1px 1px 6px;
      -webkit-box-shadow: #666666 1px 1px 6px;
    }
    #ta{
      border:none;
      width:500px;
      height:200px;
      background:#f0f8ff;
      padding:5px;
      -moz-box-shadow: #666666 1px 1px 6px;
    }

    span.btn{
      padding:5px;
      margin:10px;
      display:inline-block;
      cursor:pointer;
      font:12px/14px Arial, Helvetica, sans-serif;
      color:#aaa;
      background-color:#eee;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      -moz-box-shadow:#999 2px 0px 3px;
      -webkit-box-shadow:#999 2px 0px 3px;
    }
    span.btn:hover{
      background-color:#000;
    }


    </style>

    <script type="text/javascript">

        $(function () {

           


            $(".audio").mb_miniPlayer({
                width: 240,
                inLine: false,
                onEnd: playNext
            });

            function playNext(player) {
                var players = $(".audio");
                document.playerIDX = (player.idx <= players.length - 1 ? player.idx : 0);
                players.eq(document.playerIDX).mb_miniPlayer_play();
            }

        });
    </script>
   
   
      <!--
  ~ /*******************************************************************************
  ~  jquery.mb.components new button code
  ~  ******************************************************************************/
  -->
 
    <script type="text/javascript" src="inc/jquery.mb.audio.js?_=8y338"></script>
    <script type="text/javascript">

        /*
         * DEFINE SOUNDS
         */
        $.mbAudio.sounds = {

            backgroundSprite: {
                id: "backgroundSprite",
                ogg: "sounds/bgndsSprite.ogg",
                mp3: "sounds/bgndsSprite.mp3",
                //example of sprite
                sprite:{
                    intro     : {id: "intro", start: 80, end: 116.975, loop: true},
                    levelIntro: {id: "levelIntro", start: 60, end: 77.470, loop: true},
                    tellStory: {id: "tellStory", start: 80, end: 116.975, loop: true},
                    level1    : {id: "level1", start: 5, end: 13, loop: true},
                    level2    : {id: "level2", start: 40, end: 56, loop: true},
                    level3    : {id: "level3", start: 120, end: 136.030, loop: true}
                }
            },

            effectSprite: {
                id: "effectSprite",
                ogg: "sounds/effectsSprite.ogg",
                mp3: "sounds/effectsSprite1.mp3",
                //example of sprite
                sprite:{
                    streak: {id: "streak", start: 0, end: 1.3, loop: 3},
                    great : {id: "great", start: 5, end: 8, loop: false},
                    divine: {id: "divine", start: 10, end: 12, loop: false},
                    wow   : {id: "wow", start: 15, end: 24, loop: false},
                    levelIntro    : {id: "levelIntro", start: 20, end: 25, loop: false},
                    levelCompleted: {id: "levelCompleted", start: 25, end: 30, loop: false},
                    subLevelLost: {id: "subLevelLost", start: 35, end: 38.1, loop: false},
                    subLevelWon : {id: "subLevelWon", start: 30, end: 31.9, loop: false},
                    gameWon : {id: "gameWon", start: 30, end: 31.9, loop: false}
                }
            }
        };

        function audioIsReady(){

            setTimeout(function(){
                $('#buttons').fadeIn();
                $("#loading").hide();

                if(isStandAlone || !isDevice)
                    $.mbAudio.queue.add('backgroundSprite',"levelIntro");

            },3000);

        }

        $(document).on("initAudio", function () {
            $.mbAudio.pause('effectSprite', audioIsReady);


            $('#start').hide();
            $("#loading").show();
        });

        $(document).on("event1", function () {toggleButtons(); $.mbAudio.queue.add('effectSprite', 'great',toggleButtons)});
        $(document).on("event2", function () {toggleButtons(); $.mbAudio.queue.add('effectSprite', 'divine',toggleButtons)});
        $(document).on("event3", function () {toggleButtons(); $.mbAudio.queue.add('effectSprite', 'streak',toggleButtons)});
        $(document).on("event4", function () {$.mbAudio.queue.add('backgroundSprite', 'levelIntro')});

        function toggleButtons(){
            $("button").toggleClass("disabled");
        }

    </script>

</head>

<body>
<br>

<div class="wrapper">
  
    <h1><center>AAVIK KUMAR PRODUCTION</center></h1>
    <hr>
    <br>
    <a id="m1" class="audio {autoplay:true, inLine:true}"
    href="http://www.pacdv.com/sounds/ambience_sounds/airport-gate-1.mp3">Airport Gate (Boarding)</a>
    <button onclick="$('#m1').mb_miniPlayer_stop()">stop</button>
    <button onclick="$('#m1').mb_miniPlayer_play()">play</button>
    <hr>
    <a id="m2" class="audio {ogg:'http://www.miaowmusic.com/ogg/Miaow-02-Hidden.ogg'}"
       href="http://www.pacdv.com/sounds/ambience_sounds/g-t-1.mp3">Group Talking</a>
    <hr>
    <a id="m3" class="audio {ogg:'http://www.miaowmusic.com/ogg/Miaow-02-Hidden.ogg'}"
       href="http://www.pacdv.com/sounds/ambience_sounds/water-stream-1.mp3" style="display:none">Water Stream
        (Small)</a>
    <hr>
    <a id="m4" class="audio {ogg:'http://www.miaowmusic.com/ogg/Miaow-02-Hidden.ogg'}"
 href="http://www.pacdv.com/sounds/domestic_sound_effects/doorbell-1.mp3">Doorbell</a>
 
      
    <hr>
    <a id="m5" class="audio {ogg:'http://www.miaowmusic.com/ogg/Miaow-02-Hidden.ogg'}"
       href="http://www.pacdv.com/sounds/transportation_sounds/antique-car-honk-1.mp3" style="display: none">Antique Car
        & Honk</a>
    <hr>
   
   
   
   
   
   
   
   
   
   
        <pre style="margin-left: 0px;overflow:auto; background: #dcdcdc; padding: 10px "><code>
        // this is the initializer function

        $(".audio").mb_miniPlayer({
        width:240,
        inLine:false,
        onEnd:playNext
        });

        // and this is function invoked as 'onEnd' callback
        // Both the onPlay and onEnd callback functions receive the index of the player as parameter.

        function playNext(idx){
        var players=$(".audio");
        document.playerIDX = idx+1 <= players.length-1 ? idx+1 : 0;
        players.eq(document.playerIDX).mb_miniPlayer_play();
        }
    </code></pre>

    <br>
    <b>jquery.mb.miniPlayer</b> is a GUI implementation of the <a href="http://www.jplayer.org" target="_blank">jquery.jPlayer</a>
    plug-in SOUNDING MIXING WITH CHAT.ENJOY!!!!
   
<!--
  ~ /*******************************************************************************
  ~  jquery.mb.components new button code
  ~  ******************************************************************************/
  -->
 
<div id="start">
   
    <script>
        if((isiOs && isStandAlone) || !isDevice){
            document.write("<p>This button will also initialize the effects sprite and will play the background sprite (only iOS).</p>")
        }
    </script>
    <button style="cursor:pointer"  onmousedown="$(document).trigger('initAudio')">Lets start</button>
</div>

<div id="loading" style="display: none;">... loading ...</div>
<div id="buttons" style="display: none;">
    <p>The three buttons below play sounds from the same audio file (sounds/bgndsSprite .mp3 or .ogg)</b></p>
    <button style="cursor:pointer" onmousedown="$(document).trigger('event1')">play sound 1</button>
    <button style="cursor:pointer" onmousedown="$(document).trigger('event2')">play sound 2</button>
    <button id="playSound1" style="cursor:pointer" onmousedown="$(document).trigger('event3')">play effect 3 (it loops 3 times)</button>
    </div>
   
   
    <hr>
    <!--
  ~ /*******************************************************************************
  ~  jquery.mb.components CHAT
  ~  ******************************************************************************/
  -->
<textarea id="ta" class="ta"></textarea>
<br>
<span class="btn" onclick="$('#render').html($('#ta').val()).emoticonize(true).show()">SEND</span>

<div id="render" style="display:none"></div>

</div>


</body>
</html>





DOWNLOAD SOURCE CODE HERE
at No comments:
Labels: , ,
Subscribe to: Posts (Atom)