4 Replies - 2920 Views - Last Post: 02 December 2013 - 12:45 PM

#1 seanboy50  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 01-December 13

Conflict with Jquery Tabs and Reveal Modal

Posted 01 December 2013 - 04:28 PM

First, I am a newbie and not a coder so apologies in advance. I have implemented the Jquery Tools tabs (jquerytools.org/demos/tabs/index.html) on my page and it works as expected. I can tab back and forth without issue. I have since added the reveal Jquery Modal plugin (zurb.com/playground/reveal-modal-plugin) to links inside each of the tabs. When I load the page, I can go to any one tab and click a link in that tab and the modal will work perfectly. the problem is, when I then click on ANY other tab, and then try and click on a modal link, the overlay doesnt appear and after clicking on a few tabs it freezes.

So basically, the tabs work, but the modal links only work in the first tab i click them in, but no tabs thereafter. I am not code orientated, but I have tried a hundred different possible fixes I've found across the internet but to no avail. If anyone has any idea how to fix this conflict so that the reveal modal links work in all tabs, I would really appreciate it.

In terms of the code, I downloaded the plugins as they are in the links above, so apart from editing paths in the script srcs in the head, they are pretty much as downloaded. The head section has them in this order (its the only order it will work in):

<link rel="stylesheet" href="css/tabs.css" />
<link rel="stylesheet" href="css/reveal.css">

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.tools.min.js"></script>
<script src="js/jquery.reveal.js"></script>


thanks in advance for any help you can give! If you need me to provide the reveal.js code or anything let me know (it's unchanged from the download).

sd

Is This A Good Question/Topic? 0
  • +

Replies To: Conflict with Jquery Tabs and Reveal Modal

#2 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3833
  • View blog
  • Posts: 13,580
  • Joined: 12-December 12

Re: Conflict with Jquery Tabs and Reveal Modal

Posted 01 December 2013 - 04:45 PM

Unless the documentation for either of these plug-ins specifically state that they don't work with the other plug-in (or requires a specific version of the other plug-in) then I would expect them to work together.

So you'll need to post your code, that isn't working. That is, the relevant HTML, and any additional Javascript that may be an issue. You'll probably also need to post some css as it is possible the modal boxes are displayed but behind some other element(s).

There is no need, or benefit to, posting the library-code.



Have you checked your browser's console for error messages?

This post has been edited by andrewsw: 01 December 2013 - 04:47 PM

Was This Post Helpful? 0
  • +
  • -

#3 seanboy50  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 01-December 13

Re: Conflict with Jquery Tabs and Reveal Modal

Posted 02 December 2013 - 08:27 AM

Thanks for your help!! So, here is the code. I have stripped it right down to nothing but the default downloaded code. There is little extra coding added, so its as pure as I can get. Again, the modal popups will work correctly in whichever tab you choose in the first instance - they just dont work correctly on any subsequent tab i select! If you click on the modal link in tab 1 for example, it works. If you then click on the modal link in tab2, there is no overlay/mask for the tab. If you THEN click back on tab 1, it freezes completely with nothing on screen but the modal overlay! Mental! :)/>

[HTML]

<!DOCTYPE html>
<html>

<head>
	<title>My Page</title>
	<meta charset="UTF-8" />
	
	<link rel="stylesheet" href="css/tabs.css" />
	<link rel="stylesheet" href="css/reveal.css">
	
	<script src="js/jquery-1.10.2.js"></script>
	<script src="js/jquery.tools.min.js"></script>	
	<script src="js/jquery.reveal.js"></script>

</head>

<body>
		
<ul class="tabs">
	<li><a href="#">Tab 1</a></li>
	<li><a href="#">Tab 2</a></li>
	<li><a href="#">Tab 3</a></li>
</ul>
 
<!-- tab "panes" -->
<div class="panes">
		<div>First tab content. Tab contents are called "panes"
			
		<a href="#" data-reveal-id="myModal1">Click Me For A Modal</a>		
			<div id="myModal1" class="reveal-modal">
				 <h1>Modal Title</h1>
				 <p>Any content could go in here.</p>
				 <a class="close-reveal-modal"></a>
			</div>
		</div>

		<div>Second tab content
		
		<a href="#" data-reveal-id="myModal2">Click Me For A Modal</a>
			<div id="myModal2" class="reveal-modal">
				 <h1>Modal Title</h1>
				 <p>Any content could go in here.</p>
				 <a class="close-reveal-modal"></a>
			</div>
		</div>

		<div>Third tab content
			
		<a href="#" data-reveal-id="myModal3">Click Me For A Modal</a>
			<div id="myModal3" class="reveal-modal">
				<h1>Modal Title</h1>
				<p>Any content could go in here.</p>
				<a class="close-reveal-modal"></a>
			</div>
		</div>

