Usando falso iFrame

Novamente, hoje irei postar um tutorial que foi pedido através do formulários de sugestões. O tutorial ensina como fazer um “falso iFrame”.

A primeira coisa a fazer antes de começar o tutorial (por favor, não se esqueçam de fazer isso, pois depois não poderão reclamar que seus posts sumiram…): Guarde uma cópia do código do seu theme no seu computador.

Depois de salvar a cópia, você precisará descobrir qual o ID da DIV que delimita seus posts. Esta ID pode variar bastante de theme para theme, mas tem uma “dica” que pode te ajudar a descobrir:

Procure por {block:Posts} no seu theme, logo acima dele, deverá haver uma tag desta forma (não se esqueça que “{block:Posts}” pode aparecer várias vezes no theme, você tem que perceber quando é o certo): <div id=”NOME DA ID">

Pronto, copie este nome da ID (guarde-o nom bloco de notas em algum outro lugar para não esquecer). Agora você precisará substituir o texto em negrito abaixo pelo NOME DA ID e colar o código antes de </head>:

<script type="text/javascript">
function changeNavigation(id) {document.getElementById('NOME DA ID').innerHTML=document.getElementById(id).innerHTML}
</script>

Agora, procure a parte do código onde você quer que apareça o menu para alternar entre os iFrames falsos, e cole isso:

<span onClick="changeNavigation('01')">Nome do link</span>
<span onClick="changeNavigation('02')">Nome do link</span>
<span onClick="changeNavigation('03')">Nome do link</span>


Obs.: O menu não se restringe a apenas 3 itens, para criar mais, basta copiar alguma das linhas do menu, aumentando apenas o número (por exemplo, para criar mais um, você deve por um com o número 04).

Agora cole isso antes de </body>:

<div >
Conteúdo do iFrame 1
</div>

<div >
Conteúdo do iFrame 2
</div>

<div >
Conteúdo do iFrame 3
</div>


Obs.: Se você criou mais um item no menu, não se esqueça de criar mais um iFrame, para isso, basta copiar algum dos itens da lista de conteúdos e susbtituir o número (pelo mesmo número que está no menu).

Depois é só salvar =)

Este tutorial foi baseado em um tutorial deste Tumblr: She was Lo <33

E sugerido por este Tumblr: Chuva de Amor

vimeo

This is the best wedding video I have ever seen…forget all those weird synchronized dancing videos you see on youtube…THIS is the real deal!!

*ya, ill admit it…I cried.

Resizing multiple iFrames in a page

not a big fan of iframe..really..

don’t even know why I’m using iframes right now..can’t think of better way..

current take:

get window size, reduce it to 80%, setInterval 

in my crappy code:

$(document).ready( function() {

    setInterval(setIframeSize, 5);

});

function setIframeSize() {

    $(‘iframe’).height($(window).height()*.8);

}

swear I will remove iframes later on with all ajaxed single page

transparency in iframe and how to edit it

the path must be relative and in the same domain

<iframe src=”login.php” width=”464” height=”291” allowtransparency=”true” frameborder=”0” id=”iframe_login”></iframe>

