CODEWITHSUNDEEP
javascriptjqueryhtmlflashdownload
cosmichero2025
cosmichero2025

Reputation: 1029

How to make a dynamically changing download link with javascript?

I am making a flash gallery site and I would like the text at the bottom of the page to be a download link for the flashs. This text changes to the title of the current flash that is presently being shown. I would like the href tag to change dynamically to match the file path of a particular flash that is playing so that a user can download it. This is the first time I've ever played around with download links let alone ones that change dynamically with a variable. So in short I would like the link to change to the file path that is present within the links array.

The function that contains my starting code for the dynamic links is called DOWNLOAD

HTML

<body>

    <div id="titleText">
        <h1>Anon Curb</h1>
    </div>
    <div id="flashmovie">
        <object type="application/x-shockwave-flash" data="swfs/welcomeflash.swf">'+
            <param name="movie" value="swfs/welcomeflash.swf">
        </object>
    </div>
    <!-- end #container -->
    <div id="buttonCon">

        <div id="buttons">
            <button id="next">next</button>

            <button id="rand">Random</button>

            <button id="back">Back</button>
        </div>

    </div>

    <div id="titleCon">
        <a href="#" id="downLink">
        <div id="title">Hit random button</div>
        </a>
    </div>
    <!-- end #wrapper -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
    <script src="js/flashcollection.js"></script>
</body>

JAVASCRIPT

$(document).ready(function () {
    var links = [
'swfs/#1%20(Special%20Japanese%20Extended%20Dance%20Mix).swf',
'swfs/$D6.swf',
'swfs/(MAD)%20Huh.swf'
];

 var displaytext = [
'#1 (Special Japanese Extended Dance Mix)',
'$D6',
'(MAD) Huh'
];

var c = 0
    var flashmovie, test, temp;

    function init() {
        flashmovie = document.getElementById('flashmovie');
        document.getElementById('back').onclick = function () {
            if (c == 0) {
                c = links.length;
            }
            c--
            displayFiles();
        }

        document.getElementById('next').onclick = function () {
            if (c == links.length - 1) {
                c = -1;
            }
            c++;
            displayFiles();
        }

        document.getElementById('rand').onclick = function () {
            temp = c;
            while (c == temp) {
                c = Math.floor(Math.random() * links.length);
            }
            displayFiles();
        }
    }

    function displayFiles() {

        test = links[c].substring(links[c].lastIndexOf('.') + 1, links[c].length);
        document.getElementById('title').innerHTML = displaytext[c];

        flashmovie.innerHTML =
            '<object type="application/x-shockwave-flash" data="' + links[c] + '">' +
            '<param name="movie" value="' + links[c] + '">' +
            '<\/object>';
    }

    function download() {
        document.getElementById('rand', 'back', 'next').onclick = function () {
            document.getElementById('downlink').attr("href", links[c]);
        }
    }

    window.addEventListener ?
        window.addEventListener('load', init, false) :
        window.attachEvent('onload', init);
});

Upvotes: 3

Views: 2225

Answers (2)

cosmichero2025
cosmichero2025

Reputation: 1029

The correct javascript

This uses Soltani Neji's edited download function as well as a tag to change the download attribute dosen't work without it. Don't know if that normal or special to me though

var c = 0;
    var flashmovie, test, temp;

    function init() {
        flashmovie = document.getElementById('flashmovie');
        document.getElementById('back').onclick = function () {
            if (c == 0) {
                c = links.length;
            }
            c--
            displayFiles();
            download();
        }

        document.getElementById('next').onclick = function () {
            if (c == links.length - 1) {
                c = -1;
            }
            c++;
            displayFiles();
            download();
        }

        document.getElementById('rand').onclick = function () {
            temp = c;
            while (c == temp) {
                c = Math.floor(Math.random() * links.length);
            }
            displayFiles();
            download();
        }

    }

    function displayFiles() {

        test = links[c].substring(links[c].lastIndexOf('.') + 1, links[c].length);
        document.getElementById('title').innerHTML = displaytext[c];

        flashmovie.innerHTML =
            '<object type="application/x-shockwave-flash" data="' + links[c] + '">' +
            '<param name="movie" value="' + links[c] + '">' +
            '<\/object>';
    }

    function download() {
        document.getElementById('downLink').setAttribute('href', links[c]);
        document.getElementById('downLink').setAttribute('download', displaytext[c]);
    }

    window.addEventListener ?
        window.addEventListener('load', init, false) :
        window.attachEvent('onload', init);
});

Upvotes: 2

Neji Soltani
Neji Soltani

Reputation: 1511

Hi there i sloved that and this is working for me For the HTML file you just need to add the href of the 1st picture because the file always load the 1st one when he starts and you need also to add the attribut download to the tag , so this will be like

<div id="titleCon">

    <a href="unknittingmouse1.swf" id="downLink" download="">
    <div id="title">Hit random button</div>
    </a>
</div>

For the javascript ,you need to edit the download function like this and then call it in every button click event, as like this :

$(document).ready(function () {
    var links = [
'swfs/#1%20(Special%20Japanese%20Extended%20Dance%20Mix).swf',
'swfs/$D6.swf',
'swfs/(MAD)%20Huh.swf'
];

 var displaytext = [
'#1 (Special Japanese Extended Dance Mix)',
'$D6',
'(MAD) Huh'
];

var c = 0
    var flashmovie, test, temp;

    function init() {
        flashmovie = document.getElementById('flashmovie');
        document.getElementById('back').onclick = function () {
            if (c == 0) {
                c = links.length;
            }
            c--
            displayFiles();
            download();
        }

        document.getElementById('next').onclick = function () {
            if (c == links.length - 1) {
                c = -1;
            }
            c++;
            displayFiles();
            download();
        }

        document.getElementById('rand').onclick = function () {
            temp = c;
            while (c == temp) {
                c = Math.floor(Math.random() * links.length);
            }
            displayFiles();
            download();
        }
    }

    function displayFiles() {

        test = links[c].substring(links[c].lastIndexOf('.') + 1, links[c].length);
        document.getElementById('title').innerHTML = displaytext[c];

        flashmovie.innerHTML =
            '<object type="application/x-shockwave-flash" data="' + links[c] + '">' +
            '<param name="movie" value="' + links[c] + '">' +
            '<\/object>';
    }

    function download() {

            document.getElementById('downLink').setAttribute('href', links[c]);
        }


    window.addEventListener ?
        window.addEventListener('load', init, false) :
        window.attachEvent('onload', init);
});`

Hope that helps :)

Upvotes: 1

Related Questions