CODEWITHSUNDEEP
javascripthtmlcss
Dave
Dave

Reputation: 37

Javascript Layer by source

I want to create an Layer like Layer-ads so i created a code which works if i open the script itself but if i want to open it by source it wont work

the layer should slide from left 200 px into the page

the code to get it from source

<script language="JavaScript" src="http://www.domain.de/content/entwicklung/layer.php" type="text/javascript"></script>

the code itself

        var left=-200;
        var intervalid;
        function changePos(id){
            document.getElementById(id).style.left=left;
        } 
        function moveIn(id){
            if(left>=100){ 
                clearInterval(intervalid);
            } 
            left+=5; 
            changePos(id); 
        } 
        function close(id){
            document.getElementById(id).style.left=-900; 
        } 
        function startInterval(id){
            intervalid=setInterval("moveIn('"+id+"')",10);
        } 


document.write ("<body onload='startInterval('Layer1')'>"); 

document.write ("<div style='position: absolute;left: -200px;top: 50px;width: 800px;height: 600px;border: 1px solid black;background-color: #0071C1;'>");

document.write ("<div style='width: 795px;height: 23px;background-color: lightgrey;border-bottom: 1px solid black;padding-left: 5px;padding-top: 2px;font-family: lucida grande,tahoma,verdana,arial,sans-serif;font-size: 13px; '>");

document.write ("Sponsorenanzeige von"); 

document.write ("<a href='http://www.domain.de' target='_blank' title='title' alt='alt'>domain.de</a>");

document.write ("<a href='javascript:close('Layer1')' style='float: right; border: 1px solid black; margin-right: 5px; margin-top: 3px;' title='Fenster schließen' alt='close'>");

document.write ("<img src='domain.de/images/close.png'></a>");

document.write ("</div>");

document.write ("</div>");

document.write ("</body>");

I allready know that i have to delete the javascript tags if i want to load it by source .. so i get the div but it didnt move as i want to

any suggestions ?

Upvotes: 1

Views: 76

Answers (1)

SilentTremor
SilentTremor

Reputation: 4912

Added id='Layer1' to wrapping div, and call setInterval('Layer1') when html is injected, this solution is not complete, you need to put timer to check when div is defiened in DOM and make it cross browser compatible :)

 var left=-200;
            var intervalid;
            function changePos(id){
                document.getElementById(id).style.left=left;
            } 
            function moveIn(id){
                if(left>=100){ 
                    clearInterval(intervalid);
                } 
                left+=5; 
                changePos(id); 
            } 
            function close(id){
                document.getElementById(id).style.left=-900; 
            } 
            function startInterval(id){
                intervalid=setInterval("moveIn('"+id+"')",10);
            } 


    document.write ("<div id='Layer1' style='position: absolute;left: -200px;top: 50px;width: 800px;height: 600px;border: 1px solid black;background-color: #0071C1;'>");

    document.write ("<div style='width: 795px;height: 23px;background-color: lightgrey;border-bottom: 1px solid black;padding-left: 5px;padding-top: 2px;font-family: lucida grande,tahoma,verdana,arial,sans-serif;font-size: 13px; '>");

    document.write ("Sponsorenanzeige von"); 

    document.write ("<a href='http://www.domain.de' target='_blank' title='title' alt='alt'>domain.de</a>");

    document.write ("<a href='javascript:close('Layer1')' style='float: right; border: 1px solid black; margin-right: 5px; margin-top: 3px;' title='Fenster schließen' alt='close'>");

    document.write ("<img src='domain.de/images/close.png'></a>");

    document.write ("</div>");

    document.write ("</div>");

    document.write ("</body>");

    startInterval('Layer1');

Upvotes: 2

Related Questions