ok I am a bit rusty with jquery and new to jquery mobile so go easy on me ;). Ok I am creating a mobile website with jquery mobile and it has a lot of pages so rather than keep all the pages in one large multi-page template I have them in seperate page templates. I have a menu button that when clicked a popup appears with a listview menu in it, this works but I have to put the menu in every page template but I would rather just keep the menu in its own html file or even just somewhere in the dom that is outside the jquery mobile page structure so that I dont have to repeat the code in each page template.
How to I load the menu into the popup when its located in its own file? Failing that how do I load a div into that popup that is not inside a jquery mobile page?
My button:
Menu
my listview menu html:
<div data-role="popup" id="main-menu">
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-role="list-divider" role="heading">
Menu
</li>
<li data-theme="c">
<a href="#how-it-works" data-transition="slide">
How it Works
</a>
</li>
<li data-theme="c">
<a href="http://www.backuptoweb.co.uk/buy-now/levels.html" data-transition="slide">
Order Now
</a>
</li>
<li data-theme="c">
<a href="#faq" data-transition="slide">
FAQ
</a>
</li>
<li data-theme="c">
<a href="#help" data-transition="slide">
Help
</a>
</li>
<li data-theme="c">
<a href="http://www.backuptoweb.co.uk/support.html" data-transition="slide">
Support
</a>
</li>
<li data-theme="c">
<a href="http://www.backuptoweb.co.uk/" data-transition="slide">
Main Website
</a>
</li>
</ul>
</div>
In a general sense, here is how you can load html from an external file into a div, beyon that, I am not quite certain what you are trying to do exactly:
$('#myDiv').load('somepath/somefile.html');
I have the exact same problematic, I have written something that displays the popup but partially renders the CSS [edit] a few more tries and I was able to make it render CSS perfectly:
$('[data-role=page]').live('pageshow', function (event, ui) {
$('#'+event.target.id).find('[id=main-menu]').load('menu.html', function(){
$('#'+event.target.id).find('[id=main-menu]').trigger('create');
});
});
Btw your main html page should contain the div declaration:
<div data-role="popup" id="main-menu"></div>
Menu
And your menu.html should contain only what's inside the div:
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<!-- .... listview content ... -->
</ul>
Related
Sorry if this has been answered previously; I've dug around but can't find it. I'm using the Materialize sidenav by calling M.AutoInit() which works for me until I try putting it in a separate Javascript file. I've been able to set up my footer this way so I don't have repeat code, but this doesn't seem to work for the sidenav. The sidenav shows up but the collapsible part will not open.
I think the problem is it doesn't like calling the collapsible part from HTML that is being inserted dynamically. But I tried separating out the collapsible portion (using 2 different querySelectors) which did not work either. If I were to put at least part of the sidenav back into my HTML page, it would defeat the purpose of me doing this.
Any thoughts or solutions? Thanks for looking at it!
document.addEventListener("DOMContentLoaded", () => {
M.AutoInit()
document.querySelector('header').insertAdjacentHTML('afterbegin',
`<ul id="slide-out" class="sidenav sidenav-fixed">
<li>
<a
href="https://www.greece.org/"
target="_blank"
rel="noopener noreferrer"
>HEC Main</a
>
</li>
<li>
<a href="index.html" class="sidenav-close" rel="noopener noreferrer"
>Home</a
>
</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<button class="collapsible-header">
History<i class="material-icons">arrow_drop_down</i>
</button>
<div class="collapsible-body">
<ul class="sidenav-close">
<li>
A Brief Review
</li>
<li>Philosophers List</li>
<li>Philosophers Map</li>
<li>The Beginning</li>
<li>Socrates</li>
<li>Plato</li>
<li>Aristotle</li>
<li>
<a href="bibliography-references.html"
>Bibliograpy / References</a
>
</li>
</ul>
</div>
</li>
</ul>
</li>
<li class="divider"></li>
<li>
Media
</li>
<li>
Events
</li>
</ul>`)
document.querySelector('main').insertAdjacentHTML('afterend',
`<footer class="page-footer">
<div class="container">
<p class="center-align">
Philosophy is sponsored by
<a
href="https://www.greece.org"
target="_blank"
>
www.greece.org
</a> | © 2021 All Rights Reserved.
</p>
</div>
<div class="fixed-action-btn">
<a href="#top" class="btn-floating btn-large" style="background-color: silver;">
<i class="large material-icons">arrow_upward</i>
</a>
</div>
</footer>`)
})
Initialisation is a one time thing - it scans the document for the matching selector, and runs the initialisation on it. So, always run the initialisation AFTER any dynamic content is added. If you add stuff on the fly, just run the init again.
Codepen.
document.addEventListener('DOMContentLoaded', function() {
// Always add stuff to the page BEFORE running the init
// Anything hardcoded to the page will be fine if wrapped in a document ready.
M.AutoInit();
// Anything added after the init will NOT be initialised. It's a one time thing. Run the init at the end of any dynamic additions.
});
I added a dropdown list to the navbar on another site and added the class .open to the list. My intention is as follows: upon load the webpage navbar list contains an img element and opens displaying a promotional offer. So far so good, the page loads and the list drops displaying the ad, and if clicked it then closes.
Ok what I am aiming for is adding a function via jquery or JavaScript or css which will automatically CLOSE the dropdown list after about 5 seconds. I have read that the .open class in bootstraps.min.css is not cleared by default and therefore will remain open unless it is 'clicked' to close it.
<div class="navbar-responsive">
<ul class="nav navbar-nav">
<li class="active">
<li class="open dropdown-menu">
<a href="#" Id="test" class="dropdown-toggle" data- toggle="dropdown"><strong class="caret">
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li>
<img src="image folder/my_ad_image.png"
</li>
</ul>
</li>
</li>
</ul>
</div><!---end nav collapse--->
</div><!---end container--->
</div>>!---end main navbar--->
This above is what I have written. It rests atop an already existing navbar.
Thanks for reading.
If anyone has any suggestion or could point me in the right direction with respect to tying a jquery timeout function to my .open class or id that would be great. So far I have been unable to tie a jquery function or css to my dropdown list
Thanks.
You can use setTimeout() to implement timers in javascript.
The setTimeout() method calls a function or evaluates an expression
after a specified number of milliseconds.
Adapting your code it can be implemented like this:
CSS:
...
<li id="myid" class="open dropdown-menu">
<strong class="caret"></strong>
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li> ... </li>
</ul>
</li>
...
jScript (assuming you're using jQuery):
$(function() {
setTimeout(function() {
$("#myid").removeClass("open")
}, 5000);
});
I have such HTML:
<div class="parrent pull-left">
<ul class="nav nav-tabs nav-stacked">
<li class="active">TAB1</li>
<li class="">TAB2</li>
<li class="">TAB3</li>
</ul>
</div>
This is navigation for tabs. But it behaves something different: when I click on the link (for example: TAB1) - required tab is displayed. But there is not the anchor in url(#tab1 or #tab2 or #tab3). But I need it...
I am some new in fronted and I use ready template. So there are such frameworks:
jquery.js, bootstrap.min.js, js/jquery.isotope.min.js
What should I do??
Maybe it's related to this question and this (if you are using bootstrap for tabs managing).
I have the following code block to acheive a slideshow to navigate different content(list) on click of the navigation buttons. Everything goes fine and works great. But indeed i need an additional feature like the slideshow should run on the load of the page and the buttons to choose the exact position of the slideshow as well. Still I need those button to navigate my slide show. Thanks in advance.
MARKUP
<div class="testimony">
<div class="container">
<ul class="test-con">
<li class="current">
<a class="image-frame" href="">
<img src="http://placekitten.com/g/100/150"></a>
<h5>“ My Test Content 1 ”</h5>
<h6>- Test 1</h6>
</li>
<li>
<a class="image-frame" href="">
<img src="http://placekitten.com/g/100/150"></a>
<h5>“My Test Content 2”</h5>
<h6>- Test 2</h6>
</li>
<li>
<a class="image-frame" href="">
<img src="http://placekitten.com/g/100/150"></a>
<h5>“ My Test Content 2 ”</h5>
<h6>- Test 3</h6>
</li>
</ul>
<ul class="navigator">
<li class="current"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
JQuery
$('.navigator li').click(function () {
var index = $(this).index();
$(this).addClass('current').siblings().removeClass('current');
$('.test-con li').hide();
$('.test-con li').eq(index).addClass('current').fadeIn('slow').siblings().removeClass('current');
});
NOTE: Need to animate width instead of fade animation.
FOR REFERENCE: CHECK THIS
FIDDLE DEMO
jQueryUI provides a lot of facilities to make personalized the js code.
In any case, why don't you try to use a library of js sliders already existing?
What you want to create could increase proportionally with the appeal you want to reach :)
I knew http://www.slidesjs.com/, which makes the same work with the required attention.
Alex
I'm trying to open a submenu from the parent link using the mmenu jquery plugin, and almost got it, but once open the submenu, the function also close the menu (the main menu opened from the left).
I got this:
<nav data-role="navbar" data-iconpos="left" id="leftMenu">
<ul>
<li><a id="a_home" href="/" >Home</a></li>
<li><a id="a_what" href="/" >What to do</a></li>
<li>
<a id="a_guides" href="#guidesSubmenu" onclick="$('#leftMenu ul#guidesSubmenu').trigger( 'open.mm' );" >Guides</a>
<ul id="guidesSubmenu">
<li>Beer Guide 2013</li>
<li>Bar Guide 2013</li>
<li>Cheap Eats 2013</li>
</ul>
</li>
<li>
<a id="a_sections" href="#" >Sections</a>
</li>
</ul>
</nav>
So, when I click on the Guides link, opens the submenu, but also close the main menu, animating to the right.
Anybody knows how is the right way to open a submenu?
This is the plugin page: http://mmenu.frebsite.nl/
Is not a simple jquery javascript.
Thanks.
The jquery.mmenu plugin automatically appends a "open-submenu"-button to every LI with an UL inside it. If the A doesn't link to an actuall page, all you need to do, is replace it with a SPAN:
<ul>
<li><span>Guides</span>
<ul>
<li>Beer Guide 2013</li>
</ul>
</li>
</ul>
$('li').hover(function(){
$('ul',this).slideDown();
},function(){
$('ul',this).slideUp();
});
Just change the selector with your own li tags class name.I think you can also toggle method.
$('#li').toggle(function() {
$('ul',this).slideDown();
}, function() {
$('ul',this).slideUp();
});
We ran into this exact same scenario today, and after a good amount of research used the following solution (adapted to your situation). It seems like they've changed things around so the data attributes on the elements are not clearly supported, so we moved the initialization to JavaScript.
HTML (did not change):
<nav data-role="navbar" data-iconpos="left" id="leftMenu">
<ul>
<li><a id="a_home" href="/" >Home</a></li>
<li><a id="a_what" href="/" >What to do</a></li>
<li>
<a id="a_guides" href="#guidesSubmenu" onclick="$('#leftMenu ul#guidesSubmenu').trigger( 'open.mm' );" >Guides</a>
<ul id="guidesSubmenu">
<li>Beer Guide 2013</li>
<li>Bar Guide 2013</li>
<li>Cheap Eats 2013</li>
</ul>
</li>
<li>
<a id="a_sections" href="#" >Sections</a>
</li>
</ul>
</nav>
JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$("#leftMenu").mmenu({
onClick: {
close: false
}
});
});
</script>
Specifying the close option as false makes it so it does not close the mmenu when you click on the li, and allows the onclick event handler to open up the sub-menu item.