We Keep Coding

Repeat JS Textillate function each time modal is opened

I am using uikit modal on a project. I am also using JS Textillate to animate the text when the modal is opened. However, I want the text to be animated if the modal is closed and opened again continuously. For now, it only animate once when the modal is opened for the first time, when closed and opened again, the animation does not run again.
This is the JavaScript code below:
$(".uk-modal-full").on('show', function(){
var $title = $(".txt").textillate({
// in animation settings.
in: {
effect: "fadeIn", // set the effect name
},
// out animation settings.
out: {
effect: "fadeOut",
delayScale: 0,
delay: 0,
},
type: "char",
autoStart: true,
});
var $title = $(".txt2").textillate({
// in animation settings.
in: {
effect: "fadeIn", // set the effect name
},
// out animation settings.
out: {
effect: "fadeOut",
delayScale: 0,
delay: 0,
},
type: "char",
autoStart: true,
});
});
I am thinking maybe the function can be removed when modal closes so that it can be repeated when it is opened again. I am not sure if that is possible as I am only a Jquery learner.
$(".uk-modal-full").on('hide', function(){
// code here?
});
Full options for Textillate is here https://github.com/jschr/textillate
UPDATE
Thank you! I have created a codepen here to test my full code inside a modal using your example. It seems to be working but with some issues. When I use $element.textillate('in') and $element.textillate('out'), the other options do not work (e.g. initialDelay). It seems to only control the "in" and "out" options. When I used $element.textillate('start') and $element.textillate('stop'), the other options worked but when modal is reopened, the text are briefly loaded first before animating.
Please see codepen here - https://codepen.io/ajaxthemestudios/pen/XWJRBbW

