We Keep Coding

Could 'jekyll' interfere with jquery.cookie?

I have managed to implement jquery.cookie in another project with fancyapp with no problems; e.g. tested modal fires once, and to make it fire again I just delete the cookie and it will propagate again (see below).
UPDATE
Here is the example where it works;
If you go to this page: http://avonexampleone.antonio-p-ortiz.com/prior.html click the banner, the modal will fire in the subsequent page and honor the expiration i.e. j.cookie('visited', 'yes', {expires: 1}); wont fire again till a day, And if you clear your cookies and test again the modal will fire. All as expected.
However, I have the same code in another project (jekyll blog), and it appears to work once in a while when tested.
Could there be some weird privacy concern or some setting in jekyll which would prevent this?
Any help would be appreciated!
HTML:
<a id="clickbanner" href="/assets/images/beauty_for_a_purpose/Beauty_for_a_Purpose_Sheri_Card_EN.jpg" rel="gallery"></
JS:
var j = jQuery.noConflict();
j(document).ready(function() {
function openFancybox() {
setTimeout(function() {
j("#clickbanner").trigger('click');
}, 500);
};
var visited = j.cookie('visited');
if (visited == 'yes') {
return false;
} else {
openFancybox();
};
j.cookie('visited', 'yes', {
expires: 1
});
j("#clickbanner").click(function() {
j.fancybox({
href: this.href,
type: "image",
maxWidth: 750,
maxHeight: 502
});
return false;
});
});

It turns out the problem derived from the script tag path not being properly configured. As you can see in the image below, the pages are nested in folders and would need to be marked accordingly to get to the scripts.
So <script type="text/javascript" src="../../../assets/javascript/ya_jquery.fancybox.ready.function.js"></script> as an example did the trick!
Strange thing was, I wasn't getting an error in the console saying I was missing the scripts.

Attach handle on every onhide method of bootstrap3-dialog

I'm using bootstrap3-dialog library from https://nakupanda.github.io/bootstrap3-dialog/
The problem is, everytime the dialog shows (alert, confirm or custom dialog), the body's scrollbar is gone and never come back when dialog closed. I could add this line on every dialog's onhide property, but that would be time consuming:
$('body').css('overflow','scroll')
Is there any other way to trigger that function every time the modal closes?

I was going through the code of bootstrap modal and they have this:
resetScrollbar: function() {
var openedDialogs = this.getGlobalOpenedDialogs();
if (openedDialogs.length === 0) {
this.$body.css('padding-right', BootstrapDialogModal.ORIGINAL_BODY_PADDING);
}
},
Which is called on:
hideModal: function() {
this.$element.hide();
this.backdrop($.proxy(function() {
var openedDialogs = this.getGlobalOpenedDialogs();
if (openedDialogs.length === 0) {
this.$body.removeClass('modal-open');
}
this.resetAdjustments();
this.resetScrollbar();
this.$element.trigger('hidden.bs.modal');
}, this));
}
I can't seem to figure out what would cause this code to not bring the scrollbar back. It seems to be working fine on their website.
If you are comfortable, I would suggest debugging the hideModal function of the api itself and figure out why it is not working and maybe put the above css snippet in there as a work around.
Or maybe post your code on plunkr, jsfiddle so we can look at what is going on.

HTML form doesnt allow spaces on inputs

I have an HTML form loaded in via ajax to a lightbox.
You can see the behaviour on the homepage of http://www.powerbuy.com.au/
In the bottom right of the page there is a Link 'Let us negotiate a deal for you' Clicking this creates a lightbox and loads the form.
The issue is that you cannot put in spaces to any of the fields, it appears to be accepting any other characters, numbers and symbols, but not spaces.
I have looked through the code for any keyCode in the JS, but I cant find anything related to spaces.
Can you replicate the issue? Can you tell me what is going on?

You can simply write below code:
$(document).ready(function(){
$("#id").keydown(function(event) {
if(event.shiftKey)
{
event.preventDefault();
}
if (event.keyCode == 32) {
event.preventDefault();
}
});
});
"id" is your textfield "id" attribute value.

Cause unknown:
Solved by converting lightbox popup from ajax load to iframe.

