I have an issue with my responsive website.
I use an Iframe for my contact form so that when someone uses it and there is validation errors the server side codes responds and reloads in the same Iframe.
Everything works fine but if the iframe width is less than 300px it's changing to mobile view.
Note: site is built on Drupal 7.
on the page where you have your contact form you should disable media queries.
but really you should not use an iframe for this you should create some server side code to update on page not via an iframe.
Build it using php and Ajax similar to how this tutorial describes.
http://ajtroxell.com/build-a-simple-php-jquery-and-ajax-powered-contact-form/
Related
I am using Telerik's KendoUI framework for an HTML5/JS mobile app. When I have views I want to link to inside my app, I do a standard link such as Link which is of course as basic as it gets. The question I have is whether there is a way to make that path an external link, but have the page load inside the content area of the app (such as in an iFrame)? I'm not finding any examples of that online and when I make the link external, my whole app disappears if you click it. The end goal is keeping the link's site content (already mobile friendly) in between the header/footer of my app so they can still navigate it.
Thoughts?
After working through Telerik support, this wasn't natively possible with their framework. I ended up doing a Kendo view and utilized the data-init option to dynamically build an <iframe /> via jQuery and put the link in there so it loaded appropriately. Some might say that's a security concern, however in our case the link is something we put in for them so it's something that will always be trusted.
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.
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.
I´m having a big big problem with adsense, no matter what I do the adsense result iframe is loading inside other iframe. I´m using WordPress + Bootstrap Framework.
This particular site has two different ads, first use an adserver service which give me his own script, this script is placed in the header.php inside of a <div id="top-space"> and the adserver handle with the script to show an <iframe> and inside that iframe the objet flash of the banner.
The adsense code is in the sidebar and to place it I use a text wodget, put the code there and that´s it.
In 60% of the times the site loads in the correct position each banners, the adserver banners are in the top and adsense ads in the sidebar.
BUT! randomly the adsense iframe is loading inside of the adserver iframe. I tried to use this solution but don´t work at all.
I´m desesperate because my client is loosing money, the site don´t show the right ads, and some times adsense iframe push adserver ads so the site looks crappy.
Even I try to use adrotate wordpress plugin thinking that help me avoid this bug, but nothing.
This sounds like it could be a caching problem. I've noticed in the past, iframes usually don't refresh unless you specifically right-click and refresh each individual one. If you're running any WordPress caching, clear that, then your browser cache, or try an incognito window.
I have been working on a project where I need to load a ssrs site within an iframe. The iframe is acutally using the telerik spitter panels but the DOM refers to it as an iframe when rendered. The issue I am coming into is when referencing the SSRS site it loads wihtin the iframe but the view tiled multiple times over. In reading I have seen mention that the SSRS site also uses iframes which causes an issue when loaded into another iframe. Does anyone know of a solution for this type of scenario or can you point me in the right direction of where to look? In essence I have to wrap an asp.net wrapper around the SSRS site as it is a part of a larger site and users need to be able to navigate to this section of the site using the main navigation. I need to avoid pop-up windows or redirects as the user needs to get the expereince that they are in the same site even though I am loading ssrs from another server. Attached is a screen shot of what the tiling looks like. The site is small so I am not using masterpages it is loaded directly within an asp.net document.
Any tips or suggestions are always appreciated. Thank you
from experience I've found IFRAMEs and FRAMEs with SSRS 2008 did not work reliably (admittedly I had IE6 issues too).
Eventually I settled on using JavaScript/jQuery to create a DIV at the top of the page that looked like the top nav bar of my home page, using behaviors (IE) or bindings (FF) that can be loaded in using the "ReportingServices" style sheet e.g.
/* add in behavior file for IE */
body {
behavior: url("/Reports/IE-frame.htc");
}
/* Firefox-only XBL */
body {
-moz-binding: url("/Reports/FF-frame.xml#initFrame");
}