I have a page that contains an area about halfway down the page that filters properties (custom post type) by Price, Bedrooms, and Sq Ft. The filter works fine, however upon filtering the properties (by clicking any of the filters), the page refreshes back to the top of the page, causing the user to have to scroll down the page to see the filtered results. I am wondering how I would go about attaching an anchor to those links so the page refreshes to the filtered posts area of that page so the user does not have to scroll down again. Would this be done by firing an event via JS or how exactly would this be done?
Ive attached my link below. All and any insight is much appreciated!
Scroll down to "View Quick Move in Homes" to view properties and filters - http://www.daybreakutah.com/find-a-home/
1) Give an id to the tag you want to scroll down to:
<h2 id="filter1">
2) In your hrefs, add #filter1 (or whatever you called it) to the end of the URL:
<a href="http://www.daybreakutah.com/find-a-home/#filter1">
Related
We have a website product that allows users to search rental inventory, view results and then click through to a details page.
On the results page, we also allow users the option to refine their search via bedrooms, bathrooms, price, etc. When the form changes, we do not reload the page, we use Ajax to run a new search query and load the new results into the container.
For example, when the user first did a search, they got back 100 properties. Then they refine their search for 3 bed, 5 bathrooms, view = oceanfront and they get back 10 properties. Once the user finds a property they like, they typically click through to the details page. But, let's say they change their mind and click the browser 'back button'.
When that happens, all of our search params that were loaded via Ajax are now gone and our property count is back to 100 instead of 10.
So what I have realized is any data loaded via Ajax is not being cached in the browser so the original search is loaded not the refined search.
After doing some research, I think using history.pushState() and history.popstate() might be the solution but I'm having trouble wrapping my head around how to implement it for our problem.
Is there a better solution? If not, will history.pushState() work?
I have a C#.NET MVC3 web app. I have a View that has a List of Models. This list can be long, requiring the user to scroll down on the View. When selecting one of the models in the View to Edit, the user is taken to the Edit View. After submitting the Edit View, the user is redirected back to the List View. However, the List View is now displaying back at the top of the list. How can I redirect the user back to the same position in the List View where they clicked the Edit button?
You would probably be better suited using a modal popup dialog to edit the data, rather than navigating to another page.
While it's possible to do what you want, it's a pain. You would have to get the scroll location via javascript, save it to a hidden field, post that to your edit page, along with record number and anything else, then re-post it back to your original page when you return, then read the post value and scroll to it via javascript.
All that is avoided if you just use a modal edit dialog, then when the dialog goes away the page is still in the same place.
I want to maintain the Scroll Position between two pages. I have a Page A which has many reports, when user clicks a report, user will be redirected to Page B where the report will be opened to make the changes. After submitting changes, user will be redirected to Page A. Here the problem is, showing the top of the page but I want to show the page at the previous position.
I have tried using this.MaintainScrollPositionOnPostBack = true; but this is working only on the same page but not between the different pages.
I really need to fix this, please give me your thoughts...
The simplest thing to do is probably give every link/report on page A an anchor.
So, for each report you would hide an id attribute somewhere - say the title, so it would be something like <h3 id="report42">Report 42</h3>. Then when you go back from page B, instead of going to www.example.com/pageA.html, you go to www.example.com/pageA.html#report42. This will open the page with the scrollbar at wherever the report42 id is found.
I load a div using ajax:
$("#contentdiv").load('MyPage.php');
This is a "modal" div that shows details related to a picture the user clicks on.
The clickable pictures form a long list down my page.
I would like to have this modal div appearing on the position (have the same top value so to speak!!) of the picture that was clicked. Therefore the use does not need to scroll back to his/her picture of interest when the information div is hidden (closed!)
Any help is very much appreciated.
Thank you,
Carly
If you use the Modal dialog available in the JQueryUI package it should automatically do this for you.
I've been trying to figure this out over several questions here on SO, finding out the different parts and then assembling them, but now I'm giving up.
What I'm trying do do:
The user is on a page, clicks a button and a list of content loads into a div using jQuerys .ajax. When he or she scrolls to the bottom of the div, load more content. As seen on Twitter, but this is inside a div.
I've seen examples on how to have infinite loading in scroll, but the problem is that those examples reload the entire page (it seems)
Has anyone got any idea how I can accomplish this?
As said, I cannot accomplish this using normal means.
The page is build as:
Page 1, has a div, empty until the user clicks a button.
Page 2 loads a lot of content. When the user clicks on the button on page 1, this is loaded into the div.
When the user scrolls through the div (It has overflow set to auto) and ends at the bottom of the div it should load the next page or so to speak.
Thanks in advance! :)
There are some plugins which do this for you quite well.
http://www.webdeveloperjuice.com/2010/02/24/create-infinte-scroll-effect-using-jquery-with-demo/
http://www.beyondcoding.com/2009/01/15/release-jquery-plugin-endless-scroll/
EDIT: Some more up to date plugins:
https://github.com/fredwu/jquery-endless-scroll
http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
Use the JQuery.load() method to grab some html content and then insert it into an html element.
If you're using Paul Irish's Infinite Scroll, you can just specify a binder as one of the arguments where you have implemented infinite scroll, just like this:
$('.mydiv').infinitescroll({
binder: $(".name-of-div")
The binder is set to the document window by default, but if you specify it, you can have infinite scroll running simply inside one div on your page