I have a sliding carousel of items, each of which includes its own like button. I want the like buttons to have comments; that is, when the user clicks Like, he should be presented with a prompt to leave a comment (http://developers.facebook.com/blog/post/397/). I'm starting to doubt that these goals are compatible and would like to hear if anyone has already achieved it.
The comments on the Like buttons are wider than the items in the carousel, and correctly overflow onto other carousel items. However, some of these items are outside the clipping box, since the carousel items are necessarily inside a div with overflow: hidden (otherwise we wouldn't achieve the effect of the items scrolling into existence upon paging). Because of this, if I click Like on the rightmost item currently visible, the comments prompt that appears will be partially outside the clipping box and thus partially visible.
It appears to me the only possible hope of allowing the comments prompt to overflow the carousel container is to place the prompt outside the container in the dom. This way, assuming we can visually position the prompt next to its Like button where it belongs, it's no longer constrained by the container. This seems within possible, since at the time of this writing the comment prompt is implemented as a separate iframe from the button itself; i.e., this XFBML:
<fb:like width="450"></fb:like>
yields (approximately) this HTML:
<iframe src="facebook.com/like_button.php"></iframe>
<iframe src="facebook.com/comments_widget.php"></iframe>
But if I try to move the comments iframe in the dom, it instantly and permanently becomes empty. Even if I could find a way to detach certain events and prevent this, it shows that an intricate solution is called for, and one which Facebook can break at any time in the future with changes to their implementation. Thus, I can't move the comments in the dom, and thus, the prompt is always in danger of being clipped. Facebook says this on the subject:
If the Like button is placed near the edge of an HTML element with the overflow property set to hidden, the flyout may be clipped or completely hidden when the button is clicked. This can be remedied by setting setting the overflow property to a value other than hidden, such as visible, scroll, or auto.
Clearly in the case of a carousel it's not possible to remove overflow: hidden. Has anyone found a way around this, or should I give up and spend my time elsewhere?
Thanks
Related
I have been tasked with building a SPA that has some complex page transitions.
My biggest concern is that these transitions rely on elements expanding on the page to then become the full page (i.e. you click a blue button, the blue background expands to fill the whole page and then the content is displayed.)
Now this is where I am struggling to come up with an accessible solution. I thought about making the text within the original 'button' a link with padding (as the URL will update and the link is for no JavaScript fallback) and then replacing the content of the parent div (the blue background) with the new content.
The problem I have is that I am not sure what would be the best practice for accessibility from the perspective of letting a screen reader user know that a new page has loaded in. Using aria-live is a terrible idea, but with NVDA if I just replace the contents of the div it can have some strange behaviour.
Has anyone ever come across this before? For example this dribble nearly shows what I mean, you click an element and then it opens up into a new page with the content within the element.
For a 'normal' AJAX site when navigating I would simply replace the whole <main> with the new content, make the <h1> programatically focused with a tabindex="-1", update the page <title> and that works fine, but with this type of navigation I am wondering if the same approach is applicable.
I am thinking replacing everything within the <main> element except for the selected 'button' background (including the original link being removed once the new page has loaded) and then loading the content in and managing the focus as described would work, but I am not sure if there is an accepted pattern for this type of navigation as it is so unusual.
I am thinking replacing everything within the element except
for the selected 'button' background (including the original link
being removed once the new page has loaded) and then loading the
content in and managing the focus as described would work, but I am
not sure if there is an accepted pattern for this type of navigation
as it is so unusual
I think this is your best best. The whole visual expanding thing is just eye candy, so as long as it is there you should be able to do this behind the scenes. Make sure you test with screen readers.
I am running a test on a web app using Ruby-Watir-Rspec. It is very simple since I'm a beginner.
I open a form and enter the required information, but the "Create" button is not in the visible area, so I get the message:
Failure/Error: #browser.button(class: xxx).click
Watir::Exception::UnknownObjectException:
element located, but timed out after 30 seconds, waiting for #<Watir::Button: located: true; {:class=>xxx, :tag_name=>"button"}> to be present
Caused by:
# Selenium::WebDriver::Error::ElementNotVisibleError:
# element not interactable
If I scroll while the script is running, it clicks on the button and the test is successful.
I tried scroll.to, wait_until_present, scroll to coordinates, scroll_into_view, none of them worked.
The only way to make it work was to put " #browser.send_keys :tab" several times until it reaches the button at the bottom of the form.
I believe the problem is the button being inside the form which does not take the entire page (behind the form is the map so that part of the page doesn't have the scrolling option)...so is there some way to scroll inside the form? Or do you know some other approach to finding this button? Any hint is appreciated.
Btw, the page is maximized.
Here is the code snippet, just simple:
it 'should create the place' do
#browser.button(class: xxx).click
end
My guess is that this is a custom scrollable element that hides the content with the overflow: hidden style. Elements in the overflow are not considered visible/present. When you manually scroll, you're bringing the element out of the overflow so that it's present.
I've seen a couple of these in the past. Each one needed a different approach for scrolling. Without the exact HTML/CSS, it's hard to say how to scroll the element.
However, if you're not trying to test the scrolling, you could manually fire the click event. This will bypass the visibility requirements:
#browser.button(class: xxx).click!
Try using the Watir Scroll gem: https://github.com/p0deje/watir-scroll and scrolling the element to the center of the viewport: button.scroll.to :center.
You can also submit the form directly #browser.form.submit
Anyone have some code to reorder a ng-repeat using drag and drop that does not require jQuery? (angularjs dependency only)
I've had good results with https://github.com/kamilkp/angular-sortable-view - it's brand new (first commit was last week!), but it's extremely easy to work with. You put an sv-root attribute on the element (probably a div) that's the ancestor of the ng-repeat you want to be able to reorder. Then you put an sv-element attribute on whichever element you're ng-repeating, and drag and drop is handled for you.
You can also optionally put an sv-handle attribute on some element (probably an image, or a Font Awesome icon) inside your ng-repeat, in which case that element gets used as the drag handle. You can also optionally set up "placeholders" (something that shows up as you drag to show where the dragged element will be positioned if you drop it right now) with an sv-placeholder attribute on whatever element is your placeholder. And finally, you can optionally specify an sv-helper attribute on some element to make that element the one that gets dragged. (So if the thing you want the user to see while dragging needs to be different from the thing they see inside the list, that's how you do it).
Oh, and both the sv-placeholder and sv-helper attributes can go either on elements outside the ng-repeat, in which case the same element will be used for every drag situation (use this, for example, if you want a blank gray box as a placeholder the way Trello does it when you drag cards around) -- or those attributes can go on elements inside the ng-repeat, in which case you have access to the local scope of that particular ng-repeat element (use this, for example, if you want your placeholder to be "the text of what I'm dragging around, with opacity 50%, and a dashed border around it").
The demos linked from the https://github.com/kamilkp/angular-sortable-view repo demostrate the usage pretty well, so rather than say more about it I'll just let you poke around in the demos. My personal experience so far has been very favorable.
Oh, and it has no dependencies other than Angular. No jQuery or anything else required.
Just trying to get my head around Adobe Edge. What I want to achieve sounds simple but having real trouble. I have a button element, that when mouseover, displays an animated symbol I have.
Currently my code,on the button is Mouseout:
sym.$("pgicatext2").hide();
and mouseover:
sym.$("pgicatext2").show();
This doesn't seem to be working. I can achieve the result if, I turn off the movie symbol, and use this code on the button
sym.$("pgicatext2").toggle();
The trouble is of course it doesn't replay the animation every time you mouse over, and all the while it's hidden it's playing the animation.
I see its been a month since you posted this. Hopefully you solved your issue. Your code for hiding and showing looks right. One thing I have had happen in some of my projects is that I inadvertently placed an object or symbol with 0% opacity on top of a button or something I had a mouse over event. Make sure that the button you have does not have anything layered on top of it. Another thing would be to turn off autoplay of your symbol, and add sym.$("pgicatext2").play(); into your mouse over. I know those are pretty obvious answers, but sometimes it is easy to forget the obvious.
Please get through following steps:
Check if the button is over all other visible layers ('Elements'
tab). Maybe setting cursor to 'pointer' will help to check it.
Use 'Mouseenter' and 'Mouseleave' instead of 'Mouseover' and
'Mouseout'. The difference is explained here.
Make sure that your animated symbols 'autoplay' option is off. If
you did not tick it off while creating the symbol, just set Playback
to 'Stop' on Stage at the very beginning of the timeline
Lets do some coding. Lets assume that your animated symbols name is
"film". You need to set following actions to your button element:
Mouseenter:
sym.$("film").show();
sym.getSymbol("film").play();
this basically shows up your 'film' element and plays 'film' symbol
Mouseleave:
sym.$("film").hide();
sym.getSymbol("film").stop(0);
this one hides your 'film' element and stops 'film' symbol at the beginning of animation (0ms)
Enjoy!
Inside a MFC dialog, I have 2 overlapping rows of text boxes (what user can see is only one row). when I clicked a button, i shifted down the row at bottom, so now user can see both rows.
The problem is if I have some data loaded in DoDataExchange() for the text boxes, I wouldn't be able to see them showing when the dialog boots up. But when I click inside the text box, the data shows.
I want to know what exactly happen when I clicked a UI? What drawing functions are invoked at backgrounds? So I can fix my problem.
Thank you.
ZQ
Nothing is drawn when you click, maybe you are seeing an Invalidate() being triggered for some reason that redraws the text boxes. Or maybe the parent control (dialog, I assume) doesn't have WS_CLIPCHILDREN set, or some other funny things are happening with the WS_CLIPXXX flags (they're somewhat of a black art).
More to the point, use Spy++ to check what 'happens' when you click - i.e. the messages that are posted at each point in time.