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.

jQuery prop("disabled") is not functioning

I know this question has been asked and answered many times, but none of the solutions work for this example, even though I know they should. Perhaps other pairs of eyes will help resolve this.
I have placed alerts before and after the code that sets the disabled property, which is indeed set correctly, but the element remains disabled.
I have excerpted the code necessary to reproduce this issue: jsfiddle
Here's some code just to satisfy the SO rule.
$(function () {
var dbVendor = $("#database-vendor");
$("#uses-db").on("change", function (event) {
event.preventDefault();
dbVendor.prop("disabled", ($(this).val() == "Yes" ? false : true));
});
});

Instead of messing with prop("disabled"), do
$dbVendor.selectmenu("enable");
http://jsfiddle.net/r3977gy7/30/
Documentation
http://api.jquerymobile.com/selectmenu/#method-enable

See this solution, please
$(function () {
var dbVendor = $("#database-vendor");
$("#uses-db").on("change", function (event) {
event.preventDefault();
dbVendor.selectmenu($(this).val() === 'Yes' ? 'enable' : 'disable');
});
});

dbVendor.selectmenu(($(this).val() == "Yes" ? "enable" : "disable"))

You are using jquery mobile wich adds "ui-disabled" class to the element and his parent
$(function () {
$("#uses-db").on("change", function (event) {
event.preventDefault();
if($(this).val() == "Yes"){
$("#database-vendor").parent().removeClass("ui-disabled");
$("#database-vendor").removeClass("ui-disabled");
$("#database-vendor").removeAttr("disabled");//edited
}
else{
$("#database-vendor").parent().addClass("ui-disabled");
$("#database-vendor").addClass("ui-disabled")
$("#database-vendor").addAttr("disabled");//edited
}
});
});
actually working code jsffidle

#database-vendor has been wrapped, by jQuery Mobile, with a div and a pile of JavaScript. Changing the disabled property of the select isn't causing jQuery Mobile to respond and change its div.
Removing jQuery Mobile will make the code work.
If you want it to work with jQuery Mobile, then you'll need to look at the jQuery Mobile API to figure out how to enable its pseudo-select elements.

Sharrre - Facebook data-text and data-url not showing on multiple buttons

Earlier I used Sharrre just for one button set per page and it worked just fine. However, I had to change that and now I have 4 sets of buttons and the data-text and data-url values are not showing in the facebook popup - instead it loads the text from the actual linked page which wouldn't bother me so much if it wouldn't come from a hidden form showing "Contact usNameEmail.." etc. It works with twitter and shows first the data-text value and then data-url, just like it should.
I'm using a system almost like the Sharrre example 2 (http://sharrre.com/example2.html) and my codes are now:
HTML
<div class="share-buttons" data-url="MY URL" data-text="MY TEXT"></div>
and the jQuery
$('.share-buttons').each(function() {
$(this).sharrre({
share: {
twitter: true,
facebook: true
},
template: '<div class="share-icon-holder"><img src="fb.png" /><img src="twitter.png" /></div><div class="share-text"><img src="share.png" /></div>',
enableHover: false,
enableTracking: false,
render: function(api, options){
$(api.element).on('click', '.twitter', function(event) {
event.preventDefault();
api.openPopup('twitter');
});
$(api.element).on('click', '.facebook', function(event) {
event.preventDefault();
api.openPopup('facebook');
});
}
});
});
So there's 4 times that html part on my page and I added the .each function trying to solve this but it didn't have any effect. Any hints or advices to solve this?
Here's a fiddle of the problem: http://jsfiddle.net/b54sc/

