Show user information on mousehover - javascript

On Mouse-over i wish to show user information such as User Id, User Name, User Location, User Age etc. All this info would be coming from database. As well, this information would be in a rectangular block that would actually come-up on Mouse-over.
I am aware that JavaScript could be use to show div (in mouse-over) but don't know how to fetch from database?
Plus the application is a Windows Based Asp.net Application. I am not aware whether that could be possible in Windows based as i'm web based developer.
Thanks for all your inputs.

You could use the jQuery qtip plugin that can display dynamic content, see a documentation at
http://craigsworks.com/projects/qtip/docs/tutorials/#dynamic
and a demo at
http://craigsworks.com/projects/qtip/demos/content/loading
The url parameter should point at an aspx page that show the text that is loaded from database.

Related

hide some element getting from embedded url in react-calendly

i am using react-calendly for embedded another website to my website (using InlineWidget react calendly ). i need to hide some fields like name, email on my webpage that are currently appearing from that ebedded url .please give some suggestion as i don't see any props in react-calendly.
You cannot hide the standard name and email fields from the Calendly booking page. Even if you are prefilling them from your website, the invitee has to confirm these details when booking, per current design.

Is there a way to attach a dynamic image to a tweet?

I've got functionality on my website to share to twitter. It's just a simple Twitter Intent with some custom text. I'd now like to share an image with this text, not a link to the image, but the image itself like how they're shown in Twitter Cards. I'm at a loss of how to achieve this though.
I've got a web app that changes the data shown based on filters that the user engages. When they click the "share" button, I use PHP GD to generate an image using the current data shown. This image is saved on the server and the url is passed back to the javascript via ajax. Now I would like to open a "twitter share" dialog with my pre-filled text and this image. I have discovered that this is not possible with twitter intents because they don't allow images, only image urls (because actual images shown in tweets are pic.twitter.com images).
So I'm looking at Cards but it seems as though Cards are static. I was wondering if it's possible to make the card metadata dynamic by having a php file which has a hash (e.g. www.example.com/tweet.php?esd87fsduh) that is used to dynamically populate the twitter card meta tags? Or would this not work because it takes a long time for twitters bots to crawl the website again?
I basically want the simple functionality that the user clicks "tweet" and they are presented with the Twitter dialog showing dynamic text and the image based on the data filters they'd applied. Is this possible?
Thank you for your time.

How to make an interactive website and allow the user to edit website content?

To begin with, I'm fairly knowledgeable with both html5 and css3. Right now I'm trying to create a website that allows visitors to edit website content so that all visitors are able to see the edits. I know about contenteditable but this attribute does not last when the page is refreshed and no other visitors to see the edits. For example:
<p> Edit me please </p>
A visitor would be able to edit the element above by visiting the website and simply selecting and typing. Also I have heard that javascript, jquery, sql, and php can all allow visitors to edit website content but I don't know which is the best.
To sum up, if anyone knows how to allow visitors of a website to edit its' content it would be much appreciated to share their knowledge.
Create a database table (lets call it "strings") , and just define 2 columns - "string_identifier" and "string_value"
When you render the page, simply query the database to fetch the strings and their identifiers. Each editable element should have an attribute containing its identifier.
You can use jquery to capture the click event on all editable elements, and replace it with an input with that text.
Then assign an event handler to that input, so when the enter key is pressed, it sends a request to a php script (with the identifier and new string as data) on the server to update the database with the new string.
If you would like live updates to all other clients (no need to refresh), use jquery to continuously request a file on the server (endless loop), which will return a JSON object containing all the strings. Then go through and replace the text of all editable elements on the data with the new strings you have received from the server.

Insert image or text into div on a static webpage by clicking on bootstrap dropdown menu

I am trying to create a table in bootstrap that can be edited online by users without using a database backend.
Please see a preview of my page at https://preview.c9users.io/tomheaps/whiteboard/index.html?_c9_id=livepreview3&_c9_host=https://ide.c9.io#
You will see that I have managed to insert a dropdown menu which appears if you click on the table cell directly under the 'Diet' column header. Is there any way using jquery that you can click on an item from the menu list to insert a specific image or text into the div from which the dropdown originates (i.e. into the table cell that you clicked on).
Ideally I want the text or image that the user has inserted to remain in that div until it is changed, even if somebody views the page on a different computer - not sure if this is possible in a static webpage without using a database back end.
My javascript skills are non-existent and can't find anything similar after hours of trawling the web so any scripts to enable this would be very gratefully received.
You need a database to show any data which needs to appear in a new computer.
Anything you insert by js in your current DOM document shows just for the current user.
You have to store the data in a remote server in order to allow new users to see its.

How can I make an expandable notification in HTML or JavaScript?

What I am looking to do is have a notification numbers show in the top right corner of my site, that when a user clicks it, it opens up a notification menu or even a pop up box that says the notification. How can I code that? Thanks!
If you can use jquery, there are many:
http://medleyweb.com/web-dev/10-great-jquery-notification-plugins
For all the tastes!
Cheers.
Some ways you can do that:
1.) If the data or notification details are in the database, then you can just COUNT the ROWS that are untapped or not seen (you can do this by having a "status" column which identified if the row/notification had already been seen or not) by that specific user, its better that every notification must be saved in the database.
2.) Put the COUNTED ROWS you fetch from the database inside a div tag and declare an Id in it.
3.) When you already fetching the right data, then put the correct CSS/styles where you want to put the notification number including the property z-index:100;.
4.) Same goes with the pop up box, when the user click the div tag, first hide the div tag for notification numbers, then you must fetch all the data from the database putting in inside another div tag with CSS for notification details.
5.) This can be done greatly with javascript and jquery.
Jquery is also great in communicating to server, use it for real time purposes :)
Hope this helps :)

Categories