0
Welcome Guest! Login
0 items Join Now

Adding a Page Flip ruins my site.

Last Post
Search Topic
    • MrCodexCY's Avatar
    • MrCodexCY
    • Rocketeer
    • Posts: 73
    • Thanks: 0
    • Web Design Specialist

    Adding a Page Flip ruins my site.

    Posted 14 years 5 months ago
    • Hello guys,

      I am creating a page flip on my site for my subscribe section, and i want to look like that:(top right)

      www.sohtanaka.com/web-design/examples/peeling-effect/

      When i put the code on my index.php of refraction template, in firefox it works perfectly fine, but i have create a gallery section using the RokStorie module, but it only loads the small thumbnails, it doesnt load the big pictures. And thats only in firefox.. in internet explorer when the page fully loads i get the message Done but with errors, but cant track the errors to fix them, while on firefox everything runs fine.

      This is the code i added into the index.php:

      In the <head> tag i added:
      <!--[if lte IE 6]>
<script type="text/javascript" src="supersleight-min.js"></script>
<![endif]-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
 
$("#pageflip").hover(function() {
    $("#pageflip img , .msg_block").stop()
        .animate({
            width: '307px',
            height: '319px'
        }, 500);
    } , function() {
    $("#pageflip img").stop()
        .animate({
            width: '50px',
            height: '52px'
        }, 220);
    $(".msg_block").stop()
        .animate({
            width: '50px',
            height: '50px'
        }, 200);
    });
});
</script> 
<style type="text/css">
img { behavior: url(iepngfix.htc) }
#pageflip {
    position: relative;
    right: 0; top: 0;
    float: right; 
}
#pageflip img {
    width: 50px; height: 52px;
    z-index: 99;
    position: absolute;
    right: 0; top: 0;
    -ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
    width: 50px; height: 50px;
    overflow: hidden;
    position: absolute;
    right: 0; top: 0;
    background: url(RSS/subscribe.png) no-repeat right top;
}
 
</style>

      In the <body> tag i added:
      <div id="pageflip">
        <a href="subscribe"><img src="RSS/page_flip.png" alt="" /></a>
        <div class="msg_block"></div>
    </div>

      This is my whole index.php code:
      <?php
 
/**
 
 * @package   Refraction Template - RocketTheme
 
 * @version   1.5.6 October 14, 2010
 
 * @author    RocketTheme, LLC http://www.rockettheme.com
 
 * @copyright Copyright (C) 2007 - 2010 RocketTheme, LLC
 
 * @license   http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
 
 *
 
 * Rockettheme Refraction Template uses the Joomla Framework (http://www.joomla.org), a GNU/GPLv2 content management system
 
 *
 
 */
 
// no direct access
 
defined( '_JEXEC' ) or die( 'Restricted index access' );
 
define( 'YOURBASEPATH', dirname(__FILE__) );
 
require( YOURBASEPATH.DS."styles.php");
 
require( YOURBASEPATH.DS."rt_styleswitcher.php");
 
JHTML::_( 'behavior.mootools' );
 
global $template_real_width, $leftcolumn_width, $rightcolumn_width, $tstyle;
 
global $js_compatibility, $menu_rows_per_column, $menu_columns, $menu_multicollevel;
 
global $overlay_style, $bg_style, $bg_fixed, $showcase_title, $showcase_text, $showcase_link, $body_text, $body_link, $primary_color;
 
 
 
$live_site              = $mainframe->getCfg('live_site');
 
$template_path          = $this->baseurl . '/templates/' .  $this->template;
 
$preset_style           = $this->params->get("presetStyle", "style3");
 
 
 
$overlay_style          = $this->params->get("overlayStyle", "dark");
 
$bg_style               = $this->params->get("bgStyle", "bgstyle3");
 
$bg_fixed               = $this->params->get("bgFixed", "scroll");
 
$showcase_title         = $this->params->get("showcaseTitle", "#ffffff");
 
$showcase_text          = $this->params->get("showcaseText", "#fffddd");
 
$showcase_link          = $this->params->get("showcaseLink", "#21bddf");
 
$body_text              = $this->params->get("bodyText", "#999999");
 
$body_link              = $this->params->get("bodyLink", "#21bddf");
 
 
 
$frontpage_component    = $this->params->get("enableFrontpage", "show");
 
