I'm having trouble locating elements on an overlay. I've tried locating via by.id and it still doesn't find the element. I tried element(by.id('some-element'));
I'm not sure how this overlay is generated but it does go underneath a header menu on top of the page when you scroll. Not sure if that'll help any. Its not an iframe.
One more thing. Its a drupal app and specifically on the add user overlay. I think there something special going on there. Can someone see if they have the same issue?
Any help would be appreciated. Thanks.
Since the overlay is inside an iframe, you first need to switch to it's context:
// wait for the frame to be present
var EC = protractor.ExpectedConditions;
var iframe = $("iframe.overlay-active");
browser.wait(EC.presenceOf(iframe), 5000);
// switch to the iframe
browser.switchTo().frame(iframe);
// do something
// get back to the main context
browser.switchTo().defaultContent();
Related
Started to try out this fancybox3 plugin to zoom thumbnail images in our app that works perfectly on desktop and mobile browsers.
In the app where the cart has thumbnail images of the products added to it that can be purchased. If I remove a product(image of it)from the cart, it gets removed from the cart, however, if I zoom one of the remaining product images of the cart and navigate through it, still showing the removed product there. I am expecting to see only the product images present in cart.
I tried using the preload: 0 option but that does not work for me. Fancybox is initiated in following way
$('[data-fancybox="images"]').fancybox({
idleTime : false,
loop: true,
transitionEffect : "fade",
animationDuration: 333,
buttons: [
'close'
],
protect: true,
infobar: false,
preload: 0
});
Any help to make this work is really appreciated.
Thank you
Looks like you have misunderstood the concept of "preloading". The script preloads images before displaying, but what that means is that it is showing loading icon before displaying full image. If you disable preloading and provide dimensions (width/height) of full image, then the script will display thumbnail image while full image is loading. This is a great feature if you want to make your app/webpage look more interactive (e.g., user would not stare at black overlay with loading icon but will see something useful instead).
But what you have described sounds like "caching" and fancyBox is not caching dom elements. So, if you see something in the gallery, that means that corresponding element exists in your page.
So, make sure that your product is actually removed from the dom or try to tweak the selector to match only "actual" products using "selector" option, e.g., something like:
$().fancybox({
selector : '.fancybox:not(.removed)'
});
Obviously, you should tweak this to suit your needs. Since you have not provided any details, I can not create a full example.
#Janis, Thank you so much for the clarification on 'preloading' concept.
You were right about dom still holding the removed item. Upon removal, the div is simple being set as display none.
First, I added code to remove the div form the dom but that resulted in page getting refresh which we don't want.
Next tried, the selector option and it worked perfectly.
function hideCartItem(id) {
var divItem = document.getElementById("divCartItem" + id);
var elem = "#divCartItem" + id
if (divItem != null) {
$(elem).hide();
$(elem).remove();
// added code
$('[data-fancybox="images"]').fancybox({
divItem: '.fancybox:not(.removed)'
});
}
}
Thank you so mcuh for your help. Much appreciated!!
I'm trying to put TinyMCE on my website. I figured out how to get it to show up, but I'm lost on how to process the content. In their example, they just have a link that references the top of the page and clicking on it somehow magically causes their dump.php script to execute. I don't understand what's going on here. Here is the link:
http://www.tinymce.com/tryit/basic.php
The "Submit" button at the bottom is really a link in a span element with href="#". The form action is dump.php. I want to know how they configured this to run without an actual submit button. Any help in understanding this is greatly appreciated!
To Get Content From Tinymce You Can Use GetContent Method of Currently ActiveEditor Instance
tinyMCE.activeEditor.getContent();
method is used to getting Content .. to Set The Content
tinyMCE.activeEditor.setContent("I Want Text To Be in Tinymce");
to find a perticular element in tinymce get body and find element
var body = tinyMCE.activeEditor.getBody();
$(body).find("#elem_id")
to get a full html
tinyMCE.activeEditor.getDoc().documentElement.innerHTML
hope that helps ..
Since I use PHP, I found this which is also useful:
http://www.tinymce.com/wiki.php/TinyMCE3x:How-to_implement_TinyMCE_in_PHP
Is there a way to use FB.XFBML.parse without rendering the a Facebook plugin again which cause it to "flicker" (disappear et reappear).
Will be using the Facebook Like button or Facebook Recommandations Bar.
Live example: http://www.gablabelle.com/eve-d
Slide to view the flickering in the lower right corner.
$.address.state(ajax_object.path).crawlable(true).value(whereiam);
$(".fb-recommendations-bar").data("href",whereiamurl);
//$(".fb-like").data("href",whereiamurl);
fburl = $(".fb-recommendations-bar").data("href");
//fburl = $(".fb-like").data("href");
console.log(fburl);
FB.XFBML.parse();
Many thanks for your help.
You can limit the scope of the re-parse by passing in the parent DOM element to FB.XFBML.parse.
Add an opacticy layer over the top of the facebook plugin div when a "page change" is needed. Animate it to fully opaque. Call the FB.XFBML.parse() and give it a few moments to re-render. Animate the layer to non-opaque, then remove the opacity layer from over the top of the facebook plugin div (or leave it there for the next time you need to do a "page change" without actually reloading the page.
This technique will give you a gracefully disappearing/reappearing plugin, rather than a jarringly harsh "flicker".
Cache the Facebook likes of the previous slide + current slide + next slide on a slide change event. So that when you go to the next or previous one and its Facebook like should already be ready/loaded, the user should not see a flickering. Unless he/she goes to fast with the slides.
I've had this recently.
I got around it by wrapping the XFMBL in a variable... don't know why but without it it seemed to flicker... a total hack of a way to stop the flickering but worked for me!!
if(call == 0){
FB.XFBML.parse();
call = 1;
}
DMCS provided what seems to be the only half-proper answer, but it's butt ugly. You don't know how long it'll take on each persons web browser to render the stuff. The callback which supposedly says it's rendered doesn't work either. Also the flicker isn't seen in firefox but only in google chrome.
Here is my goal: I want to click a specific link on one page, and on the page that loads, I want to change a specific class. I am aware of the onClick function, but not sure it can be used here. Is there a way to do this?
Thank you very much.
This jquery would do what you want:
$(document).ready(function(){
var anchor = '#myanchor';
if (window.location.href.indexOf(anchor) > 0) {
//do what you want here, change classes, etc
}
});
you should place this javascript on the second page, change #myanchor for your anchor used.
Make sure to include the jquery library in the second page for this to work.
I'm using the Facebook Like/Send buttons along with dynamically generated HTML (loaded via AJAX requests). I've found that even though the Send button works fine when the element exists on page load, dynamically created Send buttons aren't working correctly. Clicking the button activates it and the button greys out, but the popup doesn't appear.
Here is a demonstration of what is happening: http://jsfiddle.net/Daniel15/VxpSj/
Any suggestions?
Thanks!
Yes, I can confirm the problem from your fiddle.
function addLikeButton()
{
// […]
FB.XFBML.parse(newEl);
document.getElementById('container').appendChild(newEl);
}
For some reason, this seems to be “the wrong way around”. Reverse the order of these two lines – put the new element into the DOM first and let FB.XFBML.parse parse it afterwards, then (from my test with your fiddle) it seems to work in the desired way.