Looking through the readme of Textillate, I think this section is what you need:
$element.textillate('start') - Manually start/restart textillate
$element.textillate('stop') - Manually pause/stop textillate
$element.textillate('in') - Trigger the current text's in animation
$element.textillate('out') - Trigger the current text's out animation
So I would do something like first define the animations (outside the event functions)
var title1 = $(".txt").textillate({
// in animation settings.
in: {
effect: "fadeIn", // set the effect name
},
// out animation settings.
out: {
effect: "fadeOut",
delayScale: 0,
delay: 0,
},
type: "char",
autoStart: false,
});
var title2 = $(".txt").textillate({
// in animation settings.
in: {
effect: "fadeIn", // set the effect name
},
// out animation settings.
out: {
effect: "fadeOut",
delayScale: 0,
delay: 0,
},
type: "char",
autoStart: false,
});
And then in the event function:
$(".uk-modal-full").on('show', function(){
title1.textillate('in');
title2.textillate('in');
}
EDIT
I got it to work in this codepen: https://codepen.io/thomas-short/pen/zYxdzWY
Test it by clicking on click repeatedly.
EDIT 2
The problem of the text being briefly visible seems to be a limitation of the library. I could not find a way to solve it using the tools they provide. The only way I managed to make it work is by control it myself:
$(".uk-modal-full").on('show', function(){
title1.textillate('start');
$(".txt2").hide();
setTimeout(() => {
$(".txt2").show();
title2.textillate('start');
}, 1500);
})
And remove initialDelay from the options

jQuery ui dialog box always positioned to top left

My jquery UI dialog box always gets positioned to top left no matter what I specify in the position attribute. I tried adding a css position to the div too. But it was of no use.
Can someone help me with this? Thanks.
$("<div>----Play again?---</div>").dialog({
title: 'Game Over!',
height: 'auto',
width: 'auto',
autoOpen: false,
draggable: true,
modal: false,
position: 'center',
buttons:{
"Yes": function() {
startGame();
$(this).dialog('close');
},
"No": function() {
alert('\nYour Score is: '+score+'\nGood Bye '+playerName+'!');
$(this).dialog('close');
}
}
});

I'm pretty sure you shouldnt need to set a position:
$("#dialog").dialog();
should centre by default.
I did have a look at the article, and also checked what it says on the official jquery-ui site about positioning a dialog : and in it were discussed 2 states of: initialise and after initialise.
Code examples - (taken from jQuery UI 2009-12-03)
Initialize a dialog with the position option specified.
$('.selector').dialog({ position: 'top' });
Get or set the position option, after init.
//getter
var position = $('.selector').dialog('option', 'position');
//setter
$('.selector').dialog('option', 'position', 'top');
I think that if you were to remove the position attribute you would find it centres by itself else try the second setter option where you define 3 elements of "option" "position" and "center".

Colorbox positioning on top of another element

I've got quite an issue with positioning of colorbox. The methods described on official website http://www.jacklmoore.com/colorbox/ are not quite enough for my purpose. The thing is that I have button opening the colorbox and I need to position it "over the button" (button is 50px height, colorbox is something about 700px height so I need to center it over the button (something like 300px top of the button).
I have tried basic repositioning with jquery in onOpen and onLoad function in colorbox like:
onOpen:function() {
$('#colorbox').removeAttr('top');
$('#colorbox').css('top','200px');
},
It works but colorbox settings automatically overwrite those settings right after onOpen or onLoad and colorbox is positioned in center of the viewport again.
So I am basically calling for help, colorbox positioning settings like top, left etc. are simply not enough for positioning on top of the button element.
Thanks in advance!
Edit: full code below
$(".reserve_").live('click',function() {
var loadUrl = $(this).attr("href");
$.colorbox({
innerWidth:660,
innerHeight:720,
returnFocus: true,
overlayClose: true,
fixed: false,
iframe: true,
href: loadUrl,
opacity: 0.6,
reposition: true,
onOpen:function() {
$('#colorbox').removeAttr('top');//test
$('#colorbox').css('top','200px');//test
},
onLoad: function() {
$('#colorbox').removeAttr('top');//test
$('#colorbox').css('top','200px');//test
},
onClosed:function() {
}
});
return false;
});
EDIT 2: link on jsfiddle: http://jsfiddle.net/zS8J8/8/ (sorry about the messy code in CSS and HTML)

The jsfiddle was helpful, I was able to use the same code as you and get it working.
This was tested in firefox 20, chrome 26, IE 9 on Win 7. The "Open Colorbox" link isn't visible in IE using your HTML, but if you move your mouse in that area, you'll see the cursor change and if you click, Colorbox will open in the correct location.
Here's the HTML, I changed class="rezervuj" to id="rezervuj" because we're keying on a single element rather than a bunch of images:
<h3 style="margin-bottom: 300px;">TOP OF THE PAGE</h3>
<div class="unitKontejner">
<div style="float:right;">
<a id="rezervuj" href="http://www.imgur.com">
<div class="reserveIt">
<div class="reserveIt-content">
open colorbox »
</div>
</div>
</a>
</div>
</div>
Here's the script that you can put in the head:
<script>
$(document).ready(function(){
// I removed the options that were set to the default.
// The top and left can be left out or set to a default,
// I used them as a test to see the difference when the event hook is used.
$("#rezervuj").colorbox({
iframe:true,
innerWidth:660,
innerHeight:720,
opacity: 0.6,
top: 0,
left: 0
});
// Use the "cbox_complete" event hook.
// It allows the colorbox div to be positioned after it opens,
// but before the content is loaded.
$(document).bind('cbox_complete', function(){
// Grab the position of the button,
// colorbox can be positioned relative to it.
var pos = $(rezervuj).position();
//console.log(pos);
// Set the position of the colorbox div
// You can add to or subtract from the pos values
// Example: top: (pos.top + 20) + "px"
$("#colorbox").css({
position: "absolute",
top: pos.top + "px",
left: pos.left + "px"
}).show();
});
});
</script>

you can also try this.
$.colorbox({
width: "600px", height: "500px", inline: false, overlayClose: false, escKey: true, iframe: true,
onComplete: function () {
$('#colorbox').removeAttr('top');//test
$('#colorbox').css('top', '100px');//test
$('#colorbox').removeAttr('display');//test
$('#colorbox').css('display', 'block');//test
},
onLoad: function () {
$('#colorbox').removeAttr('display');//test
$('#colorbox').css('display', 'none');//test
},
});

carouFredSel: Show partial items?

I'm using carouFredSel to create a vertical carousel. Everything works great, except I would prefer if partial items would be shown at the bottom, cropped, rather than being hidden. This way it would indicate to users that there are additional items that can be scrolled.
I have been reading the documentation, but so far can't tell if what I am after is possible.
Check out the JSFiddle to see what I mean. Watch the bottom most item on the page.
Javascript
$("ul").carouFredSel({
direction: "up",
align: "top",
width: 100,
height: "100%",
items: {
visible: "variable",
width: 100,
height: "variable"
},
scroll: {
items: 1,
mousewheel: true,
easing: "swing",
duration: 500
},
auto: false,
prev: {
button: ".prev",
key: "up"
},
next: {
button: ".next",
key: "down"
}
});​

This is a bit of a hack, but it works. Set the height of the scroller (in this case, ul) to 150% and the parent element (in this case, body) to overflow: hidden. Now the bottom most element is off screen.
Javascript
$("ul").carouFredSel({
height: "150%"
});
CSS
body {
overflow: hidden;
}

Ha, caroufredsel supports it, no hacks required :))! You can achieve it with the following option:
items: {
visible: '+1'
}
EDIT: This suffers from a problem though. If number of whole visible items + 1 == number of all items, then carousel cannot be scrolled even though one image is visible just partially. You can overcome this issue by setting e.g. minimum: 1 but it is not always a way to go (e.g. if number of images is dynamic and you don't want scroll handlers to appear when there is just one or two images.).

The next not visible element in the vertical carousel is pushed down by the margin.
I'm currently overriding it by the following function:
function cropCarousel () {
var visibleElements = this.triggerHandler("currentVisible"), // show all visible
$lastElement = $(visibleElements[visibleElements.length - 1]); // get the last one
$lastElement.css('margin-bottom', '30px'); // amend the margin
};
cropCarousel.call($('#your_carousel_id'));
The downside of it that you will have to call this function on carousel init and on up and down events. But it works ;)

Add a scrollbar to a modal box in prototype

im created a modal box using prototype.js using the following code, i want to add the scroll to this , how can i add that ?
Modalbox.show($('viewModalbox-'+questionid),{
title: question,
width: 500,
overlayClose: false,
overlayOpacity: 0.25
});

From the ModalBox site:
NEW! “Scrolling mode”. If your content might be long just define the height of the ModalBox and it will be switched into “scrolling mode”
So you just need to add a height value!
Modalbox.show($('viewModalbox-'+questionid),{
title: question,
width: 500,
height: 500,
overlayClose: false,
overlayOpacity: 0.25
});