Results 1 to 10 of 10

Thread: Jquery Multi Level CSS Menu and Lightbox conflict

  1. #1
    Join Date
    Apr 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Jquery Multi Level CSS Menu and Lightbox conflict

    I am currently using the JQuery Multi Level CSS Menu #2 and Lightbox codes (downloaded from this site) but it looks like there are some conflicts with the scripts. The Menu will not work if I included the scripts from Lightbox. Here are the scripts I am using:

    JQuery Slidemenu:
    jquery.min.js
    jqueryslidemenu.js

    Lightbox:
    prototype.js
    scriptaculous.js
    lightbox.js
    effects.js

    When I try not to include either of this scripts - prototype.js or scriptaculous.js, then the Jquery Menu will work. But of coarse Lightbox will fail.

    Thank you very much in advance for all your help.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread, and:

    Warning: Please include a link to the DD script(s) in question in your post. See this thread for the proper posting format when asking a question.


    That said, you should be able to upgrade to Lightbox 2.04 or 2.04a. Place the main script for the menu before the Lightbox scripts. This assumes that the jQuery code for the menu is in noConflict mode. If not, we can probably make it be. Once I have a link to the menu script's demo page I can tell that.

    If you want more help:

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    hi jscheuer1,

    I have the same problem, and I have placed the script of menu before lightbox in the masterpage but I have still problem, have you some idea how it come? Thanks

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Warning: Please include a link to the DD script(s) in question in your post. See this thread for the proper posting format when asking a question.


    Please post a link to a page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jul 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    Warning: Please include a link to the DD script(s) in question in your post. See this thread for the proper posting format when asking a question.


    Please post a link to a page on your site that contains the problematic code so we can check it out.
    Hi John,

    I'm actualy developing on my local environment, that's means that i have no website live on this moment, but i have the same issue: conflict between slidemenu:

    jquery.min.js
    jqueryslidemenu.js

    And lightbox:

    prototype.js
    scriptaculous.js
    lightbox.js
    effects.js

    the scripts of menu is placed before lightbox scripts on my masterpage
    Code:
     <!-- Begin menu -->
         <script type="text/javascript" src="jqueryslidemenu.js"></script>
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
         <link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />
    
        <%-- End menu--%>
        
        
        <%-- Begin Lightbox--%>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    <link rel="Stylesheet" type="text/css" href="css/lightbox.css" media="screen" />
       <%-- End Lightbox--%>
    <script type="text/javascript">
    $(function() {
    	// Use this example, or...
    	$('a[@rel*=lightBox]').lightBox(); // Select all links that contains lightbox in the attribute rel
    	// This, or...
    	$('#gallery a').lightBox(); // Select all links in object with gallery ID
    	// This, or...
    	$('a.lightbox').lightBox(); // Select all links with lightbox class
    	// This, or...
    	$('a').lightBox(); // Select all links in the page
    	// ... The possibility are many. Use your creative or choose one in the examples above
    });
    
    <style type="text/css">
    	/* jQuery lightBox plugin - Gallery style */
    	#gallery {
    		background-color: #444;
    		padding: 10px;
    		width: 520px;
    	}
    	#gallery ul { list-style: none; }
    	#gallery ul li { display: inline; }
    	#gallery ul img {
    		border: 5px solid #3e3e3e;
    		border-width: 5px 5px 20px;
    	}
    	#gallery ul a:hover img {
    		border: 5px solid #fff;
    		border-width: 5px 5px 20px;
    		color: #fff;
    	}
    	#gallery ul a:hover { color: #fff; }
    	</style>
    at run time, i get a yellow text from jqueryslidemenu.js
    Code:
    jQuery(document).ready(function($){
    		var $mainmenu=$("#"+menuid+">ul")
    		var $headers=$mainmenu.find("ul").parent()
    		$headers.each(function(i){
    			var $curobj=$(this)
    			var $subul=$(this).find('ul:eq(0)')
    			this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
    			this.istopheader=$curobj.parents("ul").length==1? true : false
    			$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
    			$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
    				'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
    				+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
    				+ '" style="border:0;" />'
    			)
    			$curobj.hover(
    				function(e){
    					var $targetul=$(this).children("ul:eq(0)")
    					this._offsets={left:$(this).offset().left, top:$(this).offset().top}
    					var menuleft=this.istopheader? 0 : this._dimensions.w
    					menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
    					if ($targetul.queue().length<=1) //if 1 or less queued animations
    						$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
    				},
    				function(e){
    					var $targetul=$(this).children("ul:eq(0)")
    					$targetul.slideUp(jqueryslidemenu.animateduration.out)
    				}
    			) //end hover
    			$curobj.click(function(){
    				$(this).children("ul:eq(0)").hide()
    			})
    		}) //end $headers.each()
    		$mainmenu.find("ul").css({display:'none', visibility:'visible'})
    	}) //end document.ready
    with the error : "Microsoft JScript runtime error: Object expected"
    when i click op the menuitem wich with i surf to the page whith pictures i get the error:
    Microsoft JScript runtime error: Object doesn't support this property or method.
    that's happend when the function : $('a[@rel*=lightBox]').lightBox(); is called.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Warning: Please include a link to the DD script(s) in question in your post. See this thread for the proper posting format when asking a question.


    That said, first of all the first two scripts are in reverse order. This:

    Code:
         <script type="text/javascript" src="jqueryslidemenu.js"></script>
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    should be:

    Code:
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
         <script type="text/javascript" src="jqueryslidemenu.js"></script>
    Also, this script block has no closing tag:

    Code:
    <script type="text/javascript">
    $(function() {
    	// Use this example, or...
    	$('a[@rel*=lightBox]').lightBox(); // Select all links that contains lightbox in the attribute rel
    	// This, or...
    	$('#gallery a').lightBox(); // Select all links in object with gallery ID
    	// This, or...
    	$('a.lightbox').lightBox(); // Select all links with lightbox class
    	// This, or...
    	$('a').lightBox(); // Select all links in the page
    	// ... The possibility are many. Use your creative or choose one in the examples above
    });
    And appears to be for a jQuery version of Lightbox that I guess you tried. That would actually be the better solution. But if you aren't using it, get rid of the above code.

    From what you've posted, I cannot tell if the menu script is in noConflict mode, or even if the script can function in noConflict mode.

    Please post a link to the menu script's demo page here on Dynamic Drive.

    You can try throwing the menu into no Conflict mode by adding the highlighted here:

    Code:
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
         <script type="text/javascript" src="jqueryslidemenu.js"></script>
    <script type="text/javascript">
    jQuery.noConflict();
    </script>     
         <link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />
    If you want more help, put up a live demo of the problem and post a link to it here.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    hicham4 (07-22-2010)

  8. #7
    Join Date
    Jul 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    Warning: Please include a link to the DD script(s) in question in your post. See this thread for the proper posting format when asking a question.


    That said, first of all the first two scripts are in reverse order. This:

    Code:
         <script type="text/javascript" src="jqueryslidemenu.js"></script>
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    should be:

    Code:
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
         <script type="text/javascript" src="jqueryslidemenu.js"></script>
    Also, this script block has no closing tag:

    Code:
    <script type="text/javascript">
    $(function() {
    	// Use this example, or...
    	$('a[@rel*=lightBox]').lightBox(); // Select all links that contains lightbox in the attribute rel
    	// This, or...
    	$('#gallery a').lightBox(); // Select all links in object with gallery ID
    	// This, or...
    	$('a.lightbox').lightBox(); // Select all links with lightbox class
    	// This, or...
    	$('a').lightBox(); // Select all links in the page
    	// ... The possibility are many. Use your creative or choose one in the examples above
    });
    And appears to be for a jQuery version of Lightbox that I guess you tried. That would actually be the better solution. But if you aren't using it, get rid of the above code.

    From what you've posted, I cannot tell if the menu script is in noConflict mode, or even if the script can function in noConflict mode.

    Please post a link to the menu script's demo page here on Dynamic Drive.

    You can try throwing the menu into no Conflict mode by adding the highlighted here:

    Code:
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
         <script type="text/javascript" src="jqueryslidemenu.js"></script>
    <script type="text/javascript">
    jQuery.noConflict();
    </script>     
         <link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />
    If you want more help, put up a live demo of the problem and post a link to it here.
    Hi John,

    Thanks for your help, I'd used the script jQuery.noConflict(), and then I get no error any more. I have moved the page where I the repeater of pictures to the same level of masterpage and lightbox work, however, only I have a problem with paging within the lightbox (prev and nextlabels do not appear and also the " image 1 of 20" i get that also not. any idea how can i solve this?

    Thanks.
    Hicham.

  9. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    In order to get the Image 1 of 20 and previous/next in Lightbox, you need to use the:

    Code:
    rel="lightbox[groupname]"
    syntax in your links that activate Lightbox. Like:

    Code:
    <a href="some.jpg" rel="lightbox[groupname]">Some</a>
    Use the same groupname for all images in the same group. Also the next and previous button images must be in the correct location as indicated in the lightbox.css file.

    All of this is covered in the Lightbox documentation:

    http://home.comcast.net/~jscheuer1/side/lightbox2.04a/

    If you want more help:

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #9
    Join Date
    Jan 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Jquery conflicting with lightbox

    Hi John,

    Can you please help me as menu is not working due to lightbox on this page

    http://masielbebe.co.uk/detail.php?prodid=72

    Thank you in advance for your help


    Thanks,
    Shahzad

  11. #10
    Join Date
    Sep 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile jQuery Multi Level CSS Menu #2

    HI!
    I wanted to use "jQuery Multi Level CSS Menu #2" on my website.

    It's nice. But before i using it, i would like to ask a question about this menu.

    Here goes the picture that i uploaded to my host server.



    As you can see the picture now. The question is, How can we make the menu fit 100% without the right empty space as showing "red A" there.

    I would like to remove that part, but i tried to adjust the code, it's unable to be removed.

    Can you advice me how to do this? Because, this menu would bu much nicer if without the right empth space as "red A" mention in the picture.

    I hope that you can get what i'm trying to say as english is not my primary language. =)

    Thanks! =)

    Regards,
    Jornes

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •