Help comine Jquery Tools and Jquery UI script

Hello,

Newbie to jquery, need assistance. I would like to combine multiple scripts into a single script. Using Jquery Tools (http://flowplayer.org/tools/),I would like the tooltip function and the scroll function. Demos for these are here; Scroll - http://flowplayer.org/tools/demos/scrollable/,
Tooltip - http://flowplayer.org/tools/demos/tooltip/dynamic.html . In addition to these I would also like to incorporate the Jquery UI dialog box function.  So essentially I would have a ul with images contained within, to view additional images you would then be able to scroll either left or right. On hover of the images you would see the tooltip effect from page mentioned. Then on click of the image would then display the dialog box from Jquery in a modal dialog form.  Attached id the html code that I am playiing with. The onclick dialog is working, but the hover function is throwing an error and not sure how to implement the scroll function into the script as well or  the code...

Any help is much appreciated...

Thanks
<!DOCTYPE html>
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>jQuery UI Example Page</title>
			<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/css/global-0.25.css" />
        <link type="text/css" href="jquery/css/redmond/jquery-ui-1.8.custom.css" rel="stylesheet" />
		<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>
	
		<script type="text/javascript" src="jquery/js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="jquery/js/jquery-ui-1.8.custom.min.js"></script>
		<script type="text/javascript">
			$(function(){
	

				// Dialog			
				$('#tool01, #tool02, #tool03, #tool04').dialog({
					autoOpen: false,
					width: 600,
					buttons: {
						"Close": function() { 
							$(this).dialog("close"); 
						}, 
					}
				});
				
				// Dialog Link
				$('#tool1').click(function(){
					$('#tool01').dialog('open');
					return false;
				});
				
				$('#tool2').click(function(){
					$('#tool02').dialog('open');
					return false;
				});
				
				$('#tool3').click(function(){
					$('#tool03').dialog('open');
					return false;
				});
				
				$('#tool4').click(function(){
					$('#tool04').dialog('open');
					return false;
				});
				
				// Progressbar
				$("#progressbar").progressbar({
					value: 20 
				});
				
				//hover states on the static widgets
				$('#test, ul#icons li').hover(
					function() { $(this).addClass('ui-state-hover'); }, 
					function() { $(this).removeClass('ui-state-hover'); }
				);
				
			});
		</script>
        
        
        	<script>
$(document).ready(function() {

	// initialize tooltip
	$("#dyna img[title]").tooltip({
	
		// use single tooltip element for all tips
		tip: '#dynatip', 
		
		// tweak the position
		offset: [10, 2],
		
		// use "slide" effect
		effect: 'slide'
		
	// add dynamic plugin 
	}).dynamic( {
	
		// customized configuration on bottom edge
		bottom: {
		
			// slide downwards
			direction: 'down',
			
			// bounce back when closed
			bounce: true
		}
	});
	
		$("#dyna").scrollable();

});
</script>

		<style type="text/css">
			/*demo page css*/
			.demoHeaders { margin-top: 2em; }
			#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
			#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
			ul#icons {margin: 0; padding: 0;}
			ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
			ul#icons span.ui-icon {float: left; margin: 0 4px;}
			body { background: #646e7b; font: 12px Verdana, Geneva, sans-serif #000;}
#container { width: 990px; margin: 0px auto; background: url(images/bg_03.jpg) repeat-x; padding-top: 25px; }
ul { margin-left: 25px; }
li { display: inline; list-style: none; margin-right: 25px; margin-left: 25px; }
#dynatip {
	display:none;
	background:transparent url(images/black_arrow.png);
	font-size:12px;
	height:70px;
	width:160px;
	padding:25px;
	color:#fff;	
}

/* style the trigger elements */
#dyna img {
	border:0;
	cursor:pointer;
	margin:0 8px;
}
#dyna { padding-top: 50px; padding-bottom: 50px; margin-top: 50px; }

		</style>	
	</head>
	<body>
		<div id="container">
          <div id="dynatip">&nbsp;</div>
<div id="dyna">
          <ul>
          <li><img src="images/1.jpg" width="170" height="113"
		title="Test Tooltip01" id="tool1"/></li>
    <li><img src="images/2.jpg" width="170" height="113"
		title="Test Tooltip02" id="tool2"/></li>
    <li><img src="images/3.jpg" width="170" height="113"
		title="Test Tooltip03" id="tool3"/></li>
  <li><img src="images/4.jpg" width="170" height="113" style="margin-right:0px"
		title="Test Tooltip04" id="tool4"/></li>
        </ul>
        </div>
        <!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->
        <!-- ui-dialog -->
		<div id="tool01" title="Dialog Title">
			<p>Dialog #1</p>
	</div>
    		<div id="tool02" title="Dialog Title">
			<p>Dialog # 2</p>
	</div>
		<div id="tool03" title="Dialog Title">
			<p>Dialog # 3</p>
	</div>
		<div id="tool04" title="Dialog Title">
			<p>Dialog # 4</p>
	</div>
</div>
</body>
</html>

Open in new window

