mac4best mac4best - 4 months ago 13
jQuery Question

Tried to set the width of a texttilate jquery loaded animation, doesn't work

I got an animation from here: http://codepen.io/jschr/pen/GaJCi

I am using it in my project.



#content {
position: relative;
margin-left: auto;
margin-right: auto;
width: 1000px;
height: 700px;
}

#animation {
position: absolute;
z-index: 20;
width: 1000px;
height:50px;
top: 600px;
left: 350px;
}

#animation2 {
position: absolute;
z-index: 20;
width: 1000px;
height:50px;
top: -25px;
left: 340px;
}

Inside the animation.css:

h1 {
position: absolute;
font: 12vmin/12vmin 'Special Elite', cursive;
left: 0;
top: 30%;
margin-top: -4vmin;
width: 100%;
text-align: center;
padding: 2vmin 0;
text-shadow: 0.15vmin 0.15vmin rgba(0, 0, 0, 0.5);
}

In the main html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="content">
<div id="animation"></div>​
<script>
$("#animation").html('<object data="./animation/animation.htm">');
</script>
<div id="animation2"></div>​
<script>
$("#animation2").html('<object data="./animation/animation2.htm">');
</script>
</div>
And the animations witch i load into te main html:

<head>
<link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet">
<link rel="stylesheet" href="animate.css" charset="utf-8" />
<link rel="stylesheet" href="animation.css" charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="jquery.lettering.js"></script>
<script src="jquery.fittext.js"></script>
<script src="jquery.textillate.js"></script>


</head>

<body>
<h1 class="tlt">Hello to my website and welcome</h1>
<script>
$('.tlt').textillate({
in: { effect: 'splat' },
out: { effect:'hinge', sync: true },
loop: true
});
</script>
</body>

The second animation looks almost same.





What i want is the ability to set the width, to be able to see the whole phrase with the font almost at 30px. The problem is, the first animation i am able to set the font at 8vmin while the second animation i come to 12vmin to get the phrases as one string. If i make it bigger, it will break to more strings or even cut the phrase, depends were i try to set the width. I saw the animation does inject spans into my html and they are width 300, while i need almost width 700. I was trying to find away online also tried to change my css with no result. I also tried to catch the span injection and make it larger, but not helped so fare. Still hope to find a solution to this. If someone knows how, please show me, thanks.

Answer

I found out, i can this:

<script>
       $("#animation").html('<object data="./animation/animation.htm">');
 </script>

simply to this:

<script>
       $("#animation").html('<object width="600px" data="./animation/animation.htm">');
 </script>

And this is how it worked for me, it increased the width inside the loaded object data, thanks anyway.