Autor Zpráva
nemuzu
Profil
našel jsem kód, který umí náhodně pozicovat rámeček při každém novém načtení stránky.
tento kód bych rád využil tak, že bych akorát chtěl aby místo toho rámečku běhal iframe (který už mám vytvořený)
jsem úplný amatér a svůj web skládám z nalezených kousků po webu ... ;)

nějakou chvíli jsem se to snažil vyřešit sám, ale nevím jak můj iFrame naimportovat místo toho rámečku; jestli to ale vůbec s danými kódy možné.
díky za pomoc.
přikládám kódy...

RÁMEČEK POSKAKUJÍCÍ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

  <title>random positioned box</title>

  <style type="text/css">
html {
    height:100%;
 }
body {
    background-color:#f93;
 }
#randomBox {
    width:322px;
    height:198px;
    border:1px solid #000;
    background-color:#f00;
 }
.pstn {
    position:absolute;
    z-index:99;
 }
</style>

  <script type="text/javascript">

  function init(){
   var obj=document.getElementsByTagName('html')[0];
   var obj1=document.getElementById('randomBox');

     var w=obj.offsetWidth;
   var h=obj.offsetHeight;

     var l=Math.floor(Math.random()*w);
   var t=Math.floor(Math.random()*h);

  if(l>w-obj1.offsetWidth){
   l=w-obj1.offsetWidth;
 }
if(t>h-obj1.offsetHeight){
   t=h-obj1.offsetHeight;
 }
   obj1.style.left=l+'px';
   obj1.style.top=t+'px';
   obj1.className='pstn';
 }

   window.addEventListener?
 window.addEventListener('load',init,false):
 window.attachEvent('onload',init);

  </script>

  </head>
<body>

  <div id="randomBox">

  </div>

  </body>
</html>


MŮJ IFRAME
<div class="omezujici">

   <span class="datum">


  <div id="testDivframe" style="position: absolute; left: 0px; top: 0px; clip:rect(132px 250px 134px 248px);z-index:995; "><iframe scrolling="no" width="400" height="400" src="http://www.fileden.com/files/2011/12/29/3244719/Bez%20n%C3%A1zvu-1.jpg"></iframe>
</div>

   </span>
</div>

  <style>
.omezujici {position: relative}
.datum {position: absolute; top: -300px; left: 333px}
</style>
Darkry
Profil
Místo
  <div id="randomBox">
 
   </div>

zkus dát
 <div id="randomBox" style="clip:rect(132px 250px 134px 248px);z-index:995; "><iframe scrolling="no" width="400" height="400" src="http://www.fileden.com/files/2011/12/29/3244719/Bez%20n%C3%A1zvu-1.jpg"></iframe>
</div>

Nezkoušel jsem to a dělám to z hlavy, možná jsem něco přehlídl.

Jde o to, že ten javascript pracuje s id="randomBox" tak ho musíš dát tomu divu, kterej se má přesouvat a pak odstranit z toho inline stylu ten position, to by mohlo působit komplikace.
nemuzu
Profil
ahoj.
díky za pomoc. funguje to dost dobře!... ale má to pro mě ještě jeden vizuelní problémek...
s tímto kódem trvá, než se načte Iframe a je ho celkem dlouho vidět ve velké velikosti (tak2s)
nějaký onload? ale nevím jak ho do toho nacpat...
chci aby se ten iframe (3*3px) objevil v té náhodné pozici až(nejdříve) po načtení obsahu iFrame...

<!doctype html public "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">



  <style type="text/css">
html {
    height:100%;
 }
body {
 }
#randomBox {
    width:2px;
    height:2px;
    border:0px solid #000;
    background-color:#f00;
 }
.pstn {
    position:absolute;
    z-index:99;
 }
</style>

  <script type="text/javascript">

  function init(){
   var obj=document.getElementsByTagName('html')[0];
   var obj1=document.getElementById('randomBox');

     var w=obj.offsetWidth;
   var h=obj.offsetHeight;

     var l=Math.floor(Math.random()*w);
   var t=Math.floor(Math.random()*h);

  if(l>w-obj1.offsetWidth){
   l=w-obj1.offsetWidth;
 }
if(t>h-obj1.offsetHeight){
   t=h-obj1.offsetHeight;
 }
   obj1.style.left=l+'px';
   obj1.style.top=t+'px';
   obj1.className='pstn';
 }

   window.addEventListener?
 window.addEventListener('load',init,false):
 window.attachEvent('onload',init);

  </script>




  <div id="randomBox" style="clip:rect(131px 251px 134px 248px); "><iframe scrolling="no" width="400" height="400" src="http://mapy.cz/"></iframe>
</div>
nemuzu
Profil
vyřešeno!
myslím, že kdyby to viděl nějaký striktní vyučující programování, asi by omdlel :D...
čau! :)

<style type="text/css">
html {
    height:100%;
 }
body {
 }
#randomBox {

     width:0px;
    height:0px;
    border:0px solid #000;
    background-color:#f00;

  }
.pstn {
    position:absolute;
    z-index:99;
 }
</style>

 <script type="text/javascript">

 function init(){
   var obj=document.getElementsByTagName('html')[0];
   var obj1=document.getElementById('randomBox');

    var w=obj.offsetWidth;
   var h=obj.offsetHeight;

    var l=Math.floor(Math.random()*w);
   var t=Math.floor(Math.random()*h);

 if(l>w-obj1.offsetWidth){
   l=w-obj1.offsetWidth;
 }
if(t>h-obj1.offsetHeight){
   t=h-obj1.offsetHeight;
 }
   obj1.style.left=l+'px';
   obj1.style.top=t+'px';
   obj1.className='pstn';
 }

  window.addEventListener?
 window.addEventListener('load',init,false):
 window.attachEvent('onload',init);


 </script>

 <div id="randomBox" style="clip:rect(131px 251px 134px 248px); "><iframe scrolling="no" id="testFrame" width="400" height="400" src="http://mapy.cz/"></iframe>
</div>

 <script>

 var event_utils = {

   add: function(obj, type, callback) {

     if (obj.addEventListener)

       obj.addEventListener(type, callback, false);

     else if (obj.attachEvent)

       obj.attachEvent("on" + type, callback);

   }

 }


 IFramePreloader = function(id)

 {

   that = this;

   this.id = id;

   this.iframe = document.getElementById(id);

   this.placeholder = this.createPlaceholder();

 }
 IFramePreloader.prototype = {

   init: function()

   {

     this.iframe.style.display = 'none';

     event_utils.add(this.iframe, 'load', function(e) { that.handleLoad(e); });

   },
   createPlaceholder: function()

   {

     // Create placeholder.

     var newElement = document.createElement('div');

     newElement.id = this.id + '-placeholder';

     newElement.appendChild(document.createTextNode(''));

     var parent = this.iframe.parentNode;

     if (parent.lastChild == this.iframe) {

       parent.appendChild(newElement);

     } else {

       parent.insertBefore(newElement, this.iframe.nextSibling);

     }

     return newElement;

   },
   handleLoad: function()

   {

     this.iframe.style.display = 'block';

     this.placeholder.style.display = 'none';

   }

 }

 var preloader = new IFramePreloader('testFrame');

 preloader.init();

 </script> 

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: