I have an image map that uses a third party script(mapper.netzgesta.de) to highlight the different areas of the image map. Basically the script adds onmouseover events to the areas via javascript. How can i have the areas already on when the page is loaded as opposed to any user based event?
I already have onload events and cant interfere with those. All the other events depend on user interaction. The cms i am using currently doesnt work with jquery.
any suggestions?
You can try to simulate the mouse over events.
Simulate Mouse Over in Vimperator plugin
You can also append to onload so you don't lose your current event handlers.
window.attachEvent("onload", function(){alert('Welcome')});
After further study and a great amount of help from the developer I was given an answer. The product i was using (mapper.js) does not support this. The reply was use another product of his called mapzoom.js. The preselection will allow the specified areas to stay on when loaded and not be dependent on an user interaction like onmouseover.
Related
I am making a chrome extension to edit properties of images that are clicked on. I am using a package called element picker to select the images (this is triggered through an html button in a popup). The code works and I can change the properties of the image. However the package does not stop whatever action is linked to the image, which can often lead to the user being taken to a new page. How can I stop any of the actions of the users click between the time they press the button in the popup and they have selected an image?
Thank you in advance.
var elementPicker = require('element-picker')
function onClick(elt) {
[.....]
}
elementPicker.init({ onClick })
I don't usually recommend using this but CSS pointer-events can solve this problem. The idea is that any element with pointer-events:none will ignore any interactions. This works to block default HTML interactions like <a> or <button> as well as any javascript actions attached to the element.
This is the technique frequently used with a modal window to prevent clicks from going "through" the area around a modal. It should also work for what you described.
You could either set that style on the image element or on All Elements by using the * {styles...} selector. If you go the "all" route, you'll need to explicitly re-enable pointer-events on any elements in your extension interface that you still need actionable by using the 'auto' property.
Remember to reset pointer events when your extension is finished * {pointer-events: initial;} or you'll leave the page completely in-actionable.
If there is an Event object being passes through to the function then you could use the Event.preventDefault() function.
This function stops any default behavior and allows you to handle the event in your own manner.
Reference: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
I am building a calendar like this one fullcalendar external dragging. What I want to achieve sounds easy, but I found is not. I need, while dragging one of the external events to one specific day in day view, that if overlapping is detected the event changes its color immediately, but color must switch back if overlapping is no longer detected. I thought that in the drop callback(not dropEvent callback) I could be able to make some sort of comparisson, but looks like if the drop listener were outside of the scope of the calendar because I cant access to the ObjectEvent, or at least I dont know how.
In essence, change the color while dragging an external event into the calendar if, for instance, overlapping is detected
I think this is a weird requirement. Ideally, the color should be customizable per event.
However, I would suggest something that validates your event. Basically, save the original state of the event object. Trigger a validation when it hovers over a zone. Revert back when you leave the zone.
I'm not exactly sure you to see the list of events already in the day.
It's not a great solution but it should work.
I found it. There is an event which handles it in fullCalendar: EventReceive.
Basically it is called after drop() and is the one that builds the calendar'event object right after the drop event ends.
So, if you are dragging an external eventObject to the calendar and you need, for instance, checking overlapping for this external object, this is the man, I mean, the event.
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.
I want to create a little WYSIWYG editor.
The idea:
First I want to add the feature to write and change text. So I add an onClick and onKeyBoard Listener to my div container. When I click the div I set a varaible named "focused" to true. When an key event is fired I check if focused is true. In case focus is false nothing will happen else the new charater will be added on the cursor's position.
My questions:
Is this the right way? I tried to check how other editors handle the text input but I wasnt able to get it.
In case this is the right way - how can I simulate a blinking cursor. In a textarea the cursor will blink but who about a div container? The cursor will hide immideatly after clicking.
I'm assuming you're doing this for fun/practice. If you're doing this for professional reason then I HIGHLY recommend you don't reinvent the wheel and use something like Ckeditor, tinyMCE or YUI.
That being said; you need to look into event handling. Specifically, for your question about focusing, you can look here. The way you're describing (setting a variable to true/false) seems like it is going to just run into problems. If you use the standard events attribute (as opposed to setting a "focus" variable onclick) you should define functions to execute and then set them as an onfocus/onblur attribute for the element you're listening to.
That is if you aren't using a javacript library like mootools, jquery, extJS, etc. If you're using one of those they likely have their own way of handling events, so you should search their respective documentation for how to implement event handlers.
One more note; you really should be using a textarea over a div (unless I'm misunderstanding and you just want to do something when a user focuses on your div). If you're using javascript only to completely reinvent a texteditor from a div; then your web page will not function without javascript. If you keep the text area; users could still type information in and you still get the benefit of grabbing text contents for form submits but using divs means your web page will just be rendered useless without javascript.
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.