$enable_ie6warn         = ($this->params->get("enableIe6warn", 0)  == 0)?"false":"true";
 
$font_family            = $this->params->get("fontFamily", "refraction");
 
$enable_fontspans       = ($this->params->get("enableFontspans", 1)  == 0)?"false":"true";
 
$enable_inputstyle      = ($this->params->get("enableInputstyle", 1) == 0)?"false":"true";
 
$inputs_exclusion       = $this->params->get("inputsExclusion", "'.content_vote'");
 
$enable_featured_effects= ($this->params->get("featEffects", 1) == 0)?"false":"true";
 
 
 
$panel_hooks            = $this->params->get("panelHooks", ".showcase-panel-trigger, a[href*=showcasemoduletrigger]");
 
$panel_fixheight        = $this->params->get("panelFixHeight", 1);
 
$panel_height           = $this->params->get("panelHeight", "337");
 
$panel_opacity          = $this->params->get("panelOpacity", "0.9");
 
$panel_totop            = $this->params->get("panelToTop", 1);
 
$panel_clickclose       = $this->params->get("panelClickClose", 1);
 
$panel_closebutton      = $this->params->get("panelCloseButton", 0);
 
 
 
$template_width         = $this->params->get("templateWidth", "959");
 
$leftcolumn_width       = $this->params->get("leftcolumnWidth", "210");
 
$rightcolumn_width      = $this->params->get("rightcolumnWidth", "210");
 
$leftinset_width        = $this->params->get("leftinsetWidth", "180");
 
$rightinset_width       = $this->params->get("rightinsetWidth", "180");
 
$splitmenu_col          = $this->params->get("splitmenuCol", "rightcol");
 
$menu_name              = $this->params->get("menuName", "mainmenu");
 
$menu_type              = $this->params->get("menuType", "moomenu");
 
$menu_rows_per_column   = $this->params->get("menuRowsPerColumn");
 
$menu_columns           = $this->params->get("menuColumns");
 
$menu_multicollevel     = $this->params->get("menuMultiColLevel", 1);
 
$default_font           = $this->params->get("defaultFont", "default");
 
$show_logo              = ($this->params->get("showLogo", 1)  == 0)?"false":"true";
 
$show_topbutton         = ($this->params->get("showTopbutton", 1)  == 0)?"false":"true";
 
$show_copyright         = ($this->params->get("showCopyright", 1)  == 0)?"false":"true";
 
$js_compatibility       = ($this->params->get("jsCompatibility", 0)  == 0)?"false":"true";
 
 
 
// moomenu options
 
$moo_bgiframe           = ($this->params->get("moo_bgiframe'","0") == 0)?"false":"true";
 
$moo_delay              = $this->params->get("moo_delay", "500");
 
$moo_duration           = $this->params->get("moo_duration", "600");
 
$moo_fps                = $this->params->get("moo_fps", "200");
 
$moo_transition         = $this->params->get("moo_transition", "Sine.easeOut");
 
 
 
$moo_bg_enabled         = ($this->params->get("moo_bg_enabled","1") == 0)?"false":"true";
 
$moo_bg_over_duration       = $this->params->get("moo_bg_over_duration", "500");
 
$moo_bg_over_transition     = $this->params->get("moo_bg_over_transition", "Expo.easeOut");
 
$moo_bg_out_duration        = $this->params->get("moo_bg_out_duration", "600");
 
$moo_bg_out_transition      = $this->params->get("moo_bg_out_transition", "Sine.easeOut");
 
 
 
$moo_sub_enabled        = ($this->params->get("moo_sub_enabled","1") == 0)?"false":"true";
 
$moo_sub_opacity        = $this->params->get("moo_sub_opacity","0.95");
 
$moo_sub_over_duration      = $this->params->get("moo_sub_over_duration", "50");
 
$moo_sub_over_transition    = $this->params->get("moo_sub_over_transition", "Expo.easeOut");
 
$moo_sub_out_duration       = $this->params->get("moo_sub_out_duration", "600");
 
$moo_sub_out_transition     = $this->params->get("moo_sub_out_transition", "Sine.easeIn");
 
$moo_sub_offsets_top        = $this->params->get("moo_sub_offsets_top", "0");
 
$moo_sub_offsets_right      = $this->params->get("moo_sub_offsets_right", "1");
 
$moo_sub_offsets_bottom     = $this->params->get("moo_sub_offsets_bottom", "0");
 
