I am using an image slideshow with thumbnails that I found online at the below website. Does anyone know how I would change this slideshow so that the thumbnails are listed to the right hand side of the slideshow instead of listed below it. If you go to the below link then click on view demo you can see how my slideshow currently works. I'm sure it's probably a change in either the javascript or the css I have tried a bunch of changes but I still can't get the images to show in a column on the right hand side. Any help would be much appreciated.
http://davidwalsh.name/slideshow-thumbnails-captions
I've just made a fiddle example on how you could set your slideshow HTML+CSS. JS is the same and it doesn't change!
Check it out http://jsfiddle.net/steweb/KKVxC/
Related
I have a page which contains user controls with Telerik Charts (grids also, but they work fine). From this page, the user can click on a button to be redirected to a "Printer-Friendly Version" type page, which opens a new window via javascript and goes through a slightly different view (for formatting and stuff), but the telerik code is all the same.
The problem is, my Chart displays just fine in the original window, but the new window displays basically an empty chart with no data. This bug is only present in IE, and only applies to Charts. Grids work fine, for whatever reason. I'm thinking this is due to differences in script caching between browsers -- correct me if I'm wrong, I'm semi-new to client-directed web development.
Anyway I read somewhere that Telerik has issues with loading data and/or js files when loaded via ajax, so maybe that's the problem? If so, how could I get around this? And if not, any ideas on what could be causing this issue? It's causing me a great deal of frustration, since a print preview page seems like it should be the easiest of jobs.
Edit:
The charts are being rendered as html (if somebody can explain how to render them as images, that would be awesome). And dev tools shows basically the same thing between chrome and IE. Whenever my web service goes back up ill WinMerge them and look for any peculiarities/differences between them. In the mean time, though, the "render as an image" concept sounds promising. That way I could just save the image from the first page, and insert it right into the print preview page, right?. And since it's a print-preview page, it's not going to need to be interactive or anything, so that'd work out nicely.
Another (important) Edit:
These are probably the culprit...
And here is a little more detail on that:
And here is a side-by-side of it working(in chrome) and not working (in IE):
Have you considered using a print-specific stylesheet instead, e.g.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
In which you specify the styling to apply when printing.
That way, you avoid reloading the page (duplicate database hits, etc.) and don't need to delve into the AJAX of Telerik's controls.
EDIT:
Regarding using an image rather than HTML, first make sure you won't lose any features/detail, then check out the .Save() method of the RadChart control. You could either save it to a memory stream, or if you want to re-use the image save it to a directory on the webserver and clean it up periodically. That way, you can just point your print version to the image and not re-generate it.
This Telerik forum post may be of use.
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 recently developed a site but I am having some troubles with displaying a particular JQuery Carousel on Safari be it on the PC or iPhone. Displaying on IE or Firefox has no problem. The issue arise when I refresh that particular page, the JQuery becomes distorted, the image is sliced and buttons gone. I would really like to show some code but I am not sure where to pinpoint the problem.
This is the page:
http://clotheher.com.microsoft2008hosting.com/ProductDetails.aspx?ProductId=2&&CategoryId=1
On the bottom right side is the carousel. Anyone experiences such problem or understand this behavior please kindly let me know. Thanks.
This doesn't appear to be jQuery, but rather CSS.
div.caroufredsel_wrapper and ul#foo2 both have specified heights which are causing the images/buttons to cutoff.
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.
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.