Hey,

I could sure do with some help on this... Been pulling my hair out.

I have a single HTML file with various page transitions - I am trying to solve the coding issue to allow me to have four new blog pages - but that all default to the main blog-single page.

----

I will add in the code from the page to show one of you kind people out there in Daniweb...

Always replies will be welcomed...

      <!--Info Screen-->
      <article class="pt-page pt-page-6" id="blog">
        <div class="outer-wrapper orange-bg">
          <!--Header-->
          <header class="row-fluid">
            <div class="container">
              <div class="span8 relative">
                <div class="page-navi">
                    <a class="home-page page-transition" href="#home" onclick="gotoPageWithTrans2(0)" title="Go Home"></a>
                  <a class="prev-page page-transition" href="#contacts" onclick="gotoPageWithTrans3(4)" title="Go To Previous Page"></a>
                </div>
                <h1>Concept</h1>
                <nav class="submenu page6-submenu">
                  <ul>
                    <li><a href="#team" class="page-transition" onclick="gotoPageWithTrans5(2)">Team</a></li>
                    <li><a href="#works" class="page-transition" onclick="gotoPageWithTrans5(3)">Works</a></li>
                    <li><a href="#contacts" class="page-transition" onclick="gotoPageWithTrans5(4)">Title</a></li>
                    <li class="current"><a href="#blog">Concept</a></li>
                    <li class="inline"><a href="#feedback" class="page-transition" onclick="gotoPageWithTrans4(6)">Contact</a></li>
                    <li><a href="#about" class="page-transition" onclick="gotoPageWithTrans5(1)">About</a></li>
                  </ul>
                </nav>
              </div>
              <div class="span4">
                <ul class="social-bar-white">
                  <li><a class="facebook-white" href="#" title="Facebook" target="_blank"></a></li>
                  <li><a class="twitter-white" href="#" title="Twitter" target="_blank"></a></li>
                  <li><a class="linkedin-white" href="#" title="LinkedIn" target="_blank"></a></li>

                </ul>
              </div>
            </div>
          </header>
          <!--Content-->
          <section class="row-fluid">
            <div class="container blogpost-row">
                <div class="span6">
                <a class="blogpost page-transition" href="#blog-single" onclick="gotoPageWithTrans6(7)">
                    <span class="figcap"></span>
                  <h2>Title 1</h2>
                  <span class="post-meta">Stage #</span>
                  <p>ChiefNullam interdum accumsan diam, dictum tempor nisl pretium. Etiam nulla velit, tempor vitae dolor eget, aliquam posuere nulla. Morbi vestibulum dui ut orci commodo, ut ornare dui. </p>
                </a>
              </div>
                <div class="span6">
                <a class="blogpost page-transition" href="#blog-single" onclick="gotoPageWithTrans6(8)">
                    <span class="figcap"></span>
                  <h2>Title 2</h2>
                  <span class="post-meta">Stage #</span>
                  <p>Etiam bibendum felis non porta venenatis. Maecenas sit amet quam sit amet ipsum rutrum egestas. Curabitur quis ligula ante. Fusce lectus neque, consectetur eu pretium eu, pellentesque quis dui.</p>
                </a>
              </div>
            </div>
            <div class="container blogpost-row">
                <div class="span6">
                <a class="blogpost page-transition" href="#blog-single" onclick="gotoPageWithTrans6(9)">
                    <span class="figcap"></span>
                  <h2>Title 3</h2>
                  <span class="post-meta">Stage #</span>
                  <p>ChiefNullam interdum accumsan diam, dictum tempor nisl pretium. Etiam nulla velit, tempor vitae dolor eget, aliquam posuere nulla. Morbi vestibulum dui ut orci commodo, ut ornare dui mattis... </p>
                </a>
              </div>
                <div class="span6">
                <a class="blogpost page-transition" href="#blog-single" onclick="gotoPageWithTrans6(10)">
                    <span class="figcap"></span>
                  <h2>Title 4</h2>
                  <span class="post-meta">Stage #</span>
                  <p>Etiam bibendum felis non porta venenatis. Maecenas sit amet quam sit amet ipsum rutrum egestas. Curabitur quis ligula ante. Fusce lectus neque, consectetur eu pretium eu, pellentesque quis dui...</p>
                </a>
              </div>
            </div>
          </section>
          <div class="push"><!--//--></div><!--Footer-->
        </div>












      <!--Single Blog Post Screen1-->
      <article class="pt-page pt-page-8" id="blog-single">
        <div class="outer-wrapper orange-bg">
          <!--Header-->
          <header class="row-fluid">
            <div class="container">
              <div class="span8 relative">
                <div class="page-navi">
                    <a class="home-page page-transition" href="#home" onclick="gotoPageWithTrans2(0)" title="Go Home"></a>
                  <a class="prev-page page-transition" href="#blog" onclick="gotoPageWithTrans7(5)" title="Go To Blog Posts"></a>
                </div>
                <h1>Concept 1</h1>
                <nav class="submenu page6-submenu">
                  <ul>
                    <li><a href="#team" class="page-transition" onclick="gotoPageWithTrans5(2)">Team</a></li>
                    <li><a href="#works" class="page-transition" onclick="gotoPageWithTrans5(3)">Work</a></li>
                    <li><a href="#contacts" class="page-transition" onclick="gotoPageWithTrans5(4)">Title</a></li>
                    <li class="current"><a href="#blog">Concept</a></li>
                    <li class="inline"><a href="#feedback" class="page-transition" onclick="gotoPageWithTrans4(6)">Contact</a></li>
                    <li><a href="#about" class="page-transition" onclick="gotoPageWithTrans5(1)">About</a></li>
                  </ul>
                </nav>
              </div>
              <div class="span4">
                <ul class="social-bar-white">
                  <li><a class="facebook-white" href="#" title="Facebook" target="_blank"></a></li>
                  <li><a class="twitter-white" href="#" title="Twitter" target="_blank"></a></li>
                  <li><a class="linkedin-white" href="#" title="LinkedIn" target="_blank"></a></li>

                </ul>
              </div>
            </div>
          </header>
          <!--Content-->
          <section class="row-fluid">
            <div class="single-post-content">
              <div class="container">
                <h2>Title here</h2>
                <span class="post-meta">Title here</span>
                <p>Etiam enim lacus, ornare et tempor et, rhoncus rhoncus sem. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien. Fusce sed est orci, vel condimentum felis. Phasellus et enim sed est dictum luctus a in nibh. In metus dolor, interdum eget consectetur vel, ornare sodales felis.</p>
                <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis tincidunt erat quam. Etiam placerat sapien elit. Pellentesque egestas ornare sagittis. Sed augue lorem, dignissim eget bibendum vitae, scelerisque eget justo.</p>
              </div>
              <div class="container comments">
                <h2>Section Title</h2>
                <div class="comments-wrapper clearfix">
                  <div class="timeline"><span class="timeline-track"></span><span class="timeline-arrow"></span></div>
                    <div class="comment">
                      <span class="figcap"></span>
                      <span class="pointer-right"></span>
                      <span class="comment-meta">Title here</span>
                      <p>ChiefNullam interdum accumsan diam, dictum tempor nisl pretium. Etiam nulla velit, tempor vitae dolor eget, aliquam posuere nulla. Morbi vestibulum dui ut orci commodo, ut ornare dui mattis.</p>   
                    </div>
                    <div class="comment last-col">
                      <span class="figcap"></span>
                      <span class="pointer-left"></span>
                      <span class="comment-meta">Title here</span>
                      <p>ChiefNullam interdum accumsan diam, dictum tempor nisl pretium. Etiam nulla velit, tempor vitae dolor eget, aliquam posuere nulla. Morbi vestibulum dui ut orci commodo, ut ornare dui mattis.</p>   
                    </div>
                    <div class="comment">
                      <span class="figcap"></span>
                      <span class="pointer-right"></span>
                      <span class="comment-meta">Title here</span>
                      <p>ChiefNullam interdum accumsan diam, dictum tempor nisl pretium. Etiam nulla velit, tempor vitae dolor eget, aliquam posuere nulla. Morbi vestibulum dui ut orci commodo, ut ornare dui mattis. Maecenas quis diam vehicula, consequat purus in, molestie lorem. Donec in pharetra ante. Pellentesque faucibus ligula neque.</p>  
                    </div>
                    <div class="comment last-col">
                      <span class="figcap"></span>
                      <span class="pointer-left"></span>
                      <span class="comment-meta">Title here</span>
                      <p>ChiefNullam interdum accumsan diam, dictum tempor nisl pretium. Etiam nulla velit, tempor vitae dolor eget, aliquam posuere nulla. Morbi vestibulum dui ut orci commodo, ut ornare dui mattis.</p>   
                    </div>
                  </div>
              </div>
            </div>
          </section>
          <div class="push"><!--//--></div><!--Footer-->
        </div>
        <!--Footer-->
        <footer>
          <div class="container">
            <p>2013 Copyright &copy;</p>
          </div>
        </footer>
      </article>
        </div>
      <!-- jQuery -->
      <script src="js/jquery.js"></script>
      <script src="js/pagetransitions.js" type="text/javascript"></script>
      <script src="js/validation.js" type="text/javascript"></script>
      <script src="js/grid.js"></script>
    <script src="js/scripts.js"></script>










      <!--Single Blog Post Screen2-->
      <article class="pt-page pt-page-9" id="blog-single">
        <div class="outer-wrapper orange-bg">
          <!--Header-->
          <header class="row-fluid">
            <div class="container">
              <div class="span8 relative">
                <div class="page-navi">
                    <a class="home-page page-transition" href="#home" onclick="gotoPageWithTrans2(0)" title="Go Home"></a>
                  <a class="prev-page page-transition" href="#blog" onclick="gotoPageWithTrans7(5)" title="Go To Blog Posts"></a>
                </div>
                <h1>Concept 2</h1>
                <nav class="submenu page6-submenu">
                  <ul>
                    <li><a href="#team" class="page-transition" onclick="gotoPageWithTrans5(2)">Team</a></li>
                    <li><a href="#works" class="page-transition" onclick="gotoPageWithTrans5(3)">Work</a></li>
                    <li><a href="#contacts" class="page-transition" onclick="gotoPageWithTrans5(4)">Title</a></li>
                    <li class="current"><a href="#blog">Concept</a></li>
                    <li class="inline"><a href="#feedback" class="page-transition" onclick="gotoPageWithTrans4(6)">Contact</a></li>
                    <li><a href="#about" class="page-transition" onclick="gotoPageWithTrans5(1)">About</a></li>
                  </ul>
                </nav>
              </div>
              <div class="span4">
                <ul class="social-bar-white">
                  <li><a class="facebook-white" href="#" title="Facebook" target="_blank"></a></li>
                  <li><a class="twitter-white" href="#" title="Twitter" target="_blank"></a></li>
                  <li><a class="linkedin-white" href="#" title="LinkedIn" target="_blank"></a></li>

                </ul>
              </div>
            </div>
          </header>
          <!--Content-->
          <section class="row-fluid">
            <div class="single-post-content">
              <div class="container">
                <h2>Title here</h2>
                <span class="post-meta">Title here</span>
                <p>Etiam enim lacus, ornare et tempor et, rhoncus rhoncus sem. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien. Fusce sed est orci, vel condimentum felis. Phasellus et enim sed est dictum luctus a in nibh. In metus dolor, interdum eget consectetur vel, ornare sodales felis.</p>
                <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis tincidunt erat quam. Etiam placerat sapien elit. Pellentesque egestas ornare sagittis. Sed augue lorem, dignissim eget bibendum vitae, scelerisque eget justo.</p>
              </div>
              <div class="container comments">
                <h2>Comments</h2>
                <div class="comments-wrapper clearfix">
                  <div class="timeline"><span class="timeline-track"></span><span class="timeline-arrow"></span></div>
                    <div class="comment">
                      <span class="figcap"></span>
                      <span class="pointer-right"></span>
                      <span class="comment-meta">Title here</span>
                      <p>ChiefNullam interdum accumsan diam, dictum tempor nisl pretium. Etiam nulla velit, tempor vitae dolor eget, aliquam posuere nulla. Morbi vestibulum dui ut orci commodo, ut ornare dui mattis.</p>   
                    </div>
                    <div class="comment last-col">
                      <span class="figcap"></span>
                      <span class="pointer-left"></span>
                      <span class="comment-meta">Title here</span>
                      <p>ChiefNullam interdum accumsan diam, dictum tempor nisl pretium. Etiam nulla velit, tempor vitae dolor eget, aliquam posuere nulla. Morbi vestibulum dui ut orci commodo, ut ornare dui mattis.</p>   
                    </div>
                    <div class="comment">
                      <span class="figcap"></span>
                      <span class="pointer-right"></span>
                      <span class="comment-meta">Title here</span>
                      <p>ChiefNullam interdum accumsan diam, dictum tempor nisl pretium. Etiam nulla velit, tempor vitae dolor eget, aliquam posuere nulla. Morbi vestibulum dui ut orci commodo, ut ornare dui mattis. Maecenas quis diam vehicula, consequat purus in, molestie lorem. Donec in pharetra ante. Pellentesque faucibus ligula neque.</p>  
                    </div>
                    <div class="comment last-col">
                      <span class="figcap"></span>
                      <span class="pointer-left"></span>
                      <span class="comment-meta">Title here</span>
                      <p>ChiefNullam interdum accumsan diam, dictum tempor nisl pretium. Etiam nulla velit, tempor vitae dolor eget, aliquam posuere nulla. Morbi vestibulum dui ut orci commodo, ut ornare dui mattis.</p>   
                    </div>
                  </div>
              </div>
            </div>
          </section>
          <div class="push"><!--//--></div><!--Footer-->
        </div>
        <!--Footer-->
        <footer>
          <div class="container">
            <p>2013 Copyright &copy;</p>
          </div>
        </footer>
      </article>
        </div>
      <!-- jQuery -->
      <script src="js/jquery.js"></script>
      <script src="js/pagetransitions.js" type="text/javascript"></script>
      <script src="js/validation.js" type="text/javascript"></script>
      <script src="js/grid.js"></script>
    <script src="js/scripts.js"></script>    






  </body>
</html>

Now this shows the main page with the four 'blog' or content areas - and what I am looking for is to have each of them pointing off to their own blog page...

I've tried changing the page transitions... but thats not working...

So... over to someone whose much better than me...

Thanks

Miguel

That's a kickass question my friend! Requires a lot of time, have you instead revised transitioning and studied a healthy tutorial?

http://css3.bradshawenterprises.com/transitions/

Could recommend it enough for clarity making it dead easy to grasp :) I've got it bookmarked!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.