possible issue with jquery and mobile navigation - javascript

I'm customizing a wordpress template and running into an issue with the mobile version of the navigation. When there's a sub-menu under the main menu items, the main menu link won't work. I think it may be related to the way the data-toggle is working, but I'm not certain. Does anyone have any insight of what's causing the problem and how to fix it?
http://otpnet.staging.wpengine.com/

Dont really have much time to debug why its not working. But here is some js that will make it work.
jQuery('.dropdown-toggle').on('click touchstart', function(e) {
if( jQuery(this).next('.dropdown-menu').is(':visible') ) {
jQuery(this).next('.dropdown-menu').fadeOut();
} else {
jQuery(this).next('.dropdown-menu').fadeIn();
}
});

Related

$ionicScrollDelegate.scrollTop() doesn't allow me to scroll up manually after it scrolls down my list

I have a problem with using $ionicScrollDelegate.scrollTop()
I need to scroll down my book list to appropriate book after going out from the reader. I desided to use $ionicScrollDelegate.scrollTop() for this purpose.
It works, but I cannot scroll up my list manually after that.
Maybe someone knows why it happens.
Here is my code:
$timeout(function(){
var BooksListScroll = $ionicScrollDelegate.$getByHandle('BooksListScroll');
$location.hash("main" + $rootScope.currentBookCode);
BooksListScroll.scrollTop(true);
}, 500);
If you are using android platform to do a test, remove the 'true' value on the function. Ex:
BooksListScroll.scrollTop(true);
to
BooksListScroll.scrollTop();
Do a try.. IOS is working fine with the scroll animation but on android the scroll animation make the view freeze! Weird! :(
UPDATE (SOLUTION):
Okay I found the solution.. It seem we need to set 'jsScrolling: true' instead of by default is 'jsScrolling: false' for android.
Please modified/edit this on 'ionic-angular.js'
Hope it help others :)

Wordpress & jQuery Responsive Navigation

I have a problem with the wordpress and with Jquery.
I have this code to show and hide a responsive navigation on the left :
$('.menu').on('click', function(){ if ($('.responsive__menu').hasClass('is-open')) {
$('.responsive__menu').removeClass('is-open');
$('.menu').removeClass('is-active');} else {
$('.responsive__menu').addClass('is-open');
$('.menu').addClass('is-active');}});
It works with my website without Wordpress, but once in Wordpress, it seems that half of the code works : the creation of the cross to close the menu except that the menu does not appear.
Can you enlighten me on some points?
The script is loaded, are there a faster and easier way to transform the code with jquery and toogle () ?
It can only be a trouble about code but why it does not work anymore once on Wordpress ?
Thanks a lot for your help, before asking the question I tried many things. ^^
If it works with any of your websites means the code is good, just you might have conflicts in your css, so include your css which is menu related last, and if it doesn't work either, post your css code, so we could see better what's going on, and there is not need for so much code. Initialize your menu without class .open , in your html and use JQUERY:
$('.menu').on('click', function(){
$(".responsive_menu).toggleClass('open');
});
jQuery comes with wordpress in non-conflict mode , to make sure everything works you should use jQuery variable instead of the $ variable.
you can alternatively do the following
jQuery(document).ready(function($) {
// $ variable can be used here
$('.menu').on('click', function() {
if ($('.responsive__menu').hasClass('is-open')) {
$('.respons__menu').removeClass('is-open');
$('.menu').removeClass('is-active');
} else {
$('.responsive__menu').addClass('is-open');
$('.menu').addClass('is-active');
}
});
});

Firefox- Extension - How to make a sidebar

Can anybody tell me how to make a sidebar. There is nothing about sidebar in the XUL reference. I referred some old codes. But, I can't get where to edit. In those codes I have to create jar files frequently which annoys a lot. Can anybody show me a guidance, just a simple code to add a listbox in sidebar?
Edit:
This code works. I edited the code in "emptysidebar.xul". But it didn't work.
Any solution to add elements in sidebar is welcomed.
I didnt even dreamt that the solution will be this much simple. This is the solution.
var sidebarWindow = document.getElementById("sidebar").contentWindow;
if(sidebarWindow)
{
sidebarWindow.location = "chrome://custombutton/content/login.xul";
// your xul location
}
else
{
alert("sidebar window is not null");
}

Javascript issue with easyslider

First visit this page and hover your mouse over the menu:
http://milabalami.com/saved/2/index.php
Then visit this Wordpress page where I have implemented the exact same code:
http://milabalami.com
When you hover your mouse over the Wordpress menu, you will see that the slider does not show up. Why? I can see that the page gives an error stating:
$ is not a function
http://miladalami.com/wp-content/themes/sandbox/js/custom.js
Why is that? Its the exact same code that worked perfectly on the other page. I dont understand why it is giving that error on the Wordpress page, and not on the other one where the slider works. Anyone that could assist me in solving this puzzle?
Puzzle solved by Yi Jiang.
It looks like somewhere along the way, the $ got overridden. You can still use your code, however, by using jQuery instead of $ -
jQuery(document).ready(function($) {
$("#featured").easySlider({
speed: 400
});
$("#menu ul li a[class!='current']")
.css( {backgroundPosition: "200px 2px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 2px)"}, {duration:400})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(200px 2px)"}, {duration:400})
})
});
It's a stopgap measure, however. You should combine all your code into a single file, instead of separating them out like they are right now, and reduce your dependency on plugins.

onclick issues with dijit.Tooltip

I am facing following issue. I have attached tooltips with some tab titles of a dijit.TabContainer. The hover behavior is OK, but when I click on the tab, the tooltip stays visible unless I click somewhere else on the page.
On googling I got following page discussing this issue. http://ahackersnotes.com/web/hide-dojo-tooltip-after-a-mouse-click-by-extending-dijittooltip.html.
But the solution provided there didn't seem to work (at least in my case). Is there some other solution (may be a subclass solution) which could handle this?
I think I figured out one solution as follows:
dojo.provide("my.Tooltip");
dojo.require("dijit.Tooltip");
dojo.declare("my.Tooltip" , [ dijit.Tooltip ] ,
{
_onFocus: function(/*Event*/ e){
this.inherited(arguments);
this._focus = false;
}
});
Its working for me. I don't know for sure if it can cause any other problem in the tooltips.

Categories

Resources