Have a look at the following site http://www.soe.gr.
The whole page has been built with CSS Page Builder Magic 2 (projectseven.com).
Every button is a link to a different .html page.
However, I do not know why every button press creates a flash effect in the page, the background changes instantly color and generally it gives an impression of abnormal operation. I have not met any site with such behavior except some pages inside projectseven site.
Do you have any idea why that happens? Is it something wrong with Page Builder Magic approach?
I am new to Web Development world and I want to know if there is any problem with these guys.
Thank you very much
I checked it out, it doesn't behave abnormally at all for all those effects you have there, I checked out the size of one of the images it is about 250kb, then imagine the other images which I assume are of the same size, and they are all going to be loaded when the page loads, you definitely should expect some effect
Related
I would like to confirm what effect this CSS code has on the homepage of a wordpress website.
.lazy { display: none !important; }
Many thanks for explanations.
I have noticed images in the homepage are being blocked from being displayed which is why im asking this question.
The CSS code itself, prevent any element which has it from being displayed on the screen.
Due to its name, it may be used to enable something called lazyload (you can read about it here).
lazyload is usually used for several reasons:
Remove the pressure of loading many images at first; sometimes images are placed at the end of the page so the client won't see it at the top of the page, with lazy loading trick it. You can prevent those images from being loaded, and force them to load only the moment your client reach them by scrolling or other events so it cause page loading improvements (because the page is now lighter)
For making some visual effects; almost everywhere you need the image to be hidden and after some juggling or some specific events it is shown (like wp-admin and sub-menus, which will be shown if you hold your mouse on or click them)
etc
Recording to the reasons; I guess your kind of codes (which will be handled in client-side and client browser) does not fit the first reason and may be used for the second one because for the first reason it is better (and I guess it must) implemented on server-side. Why? Because in your code, the image is loaded and be will there and just not shown because of the CSS code
This was all I know but if you want a more specific answer you have to say where you saw it in WordPress, in a plugin, wp-admin, template, etc...
Hope the answer becomes handy for you
If you look at http://www.sportsdirect.com you will see that when you click on a category whole pages doesnt get refereshed, ie you dont notice any flicker, content above menu doesn't get repainted.
How do i achieve that? Is it only speed or something else? My site locally works fine (most of the time, but sportsdirect gets slight flicker sometimes). Online page gets "refreshed", ie there is 300ms when there is gray screen.
This is something that is very important for a client and i dont know how to fix it.
You should look into AJAX. This allows you to update parts of your page without refreshing the whole page. This will often reduce or eliminate flicker since it does not rebuild the entire page.
A good place to start is Here
So, I'm working on a new e-commerce site for my employer, and I've noticed that it displays / functions properly in every browser but IE8 (Which is rather inconveniencing, as about 80% of the office uses IE8.)
The site in question can be found here . When i load the page ( And more specifically, when I refresh a page ) I will sometimes have it saying "(2 items remaining) Waiting for..." and then it just hangs at a blank screen, until I type in a different URL or navigate to a different page.
Can somebody please offer me some insight as to why this might be happening, and what kind of things I can do to regulate it.
I used BrowserStack to test this and I didn't have a problem at all. This could very well be a JavaScript issue.
Try minimizing & concatenating your JS & CSS files. You can also create image sprites instead of loading lots of small images. After all that IE will have less files to download and they'll all be smaller so that should help.
Also, I see you're using WordPress which is a little harder to set up by try loading your JS at the bottom of the page. That way IE doesn't get hung up on a JS file at the top.
I'm building a contact form for a mobile website in HTML5 and CSS. It is the same form I use on all mobile website and after not working for 5 hours I pulled the code straight from a working site I built and it still doesn't work properly.
The issue is when you go to the contact page it shows the contact form, but with the labels centered and the submit button image isn't showing up. I must refresh for it to bring up the correct CSS file to align the text left and show the submit button. Initially I thought it was from a CSS/JS conflict with my menu at the top so I pulled that and it still causes the same problem. I have cleared the cashe on my phone and web browsers and they all work the same.
Here is the link: www.lpokc.org/mobi/contact.php after going to this page hit refresh and you will see the difference.
My question is, is this a caching issue, is it server side issue, or is it a conflict in my coding. I'm not good with posting the code on this site but if you go to the mobile site from your web browser you can just right click and view source to see my code. I have a boiler plate html core file with boiler plate CSS and custom CSS.
Is there some sort of script I could use to make this page auto refresh one time on page load then not again after the reload? I don't want to use an improper fix like this but I have been working on this issue for a day.
The left side is before refresh. I have pulled the code from the site now but I think it was a js conflict because it was auto loading the css from the menu when the link for any page was clicked.
I'm seeing it fine on my end. Seems to work flawlessly, but if you are still having a problem, you could either use cookie or session variables. If the variable does not exist, you can use the php function header( 'Location: http://www.lpokc.org/mobi/contact.php' ) ; to "refresh" the page. It's actually just a redirect command, but if you are sending them back to the page they are on, it is pretty much the same thing as a refresh.
It was a conflicting issue with my menu JS/CSS. I pulled it and now everything works fine.
This is basically a continuation of a question of mine from yesterday,
"Foregoing intialization on a page"
(And btw, kudos to all who give selflessly in this forum to help others - need to do more of that myself.)
So anyway, I was told about HistoryManager, BrowserManager and SharedObject, and so quickly ascertained that its no problem to store a few data items in a shared object so a flex page restores the previous configuration when the browser navigates back to it.
But my real concern would be speed of loading. Its a 15mb page and it only takes 2 seconds to load, but that's still not instantaneous. If it were in a tabbed browser and I just clicked on another tab containing my page, my page would then appear instantaneously. Is there any way to achieve that behavior when my page is navigated back to (via the browser back button for example.) Would that mean that the entire 15mb flex web page would have to be stored in memory.
Thanks.
Here's what I'm thinking, you're going the wrong way about this,(unless I missed the boad on what you want to acheive) what you need to do is work with javascript to interact with the browsers url. Thjis is assuming that you want to be able to go back on a page without reloading content.
Basicaly a java script would override the reloading, and when you hit back, the page doesn't reload, but the javascript notifies the flash what change in has occurred.
Have a look at the gaya framework for how they do it
or lookat http://www.robertpenner.com/experiments/backbutton/backbutton.html