View source for Pushdown Billboard

{{TechSpecsOnline
|galerie=[[File:Online Sonder Pushdown Billboard.png|200px]]
|beschreibung=A billboard below the navigation bar that pushes the content downwards upon mouseover.
|technischeDaten={{Anlieferungselement|bezeichnung=Pushdown Billboard|abmessung={{Abmessung|w=800 (970)|h=250 auf 500}} (push) |format={{Format Online Standard}}|gewicht={{Gewicht Online Standard}}}}
|3rdParty={{3rdParty|typ=|plattform=online|erlaubt=nein|}}
|besondereInformation={{Baustein|titel=Interaction|text='''One-time''' Interaction for pushdown and collapsing via MouseOver/MouseOut. After the firstcollapsing of the ad area to the initial dimension, a button '''"nochmal abspielen"''' appears. Further pushdowns are possible only via '''click''' on the button. After a pushdown via click the close button is displayed to collapase the ad area to the initial dimension.
}}
{{Baustein|titel=Push control|text=
If the ad is supplied as an HTML5 zip file, the functions and elements for click interaction must be implemented by the creative agency in line with the above interaction rules (the initial MouseOver/MouseOut is handled by the iq digital). As the HTML5 project is implemented within a cross-domain iFrame in the advertising space, coordinated commands are necessary for messaging with the ad template of iq digital. 
<br/><br/>  
You should support the following code snippets for cross-domain messaging or sending of the commands to the ad template of iq digital. If the creative code of your agency provides for a separate implementation, please note that transmission of the predefined command attributes is essential.       
<br/><br/>
'''This code has to be included in your ad on top level window "once":'''
<syntaxhighlight lang="html" line="line">
<script type="text/javascript">
  try {
    var iqdNS={};
    iqdNS.addEvent=function(d,c,b){
      if(typeof d.addEventListener!=="undefined"){
        d.addEventListener(c,b,false);
      } else if(typeof d.attachEvent!=="undefined"){
        d.attachEvent("on"+c,b);
      } else if(typeof d["on"+c]!=="undefined"){
        var a=d["on"+c];d["on"+c]=function(f){a(f);b(f);
      }
    };
    iqdNS.postOrigin=(function(){
      var a=window.location.href.toLowerCase();
      return a.split("iqdurl=")[1].split('&')[0]
    })();
    iqdNS.creativeID=(function(){
      var a=window.location.href.toLowerCase();
      return a.split("iqdcid=")[1].split('&')[0]
    })();
    iqdNS.getElm=function(o){
      return(typeof o==="string")?document.getElementById(o):o;
    };
  }catch(e){} 
</script>
</syntaxhighlight>
'''Implement on the same level this "Messenger", which sends an action when activated by your click button:'''
<syntaxhighlight lang="html" line="line" highlight="3,6,12">
<script type="text/javascript">
  try {
    iqdNS.postCommand[iq-command] = function() {
      var msgData = {
        info:"startAnimation"+iqdNS.creativeID,
        command:"[iq-command]"
      }; 
      if (JSON.stringify){
        window.top.postMessage(JSON.stringify(msgData), iqdNS.postOrigin);
      }
    }; 
    iqdNS.addEvent(iqdNS.getElm("[action-elmID]"),'click',iqdNS.postCommand[iq-command]); 
  }catch(e){}
</script> 
</syntaxhighlight>
This ad format requires several "commands". the highlighted function '''postCommand''' has to be duplicated in your code.<br/><br/>
1. Replace the <br/><br/> 
'''[iq-command]''' with '''iqdExpandPB''' (pushdown of the ad area) <br/>
'''[iq-command]''' with '''iqdCollapsePB''' (collapse of the ad area) <br/><br/>
2. Bind these to your '''click sensitive''' areas for pushdown and collapse via '''button'''.<br/>
3. Replace the '''[action-elmID]''' with the element ID of your '''click buttons'''.
}}
<includeonly>|wirdReferenziert=true</includeonly>
}}