I am using jQuery mobile 1.3.1 panels. I have two panels (one on the left, one on the right) and to open my panels there are buttons and at the same time swipe events. Everything is working fine if the user doesn't refresh the page. If the user refreshes the page he can open the panel at that page but when he clicks to a link on the panel and routes to another page he can't open the panels any more (swipe or button both of them doesn't work). But if I refresh the page again it again starts to work just for one time. By the way I am using ajax for transitions in jqm. I couldn't find out why. Am I missing something in the usage of panels. Here is html;
<div data-role="page">
<div data-role="panel" id="left-panel" class="panel" data-display="push" data-position="left" data-theme="a" class="ui-response">
<div data-role="fieldcontain">
<input type="search" name="password" id="search" value="" placeholder="search"/>
</div>
<a data-role="button" href="home">home</a>
<a data-role="button" href="settings">settings</a>
<button id="signOutButton">sign out</button>
</div><!--Left Panel--> <div data-role="panel" id="right-panel" class="panel" data-display="push" data-position="right" data-theme="a" class="ui-responsive">
</div><!--Right Panel-->
<div data-role="header" data-tap-toggle="false">
<h1>header</h1>
<button id="openLeftPanel">open</button>
<button id="openRightPanel">open</button>
</div><!-- /header -->
<div data-role="content"
<p>this is home</p>
</div><!-- /content -->
</div><!-- /page -->
And here is my js;
$(document).on('pageinit', function(){
//Opening panels with swipe, if any open don't open the panel (avoid closing swipe to open other panel)
//Catch swipes
$( document ).on( 'swipeleft swiperight', function( evt ) {
if ( $.mobile.activePage.jqmData( 'panel' ) !== 'open' ) {
if ( evt.type === 'swipeleft' ) {
$( '#right-panel').panel( 'open' );
} else if ( evt.type === 'swiperight' ) {
$( '#left-panel').panel( 'open' );
}
}
});
$(document).on('click tap', function(evt){
$.mobile.hidePageLoadingMsg();
var target = evt.target;
var targetId = target.getAttribute('id');
//Sign Out
if(targetId === 'signOutButton'){
window.authFunctions.deleteCookie('apiKey');
window.location.replace('/');
evt.stopImmediatePropagation();
evt.preventDefault();
}
else if(targetId === 'openLeftPanel'){
$('#left-panel').panel('open');
}
else if(targetId === 'openRightPanel'){
$('#right-panel').panel('open');
}
});
sorry if the code is looking not pretty thats because I am using laravel's blade to create these pages on the server side.
Thanks in advance.
EDIT
When trying it I recognized that; when I click on open panel button after it starts not working, it opens previous page's panel rather than active page's panel. I used previous page button on browser and saw that it is controlling previous page's panel. How can I solve this issue?
$(document).on('pagehide', function(event, ui){
var page = $(event.target);
page.remove();
});
This code solved my problem by removing page that is going to hide.
Related
I'm doing a responsive menu that check the window.resize event and, when it fits the minimum browser width, a click function for a button is allowed. If the browser width is greater, then the click function is unbound. I need to do this because the same element that is the button on the mobile version, is a visual element on the desktop version.
The problem is that, with the code that I have now, when the page is loaded (desktop or mobile screen), the click function works fine. But, if I resize the browser and click on the element again, it doesn't work. If I want to mobile nav works, I need to refresh the page to make it work. Really annoying.
To help understand what is happening, I've made a simple example. Here's is the simple code (just to check the click function issue)
HTML
<!-- WRAPPER -->
<div id="freakers-wrapper">
<!-- HEADER -->
<header id="header">
<div class="header-bottom">
<div class="container">
<div class="row">
<div class="col-md-5">
<!-- MENU -->
<nav class="menu-wrapper-left">
<a class="menu-trigger" href="#">
<span></span>
</a>
<ul id="main-menu" class="menu menu--main menu--left main-menu">
<li>Home</li>
<li class="has-children">
Shop
<ul class="sub-menu is-hidden">
<li class="go-back">Back</li>
<li>Shop 1</li>
<li>Shop 2</li>
<li>Shop 3</li>
</ul>
</li>
<li><a href="#" >Blog</a></li>
</ul> <!-- end main-menu -->
</nav> <!-- end menu-wrapper -->
</div>
<div class="col-md-2">
<div class="logo">
<a href="#">
<img src="images/logo.png" alt="Logo" class="img-responsive">
</a>
</div>
</div>
<div class="col-md-5">
<!-- MENU -->
<nav class="menu-wrapper-right">
<ul id="main-menu" class="menu menu--main menu--right main-menu">
<li>help</li>
<li>lookbook</li>
<li>model</li>
</ul> <!-- end main-menu -->
</nav> <!-- end menu-wrapper -->
</div>
</div>
</div>
</div> <!-- end header-bottom -->
</header> <!-- end header -->
<!-- MOBILE NAV -->
<div id="mobile-nav"></div>
</div> <!-- end freakers-wrapper -->
JS
(function($) {
"use strict";
$(document).ready(function () {
$(window).on('load resize', function(){
moveNavigation();
});
/* ----------------------------------------------------------------------
Main Menu
---------------------------------------------------------------------- */
//if you change this breakpoint, don't forget to update this value as well
var MqL = 1030,
menuLeft = $('.menu-wrapper-left').html(),
menuRight = $('.menu-wrapper-right').html();
console.log(menuRight);
console.log(menuLeft);
//move nav element position according to window width
// moveNavigation();
//mobile - open lateral menu clicking on the menu icon
$(document).on('click', '.menu-trigger', function(event){
event.preventDefault();
if($('#freakers-wrapper').hasClass('push-content')){
closeNav();
}else{
$('#freakers-wrapper').addClass('push-content');
$('#mobile-nav .menu').addClass('menu--open');
$(this).addClass('nav-is-visible');
}
});
//open submenu
$('.has-children').on('click', function(event){
var selected = $(this);
if( selected.children('ul').hasClass('is-hidden') ) {
selected.children('ul').removeClass('is-hidden');
}
});
//submenu items - go back link
$('.go-back').on('click', function(evt){
evt.stopPropagation();
$(this).parent('ul')
.addClass('is-hidden')
.parent('.has-children')
.parent('ul');
});
function closeNav(){
$('#freakers-wrapper').removeClass('push-content');
$('.menu--main').removeClass('menu--open');
$('.has-children ul').addClass('is-hidden');
}
function checkWindowWidth() {
//check window width (scrollbar included)
var e = window,
a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
if ( e[ a+'Width' ] >= MqL ){
closeNav();
if ( $('.menu-trigger').hasClass('menu-trigger-open') ){
$('.menu-trigger').removeClass('menu-trigger-open');
}
return true;
} else {
var menuElm = $('.main-menu .has-children');
if($('.sub-menu ul', menuElm).hasClass('left-menu')){
$('.sub-menu ul', menuElm).removeClass('left-menu');
}
return false;
}
}
function moveNavigation(){
var navigation = $('.menu--main'),
desktop = checkWindowWidth();
if ( desktop ) {
$('#mobile-nav').children().remove();
$('.menu-wrapper-left').html(menuLeft);
$('.menu-wrapper-right').html(menuRight);
} else {
navigation.appendTo('#mobile-nav');
$('.menu--main').not(':first').remove().children('li').appendTo('.menu--main:first');
}
}
$(".menu-trigger").click(function() {
$(this).toggleClass("menu-trigger-open");
});
});
}(jQuery));
If you want to see it in action, I've made a Codepen (try resize to see it working)
http://codepen.io/thehung1724/full/JYmzWr/
I hope I could explain well my problem. I've searched and didn't found a solution for this issue (or maybe I just didn't know really well what to look for). Although when you resize the screen, you can still click on the menu icon, but please notice it doesn't transform to 'X' letter and you can't click to show sub-menu
Works
Doesn't work
Any help would be appreciated!
An easy fix would be to replace
$('.has-children').on('click', function(event){
with
$(document).on('click', '.has-children', function (event) {
When you clone the nav from one place to another you are losing the pointer to the on click function for .has-children
With the $(document).on.... you're actually binding the function to the document which doesn't get disposed.
Update:
Replace the following section of javascript
$('.has-children').on('click', function (event) {
var selected = $(this);
if (selected.children('ul').hasClass('is-hidden')) {
selected.children('ul').removeClass('is-hidden');
}
});
$('.go-back').on('click', function (evt) {
evt.stopPropagation();
$(this).parent('ul').addClass('is-hidden').parent('.has-children').parent('ul');
});
With
$(document).on('click', '.has-children', function (event) {
var selected = $(this);
if (selected.children('ul').hasClass('is-hidden')) {
selected.children('ul').removeClass('is-hidden');
}
});
$(document).on('click', '.go-back', function (evt) {
evt.stopPropagation();
$(this).parent('ul').addClass('is-hidden').parent('.has-children').parent('ul');
});
Further update:
I've Forked your code in CodePen with the above changes: http://codepen.io/anon/pen/JYmVXm
I have a page which has a number of collapsed DIVs showing content. I want to be able to link to this page and have the relevant DIV already open. E.g. Read about Section 2". This is the code I have to control the collapse and expand.
<script>
jQuery(function ($) {
$(".header").click(function () {
$header = $(this);
$span = $header.find(">:first-child"),
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500)
if ($span.text() == "-")
$span.text("+")
else {
$span.text("-")
}
});
});
</script>
<div class="container">
<div class="header" id="A">
<span>+</span>
<h2>Section1</h2>
</div>
<div class="content" id="B">
I'm the content for section 1.
</div>
<div class="header">
<span>+</span>
<h2>Section 2</h2>
</div>
<div class="content">
I'm the content for Section 2
</div>
</div> <!--- /container -->
Get id from url and then call click function to open this on document ready
$(document).ready(function(){
var id = location.search.split('page=')[1];
//find div of according clickable header. not sure which is in your code
$($("#"+id).prev()).trigger("click");
});
Here's a js fiddle to demonstrate the problem.
I have a fixed position floating/popup dialog on my page that contains a series of tabs using the easytabs jQuery plugin. When the dialog appears, any tab selection causes the webpage (behind the floating dialog) to jump/scroll to a different position on the page.
I've read in other places that forcing the click behavior of the anchor tags in the tab structure to prevent the default behavior will correct this issue, but it doesn't seem to be working for me e.g. assigning a class such as .prevent-default to each tab anchor element and doing:
$('.prevent-default').click(function(e) {
e.preventDefault();
return false;
});
Here's some html:
<h1>Top</h1><button onclick="showTabDialog();">Tabs</button>
<p id="spacer"></p>
<h1>Bottom</h1>
<div id="dialog" class="floating-dialog">
<div id="tabs" class="tab-container">
<ul class="tabs">
<li class="tab">
First
</li>
<li class="tab">
Second
</li>
</ul>
<div id="content-container">
<div id="first" class="tab-content">
<div class="tab-no-data">No data yet</div>
</div>
<div id="second" class="tab-content">
<div class="tab-no-data">No data yet</div>
</div>
</div>
</div>
</div>
...and some js:
$(document).ready(function() {
$('#tabs').easytabs({animationSpeed: 'fast'});
$('.prevent-default').click(function(e) {
e.preventDefault();
return false;
});
});
function showTabDialog() {
$('#dialog').fadeIn();
}
$('#tabs').easytabs({animationSpeed: 'fast', updateHash: false});
Demo: http://jsfiddle.net/naa22prw/3/
Another way to do this is to set a minimum height on the tabs container div. `
#tab-container{
min-height: 700px;
}
This means that you can use the updateHash: true so the URL can change each time a tab is clicked.
ref. https://github.com/JangoSteve/jQuery-EasyTabs/issues/40
I have a div navigation, inside this div is a div login. I use javascript that displays divs login_name_field, login_pw_field, register_btn, do_login_btn, hide_login and hides the div login when I click the login div.
The hide_login div, when clicked hides all the newly displayed divs including itself and displays the original login div. It all works like a charm, but I would like to have one more function that does the same as hide_login but is triggered by clicking anywhere outside the main navigation div. I tried to adjust my code, but I am getting is not defined error on the new clicked vars.
Please have a look at the code below. Thank you all for reading and in advance for the replies :) Have a nice holiday.
$( "#login_btn" ).click(function() {
$('#login_name_field').toggle()
$('#login_pw_field').toggle()
$('#register_btn').toggle()
$('#login_btn').toggle()
$('#do_login_btn').toggle()
$('#hide_login').toggle()
var loginClicked = 1;
});
$( "#hide_login" ).click(function() {
$('#login_name_field').toggle()
$('#login_pw_field').toggle()
$('#register_btn').toggle()
$('#login_btn').toggle()
$('#do_login_btn').toggle()
$('#hide_login').toggle()
var loginClicked = 0;
});
$( "#navigation_bar" ).not().click(function() {
if(loginClicked == 1){
$( "#hide_login" ).click();
}
});
<div id="navigation_bar">
<!-- DO Login BTN -> runs the login function -->
<div id="do_login_btn" class="do_button" style="display: none;">
<input type="submit" id="nav_btn" name="whatever" value="Log In!">
</div>
<!-- Hide Login BTN -->
<div id="hide_login" class="hide_button" style="display: none;">
</div>
<!-- Login PW field -> input for login query -->
<div id="login_pw_field" class="button" style="display: none;">
<div id="field_div">
<input type="password" name="login_pw_field" value="password" class="p_reset" id="password">
</div>
</div>
<!-- Login NAME/Email field -> input for login query -->
<div id="login_name_field" class="button" style="display: none;">
<div id="field_div">
<input type="text" class="n_reset" name="login_name_field" id="name" value="Name / Email"></input>
</div>
</div>
<!-- Register BTN -> forwards to Account Recovery Page -->
<div id="acc_rec_btn" class="button" style="display: none;">
<p id="center">Account Recovery</p>
</div>
<!-- Login BTN -> displays Login NAME & PW fields, DO Login BTN, Register BTN -->
<div id="login_btn" class="button" style="display: block;">
<p id="center">Log In</p>
</div>
</div>
Also it appears that the $( "#navigation_bar" ).not().click(function() only triggers when I am clicking inside the navigation_bat div instead of outside of it. I thought the not() takes care of that. Well, let me know what you think :)
According to your advices I have the code working now and it looks like this:
$( "#login_btn" ).click(function() {
$('#login_name_field, #login_pw_field, #register_btn, #login_btn, #do_login_btn, #hide_login').toggle()
});
$( "#hide_login" ).click(function() {
$('#login_name_field, #login_pw_field, #register_btn, #acc_rec_btn, #login_btn, #do_login_btn, #hide_login').css("display", "none")
$('#login_btn').css("display", "block");
});
$(document).mouseup(function (e)
{
var container = $("#navigation_bar");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$( "#hide_login" ).click();
}
});
I have also adjusted the hide_login function. The way it was implemented before with the new solution when I kept clicking outside the navigation_bar div it keep displaying and hiding the elements instead just hiding them when they are already displayed. Now it works perfectly.
I try to open a panel with jQuery Mobile.
The panel should come from the left and push the page, but it seems like the panel overlay the whole side.
In the console i get the error:
Uncaught Error: cannot call methods on panel prior to initialization; attempted to call method 'open'
My HTML:
<div data-role="page">
<div data-role="header">
<header>
<div id="header">
Menu
<h1 id="headline">Text</h1>
<div class="clean"></div>
</div>
</header>
</div>
</div>
<footer>
</footer>
<div data-role="panel" id="menue_panel" data-position="left" data-display="push">
<ul class="ui-alt-icon ui-nodisc-icon">
<li>Startseite</li>
<li>Medikamente</li>
</ul>
</div>
My JS
$( document ).ready(function() {
$( "#menu-btn" ).on( "click", function() {
$( "#menue_panel" ).panel( "open" );
});
});
I don't know why it doesnt work.
The panel should be inside the page DIV.
see docs here http://demos.jquerymobile.com/1.3.0-beta.1/docs/panels/