Web Analytics Made Easy -
StatCounter Drop down documents (Word etc.) - CodingForum

Announcement

Collapse
No announcement yet.

Drop down documents (Word etc.)

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Drop down documents (Word etc.)

    Hello,
    I was wondering if there is any way to have a bunch of drop down buttons on a page and when a user is to click on the drop down button it will show the contents of a .docx/.doc file?
    But also have a .mp3 file play within the background as they click on the drop down button, and when the click the drop down button again, the contents would go back to being hidden the .mp3 would stop playing.

    If there is any way to do this I would high appreciate the help, thank you for reading and helping.

    Thank you in advance.

    ~Bloodshot

  • #2
    Hi,

    Do you want it to open the document in a new tab, or in a frame on the current page?

    You will need to use a combination of HTML and JavaScript for this.

    Let me know and we can go a bit further into this.
    Riley
    Riley-Shannon.com - My Portfolio
    FraktalServices.com - My Company

    Comment


    • #3
      Open a frame in the current page, I thought as much. And thank you.

      But would there be a way to play and stop a .mp3 file along side this too?

      Comment


      • #4
        Yeah, you can use JavaScript for that too.
        Code:
        function myFunction() 
        {
          var sound = new Audio('audio-file.mp3');
          sound.play();
        }
        
        document.getElementById("dropDown1").onclick = function() {myFunction()};
        
        <select id="dropDown1">
          <option>1</option>
        </select>
        
        // OR //
        
        function myFunction() 
        {
          var sound = new Audio('audio-file.mp3');
          audio.play();
        }
        
        <select onClick="myFunction()">
          <option>1</option>
        </select>
        Im sure other people on here have better ways of doing this, but this is referenced from the W3Schools JavaScript Reference for the onClick Event
        Last edited by RShannon1321; Sep 7, 2016, 02:38 PM.
        Riley
        Riley-Shannon.com - My Portfolio
        FraktalServices.com - My Company

        Comment


        • #5
          I am kind of thinking about it from this perspective, this may not work as is, I cant test it currently, but it should get you an idea of what you'll need to do.
          Code:
          <!DOCTYPE html>
          <html>
            <head>
              ...
            </head>
            <body>
              <select name="Select1" id="dd1" onClick="playSound()">
                <option value="documentFile.docx">Document 1</option>
                <option value="documentFile2.docx">Document 2</option>
                <option value="documentFile3.docx">Document 3</option>
                <option value="documentFile4.docx">Document 4</option>
              </select>
          
          
              <object id="objectPanel">Your browser does not support Objects</object>
              <script>
              function getFileName()
              {
                var e = document.getElementById("dd1");                 // Get the dropdown List
                var strUser = e.options[e.selectedIndex].value;         //Get value of option selected
                
                var attr = document.createAttribute("data");            // Create a "data" attribute
                attr.value = strUser;                                   // Set the value of the data attribute to value recieved
                var object = document.getElementById("objectPanel");    // Get the object element in the document
                object.setAttributeNode(attr);
              }
              
              function playSound() 
              {
                var sound = new Audio('soundFile.mp3');
                sound.play();
              }
              </script>
            </body>
          </html>
          Riley
          Riley-Shannon.com - My Portfolio
          FraktalServices.com - My Company

          Comment


          • #6
            Oh I see thank you, I currently can't test it either but I will do so as soon as I can and thank you for helping.

            I will tell you if this works but I'm sure It'll be closer to what I asked for, rather than me doing it, so thank you.

            (Thanks a lot)

            ~Bloodshot

            Comment


            • #7
              THose docx files are unlikely to open in a browser - also unless the person who clicks them actually gas a recent version of word installed on their computer they are unlikely to open at all - it is generally better to convert documents to PDF for the web.
              Stephen
              Learn Modern JavaScript - http://javascriptexample.net/
              Helping others to solve their computer problem at http://www.felgall.com/

              Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

              Comment


              • #8
                Bloodshot,

                Felgall is very wise. I would listen to what he has to say. He always seems to hit the things I miss (or dont know).

                Feel free to post more if you need more help. Ill be happy to do what I can.

                Good luck!
                Riley
                Riley-Shannon.com - My Portfolio
                FraktalServices.com - My Company

                Comment


                • #9
                  So it can be done the same way, just that the files have to be pdf's?

                  Comment


                  • #10
                    Okay, I see thank you and I'll see what I can do with this, thank you both. :]

                    Comment


                    • #11
                      I just checked the template you have provided for me, thank you. But I was thinking more of Drop Down buttons that are images in a grid formation (I would use a table for this I guess?) But If I do that I think it would kind of break since the table would restrict the user from seeing the file, I'll try explain this better sorry.. >~<'

                      The page would have a grid like pattern of images which when clicked they expand (Kind of like a spoiler) to reveal what that document would have inside but also play mp3. Umh also the images would have a kind of rounded border on them but would there also be a way to make the image smoothly bounce and grow as the user hovers over it? Would there be anything like this be do able?

                      Sorry for the request... I would like to understand how to do this for myself personally but this is also for my own use. None-commercial etc.

                      Thanks for the help and sorry for asking this again I didn't explain it properly sorry... >.<

                      Thank you.

                      ~Bloodshot
                      Last edited by Bloodshot_pico; Sep 7, 2016, 06:06 PM.

                      Comment


                      • #12
                        Originally posted by Bloodshot_pico View Post
                        just that the files have to be pdf's?
                        Word documents would normally be offered for download (and the person would then need a suitable program to open them) whereas most people have a PDF reader installed in their browser.
                        Stephen
                        Learn Modern JavaScript - http://javascriptexample.net/
                        Helping others to solve their computer problem at http://www.felgall.com/

                        Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

                        Comment


                        • #13
                          Ah I see okay, that makes a lot of sense, I just thought the user would have been able to see the file either way.

                          Comment


                          • #14
                            Originally posted by Bloodshot_pico View Post
                            Ah I see okay, that makes a lot of sense, I just thought the user would have been able to see the file either way.
                            The other issue with word documents is that unless you do a save as immediately before uploading then the file will be bigger than it needs to be and will also contain past versions of the content that can be accessed by those who know how.
                            Stephen
                            Learn Modern JavaScript - http://javascriptexample.net/
                            Helping others to solve their computer problem at http://www.felgall.com/

                            Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

                            Comment


                            • #15
                              So, is it more of an accordion like this?

                              Except a picture on top, with the text expanding below it?
                              Riley
                              Riley-Shannon.com - My Portfolio
                              FraktalServices.com - My Company

                              Comment

                              Working...
                              X