</div><!--end of panes-->
  
<script>
// perform Javascript after the document is scriptable.
$(function() {
    // setup ul.tabs to work as tabs for each div directly under div.panes
    $("ul.tabs").tabs("div.panes > div");
});
</script>

</body>
</html>








[REVEAL.CSS]

/*	--------------------------------------------------
	Reveal Modals
	-------------------------------------------------- */
		
	.reveal-modal-bg { 
		position: fixed; 
		height: 100%;
		width: 100%;
		background: #000 !important;
		background: rgba(0,0,0,.8)!important;
		z-index: 100;
		display: none;
		top: 0;
		left: 0; 
		}
	
	.reveal-modal {
		visibility: hidden;
		top: 100px; 
		left: 50%;
		margin-left: -300px;
		width: 520px;
		background: #eee url(../img/modal-gloss.png) no-repeat -200px -80px !important;
		position: absolute;
		z-index: 101;
		padding: 30px 40px 34px;
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
		border-radius: 15px;
		-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-box-shadow: 0 0 10px rgba(0,0,0,.4);
		}
		
	.reveal-modal.small 		{ width: 200px; margin-left: -140px;}
	.reveal-modal.medium 		{ width: 400px; margin-left: -240px;}
	.reveal-modal.large 		{ width: 600px; margin-left: -340px;}
	.reveal-modal.xlarge 		{ width: 800px; margin-left: -440px;}
	
	.reveal-modal .close-reveal-modal {
		font-size: 22px;
		line-height: .5;
		position: absolute;
		top: 18px;
		right: -45px;
		color: #aaa; /* this value is for the 'x' in the modal box */
		text-shadow: 0 -1px 1px rbga(0,0,0,.6);
		font-weight: bold;
		cursor: pointer;
		} 
	
	
	



[TABS.CSS]


/*page*/
body{
	font-family:Arial, Helvetica, sans-serif;
}
.tabs_wrapper{
	width:100%;
}

/* tab pane styling */
.panes div {
   	padding:15px 10px;
    border:1px solid #999;
	border-top:0;
    min-height:220px;
    background:#fff;
}

/* root element for tabs  */
ul.tabs {
    list-style:none;
    margin:0;
    padding:0;
    border-bottom:1px solid #999;
	height:30px;	
}

/* single tab */
ul.tabs li {
    float:left;
    text-indent:0;
    padding:0;
    margin:0;
    list-style-image:none;
}

/* link inside the tab. uses a background image */
ul.tabs a {
    display:block;
    height: 30px;
    line-height:30px;
    width: 81px;
    text-align:center;
    text-decoration:none;
    color:#000;
    padding:0px;
    margin:0px;
    position:relative;
    top:1px;
}

ul.tabs a:active {
    outline:none;
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
    background-position: -553px -31px;
    color:#000;
}

/* active tab uses a class name "current". its highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
    background-position: -553px -62px;
    cursor:default !important;
    color:#333 !important;
	font-weight:bold;
	text-shadow:2px 2px #C2C3CF; /*adds a grey shadow to the text on the selected tab */
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */

/* width 1 */
ul.tabs a.s { background-position: -553px 0; width:81px; }
ul.tabs a.s:hover { background-position: -553px -31px; }
ul.tabs a.s.current  { background-position: -553px -62px; }

/* width 2 */
ul.tabs a.l { background-position: -248px -0px; width:174px; }
ul.tabs a.l:hover { background-position: -248px -31px; }
ul.tabs a.l.current { background-position: -248px -62px; }

/* width 3 */
ul.tabs a.xl { background-position: 0 -0px; width:248px; }
ul.tabs a.xl:hover { background-position: 0 -31px; }
ul.tabs a.xl.current { background-position: 0 -62px; }


/* initially all panes are hidden */
.panes .pane {
    display:none;
}



and finally, the jquery.reveal.js. This - like the jquery.tools.min - has not been changed from the downloaded version.

[JQUERY.REVEAL.JS]


/*
 * jQuery Reveal Plugin 1.0
 * www.ZURB.com
 * Copyright 2010, ZURB
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
*/