$moo_sub_offsets_left       = $this->params->get("moo_sub_offsets_left", "1");
 
                                
 
require(YOURBASEPATH . "/rt_styleloader.php");
 
 
 
?>
 
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
 
    <head>
 
        <jdoc:include type="head" />
 
        <?php
 
        require(YOURBASEPATH . DS . "rt_utils.php");
 
        require(YOURBASEPATH . DS . "rt_head_includes.php");
 
    ?>
<!--[if lte IE 6]>
<script type="text/javascript" src="supersleight-min.js"></script>
<![endif]-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
 
$("#pageflip").hover(function() {
    $("#pageflip img , .msg_block").stop()
        .animate({
            width: '307px',
            height: '319px'
        }, 500);
    } , function() {
    $("#pageflip img").stop()
        .animate({
            width: '50px',
            height: '52px'
        }, 220);
    $(".msg_block").stop()
        .animate({
            width: '50px',
            height: '50px'
        }, 200);
    });
});
</script> 
<style type="text/css">
img { behavior: url(iepngfix.htc) }
#pageflip {
    position: relative;
    right: 0; top: 0;
    float: right; 
}
#pageflip img {
    width: 50px; height: 52px;
    z-index: 99;
    position: absolute;
    right: 0; top: 0;
    -ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
    width: 50px; height: 50px;
    overflow: hidden;
    position: absolute;
    right: 0; top: 0;
    background: url(RSS/subscribe.png) no-repeat right top;
}
 
