We Keep Coding

Attributes / vars in tooltipster are ignored

I've been trying for two days to figure out why tooltipster (which is great btw) is not taking into account any var declared in the javascript / head section. For instance:
<script>
$(document).ready(function() {
$('.tooltip').tooltipster({
var data = 'toto';
contentAsHTML: true,
animation: 'slide',
delay: 100,
content : $(data)
});
});
</script>
with:
<img src="Pics/winter.png" alt="winter" border="1" class="tooltip" />
is not working at all (meaning the tooltip is not showing up in the HTML page). I tried several coding variations, including adding ' ; ' etc. but it doesn't change the result.
I also tried to get an element's attribute using:
content : '$(this).attr('alt')'
which is my final goal, and it doesn't work either. What am I missing?

The most probable reason is
var data = 'toto';
contentAsHTML,animation,delay,content etc are options that tooltipster accepts.
But when it is coming across var data = 'toto'; it will through an error since it is not an option which tooltipstercan accept

I've made a quick jsFiddle to demo the "correct" way of setting the content of the tooltip from the originating element - on it's intialization.
The reason this wasn't working before was due to:
You declaring the variable data within the JSON object passed to the tooltipster function - this is invalid syntax for JavaScript.
Your second attempt was closer, but using this in the content property is an ambiguous reference to an "outside" this scope - likely unrelated to the tooltipster instance or HTML node you were after.
Here's the amended code that should do what you want:
$(document).ready(function() {
$('.tooltip').tooltipster({
contentAsHTML: true,
animation: 'slide',
delay: 100,
functionInit: function(instance, helper) {
var alt = $(helper.origin).attr('alt');
instance.content(alt);
}
});
});
I hope this helps :)

Using <br> instead of <p> in Summernote?

Needed to use <br> tag in the summernote editor instead of <p> while user clicks on the Enter button, so here is my code:
var $this = $(this),
box = $('textarea.CommentsFields');
box.summernote({
height: 100,
focus: true,
toolbar: [
[ 'all', [ 'bold', 'strikethrough', 'ul', 'ol', 'link' ] ],
[ 'sided', [ 'fullscreen' ] ]
],
callbacks: {
onEnter: function(){
box.summernote('insertNode', document.createTextNode("<br>"));
console.log('uiwdbvuwecbweuiuinsjk');
}
}
});
I wrote a custom callback of the onEnter event, when the user hit the return button it raises a callback, and write the <br> tag which is not what I am looking for.
I read their documentation but can not understand how to stop the default action of the enter button and write <br> tag instead of wrapping the element in <p> tag.
Any idea? Thanks

This code worked for me:
$("#summernote").on("summernote.enter", function(we, e) {
$(this).summernote("pasteHTML", "<br><br>");
e.preventDefault();
});
This interceps the Enter press event and changes its default behaviour, inserting a <br> instead of a new paragraph.

If you don't want to change or fix the summernote library itself, you can use the shortcut keys for adding a line break.
Use Shift + Enter for giving a line break.
Use Enter for changing a paragraph, as summernote add a div/p to start a new line when you press Enter.
Hope this works.

There appear to be at least 10 or so bugs filed about this over at SummerNote, with no fix or plan to fix it unfortunately.
Fortunately you can fix it in a sneaky way, that is going to be pretty brittle to future versions - so upgrade carefully. You Monkey Patch it:
$.summernote.dom.emptyPara = "<div><br/></div>";
box.summernote(options);
The first line is the fix - the Monkey Patch. I included the second line, where SummerNote is initialized, just to demonstrate you MUST do your Monkey Patch before you start SummerNote - or the Monkey Patch will not make it in and you'll still get p tags on enter.

Guaranteed 2 liner & no plugin:
$.summernote.dom.emptyPara = "<div><br></div>"; // js
.note-editor .note-status-output{display:none;} /*css*/

Today summernote has no way to do what you want. You can check https://github.com/summernote/summernote/issues/702, so, the only way is to create your own pull-request with fixed logic for different paragraph style.

This worked for me
Replace (in Summernote.js line 3786)
if (event.keyCode === key.code.ENTER) {
context.triggerEvent('enter', event);
}
in
if (event.keyCode === key.code.ENTER) {
return;
}

