I have an html5 page where I need to develop a small test. There's 2 columns with several buttons and whenever you click on one and drag the mouse, a line follows the mouse movement until it's released, snapping to the next button or getting erased.
I'm using divs for the buttons, since this is to be later delivered to a design crew and they need to be able to change images, texts and placements with css.
My problem is with canvas. I can't place it over the divs, so they don't cover the lines. I've tried svg too, but it has the same problem.
A coworker found the answer. Apparently I needed to use position AND z-index on the css for the canvas to be placed on the layer properly. Go figure
Related
we are using Html frames for our website. Now we need to add some widget on right side and we dont want to make a frame for it too.
Is there any option that this widget can be displayed on the right side, above the frame without affecting the frames?
Or even if i make a frame for widget, is it possible to resize the frame when it is expanded. Because when the content of frame is expanded, half of the content is not visible.
Look at z-indexing here: https://www.w3schools.com/cssref/pr_pos_z-index.asp
And think about absolute positioning. Here is another link: https://www.w3schools.com/cssref/pr_class_position.asp
You could also work with some javascript to hide the widget off of the screen until it is called on. Sounds like a design eye and some research are needed, but there are some good solutions out there for what you require.
First off, this is an Actionscript 3 question.
Okay, this is a bit complicated to explain, but I have been searching for a way to make an invisible button, when highlighted, control a movie clip. I have images inside this movie clip that are all separate. When the mouse hovers over the left invisible button, the images scroll right. When the mouse hovers over the right invisible button, the images scroll left. Im unsure if reversing the frames is even possible, or maybe even if you can divide the 120 frames (with the 60th frame being my start) and making the mouse move back by math form? Either way, they are images and buttons. Is there any way of doing ANYTHING like this, even if it means math form, frame form or making the images animate individually and move into positions?
Cheers,
- Jesse
Not entirely sure what you mean, but it sounds like you're trying to go back 1 frame?
[movieClip].gotoAndStop([movieClip].currentFrame - 1);
This would do that I guess. Feel free to comment if that's not what you're looking for.
On succession of a previous question I tried to find out if the next thing is possible:
Take you have a render, like a soccer player with a transparant background. You add this render to your html & css. The transparant parts are now part of the image 'box'; you can't click on links under the image transparant parts, but you can see them.
Is it possible to make these links clickable? Thus having the image as highest z-index, but still have the links clickable and working.
(the links have a lower z-index because their background then stops under the image, giving a nicer design)
(Or said otherwise: have a .png image with a transparant background not shown as a box, but as only the colored pixels. Preferable only in html/css)
I think it is not possible, to be honest. If you do not yet understand my question, maybe my previous will help you:
need help fixing the link's clickable area
You can use pointer-events to make an event (click in this case) bubble through to the layer below.
No, it's not possible from what I'm aware of. However you can do similar things to what you want that may be useful:
Turn an area into a link using <map>
Use pointer-events:none so that clicks are ignored on the top element
IE 10 provides the non-standard msElementsFromPoint method that allows you to "peek below" an element; you can do that inside the click handler and determine if the click point overlaps an anchor. If it does, triggering that element's click event would do what needs to be done.
Unfortunately I am not aware of similar functionality for other browsers or earlier versions of IE.
I am embedding simple html and css that i've written into another application using an iframe. Within my code, I am using CSS to create context menus when you hover over elements of the page. When I get close to the edge of the iframe with the hover menu, however, it gets cut-off and stays below the frame. I've tried many different variations of z-index, but nothing has worked. Is there a way to get this menu to show above the parent window?
Any thoughts on this?
Any positions and rules for belonging to the CSS stacking context are limited to the current document. This can't work using z-index, since the iframe-contents are a complete different document. You can't have anything "bleed" out of an frame. If you want to have an overlay, don't use an iframe at all.
I decided last week that I wanted to play around with the Canvas. I am making a simple webapp (at my daughter's request), where there are ponies, and you can add them to your own picture and move them around.
I already have it so when a button is pressed, a picture of a pony comes up on the canvas.
My question now is, what is the best way to move multiple images when they are already on the canvas?
It would be great if I could drag them each, but I can only find tutorials using KineticJS, and I cannot get that to display how I want.
So, are there any other dragging images on Canvas tutorials out there?
Otherwise It would be okay to use keyboard buttons, but I cannot figure out how to do that with multiple images. When I use keyboard buttons, it moves all images at once.
Any ideas?
You have to keep track of where you draw each one, clear the entire canvas, and redraw each and every one of them (presumably moving some of them in the process).
None of this is built in to Canvas. I have a tutorial on making the Canvas interactive that covers keeping track of, placing, and moving (selecting) shapes on a Canvas. There's a live demo on that page and source code at the bottom of the article.