I have an Orbit slider inside a Reveal modal.
I want to reset the slider to go to the first slide when closing the modal.
How can I do this?
$(document).on('opened', '[data-reveal]', function () {
// Callback triggered when reveal modal is closed
$(this).find("[data-orbit-slide=0]").click(); // Click the link to first slide in orbit modal
});
When slider is closed (and invisible) interactions don't seem to work reliably. Hence we operate once the modal is visible.
Foundation press has changed some verbiage since the previous answer. You can also use:
$(document).find("[data-slide=0]").click();
Related
I have a sidebar router-view element in my app.vue that is optional next to my "regular" router-view element. Now this sidebar has a transition effect when it opens and now I'm also trying to add sliding transitions when navigating within this sidebar. The idea is that this should work like in the iOS Agenda app:
I'm adding a transitionName depending on $route.to and $route.from but I'm not seeing how I'm getting the effect I want the way my template is structured now.
I've set up a sandbox here: https://codesandbox.io/s/vuepoc-etqvg
Click "Go to Day x"
Click on "Details" and de sidebar opens (works!)
Click on "Expenses" in de sidebar (Looks like it only needs overflow: hidden but didn't work for me)
Click on "Back" (This doesn't work at all..)
Is there someone that can give me a kick in the right direction? Am I on the right track? Should I structure my html/css differently? Or maybe even change the way I structure my routes and put the sidebar somewhere else?
I just want to show modal on another modal. (Close current one and needs to open new one) So I used
Register here
data-dismiss="modal" I try with this attribute end of link and it's woking fine. The problem is that the second modal height is bit higher. I can't scroll down to see it's upper content. and input fields looking weird. Please see this image.
Is there any other way to show modal when another modal by closing first modal?
try this
$('#myModal-1').on('hidden.bs.modal', function (e) {
$('#myModal-2').modal('show');
});
https://jsfiddle.net/princesodhi/ru2rz404/
I use the target selector to put and remove a class that shows and hides the navigation menu. The problem is that when a user uses the backbutton on the browser the menu states get messed up.
This is my css code
<style>
#buttons-container a.close-menu-primary{display: none;}
#wrap:target #mainmenu{display: block;}
#wrap:target #buttons-container a.open-menu-primary{display: none;}
#wrap:target #buttons-container a.close-menu-primary{display: block;}
</style>
buttons-container is a div with two buttons, open-menu-primary & close-menu-primary, that toggle each other on and off and show or hide the mainmenu.
The problem occurs when someone uses the back button. In that case it only toggles the button states between open and close-menu-primary, which are a burger and a close image.
You can check the live version here if you make the browser small enough or use a mobile device, screen size has to be smaller than (min-width: 768px) and (min-height: 558px) website with toggle by target selector
Hope someone can clear this up if it is possible to use target this way or if there better ways to get this affect without scripting please.
Thanks in advance!
The question is... when user presses the back button, do you want to go back one state of menu visibility (ie. hide it or unhide it), or do you want to go back one page?
I check your linked page http://www.rieon.nl. I think this is the problem:
I presume you want the user to go back one page, not just to hide the menu. Then, you need to change this piece of code
jQuery( document ).ready(function( $ ) {
$("#buttons-container a").click(function(){
$("nav").toggleClass("main");
});
});
and add either return false or e.preventDefault():
jQuery( document ).ready(function( $ ) {
$("#buttons-container a").click(function(e){
$("nav").toggleClass("main");
e.preventDefault(); // use either one
return false; // of these lines
});
});
The problem is that by clicking on the link on navigation button, browser executes the javascript handler that shows the menu AND navigates to link's href address (which is #wrap) and that creates a new step in its history, so that when user hits back button, browser just goes back to previous state (which is usually the same page but without #wrap). By adding return false (that's jQuery speciality) or calling preventDefault() on event object (that's standard JS), you cancel the navigation and leave only your own handler to be executed.
I basically want to hide the tooltip on click anywhere in the chart. For this I have configured tooltip as follows:
tooltip:{
hideDelay: 50000 //So that the tooltip stays open for a long time
}
You can check out the example at:
http://jsfiddle.net/e56KT/16/
Anyone with bright ideas!!!
Updated Question:
Before hiding the tooltip:
After hiding the tooltip:
As you can see the div element si not hiding even after hiding the tooltip by the method you described. In a series chart, if we customize the tooltip with increased width and height, the mouse over on other markers doesn't work as this div element stays on top of those markers.
Your code is actually working. It appears not to though because the hide method honors the hideDelay. If you want it to hide immediately try:
hideTooltip = function(){
chart.tooltip.label.fadeOut();
chart.tooltip.isHidden = true;
}
This is what the hide method does internally.
Finally, if you want it to hide if you click anywhere on the chart then I'd hook both the chart: events: click event and the plotOptions: events: click event.
See updated fiddle here.
I'm making a simple WordPress theme and I wanted to include a jQuery Sidr into and I got that done properly, however the menu icon that pulls the slide-in sidebar disappears behind the sidebar leaving the user with no way to collapse the sidebar again.
The theme is far from complete (and I was working on it using an offline WP setup) but I put it up here temporarily for the sake of this question: http://sweven.vhbelvadi.com
The menu icon in question is on the top-right. I have given it top and right properties, floated it right, as well as given it a fixed position to make it stay there.
As I said, the design is far from complete, so take no notice of it, but once you click on the icon to slide out the sidebar area, the menu icon disappears.
I have tried giving it a z-index which works, putting the menu button on top and makes it accessible, but you cannot see it on the link above because I removed it; didn't like the look of it.
Basically, I'd like to know if there's any way of changing the attribute (focus, active don't seem to work) or do anything else so once the sidebar opens the menu icon slides out alongside it.
What is my solution?
Thanks.
Update:
Right now I'm using the following code at the link above:
$(document).ready(function(){
$('span.genericon').on('click', function(){
$('#simple-menu').sidr({side: "right"});
$('span.genericon').css({
right: "6.5em"
}, 500);
});
});
It works, but how would I return the menu icon to its original place?
The collapse button is there but when the sidebar opens, the button goes behind it, so you need to change the CSS based on whether sidebar is visible or hidden, so use a kind of toggle like below.
$('button').toggle(
function() {
$('#B').css('left', '0')
}, function() {
$('#B').css('left', '200px')
})
Demo
Demo 2 (by Patrick)
When you trigger the jQuery to move the menu to make it slide out, use the jquery animate command to change the "right" property of this menu icon (.genericon.genericon-menu) to 270px.
So, something along the lines of this:
$(document).ready(function(){
$('.genericon.genericon-menu').on('click', function(){
$('#idofmenu').//code to move the menu out;
$('this').animate({
right: "270px"
}, 500);
});
});
And then vice versa for when the menu collapses.