Dyck
Dyck

Reputation: 2675

Inserting Javascript into HTML Javascript

I'm trying to insert this Javascript code via. Google:

<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1362706866260-0'); });
</script>

into this JavaScript / HTML code:

var theDivs = {
      "div1": makeSpecialBox("doublearticlewrapperadmp", 
              '<div class="articlewrapper" id="div-gpt-ad-1362706866260-0">
              <div class="entry-image"></div></div>'),
      ...
};

I'd like to insert the first code listed above between my "entry-image" div. I tried simply doing this:

var theDivs = {
      "div1": makeSpecialBox("doublearticlewrapperadmp", 
'<div class="articlewrapper" id="div-gpt-ad-1362706866260-0">
<div class="entry-image">googletag.cmd.push(function() { googletag.display('div-gpt-ad-1362706866260-0'); });</div></div>'),

Adding the straight up javascript code from Google within my HTML part of my javascript code simply does not work, with or without the script tags :( How would I go around this issue and correctly insert my above Google javascript code into my existing code?

Updated Current Code:

<script type="text/javascript">
$(document).ready(function () {
var $window = $(window);
var resized = false;
var resized500 = false;
var resized600 = false;
var resized700 = false;
var resized800 = false;

var sadfdsf = true;
var theDivs = {
        "div1": makeSpecialBox("doublearticlewrapperadmp", '<div class="articlewrapper" id="div-gpt-ad-1362706866260-0"><div class="entry-image"><script type="text/javascript">googletag.cmd.push(function() { googletag.display("div-gpt-ad-1362706866260-0"); });</script></div></div>'),

        "div2": makeSpecialBox("doublearticlewrapperadmp", '<div class="articlewrapper"></div></div>'),

        "div3": makeSpecialBox("doublearticlewrapperadmp", '<div class="articlewrapper"></div></div>'),

        "div4": makeSpecialBox("doublearticlewrapperadmp", '<div class="articlewrapper"></div></div>'),

        "div5": makeSpecialBox("doublearticlewrapperadmp", '<div class="articlewrapper"></div></div>'),

function makeSpecialBox(className, content) {
    // Create a new special box with the class name and the content
    var specialBox = $("<div />").addClass(className).html(content);
    // Return the special box
    return specialBox;
}

function removeSpecialBoxes() {
    // Get the special boxes
    var specialBoxes = $("#wrapper div").filter("[class^=doublearticlewrapperadmp]");
    // Remove the special boxes
    specialBoxes.remove();
}

function setNthPosition(theDiv, newPos) {
    // Generate the special box
    var theClone = theDivs["div" + theDiv].clone();
    // Get the nth-child
    var nthChild = $("#wrapper > div:nth-of-type(" + newPos + ")");
    // Append the special box after the nth-child
    nthChild.after(theClone);
}

function checkWidth() {
    var windowsize = $window.width();
    if (windowsize >= 1442) {
        //if the window is in between the sizes of 440 and 500px
        //if(resized==false){
        // Remove special boxes
        removeSpecialBoxes();
        // Reposition
        setNthPosition(1, 9);
        setNthPosition(2, 15);
        setNthPosition(3, 29);
        setNthPosition(4, 35);
        resized = true;
        //  }
    }

    windowsize = $window.width();
    if (windowsize > 1278 && windowsize < 1441)  {
        //if the window is in between the sizes of 500 and 600px
        // if(resized500==false){
        // Remove special boxes
        removeSpecialBoxes();
        // Reposition
        setNthPosition(1, 7);
        setNthPosition(2, 16);
        setNthPosition(3, 31);
        setNthPosition(4, 40);
        resized500 = true;

        // }
    }

    if (windowsize < 1278) {
        //if the window is in between the sizes of 600 and 700px
        // if(resized600==false){
        // Remove special boxes
        removeSpecialBoxes();
        // Reposition
        setNthPosition(1, 5);
        setNthPosition(2, 15);
        setNthPosition(3, 29);
        setNthPosition(4, 39);
        resized600 = true;

        //}
    }
}

// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});

`

Upvotes: 0

Views: 901

Answers (1)

Jace
Jace

Reputation: 3072

You forgot your script tags:

var theDivs = {
  "div1": makeSpecialBox("doublearticlewrapperadmp", 
  '<div class="articlewrapper" id="div-gpt-ad-1362706866260-0">
  <div class="entry-image"><script type="text/javascript">googletag.cmd.push(function() { googletag.display("div-gpt-ad-1362706866260-0"); });</script></div></div>'),

Also be aware of your usage of single/double quotes. Some may or may not need escaping too (although it seems like you won't need to...), but I did change the single quotes to double quotes around in the googletag.display("div-gpt-ad-1362706866260-0") part.

EDIT:

You might find your solution here: Script tag in JavaScript string

var test = '...... </scr'+'ipt>......';

That little trick might be able to get around the browser parsing your tag.

So in your case:

var theDivs = {
  "div1": makeSpecialBox("doublearticlewrapperadmp", 
  '<div class="articlewrapper" id="div-gpt-ad-1362706866260-0">
  <div class="entry-image"><script type="text/javascript">googletag.cmd.push(function() { googletag.display("div-gpt-ad-1362706866260-0"); });</scr' + 'ipt></div></div>'),

Upvotes: 1

Related Questions