2
I need to develop a site in Wordpress, where I have to use the header (menu) of another site also in Wordpress.
One solution I found was to soak the same via Iframe, however, would have a delay a little different from the other contents of the site.
There is another alternative to this?
0
I won’t say it’s impossible, but I can’t see any way to do it natively in WP... if it was any specific content, like a menu or post it would even give.
I think it has to be iframe even, the solution I thought is to make an image that is above the iframe, as close as possible to the content that will pull from the other site. Once loaded this content in the iframe, fade the image and show the iframe. The image needs to be removed too, otherwise it blocks the interaction with iframe.
Depending on the graphic art of the image and the similarity with the content of the iframe, the transition is very reasonable.
I made this proof of concept, can not put as Stack Snippet or Jsfiddle as they do not accept to show iframes. In this test, the content is the Jsfiddle website (which accepted to work within an iframe) and the image is a snapshot I made the iframe loaded on the test page.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#imagem {
z-index:10;
background-image: url("http://i.stack.imgur.com/Otse0.png");
width: 400px;
height: 250px;
position: absolute;
}
#menu {
z-index:1;
width: 400px;
height: 250px;
position: absolute;
}
</style>
<title>Teste iframe com transição ao carregar</title>
<script type='text/javascript'>
function fadeOut( el, duration ) {
/**
* @author: http://stackoverflow.com/a/867620/1287812
* @param el - Elemento para fazer fadeout.
* @param duration - Duração da animação em milisegundos.
*/
var step = 10 / duration,
opacity = 1;
function next() {
if (opacity <= 0) { return; }
el.style.opacity = ( opacity -= step );
setTimeout(next, 10);
}
next();
}
function remove( id ) {
/* @author: http://stackoverflow.com/a/3391282/1287812 */
return (elem=document.getElementById(id)).parentNode.removeChild(elem);
}
window.onload=function(){
var oIframe = document.getElementById('iframe');
oIframe.onload = function() {
var image = document.getElementById('imagem');
fadeOut(image, 500);
// Remover a imagem um pouco depois do fade
setTimeout(function(){ remove('imagem'); },600);
}
oIframe.src = 'https://jsfiddle.net/';
}
</script>
</head>
<body>
<div id="frame-total">
<div id="imagem"></div>
<div id="menu">
<iframe id="iframe" src="" width="400" height="250" frameBorder="0"></iframe>
</div>
</div>
</body>
</html>
Interesting article I found while researching: Iframe loading Techniques and performance
Browser other questions tagged php html5 wordpress header
You are not signed in. Login or sign up in order to post.
Another site == site that is hosted elsewhere, to which you have no access?
– Caio Felipe Pereira
Yes, this in gold domain, however, I have access to the contents of it.
– Júlio Rodrigues
and you can’t host this new header on your site? make a file
header-novoheader.phpand make the callget_header('novoheader')?– Caio Felipe Pereira
But should I do so, it will pick up all dynamic content from this original site even though it is outside the original structure?
– Júlio Rodrigues
No, that’s why I asked
– Caio Felipe Pereira
Puts.. Would need to use the same Header structure used in another theme, and put it as my header on this new site... I have access to the content but I don’t know any other alternative than via iframe..
– Júlio Rodrigues
If you want the changes to persist from one site to another, the hole is deeper, I believe. I will give a thought here
– Caio Felipe Pereira
beauty... I still haven’t found a plausible solution :(
– Júlio Rodrigues