4 replies [Last post]
russianguy
russianguy's picture
Offline
newbie
Last seen: 10 years 16 weeks ago
Timezone: GMT-7
Joined: 2012-10-10
Posts: 2
Points: 3

Hi Guys

so in flexi css i made a template for my site it has a DIV Class ....

so if you look at the picture i provided,I want the link to open only in the Main column. Because now when I click on any the link the entire page changes, but what I want is only the main column to change. I want the link to open in class='row_6 cssLI PageLayout28_row_6_design' Please help

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="includes/CSSLayouts/CSSLayouts.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="includes/CSSLayouts/debug_plus.js"></script>
<link href="includes/CSSLayouts/PageLayout28.css" rel="stylesheet" type="text/css" />
<link href="includes/CSSLayouts/PageLayout28_user.css" rel="stylesheet" type="text/css" />
</head>
 
<body class="PageLayout28_body_design">
<div class="PageLayout28">
<!-- (CSSLayouts Begin)  #PageLayout28 #build_version=1.1.284;pack=User;category=My Page Layouts;layout=;layoutType=page;scheme=;cssSource=file;assets=;halign=center;minwidth=1028px;maxwidth=1028px;width=1028px;bc=My Page Layouts;bl=final10062012-->
 
<div class='cssLO PageLayout28_wrapper_layout'>
<div class='wrapper cssLI PageLayout28_wrapper_design'>
<div class='cssLO PageLayout28_row_1_layout'>
<div class='row_1 cssLI PageLayout28_row_1_design'>
<div class='cssLO PageLayout28_column_3_layout'>
<div class='column_3 cssLI PageLayout28_column_3_design'><!-- column_3 Content Starts Here -->&nbsp;<!-- column_3 Content Ends Here -->
</div>
</div>
<div class='cssLO PageLayout28_column_4_layout'>
<div class='column_4 cssLI PageLayout28_column_4_design'><!-- column_4 Content Starts Here -->&nbsp;<!-- column_4 Content Ends Here -->
</div>
</div>
<div class='cssLClearC'></div>
</div>
</div>
<div class='cssLO PageLayout28_row_2_layout'>
<div class='row_2 cssLI PageLayout28_row_2_design'><!-- row_2 Content Starts Here -->&nbsp;<!-- row_2 Content Ends Here -->
</div>
</div>
<div class='cssLO PageLayout28_row_3_layout'>
<div class='row_3 cssLI PageLayout28_row_3_design'>
<div class='cssLO PageLayout28_column_1_layout'>
<div class='column_1 cssLI PageLayout28_column_1_design'><!-- column_1 Content Starts Here -->&nbsp;<!-- column_1 Content Ends Here -->
</div>
</div>
<div class='cssLO PageLayout28_column_2_layout'>
<div class='column_2 cssLI PageLayout28_column_2_design'>
<div class='cssLO PageLayout28_row_6_layout'>
<div class='row_6 cssLI PageLayout28_row_6_design'><!-- row_6 Content Starts Here -->
 
              MAIN
 
            <!-- row_6 Content Ends Here -->
</div>
</div>
<div class='cssLO PageLayout28_row_7_layout'>
<div class='row_7 cssLI PageLayout28_row_7_design'>
<div class='cssLO PageLayout28_row_7_xtdalignwrapper_layout'>
<div class='row_7_xtdalignwrapper cssLI PageLayout28_row_7_xtdalignwrapper_design'>
<div class='cssLO PageLayout28_column_5_layout'>
                                               <div class='column_5 cssLI PageLayout28_column_5_design'><!-- column_5 Content Starts Here -->&nbsp;<!-- column_5 Content Ends Here -->
                                               </div>
</div>
<div class='cssLO PageLayout28_column_6_layout'>
                                               <div class='column_6 cssLI PageLayout28_column_6_design'><!-- column_6 Content Starts Here -->&nbsp;<!-- column_6 Content Ends Here -->
                                               </div>
</div>
<div class='cssLO PageLayout28_column_7_layout'>
                                               <div class='column_7 cssLI PageLayout28_column_7_design'><!-- column_7 Content Starts Here -->&nbsp;<!-- column_7 Content Ends Here -->
                                               </div>
</div>
<div class='cssLO PageLayout28_column_8_layout'>
                                               <div class='column_8 cssLI PageLayout28_column_8_design'><!-- column_8 Content Starts Here -->&nbsp;<!-- column_8 Content Ends Here -->
                                               </div>