You can fix it by setting enableKeys : false as following:
Shadowbox.open({
title : "Nouvel Addressee",
content : $("addressee-lightbox-wrapper").innerHTML,
player : "html",
width : 920,
height : 540,
enableKeys : false,
options : {
onFinish: function() {
Event.addBehavior.reload();
}
}
});

I had similar problem. Found out, it has something with 'enableKeys' option.
There is more ways to set this option, but for some reason just this one worked for me:
Shadowbox.init({
skipsetup: true,
enableKeys: false
});
Here are some other solutions mentioned http://shadowbox.1309102.n2.nabble.com/Can-t-add-space-in-text-input-td4518072.html

Trying to interpret jQuery again - how do I pause on video play?

Ok, I'm trying to modify some already written jQuery - as background, I know Javascript decently, but I'm only so-so with jQuery. My understanding of this code is that there's a scrolling bar, which will change every 6 seconds. I am unsure if there's any video specific code in here though - right now the scrollbar has a video embedded on one of the panes, which is clicked on.
What I am trying to do, is set up an image (currently inside <div class=vid>, not shown), which when it is clicked, will stop the paning, UNTIL one of the buttons at the bottom is clicked, and it will also play a flash video.
Here's the code:
<script type="text/javascript">
jQuery(document).ready(function() {
var scroll_item = jQuery("#chained").scrollable({circular: true, mousewheel: false}).navigator().autoscroll({
interval: 6000,
autoplay: false,
autopause: false
});
window.scroll_control = scroll_item.data("scrollable");
scroll_control.play();
var $playBtn = $('#p-p-btn');
$playBtn.click(function(){
if($(this).hasClass('play')){
$(this).addClass('pause');
$(this).removeClass('play');
scroll_control.play();
} else if($(this).hasClass('pause')) {
$(this).addClass('play');
$(this).removeClass('pause');
scroll_control.stop();
};
});
jQuery('#chained').hover(
function() { scroll_control.stop(); },
function() {
if ($playBtn.hasClass('pause')) {
scroll_control.play();
}
}
);
});
</script>
I believe all I have to do is add a condition which will determine if the image has been clicked (it is in <div class=vid>, but I am going to give it an id as well probably), which will turn the paning off (perhaps by "clicking" the play/off button?), and it will also launch the video with an auto play setting.
Does that sound accurate?
How would I turn the paning off?

I don't fully understand the code, because i don't know the whole context.
But try to add this in your document ready:
$("#YOURIMAGEID").bind("click",function(){
scroll_control.stop();
$('#p-p-btn').addClass('play');
$('#p-p-btn').removeClass('pause');
//other logic
});

OpenLayers SelectFeature control with hover delay?

Using OpenLayers, I have a OpenLayers.Control.SelectFeature installed on a layer, with the hover option set to true. When creating the layer I call
<layer>.events.register("featureselected",...)
and
<layer>.events.register("featureunselected",...)
to register functions that create and destroy a popup. This all works fine. Now I want to add a small delay before the popup is created in order to avoid the popup flickering that currently occurs when moving the mouse across multiple features. However, I can't seem to figure out how to do this. I did find the OpenLayers.Handler.Hover handler, which has a delay option, but I don't know how to combine that with the SelectFeature control (if I even can).

I think this post has some valuable info, which I'm about to verify. Some answers down, someone talks about the flickering.
edit: In case you are making your own labels, I noticed the effect is less when you raise the labelOutlineWidth . It seems that only the letters of the label count as 'hover' and not the whole PointRadius radius. When you make the label outline too big, the label looks like a fly that hit a windscreen though (not a square but it follows the label contours, the letters more specifically).
update: apparently this is why when you hover a text label , check this out: pointer events properties. set this attribute (pointerEvents: ) in your OpenLayers.Style and try value 'all' and the others. It sure makes a difference for me.

I bind my feature selections a little different, here's a quick (untested) example that should get you what you need.
var timer,
delay = 500, //delay in ms
hover = new OpenLayers.Control.SelectFeature( <layer> , {
hover: true,
onSelect: function (feature) {
// setup a timer to run select function
timer = window.setTimeout(function () {
// your select code
}, delay);
},
onUnselect: function () {
// first cancel the pending timer (no side effects)
window.clearTimeout(timer);
// your unselect code
}
});
<map>.addControl(hover);
hover.activate();