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();
Related
I have this HTML code. This code will make a box leak on my website and it's function is to validate the message sent by the user. Anw you can run the code HERE to understand what I am talking about.
My question is how to edit the box and make it appear in the middle of the screen, above the current webpage? I mean like POPUP WINDOW. It will open with PHP echo and tell the user that his message has been sent successfully.
So how to make it popup in the middle of the screen when the user submits his message?
Any help will be highly appreciated. Thanks in advance.
Three things to do:
1. Your dropbox position is defined in js, modify here
var dropboxleft=screen.width/2
var dropboxtop=screen.height/2
2. Add negative margin to #dropinboxv2cover
margin-left:-250px;
margin-top:-150;
3. Change your current width of #dropinboxv2cover, it's too wide, change it to 500px.
I was wondering if anyone could help me.
I have made an fiddle so you guys can easly understand me.
I have an button and input form.
I would like somehow to grab that link from popup once page finish loading. I've added google just for an example but it is an php file in real example.
So once page finish loading, an script would grab that link and paste it into input form.
I do not know if it is possible as nothing come up on my mind. Neither php, neither jQuery.
Anyone who knows if it's possible could give me some tips or example?
If the popup window is on the same domain as the page that triggered it, you can use:
var popup = window.open(); // popup code
alert(popup.location.href);
On the other hand, if the popup is on a different domain, then you will not be able to access its properties due to cross-site scripting restrictions.
http://en.wikipedia.org/wiki/Same_origin_policy
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 have a button on a page. The button is an image sprite, and it choose ADD in green. I want the user to be able to click this button, and then do a few things:
1) That button makes a call to add an item to my MySQL database, without reloading the page. (I think this needs AJAX.)
2) The button background image sprite changes such that it now says REMOVE in red.
I don't understand how to do this. I'd greatly appreciate a basic walk through on how to do it.
Have a look at this page that i created to demonstrate css sprites.
I call a function on click of the button that changes the image of the button.
You can call a function that does an ajax call inside this function.(Try looking at the source)
Take a look here to learn about ajax and database related stuff.
It will be easier to make the "AJAX" call if you use a JavaScript framework, such as jQuery.
You'll tell jQuery to issue a POST request (with data attached) to a PHP script on the server. The PHP script you write will add the item to the database. When the request is complete, jQuery will run a "callback" for you. In your callback, you can change the styling of the button.
Please see jQuery.post
That's the general overview and should get you started. Please comment on this answer if you'd like more details or examples on a particular part of the process.
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.