great people from Stack!
I'm having some issues working with Full Calendar I would like to get some help with.
First of all, Full Calendar is an amazing tool. Everything I have had any doubt with has been solved in a breeze just by taking a look at the docs or googling five minutes. However, there is a problem I'm dealing with and can't find (I'm starting to suspect it is virtually impossible, or at least it is for me to imagine how to do it) the way to get it solved.
I'm implementing this library in a project which is meant to be something like an appointments manager, among other things. A (simple) functionality I wanted to add is to open a modal when a calendar cell (agenda week would be the main view) is clicked with a form, allowing to create an appointment for the selected cell. To improve usability, I thought it would be nice if the cells had some kind of hover effect, so that you can feel there is 'something' behind clicking this element. The thing is, the calendar is composed by something like 2 separated overlapping tables, one with rows and the other with columns, that form the grid. The modal system is done and working, dayClick made the trick. Any way to do anything similar to what I am talking about, the hover stuff? (my idea was to make some kind of (+) button appear when hovering, but anything would work.
Thank you!
Seth
Edit: I noticed there is a 'selectable' directive which, given only to the AgendaWeek view, allows me to select cells. The selection is made by the JS code, adding an element just above the cell, with its dimensions. Wouldn't it be any way to call this from hovering a cell instead of just clicking it? I wonder that highlight cell is rendered from the position of the mouse at the time of the click and wouldn't be very efficient to check that all the time...
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 developed a CSS-based layout for a web application that has been locked down and awaiting back-end integration. The primary element on the page is a timer/clock.
As originally intended, the timer is just a timer and is very simple. It looks like this:
Now, the boss has asked me to make a pretty significant change to my design. They want 3 tabs to hang off the bottom of the clock. They did not want this before, so I didn't build any show/hide logic and I didn't build tabs under the clock either. I am also slightly concerned because the tabs are at the bottom of the clock - that seems like a point of curiosity but I am guessing it is not huge problem either. Clicking on any of the tabs needs to cause the tab that was just clicked on to have focus, and it would cover the black rounded rectangle and display information about the tab the user clicked on. It would cover the clock. I would describe their request as reasonable, but I wish I'd had this requirement when I was coding. I think it sounds like a relative of a show/hide toggle. This is how they want the tabs to look, and where they want the tabs to go:
The part I am getting stuck on is how to slipstream something like this into what I've already created for the clock. Effectively they need me to make that component much more interactive, as the tabs have quite a bit of functionality within them. There are 3 tabs that I envision needing, but the mockup only shows 2, and that's ok.
I've included a few images in this post and I hope it helps. I've spent nearly a week smashing my head against this and I am stuck. To sum it up, I need to introduce (or shoehorn) a show/hide component as part of a late-hour change.
I am decent with CSS/JS/Web dev, but this is my Achilles heel. By "this" I mean taking a part of the UI that I already created and making it behave totally differently. In this case a pretty simple timer needs to change and has to have tabs at the bottom of the clock that would cover the clock itself when clicked. I hope I was clear enough in this question.
You have a very simple way to resolve this, using JQuery (you can use Javascript on it's own, but this will make it easier for you, less writing).
The give an ID to the DIV where you have the HTML for the clock, move the entire HTML content into a declaration like this:
$("#myDivId").html("put all the HTML content here, don't worry with the size of it");
you just need to change the HTML based on what you want to display. For easier implementation you can create a variable for each different content options, like this:
var myFirstHtmlBlock = "<p>blah blah blah</p>";
var mySecondHtmlBlock = "<span>Anything else...</span>";
and then change the content using those variables:
$("#myDivId").html(mySecondHtmlBlock);
Just let me know if this sorted out your issue.
I was on website on my iPhone and I encounter websites' guestbook. with those textFields. my keyboard appearance was totally change as you can see in screen below.
I am having many text fields in my app, I am wondering if I can create anything like that.
As I am new to development, still unknown what are the limits.
Can anyone guide me to right direction or to right documentation.
Is there is some regular way or its just total customization over Keybard.
I have one more doubt, does it matter what kind of keyboard is popping up as my all fields have numeric keyboard.
Well I just wanted to be helpful to someone who is following the same learning curve as me.
To achieve the affect in screenshot in question. UIToolbar control can be used to make those buttons. after the you need to just make this toolbar appear and disappear with the keyboard.
To make previous and next button work, you can use the tag property of textfield. on clicking on previous or next you can focus to previous or next text field.
Sorry about not posting code as I have not coded it yet but wanted to give pointer to anyone, who is looking.
I'm hoping this is just a simple pointer to something existing which I couldn't locate via google.
What our business folks want is a button much like the "Open" button which once clicked, gives a pull-down with 3 options. I can't quite figure out how to pull that off.
I can easily add a button. I can even add a stack of 3 "small" buttons vertically. I can't quite figure out the drop-down from large button. One of our folks thought he did this a long time ago, but can't find any evidence to prove it. ;)
Can anyone point me to what I missed? or, anyone confirm that it's not possible?
thanks,
~Warner
Unfortunately that is implemented in a different way than how normal buttons are added to the ribbon. I am basing this on the answers I received here:
Is it possible to remove the "Upload MM Component" button from the SDL Tridion 2011 Ribbon
It seems you will need to create an ASCX to achieve this.
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