</div>
<div class='cssLClearC'>
</div>
</div>
</div>
<div class='cssLClearR'>  
</div>
</div>
</div>
<div class='cssLClearR'></div>
</div>
</div>
<div class='cssLClearC'></div>
</div>
</div>
<div class='cssLO PageLayout28_row_4_layout'>
<div class='row_4 cssLI PageLayout28_row_4_design'><!-- row_4 Content Starts Here -->&nbsp;<!-- row_4 Content Ends Here -->
</div>
</div>
<div class='cssLO PageLayout28_row_5_layout'>
<div class='row_5 cssLI PageLayout28_row_5_design'>
<div class='cssLO PageLayout28_column_9_layout'>
<div class='column_9 cssLI PageLayout28_column_9_design'><!-- column_9 Content Starts Here -->
 
 
 
<!-- column_9 Content Ends Here -->
</div>
</div>
<div class='cssLO PageLayout28_column_10_layout'>
<div class='column_10 cssLI PageLayout28_column_10_design'><!-- column_10 Content Starts Here -->
 
          test | test | test | test |test
 
<!-- column_10 Content Ends Here -->
</div>
</div>
<div class='cssLClearC'>
</div>
</div>
</div>
<div class='cssLO PageLayout28_row_8_layout'>
<div class='row_8 cssLI PageLayout28_row_8_design'><!-- row_8 Content Starts Here -->
 
      CopyRight © 2012   All rights reserved
 
<!-- row_8 Content Ends Here -->
</div>
</div>
<div class='cssLClearR'></div>
</div>
</div>
<div class="cssLClearL"></div>
<!-- #PageLayout28 (CSSLayouts End) -->
</div>
 
</body>
</html>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 11 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

There are two ways I can

There are two ways I can think of to do this one using frames which are frond upon for usability reasons.
The other using JavaScript (AJAX) to attach to the links, fetch the content and replace the existing content.
Actually you could use a third method, tabs, where all the content is loaded on the initial page but some of it is hidden until the correct tab is clicked.

kevin619
kevin619's picture
Offline
Regular
Fremont,CA
Last seen: 8 years 39 weeks ago
Fremont,CA
Timezone: GMT+5
Joined: 2012-02-16
Posts: 24
Points: 28

You get change ever in just

You get change ever in just row and other remain same so you can use a master page.

Make sure you check out my>>App Designers Blog<<

russianguy
russianguy's picture
Offline
newbie
Last seen: 10 years 16 weeks ago
Timezone: GMT-7
Joined: 2012-10-10
Posts: 2
Points: 3

thanks but here is how i

thanks but here is how i solved the isuse : but now i have a diffrent issue i am trying to chance the scroll bar look in that spesific div any idea how ?

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="includes/CSSLayouts/CSSLayouts.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="includes/CSSLayouts/debug_plus.js"></script>
<link href="includes/CSSLayouts/final100912.css" rel="stylesheet" type="text/css" />
<link href="includes/CSSLayouts/final100912_user.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script type="text/javascript"> 
 $(function() {
$('a.loader').on('click', function(e) {
    e.preventDefault();
    $('#content_1').load($(this).attr('href'));
});});</script>
 
 
 
 
 
 
 
 
</head>
 