<script>
var myFrame = $(‘#iframe_login’);
myFrame.load(function(){
myFrame.css({“position”:”absolute”,”overflow”:”hidden”,”left”:”120px”})
        .contents().find(‘body’).css(“background”,”none”)
                                 .find(“.box”).css(“width”,”auto”)
                                 .find(“.box_top”).remove()
                                 .end().find(“#landing_call_to_action”).css(“margin”,”0”);
});
</script>

How to change start time of YouTube videos using iframe embed codes

In order to set a new start time for the video you first need to calculate the point in time that you would like the video to start. Unfortunately, unlike the URL example that allows you to set minutes and seconds this method uses seconds only. Therefore to make this embedded version of our example video start at 3 minutes 05 seconds we would need to set the time to 185 seconds. To add this start time to the code you need to delete anything that comes after the “?” of the video code, in this case “rel=0”.I have underlined the areas that you need to remove in the above line of code. To set the new start point of your video you need to replace this vacant space with “start=TIME” which in this case is 185. Therefore the code I have added to this example is “start=185” as shown in italic and bold in the code below:

<iframe width=”560” height=”349” src=”http://www.youtube.com/embed/BogitQpXh8A?start=185 frameborder=”0” allowfullscreen ></iframe>

Well, I’ve started following staff.tumblr.com because little did I know, they had change the way photosets were being shown (they use to be flash, now they are in an iframe). I like the new set up better (thanks tumblr). The problem was the class “photoset” is on the containing div and on the iframe, causing a problem of double padding, and making my blog look wonky. It was a simple fix ( iframe.photoset {padding: 0;} ) but it had been wrong since July. Now I will hopefully know all about these changes as they happen and I won’t be embarrassed over how my blog looked for several months any longer.

If you have a custom theme and never look at your own blog, you might want to look into this. Oh, and if you are that person who keeps scrapping my blog, you might want to get the new update - or you know you could just ASK for it. 

Falso IFrame na sidebar

Para fazer falso iframe na sidebar é bem fácil, para quem não sabe o que é entre no meu tumblr pessoal !

Bom vamos lá , primeiro cole o código abaixo, antes de </style>

/*** MENU ***/

un {font-family: verdana; letter-spacing: 1px; font-size: 11px; line-height: 13px; display: inline-block; background: #696969; color:#fff; 
width: 28%;  float: left; padding: 5px; margin: 1px; text-align: center; text-transform: uppercase; 

 text-shadow: 2px 2px 3px #eee;}


un:hover {font-family: verdana; letter-spacing: 2px; font-size: 11px; line-height: 13px; display: inline-block; background:#000; color:#fff;
 width: 28%; float: left; padding: 5px; margin: 1px; text-align: center; text-transform: uppercase; }

/*** CAIXA DA SIDEBAR ***/
.caixasidebar {position: absoluted; width:350px; z-index:2; left: 40px; top: 230px; overflow-x: hidden; overflow-y: hidden; font-style: tahoma; 
font-size: 11px; color: #000; text-align:justify; background-color: #FFF; padding:6px; text-shadow: 0 1px 1px #eee ; color:#000;
 line-height: 17px; border: 1px solid #696969;  box-shadow: 0 0 3em #eee;}

Agora cole o código aonde você quer que apareça a sidebar

<div > <div > <div class="caixasidebar"> Coloque um texto ou uma frase , ou o que você goste , fique a vontade :) </div></div></div>

Agora coloque este código aonde quer que o menu apareça

<span onClick="document.getElementById('main').innerHTML= document.getElementById('01').innerHTML" title="NOME"><un>NOME</un></span>

Agora coloque este código antes de </body>

<div ><div class="caixasidebar"> CONTEÚDO AQUI </div></div></div></div></div></div>

OBS Pode adicionar quantos menus quiser , mude o 01 para 02, 03 e etc ..

Se lhe for útil credite !

Shadowbox, Fancybox o altribox non caricano più Google Maps!?

 

A seguito di un aggiornamento di Google Maps potrebbe capitare che la visualizzazione delle mappe all’interno dei popup box jquery produca l’errore:

Refused to display document because display forbidden by X-Frame-Options

È capitato in alcuni dei nostri siti web che utilizzano le librerie Fancybox e Shadowbox.

Per fare in modo che la mappa si carichi correttamente è sufficiente aggiungere &amp;output=embed all’interno dell’attributo href. Ad esempio:

<iframe width="425" height="350" frameborder="0" scrolling="no" 
marginheight="0" marginwidth="0"
src="http://www.google.it/maps?f=q&amp;source=s_q&amp;hl=it&amp;geocode=&amp;q=studioaqua&amp;aq=&amp;sll=41.442726,12.392578&amp;sspn=29.566089,39.770508&amp;vpsrc=0&amp;ie=UTF8&amp;hq=studioaqua&amp;hnear=&amp;t=m&amp;ll=45.677059,11.9264&amp;spn=0.071946,0.071946&amp;output=embed"></iframe><br /><small><a href="http://www.google.it/maps?f=q&amp;source=embed&amp;hl=it&amp;geocode=&amp;q=studioaqua&amp;aq=&amp;sll=41.442726,12.392578&amp;sspn=29.566089,39.770508&amp;vpsrc=0&amp;ie=UTF8&amp;hq=studioaqua&amp;hnear=&amp;t=m&amp;ll=45.677059,11.9264&amp;spn=0.071946,0.071946" >
Visualizzazione ingrandita della mappa</a></small>
クロスドメインでiframeの高さを自動調節するjavascript

年末から異なるドメイン間でiframeの入れ子になってる方の高さを自動調節する方法を考えていました。

<参考>

  1. クロスドメインでiframeの高さを自動調節する方法
  2. iframeの高さをコンテンツにあわせる
  3. window.postMessage() を使って、クロスドメインの iframe の高さを設定する検証

1の文章中に、”クロスドメインでの確認はしていませんが、恐らく大丈夫じゃないかと思います。(駄目だったらごめんなさい。)”なんて書いてあるので期待したら、

https://github.com/house9/jquery-iframe-auto-height

SummaryにWill NOT work if the iframe contains a page from another domainって書いてあります。今後対応しそうですが、jQuery iframe auto height pluginはクロスドメインには非対応です。

結果的に3で解決。ただし、window.postMessage()は同一プロトコル上で安全にクロスドメイン通信を可能にするためのメソッドなので、http→https(SSl)等は動作しません。

http://mohumohu/parent.html
http://hogehoge.com/iframe.html

上記のようにmohumohuとhogehogeという別ドメインにファイルが置かれている状態で、parent.htmlにiframe.htmlを表示させたい場合、

parent.html

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
    window.addEventListener("message", receiveSize, false);
    function receiveSize(e) {
        if (e.origin === "http://hogehoge.com") // for security: set this to the domain of the iframe - use e.uri if you need more specificity
            document.getElementById("bar").style.height = e.data + "px";
    }
</script>
</head>
<body>
    <iframe src="http://hogehoge.com/iframe.html" scrolling="no" >
    </iframe>
</body>
</html>

iframe.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<script type="text/javascript">
    window.addEventListener("load", postSize, false);
    function postSize(e){
        var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
        if (typeof target != "undefined" && document.body.scrollHeight)
            target.postMessage(document.getElementById("foo").scrollHeight, "*");
    }

</script>
</head>
<body>

これでできました。読み込む方も iframeを表示させる親の方もPHPでもhtmlでも大丈夫です。