IDs and Classes

Home Forums Easy FancyBox Pro IDs and Classes

This topic contains 1 reply, has 2 voices, and was last updated by  RavanH 2 years, 6 months ago.

  • Author
    Posts
  • #4986

    William Even
    Participant

    Hi Rolf,

    Can you clarify this statement for me? This is from the settings page on the Easy Fancybox Pro screen:

    To make inline content open in an overlay, wrap that content in a div with a unique ID, create a link with target “#uniqueID” and give it a class “fancybox-inline” attribute.

    I don’t understand the unique ID part.

    An example would be great.

    Thanks,

    Bill

  • #4987

    RavanH
    Keymaster

    Hi William,

    The ID attribute of any HTML element needs to be unique. It can be whatever you like (as long as it starts with a letter, not a number, and has no special characters) but that same ID it must not be used for other elements. This is a general principle in HTML but it is also important to the FancyBox script because else the script will confuse the two elements with that same ID.

    In the example I used “uniqueID” but you could use “popupform-1” and “popupform-2” for two different quote request forms on your Request a Quote page. For example…

    In such a case, you’d edit your page in the Text tab and enter this code:

    
    <a href="#popupform-1" class="button fancybox-inline">Personal Quote</a>
    <div class="fancybox-hidden">
      <div id="popupform-1" style="width:400px;height:300px">
        [contact-form id="220"]
      </div>
    </div>
    
    <a href="#popupform-2" class="button fancybox-inline">Business Quote</a>
    <div class="fancybox-hidden">
      <div id="popupform-2" style="width:400px;height:300px">
        [contact-form id="223"]
      </div>
    </div>
    

    If in such a case the same ID would be used for both divs, both links would open the same (first) form popup instead of each opening a different one.

    Hope that explains it a bit 🙂

You must be logged in to reply to this topic.

Site by Pharéo | Hosted on The Permanently Moving Network