I am trying to make a weppage for hourly weather forecast. I have extracted data from an api and stored it in an array.
I want to display that data in a way that it shows 10 hours of forecast,with 5 entries being actively shown.I want to create a slider like this:
http://www.accuweather.com/en/au/melbourne/26216/hourly-weather-forecast/26216
I have stored the data in a table and now need to make it slide or make it in form of carousel.
i have searched on internet,but most of them are for images or are either plugins.
Can somene please help me to understand how to create this effect. I dont wana use plugin.
An incredibly simple approach would be to use JQuery Show and Hide.By default, you show the first view.On clicking the next button, you hide that view, and show another view.So on and so forth.
This is slightly crude, but does the job. Additionally, you cause use animations to transition them in and out.
Related
I have a web form.
I have a group of about 20 images displayed on the page. I want the user to be able to drag five images into a holding area, and to be able to arrange their order.
On submit, I'd like the names of those images, and their order, to become part of the $_POST data.
I'd appreciate it if someone could point me to a working example of this functionality that I can reverse engineer, point me to an open source project that offers this functionality, or can provide the code to do this.
I am using PHP, with jquery and js
Thank you.
If already using JQuery, go for JQuery UI.
They have actions called DRAGGABLE and DROPPABLE which you apply to divs. It's a very elegant, easy to use setup.
Examples:
Look to the right for more examples
http://jqueryui.com/droppable/
As for posting, at submit time you can iterate through the DOM, find the images in the "holder div" and post that OR you can hook into the event that fires every time an item is 'dropped' and write that to a hidden or other form element what is in each box.
I am trying to create a ProgressBarPager grid in ExtJs using a remote store with buffering(buffered:true). This is not a scrollable grid. I am not looking for an infinite scroll grid with bufferedrenderer plugin. I need to display the pagination tool bar and limit the number of lines on the page.
When user clicks on next or previous button, I would expect the store to use the pre-fetched data to render the screen first and then go and load more data from the server. But, currently it looks like the pre-fetching is happening first and then the rendering. So, buffering is not helping in rendering the page fast when user clicks on next or previous.
I know buffering will work fine in scrollable grids. Is it even possible to use buffering in combination with a non scrolling grid?
Please let me know if you have any pointers.
Thanks in advance!
I'm not sure where the best place to start or the best way to achieve this is but I currently have 4 multiple sliders (two handles within on slider), one input box, another 4 checkboxes and a dropdown and have 1000+ results being returned, I want to whenever something is changed, to update the results via jQuery and paginate it.
So far, I have the results return in multiple formats, json, html, but am not sure the best way to achieve this live (onchange of anything) search with pagination.
Any suggestions or if you can point me in the right direction would be very much appreciated.
Not sure where you want to display these 1000+ results.. I hope not in a dropdown as that would seriously upset most users. :D
Have a look at jquery datatables.
I can use CSS or javascript but I've been struggling with it. It needs to be an "on-click" behavior when you click on the number in the lower right corner... like this one: http://www.winteradagency.com/mrw/images/residential2.jpg
So that when you click on #1 you get the first photo, #2 the 2nd one and so on...
Any ideas?
thanks!
Without showing what you've tried, I'm a little reluctant to just give you the answer. You'll learn more if I don't. If you provide code and show where you're stuck and such, well, that's a different story.
That being said, if you want to use jQuery, there are some nice plugins that have a similar functionality to what you want. One of them being Easy Slider. Here's also a list of 15 jQuery Image Gallery Plugins that I got from doing a quick google search.
Why not create four buttons and align it to right end, and everytime the image changes you update the text of the buttons. Each button could simply update the image to the one corresponding to its number.
I was wondering if there was a simple way to make a topdown list calendar for a website. I don't want to use the google calendar. I would also want the calendar to show like the next 5 events and hide the rest until the 5 shown have already happened. If there is a way to do this with jquery I wouldn't mind doing that either.
Here's a good starting point:
http://www.javascriptkit.com/script/cutindex1a.shtml
Just about every layout for a calender structure, and then event-show limiting etc could be implemented by you at the end. At the least it'll give you a base with which to work from.
Hope that helps.