Drag and Drop into a textbox - php

I have a list of people on the left hand side of a page, this list is populated by PHP.
Each person is in their own div (this can be changed but I thought div's may be easier to work with). I want to be able to drag any one of these people onto a textbox, thus entering their name into that textbox.
Also to make it more awkward, I don't really want to be using jQuery or prototype. Or any of the others really.
Edit:
Sorry let me rephrase the question...
How would I check to see if something has been dragged on top of a textbox? And how would I get the ID of that element?
What I don't know is how to check if something has been dragged on top of the textbox (input box, not text area, but that's no big issue.)
I know there would never be a magical param like onDragOnto="" but hopefully that will show you what I mean

Without more details, I can't really provide a better answer.
How about clicking within the DIV element resulting in a Javascript event to be fired which causes the element's text to be selected? Then, you can drag this text into a multiline textarea.
Now, with the information from the edit:
You'd register a onmousedown event with each DIV that you have.
On the names:
<div onmousedown="onMouseDown(event);" onmouseup="onMouseUp(event);">Jane</div>
On the textarea/textbox:
<textarea onmouseover="return onMouseOver(event);"></textarea>
And a script:
<script>
function onMouseOver(evt) {
target = document.lastClicked;
if (target != null) {
window.alert(target.id);
}
}
function onMouseDown(evt) {
document.lastClicked = window.event.target;
}
function onMouseUp(evt) {
document.lastClicked = null;
}
</script>
This is a very crude way to do things, but I hope this gives you the principles that you're looking for. If you want to force the elements to move rather than just using text drag-and-drop, then things get more hairy. To handle that, you'll need to use CSS and modify the coordinates.

Related

Create <div> or <li> item dynamically from click with predetermined values (database)

Basically, I need to create div and/or li items with unique ID's and values from form input and button click.
For example, if I want to choose the duck-div, I'll search for it in the input search bar, choose it and click "add". The duck-div would have a duck in the background and other div's other animals. Well, animals aren't my goal, but you get the point.
This far I've accomplished creating < div > and < li > dynamically via either jQuery append and JavaScript create, but those are all with same ID's and values. They're clones. I need to create unique divs, but I don't even know where to go from here.
Thank you so much for any help
P.S. If you don't know how to create it, but you know what programming language it is related to - please let me know! I'm pretty good at figuring stuff out, but I have currently no idea even what language I need to search the solution from. Thank you.
I'd suggest something like this:
function makeDuck() {
var duckCount = $('.duck').length;
var duckId = 'duck'+duckCount;
$('<div class="duck">').attr('id',duckId).appendTo('body');
}
When you create a duck div you give it a class of "duck". That lets you count the number of existing "duck" divs before creating a new one and use that count to generate a unique id.
And here's a more generic function for creating any species of animal.
function makeAnimal(species) {
var id = species + $('.'+species).length;
$('<div>').attr('class',species).attr('id',id).appendTo('body');
}

change class of div server-side after user input

I'm working on a project where users can choose squares of a big field and "book" them.
The grid is just a html table with each having a unique id (1,2,3...).
similar to this example: http://jsfiddle.net/MvFx9/
$
Now after they submit a simple form, the chosen squares turn yellow. i do this with javascript, search all elements by its id and change their class. And it works perfect.
What i want to do now is to change the class of each chosen element server-side. So that when a new user loads the page, he sees yellow squares, which are already booked by other users.
But i dont know how to do it, i guess its not possible with javascript, so i tried it with php. Is there a equivalent getelementbyid function and how can i change the class of each element?
Please give me an advice, thanks.
In some way, you will need to save which squares have been booked by others
The general idea :
1) Whenever a user click on a square, you save the id in a table in the database. You can use a form (it will reload the page) or if you want it cleaner, you perform an AJAX call.
2) When displaying the page, you retrieve the id that have been saved and set the class "already_booked" for them dynamically.
What you need is a database to know which spots are booked.Anything else will take you a long while to do and won't be as efficient.
DOMDocument::getElementById('element_id')
Use the PHP DOMDocument class to do this.
http://php.net/manual/en/domdocument.getelementbyid.php
Edit: didn't fully read the question.
http://docs.php.net/manual/en/domelement.setattribute.php
setAttribute("class", "already_booked");

Select $this, display $that - how to do it with a form?

