ZClip SWF does not align with button position if button position changes - javascript

I am currently using the zclip/jquery code to allow copying to the clipboard. It is currently attached to a span button. It seems to use a swf file over the button to provide the flash based copy to clipboard feature. The problem that I have is that when I dynamically add new elements to the page, the button position moves down but the SWF position stays the same. Is there anything I can do to have the zclip "follow" the button? Zclip snippet below:
$("#copyToClip").zclip({
path:'include/javascript/ZeroClipboard.swf',
copy:function(){return $("#outputtext").text();}
});

The zclip('show') thing actually calls the jquery show method, not the Zclip function.
An other tip would be to trigger the window resize or load event. You can see in the code the reposition function is bound to it.
a(window).bind("load resize", function(){
d.reposition()
})
then everytime, I add/remove element to my page, I call
$(window).trigger('reload');
That does the trick for me.

I beleive you can call the 'show' method to refresh the position:
$('#copyToClip').zclip('show');
The site does say "it may not be 100% reliable in every instance." and although it doesn't sound like it'll be an issue in your case it might be worth noting that it won't resize itself if the button has changed size.

Related

Do something when div is created without knowing the event that creates it (javascript)

I'm wanting to create an overlay when a popup is created, but I don't know what event is triggering the popup. Is 'listening' for a specific div to be created possible?
Just in case that wasn't clear, here's another way of asking my question:
When #popup is created, I want to insert a div with after(), but again, I don't know what triggers the #popup
In my specific situation, the html for the popup is being created (i.e. the popup isn't just being displayed with CSS)
MutationObserver
I attempted using MutationObserver but that didn't work. In my situation, when the input for the date is clicked (see fiddle), the popup is created. With MutationObserver, I tried to fire an alert that went off when that popup was created. But it fires as soon as the page loads.
Fiddle
you can use Mutation observer to detect the event when div is created

"Tab Rendered" event for MDL Tabs

I'm using the MDL tab component. After a tab is clicked and it displays the content for that tab, I'd like to set the cursor focus in a certain text input within that tab's content.
My initial approach was just to handle the click event of the tab element and then set focus accordingly. The problem I'm having is that calling .focus() on the text input element isn't working because it tries to set focus before the text element is actually visible, which no browser seems to like doing for you. If I set focus inside a setTimeout() delay it works, but that doesn't feel like a very clean way to go about it.
Is there any kind of event that can be handled for when a tab is clicked and has finished displaying it's contents? I've also looked at using mutation observers to detect when the text input element is visible but browser support for those is fairly limited still.
No there is no such option. I think you have to use setTimeout or setInterval
You can look into the source. Perhaps write your own MaterialTabs constructor and register it.
Material-Design-Lite source, MaterialTab
I think there are also some libs that can do this like jQuery. You can also see
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
This works only in modern browser but has a legacy implementation.
I've added this line :
window.dispatchEvent(new Event("tabSelected"));
to the material.js file, at the end of the selectTab() function. This way, the event is fired right after the tab content is shown.

file input javascript click generated not from a real mouse click chrome

i'm having trouble in chrome opening the popup for the file upload of a file input type.
As you can see here: http://jsfiddle.net/cavax/K99gg/3/, clicking on an elements can trigger a click on the file input, but for example hovering a element wont trigger a click on the input.
$('#test').on('click', function(){
$('#upload').trigger('click');
});
$('#test').on('mouseenter', function(){
$('#upload').trigger('click');
});
In the real life i'm having this trouble because in a web app i'm loading throw ajax a content witch has inside an input file.
At the end of the load the popup file must open, but there is no way to get this works on Chrome (workign on FF).
The problem i guess is that the action is not generated by a mouse click (hover, timeout etc) so chrome wont trigger the fileupload.
I've also tryed this: http://jsfiddle.net/cavax/K99gg/7/, so click on the element, wait then trigger the click but nothing, because there is the "settimeout" in the middle of the click and the trigger :(
$('#test').on('click', function(){
setTimeout(function(){
$('#upload').trigger('click');
}, 3000);
});
if you remove the delay: http://jsfiddle.net/cavax/K99gg/8/ it works
Any idea to get this work?
If I remember correctly, mouseenter and mouseleave are specific to IE, not standard events. Maybe they were extended, but don't think they became a standard. So the event itself may generate you some problems.
To resolve this you can use a lib (like jQuery for example), that treats the browser differences (or you can check the code there and take what you need).
Second way... try mouseover... it worked better (again... didn't work with them for a while so things may have happened, but this is how I remember them to be).
There is no way to trigger click event of input file type, because of a security reason.
You may try a hack of this by setting your button/div position to absolute and top to -100px
It means positioning it outside the viewport by setting above style make it works.
But for mouseenter and mouseover i don't think it's going to work!
Edit:
Moved input outside the viewport and target click event
Example on click
Side note: Right now click occurs 2 times as you have written
$('#upload').trigger('click').click();
You just need
$('#upload').trigger('click'); // $('#upload').click()
unless you want it to fire more than single time.

Change CSS of div when ATBar button is clicked

Currently trying to fix an issue with a WordPress site. The site has the ATBar plugin installed which is an accessibility plugin with a toolbar at the top of every page. This toolbar overlaps the normal Wordpress Toolbar and therefore I have added some CSS to the WP toolbar to push it down a bit:
top: 40px;
As 40px is the height of the ATBar. Unfortunately when the ATBar is closed (via a button on the toolbar) the gap is left at the top.
I've tried binding a click event to the ATBar close button but it has no effect, possibly because the ATBar is dynamically loaded with JS on page load. Therefore, I've tried only binding the event when the window is ready, as opposed to the document, but no effect either!
The site is here: http://simp.daveclarke.me/, you will see the two bars if you visit this page.
Any advice appreciated
I've tried binding a click event to the ATBar close button but it has no effect, possibly because the ATBar is dynamically loaded with JS on pag
I think it's not a problem with loading the JS dynamically but the fact that the wordpress bar has an !important in the CSS top attribute. If you can remove the !important tag and then do something like:
document.getElementById('at-lnk-atkit-unload').addEventListener('click', function(){
document.getElementById('wpadminbar').style.top = "1px"
});
That should fix the issue
Can't you do something like
$('#at-lnk-atkit-unload').click(function(){ //when ATbar close btn is clicked
$('#wpadminbar').css({ "top": "0"});
});
try to use $('#at-lnk-atkit-unload').on('click', function(){ ...
Answering my own question..
Managed to fix this in the end, by tweaking their JS a little.
Rather than importing the JS source from their server, I made a copy at my end and added the addEventListener call that #emilioicai suggested just after the ATBar was rendered. This adds the event listener and functionality required.
Thanks!
I think, that problem lies in that: ATBar loaded after your code, so event listeners didn't attach.
And if you don't want to copy foreign code to your server (which is not appropriate decision, 'cause it will not work all the time, API of ATBar may evolve and so on), you may use timeouts
setTimeout(yourfunc,0); //if loading takes a lot of time, then
// change 0 to 50 or whatever
Or just use jQuery .on function (or even deprecated .live function)

Emulate appearance of a link with javascript

I need to open links with javascript (window.open) when the user clicks on positions in a google-maps map.
How do I make the user understand that it is a link, that he can click it, and where he will end up when he has clicked it?
Among other things, while the user is hovering over a map position, the URL of that position should be shown in the status-bar, just like with a normal link in firefox.
How do I do that?
Thanks
dontomaso
You can create a simple link and then put an onclick listener on it using unobtrusive Javascript techniques. When the user clicks the link you intercept the click event, prevent the default action, read the href attribute and open the window. Kinda like this:
link
$("#myLink").on("click", function(event) {
event.preventDefault();
myFunctionToOpenWindowForUrl(this.href);
});
This is using jQuery, of course you could adapt it to any other JS library you might be using. This way you will also see the original URL in the status bar, because that is the natural thing for a link - no need for extra coding. Also your links will work even without Javascript, which makes this approach way better than styling a span for instance to look like a link and then attach the listener to it.
Ok I don't know much about how google map manage JS code so I try to give you a general help:
you could create a DIV (with width and height of the rectangular area you want) and then put it with background-color transparent positioned in absolute coordinates where you want into the map.
then write onmouseover and onclick handlers for it so when the user goes over on it you do a change to the mouse shape (from pointer to hand) and when it clicks it open the url.
for the status bar when the user over on a map poistion you can do:
window.status = (getURL)
You can modify the cursor to appear as a pointer by using CSS(cursor:pointer;)
Furthermore, you can put the destination into the title tag, so the user will see the destination if he moves the mouse over the element.
try something like this:
link
href="javascript:void(0);" will show link as it should, if you would put here href="#" it would just scroll on top of the page. Href has to be set to have usual link display.
onmouseover="window.status='status bar';" will set status in window on mouse over.

Categories

Resources