Mobile website in HTML5 not pulling CSS file until refreshed - css

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.

Related

Concrete5: Why does my block fail to save the first time?

I am using 5.6.3.4 and using Designer Content to create blocks. I have customised the blocks by adding tabs. Other than that, it's pretty straightforward and everything is functioning well.
My problem is when I try to add and save a new block the first time, it keeps showing me the 'loading' icon but does not save the block. If I refresh the page and try adding the block again, it works. Sometimes it happens randomly and when I refresh the page and save, it works. Is there anything that's causing this and how can I fix this?
I have all cache turned off and am trying this on my localhost. The site does not have any other add-ons installed other than Designer Content. The site is using Bootstrap.
Had same issue, which was caused by tracking pixel code(javascript error).
Changed script to display code only when page is not in edit mode

web pages stop rendering after iFrame loads

We have a web page in our solution that uses an iFrame to display a vendor's web page. Usually when a user navigates away from this page that hosts the iFrame, all the other pages render just fine. The vendor just redesigned the content of their page, however, and while their new page looks fine in the iFrame and that hosting page works fine too, any time a user navigates away from the hosting page, the page being redirected ~to~ does not render properly. It's just completely blank. An f5 will get it back, but I'm wondering what I can do to fix this. The vendor says it's not their problem, but that's the only thing that changed. I've tried both redirecting the iFrame to blank and removing it outright via javascript (see below), and while I can see the iFrame disappear just before the redirect, the redirected to page still will not render without hitting f5.
window.onbeforeunload = function ()
{
document.getElementById('<%= ifr.ClientID %>').src = "about:blank"
$("#<%= ifr.ClientID %>").remove();
}
Can anyone give a suggestion of why this is happening and how to prevent it?
TIA
-VG
I've had a similar problem when using an iFrame containing a page from our payment card processor embedded in our eCommerce pages. I couldn't see anything in the source of the iFrame that might be causing the problem, so I opened up space for the iFrame, contained it in a div (my last element on the page) and used position to render the iFrame in the position I wanted it. Hardly responsive design, but it worked!
For anyone coming to this from the first Google result, this can be caused by your iframe being self-closed (ending with />). To fix it you just need to close the iframe with </iframe> instead. This may not be the original problem but it worked for me.

CSS gets messed up after Ajax page load

I have a website in wordpress. I recently download a plugin called Advanced Ajax Page Loader. It refreshes you content when clicked on other page without refreshing the whole site(header, footer). I tried to get my answer from plugins developer and wordpress support forum, but none responded.
I read that if ajax jquery call is used then all scripts should be reloaded again, for that the plugin have a place where I should put those codes. Until that everything works correctly, except one thin. When I go from a category to category, everything works fine, but when I open a single Post it completely screws up all my css for that page, when I refresh it, everything looks fine but then again, if I open one of the big categories with many posts, then that pages css is messed up.
I though that I could somehow refresh whole css by putting some code in the "Reload code" box, but I have no idea how to do that using scripts. English isn't my native language, therefore I'm having difficulty finding my answer on google, I tried, but my vocabulary is limited. How can I do it?
are you adding CSS classes to your elements via Javascript? If so, then the styles you add will only affect those elements which are part of the DOM at that point in time, so you might be experiencing a race condition, that actually happens to work in Chrome and Safari, but not Firefox.
second try to validate your markup and CSS and see if you have any error in your css syntax ?

Web page behaves strangely

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

FB like button Joomla

I am using FB like button in Joomla. This is the address of my website http://www.kaefiggefluester.de.
For fb-like button, I am using custom html module with fb social plugin code and then loading it in user4 position which i defined in the template myself.
Now there are three different problems that I am facing.
In IE 9, before the fb-like button loads, it displays a white line. It disappears after the button is loaded. I am not facing this problem in Firefox.
Also, when loading the page in IE, it sometimes distorts the page. I know that one posts said that I should look for any script that distorts tag, however i face this problem only if I have facebook plugin enabled. IF I remove the fb-like code from Custom Joomla module, it works fine.
I have a component from Videoflow. I dont know exactly how it works but fb-like button doesnt work on the sampe page as this component. However it is working in IE but with wrong language. That is, my defined language for the button is DE (German) and so in rest of the pages it displays "Gefaellt mir." However, In KG TV it shows "Like." ... So this suggest that there is something wrong with loading of the script. However, this is happening in IE only. In firefox it is not loading at all.
If you think i should share some code, please let me know because there are so many files and I dont know which to share.
Regards
I suggest installing firebug for Firefox or using the Chrome equivalent to help you during the development of your website. You can then use the console to view if there are any problems. For example currently your website has these problems which might be the reason you are having the issues you mentioned:

Resources