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 :)

scriptaculous blindUp/blindDown issue

I wrote a little script that observes clicks and blinds up/down according to the 'display' property, and also added a queue-to-end parameter to the blindUp in order to avoid even more serious display issues. This is obviously not the way to implement this, as display bugs appear if click events are invoked in the middle of the effect.. This is the code:
<script type="text/javascript">
$$('#leftnav_container #modules h2').each(function(El){
El.observe('click',function(){
container = this.next('div');
display = container.getStyle('display');
if(display == 'none'){
container.blindDown({duration: 0.3});
}else{
container.blindUp({duration: 0.3, queue: 'end'});
}
})
});
</script>
Again, the problem is that I rely on 'display'. What is the proper way to this?

This should simplify it
$$('#leftnav_container #modules h2').invoke('observe','click',function(){
container = this.next('div');
Effect.toggle(container , 'blind', { duration: 0.3 });
});
Firstly if you are only running one method on all elements in the array returned from $$() then you can use the PrototypeJS method invoke().
http://api.prototypejs.org/language/Enumerable/prototype/invoke/
Then Effect.toggle() will check if the element is visible and do the appropriate up/down effect.
Try this out and let me know if it works for you.

Why is bxslider duplicating my divs

My designer put a bxslider to scroll through 3 divs nicely on my page.
When the page runs, in the html I see it generates 6 divs on the page. It shows div 3, div2, div1, div3, div2, div1.
Just because the duplicated fields on my page now mess up my programing.
Is that neccesary, and is there any way I can touch the code that it shouldn't duplicate my divs?
The page is full of complex code , with an ajax passing the data-serialize to a post form.
Becuase it's all duplicated, now all fields are coming through as 'value,value'. Therefore it's not giving me accurate respones, and well as undefined when it's supposed to be numeric.
My form posts looks like this:
function submitCart () {
$.post(
"scripts/savecart.asp",
$("#form1").serialize()
);}
How could I add that not bx- to it?

As commented in the source code of bxSlider:
if infinite loop, prepare additional slides
So I was able to fix this by adding infiniteLoop: false to the config object:
$(".js-slider").bxSlider({
infiniteLoop: false
});

BxSlider duplicates elements to allow infinite scrolling, etc. For example, say you only have two elements in your slider. Element one might be sliding out on the left, but also sliding in on the right. Therefore, duplicates are required.
If this is a problem, you can usually interact with the duplicates using their bx-clone classes. If you could clarify the actual problem, we could probably give more specific advice.
Update: To eliminate cloned elements from your set, try something like:
$('.bxslider li:not(.bx-clone)')....

I had such problem with bx-clone
I want to use it for an image gallery. So I had a thumbnail image slider and for slider I used bx-slider and on each click on small image , that image in bigger size must show in a div , But on bx-clone clicked nothing happened
I solved that problem with this :
var slider = $('.bxslider').bxSlider({
minSlides: 4,
maxSlides: 4,
slideWidth: 92,
moveSlides: 1,
pager: false,
slideMargin: 10,
onSliderLoad: function(){
$('li.bx-clone').click(function() {
/** your code for bx clone click event **/
});
}
});

Adding to #antongorodezkiy's answer, there is a way to have infiniteLoop: false and still get a non-stopping slide changing: using the onSlideAfter event of the last slide you can, after a few seconds, go back to the first slide and re-start the auto mode:
var pauseTime = 4000; //Time each slide is shown in ms. This is the default value.
var timeoutId;
var slider = $('.bxslider').bxSlider({
auto: true,
infiniteLoop: false,
pause: pauseTime,
onSlideAfter: function ($slideElement, oldIndex, newIndex) {
if (newIndex === slider.getSlideCount() - 1) { //Check if last slide
setTimeout(
function () {
slider.goToSlide(0);
slider.startAuto(); //You need to restart the "auto" mode
},
pauseTime //Use the same amount of time the slider is using
);
}
else { //In case the user changes the slide before the timeout fires
clearTimeout(timeoutId);
slider.startAuto(); //Doesn't affects the slider if it's already on "auto" mode
}
}
});
The difference between this solution and the infiniteLoop: true option is that instead of smoothly transitioning back to the first slide as if it was the next, the slider quickly "rewinds" until reaching the first slide.

for above query: Is it possible to keep having the infinite loop, but remove the clones?
try using below code: if more than 1 item infiniteloop: true else :false
infiniteLoop: ($j("...selector...").length < 2) ? false : true,