</style>
    </head>
 
    <body id="ff-<?php echo $fontfamily; ?>" class="<?php echo $fontstyle; ?> <?php echo $tstyle; ?> <?php echo $bg_style; ?> <?php echo $overlay_style; ?> iehandle">
    <div id="pageflip">
        <a href="subscribe"><img src="RSS/page_flip.png" alt="" /></a>
        <div class="msg_block"></div>
    </div>
 
 
        <div id="main-background">
 
            <!--Begin Header-->
 
            <?php if ($show_logo == "true" or $mtype != "none" or $this->countModules('logo')) : ?>
 
            <div id="header-overlay" class="png">
 
                <div class="wrapper">
 
                    <!--Begin Logo-->
 
                    <?php if ($this->countModules('logo')) : ?>
 
                    <div class="logo-module"><jdoc:include type="modules" name="logo" style="xhtml" /></div>
 
                    <?php elseif ($show_logo == "true") : ?>
 
                    <a href="<?php echo $this->baseurl; ?>" id="logo" class="png"></a>
 
                    <?php endif; ?>
 
                    <!--End Logo-->
 
                    <!--Begin Horizontal Menu-->
 
                    <?php if($mtype != "none") : ?>
 
                    <div id="horiz-menu-surround">
 
                    <div id="horiz-menu" class="<?php echo $mtype; ?> png">
 
                    <?php if($mtype != "module") : ?>
 
 
 
                        <?php echo $topnav; ?>
 
                    <?php else: ?>
 
                        <jdoc:include type="modules" name="toolbar" style="none" />
 
                    <?php endif; ?>
 
                    </div>
 
                    </div>
 
                    <?php endif; ?>
 
                    <!--End Horizontal Menu-->
 
                </div>
 
            </div>
 
            <?php endif; ?>
 
            <!--End Header-->
 
            <!--Begin Showcase-->
 
            <?php $mClasses = modulesClasses('case5'); if ($this->countModules('showcase') or $this->countModules('showcase2') or $this->countModules('showcase3')) : ?>
 
            <div id="showcase-section" class="png">
 
                <div class="wrapper">
 
                    <div id="showmodules" class="spacer<?php echo $showmod_width; ?>">
 
                        <?php if ($this->countModules('showcase')) : ?>
 
                        <div class="block <?php echo $mClasses['showcase'][0]; ?>">
 
                            <jdoc:include type="modules" name="showcase" style="main" />
 
                        </div>
 
                        <?php endif; ?>
 
                        <?php if ($this->countModules('showcase2')) : ?>
 
                        <div class="block <?php echo $mClasses['showcase2'][0]; ?>">
 
                            <jdoc:include type="modules" name="showcase2" style="main" />
 
                        </div>
 
                        <?php endif; ?>
 
                        <?php if ($this->countModules('showcase3')) : ?>
 
                        <div class="block <?php echo $mClasses['showcase3'][0]; ?>">
 
                            <jdoc:include type="modules" name="showcase3" style="main" />
 
                        </div>
 
                        <?php endif; ?>
 
                    </div>
 
                </div>
 
            </div>
 
            <?php endif; ?>
 
            <?php if ($this->countModules('showcase') or $this->countModules('showcase2') or $this->countModules('showcase3') or $this->countModules('showcase-panel')): ?> 
 
                <div id="showcase-panel">
 
                    <div class="wrapper">
 
                        <div id="showcase-panel-close">
 
                            <div class="readon-wrap1"><div class="readon1-l"></div><a class="readon-main" href="#"><span class="readon1-m"><span class="readon1-r">Close</span></span></a></div>
 
                        </div>
 
                        <jdoc:include type="modules" name="showcase-panel" style="showcasepanel" />
 
                    </div>
 
                </div>
 
            <?php endif;?>
 
            <!--End Showcase-->
 
            <!--Begin Main Body-->
 
            <div id="mainbody-overlay" class="png"><div id="mainbody-overlay2" class="png">
 
                <div class="wrapper">
 
                    <div id="main-body">
 
                        <div id="main-body-surround">
 
                            <!--Begin Main Content Block-->
 
                            <div id="main-content" class="<?php echo $col_mode; ?>">
 
                                <div class="colmask leftmenu">
 
                                    <div class="colmid">
 
                                        <div class="colright">
 
                                            <!--Begin col1wrap -->    
 
                                            <div class="col1wrap">
 
                                                <div class="col1pad">
 
                                                    <div class="col1">
 
                                                        <div id="maincol2">
 
                                                            <div class="maincol2-padding">
 
                                                                <?php if ($this->countModules('newsflash')) : ?>
 
                                                                <div id="newsflash-bar" class="png">
 
                                                                    <jdoc:include type="modules" name="newsflash" style="newsflash" />
 
                                                                </div>
 
                                                                <?php endif; ?>
 
                                                                <?php $mClasses = modulesClasses('case0'); if ($this->countModules('feature') or $this->countModules('feature2') or $this->countModules('feature3')) : ?>
 
                                                                <div id="featuremodules" class="spacer<?php echo $featuremod_width; ?> png">
 
                                                                    <?php if ($this->countModules('feature')) : ?>
 
                                                                    <div class="block <?php echo $mClasses['feature'][0]; ?> png">
 
                                                                        <jdoc:include type="modules" name="feature" style="feature" />
 
                                                                    </div>
 
                                                                    <?php endif; ?>
 
                                                                    <?php if ($this->countModules('feature2')) : ?>
 
                                                                    <div class="block <?php echo $mClasses['feature2'][0]; ?> png">
 
                                                                        <jdoc:include type="modules" name="feature2" style="feature" />
 
                                                                    </div>
 
                                                                    <?php endif; ?>
 
                                                                    <?php if ($this->countModules('feature3')) : ?>
 
                                                                    <div class="block <?php echo $mClasses['feature3'][0]; ?> png">
 
                                                                        <jdoc:include type="modules" name="feature3" style="feature" />
 
                                                                    </div>
 
                                                                    <?php endif; ?>
 
                                                                </div>
 
                                                                <?php endif; ?>
 
                                                            <div id="maincontent-tm" class="png"><div id="maincontent-tl" class="png"><div id="maincontent-tr" class="png"></div></div></div>
 
                                                            <div id="maincontent-m" class="png"><div id="maincontent-l" class="png"><div id="maincontent-r" class="png"><div id="maincontent-surround" class="png">
 
                                                                <?php if ($this->countModules('breadcrumb')) : ?>
 
                                                                <div id="breadcrumbs">
 
                                                                    <a href="<?php echo $this->baseurl; ?>" id="breadcrumbs-home" class="png"></a>
 
                                                                    <jdoc:include type="modules" name="breadcrumb" style="none" />
 
                                                                </div>
 
                                                                <?php endif; ?>
 
                                                                <?php $mClasses = modulesClasses('case1'); if ($this->countModules('user1') or $this->countModules('user2') or $this->countModules('user3')) : ?>
 
                                                                <div id="mainmodules" class="spacer<?php echo $mainmod_width; ?>">
 
                                                                    <?php if ($this->countModules('user1')) : ?>
 
                                                                    <div class="block <?php echo $mClasses['user1'][0]; ?>">
 
                                                                        <jdoc:include type="modules" name="user1" style="main" />
 
                                                                    </div>
 
                                                                    <?php endif; ?>
 
                                                                    <?php if ($this->countModules('user2')) : ?>
 
                                                                    <div class="block <?php echo $mClasses['user2'][0]; ?>">
 
                                                                        <jdoc:include type="modules" name="user2" style="main" />
 
                                                                    </div>
 
                                                                    <?php endif; ?>
 
                                                                    <?php if ($this->countModules('user3')) : ?>
 
                                                                    <div class="block <?php echo $mClasses['user3'][0]; ?>">
 
                                                                        <jdoc:include type="modules" name="user3" style="main" />
 
                                                                    </div>
 
                                                                    <?php endif; ?>
 
                                                                </div>
 
                                                                <?php endif; ?>
 
                                                                <div class="bodycontent">
 
                                                                    <?php if ($this->countModules('inset2') and !$editmode) : ?>
 
                                                                    <div id="inset-block-right"><div class="right-padding">
 
                                                                        <jdoc:include type="modules" name="inset2" style="main" />
 
                                                                    </div></div>
 
                                                                    <?php endif; ?>
 
                                                                    <?php if ($this->countModules('inset') and !$editmode) : ?>
 
                                                                    <div id="inset-block-left"><div class="left-padding">
 
                                                                        <jdoc:include type="modules" name="inset" style="main" />
 
                                                                    </div></div>
 
                                                                    <?php endif; ?>
 
                                                                    <div id="maincontent-block">
 
                                                                        <jdoc:include type="message" />
 
                                                                        <?php if (!($frontpage_component == 'hide' and JRequest::getVar('view') == 'frontpage')): ?>
 
                                                                        <jdoc:include type="component" />
 
                                                                        <?php endif; ?>
 
                                                                    </div>
 
                                                                    </div>
 
                                                                    <div class="clr"></div>
 
                                                                    <?php $mClasses = modulesClasses('case2'); if ($this->countModules('user4') or $this->countModules('user5') or $this->countModules('user6')) : ?>
 
                                                                    <div id="mainmodules2" class="spacer<?php echo $mainmod2_width; ?>">
 
                                                                        <?php if ($this->countModules('user4')) : ?>
 
                                                                        <div class="block <?php echo $mClasses['user4'][0]; ?>">
 
                                                                            <jdoc:include type="modules" name="user4" style="main" />
 
                                                                        </div>
 
                                                                        <?php endif; ?>
 
                                                                        <?php if ($this->countModules('user5')) : ?>
 
                                                                        <div class="block <?php echo $mClasses['user5'][0]; ?>">
 
                                                                            <jdoc:include type="modules" name="user5" style="main" />
 
                                                                        </div>
 
                                                                        <?php endif; ?>
 
                                                                        <?php if ($this->countModules('user6')) : ?>
 
                                                                        <div class="block <?php echo $mClasses['user6'][0]; ?>">
 
                                                                            <jdoc:include type="modules" name="user6" style="main" />
 
                                                                        </div>
 
                                                                        <?php endif; ?>
 
                                                                    </div>
 
                                                                    <?php endif; ?>
 
                                                                </div></div></div></div>
 
                                                                <div id="maincontent-bm" class="png"><div id="maincontent-bl" class="png"><div id="maincontent-br" class="png"></div></div></div>
 
                                                            </div>
 
                                                        </div>    
 
                                                    </div>
 
                                                </div>
 
                                            </div>
 
                                            <!--End col1wrap -->
 
                                            <!--Begin col2 -->
 
                                            <?php if ($leftcolumn_width != 0) : ?>
 
                                            <div class="col2">
 
                                                <div id="leftcol">
 
                                                    <div id="leftcol-padding">
 
                                                        <?php if ($subnav and $splitmenu_col=="leftcol") : ?>
 
                                                        <div class="sidenav-block">
 
                                                            <?php echo $subnav; ?>
 
                                                        </div>
 
                                                        <?php endif; ?>
 
                                                        <jdoc:include type="modules" name="left" style="sidebar" />
 
                                                        <?php if (!isset($active)) :?>
 
                                                        <jdoc:include type="modules" name="inactive" style="sidebar" />    
 
                                                        <?php endif; ?>
 
                                                    </div>
 
                                                </div>
 
                                            </div>
 
                                            <?php endif; ?> 
 
                                            <!---End col2 -->
 
                                            <!--Begin col3 -->
 
                                            <?php if ($rightcolumn_width != 0) : ?>
 
                                            <div class="col3">
 
                                                <div id="rightcol">
 
                                                    <div id="rightcol-padding">
 
                                                        <?php if ($subnav and $splitmenu_col=="rightcol") : ?>
 
                                                        <div class="sidenav-block">
 
                                                            <?php echo $subnav; ?>
 
                                                        </div>
 
                                                        <?php endif; ?>
 
                                                        <jdoc:include type="modules" name="right" style="sidebar" />
 
                                                    </div>
 
                                                </div>
 
                                            </div>
 
                                            <?php endif; ?> 
 
                                            <!--End col3-->
 
                                        </div>
 
                                    </div>
 
                                </div>
 
                            </div>
 
                            <!--End Main Content Block-->
 
                        </div>
 
                    </div>
 
                </div>
 
                <!--Begin Bottom Main Modules-->
 
                <?php $mClasses = modulesClasses('case3'); if ($this->countModules('user7') or $this->countModules('user8') or $this->countModules('user9')) : ?>           <div class="wrapper">
 
                    <div id="bottom-main">
 
                        <div id="mainmodules3" class="spacer<?php echo $mainmod3_width; ?>">
 
                            <?php if ($this->countModules('user7')) : ?>
 
                            <div class="block <?php echo $mClasses['user7'][0]; ?>">
 
                                <jdoc:include type="modules" name="user7" style="sidebar" />
 
                            </div>
 
                            <?php endif; ?>
 
                            <?php if ($this->countModules('user8')) : ?>
 
                            <div class="block <?php echo $mClasses['user8'][0]; ?>">
 
                                <jdoc:include type="modules" name="user8" style="sidebar" />
 
                            </div>
 
                            <?php endif; ?>
 
                            <?php if ($this->countModules('user9')) : ?>
 
                            <div class="block <?php echo $mClasses['user9'][0]; ?>">
 
                                <jdoc:include type="modules" name="user9" style="sidebar" />
 
                            </div>
 
                            <?php endif; ?>
 
                        </div>
 
                    </div>
 
                </div>
 
                <?php endif; ?>
 
                <!--End Bottom Main Modules-->
 
            </div></div>
 
        </div>
 
        <!--End Main Body-->
 
        <!--Begin Bottom Section-->
 
        <?php $mClasses = modulesClasses('case4'); if ($this->countModules('bottom') or $this->countModules('bottom2') or $this->countModules('bottom3')) : ?>
 
        <div class="wrapper">
 
            <div id="bottom-border-top" class="png"></div>
 
            <div id="bottom" class="png"><div id="bottom2" class="png"><div id="bottom3" class="png"><div id="bottom4" class="png">
 
                <div id="mainmodules4" class="spacer<?php echo $mainmod4_width; ?>">
 
                    <?php if ($this->countModules('bottom')) : ?>
 
                    <div class="block <?php echo $mClasses['bottom'][0]; ?>">
 
                        <jdoc:include type="modules" name="bottom" style="bottom" />
 
                    </div>
 
                    <?php endif; ?>
 
                    <?php if ($this->countModules('bottom2')) : ?>
 
                    <div class="block <?php echo $mClasses['bottom2'][0]; ?>">
 
                        <jdoc:include type="modules" name="bottom2" style="bottom" />
 
                    </div>
 
                    <?php endif; ?>
 
                    <?php if ($this->countModules('bottom3')) : ?>
 
                    <div class="block <?php echo $mClasses['bottom3'][0]; ?>">
 
                        <jdoc:include type="modules" name="bottom3" style="bottom" />
 
                    </div>
 
                    <?php endif; ?>
 
                </div>
 
            </div></div></div></div>
 
            <div id="bottom-border-bottom" class="png"></div>
 
        </div>
 
        <?php endif; ?>
 
        <!--End Bottom Section-->
 
        <!--Begin Footer-->
 
        <div id="footer">
 
            <div class="wrapper">
 
                <?php if ($show_copyright == "true") : ?>
 
                <div class="copyright-block">
 
                    <a href="http://www.xpcpro.com/" title="<?php echo JText::_('ROCKETTHEME_JTC'); ?>" id="rocket" class="png"></a>
 
                    <div id="copyright">
 
                    </div>
 
                </div>
 
                <?php else: ?>
 
                <div class="footer-mod">
 
                    <jdoc:include type="modules" name="footer" style="xhtml" />
 
                </div>
 
                <?php endif; ?>
 
                <?php if ($show_topbutton == "true") : ?>
 
                <div id="top-button"><a href="http://www.kokarakis.com/index.php?option=com_xmap&sitemap=1">Sitemap</a></div>
 
                <?php endif; ?>
 
            </div>
 
        </div>
 
        <!--End Footer-->
 
        <?php if ($this->countModules('debug')) : ?>
 
        <div id="debug-mod">
 
            <jdoc:include type="modules" name="debug" style="none" />
 
        </div>
 
        <?php endif; ?>
 
    </body>
 
