I have a nav bar in jQuery Mobile defined like this:
<div data-role="header" data-id="foo2">
<div data-role="navbar">
<ul>
<li><a data-icon="arrow-l" id='prevPage'>Wstecz</a></li>
<li><a data-icon="home" id='mainLink'><span id='mainButton'>Quizz.pl</span></a></li>
<li><a data-icon="arrow-r" id='nextPage'>Dalej</a></li>
</ul>
</div>
</div>
I want nextPage button to do some work, so i bind it
$("#nextPage").bind("click", nextPage);
And here, strange thing happens. In latest Firefox when i click the button sometimes it does nothing, sometimes i does not fire click event and it seems like it didn't get "unclicked", so when i scroll page content is selected. Sometimes it fires click properly.
Anyone had this issue and know how to handle it properly?
Related
For a project i must include an HTML file into a div. This HTML file contains a menu that will be displayed on each page of the website. (To make it easier to edit the menu if we need to add something in it)
I include this file in my div with jQuery (.load). It works correctly on Firefox and IE. The menu displays well and I can click on the "parents" to show children.
But with Chrome, when I click the parent, the page refresh. It doesn't do anything else that refreshing the page without showing the children. (Sometimes when we spam click the menu, it opens, I don't know why and how)
But when I paste the code for the menu directly in my main HTML file, the menu works fine on all browsers.
Did you have any idea of why my menu doesn't want to work when it's included and used with Chrome ?
The include in my main html :
<div id="menuLeftLoad"></div>
<script>
$("#menuLeftLoad").load("Menuleft.html");
</script>
Here is the MenuLeft.html file :
<ul class="nav nav-pills nav-stacked">
<li class="parent"><i class="fa fa-bars"></i> <span>Tables</span>
<ul class="children">
<li id="basic-tables">Basic Tables</li>
<li id="data-tables">Data Tables</li>
</ul>
</li>
</ul>
Here is a link to see this problem in real: http://allanresin2.tk/testui/index.html
EDIT (Solution) :
The solution has been founded by #CarstenLøvboAndersen .
I had a JS file (custom.js) that acted on my menu before everything else, so it caused problems when i wanted to click in the menu.
So, i replaced this :
jQuery('.leftpanel .nav .parent > a').click(function()
With this :
jQuery(document).on('click','.leftpanel .nav .parent > a',function()
So now, we have this function that wait for my click to execute. Before, the function was executed while the menu had not even finished loading.
Thanks to all people that tried to help me
As far as I can see in your code, there is no click event for the a tags.
So what you need is a click handler, that prevents the default behaviour of the a tag and loads the html file instead.
Here you have some dummy code:
main.html:
<main>
<h1>Hi i am main</h1>
<a class="clicker" href="new.html">New</a>
<div id="foo"></div>
</main>
<script>
$('.clicker').on('click', function (evt) {
$("#foo").load("new.html");
return false;
});
</script>
new.html:
<div class="new">
<p>I am new!</p>
</div>
I have a tab component say in a HTML strcture
<ul>
<li><a id='tab1' href='/url#tab1'> Tab1 </a></li>
<li><a id='tab2' href='/url#tab2'> Tab2 </a></li>
<li><a id='tab3' href='/url#tab3'> Tab3 </a></li>
</ul>
<div class='tab-content'>
content of respective div loaded on click.
</div>
Here the content of the respective TAB as the click handlers are in place for that and its working fine without any
problems. The click handler looks like
$('#tab2').click(function() {
//show tab2 content.
});
Now, I have to support deeplinking so that , when user comes through URL : http://url#tab2, need to show respective tab content. So for this,
my approach is to use 'hashchange' event , which will read hash params and load the content based on the hash value.
The query or the pain is , woundn't it cause a conflict between click event on a and hash change event?
What should be the appropriate way of resolving deepliking in this case ?
<div class="row">
<div class="col one-whole">
<nav class="top-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Central Plumping</li>
<li>Roof</li>
<li>Drainage</li>
<li>Gallery</li>
<li>Contact</li>
<img src="img/title.png">
</ul>
</nav>
<nav class="burger-nav">
<ul>
<li><i class="fa fa-bars x3" aria-hidden="true"></i></li>
<li><img src="img/title.png"></li>
</ul>
</nav>
</div>
</div>
<div class="burger">
<div class="row menu">
<div class="col one-whole">
<ul>
<li>Home<i class="fa fa-times x3" aria-hidden="true"></i></li>
<li>About</li>
<li>Central Plumping</li>
<li>Roof</li>
<li>Drainage</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Hello all, currently trying to learn basic JQuery. I have managed to create a simple navigation bar, with responsive burger menu that hides and shows each navigation bar based on screen size. I then created a burger div that is 100% screen size fixed when displayed but is currently set it display:none. Now i have got my toggle working to display it, but when i try to close the menu bar, it doesn't seem to toggle back. Any help would be great thankyou.
My Jquery script is as follows:
<script>
$(document).ready(function(){
$("#toggleburger").click(function(){
$(".menu").toggle();
});
});
</script>
i guess your problem is that you're using an anchor tag with empty href attribute.
try chaging in
<i class="fa fa-times x3" aria-hidden="true"></i>
see example in this FIDDLE
I'm getting directed off when I click the element you're trying to tie the click event to.
Here's a working fiddle: https://jsfiddle.net/p85kazv0/
I've simply prevented the a element you're using from its default action (which is of course to direct someone to another location, dictated by whats in the href=""):
$("#toggleburger").click(function(e){
e.preventDefault();
$(".menu").toggle();
});
Reasons for unexpected behaviour:
<a> has href set to some other page. If you have to implement the menu or buttons that are only for in page activity you should set it as href="#". Meaning do not redirect me anywhere just perform the event linked with this action, which in your case is toggling of another div.
While e.preventDefault() is a workaround, it is not recommended here as the link is sitting there doing nothing. It would suit more if say you had a form that would submit itself but you wanted to do some processing/sanitation before submitting, thereby overriding default action with your logic.
There are two elements with id=toggleburger. Keep your id unique on one html page. This can give you a lot of pain while debugging.
Here is a working fiddle, I have replaced the hamburger image with text "ToggleBurger".
Set the href attribute of the <a> element equals to #:
<li><a href="#" id="toggleburger">
I have a tab control that uses Jquery mobile tab control. It works perfectly but the tab active status in <li> is delayed by 2 or 3 seconds i.e. when the user clicks the tab the content is loaded immediately but it takes 3 seconds time to highlight the tab header.
My code is below
<div data-role="tabs" id="tabsHistory" class="diaryMainTab">
<div data-role="navbar" class="arrow_Tabbox1 clsHistoryTab" id="divHistoryNavbar">
<ul class="clsHistoryUl clsDynamicFontColor">
<li id="recent_earned_active" class="clsHistoryLi1 clsHistoryAtag">
<a href="#recent" data-ajax="false"
class="clsPyType clsHistoryTabAnch
ui-btn-active clsTabPadRight diaryEvt">Recent</a>
</li>
<li class="clsHistoryLi3 clsHistoryAtag2">
<a href="#overall" data-ajax="false"
class="clsPyType clsHistoryTabAnch clsTabPadRight upcomingEvt">Overall</a>
</li>
</ul>
</div>
It could be the 300ms delay bug? Heres a post about how to get around this.
i have just encountered a very strange problem. I am working with jQuery mobile and making the mobile version for a website. There is a listing page that has its own filters. The filters are in a panel, its slides out, you select the filter, it closes and filters the list. pretty basic. Now when the same app is accessed from an iOS 7 iphone, the first time you filter something it works fine. but if you open the filter again, its blank. but the filters are still where they should be and if you just tap at the place where you think a filter should be, they appear and filter the list as nothing is wrong. it remains like this after that.
This is the anchor i use to open the panel
<a id="friendsFilterAnchor" href="#friendsFilterPanel" data-mini="true" data-role="none" data-iconpos="right" class="ui-icon ui-icon-filter frindes-filter filter-ico" data-theme="a" title="Filter"></a>
and the panel looks something like this
<div data-role="panel" id="friendsFilterPanel" data-position-fixed="true" data-position="right" data-display="overlay" data-theme="b">
<ul id="friendsFilterList" data-role="listview" data-theme="e" data-divider-theme="a">
<li data-icon="ffTick" class="selected"><a href="javascript://" >All</a></li>
<li data-icon="false">Pending</li>
<li data-icon="false">Users</li>
</ul>
</div><!-- /panel -->
Anyone seen something like this before?
The problem was the use of same ids on different pages. The previous page was also in the dom and it had the same id in it. use relative selectors, i.e get divs by searching on the same page, which is usually a good practice in javascript.