I found out a solutions for this myself. But if there's any other ideas please share them! Thanks to #CBroe for pointing to the right direction.
Best practice would be using Open Graph meta tags but that's not possible for me because my site is one-page-site so all the content is on the same page. And since meta tags need to be in the HEAD of the html this won't suit me because I'd need four different urls and titles.
But while browsing for the meta tags solution I found another fairly easy solution.
So, Sharrre uses Facebook's sharer.php which is already deprecated. Thou it's deprecated it's still available to use and it's quite common because it doesn't require app_id. But it has changed: it doesn't accept the 't' parameter in the url for the title so that's the reason why my data-text wasn't working. And there's a solution.
This is the page I found:
http://ar.zu.my/how-to-really-customize-the-deprecated-facebook-sharer-dot-php/
Changing the url a little bit does the thing. The title part needs to be 'p[title]' instead of just 't'. And there's also other parameters to use.
THE FIX to Sharrre
Sharrre uses the old method which doesn't work anymore and I just changed the popup creation function in the sharrre.js file on line 325.
From
window.open("http://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent((opt.buttons.facebook.url !== '' ? opt.buttons.facebook.url : opt.url))+"&t="+opt.text+"", "", "toolbar=0, status=0, width=900, height=500");
To
window.open("http://www.facebook.com/sharer/sharer.php?s=100&p[url]="+encodeURIComponent((opt.buttons.facebook.url !== '' ? opt.buttons.facebook.url : opt.url))+"&p[title]="+opt.text+"", "", "toolbar=0, status=0, width=900, height=500");
I don't know how long this solution works because Facebook can change it again anytime but it'll do for now!
Another way would be usign a Facebook dialog but that needs the app_id.

try this: I have added title, url in your code
$('.share-buttons').each(function() {
$(this).sharrre({
share: {
twitter: true,
facebook: true
},
title: $(this).attr('data-href'),
url: $(this).attr('data-url'),
template: '<div class="share-icon-holder"><img src="fb.png" /><img src="twitter.png" /></div><div class="share-text"><img src="share.png" /></div>',
enableHover: false,
enableTracking: false,
render: function(api, options){
$(api.element).on('click', '.twitter', function(event) {
event.preventDefault();
api.openPopup('twitter');
});
$(api.element).on('click', '.facebook', function(event) {
event.preventDefault();
api.openPopup('facebook');
});
}
});
});

determine my own fancybox order

I'm working on a website where images need a fancybox. The images are however not placed in a chronological order in the HTML because they are part of a booklet I realised using booklet.js. So my question is, can I determine in what order fancybox opens my images?
I have tried to get this to work for some time now and made a fiddle for demonstrative purposes.
http://jsfiddle.net/XF8WW/7/
In my fiddle I determine what image has been clicked and what the next/previous image can be. Next I check if fancybox opens the correct image on a first attempt. If it fails I try to close fancybox and open it myself for the correct image.
The only problem in my solution can be found in the last function I wrote (clickPage).
In clickPage I try to close fancybox and reopen it for the correct image. Unfortunately either fancybox doesn't completely close or it doesn't reopen for that image.
function clickPage($pageNr) {
$.fancybox.close();
//$('.fancybox-overlay.fancybox-overlay-fixed').click();
$pageNrMinOne = $pageNr - 1;
$pageNrMinOne = $pageNrMinOne.toString();
$pageNr = $pageNr.toString();
console.log($pageNr);
console.log($pageNrMinOne);
$(".page" + $pageNr).eq($pageNrMinOne).trigger('click');
//$('.page' + $pageNr).click();
}
I know the code works, because when I enter it in the console it does.
Thank you for your time
Have a nice day

Alright, I managed to fix it.
Rather than using this script for my booklet:
http://www.netzgesta.de/booklet/
which rearanges the HTML I used this script:
http://builtbywill.com/code/booklet/
The latter doesn't rearange the HTML and is in my opinion the best booklet script out there so far.
Thanks everyone for your replies!
Have a nice day

I recommend handling your data needs separately (instead of using img src), passing it into the fb sig as the first argument:
var images = [
{
'href' : 'http://dromenopmaat.be/dromen_op_maat/images/nl/1_big.jpg',
'title' : 'some title' //optional
},
{
'href' : ' http://dromenopmaat.be/dromen_op_maat/images/nl/2_big.jpg ',
'title' : 'some title'
},
//etc
]
$.fancybox.open(
images,
{
index : 0,
nextEffect : 'none',
prevEffect : 'none',
margin : 100,
padding : 10,
type : 'image',
wrapCSS : 'fancy-gallery-wrapper',
helpers : {
overlay : {
speedIn : 0,
speedOut : 300,
opacity : 0.7
},
title : {
type : 'inside'
}
}
});
(fancybox v2.0)
Ultimately, you are making your project overly complex, needlessly.
Build a json object in the order you wish, and send fb whatever extra params you might need (i just pulled this from a project, so tailor as you see fit).
Hope that helps -

Javascript Fancybox 1.3.4 Solution but needed it further explained please

This answer has been taken from this post:
Fancybox problem on iPhone
This was voted as best answer but I am new and still learning at js and I am having such a difficult time putting this all together, can someone help me with some more detailed instructions?
Fancybox attempts to auto resize and center itself everytime that the
browser window is resized, and this event gets triggered a lot on
iPads and iPhones. For fancy box 1.3.4, the code which controls this
is line 608: $(window).bind("resize.fb", $fancybox.resize);
To fix the issue, I modified this part of the fancybox JS, and added
another option called "resizeOnWindowResize", which you can set to
false for iPad and iPhone users, or just disable all together.
if(currentOpts.resizeOnWindowResize) { $(window).bind("resize.fb",
$fancybox.resize); } You must also add a default value for this
option in $.fn.fancybox.defaults hash map.
Then, when calling fancybox you can utilize this new option:
$('#fancybox_link').fancybox(${'scrolling': 'no',
width: 'auto',
height: 'auto',
centerOnScroll: false,
resizeOnWindowResize : false});
I got as far as go to line 608. I really do not know what to do next. What should the final product look like after you've added "resizeonwindowResize" and the if statement?

Add this:
if(currentOpts.resizeOnWindowResize) {
$(window).bind("resize.fb", $.fancybox.resize);
}
Where you find:
$(window).bind("resize.fb", $.fancybox.resize);
Near the bottom of:
$.fn.fancybox.defaults = { //blah blah blah options here.
onComplete : function(){},
onCleanup : function(){},
onClosed : function(){},
onError : function(){},
// Add this
resizeOnWindowResize: true
};
Then save and when you call the fancybox:
$('.photo_gallery a').fancybox({
resizeOnWindowResize: false
});

This is also an alternative. Just replace the $.fancybox.resize function to as follows. It's just adding a simple userAgent check to avoid the .center call for iPhones.
$.fancybox.resize = function() {
if (overlay.is(':visible')) {
overlay.css('height', $(document).height());
}
if(!(navigator.userAgent.match(/iPhone/i)) && !(navigator.userAgent.match(/iPod/i))) {
$.fancybox.center(true);
}
};