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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
PdesignzPPC SpecialistAuthor Commented:
Great Work, Thanks!!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.