I have an html form with a lot of options that a user would fill out (name, email, etc.), and then I will have a dropdown asking the user to select either "Style A" or "Style B".
If "Style A" is picked then there will be specific sizes for this style, if "Style B" is selected then there will be specific sizes for this style, etc.
However, I'm a complete noob when it comes to anything past xhtml/css and minimal PHP/javascript (very minimal) so I'm not sure exactly how to accomplish this. Will these options be displayed when the user selects style a/b or will the user have to select the style, click submit, and another form loads? I'm not sure exactly how this can be done, so anything works in my book!
Can anyone help me out with issue?
Thank's a ton for any help with this.
One good way would be to have a container around your form such as:
<div id="style_container" class="styleA">
<form> .. </form>
</div>
Then you can have entries in your css files such as:
div.styleA input
div.styleB input
Finally, with jQuery on your page, assuming you have a select field with the options having the value of the style class names, you can do:
$("select#style_select").change(function(){
$("div#style_container").removeClass("styleA styleB");
$("div#style_container").addClass($(this).val());
});
So you only need to change that class on that container div and the entire page should update according to your css rules.
You can do this completely with Javascript. Style 'A' will be a class (or set of classes) and Style 'B' will be another class (or set).
When the user selects Style 'A', run through all of your elements that you want to update, and their appropriate class from Style 'A'. If the user selects Style 'B', do the same for it.
HTML
<select id = 'styler' name = 'styler'>
<option value = 'a'>Style A</option>
<option value = 'b'>Style B</option>
</select>
Javascript
(Using jQuery for simplicity)
$(function() {
$('#styler').bind("change", function() {
if($(this).val() == 'a')
$(".bClass").removeClass("bClass").addClass("aClass");
else
$(".aClass").removeClass("aClass").addClass("bClass");
});
});
You already gave 2 solutions:
Single form, when the style option is selected, child options related to the specific style will be displayed, the easiest way to accomplish this is to have a JavaScript function (let's call it switch_size_display) display or hide the available options when the style selection is changed.
Multi-page form, this is more difficult and less preferable to your visitors, this can be accomplished using cookies, Get or Post : On page 1, the user will select "style" which will be saved on a variable (cookie/get/post), on page 2, the user will be presented with the "sizes" relative to the style found on the variable.
It you are learning Javascript and PHP, both these solutions are very good exercises.
One last thing is that you should never trust user input, if you are creating a website that will be available online (not locally) please make sure that you validate strictly anything that comes from URL, Cookies etc...

How do I fade one <div> out with jQuery and fade another <div> in?

I am building my portfolio and I want to create a gallery to display my projects. I have a selection of seven divs containing content that form a tabbed navigation-esque section of my website. As with other tabbed navigations, only one div containing content will be active at any one time. However, unlike other tabbed navigations, this one is controlled by PHP. If certain content (currently set to a file_exists function but will soon be MySQL controlled) is available, the div will be written into the navigation and the appropriate link will be displayed. If it is not, then the link will be hidden and the div will not be written. The files required are based on a $_GET call, and the files required vary depending on the string inside my $_GET variable.
Each tab has a unique id. Currently (since I am no Javascript expert), I have a "reset" option that sets the style of all named divs to a "hidden" style, before bringing my chosen div to a "visible" state.
What I want to do, if it is possible, is this:
I want to go from #div1 to #div2. Divs 1, 2, 4 and 6 (for this example) are active. I click the link that tells my page to display #div2 (the function currently only says to hide ALL divs and then display #div2, the hiding of all other divs is a separate function, which is called within this function). #div1 is currently visible.
#div1 will fade out
#div2 will fade in
Divs 4 and 6 will not be affected. Divs 3, 5 and 7 will not be touched since they (as far as my page is concerned) do not exist. Each fade can take 3 seconds for this example.
I am vaguely aware that $('#div2').fadeIn(3000); would constitute a fade in effect for #div2 and the fadeOut() counterpart would constitute a fade out. How do I use jQuery (I have 1.5.2 on my site) to fade #div1 out and fade #div2 in WITHOUT affecting any other div, or is it easier to keep the code as it is where it hides all of my divs and just fade #div2 in? Please remember, I am not a Javascript expert, I'm barely a beginner, so please do not insult the length of my script or my inability to understand something which I guess would be so simple.
Please remember that I have up to seven divs in my navigation. The script must find the div that is visible based on the link that is clicked and fade it out, then fade in my chosen div, and it must not touch any of the remaining divs.
Is that easy enough to understand and gain an answer?
EDIT # 01:46 GMT, 30/04/2010
Thanks, but these don't look like what I want. They look like they would work if there were only two divs, but remember, there are up to seven, and the link should know which div is visible and which are not accounted for.
I currently have my PHP script to say "If this file exists, then make this div and apply the style 'visibleTab' to it. Otherwise, make it, but apply the style 'hiddenTab' to it." My Javascript (now jQuery) code is as follows:
function resetTabs() {
$("#postersandprint").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#mobileapp").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#stylesheets").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#storyboards").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#motionpieces").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#interactives").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#developmentwork").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
}
function showTab(tabname) {
resetTabs();
$('#'+tabname).fadeIn(3000);
$("#"+tabname).removeClass("hiddenTab").addClass("tabs visibleTab");
}
The principle is this:
My link has an onclick that calls my showTab function and places the appropriate div id inside the function, so for example:
Link
The function hides all of the divs and then fades in the one called by 'tabname', in this case, "mobileapp".
I have told each reset function to remove any class called 'hiddenTab' as well as any class called 'visibleTab' and 'tabs' before adding the 'hiddenTab' class as a kind of "fail safe" approach. I have also told my showTab function to explicitly remove the "hiddenTab" class from my tab that I want visible and to add the classes "tabs" and "visibleTab". I forget why I have two styles, but i am sure the reason will come to me.
I want my jQuery script to know which div is visible and which one is not out of the selection of seven. The #div1 and #div2 was an example, but it could be any div from the selection. Before, when I used the document.getElementById function, it worked perfectly, I just wanted to add a fade on to the script to make it look better. Now, it works, but only when I cycle through the divs once. Afterwards, it just appends my div underneath the visible one, it doesn't hide them. I know I have missed something, or I have messed up somewhere, but what have I missed? Where have I messed up?
While not set up in tabs hopefully this jsfiddle example will help you a bit. [Edit, added total 4 divs now, wait for animation to finish before clicking the next button]
Basically it searches the container div for an element that is visible using the :visible selector
The .eq(0) says to only grab the first visible element out of the collection the selector returns. If there are no visible elements it just selects the first element.
Then it selects the id to show.
Calls out both animations at the same time with:
vis.fadeOut(speed);
next.fadeIn(speed);
If you want to wait for one to fade out before fading the next in use the callback mentioned in the other answers.
This works fine on all new-ish browsers but chokes a bit on IE7 or less.
Alternatively you can get a collection of hidden elements with :hidden
If you want a more direct example you can post your html so that we could help with the exact selectors that are best suited.
Maybe this is what you want?
$('#div1').fadeOut('3000', function() {
$('#div2').fadeIn();
});
When you call the any of the jQuery effect functions, one of the parameters is a callback function which is called when the animation is complete. You simply need to do something like this
$("#div1").fadeOut(1000, function(){
$("#div2").fadeIn(1000);
});
Here is a walkthough
$("#div1").fadeOut(1000, function(){
This says that when the div with an id of "div1" will face out for 1000 milliseconds (1 second) and after it will call the function.
$("#div2").fadeIn(1000);
This simply makes you new idea fade in after the other one has completely finished fading out.
});
Simply closes up everything that we opened.
I think what you are worried about is that
$("div").fadeOut(1000);
Would fade out all divs on the page but putting a hash mark and an id you can identify a specific one my it's id like "#div1"
Also, you set it with the id attribute:
<div id = "div1"></div>
I found this jShowOff: a jQuery Content Rotator Plugin by Erik Kallevig - http://bit.ly/NgLRdb give it a look, seems pretty useful....
currently trying to put it as a module on my joomla site
$("#button").click(function()
{
$("#div1").fadeOut("fast");
$("#div2").fadeIn("slow");
});
This code will work as button clicks which will fade out div1 and then slowly fade in an another div as div2.

How would you save a contenteditable div's content in a database with a PHP form?

I have a form that has a <textarea> that I would like to replace with a <div contenteditable="true". Is there an easy way to insert that content into my MySQL database with PHP?
I just implemented this, so I don't know what bugs there are right now, but it does work. I also know that it's pretty hacked together and there is probably a more elegant solution to doing this, but this one works.
I'm making a simple assumptions here: Your textarea contains html elements in it and doesn't mess up your database (using whatever method you like best)
Community Wiki'd because it's something that other people might have better ideas on.
First convert your textareas to divs, don't add extra space between the div and the content (it should be like this: <div id="content" contenteditable="true"><p>First paragraph...
Pick an id for each div that's going to now be contenteditable, on my site I've decided on the really simple content id, and I only have one div that's editable on each page that needs editing (you might need more. Each div needs it's own id).
Make a form, AFTER (or before, just don't put your div inside of the form, actually, that probably doesn't matter, but just to be safe), put a hidden textarea (display:none; visibility:none) with no content.
Add a hidden input field that contains a unique identifier for your database's reference to the current page.
Place a submit button OUTSIDE of the form. This is done because you're going to call a javascript function to put your div's content into the hidden textarea and submit the form after that.
Add an onclick attribute to the submit button, have it call the function to update (mine's upport because it updates my portfolio)
Make the function.
Create a new variable that contains the div's content (var nt = document.getElementById('contentId').innerHTML;)
Add that content to the hidden textarea (document.forms["formId"].nameOfTextarea.value += nt;)
Submit the form (document.forms["upport"].submit();)
Now make the form processor the way you normally would.

Categories