I'm using Zero Clipboard and Downloadify to put certain data into clipboard and call Save As dialog. I want to avoid having to click two buttons, but Flash does not allow taking action with simulated click() from Javascript, only real mouseclicks. Is there a way to "spread" a single click done by user to two flash buttons?
I think I heard somewhere that a click can reach through several layers of elements. I tried putting the two buttons one on top of another (by calling ZClip on the flash object that Downloadify generates), but it doesn't work, only the upper button fires (ZClip), even though the bottom one is able to detect mouseover (changes button color).
I need this for a userscript I'm writing for myself to enhance functionality of an online photoalbum. The idea behind the script is that it tries to guess the category of a currently opened image based on its filename or tags and generates a full path under which I would want to save this image, which is then placed into clipboard so that upon saving I can simply paste it to the filename field saving me the trouble of having to navigate to the desired folder manually every time. Since I'm going for decreasing the amount of clicks, I'd like to have both clipboard operation and Save As dialog to happen at a single click instead of click for copy and right-click for context menu and click to choose "save as".
I'm using Opera 12.17 if it matters.
Edit: It looks like you can call a flash function from outside by Javascript via SWFObject plugin, but that function needs to be declared as external in flash code. I tried looking up the list of available functions in my case, ZClip has none and Downloadify only has unrelated stuff like show/hide/classes, so still no luck.
ZClip has the ability to relay the click event to the object it's glued to, which is on by default, but that still doesn't work in my case, even though I glue it to Downloadify.
Apparently it's impossible, I asked the same question in several places online and got no solution anywhere.
Still, I solved the problem another way, if I can't fire two buttons at once, I should just add the functionality of one into another. Which I did, adding the ability to copy to clipboard to Downloadify, works perfectly.
Related
I want to make two buttons, which will open (depending which is clicked) new page but with different style.
I added eventListener to button and I used window.open, then I want (if it's posible) to somehow call function after the new page is loaded to change style of some elements.
I want to have result similar to two identical htmls but with different function calls from script, but in more dynamic form(so without copypasting htmls)
The first idea that comes to my mind is to pass some GET parameters to indicate whether to apply one of your 2 styles
but if you maybe provide code examples or more details about your problems (code snippets/framework used if any )it may help more for addressing your exact problem and solving it quicker
How to retrieve GET parameters from JavaScript ,This may help if you choose to proceed with my solution
An alternative is to use localStorage and save some piece of data about the style and then on the other window load event you can retrieve and apply it's data where you think it is needed.
Using Chrome's developer tools I am trying to determine what jQuery function is hooking an input button on the page for debugging purposes. I usually just keep searching until I find it, but I figured I'd ask this time.
Is there a way to find a jQuery button hook for a specific button in Chrome? I've tried looking through the Event Listener Breakpoints, but can never seem to find the right thing to pause it.
Basically, I need to know what jQuery / Javascript is being executed after the button is clicked.
The hooks are implemented in the application like so:
$('.button_class').click(function (){
$('#button_id').click(function(){
etc...
try this :
$(yourbutton).data('events');
Depending on the number of events/timers on the page this doesn't always work. But you can try "pausing" before clicking the button you want to debug in the JavaScript debug window. That way the debugger will pause on the next line that executes. The thing that occasionally prevents you from using that is if there is a "hover" or mouse move/in/out event tied on an element you have to pass over to get to the button (including the button itself). In that case I just remove those events (if I can) until I get the one I want. The event listener breakpoints would be more ideal but they're sometimes difficult when using jQuery or another library, I've actually put in a feature request to the Chrome Dev Tools team to address this very issue. (allowing you to specify what files are "yours" and only "breaking" in those specific files)
good luck -ck
There are many questions that ask how to change the class of a div in a JavaScript click handler, e.g., here: Change Div style onclick. I understand that well (just change .className), and it works.
However, when I follow a link from my page to somewhere else, and then click the back button, the class names are reverted. (Safari and Firefox get it right, Chrome does not.) In Chrome, most other changes I make dynamically, e.g., to click handlers, are also reverted when I go back to the page (although it remembers freshly inserted new divs).
Note that neither Chrome nor the other browsers are reloading the page when I press "back"; they must just take it from the cache. (I update the state on the server using ajax, so it works fine when the browsers reload the page.)
I am not really a web developer, so this is a bit puzzling. What is the standard practice here? Should I use history.replaceState() every time I change the divs? Should I save the changes in a state variable and reload them every time there is a popstate event? Instead of changing div classnames, should I delete the div and insert a fresh one (with all the old div's children)?
I am using vanilla JavaScript here (no jquery even) and would prefer to keep it that way if possible.
It is possible, but you will need additional ways to remember it
You could try one of these:
Cookies: This definitely looks like the best way to go
Pass Vars on the URL: example: www.mywebsite.com?myvar=red. This would be easier using PHP, but still is possible in pure JS (but I don't recommend it)
Store it on Database: (don't recommend this at all)
Store it in input elements: In current browsers, input element values (of radio buttons, hidden, etc.), persist after POST-ing, and returning using the back button.
These are just some options, but I don't recommend using them for what you want (it is a waste of time and effort if you weight the Pros and Cons of what you want to do)
You can save state in cookies and restore it when page loaded.
Also you can save it on server-side (send state using ajax, when it changed). And send prepared document to client when it requested again.
Browser forget all states when you reload page.
Beatports new interface has solved a major problem I was looking for the solution too.
Namely, it keeps a "player" interface at the moment and you can browser to different parts of the site (also changing the url) without reloading or interrupting the player.
I cannot for the life of me understand how they have done this, can any of you guys figure it out?!
Many thanks for any replies I get
Looks like they are just using AJAX to load new content but have taken care to make it work and look pretty seamless. You can get better insight into what events are attached to what elements via the Visual Events bookmarklet. Once you find the code that triggers the event, you can run the obfuscated javascript through JSBeautifier to examine it more closely.
Specifically, it looks like they're adding click handlers to all anchor tags, passing off the event if it was triggered with a middle click or modified with a keyboard key, otherwise passing it to a dynamic loader which handles state and other specific conditions like multiple clicks. The seamlessness of it comes from the way they deal with URLs making every page bookmarkable and the browser history so the back and forward buttons work as you would expect on a "normal" site.
I'm having trouble understanding conceptually what I should do while trying to make my first large Javascript web application.
Depending on which tab a user has selected, I show different content inside a container. The content is more than just text and uses different Javascript functions and events. I am using the Yahoo! UI Library's "TabView" implementation, but the way that this issue should be handled would probably apply to other Tab approaches.
What I was thinking of doing was basically the following:
Create separate modules for each tab (e.g. MYAPP.modules.tabCalendar and MYAPP.modules.tabJournal). When the user clicks on a different tab (or navigates with browser buttons to a previous tab state), I could call MYAPP.modules[oldModule].disable() and MYAPP.modules[newModules].enable(). These functions would subscribe or unsubscribe their custom events (for example, a general click handler attached to the container).
An alternate approach to dealing with events might be to have a single global click handler. If the click is inside the container, then determine which tab is currently selected and send the click event to MYAPP.modules[currentTab].onClick().
Or, the global click handler could fire a Custom Event to which the modules have subscribed since page load, and each module's onClick events will run and determine whether or not they should do anything.
There seem to be a lot of options, but I've been having trouble finding resources that talk about the best ways to do things like this. Am I on the right path? How should I handle this?
Use the events already built into TabView to queue your JS to do things.
http://developer.yahoo.com/yui/tabview/#handlingevents
For tab changes you'll be told the previous/next tabs selected and such which should be more than enough for your JS to figure out what it should do. If you want to write a translation layer that'll look at the events and do something based on it that's fine but it's not strictly necessary.
I'm a bit fuzzy on the problem.
Yes, you should modularize your code.
Have each module setup event handlers on the elements in their respective container.
That's it. YUI TabView handles the tab switching so you don't need to enable/disable anything.