I have a YAHOO.widget.Button of the type "menu". My task is simple: The menu is shown when the user clicks on the button, and is hidden when the user clicks elsewhere on the screen.
Here's my code on jsfiddle:
http://jsfiddle.net/tRssn/
What I've tried so far:
1. Setting the clicktohide property of the Menu widget to true (see above code)
and
2. Subscribe to the blur event on the Button/Menu widget and close the menu if it's visible.
Approach 1 doesn't work for some reason and approach 2 works with IE and Mozilla, but not Chrome.
Shouldn't there be an easy way to do this?
Any help appreciated!
Okay, I was able to solve this by explicitly creating a YAHOO.widget.Menu object, rendering it, and then assigning it as the menu to the YAHOO.widget.Button object.
http://jsfiddle.net/tRssn/1/
Strangely, I have to set the config for the Menu widget like this instead of at the time of the creation:
oButton.getMenu().cfg.config.clicktohide.value = true;
Related
I dont know a lot about js and jQuery. I bought a WP theme and I want to do a few changes on it.
In this page: https://websitesdevs.com/search-services/
You can see a div with a text saying "Apply Filters" and when you click on it, it opens a popup with all the filters. The thing is that I want a search box, and then a button to open this popup with the filters.. I've been trying it but I can't do it.. I would like to open that popup with any other CSS class. Do you know how can I do it?
I think that the popup opens with this JS & jQuery script
//filter dropdown
jQuery('.mmobile-floating-apply,.wt-mobile-close').on('click', function() {
var _this = jQuery(this);
_this.parents('aside.wt-sidebar').toggleClass('show-mobile-filter');
});
This code is located at workreap_callbacks.js
Thanks for your time, I really need this
As far as I understand your question, you can run this:
$('.mmobile-floating-apply,.wt-mobile-close')
.parents('aside.wt-sidebar')
.toggleClass('show-mobile-filter');
from any place in your code.
my goal is to hide the content of my homepage when someone visits. onClick to begin button the content should be shown. Content should stay open when user goes to other page and comes back to homepage. But it will be hidden when user closes the window and opens up the homepage again. To achieve this goal I have put the following code but it keeps the content open even when user closes and opens the window. So please help me out.
if (! localStorage.noFirstVisit) {
// hide the element
$("#content").hide();
// check this flag for escaping this if block next time
localStorage.noFirstVisit = "1";
}
Another issue is when the content shows the design gets little messed up(by widening the divs, bringing horizontal scroll)
$(".roll-button").click(function(){
$("#content").show();
});
I would highly appreciate if you check website, suggest me fix or show me proper way to achieve this goal. url:iamicongroup.com
You can totally use sessionStorage to detect whether it is new tab(window) or not.
When you first visit this page, set sessionStorage.noFirstVisit = "1";.
After you go to another page and back, sessionStorage.noFirstVisit is still "1".
But when you close the tab or browser and open the page newly again, sessionStorage.noFirstVisit will be undefined.
Documentation is here
The documentation also provide the difference between sessionStorage and localStorage.
I would suggest reading this: Detect Close windows event by Jquery
It goes over window unloading (beforeunload), which I believe is what you're after. You can set/unset your localstorage values there based on certain criteria being met; for example:
$(window).on("beforeunload", function() {
if(localStorage.noFirstVisit = "1" {
// do something
localStorage.noFirstVisit = "[someValue]"
}
else {
// do something
localStorage.noFirstVisit = "1"
}
})
Another issue is when the content shows the design gets little messed up(by widening the divs, bringing horizontal scroll)
how about adding something like 'ng-cloak' in angular, to avoid the undesirable flicker effect caused by show/hide.
when clicking the roll-button, it prevents the divs from showing unfinished..
Is it possible to activate a tab using javascript in Material Design Lite?
I want to activate a tab using the links inside mdl-layout__drawer?
Is there a function for that?
No problem. I assume you want everything in the drawer to mirror your tabs. If you want to only have certain items activate tabs and not all, just adjust the last line in the sample code, maybe add a "drawer-tab-clicker" class if you want to single out which links activate tabs and which don't. I wanted them all, so the sample below does all the drawer links.
You should give your drawer links the same exact href hashes as the tab you want to activate, then do some magic jQuery ...
function opentab() {
var draweritem = this;
var target = $(draweritem).attr('href');
$('.mdl-layout__obfuscator').click();
$('a[href='+target+'].mdl-layout__tab span').click();
return false;
}
$(".mdl-layout__drawer a").on('click',opentab);
This grabs the drawer item you just clicked on, reads the href it's pointing to, then clicks the "obfuscator" to close the drawer and then finds the layout tab based on that href. It then clicks on the span inside the link (yeah, not the link itself).
Works for me!
Currently toggling tabs programatically isn't supported.
You would need to reverse how tabs are toggled and implement your own function to handle the same logic.
http://tympanus.net/Development/ContentRotator/example2.html
Currently this Content Slider lets you scroll every 4 thumbnails (a set) when you click on the arrows. How can I make it so that clicking the arrows moves onto the next thumbnail instead?
Also, it is currently on AUTOPLAY, but once you click on a thumbnail, it stops. How do I make it continue to autoplay even after being interrupted by a click?
This is the tutorial page: http://tympanus.net/codrops/2011/07/29/content-rotator/
The script for the slider can be found here:
http://tympanus.net/Development/ContentRotator/js/jquery.crotator.js
It's not a well written plugin and unfortunately the script itself doesn't allow for customizations (i.e. you cannot pass in a list of options). There isn't an option to prevent it stopping on interaction. To achieve what you want you'll need to edit the code.
I had a look at the code and the slider will continue to work so long as the variable config.slideshow = true. However, there are a number of event bindings that have code to unconditionally set the value to false. E.g.
$navNext.bind('click.crotator', function(e) {
...
config.slideshow = false;
...
}
You could remove the code where the value is set to false and that would solve your problem. However, since you're going to touch the code it's better to allow the plugin to accept options. You could make it allow an option like 'stopOnInteraction' where it basically does the following line in the event handlers:
if (config.stopOnInteraction) {
config.slideshow = false;
}
I am pretty new to flex, so forgive me if this is an obvious question.
Is there a way to open the Security.showSettings (flash.system.Security) with a callback? or at least to detect if it is currently open or not?
My flex application is used for streaming audio, and is normally controlled by javascript, so I keep it hidden for normal use (via absolute positioning it off the page).
When I need microphone access I need to make the flash settings dialog visible, which works fine, I move it into view and open the dialog.
When the user closes it, I need to move it back off the screen so they don't see an empty flex app sitting there after they change their settings.
thanks :)
If you do something like this, it will work in some situations:
var mic:Microphone = Microphone.getMicrophone();
mic.addEventListener(StatusEvent.STATUS, onMicStatus);
If you are just trying to use the microphone and relying on Flash to pop up the dialog to ask the user for permission, Flash will open a dialog with two buttons, Allow and Deny. When the user clicks one of the buttons the StatusEvent will fire, the dialog will close, and you can move the flex app out of the way.
If you are manually opening the settings panel (via Security.showSettings), you get the panel with Allow and Deny radio buttons, and the event will fire when the user clicks on the radio buttons, not when they close the panel, which is probably of less help to you.
Update: flex 4 solution
So when I moved to the flex 4 and started compiling my mxml with adobe's open source mxmlc compiler, the solution below no longer worked because the alert doesn't lose focus when you're in the settings anymore.
As far as I could tell I had to move to a less elegant solution where the user must click "OK" on the alert box every time they are done with the settings.
Here is the new code:
private function setup_smart_hide():void {
// Call this function whenever you make the flex app visible (or add it
// to a show_flex() function if you have such a thing set up)
alert = Alert.show('Click "OK" to continue.', 'Thanks!', Alert.OK, null, function(e:CloseEvent):void {
// calls the external javascript to hide the flex app
hide_self();
});
}
OLD: (flex 3) Got this working...
private function setup_smart_hide():void {
alert = Alert.show('Thanks');
alert.addEventListener(FocusEvent.FOCUS_IN, function(event:FocusEvent):void {
// javascript to hide the flex app
ExternalInterface.call("SB.flex.hide");
});
alert.addEventListener(FocusEvent.FOCUS_OUT, function(event:FocusEvent):void {
// javascript to show the flex app
ExternalInterface.call("SB.flex.show");
});
alert.setFocus();
}
Which is run first thing in the init() function... the only problem is (like Wesley said), the focusOut event occurs when the flex app itself loses focus as well.