I encountered this problem and the solution is below.
onKeydown function in callbacks solves your problems.
Example:
$('.textarea-editor').summernote({
height: 250, // set editor height
minHeight: null, // set minimum height of editor
maxHeight: null, // set maximum height of editor
focus: true, // set focus to editable area after initializing summernote
htmlMode: true,
lineNumbers: true,
codemirror: { // codemirror options
theme: 'monokai'
},
mode: 'text/html',
callbacks: {
onKeydown: function(e) {
e.stopPropagation();
}
}
});

Open fancybox Gallery after click event on a text

I found plenty of stuff on StackOverflow and tried different things to achieve what i want, but i'm stuck on this here.
I have a Text in my HTML, if i click this text a fancybox should open with an Image Gallery, the images should come from the images Array.
What happens now is that it's opening a broken fancybox, without any styling, opacity, closebutton whatsoever. Here's a example of what it looks like!
My Javascript is the following
$(function(){
$("#turn_all_pictures").click(function(){
if(images.length == 0){
loadImages();
}
$(this).fancybox();
$.fancybox.open(
images,
{
'autoScale': true,
'autoDimensions': true,
'centerOnScroll': true,
helpers:{
overlay:{
css:{
'background' : 'rgba(58, 42, 45, 0.95)'
}
},
buttons:{}
}
});
});
})
An entry in the Array looks like this, which should be right according to this Stack Overflow Q/A
Object { href="<img class="hidden_img fancybox" rel="turn_gallery" src="../../../images/1085/5263-3-medium.jpg"/>"}
The needed HTML is this:
<p><span class="turn_left" id="turn_all_pictures">Alle Bilder anzeigen</span></p><br>
What am i doing wrong, what do i miss so that the fancybox will open correctly formatted and with the image Gallery instead of the Text from the HTML?
EDIT
I tried out to append the images in my loadImages() function to a div and then ref to this div with my fancybox.
$.fancybox.open(
images,
{
// 'autoScale': true,
// 'autoDimensions': true,
// 'centerOnScroll': true,
// helpers:{
// overlay:{
// css:{
// 'background' : 'rgba(58, 42, 45, 0.95)'
// }
// },
// buttons:{}
href: '#hidden_pictures'
}
)
That will show all pictures, the whole div, in a fancybox, so i'm guessing that it has something to do with the images array

Check the location of your resources such as your CSS and images for fancybox. You can also inspect your DOM using firebug or some DOM inspection tool to see if your resources are ring found.
I used firebug and looked at the NET tab which showed the http request to the resource. You may see a 404 error if it's not found.

Check you have passed images array in a format like this:
[
{
href: 'image1.jpg',
title: 'title 1'
},
{
href: 'image2.jpg',
title: 'title 2'
}
]
make sure you have included the css properly (check the path)
Also see this

Infinite Scroll functions only in the front page