PdesignzPPC SpecialistAsked:
Who is Participating?
 
StealthyDevCommented:
Yes, thats why I have placed it in the bottom corner :)

Anyways, you can place it in any co-ordinates.
      $("#dialog").dialog({
            bgiframe: true,
            height: 140,
            modal: true,
            /*position:"center"*/
            /*position:["right", "bottom"]*/
            position:[350,350]
      });

More on this: http://jqueryui.com/demos/dialog/ and go to options-position

Best Regards.
0
 
StealthyDevCommented:
Sorry dude.... I hope your essay, explaining what you are trying to do is the root cause of why you didnt receive any comment yet.

Please let me know what is your problem only?
0
 
StealthyDevCommented:
Also, if possible, give us your link where you have deployed this page?
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
PdesignzPPC SpecialistAuthor Commented:
Do not have a link, working locally testing via localhost testing server. Essentially would like 3 functions, Tooltip for the hover, a horizontal left and right scroll and onclick would then display the modal dialog box. Problem getting all three to work, am newbie to jquery, so any help or examples is much apppreciated. Tooltip and scroll, I like the sites mentioned above, if possible to use these. Modal Dialog would be using Jquery UI Dialog box.

Thanks
0
 
StealthyDevCommented:
Ok, so any test page with all these three to work will help you?

If so, just leave a comment saying YES and hold on for sometimes.

Regards.
0
 
PdesignzPPC SpecialistAuthor Commented:
yes, actually, let me post to server for you to view...progress so far
0
 
PdesignzPPC SpecialistAuthor Commented:
I posted to server,

Working tootltip here, http://pdesignz.com/jquery
Dialog - http://pdesignz.com/jquery/index2.htm
Scroll - http://pdesignz.com/jquery/scroll.htm

Not sure how to combine all three into one

Thanks
0
 
StealthyDevCommented:
Oops........
Sorry buddy... Your link is having "desi" as a string so, my proxy server is blocking it :)

http://p"desi"gnz.com/jquery

Any alternate?
0
 
PdesignzPPC SpecialistAuthor Commented:
Everything the same, use http://alexanderspizza.com/jquery as the root, everything else is the same
0
 
StealthyDevCommented:
Hi, I have researched a lot.

Please find it as attached:

Best Regards.
P.S. Run scroll.htm
3-in-one.zip
0
 
PdesignzPPC SpecialistAuthor Commented:
Looks great, only issue is dialog box open in right bottom corner of page, would prefer in center of page.

Thanks!
0
 
StealthyDevCommented:
If you see the scroll.html, below code would be there:

      $("#dialog").dialog({
            bgiframe: true,
            height: 140,
            modal: true,
            position:["right","bottom"]
      });

position:["right","bottom"] can be replaced to position:"center"

Regards.
0
 
PdesignzPPC SpecialistAuthor Commented:
when I change position from "right", "bottom" to "center" the dialog box stops working, but if replace with "right", "bottom" than works again.

Thanks
<!--Non-working Code  (Center)-->
<html>
	<head>
		<title>jQuery Tools standalone demo</title>

		<link rel="stylesheet" type="text/css" href="standalone.css">
		<link rel="stylesheet" type="text/css" href="scrollable-horizontal.css">
		<link rel="stylesheet" type="text/css" href="scrollable-buttons.css">
		<link rel="stylesheet" type="text/css" href="tooltip.css">
		<link type="text/css" href="themes/base/ui.all.css" rel="stylesheet" />
		<link type="text/css" href="UI_Includes/demos.css" rel="stylesheet" />

		<script src="JQuery.js"></script>
		<script src="JQueryTools.js"></script>
		<script type="text/javascript" src="UI_Includes/ui.core.js"></script>
		<script type="text/javascript" src="UI_Includes/ui.draggable.js"></script>
		<script type="text/javascript" src="UI_Includes/ui.resizable.js"></script>
		<script type="text/javascript" src="UI_Includes/ui.dialog.js"></script>
		<script type="text/javascript" src="UI_Includes/jquery.bgiframe.js"></script>
	</head>
<body>
<a class="prevPage browse left disabled"></a>
<div id="dynatip">&nbsp;</div> 
<div class="scrollable">	
	<!-- root element for the items -->
	<div id="dyna" style="left: 0px;" class="items">
	
		<!-- 1-5 -->
		<img src="1.jpg" title="The tooltip text #1"/> 
		<img src="2.jpg" title="The tooltip text #2"/> 
		<img src="3.jpg" title="The tooltip text #3"/> 
		<img src="4.jpg" title="The tooltip text #4"/> 
		<img src="2.jpg" title="The tooltip text #5"/> 
		
		<!-- 5-10 -->
		<img src="1.jpg" title="The tooltip text #6"/> 
		<img src="2.jpg" title="The tooltip text #7"/> 
		<img src="3.jpg" title="The tooltip text #8"/> 
		<img src="4.jpg" title="The tooltip text #9"/> 
		<img src="2.jpg" title="The tooltip text #10"/> 
		
		<!-- 10-15 -->
		<img src="1.jpg" title="The tooltip text #11"/> 
		<img src="2.jpg" title="The tooltip text #12"/> 
		<img src="3.jpg" title="The tooltip text #13"/> 
		<img src="4.jpg" title="The tooltip text #14"/> 
		<img src="2.jpg" title="The tooltip text #15"/> 
	</div>
	
