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();
});
});
Related
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();
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");
}
});
I have a Wordpress powered site, that runs a plugin called UberMenu. As part of modifications to the plugin, I have made some CSS changes to the mobile variation of the menu.
Whilst on mobile, I have set up a very basic toggleClass jQuery code, which toggles a class called "close", which in turn changes the small icon on the right, that is set by CSS:after.
This works a treat on staging:
http://tulaforlife.staging.wpengine.com/
(open site on mobile, tap 'menu', then tap 'products'. note the + sign change to a minus on tap, and back again on close).
I can't however get it working on live:
http://www.tula.com
It just won't toggle the class for the same CSS. Here's the code:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.menu-button-text').attr("onclick","return true");
jQuery('.ubermenu-target').on ('touchstart', function() {
jQuery(this).toggleClass('close');
jQuery('.ubermenu-target').not(this).removeClass('close');
});
jQuery('.ubermenu-target').hover(function () {
jQuery(this).toggleClass("close");
});
});
</script>
CSS:
span.ubermenu-target.ubermenu-item-layout-default.ubermenu-item-layout-text_only:after {
content:"\f067" !important;
}
span.ubermenu-target.ubermenu-item-layout-default.ubermenu-item-layout-text_only.close:after {
content:"\f068" !important;
}
Interestingly, if I change the target of the touchstart in the jQuery to ".ubermenu-target-title" it does toggle the class in the HTML (but only when the actual text is tapped), but it just won't do it for the .ubermenu-target, which is what I want it to do.
Any ideas where I'm going wrong, and why it works on staging but won't work on live? :(
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
I have recently migrated from TinyMCE v3 to v4. I have a custom image inserter which was development on v3 and can't get some elements to work on v4.
I'm having issues opening the default image dialog box. In version 3 this was completed using tinyMCE.execCommand('mceAdvImage');. I am aware mceAdvImage has been removed and have tried using tinymce.activeEditor.windowManager.open('mceImage');.
Anyone know how to do this? I'm ripping out my hair trying to find a solution.
I also faced this issue today and found a solution.
My usecase was to open image dialog on double click.
In tinyMCE.init function you need to add this (example):
tinyMCE.init({
...
ed.on('DblClick', function(e) {
if (e.target.nodeName=='IMG') {
tinyMCE.activeEditor.execCommand('mceImageDialog');
}
});
...
});
I used a command name 'mceImageDialog' but you can use whatever you want. The key to making this command work is to open image plugin.js and add these lines
Path: plugins/image/plugin.js (plugin.min.js):
...
editor.addCommand("mceImageDialog", function(ui, val) {
showDialog();
});
...
And thats it. After doubleclick on image element, the image dialog appears. For your solution you need i think only the plugin addCommand and use this command for your purposes.
Hope this helps.