Categories
jQuery

Position A jQuery UI Dialog Window

 

jQuery ui dialog

A modal dialog window is a popup dialog box that the user must interact with before they can return to content on the page. Since it is smaller than the page you have to tell it where to appear on the page. In the past when I had to position a jQuery UI Dialog I used the Position option.

$("#swipe-dialog").dialog({
    autoOpen: false,
    height: 300,
    width: 350,
    modal: true,
    open: function(event, ui) {
        
        [...code goes here]

        $(".ui-dialog-titlebar").hide();
    },
    position: {
        
            my: 'top', 
            at: 'top'
            
    },
    buttons: {
        Cancel: function() {
            $(this).dialog("close");
            $("body").unbind("click");
        }
    }
});
Position Option

The position option works as long as the user does not use the zoom feature on the browser or the zoom property in css. The position option does not adapt to zoom which causes the dialog to display partially off the page. To fix the problem I removed the position option.

$("#swipe-dialog").dialog({
autoOpen: false,
height: 350,
width: 350,
modal: true,
open: function(event, ui) {
[...code goes here]
$(".ui-dialog-titlebar").hide();
},
buttons: {
Cancel: function() {
$(this).dialog("close");
$("body").unbind("click");
}
}
});
No Position Option

Then I added CSS to the style sheet to position the jQuery User Interface Modal Dialog Window in the center of the screen.

.ui-dialog {
    left: 50{8c32082245623bb3220c26d1239a0c097ad541f2671e810714744311371cb95a} !important;
    top: 50{8c32082245623bb3220c26d1239a0c097ad541f2671e810714744311371cb95a} !important;
    margin-left: -175px !important; 
    margin-top: -175px !important; 
} 
Center jQuery UI dialog

Margin-left is set to 1/2 the dialog width option of 350. Margin-top is set to 1/2 the dialog height option of 350. You will need to change the margin-left and margin-top based on the width and height of your dialog window. The left value and top value are set to 50{8c32082245623bb3220c26d1239a0c097ad541f2671e810714744311371cb95a} to ensure the dialog window is in the center of the screen even if the page has been scaled.

 

Categories
WordPress

How To Remove The Entry Title In iThemes Builder Using A Custom Extension

There are two things that I really like about iThemes Builder — the layout engine and the extensions.

Extensions are like mini-themes for Builder in that they can have style.css and functions.php files. They can be applied to a specific Layout or to a specific View.- iThemes Codex

In a recent project I needed one layout to not show the entry-title. Since there is not a filter to alter the entry-title I considered my options and decided to just create an extension. To create the extension I added an extensions folder to my child theme. In the extensions folder I created another folder called no-title. In the no-title folder I created a file called functions.php. In the functions.php file I added the following code:

 

<?php
if ( is_admin() )
	return;

if ( ! class_exists( 'ExtensionNoTitleLayout' ) ) {
	class ExtensionNoTitleLayout {
		function ExtensionNoTitleLayout() {
			it_classes_load( 'it-file-utility.php' );
			$this->_base_url = ITFileUtility::get_url_from_file( dirname( __FILE__ ) );
			add_action( 'builder_layout_engine_render', array( &$this, 'change_render_content' ), 0 );	
		}
		function extension_render_content() {	
		?>
			<?php if ( have_posts() ) : ?>
				<div class="loop">
					<div class="loop-content">
						<?php while ( have_posts() ) : // The Loop ?>
							<?php the_post(); ?>
							<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
								<div class="entry-content clearfix">
									<?php the_content(); ?>
								</div>
							</div>								
						<?php endwhile;  ?>
					</div>
				</div>
			<?php else :  ?>
				<?php do_action( 'builder_template_show_not_found' ); ?>
			<?php endif;  ?>
		<?php

		}
		function change_render_content() {
			remove_action( 'builder_layout_engine_render_content', 'render_content' );
			add_action( 'builder_layout_engine_render_content', array( &$this, 'extension_render_content' ) );
		}
	} 

	$ExtensionNoTitleLayout = new ExtensionNoTitleLayout();
}

ExtensionOnce I created the extension I moved to the layout editor and selected the extension.