</html>

      Thanks,
      Artemis
    • Even a broken clock is right twice every day.
    #580542

  • Re: Adding a Page Flip ruins my site.

    Posted 14 years 5 months ago
    • This was taken straight from the words of prim.

      Sometimes JQuery needs to be run in No.Conflict() mode to avoid conflicts against Mootools.
      Sometimes you can get it to work by re-arranging the order in which the JS loads.

      JQuery sometimes has trouble with Mootools applications from what I remember.
    #580545
    • MrCodexCY's Avatar
    • MrCodexCY
    • Rocketeer
    • Posts: 73
    • Thanks: 0
    • Web Design Specialist

    Re: Adding a Page Flip ruins my site.

    Posted 14 years 5 months ago
    • Thank you very much Cliffclof.
      I will try some things but if anyone have more things to say or an example it would be wonderful! :D
    • Even a broken clock is right twice every day.
    #580603

  • Re: Adding a Page Flip ruins my site.

    Posted 14 years 5 months ago
    • I'm curious if you got it working? Keep us posted :)
    #580738
    • MrCodexCY's Avatar
    • MrCodexCY
    • Rocketeer
    • Posts: 73
    • Thanks: 0
    • Web Design Specialist

    Re: Adding a Page Flip ruins my site.

    Posted 14 years 5 months ago
    • Ok people, i fixed it ;]
      First of all thank you VERY much Cliffclof for providing me with the No.Conflict() mode, i totally forgot it.

      Second, here is the correct code so JQuery wont get you troubles with Mootools:

      Add in <head> tag:
      <style type="text/css">
