Develop Reference

Wordpress Plugin Javascript Issue

I purchased a Wordpress accordion plugin that's an addon for the WPBakery Page Builder and the support has been less than helpful. What I would like is to have users click on the title once to open a panel and click on the title again to close the panel. I have all the panels closed by default when the page loads.
You can see the accordion here: Wordpress accordion plugin, it's about the 10th one down:
this is the accordion
The javascript that is being provided is:
jQuery(document).ready(function(){
jQuery('.uc_material_accordion .uc_trigger-{{uc_id}}').click(function(){
if( jQuery(this).next().is(':hidden') ) {
jQuery('.uc_material_accordion .uc_trigger-{{uc_id}}').removeClass('active').next().slideUp();
jQuery(this).toggleClass('active').next().slideDown();
}
return false;
});
});
If anyone can help me, I would greatly appreciate it.

They get the money and we should do support for free! :) you can do something like this:
JS
jQuery(document).ready(function(){
jQuery('.uc_material_accordion .uc_trigger-{{uc_id}}').click(function(){
if( jQuery(this).next().is(':hidden') ) {
jQuery(this).toggleClass('active').next().slideDown();
} else {
jQuery(this).toggleClass('active').next().slideUp();
}
return false;
});
});
P.S: You want to make an accordion to act like tab widget. This line of code will make your widget accordion
jQuery('.uc_material_accordion .uc_trigger-{{uc_id}}').removeClass('active').next().slideUp();

Trigger Bootstrap 4 dropdown on resolution/mobile

I have a header with some links. When the header gets short enough, it goes into mobile view (collapse style).
I want the dropdown to be shown initially, but can be toggled to hide and show again like normal. Basically what I want is: When the page loads/resizes and the navbar goes into mobile, toggle the dropdown so it's visible.
You can toggle a dropdown by doing:
$("#element").dropdown("toggle");
Play around with my example here: https://codepen.io/anon/pen/ZKbJJV

UPDATE:
$(document).ready(function() {
$(window).resize(function() {
if($(window).width()<=768) {
$("#element").removeClass("dropdown-menu");
}else{
$("#element").addClass("dropdown-menu");
}
});
if($(window).width()<=768) {
$("#element").removeClass("dropdown-menu");
}else{
$("#element").addClass("dropdown-menu");
}
});
Now I've tried again with remove and add classes and it works.
http://codepen.io/julianschmuckli/pen/ybYzQe
You can do execute the code, after the page was finished loading:
$(document).ready(function() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$("#element").dropdown("toggle");
}
});
To detect if it is mobile, I copied the snippet from here: What is the best way to detect a mobile device in jQuery?
Or you can also try this version to define it with a specific width of page:
$(document).ready(function() {
if($(window).width()<=768) {
$("#element").dropdown("toggle");
}
});

How to make a switch draggable/clickable on modern desktop and mobile browsers

Here is an image of what I am trying to accomplish http://imgur.com/GxgTzpT. Where you will drag/click the switch and it will stick to either the on or off position. Very similar to this example I found - http://codepen.io/stevenfabre/pen/qpBDy. Problem is that in the example dragging doesn't work on mobile.
All the examples of switches I've seen so far use JQuery UI which would be nice to avoid if possible because I wouldn't need anything else in the library other than the draggable method.
Any help is appreciated.
EDIT:
I currently use JQuery and Foundation and my goal was to not add any more libraries. My final solution was to hack the foundation slider to a switch button. http://codepen.io/anthony-dandrea/pen/XbOmoG
Definitely not a clean solution but the hack was simple enough that it will work for what I need. If anyone knows of a better way using those tools or some small library please let me know.

Are you using Boostrap CSS/JS? I would recommend using Bootstrap Switch if you are looking for a lightweight solution and are already using Bootstrap.
http://www.bootstrap-switch.org/
You can also browse through examples of modified switches to see how to change their look (and to turn it on the side if you like). http://www.bootstrap-switch.org/examples.html
The switch just requires standard jQuery and not jQuery UI.If you already have jQueryand Bootstrap, then you can load the bootstrap-switch.js file and be set to go.

I was using foundation and ended up hacking together a draggable switch.
// Init for foundation
$(document).foundation();
// Turns foundation range into a switch
$(document).ready(function() {
var isDown;
// Slider begins to move
$('[data-slider]').on('mousedown touchstart', function() {
isDown = true;
});
// Let go of slider event
$(document).on('mouseup touchend', function() {
if (isDown) {
isDown = false;
var $switch = $('[data-slider]');
var val = $switch.attr('data-slider');
if (val > 50) {
// On
$switch.foundation('slider','set_value', 100);
} else {
// Off
$switch.foundation('slider','set_value', 0);
}
}
});
});
body {
padding: 3em;
}
.range-slider-handle {
height: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
<link href="https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css" rel="stylesheet"/>
<div class="range-slider vertical-range" data-slider data-options="vertical: true; initial: 0;">
<span class="range-slider-handle" role="slider" tabindex="0"></span>
<span class="range-slider-active-segment"></span>
<input type="hidden">
</div>

Topcoat Side Menu on swipe

So I'm working on a phonegap app using topcoat and implemented a fly out menu as seen here. I'm using this script to open/close the menu
$(function () {
var slideMenuButton = document.getElementById('slide-menu-button');
slideMenuButton.onclick = function (e) {
var cl = document.body.classList;
if (cl.contains('left-nav')) {
cl.remove('left-nav');
} else {
cl.add('left-nav');
}
};
});
Now everything is working fine but what I want to add on is the ability to swipe to close the panel and to open it as well. I've seen touch library for jquery that seem to offer a solution (such as TouchSwipe) but I want to try to get this as close as possible to a 1:1 touch movement interaction.
Anyone have an idea on what direction I should go in to get this going or have any ideas? Any help is appreciated.

Found this and with some renaming of classes, I got a touch slide out menu that works how I want. Its called Bamboo.js
Here's a demo of it

Bootstrap Mobile Dropdown menu links not clickable

I am using the latest version of Twitter Bootstrap ( 2.3.2 ) as the framework for my site.
The only issue I have run into with Bootstraps navmenu is that when viewing the site on my phone, the dropdown links are not clickable. When you try to click the link the menu closes. Links outside of the dropdown work just fine though. I checked in my bootstrap-dropdown.js and looked for a recommended line of code I found on a GitHub discussion that is supposed to fix the issue but it was already there. What's the fix for this? I appreciate any help with this matter.
/* APPLY TO STANDARD DROPDOWN ELEMENTS
* =================================== */
$(document)
.on('click.dropdown.data-api', clearMenus)
.on('click.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
}(window.jQuery);

I experienced the same issue. The submenus were not clickable on my mobile. I added the following javascript and it seems to work.
jQuery(document).ready(function($) {
$("li.dropdown a").click(function(e){
$(this).next('ul.dropdown-menu').css("display", "block");
e.stopPropagation();
});
});