i was working on a facebook like website.and im really impressed with the facebook's commentbox.the toggle stuff are really awesome.can someone help me get something like that.
please dont send me this link http://demos.9lessons.info/multislide.php this is the most famous link on internet but i dont think it is like facebook from any point of view.please i need some serious help !!!!!!!
Well you already know the answer, no not the link you pasted, what you tagged your question with:
jQuery
You need to use AJAX via jQuery and modify a with CSS to get exactly what you want. You're coding in PHP so get use to the idea of making your own web controls by hand, it's very easy.
I doubt you're going to find anybody that'll write the code for you, and from the sound of it, you have done your homework and shopped around at the various script sites. What I would suggest is to break down the behavior of what you're looking for and what you have:
Facebook:
Simple link: "Comment"
Thin text box: "Write a comment"
Clicking link creates div under link or setting focus to text box transforms text box into textarea and button.
Clicking outside of div removes div from page.
When button is pushed and comment is made, a div is added between the original div and the link containing the text of the comment.
When textarea does not have focus, it returns the textarea back to its original state as a text box.
Perhaps it would be best to take the code already written for the link you posted and do these things to it:
Remove transitions
Change button elements into <a> tags
Make the "slider" box visible all the time, but have the contents shift
The box should have an <input type="text"> in it with an onfocus="" attribute set so that we can hide it and show the textarea when it's been clicked in
The textarea and button should be hidden until instructed to become visible (display:none)
Use a jQuery plugin to hide the textarea and button and revert to the text box when the comment div has lost its focus(es).
Hope this helps to some degree.
Related
Is it possible to take the user where the cursor is after reloading the page? I'm enabling a <textarea> on the basis of some URL parameters on page reload using PHP. But in the new window the textarea will open on the bottom of the page. If the page is already lengthy the textarea will be hidden beneath.
Is there any way so that after reloading the page the textarea appears on the viewport so that it can be filled?
I tried:
Write
...
<a href="#ok">#<a> <!-- setting a bookmark to get the viewport here -->
<textarea><textarea>
I know there are plenty of solutions using AJAX, using lightbox etc. But I need a generic way, may be HTML or a server-side solution. Or, in a nay-say it can be jQuery.
It doesn't appear that you are using the anchor (or bookmark, as you called it) correctly. If you give the <textarea> tag an id of "ok" you should be able to link directly to that area of the page by using the # in your link to the page. Example: somepage.html#ok
There is no need to use the <a> tag to create an anchor. That is outdated.
So I am making a small PHP Javascript and JQUERY Chatbox and so far its working pretty good but im trying to "Fancy it up". It asks you, the user, for your Name and once you type your name in to the input box you are supposed to click Enter which brings you to the chat box. Here is the code for the Chatbox.
http://pastebin.com/DgQEC9rV
You can find the Send button in the PHP at the top of the page.
But I was wondering how to make the Send button and the whole box it is in disappear with JQUERY and have the chat box still load in regularly.
A live example of the chat right now. --> http://www.carlosmayers.com/knil/chat/
I know just looking at the code might make this question seem very unapproachable but I know someone here can help me! Thanks.
If i intepreted your question right you just want to hide the hole chatbox. But it should still update itself.
So with jQuery you do this: $("#wrapper").attr("style", "display: none");
Whereas #wrapper is the div with the id (# := css-Selector) "wrapper" in your document.
jQuery now sets its style to "display: none", but the Chatbox will still be updated!
If you have Chrome, feel free to test it in the console first.
You could also use $("#wrapper").hide();
i have a simple form and when user enters all the information and hits the submit botton than a panel should open just a width of 200px and height of 100px inside the same window. which should have two fields one is captcha image and a text box and a check botton and if captcha code is right than panel should automatically close and redirect to another page just like facebook .
all the details of the panel is saved on another php file.
Check out recaptcha , read the documentation and understand how it works (takes only minutes)
How you implement that will be up to you eventually, but basically to do it the way you desire, you'll need to have some knowledge of javascript(jQuery or prototype will make the visual effects easier though).
To be more detailed, the captcha would already have been generated on the form, but the parent container should be hidden with a:
$('#captcha-container-id').slideUp();
As soon as the form is filled, you could then do a:
$('#captcha-container-id').slideDown();
The rest is pure PHP
NOTE: The javascript example is in jQuery
Hope this helps!
Use recapcha for getting the captions.
You will need to learn javascript to handle the window opening and closing effects
I hope you can handle the rest.
I need to display a document (like in a Google Docs style view) and provide the ability for a user to make comments on that document.
Here's how it needs to work:
When the user views the document, they can use their mouse to highlight any amount of text they want (as they would within any other webpage)
Upon release of the highlight, some sort of modal dialog box appears asking them what they would like to comment on that portion of the text they selected
After clicking save in the modal box, their comment is saved in a MySQL database along with information about the section of the text they highlighted
Another user can view this document and see their comments on the different parts of the text.
I don't know how to tell the database what section of the text is highlighted so it can reference that and show the comment on that section of the text.
Not sure where you're getting stuck at but the basic idea would be:
Get the selected text using Javascript (see http://www.codetoad.com/javascript_get_selected_text.asp for an example)
Submit that text to a PHP script using either an HTML form or an AJAX approach (AJAX would probably be what you're looking for based on the description of your app).
Take the text passed to the PHP script and insert it into the db.
Party like a rockstar.
In Javascript:
var selectedText;
selectedText = window.getSelection();
I'd suggest some kind of character-index-based approach. I've answered a similar question recently here: execCommand insertHTML breaks stored window.getSelection()
I wonder is someone can help, I'm building a website, which is driven from a database. It will consist of user submitted information.
Currently all the information is pulled from a record in the database and is being output via a PHP echo, what i would like too do is add a feature that would allow me to edit the information if incorrect from the websites front end.
I have seen many websites have some form of edit icon next to information in there databases, when clicking this icon the echoed text changes from text to a text field and you are able to update the field being echoed from the database.
Im a designer so have limited knowledge of how functionality for this kinda feature might work.
please could anyone let me know how something like this might be achieved.
many thanks.
You would need to build some kind of javascript functionality to allow the in-place editing of those data bits. One possible solution is a jQuery plugin like jEditable.
Then you need to build a server-side script in something like PHP or ruby where it would take the submitted information and update the database.
well the process is the same for the front-end and back-end. it depends whether you want you build a password protected editable forms or just editable for everyone.
One way you can do this is
echo your information into text inputs
give them a css class that removes the border and makes it transparent
make it readonly(so someone couldnt tab into it and change it)
add a javascript onclick event that changes the class to a normal
text box that is not readonly
add a javascript onchange event that uses ajax to save the new
information into the database when they are done typing, or press enter
after the ajax is done turn the text box back to the first css class
EDIT also add a onblur event that changes it back as well
you could even change the cursor for the text input to a pointer instead of the default (text) cursor so that is looks like you can click on it.
.
now html5 has contenteditable attribute which you can set for elements
simple example:
www.hongkiat.com/blog/html5-editable-content/
simpler demo:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_contenteditable