I want to edit image in real-time with javascript only. Im new to Js, so this may be dumb question...
I have 3 images:
Background
Car one
Car two
I want to display one on each other in real time. It should look like this:
And the cars should be moving there and back (I must be able to edit their position without refreshing the page).
Im not asking for complete solution, just a few links or pages and some information where to start with. I know Javascript syntax, I just have never used it in any website. If it's not possible, or it would be too hard, I gonna use flash or Java aplet, Im okay to use jQuery or other Javascript libraries. Thank you for any clues!
You might want to check out jQuery animate and z-indexes. What you'll want to do is with z-index place one on top of the other, then animate with jQuery accordingly.
http://api.jquery.com/animate/
http://css-tricks.com/almanac/properties/z/z-index/
Related
I found a lot of resources about my question, but I'd just like opinions based off of a high level overview of what I'm trying to do.
Basically, I'm using a combination of Javascript, and HTML to build a customizer for a friends' website. I should start by saying that I have some HTML experience but this is the first time I'm using Javascript (I am experienced with Java). The ultimate goal will be something like a customizer to allow users to select the parts of a bicycle and change their colors to place custom orders.
I've got the various parts of the bike as images files, and I'm using this jscolor color picker found at: http://jscolor.com/examples/#example-showing-hiding to allow the user to select a color from the color map. My plan is to layer a given part (photo) on top of a copy of the same photo, and fill only one of them, like layering in Photoshop. This way, the part fills in the correct shape, instead of filling as an entire square of the image file. As the cursor moves, the color should change in realtime. Once done, they can save the part and the color record will be kept on the back-end.
As I'm new to Javascript and not that experienced with HTML, I'm finding it a bit challenging to get this on the right track. So I'm hoping for some advice from some people who are experienced with HTML/Javascript/CSS to point me in the right direction to get this going along a better track than it is currently. I wasn't sure how to "phrase" what I'm trying to do.
The three main parts I'm addressing:
Using HTML buttons to load a different bike part (essentially load a separate image file).
Adding the color from the jscolor picker to the image of the selected part.
Saving the state of the part when the user clicks a Save button.
I will continue to search the forums as I already saw a few leads similar to what I want to do, but I mostly want to know if my approach seems feasible for what I'm attempting to do.
Thanks in advance!
Using normal HTML buttons will make things complex for you.
I think leveraging HTML5 Canvas API is a better way to approach this problem. Canvas is the HTML5 element for helping out you do the graphics manipulations using JavaScript. Learn more about canvas here.
You can make use of a library such as Fabric.js to make things easier.
I need some help please with AngularJS/Bootstrap to be enable me to have a smooth fade based flashing button (Don't want a simple "on/off") ... I need to highlight to the user that they need to press submit.
I've done lots of searching for this and there's examples of fading one panel out and another one in... but there doesn't seem to be a simple version just to "flash" some text.
My apologies but I know my information in my question is a bit thin on "content" but I am fairly new to Angular (I only know the basic constructs) and just have no real clue where to start.
TYIA
You can achieve this by using ng-animate. Check this documentation for ng-animate. Basically it is all about css animations.
If you need any help in creating such css animation classes, refer to this css animation generator.
Does anyone know of a jQuery content slider (not just an image slider) that allows you to specify a grid of elements?
As an example, this is the sort of grid that I'm after:
http://cl.ly/image/0O213C1n2b0s
You can see that it's a 2x2 grid. With the controls, when someone clicks on a 'next' link, it should scroll to show the next 4 elements. I'd like to be able to have multiple instances on a page, each having different grids (I may be 3x2, 2x2, 4x1 on the same page)
Also, as an added caveat, I need this to be responsive.
First question is; does anyone know of a solution that already exists which would fit my requirements? If not, that leads to my second question; would anyone like to help me write such a thing? I'm relatively savvy with javascript (more specifically jQuery if I'm being absolutely honest) but by no means an expert.
I've done a fair amount of googling, but came up short. Hopefully someone is way ahead of me and has already written something along these lines.
What say you, Internet?
Have you seen this:
jQuery grid syle slider
I can use CSS or javascript but I've been struggling with it. It needs to be an "on-click" behavior when you click on the number in the lower right corner... like this one: http://www.winteradagency.com/mrw/images/residential2.jpg
So that when you click on #1 you get the first photo, #2 the 2nd one and so on...
Any ideas?
thanks!
Without showing what you've tried, I'm a little reluctant to just give you the answer. You'll learn more if I don't. If you provide code and show where you're stuck and such, well, that's a different story.
That being said, if you want to use jQuery, there are some nice plugins that have a similar functionality to what you want. One of them being Easy Slider. Here's also a list of 15 jQuery Image Gallery Plugins that I got from doing a quick google search.
Why not create four buttons and align it to right end, and everytime the image changes you update the text of the buttons. Each button could simply update the image to the one corresponding to its number.
I want to have multiple video icons at the top my website's front page. I will have about 20 or so which won't fit on one line (I want to keep the videos on one like) so I thought of having two button on the right of the group and on the left of the group where you click to scroll and view more videos. Do you know an easy way to do this? I can pass in the video links from the server in different Divs or anyway that will make it easy. I thought of using AJAX and pass it different set every time from the server with every click (I'm using Rails and it's fairly easy to do it) but that will be an extra load on the server which I'm trying to avoid. I'd rather send all the icons at once and let the JavaScript handle the scrolling.
I thought of using iFrame but I don't like the idea of scrollbar and wanted to be more like button
Any ideas?
Thanks,
Tam
Use a JavaScript library like jQuery. There is myriad of plugins that do exactly what you want. Here is one