Run script in a div

Question

Run script in a div

Navigation

#1 by (4 votes)
#2 by (1 votes)

3

I own this script. What should I add in it so that, when it runs, it appears in a <div> ?

Here's the script:

// Which flash versions are needed for given format
var FLASH_VERSIONS = {
    '7/0/0': [5],
    '9/0/115': [18, 22, 33, 34, 35, 37, 38, 59, 78, 82, 83, 84, 85, 120, 121],
    '10/1/0': [52, 53, 54, 60],
    };

// Regex to extract the video format
var RE_ITAG = /&itag=([0-9]*)&/i;

function get_fmt(content) {
    var fmt = new Object();
    fmt.list = new Array();
    fmt.stream_map = new Array();

    for (var i=0; i < content.length; i++) {
        var url = content[i]['url'];
        if (url.search("") == -1)
            continue;

        var matches = RE_ITAG.exec(url);
        var itag = matches[1];

        var resolution = '7/0/0';
        for (var possible_resolution in FLASH_VERSIONS.length) {
            if (FLASH_VERSIONS[possible_resolution].indexOf(itag)) {
                resolution = possible_resolution;
            }
        }

        fmt.list.push(itag+'/'+String(content[i].width)+'x'+String(content[i].height)+'/'+resolution);
        fmt.stream_map.push(itag+'|'+content[i].url.replace(/,/g, '%2C'));
    }

    fmt.list.reverse();
    fmt.stream_map.reverse();
    return fmt;
}

function get_embed(content) {
    var fmt = get_fmt(content);
    var flashvars = new Array();
    flashvars.push('fs=1');
    flashvars.push('hl=en');
    flashvars.push('autoplay=1');
    flashvars.push('ps=');
    flashvars.push('playerapiid=uniquePlayerId');
    flashvars.push('fmt_list='+encodeURIComponent(fmt.list.join()));
    flashvars.push('fmt_stream_map='+encodeURIComponent(fmt.stream_map.join()));
    flashvars.push('');
    flashvars.push('t=1');
    flashvars.push('vq=large');
    flashvars.push('auth_timeout=86400000000');

    var embed = document.createElement('');
    embed.setAttribute("src", "");
    embed.setAttribute("type", "application/x-shockwave-flash");
    embed.setAttribute("allowfullscreen", "true");
    embed.setAttribute("allowscriptaccess", "always");
    embed.setAttribute("scale", "noScale");
    embed.setAttribute("wmode", "opaque");
    embed.setAttribute("flashvars", flashvars.join("&"));
    embed.setAttribute("width", "100%");
    embed.setAttribute("height", "100%");
    return embed;
}

var ts = Math.round((new Date()).getTime() / 1000);
var script = document.createElement('script');
var hash = document.location.hash;
var id = hash.substr(1,hash.length);
var head = document.getElementsByTagName('head').item(0);
var script = document.createElement('script');

script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'https://');
head.appendChild(script);

myFunction(); // Fails because it hasn't loaded from my.js yet.    
    window.onload = function() {
        // Works most of the time but not all of the time.
        // Especially if my.js injects another script that contains myFunction().
        myFunction();
    };

How do I load it into a html page within the specified div?

Example:

<div id="script" class="#">/div>

javascript html

asked by anonymous 18.08.2014 / 18:34

2 answers

1

I suggest using the JQuery library to pro compatibility with various browsers and can use code:

link to include lib:

<script src ="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Javascript code:

$(function() {
  $('#script').append('<div></div>');
});

You can take a look at JS Fiddle: link

18.08.2014 / 19:22

HOVER effect on a li and the components inside it Check jQuery variables?

score 4 · Accepted Answer

Remove this part of the script, it is unnecessary:

myFunction(); // Fails because it hasn't loaded from my.js yet.

window.onload = function() {
    // Works most of the time but not all of the time.
    // Especially if my.js injects another script that contains myFunction().
    myFunction();
};

Now notice this line:

script.setAttribute('src', 'https://?authuser=0&alt=jsonm&urlredir=1&commentreason=1&fd=shapes&thumbsize=d&max-results=100&callback=picasa_callback&t=');

In particular, here:

callback=picasa_callback

When the script is entered, the function named callback will be invoked. In this case, it is the picasa_callback function. Now see what it looks like:

function picasa_callback(obj) {
    document.body.appendChild(get_embed(obj['feed']['media']['content']));
}

It takes HTML (generated by get_embed ) and inserts at the end of <body> , with document.body.appendChild . If you want to insert this HTML into your div with id script , append it to it and not the body:

function picasa_callback(obj) {
    document.getElementById('script').appendChild(get_embed(obj['feed']['media']['content']));
}

Important: To ensure that the div exists when the callback is called, include your script at the end of the HTML. Make sure the script is after <div id="script" class="#"></div> in the source code.