</div>
<a class="nextPage browse right"></a>
<br clear="all">
<div id="dialog" title="Test Dialogue"></div>
<script>
$(function() {
	$("div.scrollable").scrollable();

	$("#dyna img[title]").tooltip({
		tip: '#dynatip', 
		offset: [10, 2],
		effect: 'slide'
	}).dynamic( {
		bottom: {
			direction: 'down',
			bounce: true
		}
	});
	$("#dyna").scrollable();

	$("#dialog").dialog({
		bgiframe: true,
		height: 140,
		modal: true,
		position:["center"]
	});

	$("#dialog").dialog("close");

	$("#dyna img").click(function(){
		$("#dialog").html("<div>Your text here...</div>");
		//$("#dialog").html($(this));
		$("#dialog").dialog("open");
		$("#dialog").dialog("moveToTop");
	});
});
</script>

</body></html>


<!-- Working Code (Bottom Right)

<html>
	<head>
		<title>jQuery Tools standalone demo</title>

		<link rel="stylesheet" type="text/css" href="standalone.css">
		<link rel="stylesheet" type="text/css" href="scrollable-horizontal.css">
		<link rel="stylesheet" type="text/css" href="scrollable-buttons.css">
		<link rel="stylesheet" type="text/css" href="tooltip.css">
		<link type="text/css" href="themes/base/ui.all.css" rel="stylesheet" />
		<link type="text/css" href="UI_Includes/demos.css" rel="stylesheet" />

		<script src="JQuery.js"></script>
		<script src="JQueryTools.js"></script>
		<script type="text/javascript" src="UI_Includes/ui.core.js"></script>
		<script type="text/javascript" src="UI_Includes/ui.draggable.js"></script>
		<script type="text/javascript" src="UI_Includes/ui.resizable.js"></script>
		<script type="text/javascript" src="UI_Includes/ui.dialog.js"></script>
		<script type="text/javascript" src="UI_Includes/jquery.bgiframe.js"></script>
	</head>
<body>
<a class="prevPage browse left disabled"></a>
<div id="dynatip">&nbsp;</div> 
<div class="scrollable">	
	<!-- root element for the items -->
	<div id="dyna" style="left: 0px;" class="items">
	
		<!-- 1-5 -->
		<img src="1.jpg" title="The tooltip text #1"/> 
		<img src="2.jpg" title="The tooltip text #2"/> 
		<img src="3.jpg" title="The tooltip text #3"/> 
		<img src="4.jpg" title="The tooltip text #4"/> 
		<img src="2.jpg" title="The tooltip text #5"/> 
		
		<!-- 5-10 -->
		<img src="1.jpg" title="The tooltip text #6"/> 
		<img src="2.jpg" title="The tooltip text #7"/> 
		<img src="3.jpg" title="The tooltip text #8"/> 
		<img src="4.jpg" title="The tooltip text #9"/> 
		<img src="2.jpg" title="The tooltip text #10"/> 
		
		<!-- 10-15 -->
		<img src="1.jpg" title="The tooltip text #11"/> 
		<img src="2.jpg" title="The tooltip text #12"/> 
		<img src="3.jpg" title="The tooltip text #13"/> 
		<img src="4.jpg" title="The tooltip text #14"/> 
		<img src="2.jpg" title="The tooltip text #15"/> 
	</div>
	
</div>
<a class="nextPage browse right"></a>
<br clear="all">
<div id="dialog" title="Test Dialogue"></div>
<script>
$(function() {
	$("div.scrollable").scrollable();

	$("#dyna img[title]").tooltip({
		tip: '#dynatip', 
		offset: [10, 2],
		effect: 'slide'
	}).dynamic( {
		bottom: {
			direction: 'down',
			bounce: true
		}
	});
	$("#dyna").scrollable();

	$("#dialog").dialog({
		bgiframe: true,
		height: 140,
		modal: true,
		position:["right","bottom"]
	});

	$("#dialog").dialog("close");

	$("#dyna img").click(function(){
		$("#dialog").html("<div>Your text here...</div>");
		//$("#dialog").html($(this));
		$("#dialog").dialog("open");
		$("#dialog").dialog("moveToTop");
	});
});
</script>

</body></html>

Open in new window

0
 
StealthyDevCommented:
You should remove square braces.

      $("#dialog").dialog({
            bgiframe: true,
            height: 140,
            modal: true,
            position: "center"
      });
0
 
PdesignzPPC SpecialistAuthor Commented:
Can we move the dialog box down lower, seems when you click on some of the middle images that the image covers some of the top portion of the dialog box.

Thanks
0
 
PdesignzPPC SpecialistAuthor Commented:
Great Work, Thanks!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.