Php page jumps right when navigating from page to page - php

Building a basic Php web site and my "Events" and "Join" pages jump slightly to the right when moving from page to page. I know this is something really simple, yet I can not remember, nor figure out what I have done wrong. Any help sincerely appreciated.
(link has been removed because this question has been answered)

This is actually a rather interesting exercise. For most circumstances, the comments provided by #Vainglory07 and #Kristen are correct: just live with the fact that scrollbars are going to make a centered page jump slightly between pages. In the common case that most of what you're doing is in some sort of container HTML tag there are ways of manipulating the location of the container to keep it from moving when a scrollbar appears. In case this bothers you (it looks you went with just making the container sufficiently long that a vertical scrollbar does appear), there are two possible solutions I can think of.
(Easy, but forces you to make design tradeoffs) Design your page around CSS that specifies the left attribute of some container tag, e.g. either some container div or the body tag, which people often forget is perfectly fine as a container by itself. This precludes you from centering the container or otherwise moving it around.
(Harder, but gives you the ability to center) Many times we would prefer for our container to be centered rather than aligned from the left. #Reigel gives a nice example of using Javascript to detect whether a scrollbar is present at How can I check if a scrollbar is visible?. Using the same idea we can keep our container from moving from the user's point of view when a scrollbar pops up.
Note that the second solution will cause problems if you're trying to follow responsive CSS paradigms. The second solution is also fairly brittle. Resizing the page will mean the calculations for figuring out how much space to add to a side of the container get thrown off and the page will have to be reloaded. Moreover, this is overkill for most (almost all) circumstances; often it's easier to just ignore the "jump" that occurs when a scrollbar appears. You get used to it after a while. So the general solution is just live with it. For those people who obsess over that "jump" though, there's at least a partial solution for you guys.

Related

jQuery hover effect iPhone/iPod touch/iPad not working

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.

How to create a "forced" lightbox, i.e. a "Pause" screen with content behind it

I see Google doing this all the time. They are able to successfully create a lightbox that can't be ignored... and even though the content behind it is visible (i.e. a form you would otherwise be able to fill out), you cannot do anything with that content-- I've even tried using the Document Inspector to get around the forced lightbox, and it's very, very difficult.
So, I'm not as concerned with the validation of the content BEHIND the box as I am with really nailing home the point that the lightbox is "not to be messed with". In other words, what's the best way to show a box that the user isn't supposed to (or able to) click out of until they've completed the action thereupon, while simultaneously showing a desaturated or partially whitened-out (but still visible) version of the content behind it?
As I said, I can code to make certain that the content behind the box isn't actually usable unless the requisite actions have been completed (so even if they get around it, it won't be functional). I just want to be a bit more stern with the people out there (like me) who will try simple things like a JavaScript blocker to prevent the content from lightboxing properly. Ideally, the solution I'm looking for would be cross-platform compatible and difficult to get around. I'm open to any type of solution that can be done via open-source code.
http://fancybox.net/
has an option hideOnContentClick: false that will only allow the user to click the "X" button in the fancy box to hide it. You could hide the "X" close button through css or take it out completely and have a javascript call when the user has completed all the fields or submitted to close the box.
Hope I read your question right.
Most lightbox features come with this. However, making your own, it's a 2 layer concept. 2 DIV's basically. One which spans to all 4 corners of the open browser. Most people will give it a color or something black and then set a transparency on it. After that you set a high zindex on it. Once you have that one in place you put another DIV inside of that one to mimic your lightbox needs. This way a user can't just click around the box and get to what they want. All in all though, javascript and CSS are easy to work around, all you need is a developer tool in your browser to just turn them off leaving you with only the raw form.
EDIT
Bottom line is, anything in the client side is always fallible. If someone's determined enough they will get around it. And if your doing it as a means of security from bots, that won't work, if someone who controls the bot is smart enough. I'm only saying this cause I hope there's not any false hopes that it will be a means to an end of a problem some how. Don't get me wrong it will detour many to a point, but those with malicious intent will break the concept easily with a little XSS or other various measures designed to break client-side only concepts.
EDIT 2
Both Jquery UI and Bootstrap from Twitter have good Dialog concepts that a normal every day user of your site won't be able to smash around easy.

Site blanks white when reload, how to avoid this?

Sadly my site is a little slow, especially its initialization calls (its another question). On a server, that (or something else) causes a little "blanking" effect, and the browser shows a blank white screen for too long. OK, its just a blink of an eye, but still disturbing.
How can I avoid avoid this?
Maybe you are calling too many (or too big) files in the head. Try calling javascript files (if any) right before closing the body tag. In fact, the browser can't render anything until it finishes dealing with the header, so it may be causing your problem. If you have a lot of css files, mergint into only one file could help too.
This tool could help you a lot with performance issues:
https://github.com/farhadi/SmartOptimizer - I really recommend you to learn it and give it a try.
Try going to this page and putting in your site's URL to see if it can identify any big issues that might be causing the slow-down.
Also, take a look at the techniques mentioned here and make sure your site is using as many of them as possible.
If you have any specific question on how to implement the suggestions from the above links, try searching google, and if you can't find a good answer or still have some questions, ask another question here. :D
It's somewhat extreme for your use case, but you could conceivably have a "loader" page which would be a shell with the header/footer which would only be a few kb; and then in that page use ajax to load the slow page into a div with placeholder text like "The page will be loaded in a moment. Please hold."

A client wants me to do CSS coding (only) but doesn't want to provide me the php files