img { behavior: url(RSS/iepngfix.htc) }
#pageflip {
     position: relative;
     right: 0; top: 0;
     float: right; 
}
#pageflip img {
     width: 50px; height: 52px;
     z-index: 99;
     position: absolute;
     right: 0; top: 0;
     -ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
     width: 50px; height: 50px;
     overflow: hidden;
     position: absolute;
     right: 0; top: 0;
     background: url(RSS/subscribe.png) no-repeat right top;
}
</style>
     <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript"> 
jQuery.noConflict();
jQuery(document).ready(function(){
     jQuery("#pageflip").hover(function() {
          jQuery("#pageflip img , .msg_block").stop()
               .animate({
                    width: '307px', 
                    height: '319px'
               }, 500); 
          } , function() {
          jQuery("#pageflip img").stop() 
               .animate({
                    width: '50px', 
                    height: '52px'
               }, 220);
          jQuery(".msg_block").stop() 
               .animate({
                    width: '50px', 
                    height: '50px'
               }, 200);
     });
 
     
});
</script>

      Add in <body> tag:
      <div id="pageflip">
     <a href="#">
          <img src="RSS/page_flip.png" alt="" />
          <span class="msg_block"></span>
     </a>
</div>

      If you have any problems with it i would be glad to help! ;]
    • Even a broken clock is right twice every day.
    #581569

  • Re: Adding a Page Flip ruins my site.

    Posted 14 years 5 months ago
    • Thanks for the reply, glad you got it working and thanks for sharing!
    #582774
    • MrCodexCY's Avatar
    • MrCodexCY
    • Rocketeer
    • Posts: 73
    • Thanks: 0
    • Web Design Specialist

    Re: Adding a Page Flip ruins my site.

    Posted 14 years 5 months ago
    • you welcome m8, if you have any difficulties let me know.
    • Even a broken clock is right twice every day.
    #583746

Time to create page: 0.090 seconds