I'm having an issue with the Magellan sticky nav in Zurb Foundation. I have a form where users can add as many elements as they need to, which increases the HTML and div heights. The sticky nav works fine until content is added to the page, at which point the sticky nav will stop being sticky at the original page height (it thinks it's hitting the footer/bottom). If I resize the browser after adding content the sticky nav will snap back into place and use the new heights to determine when to stop. Is there a way I can trigger this so that when new content is added to the page the sticky nav will adjust to the new heights?
Example
Here is the nav (both left and right) sticking properly.
After I add a "Performance of Understanding" and thus increase the div/page height, the nav does not stick anymore when scrolling and instead stops where the footer/bottom used to be since it is not working on an updated page height.
I ended up solving this issue using the following code anytime an element was added to my page:
$(".sticky").foundation("_calc", true);
This recalculates all scrolling points for all sticky elements in your page.
Via comments here
Related
I tried following things to Remove Scroll bar ( because I need to get full content height)? There is an option called pageView='fitToWidth' to set full width (https://github.com/Pawani-DeSilva/powerbi-report-component/commit/238e91cfa0730fd9c3f5f7588a363aa6b31956bc) . It works as expected. My issue is related to height.
This is my learning
I cannot directly use https://github.com/microsoft/PowerBI-JavaScript) creates iFrame using javascript.
https://github.com/microsoft/PowerBI-JavaScript/blob/master/src/dashboard.ts#L51
browsers don't allow us to access DOM content of cross-domain iframe. Without accessing the DOM, I cannot get the content height. https://stackoverflow.com/a/6170976
PowerBI does not have a proper solution to set content height. They have only fit to width.
https://community.powerbi.com/t5/Service/iframe-scaling-issue/td-p/219827
https://community.powerbi.com/t5/Report-Server/Turn-off-Horizontal-and-Vertical-scroll-bars-with-Filter-Pane/m-p/832461 (edited)
If you set View => "Fit to Page" in Power BI Desktop or in Power BI portal then scroll bar will not appear.
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.
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.
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.