jquery pop up script needs some tweakings

Question

I am trying to use an js pop-up script: Magnific Popup. The basic settings work well, except that the site header (#header) also shows up and become mixed in the actual pop-up, which is unwanted.

I have written a tiny js function that helps me disappear the header, more specifically the #header id upon clicking on the pop-up link, but the drawback is that the header still remains not visible as I exit out the pop-up.



Flash / Video (Iframe/Direct Link To YouTube)

Please note onClick="hide('header') does the trick

Here is my settings

Now, I try to load the pop-up after a few seconds delay, but I cannot figure out how to hide the header #header div and restore it as the pop-up exists. The following script works, but it needs further tweaking. I want to know why is the site header getting mixed up, I am not calling it? I am clueless. If you have encountered similar problems before, please contribute. Thank you.

Here is my site header:


    
        
            
                
            
        
        
            
                
            
        
        
            
                
            
            widget("searchbox", "content", array("params" => array("type" => "article")));
            ?>
            
                
                    Bikes & Gear
                
                
                    Rides
                
                
                    Training
                
                
                    Shop
                
                
                    Subscribe

Bosworth99 · Accepted Answer

You are hiding the header onClick(), which it sounds like is working, but on close of the popup, you have no logic to show it, again. So, it remains hidden.

To put it another way, you are controlling events "near" the plugin activation, but you've lost control when plugin logic takes over (you are relying on the plugin to close itself, when the user clicks "close").

This is a very common problem, so plugin developers usually make some hooks or events available that you may leverage.

Lets check out the API:

$('.image-link').magnificPopup({
  // you may add other options here, e.g.:
  preloader: true,

  callbacks: {
    open: function() {
      // Will fire when this exact popup is opened
      // this - is Magnific Popup object
    },
    close: function() {
      // Will fire when popup is closed
    }
  }
});

So here, the developer has included a number of events for you to consume, you just need to provide a couple callback methods to do your hide and show :

Then you can call those methods on the callback property of your settings, a bit like so :

callbacks : {

    open : function(){
        hide('header');
    },
    close : function(){
        show('header');
    }
}

This is a pretty simple thing to do, and there are zillions of ways of doing it. But, here, you've bought into a plugin and its functionality, so you might as well use what it gives you.

See if you can get that working, and let me know if you run into any more issues.

Good luck ;)

Note : I wonder why you are hiding the header? this is css, after all, and you might be better served simply by rendering the popup over the header.

jquery pop up script needs some tweakings

Answers (1)

Related Questions