webmaster2208 Smarty n00b
Joined: 19 Mar 2015 Posts: 1
|
Posted: Thu Mar 19, 2015 8:53 am Post subject: Integrate HoverAlls into tpl file |
|
|
Hello forum
I have bought a script at codecanyon. It's a hover script called HoverAlls.
I want to have a text or button in my tpl file and it should open a window on hover. These are the things I have to integrate but it won't work. Can you please help me? The additional files and jQuery are correctly included. As e.g. Modal window bootstrap works fine I have tried out.
This is the content of the hovered window.
Code: |
<div id="slidingpanel3html">
<p class="hv_text">
<span class="title">Sliding Panels.</span><br>
<span class="subtitle">Quickly build Login Panels, Tours, Social Media Panels, etc.</span><br><br>
<span>You can place your text <span style="font-style:italic">the same as any other HoverAlls effect</span>, or you can opt to use the HTML Mode setting. Using this setting allows you to build your Sliding Panel by writing HTML however you like, wherever you like. Pass the ID of your code to the setting to have HoverAlls automatically move your HTML into the animation container.</span>
</p>
<a href="http://www.codecanyon.net" target="_blank" class="hv_link"></a>
</div>
|
This is what to hover. I will make a button if it works.
Code: |
<div class="effect">
<img src="assets/demo.png" class="panel" alt="Creating Sliding Panels is easy - and done the exact same way as everything else. HoverAlls gives you complete control over the position, movement, timing, transitions, style and much more. " rel="http://codecanyon.net/item/hoveralls-v13/1367456?ref=Crusader12"
data-hoveralls='{
"speed":"500,500",
"text_speed":"1000,1000",
"coords":"10,-100||10,-5||10,-100",
"text_coords":"0,-200||0,22||0,-200",
"bg_class":"topdrop3bg",
"text_class":"panelText3",
"target_container":"panel3",
"opacity":"0,1",
"html_mode":"#slidingpanel3html"
}' />
</div>
|
And this is the script.
Code: |
$(window).load(function(){
/* CAPTIONS */
$('.caption').HoverAlls({
"speed":"220,220",
"text_speed":"400,200",
"opacity":"0,1",
"link_control":"false,_blank"
});
/* MULTIPLE */
$('.multiple').HoverAlls({
"speed":"220,220",
"text_speed":"400,200",
"opacity":"0,1",
"bg_class":"captionBackground1",
"text_class":"captionText1",
"coords":"0,100||0,75||0,100",
"text_coords":"0,50||0,0||0,50",
"link_control":"false,_blank"
});
/* LIGHTBOXES */
$('.lightbox').HoverAlls({
"mode":"lightbox"
});
/* PANELS */
$('.panel').HoverAlls({
"speed":"350,500",
"opacity":"1,1",
"mode":"panel"
});
/* TOOLTIPS */
$('.tooltip').HoverAlls({
"mode":"tooltip"
});
/* TICKERS */
$('.ticker').HoverAlls({
"mode":"ticker"
});
/* ALERT */
$('.alert').HoverAlls({
"mode":"alert"
});
});
|
How to build in into tpl. I have ask the support of this script. He says everything is correct installed but he don't know tpl files and how to work with that.
Thank you |
|