Image flashes and then disappears HTML -- [Question Asked]

Posted on

Issue

I have a simple code that builds the image path and then fetches it from my CDN, but whenever I open the page on a localhost server, the image flashes and then disappears. Am I doing something wrong with my CSS?

HTML

<!DOCTYPE html>
<html>
<head>
<!-- One G Fruit Salad Script -->
<script>
//VarLoader
var imgsource = document.getElementById("imgad");
var htmlsource = document.getElementById("htmlad");



//FuncLoader
//Pineapple is the final extension of the URL
var pineapple = "";
function getImgType (type) {
  if (type == "html") {
    pineapple = ".html";
  } else if (type == "png") {
    pineapple = ".png";
  } else if (type == "jpg") {
    pineapple = ".jpg";
  } else if (type == "jpeg") {
    pineapple = ".jpeg";
  } else if (type == "gif") {
    pineapple = ".gif";
  } else if (type == "htm") {
    pineapple = ".htm";
  } else {
    System.out.println("Error");
  };
};
//Post Ad Code
function postAd(creative, preset) {
  if (preset == ".html") {
    document.getElementById("htmlad").src = passionfruit;
  }
  else if (preset == ".htm") {
    document.getElementById("htmlad").src = passionfruit;
  }
  else {
    document.getElementById("imgad").src = passionfruit;
  }
};
// ### One-G FruitSalad ## //
//CodeLoader

//Mango is the URL that was passed, in raw format
var mango = window.location.search;
//Papaya is the content of the querystring. Use this in querying parameters
var papaya = new URLSearchParams(mango);
//Apple is the creativeid of the creative
var apple = papaya.get('cid');
var melon = papaya.get('type');
//Initial Creative link. Change as the CDN Endpoint changes
getImgType(melon);
var passionfruit = "https://storefrontads.fra1.cdn.digitaloceanspaces.com/creatives/" + apple + pineapple;
//Fruit Salad is Mixed in the body
//Make sure to include pathname for HunterTagger
</script>
<style>
body{
  height:250px;
  width:300px;
}
div {
  width: 300px;
  height: 250px;
}
#imgad {
  height: 250px;
  width: 300px;
}
#LogoIMG {
  padding-left: 268px;
  padding-bottom: 32px;
}
</style>
</head>
<body>
  <div id="adimg" class="AdImgClass">
    <a href="https://google.com/" target="_blank">
      <img id="imgad" src=""></img>
    </a>
  </div>
  <div id="OneGLogo" class="LogoClass">
    <a href="https://storefront.one-g.net/servedbyoneg/" target="_blank">
      <img id="LogoIMG" src="https://storefrontads.fra1.cdn.digitaloceanspaces.com/one-g.png">
    </a>
  </div>
  <script>
  //Mix fruit Salad
  postAd(passionfruit, pineapple);
  </script>
</body>

I’m not entirely sure what I am doing wrong. Looking at other posts didn’t help. The source looks all right, and everything else works, it builds the link just fine.

Solution

When you open the console you can see an error that says that System is not defined (You can open the console with the F12 key in the browser).
To write out debug log messages in javascript you have to use console.log instead of System.out.println.

So your code should look like this:

<!DOCTYPE html>
<html>
<head>
<!-- One G Fruit Salad Script -->
<script>
//VarLoader
var imgsource = document.getElementById("imgad");
var htmlsource = document.getElementById("htmlad");



//FuncLoader
//Pineapple is the final extension of the URL
var pineapple = "";
function getImgType (type) {
  if (type == "html") {
    pineapple = ".html";
  } else if (type == "png") {
    pineapple = ".png";
  } else if (type == "jpg") {
    pineapple = ".jpg";
  } else if (type == "jpeg") {
    pineapple = ".jpeg";
  } else if (type == "gif") {
    pineapple = ".gif";
  } else if (type == "htm") {
    pineapple = ".htm";
  } else {
    console.log("Error");
  };
};
//Post Ad Code
function postAd(creative, preset) {
  if (preset == ".html") {
    document.getElementById("htmlad").src = passionfruit;
  }
  else if (preset == ".htm") {
    document.getElementById("htmlad").src = passionfruit;
  }
  else {
    document.getElementById("imgad").src = passionfruit;
  }
};
// ### One-G FruitSalad ## //
//CodeLoader

//Mango is the URL that was passed, in raw format
var mango = window.location.search;
//Papaya is the content of the querystring. Use this in querying parameters
var papaya = new URLSearchParams(mango);
//Apple is the creativeid of the creative
var apple = papaya.get('cid');
var melon = papaya.get('type');
//Initial Creative link. Change as the CDN Endpoint changes
getImgType(melon);
var passionfruit = "https://storefrontads.fra1.cdn.digitaloceanspaces.com/creatives/" + apple + pineapple;
//Fruit Salad is Mixed in the body
//Make sure to include pathname for HunterTagger
</script>
<style>
body{
  height:250px;
  width:300px;
}
div {
  width: 300px;
  height: 250px;
}
#imgad {
  height: 250px;
  width: 300px;
}
#LogoIMG {
  padding-left: 268px;
  padding-bottom: 32px;
}
</style>
</head>
<body>
  <div id="adimg" class="AdImgClass">
    <a href="https://google.com/" target="_blank">
      <img id="imgad" src=""></img>
    </a>
  </div>
  <div id="OneGLogo" class="LogoClass">
    <a href="https://storefront.one-g.net/servedbyoneg/" target="_blank">
      <img id="LogoIMG" src="https://storefrontads.fra1.cdn.digitaloceanspaces.com/one-g.png">
    </a>
  </div>
  <script>
  //Mix fruit Salad
  postAd(passionfruit, pineapple);
  </script>
</body>

Also: disable your adBlocker! id="adimg" will trigger it!

Answered By – IchEben

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Posted in CSS

What is CSS?

Cascading Style Sheets, affectionately alluded to as CSS, is a basic plan language expected to work on the most common way of making website pages satisfactory.

CSS handles the look and feel a piece of a site page. Utilizing CSS, you have some control over the shade of the text, the style of text styles, the dispersing between passages, how segments are measured and spread out, what foundation pictures or tones are utilized, design designs,variations in show for various gadgets and screen sizes as well as different impacts.

CSS represents Cascading Style Sheets. It is a template language which is utilized to depict the look and organizing of a report written in markup language. It gives an extra component to HTML. It is for the most part utilized with HTML to change the style of website pages and UIs.

CSS is not difficult to learn and see however it gives strong command over the introduction of a HTML archive. Most normally, CSS is joined with the markup dialects HTML or XHTML.

Before CSS, labels like textual style, variety, foundation style, component arrangements, boundary and size must be rehashed on each website page. This was an extremely lengthy interaction. For instance: If you are fostering a huge site where textual styles and variety data are added on each and every page, it will be turned into a long and costly cycle. CSS was made to tackle this issue. It was a W3C suggestion.

CSS is utilized alongside HTML and JavaScript in many sites to make UIs for web applications and UIs for the majority versatile applications.
Who we are?

We are team of software engineers in multiple domains like Programming and coding, Fundamentals of computer science, Design and architecture, Algorithms and data structures, Information analysis, Debugging software and Testing software. We are working on Systems developer and application developer. We are curious, methodical, rational, analytical, and logical. Some of us are also conventional, meaning we're conscientious and conservative.

Answer collected from stackoverflow and other sources, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0