Redimentionnement et Repositionnement d'un DIV

Signaler
Messages postés
262
Date d'inscription
mardi 26 février 2002
Statut
Membre
Dernière intervention
27 février 2012
-
Bonjour,

Je voudrais superposer un div d'une dimension précise sur une vidéo et lorsque je suis en mode "plein écran" ce div devrait se redimensionner et se repositionner.

Je suis presque arrivé. Toutefois j'ai un décalage uniquement sur le positionnement de la hauteur selon la taille de la fenêtre.

A noter que le mode plein écran c'est juste que la vidéo occupe tout l'écran du navigateur et non celui de l'écran de l'ordinateur.

D'avance merci pour votre aide.
Fabiano


Voici mon code :


var player={

interplay:'vide',
elfull:null,
total:1,
PositionChapitre:0,
PositionPiste:0,


CurrentGetStyle:function(elem, cssprop, cssprop2){ // Fonction qui récupère les valeurs de la feuille de style
 // IE
 if (elem.currentStyle) {
   return elem.currentStyle[cssprop];
 // other browsers
 } else if (document.defaultView && document.defaultView.getComputedStyle) {
   return document.defaultView.getComputedStyle(elem,null).getPropertyValue(cssprop2);
 // fallback
 } else {
   return null;
 }
},

largeurInitVideo:410,
hauteurInitVideo:300,
largeurOriginalePastille:42,
hauteurOriginalePastille:42,
XOriginalPastilleRouge:-280,
YOriginalPastilleRouge:22,


//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

sizeMarkers:function() { // Fonction qui redimentionne et repositionne le DIV

var SizeScreenWidth = 0;
var SizeScreenHeight = 0;
var bFullScreen = true;
var SizeOrigineVideoWidth = this.largeurInitVideo;
var SizeOrigineVideoHeight = this.hauteurInitVideo;
var SizeNewVideoWidth = 0;
var SizeNewVideoHeight = 0;
var MultiplicateurWidth = 0;
var MultiplicateurHeight = 0;
var Multiplicateur = 1;
var nouvelleLargeurPastille = 0;
var nouvelleHauteurPastille = 0; 
var decalageTop = 0;
var decalageLeft=0;
var ratio = 1;

if (document.getElementById('TempSuperContainer') != null) {
var TempSuperContainer = document.getElementById('TempSuperContainer');
SizeScreenWidth = parseFloat(this.CurrentGetStyle(TempSuperContainer,"Width","Width"));
SizeScreenHeight = parseFloat(this.CurrentGetStyle(TempSuperContainer,"Height","Height"));
bFullScreen = true;
}else{
SizeScreenWidth = this.largeurInitVideo;
SizeScreenHeight = this.hauteurInitVideo;
bFullScreen = false;
}

MultiplicateurWidth = SizeScreenWidth / SizeOrigineVideoWidth;
MultiplicateurHeight = SizeScreenHeight / SizeOrigineVideoHeight;

if (document.getElementById('TempSuperContainer') != null) {
if (MultiplicateurWidth >= MultiplicateurHeight) {
SizeNewVideoWidth = SizeOrigineVideoWidth * MultiplicateurHeight;
SizeNewVideoHeight = SizeOrigineVideoHeight * MultiplicateurHeight;
ratio = MultiplicateurHeight;
document.getElementById('TempContainer').style.cssText='margin:auto;padding:0px;background:green;width:' + SizeNewVideoWidth + 'px;height:' + SizeNewVideoHeight + 'px;';
}else{
SizeNewVideoWidth = SizeOrigineVideoWidth * MultiplicateurWidth;
SizeNewVideoHeight = SizeOrigineVideoHeight * MultiplicateurWidth;
document.getElementById('TempContainer').style.cssText='margin:auto;padding:0px;background:yellow;width:' + SizeNewVideoWidth + 'px;height:' + SizeNewVideoHeight + 'px;';
ratio = MultiplicateurWidth;
}
}

var nouvelleLargeurPastille = 0;
var nouvelleHauteurPastille = 0;
var NouvellePositionTop = 0;
var NouvellePositionLeft = 0;

if (bFullScreen != false) {
nouvelleLargeurPastille = this.largeurOriginalePastille * ratio;
nouvelleHauteurPastille = this.hauteurOriginalePastille * ratio;
NouvellePositionTop = (this.XOriginalPastilleRouge * ratio);
NouvellePositionLeft = (this.YOriginalPastilleRouge * ratio);
}else{
nouvelleLargeurPastille = this.largeurOriginalePastille;
nouvelleHauteurPastille = this.hauteurOriginalePastille;
NouvellePositionTop = this.XOriginalPastilleRouge;
NouvellePositionLeft = this.YOriginalPastilleRouge;
}

if (document.getElementById('TempSuperContainer') != null) {
document.getElementById('TempContainer').style.cssText='position:relative;margin:auto;padding:0px;background:yellow;width:' + SizeNewVideoWidth + 'px;height:' + SizeNewVideoHeight + 'px;';
}

document.getElementById('picto').style.cssText='position:relative;width:' + nouvelleLargeurPastille + 'px;height:' + nouvelleHauteurPastille + 'px;background:green;margin-top:' + NouvellePositionTop + 'px;left:' + NouvellePositionLeft + 'px';

},

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

toggle:function (bBolean) { // fonction pour faire apparaître ou disparaître les éléments inutiles

var cl = "toggleText";
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = document.documentElement.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)&& (bBolean == true)){
elem[i].style.display = "none";
}else if (myclass.test(classes) && (bBolean == false)){
elem[i].style.display = "block";
}}
},

full:function(){		//fonction pour le plein ecran

var stl=document.getElementById('genediv');
var vv1=document.getElementById('v1');
var picto = document.getElementById('picto');

if(vv1.parentNode==stl){	

var elem = document.createElement('div');
elem.style.height=document.documentElement.clientHeight+'px';
elem.style.width=document.documentElement.clientWidth+'px';
elem.setAttribute('class','bfull');
elem.setAttribute('id','TempSuperContainer');
this.elfull = document.body.appendChild(elem);
var repere = document.createElement('div');
repere.appendChild(vv1);
repere.appendChild(picto);
repere.setAttribute('id','TempContainer');
this.elfull.appendChild(repere);
this.toggle(true);
}else{
stl.appendChild(vv1);
stl.appendChild(picto);
var emltSuperContainer = document.getElementById('TempSuperContainer');
document.body.removeChild(emltSuperContainer);
this.toggle(false);
}

this.sizeMarkers();

},



}