I am making a social networking site and would like emoticons to be available to users to click, and view a whole range of standard emoticons. I have seen around the web, and have not come up with any concrete information whether this can be done, and how.
The way I imagine the emoticons to be is similar to what WhatsApp have adopted. An emoticon icon, which, on click, displays a whole range of icons. Just wondering whether it is possible and if so, how?
It can be done, you would need a java-script widget for it though and depending on the rest of your framework it could be fully integrated or it would require some additional files.
Here is one example of such a widget, not sure if it is precisely what you need but you can get the idea there:
https://www.npmjs.com/package/emoticons-js
Umm, you can have a set of icons what you can display?
Or use the unicode entry points for the emojis?
http://apps.timwhitlock.info/emoji/tables/unicode
Then you need one element with some onclick handler in Javascript which opens up a floating div showing a selection of emojis.
Related
Does anyone know if I can integrate GrapeJS into my own website so clients could build their own websites using it? IF anyone has done this, how easy is it and are there downsides?
This question is pretty open ended, but I'll take a shot at it.
The short answer is yes, you can use Grapesjs to allow clients to make their own sites; however, the details matter.
Grapesjs by default doesn't know anything about your stack, website structure, metadata, etc. You will need to either supply plugins or implement those features yourself. I've worked on a project for a company that used Grapesjs to implement single page apps and I'll include just some of the tweaks we had to manage.
Hiding certain layers that only confuse average users.
Hiding pretty much all of the styling, and using traits to allow people to pick from some predefined styles.
Take the html, css on store and generate the final html page, and store it in our static serving folder on the server.
Implement a wrapping "App" component that has traits for the different metadata we want users to control (open graph metadata, title, etc)
and those are just the big things, I'm sure I am forgetting several small ones.
For your application, you'll also need to implement a custom trait for links / buttons that allows you to link from one "page" to another. As well as, a way to allow a user to pick which page to work on.
The long answer is Yes, but Grapesjs is only the starting point.
Yes you can.
However it is not straightforward.
If you want to build a Drag Drop Editor like GrapeJS Demo, here is the Source Code - https://github.com/artf/grapesjs-preset-webpage
You can see an implementation at https://codegres.org/dragdrop
I've been trying to find a source code or tutorial or anything that I can work with, but so far I haven't had any luck. The closest I've come was using haXic, but without a way to change how the input box looks (I was able to fix this in the open source files, but without being able to change the compiler, the fix won't stick in the resulting .swf), I can't achieve the desired font and color.
So I'm turning to Actionscript 3 / Flash, as I have some knowledge of it, although mostly used for constructing websites. The goal is to create a very, very, very simple game based on traditional text adventure structure. When I say simple, I mean really simple. I don't need maps, I don't need NPCs, I don't need items, I don't even need to have a list of commands that can be accessed at any time. All I need is to display some text, accept a specific input, and then display some more text based on what that input is.
Here's an example of what I'm trying to achieve: The .swf loads up, the user sees some text imitating a POST. This isn't an actual preloader, just some fancy "everything is starting up" text. At the end of the animation, the user is instructed to press any key to continue, and doing so removes the existing text and loads in the next set. From there I'd like to have various steps requiring certain input (i.e. asking users for a username, requiring the input of username: , but this doesn't actually have to store the username, just have the valid format of username: name detected before continuing to the next step) and either outputting additional text or wiping the existing text and simulating the start of a new program.
I'm guessing that this mostly involves calling various functions based on input, and then changing what the expected inputs are within those functions, but I really don't have any idea where to get started. I've also noticed in what few examples I've seen, that input text is submitted through the use of a button. Is there any way to get this to work with just the enter key, to simulate a command console?
I'm certainly not expecting a complete source code, just a few pointers. Any help is appreciated, thanks! I'm also open to suggestions other than Actionscript, however the resulting game needs to be able to run in a web browser, and some form of animation for the text is preferred.
While this is definitely possible to do in Flash, I would highly recommend using plain HTML5/Javascript for this task. This way you're almost guaranteed to have the widest platform adoption (XBOX browser, iOS safari). Javascript can be just as effective here for animations.
For using Flash, I would start with the TextField class for the input and TextArea component for output.
For HTML, it's as simple as a form input field and using javascript to update a div area for the output.
Good luck on your project.
I have a question of how to develop a small website which is quick and easy which has html support unlike google sites. For one of my course project I have to develop a prototype of the website but just html pages. Want to implement the clicks, text fields, checkboxes etc., I have created a small site of googlesites but that doens't allow me to put the html like text fields radio buttons etc., I just wanted to know if there is any free WYSIWYG capable for doing my stuff.
Thanks in advance
EDIT:
I dont want to use the div tags and arrange the location of HTML. I just want to drag and drop the fields and the site should automatically place the fields appropriately on the webpage something as easy as google sites
I found jsfiddle.net to be really useful. Basically you can put in HTML, CSS, and Javascript, click "Run" and see the result.
It's great for testing or hacking some CSS or Javascript, as it gives you instant feedback, saving you the "edit, save, launch, wait, repeat" cycle you might find using a text or HTML editor.
UPDATE
I'm not sure if I understood your question correctly. Perhaps you are looking for a tool like Google sites but with more capabilities? If so, http://www.weebly.com/ is a good option and it is free.
I would like to let my users define their own layouts for their profiles within some reasonable guidelines. Imagine the controlled aesthetic of Facebook with some additional user flexibility. I'd like to offer these abilities:
Define paragraphs of text with headings, bold, and bullet points (no user control over fonts, colors, sizes etc.)
The ability to upload a couple of images per page.
The ability to set those images anywhere in the page (left or right) in the page and have the text flow around.
How might this work? If all this data is to be stored in the database, how should I think about setting up these features?
Thank you very much.
You might use a HTML WYSIWTG text editor, that you can embed and it gives a graphical interface to the user to create paragraphs, list, links, images, generally anything that you could do in HTML.
I would recommend CKEditor if you are fine with this kind of solution. You can easily set it up according to your needs (restrict it to certain features, etc.). You can also include an image upload solution. The result will be a piece of HTML, which you can save in the database and show on the page when requested. Check the demo and if you like it, read the documentation.
UPDATE: You could also take a look at TinyMCE or the YUI Rich Text Editor.
I have done almost same what you describe. But using liquid (https://github.com/tobi/liquid). Its a very powerful template language and have many interesting features
and for html markup's I prefer using redcloth (http://redcloth.org/)
cheers
sameera
Styling form elements using css can be problematic since every browser render tag in different way (just like when safari render checkbox).
Okay lets ignore safari for a while, skinning input and button are rather easy but how to completely skin select, checkbox, radio, etc.
See this pages:
Checkbox skinning
Select skinning
Radio skinning
I've heard some JS framework such as EXTJS or MooTools can do that, but i don't want a large scale framework solution, just independent JS and we can modify the skin as we like, please no JQuery solution, since i don't use it.
Any idea to do that without using some specific framework?
If you want complete control, then you generally have to replace the browser controls completely and fake them with other elements, stylesheets and scripting.
If you don't want to use a framework, then it basically comes down to DIY.
That said, the whole concept have a couple of problems.
Trying to get the controls to behave how the user expects (given input from clicking, double clicking, triple clicking, right clicking, dragging, arrow keys, the control key, etc, etc, etc) is hard.
The controls might not look as the user expects.
Personally, I'd generally try to let form controls stick to the system defaults and not try to deviate from them. Give users what they expect.
Today there are quite many javascript solutions which allow a wide range of customization for form elements styling. A quick google came up with a few nice ones:
Perhaps the best known is the Bootstrap CSS framework:
https://getbootstrap.com/docs/4.0/components/forms
https://www.psd2html.com/js-custom-forms (jQuery plugin)
https://purecss.io/forms
https://github.com/select2/select2
https://github.com/harvesthq/chosen
Checkboxes/Radios:
https://codepen.io/vsync/pen/aBOOZB
https://codepen.io/vsync/pen/wKkuz
https://codepen.io/manabox/pen/raQmpL
Today you can find many kinds of form element styling on Codepen.com
Old answer (from May 16 '09):
yes, it is quite easy.
you can use niceforms, which is independet script for making
nice looking forms, then you can modify the graphics images /
CSS as your wish.
The idea is, coding something that looks the same with same
funcionality but different design, then you need to "give it
life" with some javascript magic :)
then, you have to have ilsteners all over the place, to check
what the user clicked, than you need to reflect that same value
to the pre-hidden form element the corresponds to the "fake"
one. means, to manipulate it. then when you send the form, the
right values are places via JS.