Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #191316

    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!

    #191317
    This reply has been marked as private.
    #191329

    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,
    Devin

    #191340

    Thanks 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) +627

    #191787

    Hi!

    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,
    Peter

    #191800

    Thank you on this too!!! Please make sure the post above is private so only I can see it.

    #192032

    Hi 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.

    #192203

    Hey!

    You can add this on your custom.css or Quick CSS:

    .drop_bgg .paging_bg {
    width: 100%;
    }

    Best regards,
    Ismael

    #192212
    This reply has been marked as private.
    #193226

    Hi!

    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!
    Josue

    #193265

    Thanks 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?

    #193268

    Hey!

    #xd_frame is the ID of the iframe you are using in your /test page.

    Best regards,
    Josue

    #193271

    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,
    Jonathan

    #193273

    Also, 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!

    #194168

    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,
    Jonathan

    #194169

    Hey!

    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

    #194175

    Thanks for clarifying. There must be a way to have height be dynamic though, no? It would be great if the section automatically got longer when “more” was clicked on the search results…

Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘iFrame Height not showing as 100%’ is closed to new replies.