If you goto the netflix site and hover over a movie http://www.netflix.com/BrowseSelection
You get a nice popup box that displays the movie info in it. My guess is this is done somehow with jquery and ajax. Does anyone know where I can find a code example of this functionaliity? Basically I want a nice popup and when the user hovers over a picture I query a database for info to fill the popup with.
I still need an example that kinda shows ajax calls and how they work.I am using .net, do I create a function in the code behind that accepts a querystring and returns data from the database, then call it though the ajax get method? I dont have a good understanding how to set all of this up?
Where do I get the fancy popup look?
Also, when I hover over a picture how can I come up with a way to get an id off that picture on a hover to send to the function that is gonna get the info about that picture from the db??
View the source on the site. Use a nifty tool like FireBug in FireFox to look at all the .js and .css files that go with it. The Netflix site is your code sample.
Related
What I need is to open a web page with a link fill some textbox with my data, click in any button and then read the data of the page in C#.
For example :
Open (www.google.es) then fill the search box with "stackOverFlow", click on the search button and then read the results.
I've been looking and I think I can read the data with HttpClient but I have no clue about how to proceed with the other part.
Edit: Actually using a .net Framework console aplicattion but I can change this to an MVC app or a Winform app
You should be able to type input by calling script:
document.getElementById("Input").value = "My value";
and then post it by calling script from question below or simulate button clink (if you are not sure that button do post)
JavaScript post request like a form submit
Simulating Button click in javascript
If you are trying to create a custom search and show result in your own application, you will need to find the implementation of rest API of that search provider. To get started, luckily google provides that.
follow the link to get started:
https://developers.google.com/custom-search/v1/overview
I tired to make a auto test program which can auto fill/click another webpage based application.
Want my software can eumerate the manually action, ex. click the items, fill the text box...
Now, I can load the page in C# WPF's webbrowser, but didn't know how to auto fill the javascript popup window. we cann't get the elements through funcs like GetElementId(); becasue the page seems written by javascripts.
I'm really a newer on C# and Web.Welcome everyone give comments. Many thanks!
This is the webpage I want to test:
This is the source html I got via IE->View->Source:
I am working on an ASP.NET/C# application,
I am looking for the best way to do the following. (Note: I don't need you to tell me how to do it, just if you can point me to the right direction to look)
in my main page I have a button. When the user clicks it,I want to open popup open containing a map. the user can click on counties to highlight them and then click on submit. I want to be able to know which countries the user has clicked on in my main page (maybe save it in a array or string or anything)
What is the best way to do this? Should I use flash?
I know this is not a problem/solution type of question, but if someone can point me in the right direction I would very much appreciate it. Just some ideas and I will do the researches.
Thank you very much for any inputs or comments
And sorry for not being a specific problem question.
For the pop-up you can use a dialog (a "modal" HTML form like what you find in jQuery UI or similar). If you're using plain "old" ASP.NET you may need some trick if you want to use forms but they works well.
If what you want to provide is a selection from a map you do not need Flash (at least I wouldn't use it for such simple task, I'm not a fun of that kind of extensions). An image map can work well and it's more portable. If you want you may use HTML5 features to provide better experience for users with a compatible browser. I do not remember the link but I saw a very nice example of this using plain HTML (4) and JavaScript. Using a low-res image as base for the map, small images as checks applied on top of it and div tooltips for details (it supported a zoom-on-click feature too to enlarge a portion of the map loading a higher resolution version). I guess I wrote somewhere that URL...
Links
Nice article: http://www.workwithchoicecuts.com/methodology/revisiting-the-html-image-map/
For image maps basics: http://www.javascriptkit.com/howto/imagemap.shtml
Image map builder: http://www.image-maps.com/
jQuery plug-in for selection from maps: https://github.com/jquery/plugins.jquery.com
I'm building a few webpages in my webapplication which use a webservice.
While communicating with the webservice, which can take more than a few seconds, I want to display a loading screen. Something like the jquery dialog, where the background is disabled and a loading image appears in the middel of the webpage.
Is this possible and how can I do this?
I use blockUI plugin for such requirement. Its pretty simple and straight forward to use. For example:
$.blockUI({ message: '<h2>Loading</h2>' });
// call to the web service
And in success and failure callbacks of ajax request, include call to unblock
$.unblockUI();
Take a look at the jqModal jQuery plugin - i use this extensively, for example when performing a single-sign-on with Facebook, i show a pretty "Connecting with Facebook" dialog (background is blanked out). very easy to use, and very extensible.
It's basically a hidden div on the page (absolute positioning), which gets shown and centered (and of course other cool effects, such as fading).
So you have full customization of this div - put an image, put an iframe, put a user control.
And it fully supports AJAX - so you can call your WS on load of this modal dialog to load the contents in.
Of course you could roll your own (old school popup, or overlayed image with appropriate z-index), but no point in re-inventing the wheel - especially when there are bucketloads of great solutions available.
So i created a web site a long time ago using a designer alot like frontpage + expression design put together, and since then Ive gotten more into coding, and I'm learning html, CSS, and all that good stuff.. and i have this re-designed header that Ive made here:
http://prntscr.com/8zct
So what I need to know, is how i can get it so that when a user clicks on one of the links in the header design it will redirect to a page. and also if possible, how to make it so when a user hovers over a link a drop down may appear with other options, EDIT: I'd like to be able to add a backround image to the drop down navigation menu
As me being quite new to this sort of stuff, could anybody help me achieve this?
PS. I'm working in Visual Studio with ASP. but that doesn't change anything about the html and css stuff. just letting you guys know.
To navigate based on clicks on certain areas of an image, read about image maps.
To create menus and other active components, read about JavaScript (also recommended: jQuery).
You can also create divs that are clickable to use as hot spots on an image. that way you could add a background image to that div if ti's hovered/clicked, whereas image maps does not afford you that opportunity.