Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Jquery

Automatically Adding Links To Files In A Folder In JavaScript

Post a Comment
If it's possible, can some one please help me with this. I made YouTube for example. As you see in this PLNKR LINK: http://plnkr.co/edit/44EQKSjP3Gl566wczKL6?p=preview For example

Solution 1: 

<html>
<head>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/264659524/Files/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/264659524/Files/myjs.js"></script>
<style>
.ytid{float:left;margin-right:5px;border:1px solid black}
.clear{clear:both;}
</style>
</head>

<body>

<div class="listids">
    <div class="ytid" data-str="p9zdCra9gCE">video 1</div>
    <div class="ytid" data-str="QrMOu4GU3uU">video 2</div>
 </div>


 <div class="clear"></div>
<br>

<div class="vidarea">
            <div class="load_vid"></div>
        <iframe class="vid_src" data-src="" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" style="width:640px; height:460px;display:none;" allowfullscreen=""></iframe>
            </div>

<br><br><br><br><br><br><br><br><br><br>

<textarea class="embed" data-content="&lt;iframe scrolling=&quot;no&quot; frameborder=&quot;0&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot; allowtransparency=&quot;true&quot; width:640px; height:460px;&quot; allowfullscreen=&quot;&quot; src=&quot;https://www.youtube.com/embed/[ytvidID]&quot;&gt;&lt;/iframe&gt;" onfocus="this.select();" onclick="this.select()">
    &lt;iframe scrolling=&quot;no&quot; frameborder=&quot;0&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot; allowtransparency=&quot;true&quot; width:640px; height:460px;&quot; allowfullscreen=&quot;&quot; src=&quot;https://www.youtube.com/embed/[ytvidID]&quot;&gt;&lt;/iframe&gt;

</textarea>

<script>
    $(document).ready(function(e) {
        $(".vid_src").attr("data-src", "https://www.youtube.com/embed/p9zdCra9gCE");
        var t = "1";
        var n = $(".embed").attr("data-content");
        n = n.replace("[ytvidID]", t);
        $(".embed").html(n);
        $(".listids").slideDown();

        bindEventHandlers();


        $(".embed").keyup(function()
        {
            var valuetoinspect = $(this).val();
            if(valuetoinspect.indexOf(".html") != -1)
            {
                var vidvalue = valuetoinspect.split(".html");
                checkAndMergeVideoListing(vidvalue[0]);
            }
        })
    })

    function checkAndMergeVideoListing(video)
    {
        var count = $(".ytid").length;

        if( $(".ytid[data-str=\""+video+"\"]").attr("data-str") == null)
        {
            var $div = $("<div></div>");
            $div.addClass("ytid");
            $div.attr("data-str",video);
            $div.html("video " + (count+1));

            $(".listids").append($div);

            bindEventHandlers();

            $(".ytid[data-str=\""+video+"\"]").click();
        }
    }

    function bindEventHandlers()
    {
        $(".ytid").unbind("click").click(function(e) {
            var t = $(this).attr("data-str");
            var n = "https://www.youtube.com/embed/" + t + "";
            var r = $(".embed").attr("data-content");
            r = r.replace("[ytvidID]", t);
            $(".embed").html(r);
            $(".vid_src").attr("src", n);
            clearInterval(interval);
            document.querySelector(".load_vid").style.display = "none";
            $(".vid_src").show();
            return
        })
    }
</script>

</body>
</html>

Please check here for demo, assuming in the embed textarea you enter something like p9zdCra9gCE.html. It gets added in the video tab [the same starts playing]. Please let me know if i was not able to grasp your requirement. Hope it helps!


Solution 2:

To help you on your way "a little" I would suggest this:
1. Use php or another SERVER SIDE language. As mentioned in the comments you will not be able to acces the file system on the server with javascript or jquery.
2. Use for example the scandir() method (thats php) to get the contents of your folder. See http://php.net/manual/en/function.scandir.php
3. This will return an array of files and folders in the scanned directory. Use a foreach loop to generate the ytid divs.

If you have no idea what this means I suggest following a tutorial on php on codecademy or another online resource. Good luck!


Post a Comment for "Automatically Adding Links To Files In A Folder In JavaScript"