I have a client who wants me to do CSS coding only, but doesn't want to give me the php files.
Right now, I just have access to the live website (with no CSS).
It is entirely made with tables and I want to use divs instead
I'm not sure if it is possible to do the coding
I thought about copying and pasting the generated HTML code from each page
Will this cause possible problems with the end result?
Yes, this will cause huge problems: you'll do an awesome job, client will have trouble integrating it with their site, client will abandon your awesome work.
IMO, you should let the client know that you'll do the best you can with what they have given you, but you would be able to save them a lot of work and do a better job if you could have access to the source code.
If you know that you can't make the client happy with what they have given you, though, it would be doing everyone a disservice for you to try.
If you absolutely can't convince them to give you access to the source, then this client sounds stupid:
He has a layout which is table based.
He wants you to magically make it look better with CSS, without having access to the source.
"#Phoenix I don't see any classes or IDs." - there are no classes or ids to hook into.
You might be able to do it if you used some CSS3 selectors to, for example, select the 3rd td inside a td inside the 2nd table to apply styles to ;)
But, that won't help if you have to support older browsers, which makes this impossible at the moment without doing something differently.
I don't have full knowledge of your situation, but here's what I would probably do (if I couldn't convince them to give me access to the source):
Open the live site.
Copy the HTML source code.
Paste it into a new local file.
Add this into the <head> section: <base href="http://the-clients-site.com/" />.
This will let all the assets on the page load from the client's actual site.
Now, you have something to work with.
You have to keep track of ALL changes you make to the file.
The first change should be adding your own blank style tag.
Then, you can add id and class to whichever elements you feel need it.
You should try to avoid moving around elements, unless it's absolutely required. Those changes are a whole lot harder to explain to someone. I know from experience.
You should be able to style the page properly now.
Then, you deliver the completed page, and the documented list of changes you had to make to the HTML (add id, here add class there).
The client should then be able to integrate the changes into his site.
Well, at a bare minimum they'll need to modify ther PHP to reference your CSS. More importantly, you need to be able to hook your CS up to elements - Do tables/rows/etc. have Ids or classes attached?
If they are clever and have some good separation between code and presentation (using a templating engine or similar) then you can probably just edit the template / css.
If they won't let you edit the PHP and you come up with a new awesome layout, they will have a nightmare job trying to integrate it and probably won't bother.
I don't see the problem. You can style tables just as easily as divs. You don't have to know how the wall is built to know how to paint it, which is pretty much all you've been hired to do. Only problem I could see would be if they haven't added any classes or ids to the elements yet. After all, what the browser/client sees is the only thing that needs styling, and since you can see everything that the browser sees, you can see everything that needs styling.
If they have added classes/ids, then just take a copy of a page and style it in a testing area, and then once it looks nice, you take a copy of another page and make sure it looks nice with it too, add to the CSS if there are any new unstyled elements that didn't exist on the first page, once it looks nice, then move on to another page, and another repeating the process until you are satisfied that it appears that every page within reason would look nice with it.
If they haven't added classes/ids, tell them they need to in some capacity before you can work on it, perhaps provide some guidance on the issue.
I'm actually doing this right now for SO.
I'm working on a userscript that provides an alternate "clean" stylesheet for the StackExchange network. I have no access to the SO engine. I am using the Chrome Inspector to look at how the elements are set up. I recommend the same. (Although it is a little different, since I'm modifying the original CSS file.)
You can easily identify what you want to style with the Inspector and then work from there. I would suggest that you ask your client for a list of classes and IDs though. (I got that in the form of an existing stylesheet, you can go about it in a different way, if that suits you and your client.)

Sporadic/random page display problems

This is for a website written in PHP (with very minimal JS, only used for a drop-down menu), using CSS, and a mySQL DB.
95 percent of the time my pages display fine. But occasionally as I click back and forth between pages, the page I've just clicked to does not display properly. It's always the same pattern of non-display when it happens: the top 10 pixels of the header (which is a 220-pixel high jpg) will be displayed, then immediately below that the footer division of my page displays. The rest of the header image and header division are missing, as is the content division -- so I end up with a page that's about 60 pixels tall and is missing the entire middle portion of its content.
If you hit the refresh button, the "bad" page will immediately display properly.
This happens randomly, as far as I can tell; it might happen on any page in my site. Sometimes it doesn't happen for thirty or forty or more page views, and then it will pop up again. Sometimes it might happen two or three times in a row.
I've tried making sure all my img tags have height and width specified, tried using PHP's flush function after right before the tag, adding a flush right before the function that access the database. Nothing I can think of has helped.
This problem has also occurred (in a similar random and only very occasional fashion) for the three other people who are helping me test this site, so the issue is not my particular computer or browser (although it may be Firefox related, since that's the browser we all seem most likely to stumble on the problem with).
Any suggestions would be deeply appreciated. This is frustrating as all get out. I'm still pretty new at web programming, and I can't find anything that explains this strange problem.
Thanks!!!
Sounds like a server problem to me as everything else seems to be random. I would check for errors in the log files and if you have the opportunity, check the site on another server.
Without knowing anything else about your site, I'm going to go out on a limb and suggest you're embedding a block level element inside an inline element.
Maybe something like
<span id="header">
<div id="content">...</div>
</span>
I say this because
Googling for sporadic layout failures returns very little
I've just fixed an issue that sounds similar. I was accidentally embedding a few floating divs inside an anchor tag. Most of the time, Firefox would treat the anchor as a block level element. But occasionally, it wouldn't, and the divs inside the anchor would be spewed all over the page.

Categories