Photosphere plugin, cursor stuck on "grabbed" and text won't select - javascript

I'm working on a new version of my business site at http://bigriverwebdesign.com. I'm trying to implement a Photosphere background (http://photo-sphere-viewer.js.org/). I've contacted the plugin author, but he's been unresponsive and I'd like to see if anyone on StackOverflow has an insight.
I almost have things working the way I want them, but are two hangups I can't figure out.
1) The cursor displays as a grabbed hand. I would like to change it to all-scroll. I don't think this has to do with my implementation because it is the same way on the plugin site. I am unable to change the cursor with CSS and I'm not sure that it is being set with CSS in the first place. Does anyone know why the browser displays things this way and how I might go about overriding it?
2) I can't select text to copy and paste from pages like http://www.bigriverwebdesign.com/services. If I remove the photosphere, I'm able to select text just fine. I'm having trouble finding any information on this.
thank you!

Related

How to make a little helper to guide visitors through my configurator (example included)?

I build a configurator so that visitors can drag and drop things to a specific area on my page. What I now need is a little "helper" which guides the visitor through the process. I thought something like this would be perfect: https://www.cubit-shop.com/en-uk/shelf/configurator
I'm talking about the marker for the "drop area", the arrow and the text "simply drag the modules to the design area".
Obviously this helper should be there if the visitor opens the page and then should disappear when he clicked the first time anywhere.
How could this be done?
Thank you very much in advance.
Edit: One more question: When hovering over an element in the above mentioned example, then it shows a window with additional information. How is this done?
Thanks again
I have previously tried http://introjs.com/ but it depends on what you need it for, since its paid for commercial use.
Alternatively you can try
http://clu3.github.io/bootstro.js/
and
http://heelhook.github.io/chardin.js/
Look around and you will find even more libraries that will help you achieve that, but I think these will do just fine.

Looking for browser notifications that include user input

I have looked for a while but found nothing that meets my demands. I am looking for something similar to this in terms of size and simplicity.
However, I would like the notification to also include a input box for the user to insert text (similar to a form) in a way that it ables communication with the webpage using that input. Using the previous image... ideia. Would be better if worked well in all browsers.
Can someone help me with this? I am using javascript.
Thank you.

How to write a twitter-like RichText box for mentioning entities?

After weeks of trying and testing to find a solution for my needs I admit that I still have no idea how I can solve this problem.
It sounds simple: I want that a user is able to mention things in a text area similar to twitter.
The problem is that I can't seem to manage it to make it work. Every browser has its own specialties which are coming into my way and break things. I have tried multiple different attempts but none of them worked even on a single browser completely.. mixing text and HTML appears to be incredibly hard to do.
So here I am. Asking you guys for any kind of help. Whether it's a library you can recommend me that is already doing what I need here, or if you did something similar and can tell me what exactly you did to make this work on multiply browsers.
My current solution looks something like this: Hitting # will insert a input text field into a div contenteditable everything is working nice so far unless the whole thing is the first element of a row. If the caret is also at position 0 and the user hits Enter, then something dies inside the browser which removes the whole input box without further notice or any events - at least not on Chrome. That was the most promising solution that I was able to come up with. Don't think I didn't try to save it by inserting e.g. a native Text with a zero-whitespace-character but that doesn't work either. It works better - but not completely.
I'm really frustrated by now and this is holding my whole project back which has this key feature that has to work properly - mainly because the information put there is going to be persisted as XML but that is a completely different story.
I really hope somebody can help me to get a solution for this. Bear in mind that I am actually using GWT 2.8.0 but I would not mind to use/wrap a JavaScript library at this point ..

Does anyone know of any cool JQuery plugins to display a profile picture and acompaning text in a box?

Ive seen a few however they dont seem to allow you to write much text alongside an image, its mostly a brief title or caption display whereas I have quite alot of text that I would like to be displayed alongside an image. preferably in some kind of light box. Id be very grateful if anyone has any suggestions. Im new to Jquery :)
Have you had a look at jQueryUI's Dialog? It's quite nice and you can just pump any HTML directly into it.
I'm using JQuery galleryview for my project. here is the link on the development server. Click on one of the button for example:
http://ssdev01.uis.kent.edu/VotingApplication/Main.aspx

How my select list become uneditable?

I am coding some sort of booking system - calendar. One of the features is also a (js) pop up window with detailed information about event - user can either view them or edit.
Now my problem - I have put there a HTML select control (dropdown box), quite simple - 5 options. But somehow, and I have no ide why, this select is uneditable - that means that after I click on it nothing happens (I do not get the list of the options).
I know that now I should put a code here, however, whole system is so complex that it would take me ages.
I do not await exact answer or solution of my problem. I would like to ask you for advice - what would you check? I went through CSS up and down - no clue at all. Maybe some javascript? But how? I do use one public js library, so it might be something there, I checked as well, no clue.
Any advice would be much appreciated. I am stuck now... :-(
Thanks a lot!
Peter
::EDIT::
I have found out what is was! The ID if that pop-up window is bbit-cal-buddle and there is this line in the .js:
$("#bbit-cal-buddle").mousedown(function(e) { return false });
which basically explains why I can't select anything in dropdown (funny thing - checkboxes and radio works!). So my question is: how do I exclude my select and option tag from that .js command?
I've found a useful option when the bug is that obscure is to logarithmically comment your code.
That is,
Comment 100% of the code that might be causing a problem.
Test
If it works, uncomment 50% of the code you commented and go to step #2.
If it doesn't work, you know the problem exists in the code you uncommented.
Yes, this is somewhat of a monolothic technique, but I've found it to be very useful in the past.
Regards,
-Doug
Just to be sure, turn off ALL styles. this will render your page without the styles(obviously) and check if you can click the drop down. If you can, it is 98% a CSS error. It happened to me awhile ago - most probably an absolutely positioned div is covering it.
If you still can't click it, bring back the CSS then disable all javascripts. It should still be clickable by then since and html select tag doesnt need JS to be clickable.
If it still doesn't work, try doing a regular html select tag and check if you can select that one. If you can, then there is something wrong with your select tag

Categories