Just to answer here, so if some one is struggling and cannot fix the duplication issue. I was facing the same problem that all of my HTML from my page was duplicating inside the first slide under the image tag like bellow:
<img src="public/admin/scr3.png" ><div>..... all of my page HTML...</div></img>
I just found that I was writing the image tag not properly
Meaning my code was something like this for image tag
<img src="public/admin/scr3.png" >
I just replaced my image tag with valid HTML like bellow:
<img src="public/admin/scr3.png" />
and it fixed the content duplication issue.
Hope it will help someone.
Cheers!

I´m not sure if it´s the same issue I was facing, but here´s my case:
My code was using bx slider together with fancybox. And it was duplicating my slides. The solution was to put the secodary code (fancy box), which was generated in my image loop, inside the tag. That did it for me.

pass window width to iosSlider when hidden

I'm making a site that makes use of the iosSlider plugin. I have a few sliders inside of a jquery accordion so some of them start out "display:none" when the page first loads. As a result the sliders inside the accordions are not getting the proper screen width. When you open one of the hidden accordions the slider inside is tiny.
I was curious if there was a better method to solving this issue then the one I am currently using. Right now I am simply destroying the slider and recalling it but this looks ugly and I'm sure there is probably a better approach to solving this.
Any input would be great, thanks
Current code:
$(".acheader").click(function(e) {
//e.preventDefault();
e.stopPropagation();
acords.slideUp();
$(".menuarrow").attr('src','/themes/images/arrow_down.png');
var image = $(this).find(".menuarrow");
if(image.attr('src') === "/themes/images/arrow_down.png"){
image.attr('src','/themes/images/arrow_up.png');
}
if ($(this).next().is(":hidden")) {
$(this).siblings(".accontent").slideToggle(100);
$('.iosSlider2').iosSlider('destroy');
$('.iosSlider2').iosSlider({
snapToChildren: true,
desktopClickDrag: true,
keyboardControls: true,
navNextSelector: $('.next'),
navPrevSelector: $('.prev'),
onSlideChange: slideChange2
});
}
else image.attr('src','/themes/images/arrow_down.png');
});
EDIT: this is for a mobile site so there are no static widths I can refer to. The sliders parents inherit their widths from their parents.. etc.

Taking a look at the iosSlider docs, under public methods, it looks like there is an update command which should resize it. Use $('.iosSlider2').iosSlider('update'); instead of destroying. Does that help?

Codemirror editor is not loading content until clicked

I am using codemirror 2 and its working fine except that the editor's set value doesn't load into the editor until I click the editor and it becomes focused.
I want the editor to show the content of itself without it having to be clicked. Any ideas?
All of the codemirror demos work as expected so I figured maybe the textarea isn't focused so I tried that too.
$("#editor").focus();
var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
mode: "text/html",
height: "197px",
lineNumbers: true
});

You must call refresh() after setValue(). However, you must use setTimeout to postpone the refresh() to after CodeMirror/Browser has updated the layout according to the new content:
codeMirrorRef.setValue(content);
setTimeout(function() {
codeMirrorRef.refresh();
},1);
It works well for me. I found the answer in here.

Just in case, and for everyone who doesn't read the documentation carefully enough (like me), but stumbles upon this.
There's an autorefresh addon just for that.
You need to add autorefresh.js in your file.
Now you can use it like this.
var editor = CodeMirror.fromTextArea(document.getElementById("id_commentsHint"), {
mode: "javascript",
autoRefresh:true,
lineNumbers: false,
lineWrapping: true,
});
works like a charm.

I expect you (or some script you loaded) is meddling with the DOM in such a way that the editor is hidden or otherwise in a strange position when created. It'll require a call to its refresh() method after it is made visible.

I happen to be using CodeMirror within a bootstrap tab. I suspected the bootstrap tabs were what was preventing it from showing up until clicked. I fixed this by simply calling the refresh() method on show.
var cmInstance = CodeMirror.fromTextArea(document.getElementById('cm'), {
lineNumbers: true,
lineWrapping: true,
indentUnit: 4,
mode: 'css'
});
// to fix code mirror not showing up until clicked
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function() {
this.refresh();
}.bind(cmInstance));

Something worked for me.
$(document).ready(function(){
var editor = CodeMirror.fromTextArea(document.getElementById("code2"), {
//lineNumbers: true,
readOnly: true,
autofocus: true,
matchBrackets: true,
styleActiveLine: true
});
setTimeout(function() {
editor.refresh();
}, 100);
});

