I have to build a site like France24.com, There is a navigation on the left and two arrows on sides for scrolling to the sides. when you click on the arrows or one of navigation items , the related page (preloads) and appears without refreshing the page. How to do that? Is there any usable framework or sample for this?
Regards
After looking at the website, I see what you are trying to do. I see a way to do this, which is through a simple JQuery method load() ( http://api.jquery.com/load/ ). This behaves like get(), so on clicking the arrow, an event could be triggered where you can load another piece of HTML code in place of the one the user is currently looking at.
If you need dynamic content to load instead of a simple static HTML code, it's possible to achieve that by filling in the dynamic part into the HTML code that you want to load before actually loading it. A library that you can use to achieve something like this is React js, developed by FB. Good luck!
Related
I need suggestions in building below UI. It's a carousel like structure where active over is highlighted in green and we can still see next overs disabled or gray color.
I have researched for this for ex. Can I make use of any carousel to fit this design but can't seem to come to any conclusion. Thought of slider also but did not see that fitting this design.
Guys, do you have any suggestion or pointers to get me started here. I do not need code; just want a startup point. So far I am stuck with carousel or slider.
I understand this might not be most constructive question on SO but any pointers will be highly appreciated.
Unfortunately, you didn't provide any information about what should happen when you click on these items. If I understand correctly, you are looking for a carousel supporting your own pager design. If this is correct, you must add the pager markup first, after that you can use any carousel that supports slide switching methods. Then you can add click event listener to your pager items and call switching method in the listener, setting by that a new slide corresponding to the pager element index.
For example, you can try slick carousel, as it has .slickGoTo() method, which you can use to switch slides programmatically. You can also try to customize slick's default pager, but it might be not so easy or even impossible at all.
I have a meteor query that returns a cursor with images data. I use bootstrap to arrange the images to display responsively. When each image is clicked I'd like a bootstrap modal to display/appear right above the clicked image. Is this possible? Any one care to demonstrate how to archive this?
It is possible. Easiest way is to use this package You can then proceed to create a modal, just like any other template and call Modal.show("myAwesomeModal"); from the click event of the image.
I could explain with some code, if you think you're stuck. But for the most part, the documentaion of the package will help.
I am trying to set up functionality similar to Netflix. Where if you mouseover a movie - you are presented with a window of movie details (all client-side).
At high level, can someone in this forum help by telling me how this should be implemented? I.E., one or more .aspx pages, what would go in code-behind, and .js file, css, etc. Just trying to get an idea on how this would be set up to work.
Basically, when I hover over an item, I need to query for details that belongs for that record being moused-over and display it in the window or div. I also need to have some functionality in that window (i.e. a textbox and button which will end up needing to get saved in a database).
Thanks for any tips and suggestions -
You would want to add an AJAX call to the hover event of the image, that pulls from a webservice/web method.
Here is a good example, you would change some things. However, it should get you started.
http://www.mikesdotnetting.com/Article/96/Handling-JSON-Arrays-returned-from-ASP.NET-Web-Services-with-jQuery
If I understood your question correctly, you should try this excelent jQuery plugin:
http://www.sohtanaka.com/web-design/css-on-hover-image-captions/
Look at the demo here:
http://www.sohtanaka.com/web-design/examples/image-hover/
easy to install and configure and very slick!
Good luck
EDIT: sorry wrong lik the first time
There are certainly many jQuery plugins that will do this for you. jQuery UI may also be of benefit.
Here is one that appears to do something like you are describing:
http://plugins.jquery.com/project/VisualLightbox
I have one web page in ASP.NET and I want that page to be disabled until the whole page loading process gets completed.
One way is to activate a lightbox without content that will dim the whole page and then on the body onload event hide that lightbox.
Lightbox is a like having a modal window above the original window, and is used to preview pictures and other content. It could easy be modified to do what you want. Just activate a lightbox with no content and then hide the lightbox when the document is loaded.
This is a strange requirement and I would be interested in finding out your reason for doing this. Is there a problem or error that is ocurring. Perhaps you think the best way to prevent the error is to freeze the UI until the page loads.
I think that you should edit your question and describe what the underlying issue is. There might be a better way to improve your page.
I've seen this done with a simple overlay before.
Basically an iframe and a div that covers the page and has a high z-index is output at the beginning of page render. This is styled so it greys the page out and it also makes everything non-clickable. Then, once the page is loaded, a simple bit of javascript can be used to remove the div and iframe (or just set their styles to make them disappear).
I've also seen people attempt this issue by manually iterating over all controls on the page in JavaScript and disabling them. This is a horrible way to attempt it :)
The jQuery BlockUI plugin is another good option with lots of customization options.
Hey I just began working on a new project that requires, tab navigation, and within each page, more tab navigation, and then within those pages dynamic ASP.NET content. The problem is I do not want all of my code on one page, that would just be a very large and bloated page. I was wondering what available methods of approach there are for this issue. I checked jQuery tabs, and I see I can link html files using AJAX but I need aspx files not just HTML.
Thanks ahead of time.
I've had to deal with this on many projects. After trying quite a few libraries my approach to tabs is to always do these myself using plain CSS.
But note having multiple layers of tabs is a but usability no-no. Remember Windows 3.x and 95 did this quite a bit. It's less an issue these days. You can try an accordion control along with the tabs to filter your screens
One one particular project, we used DevExpress ASPxTabPages for a while. These worked well, but were a bit heavy for such a simple task. We then moved the project to JQuery, but ran into situations where JQuery UI Tabs started to be an issue as well. Particularly when generating tabs using master pages and render actions in ASP.Net MVC. We finally settled on regular CSS and HTML. Javascript really isn't even needed. Though I'm sure JQuery can be used to spruce things up.
An example of CSS tabs can be found at http://www.htmldog.com/articles/tabs/. There are live examples on that page as well.
what you could do is:
make a tab a span
when clicked on that tab/span, fire jquery and do a GET to a page on the server which represents the tab content
pro: no initial loading of the content of the tabs
Con: slight delay when you click a tab (first time only if you can cache the content of the tab)
this is done when you think that only a few of all of your tabs are clicked: you don't have to load all the data users ain't gonna see.
If you think the user is going to look at all the tabs, then you can load everything in one page. You can use a user control for each tab so no super large page and wrap the output of the usercontrol in a DIV
Then also make a tab a span, and when clicked on the tab/span, make the right DIV visible and hide the others.
I just made a user control that contained the Ajax Tab Control for my sub menu. Each tab actually takes you to a different page.
I blogged about how I did this HERE.