Solved

JQuery Mutate Plugin on dynamically created object

Posted on 2013-12-16
3
490 Views
Last Modified: 2013-12-24
Hello, I'm using Jquery Mutate Plugin http://www.jqui.net/jquery-projects/jquery-mutate-official/ for changing the size of a div and it was working perfectly, but than I needed this div to be created dinamically through append and then destroy it.

The mutate stop working now and I would like it to work with my dynamically created div as it was working with the static one.


This is the code for the static one:
	$("#user_home_left_column").mutate("height", function(obj, msg){
		
		user_wall_vertical_line_height = $(obj).height() != 0 ? $(obj).height() : user_wall_vertical_line_height;
		$("#user_activity_vertical_line").css("height", (user_wall_vertical_line_height - 155) + "px");
	});

Open in new window



Please help. Thanks.
0
Comment
Question by:ivanblue
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39723375
Hi,
is the variable "user_wall_vertical_line_height" somewhere defined outside of your provided script?
Can you post a link to your page or the HTML source where you have the issue?

Thanks.
Rainer
0
 
LVL 1

Accepted Solution

by:
ivanblue earned 0 total points
ID: 39730931
I isolated the problem and now I see it works. Thanks anyways:

<html>
	<head>
		<title>Mutate 1</title>
	</head>

	<body>
		

		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
		<script src="js/mutate.events.js"></script>
		<script src="js/mutate.min.js"></script>

		<script type="text/javascript">
			$(function(){
				$("body").append(
					"<div id=\"main\" style=\"border:1px solid darkgray;background-color:#efefef;width:500px;position:relative;\">" +
						"<button id=\"btnClick\">Click</button>" +
						"<div id=\"myline\" style=\"position:absolute;top:0;right:5px;width:3px;height:26px;background-color:red;\"></div>" +
					"</div>"
					);

				$("#btnClick").click(function(){
					$("#main").css("height", $("#main").height() + 10);
				});

				$("#main").mutate("height", function (element, info){  
					console.log("main.height: " + $("#main").height());
					$("#myline").css("height", $("#main").height());
				});
			});
		</script>
	</body>
</html>

Open in new window

0
 
LVL 1

Author Closing Comment

by:ivanblue
ID: 39737665
I find my own answer.
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

626 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question