Can you help me to resolve the following question using jquery and javascript?

Question

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 21-Dec-21 23:59pm

Thierry Nkubito

Add a Solution

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)

Can you help me to resolve the following question using jquery and javascript?

Add your solution here

Preview 0

Can you help me to resolve the following question using jquery and javascript?

Add your solution here

Preview 0

Existing Members

...or Join us