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.
Related
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">
I know there is ways to change DIV content within a single page. Using Ajax for example to dynamically get div content from an external .html file and then replace Div content using load or get functions.
However, is there a way to do this on a different page?
For example, say there is 2 pages. One.html, and Two.html.
I want a button on the first page (One.html), that when clicked, will change DIV content (by default the div box is empty, I want the button to insert text into the box basically) for a specific DIV Id on page 2 (Two.html).
So the process is basically: Click button on One.html, some function gets div content from external html (Three.html for example), and the uses that content to update an empty div on Two.html. Also, I would like to load some basic CSS in a similar fashion. Not only insert text into the box, but also change the background color and text color.
Thank You!
You just store the info and send it to the next page, say, with the HTTP request and submit methods get and post.
http://www.w3schools.com/tags/ref_httpmethods.asp
I have a MVC 4 project I am currently working on and need some advice on how to implement modal popups, preferably in jQuery.
For instance, on my view I have a zip code text box, with a lookup button next to it. The user can enter in the zip code directly, or click the lookup button. If the user clicks the button, I want to have a modal popup where the user can enter in a city and state and get a list of zip codes, select one, and then have that value posted to the zip code box on the original form.
This is just one example, I have more on that view, but this is the easiest to explain.
Anyone have any tips, links, or example code?
Thanks in advance on any help.
how to implement modal popups, preferably in jQuery.
Generally jQuery dialog with modal : true and handled beforeClose is what you want
$(foo).dialog({
modal: true,
beforeClose: function(event, ui) { ... }
})
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
I want a modal popup effect to display dynamic content on a single page. I'm working with Telerik controls. Telerik has a control called RadWindow which is more or less a modal window.
It looks like the only content that is to be displayed in RadWindow is the content of a page that is specified in NavigateURL. That is a problem for me because what I want to display is the dynamic content that I show on the same page.
Is it possible to display content that is on the same page using RadWindow?
The RadWindow is an iframe. It has to have a separate page to render, unless you use the clientside radalert and radconfirm methods--you can pass in HTML for an alert or confirm dialog that doesn't require a separate page. That doesn't sound like what you want. Consider using the RadToolTip or the AjaxToolkit ModalPopupExtender instead.
RadDock does what RadWindow does. Only, it takes input from the current page instead of from an external URL.
For some time, RadWindow can display content from the main page as well. Here is a link to the demo:
http://demos.telerik.com/aspnet-ajax/window/examples/internalcontent/defaultcs.aspx