(function($) {

/*---------------------------
 Defaults for Reveal
----------------------------*/
	 
/*---------------------------
 Listener for data-reveal-id attributes
----------------------------*/

	$('a[data-reveal-id]').live('click', function(e) {
		e.preventDefault();
		var modalLocation = $(this).attr('data-reveal-id');
		$('#'+modalLocation).reveal($(this).data());
	});

/*---------------------------
 Extend and Execute
----------------------------*/

    $.fn.reveal = function(options) {
        
        
        var defaults = {  
	    	animation: 'fadeAndPop', //fade, fadeAndPop, none
		    animationspeed: 300, //how fast animtions are
		    closeonbackgroundclick: true, //if you click background will modal close?
		    dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
    	}; 
    	
        //Extend dem' options
        var options = $.extend({}, defaults, options); 
	
        return this.each(function() {
        
/*---------------------------
 Global Variables
----------------------------*/
        	var modal = $(this),
        		topMeasure  = parseInt(modal.css('top')),
				topOffset = modal.height() + topMeasure,
          		locked = false,
				modalBG = $('.reveal-modal-bg');

/*---------------------------
 Create Modal BG
----------------------------*/
			if(modalBG.length == 0) {
				modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);
			}		    
     
/*---------------------------
 Open & Close Animations
----------------------------*/
			//Entrance Animations
			modal.bind('reveal:open', function () {
			  modalBG.unbind('click.modalEvent');
				$('.' + options.dismissmodalclass).unbind('click.modalEvent');
				if(!locked) {
					lockModal();
					if(options.animation == "fadeAndPop") {
						modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});
						modalBG.fadeIn(options.animationspeed/2);
						modal.delay(options.animationspeed/2).animate({
							"top": $(document).scrollTop()+topMeasure + 'px',
							"opacity" : 1
						}, options.animationspeed,unlockModal());					
					}
					if(options.animation == "fade") {
						modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure});
						modalBG.fadeIn(options.animationspeed/2);
						modal.delay(options.animationspeed/2).animate({
							"opacity" : 1
						}, options.animationspeed,unlockModal());					
					} 
					if(options.animation == "none") {
						modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure});
						modalBG.css({"display":"block"});	
						unlockModal()				
					}
				}
				modal.unbind('reveal:open');
			}); 	

			//Closing Animation
			modal.bind('reveal:close', function () {
			  if(!locked) {
					lockModal();
					if(options.animation == "fadeAndPop") {
						modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
						modal.animate({
							"top":  $(document).scrollTop()-topOffset + 'px',
							"opacity" : 0
						}, options.animationspeed/2, function() {
							modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
							unlockModal();
						});					
					}  	
					if(options.animation == "fade") {
						modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
						modal.animate({
							"opacity" : 0
						}, options.animationspeed, function() {
							modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure});
							unlockModal();
						});					
					}  	
					if(options.animation == "none") {
						modal.css({'visibility' : 'hidden', 'top' : topMeasure});
						modalBG.css({'display' : 'none'});	
					}		
				}
				modal.unbind('reveal:close');
			});     
   	
/*---------------------------
 Open and add Closing Listeners
----------------------------*/
        	//Open Modal Immediately
    	modal.trigger('reveal:open')
			
			//Close Modal Listeners
			var closeButton = $('.' + options.dismissmodalclass).bind('click.modalEvent', function () {
			  modal.trigger('reveal:close')
			});
			
			if(options.closeonbackgroundclick) {
				modalBG.css({"cursor":"pointer"})
				modalBG.bind('click.modalEvent', function () {
				  modal.trigger('reveal:close')
				});
			}
			$('body').keyup(function(e) {
        		if(e.which===27){ modal.trigger('reveal:close'); } // 27 is the keycode for the Escape key
			});
			
			
/*---------------------------
 Animations Locks
----------------------------*/
			function unlockModal() { 
				locked = false;
			}
			function lockModal() {
				locked = true;
			}	
			
        });//each call
    }//orbit plugin call
})(jQuery);
        



Thanks again for your help!

SD
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3833
  • View blog
  • Posts: 13,580
  • Joined: 12-December 12

Re: Conflict with Jquery Tabs and Reveal Modal

Posted 02 December 2013 - 12:39 PM

If you had the tabs working perfectly before then it seems the problem is either with the reveal plug-in, or, as you indicated, possibly a conflict between the two. Did you also test reveal separately? In which case, it looks like a conflict.

Personally, I would drop reveal.js and find another modal plug-in. There are many of these. (Or I would write it myself.)

The reveal code is not huge, so it might be tempting to try and fix it. Personally, I don't do this. If a plug-in doesn't work I drop it. (But you are not a coder, so this isn't an option for you anyway.)

There are 10 here (modal dialog plug-ins) to get you started.
Was This Post Helpful? 0
  • +
  • -

#5 seanboy50  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 01-December 13

Re: Conflict with Jquery Tabs and Reveal Modal

Posted 02 December 2013 - 12:45 PM

Thanks for the feedback. Yeah, Reveal works perfectly well in a non-tab environment, and Tabs works perfectly well without it. I was hoping not to have to drop the reveal but if there's no other option then I may have to try another modal plugin. If anyone else has any ideas please feel free to share.
Thanks again!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1