I am looking for a smart way to emulate the iPhone Springboard behavior of changing icon possition. I just want to change few icons on ONE screen.
It should be run in JS on a webpage.
Any suggestions to start?
Thank you very much
I think jQuery UI Sortable will be good for that.
Check this demo. If you would add icons to the elements in that demo and style it a bit I think you would get what you want.
Related
I am creating a website using a jQuery hover effect. The website is perfect on desktop, with the mouse on the image I have an hover effect that put a black layer on the image and show the text inside of the box, then click on the link inside and I will redirected to the page, but when I try on ipod touch/iphone/ipad it doesn't work.
Here is the fiddle: http://jsfiddle.net/IronFeast/RvfQg/
How can I modify my code? I'd like to recreate a double click on the box to show what's inside:
1st click) selection;
2nd click) start the effect.
Any help would be appreciated.
I like how you're using all CSS here. You're question isn't entirely clear, but I think that this is what you want: http://jsfiddle.net/howlermiller/fUSXp/2/ (try on an iPad)
It would be super simple to get this functionality using jQuery, but since you already put in some work to make it all out of CSS, I kept my answer as all CSS. I used the checkbox hack, and I tested it on an iPad to make sure that it works.
This hack works on desktop browsers too, so if you click on the box then the styling will stay, rather than going away on mouse off. That could be either a good thing or a bad thing, depending on what you're going to do with it.
P.S. Using pure css (aka the checkbox hack) isn't really the best way to do this. It makes your code a little less flexible and less reusable. But it does work perfectly well.
EDIT: Stop the presses, there's a bug in Safari 5. I found it thanks to this StackOverflow question. All you have to do to fix it is to add an empty onclick to the label (yeah yeah, another hack, I know, I'm not happy about it either). In my own tests Safari 6 does not seem to have this bug, so you won't need it unless you're supporting Safari 5 (which, realistically, is probably a good idea right now. If you're using this in a few months though, then you could probably use the old fiddle). Here's the fixed jsfiddle: http://jsfiddle.net/howlermiller/fUSXp/3/
As an alternative you could also try adding a class like 'hover' to an element when it is clicked and modify your CSS to animate on both cases: using pseudo-selector like :hover and when the element actually has the class 'hover'.
You will probably want to remove the class from all other siblings of the clicked element before you added to the currently clicked element.
The changes in the CSS will be similar to this :
.view-sixth.hover a.info,
.view-sixth:hover a.info {...}
so basically adding two similar selectors for each of the animated elements.
Can I, by using PHP make a zoom effect that will zoom in the part where I clicked and visually add a new view to that section? What I want is to have a background picture and some clickable areas, when user click on a specific clickable part, that part will zoom in to a certain degree and then display that part in enlarged view and also add another view upon it.
What I want is something similar to http://www.naranglardor.com (click on the blood stains(and no, I'm not in a satanic cult, that book is a fiction about something)).
Is this possible with PHP?
Thankful for tip or any direction towards approaching this.
Best regards,
Gabriel
No, you cannot achieve that with PHP.
PHP is a server-side scripting language, meaning that the code is executed on the server.
What you need to achieve such effects is a client-side language, like JavaScript better utilized through jQuery.
To point you into some sort of direction, you can check this links out:
Codrops Tutorials - Excellent for jQuery based animations and effects.
Learning jQuery - Tips and tricks with jQuery.
I am currently developing a wordpress plugin. This plugin requires to drag certain items onto an image. The layout is like this:
And i need to save the points that are dragged onto the picture into the database. I also need the ability to edit the points or remove the points.
Does anybody knows a good method of achieving this?
Kind regards,
Jack
Edit:
Maybe i'm being a little bit vague about this, but all i need is suggestions.. I do not need people to write code for me.
A google search gave me:
http://www.codingforums.com/showthread.php?t=160798
http://jquery-howto.blogspot.com/2009/07/identifying-locating-mouse-position-in.html
jQuery get mouse position within an element
http://www.switchonthecode.com/tutorials/jquery-snippet-relative-mouse-position
My suggestion is that onmouseup() you get the co-ordinates and store them.
A bit more googling and I found this answer:
Alternatives to trigger('mouseup') to stop dragging programmatically
Maybe this will help you.
Good luck :)
That's a lot you are asking eh, you can't expect us to write it for you but we can point your nose in the right direction :)
I suggest you start looking at the jQuery UI draggable plugin (and of course droppable too), it offers quite a flexible drag and drop implementation.
Manipulate the jquery ui draggable plugin
http://jqueryui.com/demos/draggable/
I'm programming a site using PHP, mysql and jQuery. I would really appreciate and hoping for some suggestions as to what I can use to create pie, bar and line charts, where I have the ability to change the actual graphic thats being shown. For example, if I wanted to have the bar graph use an army camouflage graphic and another one with flower pixels. I've done some looking around, but always found it helpful asking others for what they use or have seen.
Also any recommendations to using silverlight for this over any existing PHP and jQuery extensions?
Thanks in advance.
It would do you good to check out FusionCharts XT. It renders charts in JavaScript, which means your charts will work very well on iOS devices too.
With Silverlight, iOS devices are out.
FusionCharts XT can be used with jQuery too, with jQuery's syntax : http://docs.fusioncharts.com/charts/contents/?jQuery/Overview.html
As you're working with jQuery right now I think these must be good libraries for your use. Besides, the jQuery would extend your page's size up to 77kbs so try to use all benefits of it.
http://www.1stwebdesigner.com/css/top-jquery-chart-libraries-interactive-charts/
http://www.jqplot.com/
I want to add those little buttons many webpages have that are simply a circle with a ? on the middle and that on click show a little dialog with information. Is there a simple way to do it?
The title HTML attribute for a rollover message? Otherwise, I'm sure there are easy ways to make those with jQuery.
jQuery is probably what you're looking for. It's a JavaScript framework that has many plugins available, some of which do what you want.
One is http://flowplayer.org/tools/tooltip/index.html. You can search for others at http://plugins.jquery.com/ or by searching google for "jquery tooltip".
Can be done with jquery & css. Lot of example out there.
jQuery Tooltip
CSS Tooltip
I suggest to use Simpletip :)
Do you mean something like this?
This could be done with jQuery, an example here. (see demo)
And many more with google here.
Good luck!!
You said javascirpt not Query so here it goes. See demo here.