Develop Reference

how to auto close Materialize css mobile navbar?

I have created a website Link. Here I have used Only Materialize css and vanilla js, Plain Css. I have made a single page application where page sections are being hidden or showing using event listeners. It works fine. However, In the mobile navbar, the menu is not auto-closing after taping on it. I didn't find any docs relating to autoclose in this specific matter. How I can close the navbar whenever the user taps on a menu option?

You can add .sidenav-close to every link in the sidenav. From the documentation:
Close Trigger
Add the class .sidenav-close to an element inside the sidenav and any click event on that element will cause the sidenav to close. This is useful in Single Page Apps where the page does not refresh on link clicks.
<ul id="slide-out" class="sidenav">
<li><a class="sidenav-close" href="#!">Clicking this will close Sidenav</a></li>
</ul>

jQuery tab with multiple web forms

I am trying to navigate multiple web pages using jQuery tab like below
<div id="tabs">
<ul>
<li>General</li>
<li>Education</li>
<li>Employment</li>
</ul>
</div>
this is working fine, when I navigate through tab click. But, if any post back happens within the pages, they are popping out of the tab(with out tab). I tried using the tab in a Master Page, it is showing the tab properly in Master page, but showing the ul markup again in the child pages.
Since I have lot of condition checks in every page, I am trying with separate pages, rather than putting everything into one single page.
Currently I am using User Control as the menu, to navigate between these pages. I am just curious to try the same with jQuery tab. Can anyone help me out to resolve this issue. Thanks in advance.

Because Your web forms are targeting the same master page (this result in render the whole page including html and head... tags)!
So, to solve this issue, you need to replace webforms by partial views (as of MVC) or simple user controls (as of WebForm) or webForm not having a master page, nor html tag
<div id="tabs">
<ul>
<li>General</li>
<li>Education</li>
<li>Employment</li>
</ul>
</div>

jQuery Mobile Drop Down Menu Causing Page Reload

I have a drop down menu on this development Wordpress site: http://zap2dev.redzephyr.biz/ the mobile menu appears to be working fine however upon pressing the mobile menu icon the menu displays and promptly the page begins reloading. Obviously on reload the mobile menu is collapsed again so begins the vicious cycle.
Any ideas what could be causing the page to reload?
Any help would be greatly appreciated.

Change <a class="navicon mtoggle" href=""> to <div class="navicon mtoggle">
then update your css
nav#mobile .navicon{
cursor:pointer;
}

Try making your toggle not a link and instead a div. Otherwise with javascript assign on click or touch to prevent.default which would cause the browser from trying to open the link which doesn't have an assigned href and reloads the page.

Apply facebox to links displayed using Ajax

I have a small problem. So I have this page that loads dynamic content using jQuery Ajax after the page is done loading. On the top of the page is a link called "Add News". When you click on that Link, a facebox pops open. This link is static and is only displayed once on the top of the page. Its labeled:
<a href="linktopage" rel='facebox[.xhr]'>Add News</a>
The dynamic page (loaded from Ajax) lists all the existing news in the DB. They are labeled:
<a href="linktonews?id=1" rel='facebox[.xhr]'>News 1</a>
<a href="linktonews?id=2" rel='facebox[.xhr]'>News 2</a>
<a href="linktonews?id=3" rel='facebox[.xhr]'>News 3</a>
and so on... Clicking one of the news items, open a facebox where you can view/edit the news.
Every time a new news item is added, the dynamic content reloads without refreshing the page.
The definition of facebox is instantiated using $('a[rel*=facebox]').facebox(); when the main index page is loaded.
Now my problem is that this $('a[rel*=facebox]').facebox(); does not apply to the news content loaded using ajax. So clicking on those links does not open a facebox. How can I achieve this?
Thanks in advance.

I had the same problem so I started looking at the pull requests in GitHub and found:
https://github.com/dator/facebox/commit/5ce6a75927d81b9fff1eeff9b933f0ad93f12801
by Dator (props to him! :D)
As it seems that the pull request isn't merged yet I just changed that line in my facebox.js and it works great :D
Hope this helps :)

jQuery Disable Link until page load

I have a jquery pop-up window attached to a link. If the page is not fully loaded (i.e. the .js files) when the link is clicked it opens in the browser window rather than a pop-up.
I was thinking of disabling/hiding the link until the page was loaded.
What would best practice be for handling this scenrio and have you any code examples?

First place your link in div section and make that div hide
<div style='display:none' id='LinkId'><a href=''>click</a></div>
Now write this code in head section
<script language="javascript">
$(document).ready(function() {
$('#LinkId').show();
});
</script>

Actually this is IMHO a perfect example why assigning event handlers directly in the HTML code is not necessarily a bad thing, despite what many people say.
If you use Link it there will be no gap between visibility of the link and the time you can use it. It improves usability, because the user don't need to wait for your page to load completely and still use the link the moment he sees it.

I had the same issue and here is how i solved it.
I had to create one dummy link in addition to my real link i.e
<!--fake link is visible by default-->
<li class="li_1">
<a class="dropdown-toggle" href="my_real_link_not_popup.html">Compose</a>
</li>
<!--original link is hidden with the hidden class by default-->
<li class="li_2 hidden">
<a class="dropdown-toggle ajax-popup-link_write" id="write_main_a" href="my_real_link_is_popup.html">Compose</a>
</li>
And my script goes thus:
$(document).ready(function()
{
//prevent event from being fired before page load
$(".li_1").addClass("hidden");
$(".li_2").removeClass("hidden");
});
so the page loads with the fake link and onpage load == "finish" then the fake link is hidden and the real link is made visible.
The only down side of this is that user must always have java script enabled in their browser else they won't be able to access the pop-up. But look on the bright side the fake link could still redirect to another page with the same content as the popup. wink
hope this helps

I had a similar problem, where a link's href was being filled by server and the the href was being modified before page load to us/en or /de/de before the url,
So if we click on the link before page loads completely, it would go to incomplete url, thus I would get page not found.
So solution I took is:
adding onclick="event.preventDefault()" as soon as possible from client side and then modifying it to onclick="" as the url gets updated.
So the issue got resolved, when the url was incomplete, then click did not happen.