Including <div></div> in a library

I have a few "div" sections that are called by my Javascript function using document.getElementById('ID_NAME').style.display='block'.

My question, is there a way to include these "div's" in a .js, .css or another type of library sourced from my header?

If I copy and paste the div code directly into the head it works fine, however, when I try to include it in my .js or .css libraries it wont execute.

CODE

<script type="text/javascript>

function myFunction() {
var a = window.location.href;
var b = "http://www.myblog.com/";

if (a == b) {
setTimeout(function(){ 
document.getElementById('EXAMPLE1').style.display='block';}, 3000);}} 

window.onload = myFunction();

</script>

<div id="EXAMPLE1" class="offer_content">
<embed src="http://www.domain.com/" width="100%" 
height="100%">
</div>

I know there has to be a way to insert "div" code into a library. I need some of my clients to "src" it into their own websites easily.

Much appreciated Stack community!

Jon

Answers


In another separate JS file, divs.js:

divs.js

function changeDiv(){
    document.getElementById('EXAMPLE1').style.display='block';
}

index.html

<script src="divs.js"></script>
<script type="text/javascript">

function myFunction() {
var a = window.location.href;
var b = "http://www.myblog.com/";

if (a == b) {
    setTimeout(changeDiv, 3000);
}

window.onload = myFunction();

</script>

<div id="EXAMPLE1" class="offer_content">
<embed src="http://www.domain.com/" width="100%" 
height="100%">
</div>

Also, there seems to be syntax errors in your code. Try to run this file with a JS console (use something like "Firebug") for debugging purposes.


I wanted to post that I finally worked this problem out. While my Javascript library wouldn't support code with some code in it, I was able to convert everything with DOM.

OLD CODE::

<div id="EXAMPLE1" class="offer_content">
<embed src="http://www.domain.com/" width="100%" 
height="100%">
</div>

NEW CODE::

var embed = document.createElement('embed');
embed.setAttribute("src", "http://www.domain.com/");
embed.setAttribute("width", "100%"); 
embed.setAttribute("height", "100%");

var content = document.createElement('div');
content.id = 'EXAMPLE1';
content.className = 'offer_content';

content.appendChild(embed);

document.getElementsByTagName('body')[0].appendChild(content);

Need Your Help

Multiplayer game server model - world replication and object updates

c++ replication real-time multiplayer

I'm currently trying to write (as a part of "simple multiplayer game as an example of real time client-server application" assignment) multiplayer game server for simple fast-paced game for few pla...

Border-top not inline, border-bottom inline

html css border

I have a simple image which I want to give a border-top and border bottom. This is my code:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.