PHP si l'élément existe, ajouter de la largeur; sinon, ne pas

Question

Je suis en train de configurer un site de défilement horizontal, avec Index Exhibit. Une section doit avoir une vidéo, que je ne peux pas mettre en place dans le backend de Indexhibit CMS (où elle l'ajouterait à la largeur de la div), donc j'ai besoin de l'ajouter au fichier de génération PHP. Fondamentalement, il doit vérifier si un élément avec l'ID vid est présent. Si c'est le cas, il faut ajouter les vid_width et vid_right_padding à la largeur finale, final_img_container. Sinon, il devrait être omis. Le site Web avec la vidéo peut être trouvé ici: http://www.allisonnavon.com/index.php?/projects/the-alka-seltzer-challenge/ Comme vous pouvez le voir ici, la largeur est parfaite, mais quand d'autres pages sont chargées, il y a un énorme 800 pixels supplémentaires à l'extrémité droite de chaque projet.

Voici le code:

<?php if (!defined('SITE')) exit('No direct script access allowed'); 

/** 
* Horizontal Format 
* 
* Exhbition format 
* Originally created for SharoneLifschitz.com 
* 
* @version 1.1 
* @author Vaska 
*/ 

$DO = new Horizontally; 

$exhibit['exhibit'] = $DO->createExhibit(); 
$exhibit['dyn_css'] = $DO->dynamicCSS(); 

class Horizontally 
{ 
    // PADDING AND TEXT WIDTH ADJUSTMENTS UP HERE!!! 
    var $picture_block_padding_right = 25; 
    var $text_width = 250; 
    var $text_padding_right = 75; 
    var $vid_width = 800; 
    var $vid_padding_right = 25; 
    var $final_img_container = 0; // do not adjust this one 

    function createExhibit() 
    { 
     $OBJ =& get_instance(); 
     global $rs; 

     $pages = $OBJ->db->fetchArray("SELECT * 
      FROM ".PX."media, ".PX."objects_prefs 
      WHERE media_ref_id = '$rs[id]' 
      AND obj_ref_type = 'exhibit' 
      AND obj_ref_type = media_obj_type 
      ORDER BY media_order ASC, media_id ASC"); 

     if (!$pages) return $rs['content']; 

     $s = ''; $a = ''; $w = 0; 
     $this->final_img_container = ($rs['content'] != '') ? ($this->text_padding_right + $this->text_width + $this->vid_padding_right + $this->vid_width) : 0; 

     foreach ($pages as $go) 
     { 
      $title = ($go['media_title'] == '') ? '' : "<div class='title'>" . $go['media_title'] . "</div>"; 
      $title .= ($go['media_caption'] == '') ? '' : "<div class='caption'>" . $go['media_caption'] . "</div>"; 

      $temp_x = $go['media_x'] + $this->picture_block_padding_right; 
      $this->final_img_container += ($go['media_x'] + $this->picture_block_padding_right); 

      $a .= "<div class='picture_holder' style='width: {$temp_x}px;'>\n"; 
      $a .= "<div class='picture' style='width: {$go[media_x]}px;'>\n"; 
      $a .= "<img src='" . BASEURL . GIMGS . "/$go[media_file]' width='$go[media_x]' height='$go[media_y]' alt='" . BASEURL . GIMGS . "/$go[media_file]' />\n"; 
      $a .= "<div class='captioning'>$title</div>\n"; 
      $a .= "</div>\n"; 
      $a .= "</div>\n\n"; 
     } 

     $s .= "<div class='text'><div class='scroller'><span><a href='javascript:void(0);' class='prev'>&laquo;</a></span><span class='title'><a href='javascript:void(0);' class='origin'><%title%></a></span><span><a href='javascript:void(0);' class='next'>&raquo;</a></span></div><div id='img-container'>\n"; 
     if ($rs['content'] != '') $s .= "<div id='text'>" . $rs['content'] . "</div>\n"; 
     $s .= $a; 
     $s .= "<div style='clear: left;'><!-- --></div>"; 
     $s .= "</div></div>\n"; 

     return $s; 
    } 


    function dynamicCSS() 
    { 
     return "#img-container { width: " . ($this->final_img_container + 1) . "px; } 
#img-container #text { float: left; width: " . ($this->text_width + $this->text_padding_right) . "px; } 
#img-container #text p { width: " . $this->text_width . "px; } 
#img-container #vid { float: left; width: " . ($this->vid_width + $this->vid_padding_right) . "px; } 
#img-container #vid p { width: " . $this->vid_width . "px; } 
#img-container .picture_holder { float: left; } 
#img-container .picture { /* padding-top: 10px; */ } 
#img-container .captioning .title { margin-top: 12px; font-weight: bold; } 
#img-container .captioning .caption { font-family:PerspectiveSansItalic; 
    font-size:11px; color: #444; padding-top: 10px;}"; 
    } 
} 

Answer 1

est-il pas mieux de résoudre ce problème avec JavaScript lorsque la page est chargée?

Trouvez simplement la div avec l'ID "vid" et ajoutez-y le bon css. Quelque chose comme:

$(function() { 
    $("div#vid").load(function() { 
     $(this).addClass("whateverclassyouwanttoadd"); 
    }) 
} 

Je ne suis pas un gourou jquery, mais je pense que cela va résoudre votre problème.

Juste quelques sidenodes: Je pense qu'il est préférable de garder votre présentation séparée de votre logique métier. Donc, travaillez avec des feuilles de style pour baliser votre code HTML et ajouter des classes à votre code HTML dans vos vues/votre logique métier.

Juste mes 2 cents

Bonne chance!