asked on

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

StealthyDev

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?

StealthyDev

Also, if possible, give us your link where you have deployed this page?

Pdesignz

ASKER

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

StealthyDev

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.

Pdesignz

ASKER

yes, actually, let me post to server for you to view...progress so far

Pdesignz

ASKER

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

StealthyDev

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?

Pdesignz

ASKER

Everything the same, use http://alexanderspizza.com/jquery as the root, everything else is the same

StealthyDev

Hi, I have researched a lot.

Please find it as attached:

Best Regards.
P.S. Run scroll.htm
3-in-one.zip

Pdesignz

ASKER

Looks great, only issue is dialog box open in right bottom corner of page, would prefer in center of page.

Thanks!

StealthyDev

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.

Pdesignz

ASKER

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

StealthyDev

You should remove square braces.

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

Pdesignz

ASKER

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

ASKER CERTIFIED SOLUTION

StealthyDev

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Pdesignz

ASKER

Great Work, Thanks!!