If you have used the fullscreen mode in an instance of Galleria you've seen that the only way to close it is by pressing the escape key.
As I like that functionality since it's really practical, for end users it's not that intuitive so I would like to add a close button in the upper right.
I checked the code to find out where to add that button but I couldn't understand it to make it work.
Has someone already made that? I hope I'm not the only one who had that idea.
Thank you for your help!
You add it using the Galleria API:
Galleria.ready(function() {
var gallery = this;
this.addElement('exit').appendChild('container','exit');
var btn = this.$('exit').hide().text('close').click(function(e) {
gallery.exitFullscreen();
});
this.bind('fullscreen_enter', function() {
btn.show();
});
this.bind('fullscreen_exit', function() {
btn.hide();
});
});
This will place the close text in the upper left corner, you should of course style it with som CSS, f.ex:
.galleria-exit{position:absolute;top:12px;right:12px;z-index:10;cursor:pointer}
Related
I want to Add hover effects on Events of Angular Full-calendar-view(using this version ^5.10.2).
I tried by using eventMouseEnter and eventMouseLeave functions but it's not helping me to add effects on events.
Pic attached to show events on Full calendar.enter image description here
I don't know if you use Jquery, but if yes, you could define your hover style(s) in a class (in my case, .event_hover) and then do something like...
eventDidMount: function(info) {
var $el = $(info.el);
$el.hover(function() {
$(this).addClass("event_hover");
}, function(){
$(this).removeClass("event_hover");
});
}
If you don't use jQuery, you may could do something similar in Javascript, but at the end the key is to modify the eventDidMount event.
Hope it goes right for you.
I'm using angular-foundation and trying to find a way to change the off-canvas menu icon when you open/close the menu. Currently I use:
<a class="right-off-canvas-toggle menu-icon"><span></span></a>
I'd like to replace the "menu-icon" with my own class, but I'm not sure how to hook into the close method. I tried adding an ng-click, but that won't fire on the close since an <a> tag is used to overlay the rest of the page for the close function. I figured based on that, using the off canvas would be the best method.
You can do so hooking into the open.fndtn.offcanvas and close.fndtn.offcanvas events, something like this:
$(document).on('open.fndtn.offcanvas', '[data-offcanvas]', function() {
var off_canvas_icon = $(this).find('.right-off-canvas-toggle');
off_canvas_icon.removeClass('menu-icon').addClass('close-icon');
});
$(document).on('close.fndtn.offcanvas', '[data-offcanvas]', function() {
var off_canvas_icon = $(this).find('.right-off-canvas-toggle');
off_canvas_icon.removeClass('close-icon').addClass('menu-icon');
});
so i'm working on a meteor project and am trying to get a drop down menu to close when the user clicks outside of it. i've done this before using jquery and normal html but this time we're using velocity.js and meteor.
so on the link that opens the drop down div, i have this:
Template.layout.events({
'click #profile-btn': function () {
if (userTog == false) {
$('#user-menu').velocity("fadeIn", { duration: 150 });
userTog = true;
}
else if (userTog == true) {
$('#user-menu').velocity("fadeOut", { duration: 150 });
userTog = false;
}
},
.....
and then i use a meteor package to deal with events on the body as this isnt supported right now..
Template.body.events({
'click html': function(e, data, tpl) {
userTog = false;
$('#user-menu').velocity("fadeOut", { duration: 150 });
e.stopPropagation();
}});
however the above is just not working.. it basically just makes the menu appear then disappear straight away. is it something to do with velocity.js, meteor or am i just doing it plain wrong ?!?
any advice would be greatly appreciated!
I just had to make a material design select box, so I feel your pain :-). Here's how I solved it:
Normally, you can only focus an input or an anchor. A trick I stumbled upon is that using tabindex="0" in your element attributes allows it to gain focus, even if it's a div. What's this mean? Well, if you can focus() an element, that means you can blur() it. So, when you click the button for the dropdown, add a line at the end of the event handler like $('.dropdown-menu').focus(). Then, to escape that, just create an event handler like 'blur .dropdown-menu': function() {*..hide..*}. That way, you don't have these ugly global event watchers.
The downside is that you get a glowing blue outline (for accessibility reasons). You can get rid of this by having a line like outline: 0; in your css.
PS, the reason why yours wasn't working is because 'click #profile-btn' bubbles up to the body, so it executes both. To fix it, you need to stop that bubblin via e.stopPropagation();.
I'm using jquery plugin token input for my dropdowns on this page
http://www.connectweb.com.au/search.aspx
It works fine in firefox in that I can click the arrow and the dropdown opens with the contents and allows me to scroll up and down using the scrollbar. However in IE and Chrome I cannot seem to scroll by moving the scroll bar up and down. Its some css somewhere but I'm struggling to find out what..any css experts out there want to take a quick look? would be appreciated : -)
thanks
​Hello please take a look at the https://github.com/loopj/jquery-tokeninput/issues/130
The issue happens to be with the the way IE handles scroll bars versus chrome or firefox. The solution is to modify the inputtoken.js file as mentioned in the forum.
Here is the basic outline.
Declare a variable to hold the state
Check of the variable in the .blur event of the input_box
Add .mouseover, .mouseout to .dropdown
// 1. Keep track of mouse being over dropdown
var mouseOverDD;
// 2. IF the blur function
var input_box = $("<input type=\"text\" autocomplete=\"off\">")
.blur(function () {
if (!mouseOverDD) {
hide_dropdown();
$(this).val("");
}
})
// 3. Add over/out events
var dropdown = $("<div>")
.addClass(settings.classes.dropdown)
.appendTo("body")
.hide()
.mouseover(function(){
mouseOverDD = true;
})
.mouseout(function(){
mouseOverDD = false;
});
How to disable/enable a button? which is not in a form , in a navBar. I'v tried some examples , all fail.
I'm changing my textarea text $("textarea").val(x); The text is changing , the problem it doesn't get auto re-size , I see the ugly scroll bar on the side , If I manually resize it , its OK... is there a method to force refresh or something like that?
Thanks
Update (TextArea):
If i click on the text area and then press any key -> it opens up as should be,
I'm trying to simulate it .. but fail , the binding is works , but the trigger for keypress/keydown doesn't , I tried some codes from googling, this should work , I think , mayb for nomral jQuery 1.6 , but not jQuery mobile.. My test are are on Chrome and iPhone 4
$('#textarea').bind('click', function() {
var e = jQuery.Event("keypress", { keyCode: 64 });
$(this).trigger( e );
});
UPDATE:
Link button example:
http://jsfiddle.net/gRLYQ/6/
http://jsfiddle.net/gRLYQ/7/ (Header button example)
JS
var clicked = false;
$('#myButton').click(function() {
if(clicked === false) {
$(this).addClass('ui-disabled');
clicked = true;
alert('Button is now disabled');
}
});
$('#enableButton').click(function() {
$('#myButton').removeClass('ui-disabled');
clicked = false;
});
HTML
<div data-role="page" id="home">
<div data-role="content">
Click button
Enable button
</div>
</div>
NOTE: - http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons-types.html
Links styled like buttons have all the same visual options as true
form-based buttons below, but there are a few important differences.
Link-based buttons aren't part of the button plugin and only just use
the underlying buttonMarkup plugin to generate the button styles so
the form button methods (enable, disable, refresh) aren't supported.
If you need to disable a link-based button (or any element), it's
possible to apply the disabled class ui-disabled yourself with
JavaScript to achieve the same effect.
Regarding your second question, you can cause a textarea to autogrow by triggering a keyup() event on it.
Considering your original example code, the following works for me:
/*Note: I'm using 'on' instead of 'bind', because that's what I've actually tested
with, but I'm pretty sure this will work with 'bind' as well*/
$('#textarea').on('click', function() {
//First we'll add some text to #textarea
$('#textarea').val('some dummy text to be added to the textarea');
//Then we trigger keyup(), which causes the textarea to grow to fit the text
$('#textarea').keyup();
});
Short and sweet version of the above, this time chained and with no comments:
$('#textarea').on('click', function() {
$(this).val('some dummy text to be added to the textarea').keyup();
});
Adapted from here.