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.
Related
Long story short is. I created this http://jsfiddle.net/paDmg/368/ and I would like to add it to www.avueduesgins.com/new on the right hand side underneath the banner next to latest works.
The reason why I do not use a widget is because I do not the transparent background. I would like if I could replicate the style divs in a 3x3 fashion but they need to be rollovers...
Our php guy is out of town for 2 weeks, and I would like to get this project finished. I have very limited skills in php, but with the right direction I am sure I can achieve my goal, I just need help finding which way to go.
If there is another way to achieve what I am trying to do I would like to take any advice. Thanks and hope someone can help a fellow out.
Why not add it as a widget, but then use CSS to remove the background? If that's the only thing preventing you from using a widget, CSS is easier than changing your sidebar template.
#yourwidgetsid {background:none}
I can't seem to find a straight forward answer. "Closer to the header" or "closer to the footer" with some sort of explanation is what I need.
Let's say I've got a PHP driven website with the main files being header/content/footer.php
If I'm creating a "branded" "app-like" website (cheap illustration here)
where should the external "UI" elements be coded? Is there a best practice to include in closer to the header (rendered first) or near the footer (rendered last)?
http://i47.tinypic.com/29vhzx5.png - let's assume gray is UI elements and blue is individualized content/sidebar area?
Just need some assistance of where that should be coded as a best practice, if it matters at all!
If we talk about UI, it comes first and before functionality. UI elements comprise of markup and CSS so obviously it should be rendered first, the functionality pieces should come last because it is important to let users first see the UI and after that let them interact with it. So you should use a render first policy.
Hope that helps
I am getting started with HTML and PHP. Doing alright, I understand the syntax and everything. But... what I know is simply how to build page elements that may interact with other .php files in my site. But what if I want to interact with other elements in the same page?
This is what I'm trying to achieve:
I got some text and a button. I want to press the button, and that will cause my text to become a textbox which I can edit, and afterwards press the button again to convert the textbox back to plain text.
That is what I don't quite get: interacting with other elements to change their attributes/values, seems to be little documentation about that, or I am looking in the wrong place. If that is the case, can someone point me to the correct learning source?
Thanks.
You need javascript for that.... There are loads of examples online and everywhere:
http://www.w3schools.com/js/tryit.asp?filename=tryjs_dom
You are looking at the wrong place as you can't do that with PHP. Changing elements on the client side will involve JavaScript. There are a lot of ways to change elements with JS and to get a quick start I'd suggest you take a look at jQuery, a JS library that will make it easy for you to access and change elements.
What you're looking for is client side interaction. Javascript is the ticket for this and you'll have to include a tag in the head of your html doc.
Look up javascript on w3schools.com and then learn jQuery which is a great implementation of key javascript principles with a lot of extra features like animation and client/server side interaction.
You are moving into the realms of Dynamic HTML. The easiest way I have found to manipulate elements within an HTML page is to use JQuery.
PHP is a predominantly a server scripting language and has very little impact on browser-centric behavior. HTML is a markup language, but with few exceptions isn't dynamic. You want to look into content/browser scripting languages - depending on your medium, the two more popular for the time being are Javascript and Actionscript.
PHP does not allow you to change your HTML dynamically. As the other people mentioned, you need Javascript for that.
What you could do is reload the page on button click and change a session variable (for example) to decide wether the text is displayed as a textbox or just text.
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.
im a pure backend programmer and i find it so difficult to position divs and add css styles.
what are your advices to make this as simple as possible for me?
use dreamweaver? what can it help me with exactly.
i have no idea how to add style to my prototype or handling positionings of divs and elements. some guides? tools? softwares? online scripts?
please all suggestions are welcome! guide me through...im all business logic and none design head.
eg. http://www.workey.se. how do you start with layout, design and all that stuff...
Depends exactly what you need to do, but learning the basics of css is pretty easy, mastering it is far more difficult of course. I'd suggest you just learn CSS and makes sure you get a decent browser add in like firebug so that you can see exactly what is going on. I'm not a fan of dreamweaver personally.
Dreamweaver is a good tool for initial design but I wouldn't recommend it for much more than that. Of course many people use it exclusively.
Why not try some CSS framework like the 960 grid? It can help with positioning elements on the page and leave you to worry about the specific implementation of your design like fonts and colors.
http://960.gs/
If you want simple page layouts something like YUI might help you. It has a large collection of pre-built code for you to use. Particularly the Grid Builder is great for creating multiple sections to populate within pages.
As for tools as long as it has decent syntax highlighting any text editor would be fine. Personally DreamWeaver tries too hard to 'help' and instead gets in the way but then I'm happier just with the raw mark-up.
I agree with some of the posts above, and empathize with the "pixel pushing" difficulties you might encounter when starting out.
I've been creating and recreating HTML layouts for about 5 years now, and after trying YUI, Google Blueprint, several css reset libraries, and my own home-brew layouts, I find YUI's grids, fonts, and resets are the most flexible and useful. Their templates are a little tricky, but only a little.
Here's my answer to a very similar question (in case people would rather not click through to see the answer...if this is spamming or against the rules, please let me know and I will remove the answer)
:
"
All of the above are excellent. Dreamweaver (imho) has the most complete set of features for designing pages (Adobe actually licensed some of the technology from TopStyle a while back to improve their feature set). And it has excellent validation built-in.
Another FREE tool (remember, Dreamweaver will cost you at least a few hundred unless you steal it) is Aptana IDE. It has most code completion options that Dreamweaver has, and similar validation tools.
Aptana and Firebug plugin for Firefox make a pretty good combination. In addition, there are Firebug extensions and other Firefox plugins that are tremendously useful:
Pixel Perfect: allows you to add a semi-transparent background image to line up elements on a page (shows up as extra tab within the Firebug plugin).
Code Burner: adds html & css reference tab to firebug.
ColorZilla (plain FireFOX extension): analyzes your colors and helps you manage them.
MeasureIt (plain FireFOX extension): Helps you measure distances between elements on a page when Firebug isn't enough.
WebDeveloper toolbar: does all sorts of nifty stuff, but I only use it to resize the browser to a specific window size (like 800x600).
"
you should use css templates (a list here)
or download an already made layout (everywhere on the net) and change bits with firebug to see what pleases you. (An example)
Edit : i am 'only code' too, i style my web UIs by hand. But there's a lot of addons for firefox that will greatly help you design your layout. (Here's a list)