I have this image where i have placed small divs above it. when a user click on a div the color of the div changes from blue to red and inserts a value to database with the div id.
My questions are
How shall i retain the color of the div after clicked when the page gets refresh. I can call the database and check for each divs but somehow i felt it is not the best method
I have set position:absolute;left:80px;top:21px; for each divs. I want to know is there any other better method to this as I have to make one more image with same functionality for every user
Please help me to find a solution
[1]: http://i.stack.imgur.com/Hhdstrong textzi.png
thanking you all in advance
I have not been allowed to add image here so temporarily i am sharing the image from my local system
To change color when clicked
<div onclick="changeColor()" id="demo">
function changeColor(){
document.getElementById("demo").style.background="red";
}
Colors can be stored in the database
That is the only real solution (storing and retrieving values) if you want to save the selected value for a period of time; it will also accommodate a refresh.
This is a fine solution, but it forces you to calculate the position for each new user if I understand correctly. You may consider floating container divs and positioning the absolute divs inside them accordingly.
Related
I am working on restaurant management web application in PHP.
In this application i want to create floor plan layout of tables that means admin can drag and drop tables from the left side and create the layout of the restaurants on the right side and store the layout and tables details in database.
I am using Yii2 framework.
For this i have created canvas tag which is draggable but how i can take input from the canvas?
My canvas tag :
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;" value="4"></canvas>
Jquery :
$(function() {
$( "#myCanvas" ).draggable();
});
I have tried as above. I don't know weather i am on right way or not.
Please give some idea how can i do this draggable canvas input form Which saves the tables details to my database.
You can define regions in your canvas, which have a boundaries. The simplest way to do that is to be aware of the rectangle/circle around your elements. By clicking into a given position, you will know about the x,y value and, if you know the inequality of your shapes, then you will be able to determine which shape(s) is/are containing the point you have clicked on. In our case, since you want to work with dragging, the events you will be interested about are:
ondragstart
ondragend
At these events you will be able to find out what was the point where the drag has started and what was the point where the drag has ended, so, you will be able to determine which item in your initial canvas contains the point where the drag started and which point should be created your item at in your destination canvas. But it would be nice to make a graphical display of the dragging and for this purpose you could create a container which would be filled with an image that you need and move along with your cursor. You could achieve that by creating a movable container that would be visualized on ondragstart, moved on ondrag and hide on ondragend.
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");
I have created a page with Mysql rows displayed as a dynamicly created image grid.
The grid display i have full control over, but i need to take the (Mysql) Row ID from each image displayed and use it in a pop up of some sort.
I don't like having a full page for each Mysql row.
It could be passing it on to a new smaller info page(dynamic) or it could be a popup with the info(dynamic).
I would prefer the popup, since i would guess this is easier on the eyes.
So what i need a suggestion on a popup function, which will load/set the row ID on click.
I have seen Jquery solutions for making popups, but i need to pass in the variables allready set by each displayed image. and this is where i fail.
Thanks in advance.
/Niels
**
This is one of the things i have tried, but i can't really figure out the way to pass it in the right way:
echo "<p>Show"
When you render the page in PHP, you could use a data attribute <div data-mydata='foo' /> to store the ID you need. Then, with jQuery, use the data() function to access the data and render whatever popup you need.
HTML 5 data attribute: http://ejohn.org/blog/html-5-data-attributes
jQuery Reference: http://api.jquery.com/data
I have a design as show in the below image and i have a requirement where user can click on the link in Rectangular area named as A, B & C. When one click on the click here link in Box B then all the green area should gray out except the BOX B and same should happen with BOX A, C.
Example as shown in image.
When User open the page
When User Click on the BOX B link
I am not sure if this is possible if there is any similar example where i can start from. I looked for but could not find similar example. Usually they example are related to whole page grey-out.
I can do same by using onmouseover and replace the whole image with the another image which has surrounding area in grey. But i am not allowed to do it this way. I am not sure if this is possible. I would appreciate if you can point me in right direction or if this is possible to certain area of page in grey..
These page are designed for PHP scripting
I created a little example for you, which you can find here:
http://jsfiddle.net/Srj82/
Its' basically using a simple css z-index to overlap / hide the entire place, while the current selected element got temporarily a higher z-index than the overlapping <div>.
You'll notice, while the overlapping <div> is visible, you can still click on the selected box. Anything else is not reachable (without removing event handlers or so). Just because there is another element which overlaps the rest.
On click of A/B/C you can add a div overlay with a transparent grey bg color and increase the z-index of the clicked element higher than the overlay.
Use an overlay div that will be positioned absolutely above anything else on your page with z-index then set your clicked box's z-index to overlay's + 1.
There are a couple of ways to do this, but a relatively quick and easy way is to make the elements that you need to grey out be of the same class. Then when you select an item give that element an additional class, and change the css for the elements named above except for the selected element with the additional class.
This is a link describing one way to accomplish this.
You could try to place an div over the area where A,B,C are placed.
In this div you will have a background-color like so :
#myDivHider{
background-color:rgba(0,0,0,0.4);
display:none;
}
When you either click a,b or c You "activate" (display:block), the whole thing and set the z.index of your a,b or C that it get's up "higher".
An alternative would be a plugin from jQueryTools, called Expose.
http://jquerytools.org/demos/toolbox/expose/index.html
One way to do it would be to temporarily change positioning of the element to absolute and give it a high z-index, then add a layer below it that would act as the overlay.
You could also use a plugin, for example this one: http://jquerytools.github.io/documentation/toolbox/expose.html
I'm making a social community application with profile. User must be able to style their profiles.
That's why i'm looking for a way to store and retrieve color values from a MySql database to style flex 3 components at runtime.
Does anybody know how i could accomplish this. (I don't want to use Runtime css swf styles.)
My guess is that i must store and retrieve hexcolor values (0xFFFFFF).
and than something like getStyle and a setStyle.
maybee a changehandler
But how?
Does anybody have an example how i could accomplish this.
What i want to do is give users the ability to style their profiles via colorPickers.
Than i want to store the chosen colorvalues in the DB.
Next i want to retrieve the stored colorvalues form the DB when somebody visits the styled profile.
meaning
choose border Color for a panel with a colorPicker.
save the value in the DB's
retrieve the panel border Color value from DB when the profile is requested form the server.
choose fill Color for a button with colorPickers.
save the values in the DB's
retrieve the button fill Color value from DB when the profile is requested form the server.
also.
i must say i have one profile page (template).
So when a user visits another users profile page that also have been styled
The colors of components must change.
i hope its clear what i'm trying to do.
Can anybody help me out with a good example?
Thank
DJ
Just a guess but you could use programatic skinning with a reference to a colour chooser classes static variable. On main init call your service, retrieve the colour then call invalidateDisplayList().
To test this, have a simple app with one skinned control. This controls skin makes reference to a var in the colour chooser class to get its colour. Have two buttons, one to update the variable in the colour chooser class and another to call invalidateDisplayList(). The second button should re-draw with the new colour. If that works id imagine your good to go.
Its late so this could be complete bollocks but give it a go.