The 5.14.2 version of codemirror addresses this fully with an add on. See this answer for details.

I am working with react, and all these answers did not work with me...After reading the documentation it worked like this:
in the constructor, I initialized an instance of code Mirror:
this.mirrorInstance = null;
and on opening the tab that contains the codeEditor, I refreshed the instance after 1 millisecocnd:
toggleSubTab() {
setTimeout(() => {
this.mirrorInstance.refresh();
}, 1);
}
and here is the JSX code:
<CodeMirror
value={this.state.codeEditor}
options={{
mode: "htmlmixed",
theme: "default",
lineNumbers: true,
lineWrapping: true,
autoRefresh: true
}}
editorDidMount={editor => {
this.mirrorInstance = editor;
}}
/>

I just ran into a version of this problem myself this evening.
A number of other posts regard the visibility of the textarea parent as being important, if it's hidden then you can run into this problem.
In my situation the form itself and immediate surroundings were fine but my Backbone view manager higher up the rendering chain was the problem.
My view element isn't placed on the DOM until the view has rendered itself fully, so I guess an element not on the DOM is considered hidden or just not handled.
To get around it I added a post-render phase (pseudocode):
view.render();
$('body').html(view.el);
view.postRender();
In postRender the view can do what it needs knowing that all the content is now visible on the screen, this is where I moved the CodeMirror and it worked fine.
This might also go some of the way to explain also why one may run into problems with things like popups as in some cases they may try to build all content before displaying.
Hope that helps someone.
Toby

Yet another solution (which I also realised was because the editor needed to be visible to create properly) is to temporarily attach the parent element to the body element during construction, then reattach once complete.
This way, you don't need to meddle with elements, or worry about visibility in any existing hierarchies that your editor might be buried.
In my case, for processr.com, I have multiple, nested code editing elements, all of which need to be created on the fly as the user makes updates, so I do the following:
this.$elements.appendTo('body');
for (var i = 0; i < data.length; i++)
{
this.addElement(data[i]);
}
this.$elements.appendTo(this.$view);
It works great, and there's been no visible flicker or anything like that so far.

Try calling focus on the DOM element instead of the jQuery object.
var editor=$( '#editor' );
editor[0].focus();
// or
document.getElementById( 'editor' ).focus();

<div class="tabbable-line">
<ul class="nav nav-tabs">
<li class="active">
Xml 1
</li>
<li class="">
Xml 2
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tabXml1">
<textarea id="txtXml1" />
</div>
<div class="tab-pane" id="tabXml2">
<textarea id="txtXml2" />
</div>
</div>
</div>
<link rel="stylesheet" href="~/Content/codemirror.min.css">
<style type="text/css">
.CodeMirror {
border: 1px solid #eee;
max-width: 100%;
height: 400px;
}
</style>
<script src="~/Scripts/codemirror.min.js"></script>
<script src="~/Scripts/codemirror.xml.min.js"></script>
<script>
$(document).ready(function () {
var cmXml1;
var cmXml2;
cmXml1 = CodeMirror.fromTextArea(document.getElementById("txtXml1"), {
mode: "xml",
lineNumbers: true
});
cmXml2 = CodeMirror.fromTextArea(document.getElementById("txtXml2"), {
mode: "xml",
lineNumbers: true
});
// Refresh code mirror element when tab header is clicked.
$("#xmlTab2Header").click(function () {
setTimeout(function () {
cmXml2.refresh();
}, 10);
});
});
</script>

Something worked for me! :)
var sh = setInterval(function() {
agentConfigEditor.refresh();
}, 500);
setTimeout(function(){
clearInterval(sh);
},2000)

using refresh help solve this problem. But it seems not friendly

The reason:
CodeMirror won't update DOM content when it's DOM Node is unvisible.
For example:
when the CodeMirror's Dom is setted style to 'display: none'.
The way to fix:
when CodeMirror's Dom is visible, manual excute the cm.refresh() method.
For example in my application, the CodeMirror Dom will visible when the tab element clicked.
So the simple method is:
window.onclick = () => {
setTimeout(() => {
codeMirrorRef.refresh();
}, 10);
};
You can add event listener on more specific element to improve the performance.

chain this to the master codemirror object, make sure that nothing else is chained
.on('change', editor => {
globalContent = editor.getValue();
});;