I am setting up different CSS for the basic three media Screen, tablet and smartphone. I have a two list I would like to leave as is for Screen but would like to have the two lists become an accordion widget in Tablet mode.
My idea was to go ahead and put everything into the widget. The size that I have set for Tablet view would turn on the jquery script and the Desktop view would turn the script off and the content would just show in normal looking 's
So if the SpryAccordion.js file looks like this: (I have some actionscript exp. So I understand if/else statements but don't know how to use them in js)
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {};
if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.Accordion = function(element, opts) {
//all the spry code...//
};
})();
how would I wrap this to turn the widget on and off?
Or is there a better way to do this? I'm very new to jquery. My other option is to have duplicate content in a Div and the widget and turn the visibility each on/off with css.
But that just wouldn't be very elegant.
Please help.
I think I understand your question. So basically you want to be able to turn the accordion on and off correct?
One way of doing it is simply define the the Spry.Widget.Accordion inside of its own function and only call it when you want to activate the accordion.
Is that kind of what you were looking for?
Related
Problem:
By default in instantsearch.js, the reset button in the search field is hidden until you start typing. However the submit button doesn't hide, causing them to overlap, this seems default behavior(?)
Here is a demo that demonstrates the issue:
https://codesandbox.io/s/quizzical-leakey-7shzr
Expected Outcome:
I want the search submit button to replace (toggle) with the reset button on typing.
Things I've tried:
I have looked through the documentation and can't find any solution to this. There is a showReset and showSubmit parameters as seen here: https://www.algolia.com/doc/api-reference/widgets/search-box/js/ but these just disable them completely.
Changing the template for them in the widget, only stylizes them, rather than adjust their function.
I do have a heavy handed solution I've written in jquery below but my question is: Is there a way to configure this behavior in instantsearch.js?
$( ".ais-SearchBox-input" ).on("keyup", function() {
if($('.ais-SearchBox-input').val().length > 0){
$('.ais-SearchBox-submit').addClass('none');
}else{
$('.ais-SearchBox-submit').removeClass('none');
}
});
$(document).on('click', '.ais-SearchBox-reset', function() {
$('.ais-SearchBox-submit').removeClass('none');
});
The submit button is initially designed to be on the left hand side of the searchbox, and the reset one on the right hand side, as you can see in the InstantSearch.js SearchBox Storybook. In your demo, there's custom CSS that aligns them both on the right, which is why they're overlapping. But they're two orthogonal concepts, so they weren't designed to replace one another out of the box.
Your solution is fine, although I understand that having imperative logic like this on top of InstantSearch.js might feel icky. Another approach is to directly hook into the rendering logic of the widget by using the connectSearchBox connector. You'll be able to fully control what is rendered, and you'll have access to query which you'll be able to leverage to decide whether to show one button or the other.
My advice is to start from the full example and adapt it for your use case.
I would like to add a custom container to Leaflet. The container would contain edit controls and would be used as a kind of properties editor in order to customize the map (marker colors, zoom level, polyline color, etc ...). The panel would be displayed when the user clicks on a "settings" button located on the map.
Is there a Leaflet plugin for this?
I also had a look at how to implement custom controls, but I am really not clear how to achieve this. In particular it seems to me that I can only use JavaScript and DOM manipulations (and no direct HTML markup) in order to create a custom control.
Could someone please help me bootstrap the control? thanks!
Edit:
So I tried to create a very simple container consisting of a single checkbox "control" as follow:
L.Control.SettingsPanel = L.Control.extend({
onAdd: function(map){
var checkbox = L.DomUtil.create('input');
checkbox.setAttribute("type", "checkbox");
checkbox.style.width = '200px';
return checkbox;
}
});
L.control.settingsPanel = function(opts){
return new L.Control.SettingsPanel(opts);
}
The sidebar v2 leaflet plugin might be what you are looking for.
Here is my goal: I want to click a specific link on one page, and on the page that loads, I want to change a specific class. I am aware of the onClick function, but not sure it can be used here. Is there a way to do this?
Thank you very much.
This jquery would do what you want:
$(document).ready(function(){
var anchor = '#myanchor';
if (window.location.href.indexOf(anchor) > 0) {
//do what you want here, change classes, etc
}
});
you should place this javascript on the second page, change #myanchor for your anchor used.
Make sure to include the jquery library in the second page for this to work.
I want to pass a complex widget with many click handlers to a js function, via jsni, so that it is included in a div element of my js code (in fact it's for the infoWindow content of the maps v3 api).
If I pass the element I loose all my handlers, for some reason. The result is that nothing is triggered when I click on buttons or links.
I thought I could sort it out by first passing a flowpanel and its node and then adding the widget to the flowpanel itslef. But it works sometimes and some times not, in particular not with the infoWindow. The widget appears fine but all handlers won't work.
Please send me any suggestions or ideas you might have!
OK I got the trick from... stackoverflow, suprise ;-)
Here's the post:
http://www.google.com/url?sa=D&q=https://stackoverflow.com/questions/6183181/how-to-add-a-custom-widget-to-an-element
So in the end I did the following
in my jsni function:
var newDiv = $doc.createElement('div');
the function returns the div as an Element which I in turn wrap in an HTMLPanel using HTMLPanel.wrap and then I add the widget!
In jqtouch and iui, what do you do if you want to follow a link like This is a FEED AND dynamically load the content of the <div id="feed-49"></div>?
I've tried bind/live a click handler onto the "a" and onto a parent "div" but it never gets fired, just the event for actually following the link. Thanks.
This is a simplified version of my other question:
jqtouch mobile app ajax loading issue
It depends whether you want the page pre-loaded or load-on-demand.
If you want it pre-loaded, you might want to fill in the page upon, say, $(document).ready:
$(document).ready(function(){
$('#feed-49').load('feed-49.html');
});
If you want it to load on-demand, you can listen to the pageAnimationStart event:
$('#feed-49').bind('pageAnimationStart', function(event, info){
if (info.direction == 'in')
$(this).load('feed-49.html');
});
You may want to read the jQTouch's documentation on callback events.
I just went through what you are going through and know exactly how to solve it. You need to turn that XML into JSON objects, which will be numbered [0],[1], etc.
This JQuery plugin works and rocks : http://www.fyneworks.com/jquery/xml-to-json/ Add that JS to your app. Your parse XML function will then convert the XML nodes you want (like item nodes within a channel) into JSON objects and then numbers the items.
So look how I then empty the current list of items, build a list of the items and add a custom CLICK function to the list items with a class of "sun" (i love jquery). That function then will add it's parent node title and desc to the divs that need it. The href will push it to the new jqtouch DIV which will handle all the detail info. Cool 'eh? Vote me up if this works. It did for me, like a charm.
function parseXml(xml)
{
$('#feedList').html('');
var rss = $.xml2json(xml);
$.each(rss.channel.item, function(i, item)
{
$('#feedList').empty().append('<li class=sun'+i'><a href=#contentDiv>'+item.title+'</a></li>');
$('.sun'+i).click(function() {
$('#titleDiv').empty().append(item.title);
$('#descDiv').empty().append(item.description);
});
});
};