-
Posts
-
Hi guys,
I’ll post the link in a private message below. I have setup an iframe to fill its container by setting width and height to 100%. There is a gap still between the iframe and the colour section above it. Is there a way to remove it so that the iframe is flush with the bottom of the colour section above it?
Thanks!
Hi!
Try only using the text tab of the text editor so that the content doesn’t get touched by wpautop. Its wrapping your script in a paragraph tag and adding in a break tag too.
This might do it but its a band-aid:
.post-entry-4041 p { margin: 0; }Regards,
DevinThanks Devin, the code didn’t work unfortunately. Also, when i try to just save from the text tab (without going to visual) I get an error. Any other suggestions?
Error is as follows:
Server Error in ‘/’ Application.
Conversion failed when converting the nvarchar value ‘3239http://www.kimberfire.com/wp-admin/post.php?post=4041&action=edit&message=1#save’ to data type int.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.Data.SqlClient.SqlException: Conversion failed when converting the nvarchar value ‘3239http://www.kimberfire.com/wp-admin/post.php?post=4041&action=edit&message=1#save’ to data type int.
Source Error:
An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.
Stack Trace:
[SqlException (0x80131904): Conversion failed when converting the nvarchar value ‘3239http://www.kimberfire.com/wp-admin/post.php?post=4041&action=edit&message=1#save’ to data type int.]
System.Data.SqlClient.SqlConnection.OnError(SqlException exception, Boolean breakConnection) +1950874
System.Data.SqlClient.SqlInternalConnection.OnError(SqlException exception, Boolean breakConnection) +4857035
System.Data.SqlClient.TdsParser.ThrowExceptionAndWarning(TdsParserStateObject stateObj) +194
System.Data.SqlClient.TdsParser.Run(RunBehavior runBehavior, SqlCommand cmdHandler, SqlDataReader dataStream, BulkCopySimpleResultSet bulkCopyHandler, TdsParserStateObject stateObj) +1121
System.Data.SqlClient.SqlDataReader.HasMoreRows() +206
System.Data.SqlClient.SqlDataReader.ReadInternal(Boolean setTimeout) +185
System.Data.SqlClient.SqlDataReader.Read() +9
System.Data.SqlClient.SqlCommand.CompleteExecuteScalar(SqlDataReader ds, Boolean returnSqlValue) +50
System.Data.SqlClient.SqlCommand.ExecuteScalar() +150
DA.SQLDA.ExecuteScalar(SqlConnection connection, CommandType commandType, String commandText, SqlParameter[] commandParameters) +57
DA.SQLDA.ExecuteScalar(String connectionString, CommandType commandType, String commandText, SqlParameter[] commandParameters) +83
RingBuilder_Resp_DiamondSearch.Page_Load(Object sender, EventArgs e) +4224
System.Web.Util.CalliHelper.EventArgFunctionCaller(IntPtr fp, Object o, Object t, EventArgs e) +14
System.Web.Util.CalliEventHandlerDelegateProxy.Callback(Object sender, EventArgs e) +35
System.Web.UI.Control.OnLoad(EventArgs e) +99
System.Web.UI.Control.LoadRecursive() +50
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +627Hi!
I fixed the spacing issue. The problem is that WordPress will treat your js code like standard text and add line breaks and paragraphs to it if i.e. empty lines are between the code lines. I removed these lines and changed the code to:
<script type="text/javascript" src="http://apps.gemfind.net/ringbuilder_resp/js/postmessage.js">// <![CDATA[// ]]></script><iframe id="xd_frame" name="test" src="http://apps.gemfind.net/Ringbuilder_resp/settingsearch.aspx?Dealerlink=3239" height="1250px" width="100%" frameborder="0" scrolling="no"><br /></iframe><script type="text/javascript">// <![CDATA[ var src = document.getElementById("xd_frame").src; var srcExtravalue = encodeURIComponent(document.location.href); var finalsrc = src+'#'+srcExtravalue; document.getElementById("xd_frame").src = finalsrc; XD.receiveMessage(function (message) {document.getElementById("xd_frame").style.height = message.data + "px"; }, 'http://apps.gemfind.net'); // ]]></script>and now it works. However I strongly recommend to use a tool like: http://wordpress.org/plugins/insert-html-snippet/ to embed js code into your posts/pages. Basically it allows you to insert the js code into a separate editor which makes sure that WP does not modify or manipulate the code in any way and then you can use a shortcode to embed the js code anywhere on your website.
Best regards,
PeterHi Peter, I installed the plugin. Thanks for the advice – much better now. I notice though that the iframe extends past the bottom border of the colour section. Any idea why this is the case? As the screen is made narrower (horizontally) the iframe scales to fit but at normal full screen it doesn’t size right to the bottom.
Hey!
You can add this on your custom.css or Quick CSS:
.drop_bgg .paging_bg { width: 100%; }Best regards,
IsmaelHi!
I think you may need to set a max-width value to the iframe, use this:
#xd_frame { height: 1195px; max-width: 1200px; margin: 0 auto; width: 100%; display: block; }Try playing around with the height/max-width values until you get what you want to achieve.
Cheers!
JosueThanks Josue, will try. What’s #xd_frame? Will this only affect the colour section the iframe is in or will it affect the entire site?
Hi Josue,
I tried this but it doesn’t work unfortunately as the whole purpose is to keep the iframe from edge to edge horizontally. What I would like is for the container it’s in to resize vertically to show the whole iframe. Right now it looks like the rest of the iframe is getting lost behind the footer?
Thanks for your help with this!
Best,
JonathanAlso, as the screen resizes the optimal height of the iframe changes so ideally the space for the iframe adapts to the best height depending on the screen size. This will look so good once it works!
Hi Josue,
I’ve been trying this in another format and I arrive at the same problem, but this format at least makes it more clear what I’m trying to achieve. If you go to myurl/jewelry and put that in mobile view then you’ll see that I made the screen extra long to accommodate. Then if you click on “more” at the bottom, the additional ring results come in but it extends past the bottom of the page rather than resizing to accomodate. Is there a way the theme will allow me to set height to default to what is needed for the current length of the iframe as it expands and shrinks? Would look and work perfectly if so. I tried “100%” and “auto” but to no avail.
Current code in my custom css to accomodate this screen (mobile specifically) is, this for the container:
#gemfind .container{ width: 320px !important; height: 5000px !important; }And this for the iframe:
#xd_frame { height: 5000px !important; }Thank you in advance.
Best,
JonathanHey!
The thing is height: 100% does not work like width: 100%, it has to have a fixed height defined:
http://www.dynamicsitesolutions.com/css/height-and-min-height/Best regards,
Josue
- The topic ‘iFrame Height not showing as 100%’ is closed to new replies.