I'm using the infinite scroll plugin in a tumblr blog and everything works as it should, provided the user is in the front page- for example: "{someblog}.tumblr.com".
Starting from "{someblog}.tumblr.com/page/2" and so on, the plugin doesn't seem to load at all (it doesn't hide the navigation elements).
initialize
Here's the code I use to call it:
$('#container').infinitescroll({
loading: {
finished: undefined,
finishedMsg: "Finished",
img: "preloader.gif",
msg: null,
msgText: "Loading...",
selector: null,
speed: 'fast',
start: undefined
},
state: {
isDuringAjax: false,
isInvalidPage: false,
isDestroyed: false,
isDone: false, // For when it goes all the way through the archive.
isPaused: false,
currPage: 1
},
callback: undefined,
debug: false,
behavior: undefined,
binder: $(window), // used to cache the selector
nextSelector: "#next a",
navSelector: ".navigation",
contentSelector: "#container", // rename to pageFragment
itemSelector: "div.post",
animate: false,
pathParse: undefined,
dataType: 'html',
appendCallback: true,
bufferPx: 400
},
...
edit: I enabled debug information and I got the following info:
({0:"Sorry, we couldn't parse your Next (Previous Posts) URL. Verify your the css selector points to the correct A tag. If you still get this error: yell, scream, and kindly ask for help at infinite-scroll.com."})
({0:"determinePath", 1:"/page/4"})
({0:"Binding", 1:"bind"}
It seems that it does find the address to the next page-"/page/4" (since I was on page 3). But it can't "parse" it for some reason?
Is it possible that the plugin can only function on page one, where the link to next page contains a "2"? If so, how can I override it?
Thanks a lot in advance!

Thanks to #graygilmore I figured it out. This is the line that needs to be added to the code:
pathParse: function() {
return ['http://{Name}.tumblr.com/page/', '']
},
Note that {Name} is a Tumblr variable and needs not be changed- Tumblr replaces it automatically.
Additionally- this line should be added in the state: {...} block:
currPage: {CurrentPage}
(Where as in the example in my question above I simply set it to "1").
{CurrentPage} is a Tumblr variable as well, so it's being replaced automatically with the current page number, for every page being viewed.
Now Infinite-Scroll loads properly on every page of the blog, which is especially useful when wanting to create a "load more posts" button, which gives the user a choice between regular (paged) navigation and infinite-scrolling.

Flowplayer in fancybox?

I am trying to get the Flowplayer to be shown inside a Fancybox, but can't quite get it working. This is my code so far;
$("a.video_link").click(function () {
$.fancybox({
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'title': this.title,
'width': 680,
'height': 495,
'href': '/flowplayer/flowplayer.swf?video=myvideo.flv', /* have also tried a couple of other options for the url settings, but without luck)
'type': 'swf',
'swf': {
'wmode': 'transparent',
'allowfullscreen': 'true'
}
});
return false;
});
Any suggestions?

Try manually launching fancybox and setting setting its content to a flowplayer.
For instance, given the link:
<a href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"
class="videoLink">Demo</a>
create a JQuery click function like this:
$('a.videoLink').click(function(e) {
e.preventDefault();
var container = $('<div/>');
container.flowplayer(
'http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf',
$(this).attr('href')
);
$.fancybox({
content: container,
width: 300, height: 200,
scrolling: 'no',
autoDimensions: false
});
});
Note that flowplayer by default takes up size of it's container, so must be given finite dimensions to view it properly.

Have you tried to create on SWF Object with jQuery thus setting the swf params with that then using the flow players content setting to directly set the html of the model.??
Also try check your debug window too see if there is any errors showing up.
-- E.G
var flashvars = { //Change this with $.extend within click callback if you need to!
file : 'yvideo.flv'
}
var flowBoxParams = {
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'width': 680,
'height': 495,
}
var $conatiner = $('<div></div>').attr('id','MediaPlayerHolder').hide();
swfobject.embedSWF("/flowplayer/flowplayer.swf","MediaPlayerHolder","300","120","9.0.0",flashvars,params,attributes);
$("a.video_link").click(function(){
//Merge basic settings with title
params = $.extend(flowBoxParams,{title:this.title,html:$container});
//Send object to FlowPlay
$.fancybox(params);
//Show the video play
$($container).show();
});
THis is just basically setting to variables with your default settings within them (flashvars ,flowBoxParams), the creating an empty div container with the id (MediaPlayerHolder) and setting it to display:none.
Then we create a basic flash element with swfObject wich is your flowplayer swf and assign it to the hidden div container.
we then wait for the user click to be activated and then we alter the default settings to add title value to the flowplayer options.
We then tell flow player to begin what it needs to do.
with thin change the visibility of the container.
This is untested but if heres any errors they should only be minor, unless flow is strict when it comes to loading the swf will itself.

I do this alot, the only way I could get it to work was by doing simply this,
JavaScript >>
flowplayer(".player", "http://www2.imperial.ac.uk/business-school/etu/courses_1112/common/scripts/flowplayer/flowplayer-3.2.7.swf");
$('.yourbox').fancybox();
Html >>
<a class="yourbox" href="#data" >This shows content of element who has id="data"</a>
<div style="display:none">
<div id="data">
</div>
</div>
If you do it this way, you will need to put an ie hack in aswell, to unload the player, when closing the box.