I am having trouble stopping the first scrolling once the page loads. You can see it here http://foundation.zurb.com/docs/components/joyride.html . After loading the website, joyride window scrolls automatically page littlebit lower
See it better in the old demo http://zurb.com/playground/jquery-joyride-feature-tour-plugin
I need the website to load normally (with top bar) and then activate scrolling after "next" button is clicked.
I am using latest version of Foundation 4 and foundation.min
Currently I am trying the docs page and it does not scroll, so either they fixed it or it was not a problem at all initially.
http://foundation.zurb.com/docs/components/joyride.html
Either ways, I see the best solution for you is to have the first step way above in the page, so that even when it takes focus, there's no page scrolling needed.
Related
I'd like to automate a video-player on a webpage using Selenium in Python.
I cannot locate the interactive parts of the player with driver.find_element_by_... I've decided to try and accomplish this by making browser specific logic that knows how to navigate the page and player via keyboard navigation (count tabs for Chrome, vs Safari, vs Firefox, etc.).
driver.find_element_by_tag_name('body').send_keys(Keys.TAB))
I am able to select each of the controls of the player with tab (play/pause, current position, mute-volume control, full-screen, and additional options) and have had moderate success manipulating the player's controls with ActionChains once selected with TAB navigation
actions = ActionChains(driver)
actions.send_keys(Keys.DOWN) # to reduce volume or
actions.send_keys(Keys.LEFT) # to rewind playback
An example of something that doesn't work as expected with this method is sending a Key.SPACE to the MUTE button when selected. Instead the space is applied as a page navigation action and scrolls down the page like pressing page down. I'm looking for a method that either makes the controls work as expected when manually navigating the page with a keyboard, ex. space on highlighted object interacts and would normally mute the video in this context, or a workaround that lets me accomplish the same thing. To that end I was thinking if I could get the windows coordinates of the TAB selected object within the video-player and simply perform a click that would at least let me interact with the control.
Also if I'm going about this all the wrong way let me know. Thanks!
What you're really looking for is how to navigate the Shadow DOM. Those are the web elements inside the video player.
I answered how to reach inside the Shadow DOM in an other question, albeit for Java. However the principle is the same.
You can read the whole thing at the link, but the basics are you create a "starting point" WebElement at the Shadow DOM via JavaScript, then all future look-ups reference it:
WebElement button = startingPoint.findElement(By.cssSelector("..."));
Here is the screenshot
I have a 500x400 iframe that hosts my page with a few Foundation dropdown controls, I found in this size no matter how I specify "align:xxx" value in the code, Foundation always renders the dropdown layer as align:bottom which is undesirable. I need "align:xxx" to work no matter what the containing page size is. How do I do that? Hacks or workarounds can do too.
I tried to increase my iframe to 1000x400 and the dropdown renders normally.
If there's an option that I could force align of a dropdown other than align:xxx please point out.
It's because it's in an iframe that is smaller than the medium media query. The default behavior for the small breakpoint is to be 100% width. You may need JS to override this for your use case.
Is there a way in Ionic 2 to be able to transition between pages as if we were in a Slides component? Meaning that as soon as I start swiping a little left or right I start seeing a piece of the next or previous page? If I continue swiping then I transition to the next/previous page, else I go back to seeing only my current page.
It's like having a dynamic slides component, where ion-slide are automatically added. A little bit like the way the infinite scroll works, we could have 2 to 3 ion-slide in the DOM and they'd be reused as we move forward/backward.
This feature will be available in beta 7 (we are in beta 6) for tabs in material design. The option to swipe back in the pages stack is already available but you must be running on a device to see it in action. Check out the Ionic2 road map to see whats up and coming: https://docs.google.com/document/d/1Qlc5X2eJyOB0izkFlH7KJ5BmMi0MeXUZRHJHt3hS6Wo/edit
How can I disable the Previous button on the first slide and Next button on the last slide in jQuery Cycle2 Malsup plugin?
I know this question has been answered before for the Cycle "1" plugin (and that it's posted as a demo on malsup's page). But how do I go about implementing it for the Cycle 2 version? I can't seem to find a simple answer anywhere and I'm pathetically too newbie in Javascript to understand the Cycle 2 API page. Could someone help me by showing me a fiddle?
This is actually done automatically if you set the data-cycle-allow-wrap option set to false in the cycle HTML. It will add the class disabled to the prev/next control if it is at the beginning/end of the slideshow. Then you just use CSS to style it so it hidden, or grayed out. No extra Javascript needed.
Here is a fiddle example: http://jsfiddle.net/X3kYY/
I have a list of links within a div with a scrollbar. When the user clicks on a link below the x-height of the div, the srollbar automatically goes back to the top. I would like the scrollbar to stay in position no matter what links the user clicks. Here is the site- try clicking on a painting from 2006 and you'll see what I mean.
Does anyone have any ideas of how I can make this scrollbar behave?
Thanks,
Brad
It looks like these links are just that, links to a new page... and thus it's not so much that the scrollbar is resetting but that a whole brand new page is coming up and the 'reset' scrollbar is just a byproduct.
The most elegant way would be to have those links pull in the new content without reloading the page, but this requires AJAX. If you aren't familiar with the intricacies of AJAX and how to implement that, then you could change the link to include an anchor to the link, like so:
http://siddharthparasnis.com/2006-01/#menu-item-377
The page would reload scrolled down to that item.