Salut à tous,
Je cherche à faire un site avec des pages dont les header et footer seraient chargés en Ajax. J'ai adapté un petit tutoriel que j'ai trouvé et cela fonctionne mais du coup toutes les pages ne font plus qu'une et les retours en arrière n'existent plus.
J'ai bien vu qu'avec Jquery adresse, on pouvait rendre possible ces "fonctionnalités" mais avant d'aller plus loin d'en ma découverte de ce type de développement, j'aurais aimé avoir votre avis.
Sachant que mon souhait est avant tout de faire en sorte que le header ne se rafraichisse pas quelque soit le navigateur, la lourdeur du header...bref comme ici sur Alsa créations
, alors merci de votre éclairage :
- si j'arrive à mettre en place jquery adresse, le référencement sera t-il le même comparé à un site "normal" ou chaque page est "indépendante" ?
- cela ne revient-il pas à créer un site avec iframes ?
- le petit tutorial dont je me suis inspiré date de 2008 (voir ci-dessous). Aujourd'hui, est-ce bien la bonne technique à utiliser (au regard de mon souhait) ?
- avec jquery adresse, puis-je également paramétrer la meta description de la page ?
Merci d'avance.
@plus
Zedbar
Je cherche à faire un site avec des pages dont les header et footer seraient chargés en Ajax. J'ai adapté un petit tutoriel que j'ai trouvé et cela fonctionne mais du coup toutes les pages ne font plus qu'une et les retours en arrière n'existent plus.
J'ai bien vu qu'avec Jquery adresse, on pouvait rendre possible ces "fonctionnalités" mais avant d'aller plus loin d'en ma découverte de ce type de développement, j'aurais aimé avoir votre avis.
Sachant que mon souhait est avant tout de faire en sorte que le header ne se rafraichisse pas quelque soit le navigateur, la lourdeur du header...bref comme ici sur Alsa créations
, alors merci de votre éclairage :- si j'arrive à mettre en place jquery adresse, le référencement sera t-il le même comparé à un site "normal" ou chaque page est "indépendante" ?
- cela ne revient-il pas à créer un site avec iframes ?
- le petit tutorial dont je me suis inspiré date de 2008 (voir ci-dessous). Aujourd'hui, est-ce bien la bonne technique à utiliser (au regard de mon souhait) ?
- avec jquery adresse, puis-je également paramétrer la meta description de la page ?
Merci d'avance.
@plus
Zedbar
var advancedJavaScriptSupport = document.createElement && document.getElementsByTagName;
if (advancedJavaScriptSupport)
{
$(initLinks);
$(initShowMenu);
$(initPage);
document.write('<style tyle="text/css">div.hide {display: none;}</style>');
}
function initPage() {
addCell();
initMenu();
initPressLinks();
}
function initLinks() {
$('a').each(function() {
var href = this.href;
if (href.indexOf('.php') > 0) {
if (href.indexOf('menu.php') > -1) {
var menuId = href.substring(href.indexOf('#')+1);
href = href.substring(0, href.indexOf('#'));
}
$(this).click(function(event) {
$.ajax({
url: href,
complete: function(transport) {
$('#page').html(transport.responseText);
var bodyId;
if (href.indexOf('about.php') > -1) {
bodyId = 'bodyAbout';
} else if (href.indexOf('menu.php') > -1) {
bodyId = 'bodyMenu';
$('#'+menuId).show();
//initShowMenu(href);
} else if (href.indexOf('principe.php') > -1) {
bodyId = 'bodyContact';
} else if (href.indexOf('press.php') > -1) {
bodyId = 'bodyPress';
} else {
bodyId = 'bodyHome';
}
$('body').attr('id', bodyId);
initPage();
}
});
//document.location.href = '#header';
return false;
});
}
});
}
function addCell()
{
var x = document.getElementsByTagName('table');
for (var i = 0; i < x.length; i++)
{
if (x[i].className == 'todays')
{
var y = x[i].getElementsByTagName('tr');
for (var j = 0; j < y.length; j++)
{
var td = y[j].childNodes[0];
var marker = document.createElement('td');
var txt = document.createTextNode('-');
marker.appendChild(txt);
marker.className = 'marker';
y[j].insertBefore(marker, td);
}
}
}
}
function showMenuType(id)
{
var x = document.getElementById('menu');
var y = x.getElementsByTagName('div');
for (var i = 0; i < y.length; i++)
{
var div = y[i];
if (div.className.indexOf('hide') == -1) continue;
if (div.id != id)
{
div.style.display = 'none';
}
else
{
div.style.display = 'block';
}
}
}
function initShowMenu() {
if (document.location.hash.length > 1)
{
// the url contains the id of one of the divs, so show it.
var x = document.getElementById(document.location.hash.substring(1));
x.style.display = 'block';
}
}
function initMenu()
{
var x = document.getElementById('menutabs');
if (x)
{
var y = x.getElementsByTagName('a');
for (var i = 0; i < y.length; i++)
{
var link = y[i];
var id = link.href.split('#')[1];
link.destination = id;
link.onclick = function()
{
showMenuType(this.destination);
highlightTab(this);
return false;
}
}
}
}
function highlightTab(tab)
{
var li = tab.parentNode;
var ul = li.parentNode;
var lis = ul.getElementsByTagName('li');
var id = li.id;
for (var i = 0; i < lis.length; i++)
{
if (lis[i].className !== null)
{
lis[i].className = lis[i].className.replace(/\S/g, '');
}
}
li.className = id + 'Activate';
}
function initPressLinks()
{
if (!document.getElementById('pressText')) return;
var x = document.getElementsByTagName('a');
for (var i=0; i < x.length; i++)
{
if (x[i].className == 'pressPiece')
{
x[i].onclick = function()
{
var width = parseInt(this.getAttribute('xsize'));
var height = parseInt(this.getAttribute('ysize'));
// this should account for the approx. browser padding in a window
width += 16;
height += 16;
pressPop(this.href, width, height);
return false;
}
}
}
}
function pressPop(link, width, height)
{
window.open(link, 'amandine','width=' + width + ', height=' + height + ', scrollbars=yes, resizable=yes, toolbar=no');
}