I have a page where I've added anchor IDs at various points, and at the top of the page I created links to jump to the IDs. When I first load the page the link doesn't work, and I've determined that it's because it hasn't loaded the portion of the page that contains the section ID that it should jump to. Only after I manually scroll through the portion of the page with the ID and then scroll back to the top does the link work properly.
Is there a way to either force the page to be loaded in its entirety (not just the initially visible region of the screen) when it is first opened, so that it recognizes the IDs without needing to physically scroll to them first? Alternatively, is there a better way to handle this? I'd just like to be able to skip to the ID tags as soon as the page is loaded.
Thanks in advance for any help with this.
Related
I have a redirect_to and need the user to be placed at the specific anchor (can do that much), but with the collapsed portion of the page already opened up.
I tried
giving an element inside the collapsable portion an id, then redirecting to that id using anchor, but that doesn't open the collapsed portion of the page, so the user doesn't see what they're supposed to, and they may get confused
Running some javascript after the redirect, but it may not be possible
How can this be achieved?
I solved this by using a session variable (e.g. collapse = 'show'), accessing that in the view to append that value to the bootstrap collapse class so it looks like this when it should be collapsed collapse, and it should look like this when it should load the page not collapsed collapse show
This approach could be better if using query params for the action being redirected to (either way will work, but the second method won't clutter the user's session)
I've had some testers reporting an intermittent issue on a search page that contains a list.
They say when they have been on the page and navigate to a sub page then return that the list is sometimes scrolled all the way to the bottom of the screen.
I've disabled tensile drag on the list, but I wanted to know if there was any other work-around for this issue?
This has nothing to do with tensile drag. When you navigate from one form to another in the old GUI builder the form is re-created from scratch and re-positioned based on the data.
We try to select the previously selected item but if something in the list changed this might trigger issues.
You can override restoreComponentState in the state machine with a blank implementation to see that this is the cause of this behavior. Assuming that it is you can create a special case for the list instance.
Looked many things up, but never posted before. Here's my situation. Any help would be most appreciated.
I've got a wizard with numerous screens with an associated navigation bar made using CSS. As users click from screen to screen, the navigation reflects the current wizard page the user is on. Each screen has different inputs to be collected. Database reads and writes are required during the render and submission of each page.
Here's the catch. Not every page is required. Only required pages are displayed in the navigation and the required information is stored in the database.
My goal is to reduce the number of database queries by dividing the navigation and remaining input into two separate partials. This way I don't have to render the navigation between each screen eliminating the single query every time between screens.
How would I submit the form of the current screen, render the partial view of the next screen, and yet update the query string to reflect the current partial view as well? This way if the user refreshes the page, they get the current screen.
Sounds like pre-optimization. How do you know you're going to have a problem with your navigation because of the database?
Why not separate out your navigation and output cache it?
If you bound determined to change the url without changing the content you need to use History API and if you need a fall back for browsers that don't support that you can use history.js.
I have set up a one-page, horizontal scrolling website with several anchors combined with DIV-id's. The website has five pages side-by-side that automatically render full-page based on the visitors browser-window.
The menu contains seven hyperlinks that address different anchors (div-id's) on the page (for example: http://www.url.com/#partsix). When they are clicked, the visitor will automatically be scrolled to the anchor part of the page. This works fine and really smooth.
The problem i'm dealing with is that, since the page is not being reloaded, the address-bar is not updated. So if a visitor wants to link to a page, or, for example, like the URL with a facebook button, it will be very difficult.
Is there a way to rewrite the address bar with the anchorlink without reloading the page?
EDIT: I have found out that i can user the action onclick="window.location.hash = hash;" on the hyperlinks. This will return the hash of the anchor it is scrolling to in the address bar. Works like a charm. But: my menu plugin does not let me add this action to the hyperlinks. So i wanted to check if i can use javascript to apply this action to all hyperlinks in the same li class. Does anyone know how?
The li class that contains all menu links is 'mc_menu mc_depth_2'
I'm having an issue whereby I navigate around my site but when I return to the first (initial) page of the website, the DOM doubles up. I.E there are two div data-role pages with the same ID.
It's because as you navigate around your site, for some reason, JQM always keeps the first initial page in the DOM, but then when you return to it, it doubles up (and consequently your handlers on elements don't work because they are inside the hidden data-role="page" element and the new ones have no handlers..
Have I done something wrong here or is this a common problem one needs to work around in JQM? Thanks
I also don't understand why JQM holds onto the initial page... I thoguht it was supposed to hold on to the last
Please look at this issue: https://github.com/jquery/jquery-mobile/issues/2258
The first page will never be removed
So use
a href='#id' // jump to #id, which is already in DOM
but NOT
a href='index.html#id' // jump to 'create' a new one