i tried a lot of examples but nothing works as i want it to be.
It's for touch screen only devices (app) and i use jquery 1.8.3.
What i do is i upload a photo and it fetches the photo from the server and put it in a div.
In that div, i need to be able to move the photo around to whatever i want it to be.
When i click next it will cut the part out of the photo that i selected (the server can do this).
I tried canvas, but it doesn't work on touchscreen devices.
What i try to ask is:
Is there a way to move the background in a div, and what i see in the div (user point of view) is what the picture is going to be, get the cordinates and submit them to the server.
The server will cut a square out that picture (with that cordinates) and maybe even a rotate and saves it.
The server part is not an issue, it's the moving in div en getting cordinates.
Or does anyone have a better idea (i want the instagram like how to select a square out of a picture)
You could make the element in the background draggable. Once it's draggable, then the user can drag it around any certain way.
Finally, when the submit button is clicked, you can check to see what part of the picture is inside the box.
Related
So I wanted to do for my company's webpage, a thing where are links that belong to people, to make it when you click, you have a little menu where you can choose to send him a message or view his profile..
Before click:
After click:
I tryed to search for it, couldn't find anything of much valuable.. Maybe someone can help me out.
If you're looking for an easy way to do it, I recommend using jQuery (http://jquery.com/) with one of the popup plugins (http://plugins.jquery.com/tag/popup/). It's easy to install, and most of them have a working demo for you to test out before download.
Otherwise, coding a popup window with pure JS takes time.
This general method is to:
Create a hidden div
Position: absolute and play with the z-index so your div will be on top of all other elements.
Set the position to where you clicked, or somewhere around the area of the target.
Take into account the width and height of the window/screen. (i.e. No poing in showing a div that'll appear off screen).
Fill it in with information you need.
Make it appear.
The way I've done things like that in the past is to have a hidden absolute or fixed DIV layer that houses that message menu. Then have a click trigger make that div layer visible and positioned at the current mouse coordinates.
There should be a lot of articles on google telling you how to do the various stages of all those steps.
I am currently working on an app with a friend and we need to make it so that an image will fall when the image below it disappears. So it needs to like take the images place when it disappears. Any ideas on how to do this?
jQuery would be a good starting point for this. Presumably you're hiding the image with JavaScript to begin with, so add code to the same function that loops through all of the images above it and moves them down to fill the gap (possibly using .animate()).
Are you sure you want to move the images down, though? That will leave an odd blank space at the top of the screen, where there's no image left to fall from above. Images "falling" upwards when the image above them vanishes would make more sense on most HTML pages.
I have a lot of photos with links to wherever, and I'd like to have a semi-transparent box come up on hover, after a delay, with caption and copyright for the larger underlying photo. In my dreams, I'd like the smaller overlay to link to the original photo or the photographer's site, while the still-visible area of the underlying image will still link to wherever. If it make a difference, this is on a Joomla site (with jQuery already loaded) but I'm generally able to hack the PHP and HTML on the template.
I see a few pretty straightforward ways to overlay a linked box over a non-linked image or a non-linked box over a linked image, but can I set up a linked box over a larger linked image, with the overlying box intercepting clicks just on itself? I'm guessing that this would require some JavaScript, but at this point I only have a hazy understanding of JavaScript, so at very least I need to know whether JavaScript can ultimately do that, before I get into this, and I'd love to get a generic script to do this.
The overlying box can be in a consistent location -- like full-width at the bottom of the underlying image -- rather than, say, a tooltip located relative to the mouse cursor. Seems like a script would have to respond to a click in the image area, then check whether it also falls inside the overlying box, and act accordingly. Could a script do that, and, um, might I get a rough scrip for something like that?
Thanks,
Drew
I'm working on a website that hosts music, pictures, and videos. I currently have 4 pages, a title page, a music page, a video page and an image page. This works well, but I would like to be able to incorporate the ability to play music and look at pictures at the same time. To do this, I created one HTML document with each former page inside a div with a descriptive class name. Then, I wrote a javascript function that shows and hides each div when it is called, so the page acts like it's 4 pages but it isn't. So i embedded the music player in a footer div that stays open as music plays, meaning you can switch back and forth between each media type while keeping the music footer open and playing. This is where the problem lies. When this is done, the image magnifier jquery function I used on my image page no longer works correctly, UNLESS the image div is shown at the beginning when the page opens. It's only then that you can switch between media types and still magnify the pictures. If the title div is shown first (like it's supposed to be), and you go to try and magnify an image, it doesn't work.
At first I thought maybe some of the external javascript libraries were negatively interacting with each other, but then I happened upon what I explained above and now I'm just at a loss as to why the images need to be the first things displayed for the magnifier to work correctly.
The jquery code I'm using is called jQuery Image Magnify and it's made by Dynamic Drive.
Edit: The way that I'm hiding and show div's is with style="display:none" to hide and style="display:block" to show.
Interesting question. Probably because the element needs to be actually visible for the jQuery Image Magnify function to run. I'm willing to bet that plugin uses imageElement.onload for the image magnification handler or something like that, which I think doesn't work if the image element is hidden.
As far as a solution goes, try setting your image to visible at when the page first loads, maybe with left set to -9999 px or something silly like that so it's technically still "visible" but the user can't see it. Then, after the image has loaded and (hopefully) been magnified or whatever the plugin does, move it to be a child of the div its page is supposed to be on and get rid of the negative left value.
So I'm working on my first bookmarklet and had a few questions.
The goal of the bookmarklet is to overlay a video player on any website to essentially dim the lights everywhere except the actual player.
The user flow would go something like this:
user clicks the bookmarklet and they are able to hover over certain elements of the page where they highlight (think Firebug inspect)
user hovers over the correct div (where the video is) and clicks it
that area that they click remains "see-through" while the rest of the visible browser page goes black (or say 90% opaque.)
clicking the bookmarklet again would clear the selection and allow the user to start over.
Another idea would be to allow the user to "drag / draw" a rectangle where the video would be and then step 3 would occur after making a selection on the page.
I'm just looking for any ideas / snippets / anything else that might be out there to get me going in the right direction.
Try putting an opaque/near-opaque black div over the entire screen, then setting the z-index of the video to something higher than the black div.
You can use something like what's at this page to determine what element the mouse is over and highlight it.