I want to show the calendar like this on my college project website. How can I do this with CSS and javascript? I want that when the user hovers the mouse over date it should show all the dates of the month and the same way with month and year option which should give a choice to user to choose the specified year or month.
I'm a completely new scholar to this field so how can I make it easy? Thnaks.
Well it sounds like you need help with your school project, so I'm just going to point you in a few directions and let you piece it together.
(1) You can make divs invisible.
JavaScript object.style.display:
object.style.display="inline"
(don't confuse CSS "display" for CSS "visibility")
or jQuery .css().
(2) You can change text inside an element.
JavaScript object.innerHTML:
document.getElementById("p1").innerHTML="New text!";
or jQuery .html().
EDIT: (3) You can bind an "onChange" event to the select if you plan on using dropdowns for the dates/etc.
JavaScript onChange
onchange="SomeJavaScriptCode"
or jQuery .bind("change").
Related
I need to implement the following:
2 Datepickers with 2 consecutive months. The user can select a start- and an end-date.
Here is the tricky part that I can't figure out:
After selecting the start date I must enable/disable various dates.
From what I understand the disabled date are only fired once and the min-max only lets me select one range. However I need to disable/enable a multitude of dates.
I am very new to angular so I can't quite make heads or tails of the source yet.
I hope this is clear enough.
Also open to suggestions for a different datepicker directive that let's me do this. (Needs to able to default to open)
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.
This could be an fun question. I'm planning to make a select box that looks like normal html at first, but when you open it there will be two exciting things:
The box will contain 2 different text-aligns making two neat rows.(see picture)
At the end of each line of the list item contained in the box, there will be a like/dislike button system.(see picture)
Some of you already know where this is going, I'll need to make the thing like you'd make any such menu in GUI programming. I assume some object oriented Javascript programming?
(I'm looking for technical details as I'm novice at Javascript and jQuery(but not at programming), I'm basically interested in info about transferring such a pseudocode construct into Javascript/jQuery or another more usable framework if really need be. I'm also perfectly aware that I'm normally not going to be using any actual html in this GUI.)
So my question is, how should I set out to do this according to you?
You will not be able to modify a normal select element to achieve this, you will have to
Create a proxy-pro-select-element and hide the original one.
Copy option elements and create equivalent one in your proxy
You will have to also keep both selects in sync.
Once you have that you can do anything in your proxy-pro-select-element, simplest would be to on click show a table with select able rows, with table it would be very easy to align all columns.
Technical details:
Read how to implement a jQuery plugin
In your plugin's init loop through options in target select and create corresponding rows in a div say dropdown, hide original select and replace it with your control which will be a select-div
onclick on select-div, show dropdown div after re-positioning correctly
See code like this and modify
You should be able to accomplish something similar to this with jQuery and jQuery UI comboboxing, http://jqueryui.com/demos/autocomplete/#combobox
And then modify _renderItem to change the layout of results in the dropdown. You can search for the following in the view source:
input.data( "autocomplete" )._renderItem
However, I would try to avoid having like/dislike buttons in a combo box because it goes against normal web conventions.
I have an unusual situation. I have a drop down list that allows my users to select one of a number of different scenarios. My problem is that each scenario is about 100 words long. I want to show the user everything and a radio selection box would not be appropriate. What happens is that because of the very long rows my dropdown list appears so wide that it goes off the edge of the page.
Is there a way that I can split up text (I'm using C#) and add new lines so that dropdown list box contains "multi line" selections?
Hope this makes sense to you.
I don't think it's possible without some scripting. You can add width and white-space:pre-wrap to your select tag, but that only wraps the visible part. You can't, as Madmargigan suggested, use a title to show the complete string (the title won't show).
I have prepared a very basic script to demonstrate how you could do this with javascript. See this fiddle. It may give you ideas?
You cannot do this with the standard html dropdownlist. Some frameworks have workarounds for it (for instance, see ASP.NET's dropdownlist). There are also javascript libraries that offer solutions to this problem as well.
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.