Click here to Skip to main content
15,565,474 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
Create the widget in attachment with Jquery & javascript. To use the widget on a page, we should only write <div class="position_widget"> </div> and $(div_id input).Val() to get its value. Upon selection of the widget value $(widget).val(), the widget should return "top left" "top center", etc.


What I have tried:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="width=device-width, initial-scale=1">
	<title>jQuery UI position method</title>
	
    <link  type="text/css"  rel="stylesheet" href="css/style.css">
    <link type="text/css"   rel="stylesheet" href="jqueryui/jquery-ui.css" >
    <link type="text/css"   rel="stylesheet" href="jqueryui/jquery-ui.structure.css">
    <link  type="text/css" rel="stylesheet"  href="jqueryui/jquery-ui.theme.css">
    
    
     <script type=text/javascript src="js/jquery.js"></script>
     <script type=text/javascript src="jqueryui/jquery-ui.js"></script>

	<script>
		$(function() {
            
			
        function position() {
				
         $(".positionableClass").position({

       my: $("#myHorizontalID").val() +" " + 
           $("#myVerticalID").val(),
					
       at: $("#atHorizontalID").val()+ " " + 
           $("#atVerticalID").val(),
					
       of: $("#parentDivID"),
					
             
collision: $("#collHorizontalID").val() +" " + 
           $("#collVerticalID").val()

				});
			}

			$("select").on("click keyup change", position);

			$("#parentDivID").draggable({
				drag: position
			});

			position();
        
            
		});
	</script>
</head>

<body>
	<h1 style="color:green">GeeksforGeeks</h1>
	jQuery UI position method 
	<div class="height"> </div>

	<div id="parentDivID">
		
<p>
			This is the parent target element.
		</p>

	</div>

	<div class="positionableClass" id="positionableId">
		
<p>
			Change my position
		</p>

	</div>

	<div id="optionsDivID">

		<div class="selectDiv">
			Select "my" positions :
			<select id="myHorizontalID">
				<option value="left">left</option>
				<option value="center">center</option>
				<option value="right">right</option>
			</select>
			<select id="myVerticalID">
				<option value="top">top</option>
				<option value="center">center</option>
				<option value="bottom">bottom</option>
			</select>
		</div>
		<div class="selectDiv">
			Select "at" positions :
			<select id="atHorizontalID">
				<option value="left">left</option>
				<option value="center">center</option>
				<option value="right">right</option>
			</select>
			<select id="atVerticalID">
				<option value="top">top</option>
				<option value="center">center</option>
				<option value="bottom">bottom</option>
			</select>
		</div>
		<div class="selectDiv">
			Select collision options:
			<select id="collHorizontalID">
				<option value="flip">flip</option>
				<option value="fit">fit</option>
				<option value="flipfit">flipfit</option>
				<option value="none">fit none</option>
			</select>
			<select id="collVerticalID">
				<option value="flip">flip</option>
				<option value="fit">fit</option>
				<option value="flipfit">flipfit</option>
				<option value="none">none</option>
			</select>
		</div>
	</div>

</body>

</html>
Posted
Comments
OriginalGriff 22-Dec-21 6:29am    
And?
What does it do that you didn't expect, or not do that you did?
What have you tried to do to find out why?
Are there any error messages, and if so, where and when? What did you do to make them happen?

This is not a good question - we cannot work out from that little what you are trying to do.
Remember that we can't see your screen, access your HDD, or read your mind - we only get exactly what you type to work with.
Use the "Improve question" widget to edit your question and provide better information.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900