I've set up a new page and added jQuery.mmenu. now when I load the page the mmenu opens already by default.
mmenu is firing and adding mm-opened on the body on page load. Then the css transition kicks in and mmenu is opened nicely.
But I want it only to be opened when click on a menu button. Very strange. Anybody heard this before?
jquery:
$(document).ready(function() {
$("#my-menu").mmenu();
});
html:
<body>
<nav id="my-menu">
<ul>
<li>But WHy?</li>
</ul>
</nav>
<div>//content</div>
</body>
Nothing special going on in the markup
Add this to your css stylesheet and test it:
#my-menu:not(.mm-menu) {
display: none;
}
Add "mm-wrapper_sidebar-closed" class to html tag.
I added in html (javascript):
window.location.hash = "menu";
Ivan, I upvoted you because it made me realize that the issue for me is related to the hash, thanks : ).
If you're not opening the mmenu programmatically with JS, it instructs you to have a link with the href property set to the selector of the menu that you want to open. So I have something like:
...
to target the menu selector with an ID of navbar-menu. What I didn't realize was I had clicked on this link before all of my JS code was in place, so the current URL still had a hash in it pointing to the menu selector. e.g.
https://yourdomain.com/#navbar-menu
I'd refresh the page and the menu would just open automatically. Because mmenu allows you to use a hash to define the state of the menu - open when the hash corresponding to the menu selector is in the URL.
FYI for anyone who is running into the same issue. If the menu is opening automatically, remove the hash.
You can use the "initial" option under the sidebar addons.
sidebar: {
collapsed: {
use: '(min-width: 450px)',
hideNavbar: false,
},
expanded: {
use: '(min-width: 992px)',
initial: 'closed'
},
},
reference: https://github.com/FrDH/mmenu-js/issues/967
Related
I'm currently making a dropzone to upload photos and it working well on Desktop But in mobile, when i click to the zone, sometimes the "Upload from files" window doesn't opening So due to this problem, i'm currently looking to add a button under the dropzone called "Choose photos to upload". This button is suposed open the "Upload from files" Window but i haven't found any help for that in the documentation.
Also on Desktop, when a file is uploaded, the message is disappearing, but i want to make them always visible. There is a specific option or i'm forced to use CSS ?
I know this question is a few months old but saw nobody had answered it yet. It is entirely possible to do both parts of your question.
Video walkthrough of how to add the upload button and force the message to always be visible: https://youtu.be/_CCojUWu2uQ
Working CodePen: https://codepen.io/vpolston/pen/BaxYxNg
HTML
=> Create a parent wrapper div around your dropzone and HTML button element with a given ID.
<div id="dropZone">
<form action="/file-upload" class="dropzone" id="my-great-dropzone"></form>
<button>Add Files...</button>
</div>
JavaScript => Use the clickable property of your Dropzone and give it the value of your wrapper div.
Dropzone.options.myGreatDropzone = {
autoProcessQueue: false,
paramName: "file",
maxFilesize: 2,
clickable: "#dropZone" // the ID of our parent wrapper div
};
And then tackling your second question on making sure the 'Drop files here to upload' message is always visible we must modify the CSS. Default functionality of Dropzone sets the display property of this selector to none..
CSS => My solution was to set it to display: block with !important.
.dropzone.dz-started .dz-message {
display: block !important;
}
Hopefully that helps. If so please mark answered :)
It appears there is a conflict between kendo 2013.2.716 and jquery ui 1.10.3. If I have a kendo grid inside a jquery ui dialog I cannot place the cursor in the textbox inside the filter editor. I've created a jsBin to demo the problem.
http://jsbin.com/itehom/14/edit
Repo steps
click "pull the grid into a dialog"
click the filter icon on any column
try to place your mouse in the text field inside the filter editor.
Set modal: false for jQuery dialog.
Try following
$('#myModal').on('shown', function() {
$(document).off('focusin.modal');
});
If you used the jquery dialog instead of the Bootstrap modal, Varde's script might not fix your problem. I spent a few hours on this. Then I noticed the following line can be added after opening your jquery dialog, and it fixed the problem.
$(document).off('focusin');
As you may have noticed, the event doesn't contain a namespace. Keep in mind that this might turn off more "focusin" event handlers that you wish to turn off. I checked the jquery UI source code and didn't find the namespace and am unsure if they used a namespace.
The entire code block of my prototype is like:
<button id="opener">Open Dialog</button>
<div class="row" id="viewSearchResults">
blah, blah, ...
</div>
<script>
$(function () {
$("#viewSearchResults").dialog({
autoOpen: false,
modal: true,
minWidth: 700
});
$("#opener").click(function () {
$("#viewSearchResults").dialog("open");
$(document).off('focusin');
});
});
</script>
Hope the above can save some time for some developers. Thanks.
I'm trying to put a scroll up (back to top) button in my blogger blog.
That should be, in principle, quite simple, but I don't why I can't manage to do it. Now after trying so many things I'm totally frustrated.
I'm using the following html code:
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#"><img src="url address of image" /></a>
The button is there as expected, but when I click on it, it reloads the blog instead of going to the top. Why?? no clue.
I tried to use an "id" in the logo image and link to it, and I've also tried to use in the blog head a name tag "name=Top" and link it with href="#Top".But it doesn't matter. It always reload the blog instead of going to the top.
For instance, when I'm inside a post and I click on the button it goes to the main page instead of scrolling up within the post.
If you want to check it yourself, please do it. My blog is cortarcoserycrear.blogspot.com
Whatever help you can provide me it would be very appreciated because I don't know what's happening.
Thanks.
You should be using Javascript/JQuery to do this.
Refer to this question: How to scroll to top of page with JavaScript/jQuery?
What I finally used to solve my problem was:
Button html:
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#wrap" class='go-to-top' title="Back to top"><img src="image url" /></a>
Body html:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'/>
<script>
$(function () {
$('.go-to-top').click(function () {
$('html,body').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>
I am using Joomla 1.5.22 with Mootools 1.1. I have a module with a form contained in a hidden div that I want to open in Joomla's built in modal box. The problem I have is that when I click the link the form opens in the modal box, but it also opens the div in the module on the page.
HTML:
<div id="moduleBox">
<div id="clickMeButton"><a id="formClick" class="modal" href="#hiddenForm">Click me</a></div>
<div id="hiddenForm">
form code goes here
</div>
</div>
Javascript:
window.addEvent('domready', function() {
$('formClick').addEvent('click', function(){
$('hiddenForm').setStyle('display','block');
});
});
So how do I get the form to only show up in the modal box?
You can see what I am talking about here - http://www.internextion.com/
It's the Call Back Module. I already added the handler: 'adopt' as suggested below, now the result is a little different. The target div still shows up below the link, but now the modal window contains the link rather than the target.
I think this uses Harald's SqueezeBox - in which case, you are looking at the following scenarios:
find the target div and CLONE it to insert into the modal box.
find the target div and ADOPT it into the modal box.
you are seeing the first (default) case. to achieve the second effect, add:
handler: 'adopt'
to the instantiation options. more here: http://digitarald.de/project/squeezebox/1-1/showcase/get-elements/
Option 1:
If you look at the html code (in firebug) for the overlay div you will see that it makes a "copy" of html and places inside the overlay container with id="sbox-content". In theory if you add a CSS like below +/-, it will hide the link and display everything else. This might be the simplest and easiest solution.
div#sbox-content > a#formClick{
display: none;
}
Option 2:
If option 1 does not work for some reason, you can try playing with CSS and hide the link when the Modal box opens and then making it visible when it closes.
Modify the JS to add a class instead of modifying the style.
window.addEvent('domready', function() {
$('formClick').addEvent('click', function(){
$('formClick').addClass('hidden');
$('hiddenForm').setStyle('display','block');
});
});
Load additional CSS that will make the link invisible
div#clickMeButton.hidden {
display: none;
}
Then you will have to overload closing event and make the link visible...
Ok, so I finally got it to work with a combination of the other answers given. First, I removed the javascript click event to make the form appear, that solved the issue of the form showing up below the link. Next, I added new CSS for the hiddenForm ID within the modal box and set that to display:block. It appears that the default handler behavior (in Joomla at least) is to adopt the content since I have removed the handler: 'adopt' and it is still adopting the content.
I knew it was something simple, thanks for the help!
BTW - the link is still live, you can see the correct behavior on the demo site. Now all I need to do is add some fancy AJAX form submission and it will be ready for prime time.
All,
I am using JQuery UI Nested tabs. Consider the structure like this: There are 2 Main tabs: Animals, Birds. Under Animals, there are two tabs "Cats", "Dogs". Both the tabs "Cats" and "Dogs" should be loaded via AJAX when selected.. So, the code for them is something like this:
<div id="fragment-1">
<ul>
<li><span>Cats</span></li>
<li><span>Dogs</span></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function()
{
$("#tabs-loading-message").show();
$('#fragment-1').tabs({cache:false, spinner:''});
});
</script>
The issue is, I want to maintain a common div to load the AJAX urls. Ex: When you click on Cats or Dogs, the content for those tabs, should go into "<div id='commonDiv'></div> instead of going into "cats" div and "dogs" div.
The loading should be reusable, in the sense, if call reload("Dogs") from anywhere inside "dogs" tab, it should reload the "dogs" tab content.
How can I achieve this?
Just looking at the docs, nothings pops out as to how to do that. It's easy enough to not use the tabs widget though, and define your own click events for basic tab functionality.
<div id="fragment-1">
<ul>
<li><span>Cats</span></li>
<li><span>Dogs</span></li>
</ul>
<div id="commonDiv"></div>
</div>
$(document).ready(function(){
$('#fragment-1 a').click(function(){
$('#commonDiv').load($(this).attr('href'));
});
}):
You would need to define your own css styles though, as it looks like the tabs widget does that for you.
Not sure if I understtod you well; as far as I know if you give all your tabs the same tittle atribute, the UI will rehuse the same DIV to load the content, instead of creating a new one for every tab and hide or show as required. Is a good thing since the browser doesn't get so heavy weighted with a lot of DIVS loaded but hidden ...