I'm using an application (IIPImage) which display an High Resolution Image using a script created with mootools api. I want to insert a floating window in this page. Initially I think to use jquery, BUT I discover that jquery can't coexist with this library, so I need to use mootools to create this floating div. How I can do this? Someone can help me please?
Thanks
mootools and jquery can co-exist just fine, given some work - jquery has a .noConflict() mode and mootools won't take over $ (since 1.2.2) if it has already been defined and will revert to using document.id instead. however, IIPImage seems to have been written for 1.2.0 which is old and buggy and does not care about overwriting $ - upgrade mootools to 1.2.5 and replace mentions of $( with document.id( in the script or add a closure instead like (function($) { ... code from the zoomer ... })(document.id);
you may need to find any global vars refrences and change them as declared from var foo = to window.foo = but all in all, it should not really be a drama.
as for the other solution, you can figure it out here http://davidwalsh.name/persistent-header-opacity
this is a small bit of code that enables position: fixed for browsers that don't support it (IE before 8 i think)
have fun.
Related
I am working on a set of webdriverIO tests that use a lot of pauses. To make the framework more robust I want to get rid of the pauses and introduce waitfor statements
I have looked through some walkthroughs, and most of them suggest something in the line of this:
var decrease = browser.$("//*[#id='somebutton");
decrease.waitForExist(5000)
decrease.click()
This doesn't work in 90% of the times however, returning the error message:
An element could not be located on the page using the given search parameters ("//*[#id='somebutton'"). (pretty much the same message I get when I remove the wait altogether)
I have tried both waitForExist and waitForVisible without success
I have played around a but, and found out that the following way does work:
browser.$("//*[#id='somebutton").waitForVisible(5000);
browser.$("//*[#id='somebutton").click()
I am not fond of this solution though, because it requires replication of the locator, which will make support harder in the future.
Can anyone shed some light on why the first option might not be working for me?
This should do the trick:
var selector = "//*[#id='somebutton";
browser.waitForExist(selector, 5000);
browser.click(selector);
Also, an example in the api docs shows it being done like this. Notice they left off the browser. portion.
var notification = $('.notification');
notification.waitForExist(5000);
Perhaps that is your issue? Both ways should work though.
One last thing, you don't have to use the xpath for this element if you don't absolutely have to. It's easier to just use the css selector for id.
var decrease = $('#somebutton');
Using PhantomJS V 1.8.1
Thanks in advance.
I am trying to run some tests on a website that I am developing which is using backbone.js.
One of my tests involve checking to see if a Canvas is present and clicking on it. My problem is that whatever selector I use to get the Canvas Element I cannot get the selector to find it. I use the same CSS selector in Google Chrome when viewing the page and all is OK. At first I thought that the issue may have been due to the element not being present on the page but other elements which are inserted with the canvas are present so I am 99% sure that this is not the problem.
The selectors I have tried to use are:
document.querySelectorAll('#idOfCanvas');
document.querySelectorAll('canvas#idOfCanvas');
Also if I use .classClassName:nth(1) to select the tyre selector, it still fails to work (works in Google Chrome though as does the other examples provided)
The canvas has a class name which is picked up by the selector by I would rather not use a class selector.
Any help would be much appreciated.
Cheers :)
Also
Like I mentioned I am almost certain that the Canvas exists as the container div for it exists. Also I have four elements on the page with the same className (two of which are canvases) and four elements are being returned when I run
return document.querySelectorAll('.className').length = 4;
Assuming you have something like this:
<canvas id="idOfCanvas"></canvas>
This should work:
canvas = document.getElementById("idOfCanvas");
// or
canvas = document.querySelector("#idOfCanvas"); // Only get the first match, ID's should be unique, any way.;
// or
canvas = document.querySelectorAll("#idOfCanvas")[0];
// or
canvas = document.getElementsByTagName("canvas")[0]; // Get the first <canvas> element.
However, you'll have to make sure your canvas element is actually loaded when the script is executed. Have a look at this onload tutorial, for example.
Try this :
canvas = document.getElementById(#IdOfCanvas:nth-child(1));
I'm trying to use the element.fx effect from mootools as shown here but it seems like its conflicting with jquery 1.5.
when I remove it starts working again. Any ideas on a work around?
Try using document.id('my_dom_element') instead of $('my_dom_element') when you are trying to use MooTools functions. You can also use jQuery's noConflicts() method.
Currently I am using Form.Validator from Mootools 1.2.5 and Mootools-More 1.2.5, but i am having a hard time validating an Element's input when dynamically injected into the DOM after ondomready. I was wonder if there's a way to attach Form.Validator's functionalities to the newly inject Elements?
UPDATE:
Using what #Dimitar suggested i was able to fix the issue. I use the build in function getFields to repopulate/attach events to the dynamic Elements. formValidatorObj.watchFields(formValidatorObj.getFields()); Hope this will help some Mootooler's in the future!
i am not a big -more users but looking at the source code on github, this seems like a good guess:
https://github.com/mootools/mootools-more/blob/master/Source/Forms/Form.Validator.js#L161
i guess you can pass any element - dynamically created or otherwise.
formValidatorObj.watchFields([someElsCollection]); // or from form.getElements or whatever.
// dynamically add a new field...
formValidatorObj.watchFields([new Element("input.required[value=John]").inject(formValidatorObj.element, "top")]);
Explanation:
i have few objects and im declaring them inside $(document).ready(). WHY? because in thous objects i have many jquery methods $(..), obviously they can work outside too, but when i include mootool, then it stop working. i tried noConflict and some other things, nothing works, only if i change the $() to jQuery() or to $j().. and i dont want to change for my 20 files and more then 2000 lines for each file. anyway declaring my objects inside $(document).ready(). made them work just fine.
Now My Question is:
if i declare all these objects inside the $(document).ready() method, would it make my site slow? or would it make things slow from client side? thats the only concern in my mind.
I don't see how doing that would make your site slow. By declaring them within the $().ready you're simply restricting the scope of your declarations to that particular $().ready function, thus they won't be available from within the scopes of other ready functions on the same page - which should not really be a bother if your application is well-designed and you've stuck to one per page.
Oh, and your declarations certainly won't have been been parsed until the DOM is fully loaded, (as you know, $().ready only executes once the DOM has loaded), but that too should not be a problem as you're only utilizing them from within a ready function (at least I hope).
Do you really need two libraries? If it's just one or two little tidbits of functionality you are using from one of those libraries chances are you can mimic that behaviour using the one you're making the greatest use of. If you can possibly/feasibly do that it will make your life so much simpler.
Doing everything in jQuery.ready will not slow down your site.
As an alternative solution, you could replace $ with jQuery in all of your jQuery code, or you could wrap it in a function like this:
(function($) {
$('whatever').something();
})(jQuery);
This code makes a function that takes a paremeter called $, and calls that function with the jQuery object. The $ parameter will hide mootools' global $ object within the scope of the function, allowing you to write normal jQuery code inside the function.
Just declare
jQuery.noConflict before the document.ready request, then alias the jQuery method to $ within in the document.ready...
jQuery.noConflict();
jQuery(document).ready(function($){
});