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.
Related
My page is: https://www.svelysium.net/ And one can see the menu as a list flash first then display correctly. I'm testing visibility:none in the CSS for the div and then wanting to do an onload later for the visibility after the page loads so I don't get that menu flash. I've not put it up live because I can't seem to get it right. Sorry I can't find any examples of this issue and how to solve it and I have been trying to keep it simple. There must be an easy fix. Thanks in advance.
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's my use case:
I'd like to display the information about something first using django_tables2, with a button on the top right corner called "Edit", once a user hits "Edit", at the bottom of the table, display a button called "Add New Record", and once the user clicks that button, a bunch of input fields pop up to let users enter values for each field, also the user could continue to click "Add new Record" to keep adding new.
How can I achieve this in Django?
I've read a lot of examples on stackoverflow but didn't find anything tailored to this particular case.
Thanks a lot.
Let's dive right into listing out what you want to do and the requirements you'll need to do so.
You basically want to toggle hiding and showing some functionality for this web page. This is easily accomplished by including the "Edit" button, "Add New Record" button, and popup (most likely in its own <div> somewhere in the page). So the "Edit" button will have the display set to something, be it inline, block, etc., while the "Add New Record" and popup would have a display of "none" or however it is you wish to hide it.
You've got the stuff set up and ready to go but now you need to show it when you click the "Edit" button. This is generally accomplished through Javascript. Just find the "Add New Record" button and switch the visibility.
When you click on the "Add" button you want to display a popup. This can be done in a variety of ways with different libraries. One of my personal favorites is using jquery's blockUI. Why? It doesn't allow the user to click anywhere except in the popup so it's a quick way to handle users trying to reach outside the scope of the popup.
So you've got all the new rows added and you are done editing. Maybe you have a "Save" button or something like that where you can click. When you do, you'll want to push all those new rows you just added to the database. Django handles this well and you could do something like include the new rows in part of the POST request or however you care to implement this solution.
So there's a bit of work ahead of you to get this page up and running with the exact functionality you need but hopefully this starts steering you in the right direction of where you need to go.
I'm working on an application that has a listing of events and each event has its own detailed show page. Everything seems fine, but one complaint I've received is that we're not maintaining the scroll position when going from the detail page back to the index listing.
For an example of the ideal behavior, go to http://discuss.emberjs.com/, scroll down the page a ways, click a link, then click the back button. You're brought to same place you were previously at, somewhere further down the page.
With our app, if you try to do this, you're brought back to the top of the page while the results are reloaded from the API. Then when the results load, your position is lost.
Is there a way to achieve what Discourse does while using query params?
I am pretty new to Infragistics controls and finding it hard to add a hyperlink column to the ultraweb grid. Can anyone help me out with this.
Currently, I am binding the data coming from the Database to the grid.
To this data I need to add a hyperlink column "View" that will redirect me to a popup.
I need to pass some values from this page to the popup.
Need pointers if this can be done on Javascript.
I am unable to get the code anywhere.
It would be really helpful if someone can help me out
Regards,
Sunitha
If you know HTML it is actually pretty simple to do. On the Initialize RowLayout method of the UltraGrid and reference the cell you want the hyperlink to go into and within the text property place the link there using HTML and include parameters within the HTML to pass to the popup.
If you are using a fairly recent version of Infragistics, they have a Modal Popup window that you can use which is fairly easy to integrate and use, and with this you do not need a javascript popup. You can use the ClientSideEvent BeforeSelectChangeHandler to open the Modal popup and pass values into there by referring to other cells within the row.