10 Replies - 1963 Views - Last Post: 13 February 2014 - 08:16 PM

#1 rizzledon  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 6
  • Joined: 12-February 14

My script conflicts with fancybox

Posted 12 February 2014 - 02:48 AM

I've got 2 buttons with their own jquery scripts. One launches a fancybox video and the other shows a hidden popup contact form. I had the contact form (which shows another 'thank you msg' class when submitted) working fine, but now that I've added the fancybox button I think the stopPropagation is interfering with fancybox and I can't get them to load together. Anyone know how I can approach this better?

HTML
<div class="buttoncont">
        <div class="innercont">
        <div class="thanks" style="display:none;"><p>Thanks for contacting class</p></div>
            <div class="social">
                <!— FANCYBOX BUTTON LINK —>
                <div class="fancybox-media" href="http://vimeo.com/9532951" rel="media-gallery">
                <a class="btn"> <span class="playarrow"></span><span>watch fancybox preview</span></a></div>
                    <!— FANCYBOX BUTTON LINK END—>
                <!— CONTACT US LINK —>  
                <a class="btn2" href="#innercont" id='link'><span class="contactbbl"></span><span>contact us</span></a>
                    <!— CONTACT US LINK END —> 
            </div>
<div id="subscribe-pop”><p>DIV POPUP TRIGGERED FROM CONTACT US LINK</p></div>

<div id="badge1”>
    <a href="http://www.site1.com"><img class="badge1" src="images/badge1.png" height="auto" width="100%"></a>
</div>
<div id=“badge2”>
        <a href="http://www.site2.com"><img class="badge2” src="images/badge2.png" height="auto" width="100%"></a>
</div>

</div>
</div>


FANCYBOX SCRIPT
<script type="text/javascript">
		$(document).ready(function() {
                       $('.fancybox-media')
				.attr('rel', 'media-gallery')
				.fancybox({
					padding: 0,
					openEffect : 'none',
					closeEffect : 'none',
					prevEffect : 'none',
					nextEffect : 'none',
					arrows : false,
					helpers : {
						media : {},
						buttons : {}
					}
				});
                          });
	</script>


POPUP FORM SCRIPT
<script type="text/javascript">
$('html').click(function() {
    $('#subscribe-pop').hide();
	$('.thanks').hide(); 
 });

 $('.innercont').click(function(e){
     e.stopPropagation();
 });

$('#link').click(function(e) {
 $('#subscribe-pop').toggle();
 });

$('#mc_embed_signup .button').click(function(e) { 
 $('#subscribe-pop').hide(); 
 $('.thanks').toggle(); 
 });
 
 $('#mc_embed_signup .cancel').click(function(e) { 
 $('#subscribe-pop').hide(); 

 });
 
$('.thanks').click(function() { 
 $('.thanks').hide(); 
 });
</script>


Is This A Good Question/Topic? 0
  • +

Replies To: My script conflicts with fancybox

#2 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3222
  • View blog
  • Posts: 10,810
  • Joined: 12-December 12

Re: My script conflicts with fancybox

Posted 12 February 2014 - 02:51 AM

What errors appear in your browser's console?
Was This Post Helpful? 0
  • +
  • -

#3 rizzledon  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 6
  • Joined: 12-February 14

Re: My script conflicts with fancybox

Posted 12 February 2014 - 03:16 AM

View Postandrewsw, on 12 February 2014 - 02:51 AM, said:

What errors appear in your browser's console?


No errors come up in my firebug error console..
Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 330
  • View blog
  • Posts: 1,202
  • Joined: 15-January 14

Re: My script conflicts with fancybox

Posted 12 February 2014 - 09:49 AM

What actually happens when you click? What happens if you remove the stopPropagation call? Does the fancybox API have a way to assign click handlers or things like that so that you can verify what is happening when you click?
Was This Post Helpful? 0
  • +
  • -

#5 rizzledon  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 6
  • Joined: 12-February 14

Re: My script conflicts with fancybox

Posted 12 February 2014 - 06:49 PM

View PostArtificialSoldier, on 12 February 2014 - 09:49 AM, said:

What actually happens when you click? What happens if you remove the stopPropagation call? Does the fancybox API have a way to assign click handlers or things like that so that you can verify what is happening when you click?


As it is, if I click the contact button it works but the fancybox doesn't load. If I remove the stopPropagation, fancybox works but the contact us button does nothing.
I'm pretty new to JS I'm not sure about assigning click handlers. These are the .js files I'm loading:
http://cdnjs.cloudfl...ery.fancybox.js
http://cdnjs.cloudfl...ncybox-media.js
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3222
  • View blog
  • Posts: 10,810
  • Joined: 12-December 12

Re: My script conflicts with fancybox

Posted 12 February 2014 - 07:40 PM

Your posted code contains a lot of smart (curly) quotes which are not valid in HTML. You should replace these with standard, straight, quotes ".

You may not consider this important but it can break the HTML, meaning that the browser may not resolve where one page-element begins and another ends.

These
<!— FANCYBOX BUTTON LINK END—>

are also not correctly formed HTML-comments as this requires two hyphens <!-- on each side -->. This is unlikely to be an issue but I would correct them.

As a debugging step I would see what happens on disabling this code:
$('html').click(function() {
    $('#subscribe-pop').hide();
    $('.thanks').hide();
 });

You can't then close the pop-up but I'll hazard a guess that this code could be put in the thanks-click event temporarily. I would try this also without the stopPropagation code.

This code attaches a click event to the entire page. If removing this looks promising then I, personally, might consider adding a close button to the pop-up to do this, rather than just clicking in the document area.

I also wouldn't embed the 'contact us' button within an a-link. css can be used if you want it to look like a hyperlink.
Was This Post Helpful? 1
  • +
  • -

#7 rizzledon  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 6
  • Joined: 12-February 14

Re: My script conflicts with fancybox

Posted 12 February 2014 - 08:11 PM

Disabling this code makes no difference:
$('html').click(function() {
    $('#subscribe-pop').hide();
    $('.thanks').hide();
 });

Fancybox will load if I remove the stopPropagation but then the popup link doesn't work. I thought the stop stopPropagation stopped the event bubbling up. I'm confused why it
stops the popup from working once I remove it?

This post has been edited by andrewsw: 13 February 2014 - 04:50 AM
Reason for edit:: Removed previous quote

Was This Post Helpful? 0
  • +
  • -

#8 rizzledon  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 6
  • Joined: 12-February 14

Re: My script conflicts with fancybox

Posted 12 February 2014 - 08:58 PM

Andrew, I got it working with:

<script type="text/javascript">

$('#link').click(function(e) {
 $('#subscribe-pop').toggle();
 });

$('#mc_embed_signup .button').click(function(e) { <!--ADDED-->
 $('#subscribe-pop').hide(); <!--ADDED-->
 $('.thanks').toggle(); <!--ADDED-->
 });
 
 $('#mc_embed_signup .cancel').click(function(e) { <!--ADDED-->
 $('#subscribe-pop').hide(); 

 });
 
$('.thanks').click(function() { <!--ADDED-->
 $('.thanks').hide(); 
 });

</script>


Thanks so much for your help man, I posted this issue on multiple forums and couldn't even get replies.
Was This Post Helpful? 0
  • +
  • -

#9 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3222
  • View blog
  • Posts: 10,810
  • Joined: 12-December 12

Re: My script conflicts with fancybox

Posted 13 February 2014 - 07:50 AM

No worries, glad you sorted ;)
Was This Post Helpful? 0
  • +
  • -

#10 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 431
  • View blog
  • Posts: 1,822
  • Joined: 30-April 10

Re: My script conflicts with fancybox

Posted 13 February 2014 - 12:25 PM

@rizzledon Thank you for showing your fix for the next person.
Was This Post Helpful? 0
  • +
  • -

#11 rizzledon  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 6
  • Joined: 12-February 14

Re: My script conflicts with fancybox

Posted 13 February 2014 - 08:16 PM

View Postlaytonsdad, on 13 February 2014 - 12:25 PM, said:

@rizzledon Thank you for showing your fix for the next person.

No problem, it's the least I could do. I hope it benefits someone else in the future :)
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1