<body class="final100912_body_design">
<div class="final100912">
  <!-- (CSSLayouts Begin)  #final100912 #build_version=1.1.284;pack=User;category=;layout=;layoutType=page;scheme=;cssSource=file;assets=;halign=center;minwidth=1028px;maxwidth=1028px;width=1028px;bc=My Page Layouts;bl=final10062012-->
  <div class='cssLO final100912_wrapper_layout'>
    <div class='wrapper cssLI final100912_wrapper_design'>
      <div class='cssLO final100912_row_1_layout'>
        <div class='row_1 cssLI final100912_row_1_design'>
          <div class='cssLO final100912_column_3_layout'>
            <div class='column_3 cssLI final100912_column_3_design'>
              <!-- column_3 Content Starts Here -->
              &nbsp;
              <!-- column_3 Content Ends Here -->
            </div>
          </div>
          <div class='cssLO final100912_column_4_layout'>
            <div class='column_4 cssLI final100912_column_4_design'>
              <!-- column_4 Content Starts Here -->
              &nbsp;
              <!-- column_4 Content Ends Here -->
            </div>
          </div>
          <div class='cssLClearC'></div>
        </div>
      </div>
      <div class='cssLO final100912_row_2_layout'>
        <div class='row_2 cssLI final100912_row_2_design'>
          <!-- row_2 Content Starts Here -->
          &nbsp;
          <!-- row_2 Content Ends Here -->
        </div>
      </div>
      <div class='cssLO final100912_row_3_layout'>
        <div class='row_3 cssLI final100912_row_3_design'>
          <div class='cssLO final100912_column_1_layout'>
            <div class='column_1 cssLI final100912_column_1_design'>
              <!-- column_1 Content Starts Here -->
              &nbsp;
              <!-- column_1 Content Ends Here -->
            </div>
          </div>
          <div class='cssLO final100912_column_2_layout'>
            <div class='column_2 cssLI final100912_column_2_design'>
              <div class='cssLO final100912_main_layout' >
 
 
 
                <div class='main cssLI final100912_main_design'  id="content_1">
 
 
                  <!-- main Content Starts Here -->
 
 
 
 
 
 
 
 
 
 
                  <!-- main Content Ends Here -->
 
 
 
                </div>   
                </div>
 
              <div class='cssLO final100912_row_7_layout'>
                <div class='row_7 cssLI final100912_row_7_design'>
                  <div class='cssLO final100912_row_7_xtdalignwrapper_layout'>
                    <div class='row_7_xtdalignwrapper cssLI final100912_row_7_xtdalignwrapper_design'>
                      <div class='cssLO final100912_column_5_layout'>
                        <div class='column_5 cssLI final100912_column_5_design'>
                          <!-- column_5 Content Starts Here -->
                          &nbsp;
                          <!-- column_5 Content Ends Here -->
                        </div>
                      </div>
 
 
                      <a class="loader" href="test11.html">
                      <div class='cssLO final100912_column_6_layout'>
                        <div class='column_6 cssLI final100912_column_6_design'>
 
                          <!-- column_6 Content Starts Here -->
                          &nbsp;
                          <!-- column_6 Content Ends Here -->
                        </div>
                      </div></a>
                      <div class='cssLO final100912_column_7_layout'>
                        <div class='column_7 cssLI final100912_column_7_design'>
                          <!-- column_7 Content Starts Here -->
                          &nbsp;
                          <!-- column_7 Content Ends Here -->
                        </div>
                      </div>
                      <div class='cssLO final100912_column_8_layout'>
                        <div class='column_8 cssLI final100912_column_8_design'>
                          <!-- column_8 Content Starts Here -->
                          &nbsp;
                          <!-- column_8 Content Ends Here -->
                        </div>
                      </div>
                      <div class='cssLClearC'></div>
                    </div>
                  </div>
                  <div class='cssLClearR'></div>
                </div>
              </div>
              <div class='cssLClearR'></div>
            </div>
          </div>
          <div class='cssLClearC'></div>
        </div>
      </div>
      <div class='cssLO final100912_row_4_layout'>
        <div class='row_4 cssLI final100912_row_4_design'>
          <!-- row_4 Content Starts Here -->
          &nbsp;
          <!-- row_4 Content Ends Here -->
        </div>
      </div>
      <div class='cssLO final100912_row_5_layout'>
        <div class='row_5 cssLI final100912_row_5_design'>
          <div class='cssLO final100912_column_9_layout'>
            <div class='column_9 cssLI final100912_column_9_design'>
              <!-- column_9 Content Starts Here -->
              760.431.9977
              <!-- column_9 Content Ends Here -->
            </div>
          </div>
          <div class='cssLO final100912_column_10_layout'>
            <div class='column_10 cssLI final100912_column_10_design'>
              <!-- column_10 Content Starts Here -->
              test | test | test | test |test
              <!-- column_10 Content Ends Here -->
            </div>
          </div>
          <div class='cssLClearC'></div>
        </div>
      </div>
      <div class='cssLO final100912_row_8_layout'>
        <div class='row_8 cssLI final100912_row_8_design'>
          <!-- row_8 Content Starts Here -->
          CopyRight © 2012  Bravo Jewellers, Bravo Creations. All rights reserved
          <!-- row_8 Content Ends Here -->
        </div>
      </div>
      <div class='cssLClearR'></div>
    </div>
  </div>
  <div class="cssLClearL"></div>
  <!-- #final100912 (CSSLayouts End) -->
</div>
</body>
</html>

SusanGray
SusanGray's picture
Offline
newbie
USA
Last seen: 10 years 5 weeks ago
USA
Timezone: GMT+5
Joined: 2012-12-21
Posts: 7
Points: 7

I think you want dynamic

I think you want dynamic contains in main section without loading page, You can achieve this by using either i-frame or JavaScript/ jQuery toggle on based on your cantaint

here is jsfiddle example of it using i-frame

i tried make layout as per your flexi layout