I'm really not that good at Javascript and that, so I need another bit of help. I want to be able to do a quick bit of AJAX using PHP then when the ajax response is finished show the response in a div and SLIDE it down nicely.
The basic AJAX side of it is no problem. But I want to be able to have it slide nicely without using any framework like jQuery or MooTools. Mainly for learning, but there are other reasons. So, any help on a very simple way od doing so would be handy. I can't really find much online. If I have to use jQuery then I guess I can, I have played about with it but I'm not a fan of Javascript at the best of times...
So yeah, pretty much any advice/tips/thoughts/help would be really handy!
I guess the basics would be something of a timeOut() in combination with increasing the height until it is full height:
set the display of the element to none
get the full height of the element, something like:document.getelementById('IDofElement').style.height
set the height to 0 and the display to something like block
set a timeOut() and increase the height in the called function, activate a new timeOut() if the element is not already full height.
The only real disadvantage of not using a library would be that you would have to test in a lot of different browsers and perhaps make modifications according to the browser used. Libraries have already solved that problem for you.
Personally, I'd just use JQuery. If you want to see how they do it, then download the developer version of the library and look at the code.
If you're not a fan of javascript, then use a library, it means you have to write less.
Related
Ok So I am making a 2.0 version of a my website and completely re-designing the layout I have brought in bootstrap because what I mainly want to do is make the website mobile friendly so basically what I'm trying to do is something along the lines of this and done in php
if(browser-width < 600px && browser-width > 100px) {
<div class="mobileHeader">stuff here</div>;
}elseif(browser-width > 700px) {
<div class="sidebar">stuff here</div>;
};
I hope this makes sense I have been trying to figure this out for awhile to no avail.
You can't access browser width (or any other user properties) with PHP. The only thing possible would be to set the width in a cookie (with JS) and then read it with PHP. However, this works only on the second request, as PHP gets executed before JS.
I do suggest you read something about responsive webdesign and you might find out you don't actually need this.
You cannot know the browser-width in php. You have to do this with javascript. Also even if php had this result, it is static, so what if you resized the window? Php wouldn't detect that. In my opinion you are choosing the wrong tools for your task.
Source to prove my point
The browsers don't report chrome width on the request. So PHP will never know that. You will need to do that with CSS media queries or with JavaScript.
I'm trying to create a mosaic type script in Javascript and PHP, which makes up a big image with many different images made from small square tiles. The idea was to "fake" the effect by having a background image and laying over the tiles on top of it, and making their opacity 50% or so. This works decently enough, but it definitely doesn't look as good as I want.
My question is, does anyone have any recommendations on alternatives to this method? I know there are definitely ways to do this in Flash, such as the Mario Lemieux mosaic:
http://www.mariomosaic.com/mosaic/
But I would like to avoid flash if possible.
edit: added live example
So I haven't touched the JS layer yet, this has all been server-side stuff. There's no pre-loader or anything really in terms of making it more usable, that will come soon. But here's what I've got so far:
http://www.mtimofiiv.net/mosaic_example/
The little tiny image tiles are created from images uploaded by a user, and they're run through a class I've built to generate them. I used GD2 to make them grayscale so they will absorb the color of the background image better, and I "pixelated" the background image in Photoshop.
If anyone wants to see any part of the code let me know and I'll add it to this post. Also when this project's done I intend to make it available on Github in its entirety for whoever wants to do the same.
Perhaps the fact that your demo HTML is 733KB might dissuade you from this particular approach. I think if you want to do something like this, you really ought to employ the canvas element, and work in some kind of "ajax" loading. That could actually be kind of interesting. However, if you are going to generate this much HTML...you might consider having a client-side script do it, if possible. Just some thoughts...
I want to have a photo album on my website such as this:
http://www.yelp.com/biz_photos/B9S9wNChMFRz6IAL_0n6pA?select=ADeqFE2Tj2s7eM8WuQibbQ
I'm looking for something where the photo that is displayed is also highlighted as thumbnail below that so that users can select photos rather than having to click next.
Also, I want to be able to have multiple photo albums so each set of thumbnails is different. Perhaps something where the whole page doesn't have to reload, but just the photo itself and the highlighted thumbnail?
I've done some research but I'm unsure of which type is best ie- PHP, javascript, etc...
I only have experience in HTML, CSS, and basic javascript and limited PHP.
I'm hoping somebody can point me in the write direction as to what to look for.
Thanks
Learn jQuery.
http://www.jquery.com
Rejoice!
http://blueprintds.com/2009/01/20/top-14-jquery-photo-slideshow-gallery-plugins/ <-- take your pick.
The jquery cycle plugin is fantastic and super easy to set up:
http://jquery.malsup.com/cycle/
and specifically it has the ability to do auto-thumbnailing as navigation:
http://jquery.malsup.com/cycle/pager2.html
If you know CSS you can take it from there.
As I myself am not the best (but still trying to get better!) when it comes to the more UI related technologies (CSS, JS, HTML etc), I have found using popular libraries such as JQuery Tools to be quite helpful and very easy to use. I believe the widget below matches up with what you are looking to do, and it also comes with a tutorial and helpful customization examples:
http://flowplayer.org/tools/demos/scrollable/gallery.html
Best of all I think JQuery Tools and Flowplayer are open source, so that means once you get the widget working, you can also delve into the code to try to gain a better understanding and hopefully one day take your own crack at a similar solution.
Good luck!
Is there a way that you can use PHP to automatically fit a web page into the size of the browsers window?
Not with PHP, but with Javascript or CSS you can.
PHP is server-side technology.
JavaScript and CSS are client-side technologies.
Even with javascript it's often buggy. It's very difficult to take thinks like horizontal taskbars into account. Javascript may find the window to be 500px in height and with the stuff that the user is running it's only 300 or so. Additionally, if someone has Javascript or css turned off, it ruins everything. Best bet is to design in a way that all browsers can deal with it. Make clean compliant designs and let users mess with it if they want to.
Using PHP or server-code more or less to change HTML/CSS elements wouldn't be optimal. You would want to use HTML and CSS directly. If that doesn't work, your absolute last option might be JavaScript but that's not best practice.
I have some animation I would like to try, kind of a shopping cart/checkout action animation. wanted to know if flash or jQuery (JavaScript) would be best?
The backend is all in PHP and I was thinking of using AMFPHP (If Flash) or jQuery (Any frameworks???) but wanted to know the drawbacks/features of each approach.
Thanks for any advice,
--Phill
--UPDATE--
Okay so the animation I would like is when something is purchased to display some text and a image of the item in some sort of slick animation. Want to give it that Flash feel but maybe I could do this in jQuery?
-- UPDATE--
Would like it to have a TV commercial feel but interactive, not sure of the animation(s). Clean, Crisp, Fresh, etc...
JQuery is better because it's easy to program a compelling experience with just notepad. My rule of thumb is "If you don't need flash, then don't use flash." Also a lot of people are using iPhones to surf the internet now, you don't want to alienate that market by plopping a big flash hurdle in front of them that they can't jump.
Check out Themeforest.net and see what designers are doing with just JQuery. It's pretty amazing how far we've come with just simple javascript.
A lot of animation that we typically turned to Flash for can be accomplished via jQuery. Obviously, frame based (onion skinning) type animation (characters, cartoons, etc.) is still best left to flash, but nearly any type of animation you'd do in flash with tweens (position, size, color, opacity, width, height, etc.) can easily be accomplished with most of the modern .js libraries including jQuery.
So, yes, jQuery would certainly work depending on the particular type of animation you are looking for.
UPDATE (per your updated info):
"TV commercial feel but interactive"
What does that mean? If I were to interpret that literally, what you want to do is produce actual video based content and wire it up in Flash.
However, that seems like a heavy overhead to just check out of a shopping cart. I'd really think about this from a UX perspective before going too far down this path.
"Clean, Crisp, Fresh"
So not dirty and blury? ;)