Jquery effect problem stop crash program

Help/How To
1

Hi , my example copy paste code jquery effect page:
https://www.w3schools.com/jquery/exercise.asp?filename=exercise_animate4

into shotcut in overlay html … filter my code :

<!DOCTYPE html><html><head><meta charset="UTF-8">
  
    <script src="qrc:/scripts/jquery.js"></script>
    <script src="qrc:/scripts/rangy-core.js"></script>
    <script src="qrc:/scripts/rangy-cssclassapplier.js"></script>
    <script src="qrc:/scripts/htmleditor.js"></script>
<script>
$(document).ready(function(){
    $("div").animate({fontSize: '100px'}, "slow");
});
</script>
  </head>

  <body style="font-size: 72pt;">
<div style="background-color: rgb(152, 191, 33); height: 200px; width: 600px; font-size: 100px; background-position: initial initial; background-repeat: initial initial;">Hello World</div>
</body></html>

Idea block program exit arrestated program… Windows 10 64 bit 8gb ram cpu : i5 4th.

How to solution problem?

Any Guide Help for jquery effect?

Sorry my english elementar only my language italian.

I love shotcut.

2

I just copied your HTML (without the lines:

<script src="qrc:/scripts/rangy-core.js"></script>
<script src="qrc:/scripts/rangy-cssclassapplier.js"></script>
<script src="qrc:/scripts/htmleditor.js"></script>

and used it as an Overlay HTML filter in Shotcut. It didn’t crash, so I can only assume your problem has to do with these javascript libraries.

Also, you have a font-size for the DIV of 100px and you’re trying to animate it to go to the same value (100px).

Finally, jQuery animate does not initially seem to work when used as an Overlay HTM filter in Shotcut. It works fine in my browser (Chrome) but when I try to use it in Shotcut it goes from the initial font-size (which I set to 72px) to the final font-size (100px) almost immediately! However, when I export it to an mp4 file and play it, it does actually play.

Rather than using jQuery I personally would use the WebVfx javascript extension for Overlay HTML filters such as this. Here is one I created to do expanding text such as you are trying to do:

<html>
<head>
<script>
	function Producer(style) {this.style = style;}
	Producer.prototype.render = function(time) {
					var new_size = initial_size + (time * diff_size);
					this.style.fontSize = new_size + "px"; // Increase font size an increment
	}
	function onLoad() {
		var expand         = document.getElementById("expand");     // The #expand div
		var style          = expand.style;                          // The style object for #expand
		var computed_style = window.getComputedStyle(expand, null); // Object will all styles, not just inline ones
		var initial_px     = computed_style.fontSize;
			initial_size   = +parseFloat(initial_px);  // Remove the characters "px" and convert to FLOAT
			final_px       = expand.getAttribute("data-expand-to");
			final_size     = (final_px !== "") ? +parseFloat(final_px) : 100;
			diff_size      = final_size - initial_size;       // Global scoped variable since it used in the "render" function
	   var producer        = new Producer(style);
	//  Use webvfx to call the "render" function for each frame to change #credit's "top", so making it scroll up.
		webvfx.renderRequested.connect(producer, Producer.prototype.render);
		webvfx.readyRender(true);
	}
	window.addEventListener("load", onLoad, false);
</script>
</head>
<body>
	<div id="expand" style="background-color: rgb(152, 191, 33); height: 200px; width: 600px; text-align: center; font-size: 20px;" data-expand-to="100px">
		Hello World
	</div>
</body>
</html>
3

Thanks You 1000!!! … Link documentation javascript to shotcut?

4

try this interactive…jQuery tutorial