I'm using the awesome CarouFredSel JQuery carousel plugin which includes features for integrating the JQuery TouchSwipe library for handheld devices as well.
The carousel elements are divs, within the div is an image and text wrapped in an <ahref> tag.
Everything works as it should, but I've noticed that if the carousel element (in this case a div) includes a link, the swipe effect on various mobile devices does not work.
If I remove the link around the image/text, the swiping motion works fine. It's almost as if preventDefault() is working in reverse. If I remove the link around the image, and leave the text as a link, the swiping works for the image, and not the text.
I can easily click the item as a link, I just cannot swipe if it IS a link.
Has anyone experienced this problem with CarouFredsel in particular?
Many thanks, SO.
Touchswipe is disabled by default for a elements.
See http://labs.rampinteractive.co.uk/touchSwipe/demos/Excluded_children.html
From the link:
By default the value of $.fn.swipe.defaults.excludedElements is "button, input, select, textarea, a, .noSwipe, " To replace or clear the list, re set the excludedElements array. To append to it, do the following (dont forget the proceeding comma) ...
excludedElements:$.fn.swipe.defaults.excludedElements+", #some_other_div" });
I ended up just changing the defaults in the plugin, since all my modals were children of an anchor element.
excludedElements:"button, input, select, textarea, .noSwipe"
The carouFredSel with < a > doesn't work for me well with swipe 'inside'.
You can use excludedElements, but on Ipad you'll have to hold your finger to use < a > (longTap). That's not good for users. If you try to use carouFredSel({ swipe:( option { tap: function ... it won't work (at least in my case).
My solution is to use swipe (touchSwipe) separately:
$(".carusel").swipe({
excludedElements: "button, input, select, textarea, .noSwipe",
swipeLeft: function() {
$('.carusel').trigger('next', 4);
},
swipeRight: function() {
$('.carusel').trigger('prev', 4);
},
tap: function(event, target) {
window.open($(target).closest('.carusel-cnt').find('carusel-cnt-link').attr('href'), '_self');
}
});
Well, I'd really love to know if using links within TouchSwipe and the CarouFredSel plugin is possible, but I found a workaround that seems to work.
Hopefully it will help someone.
I ended up using a second touch jquery library, TouchWipe.
When, calling the CarouFredSel plugin, I set the swipe parameter to true:
$('#carousel-slider').carouFredSel({
width: '100%',
prev: '#prev-propslider',
next: '#next-propslider',
swipe: true
});
Then, calling both the TouchSwipe AND Touchwipe libaries (not sure if this matters, but I'm using the regular TouchSwipe swipe:true parameter for another slider without links), I wrote a separate function to call custom events for the TouchWipe plugin:
$('#carousel-slider').touchwipe({
wipeLeft: function() {
$('#carousel-slider').trigger('next', 1);
},
wipeRight: function() {
$('#carousel-slider').trigger('prev', 1);
}
});
Hopefully this helps someone, but I'd really love to know if TouchSwipe and CarouFredSel can work with <a href> tags as I cannot find any live working examples.
Thanks for the solutions with the excludedElements, that fixed my problem as well. Never thought of that.
But you don't have to use the touchwipe Plugin separately, there is "swipe.options" as a configuration option for touchswipe in the caroufredsel plugin.
See the caroufredsel options
There you can use all options of the touchswipe plugin, I think.
You can use below function to enable click after swipe.
`$('.class').swipe({
swipe: function(event, direction, distance, duration, fingerCount) {},
click: function(event, target) {
$(target).click();
},
threshold: 75
});`
https://stackoverflow.com/a/11919170/3223427
Caroufredsel is already integrated and compatible with touchswipe.
Add tochswipe js library
Add the touch events in the caroufresel configuration
JAVASCRIPT RESULT
$(document).ready(function () {
$('#foo2').carouFredSel({
auto: false,
responsive: false,
items: {
visible: 3,
width: 100
},
width: 600,
prev: '#prev2',
next: '#next2',
pagination: "#pager2",
swipe: {
onMouse: true,
onTouch: true
}
});
});
Here is a working demo
Related
I need to implement Autocomplete feature in ag grid cell on the table. Is ag provides any options for that. I am just seeing select with options. But my need is to edit the cell and while start typing the values has to display below based the character.
Like you I could not find this feature. I decided to write an Angular component for this purpose and share it.
It has the ability to filter by starting to type, as well as clicking the selection by mouse. Keyboard arrow up and down navigation is also included.
It's a simple component and should be quite straightforward to edit to your likings, or take the code and implement in JS or a different framework if you are not using Angular. I am having some unfortunate cosmetic issues (primarily on the last column of the grid), which I hopefully can solve soon and then will update the repository.
https://github.com/superman-lopez/ag-grid-auto-complete
Edit:
Since my original post, a new project has started and this is not limited to Angular projects:
https://github.com/avallete/ag-grid-autocomplete-editor
You can use a jQuery autocomplete as part of the cell editor. You have to do it in the afterGuiAttached function of the custom editor so it won't run until after your input has been created.
// function to act as a class
function YourCustomEditor () {}
// gets called once before the renderer is used
YourCustomEditor.prototype.init = function(params) {
this.eInput = document.createElement('input');
this.eInput.setAttribute('class', 'inputClass');
this.eInput.setAttribute('type', 'text');
}
};
YourCustomEditor.prototype.afterGuiAttached = function() {
$('.inputClass').autocomplete({
source: function(request, response) {
// Do your autocomplete filtering here
},
datatype: 'json',
select: function(event, ui) {
// Do Stuff on select
}
});
this.eInput.focus();
};
We are having 2 applications in the same page both of which use 1 fancybox each.The first application which is flex based loads a fancybox:
$(document).ready(function(){
$("a.overlay-flash").fancybox({
'padding' : 0,
'width' : 800,
'height' : 450,
});
});
<a id="hiddenclickermarketInfoPortlet" class="overlay-flash" href="<%=targetThemeURLStr%>" >Hidden Clicker</a>
But when we load our application and call our fancybox it seems the first fancybox gets loaded again.
So 2 questions are
Is there a way to close the original fancybox from our second application?
What or where is this overlay-flash class defined? I checked in the net and lot of people are using this class. (Note the first loaded application is flexbased and ours non-flex based)
I'm not sure how you have two FancyBoxes open and styled... it is meant to be unique and thus has IDs for all of the elements.
But, if you need to close FancyBox, use the API
$.fancybox.close
Should you need to disable the overlay, just use the overlayShow option:
$("a.fancybox").fancybox({
overlayShow : false
});
or since it sounds like you might not have control over the options, add this to your css:
#fancybox-overlay { display: none !important; }
If you are still having problems, please share some of the markup and code you are using
If you need to apply a plugin to the content inside the fancybox, then do so using the onComplete callback
$("a.fancybox").fancybox({
overlayShow : false,
onComplete:function(){
$('#cboxContent').find('input').autocomplete();
}
});
This is a rephrased question from here. After some testing I isolated the problem, but have no clue on fixing it. No need to read the previous question, this is the simplified code:
THE PROBLEM -> trigger('click') executes, but the event doesn't trigger when inside looped (intervaled) function
$(document.ready(function(){
var checkForConfirmation = function(){
clearInterval(checkInterval);
$("#anchorLink").trigger('click');
}
var checkInterval = setInterval(function(){checkForConfirmation()}, 5000);
});
The function is being called in intervals. When the proper response is replied, interval stops, and simulates the click on an anchor link.
In the html file there is an anchor link <a id="anchorLink" href="#hiddenDiv">Show</a>.
It points to the hidden div which has some content. I'm using Fancybox plugin to show the hidden div when the anchor link is clicked.
If I click on Show link fancybox shows, as expected.
If I get the response from the back-end, code executes as expected, but fancybox is not shown.
If I move $("#anchorLink").trigger('click'); outside the checkForConfirmation function, fancybox shows.
When I replace $("#anchorLink").trigger('click'); with $("#anchorLink").text('Im clicked'); the string shows in the <a id="ancoredLink"> tag.
This is the summary, I have tried it in different situations.
The problem is obviously in triggering the click event while in looping function. The $("#anchorLink") selector is accessible, it is triggering it correctly from everywhere else. Obviously there is a problem in triggering the mouse event inside looping function.
Any suggestions?
Try:
$(document).ready(function(){
// ...
});
instead of:
$(document.ready(function(){
// ...
});
I can't figure this out for the life of me but I am trying to configure my JSTree to override the double click event so it is just single click event. Is this something added to the callback configuration? I am not sure how to do this, will I need to edit the JSTree source code? Documentation here: http://docs.planbleu.org/modules/webportal/jquery/jsTree.v.0.9.5/documentation/#configuration
I tried changing the "ondblclk" to "click" in the source code and then adding a "click" callback option to the config settings and it did nothing... I am probably doing it wrong though.
sending this into the tree creation function did the trick:
onselect: function(n, t) {
t.toggle_branch(n);
},
(where t is the reference to the tree)
I found the correct answer in an issue for the plugin on github. The above answers do NOT work. This absolutely works and is a comprehensive answer on how to call the plugin, and how to make it use single-click expand instead of double-click.
$('#jstree')
.on('click', '.jstree-anchor', function (e) {
$(this).jstree(true).toggle_node(e.target);
})
.jstree()
Here is a link to where the author mentions the solution, in case you need it.
$("#tree").bind("select_node.jstree", function (e, data) {
$("#tree").jstree("toggle_node", data.rslt.obj);
$("#tree").jstree("deselect_node", data.rslt.obj);
});
This might get you started in the right direction. You'll probably need to filter out which ones to expand or not depending on meta data.
$fullIndex.on('select_node.jstree', function(e, data){
data.instance.toggle_node(data.selected);
})
.jstree()
$("#your_id_where_Tree").on('select_node.jstree', function(e, data){
data.instance.toggle_node(data.selected);
});
The CollapsiblePanelExtender seems primarily designed to collapse/expand things in response to user mouse events. Is there also a good way to get the extender to collapse/expand things in response to client-side javascript?
In my particular case, I have a number of CollapsiblePanelExtenders (and their corresponding Panels) on a page, and I'm wondering if I could implement an "expand all panels" button by doing something like this strictly on the client side:
for each CollapsiblePanelExtender on this page, call somethingOrOther(extender)
I can implement this logic server-side instead if I did a full postback, but my page takes a long time to load, and so this doesn't seem like it would provide a very slick user experience. Thus I am interested in doing expand/collapse client-side.
It seems like this isn't a use case the AJAX Control Toolkit people had in mind, but I thought I'd check.
Write the following code in the OnClick event of Image/button
<asp:Image ID="img1" runat="server" OnClick="ExpandCollapse()"/>
function ExpandCollapse() {
$find("collapsibleBehavior1").set_Collapsed(true);
$find("collapsibleBehavior2").set_Collapsed(true);
}
Hope this helps!
I have a partly working solution now.
I followed Ian's suggestion and looked through the toolkit source. In CollapsiblePanelBehavior.debug.js, you can that expandPanel() is apparently intended as part of the public interface for the behavior. There's also a get_Collapsed(). The key to accessing these behaviors in javascript seems to be setting the BehaviorID property on your CollapsiblePanelExtender tags in ASP.NET.
I modified the repeater on my page so that the BehaviorIDs are predictible, along these lines:
<ajaxToolkit:CollapsiblePanelExtender
BehaviorID="<%#'collapsebehavior'+DataBinder.Eval(Container.DataItem,'id')%>"
ID="CollapsiblePanelExtender" runat="server" />
This results with behaviors named collapsebehavior1, collapsebehavior2, collapsebehavior3, etc..
With this done, I'm able to expand all the collapsible panels on the client as follows:
function expandAll() {
var i = 0;
while (true) {
i++;
var name = 'collapsebehavior' + i;
var theBehavior = $find(name);
if (theBehavior) {
var isCollapsed = theBehavior.get_Collapsed();
if (isCollapsed) {
theBehavior.expandPanel();
}
} else {
// No more more panels to examine
break;
}
}
}
I'm sure using $find in a loop like that is really inefficient, but that's what I have so far.
Also, it doesn't work on Firefox for some reason. (On FF only the first element expands, and then there's a Javascript error inside the Control Toolkit code.)
This will all seem extremely ugly to all you javascript pros. Maybe I'll clean things up later, or you can help me out.
You can also just toggle the panels to switch between collapsed/expanded states:
function toggle() {
var MenuCollapser = $find("name");
MenuCollapser.togglePanel();
}