SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Content Jumps Around on the Page Using Slidetoggle

    I have a website with dynamically generated content. I have broken it down so that for each park there are maps, directions, etc. I have successfully gotten it to generate the way I want, and to use slidetoggle to hide and show the information. However, when you open a category, the content jumps around on the page, making everything very confusing. Here is the code:
    Code:
    <?php
    
    foreach ($datas as $name)
    {
    
    	if ($name['state'] === 'PA') 
    	{
                    echo
    		'<input type="hidden" name="id" value="' . $name['id'] . '" />' .
    		'<h1 id="name">' . htmlentities($name['name']) . '</h1>' .
    		'<p id="descriptionlist">' .
    		htmlentities($name['description']) . ' ' .
    		'<br />' .
    		'<ul id="link">' .
    		'<li class="l1">' .
    		'<a href="' . $name['site'] . '"target="_blank">' . $name['sname'] . '</a>' .
    		'</li>' .
    		'</ul>' .							
    		'</p>' .
    
    '<h2 class="loc">Location</h2>' .
    '<div class="loct">' .
    	'<img id="'.$name['id'].'" src="maps/'.$name['id'].'state.gif"/>' .
    	'<br />' .
            htmlentities($name['street']) .
    	'<br />' .
    	htmlentities($name['city']) . ', ' .
    	htmlentities($name['state']) . ' ' .
    	htmlentities($name['zip']) . ' ' .
    	'<br>' .
    	htmlentities($name['phone']) . 
    	'<br>' . '<br>' .
    '</div>' .
    
    
    '<h2 class="map">Trail Map</h2>' .
    '<div class = "mapt">' . 
    	'<div id="mapDiv">' .
    	'<h3 id="trailimg">Trail Map</h3>
    	<img id="'.$name['id'].'" src="maps/'.$name['id'].'.gif"/>' . '<br>' . '<br>' . '</div>' .
    '</div>' .
    
    '<h2 class = "pho">Photos</h2>' .
    '<div class = "phot">' .
    	'<div id="photoDiv">' .
    	'<p>Submit <i>your</i> photos of ' . htmlentities($name['name']) . 'through our <ul id = "link"><li><a href="https://www.facebook.com/Ride4Wheel">Facebook Page!</li></ul></a></h3><p> Or go to our Contact Us page for information on how to e-mail us your favorite pictures!</p>' .
    	'</div>' .
    '</div>' .
    
    '<h2 class="vid">Videos</h2>' .
    '<div class="vidt">' .			
    	'<p>Submit <i>your</i> videos of ' . htmlentities($name['name']) . 'through our <ul id = "link"><li><a href="https://www.facebook.com/Ride4Wheel">Facebook Page!</li></ul></a></h3><p> Or go to our Contact Us page for information on how to e-mail us your favorite videos!</p>' .
    '</div>' .
    			
    '<h2 class="com">Comments</h2>' .
    '<div class="comt">' .
    	'<p id="commentlist"><FONT COLOR="#1e3153">' .
    	($name['comment']) . '<br><small>  ~' .  
    	($name['commentname']) . '</small></FONT><br></p>' .
    	'<h3>Let us know what you think<br>of ' . htmlentities($name['name']) . '</h3>' .
    '</div>' .
    
    '<h2 class="eve">Events</h2>' .
    '<div class="evet">' .
    	'<h3>Check out these great events happening at ' . $name['name'] . '</h2><br>' . $name['event'] . '<br>' .$name['date'] . '<br>' . $name['description2'] . '</h2>' .
    '</div>';
    }}
    
    ?>
    </div>
    </body>
    and

    Code:
    $(document).ready(function(){
    $('.loct, .mapt, .phot, .vidt, .comt, .evet').hide()
    });
    
    
    
    $(document).ready(function(){
    $('.loc').css('width: 800px');
    $('.loc').click(function(){
    $('.loct').animate(
    {'height':'toggle'},
    'slow', 'swing'); 
    });
    });
    
    
    
    $(document).ready(function(){
    $('.map').click(function(){
    $('.mapt').toggle()
    });
    });
    
    $(document).ready(function(){
    $('.pho').click(function(){
    $('.phot').toggle()
    });
    });
    
    $(document).ready(function(){
    $('.vid').click(function(){
    $('.vidt').toggle()
    });
    });
    
    $(document).ready(function(){
    $('.com').click(function(){
    $('.comt').toggle()
    });
    });
    
    $(document).ready(function(){
    $('.eve').click(function(){
    $('.evet').toggle()
    });
    });
    To see the results, go to www.ride4wheel.com/new_ma.php

    What I want is for the map or whatever you are clicking to slide open and closed without the entire page flying around. BTW the design elements of the site are not done: I know it's really ugly. That's for later.

    I'd appreciate any help.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Your page is jumping around because your code is currently targeting every element on the page with the same class name, also your current code is far to complex for something so simple as you can chain selectors together in one query but achieve the same result. See the below for a snippet that should solve the issue you're current experiencing, simply overwrite your current JS with the following:

    http://jsfiddle.net/SWkGE/

  3. #3
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is ABSOLUTELY FANTASTIC and it gets me very close to where I want to be. As you can tell, I'm learning this on my own and I'm so very new at this.

    The only problem I'm having at this point is in a case where I have:

    <p class="phot">
    Stuff
    Stuff
    <ul id="link">
    stuff
    </ul>
    </p>

    Any time I have a situation like this where there is other HTML inside of the <p></p> tags, it doesn't get hidden. Is there a work-around for this?

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The jsFiddle I setup was only an example of how you could achieve the desired result you needed, if you need multiple elements to be hidden simply wrap them inside a DIV element with the class you need E.g. phot and it will work fine. See the below if that sounds confusing.

    http://jsfiddle.net/SWkGE/1/

  5. #5
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. When I started I was pretty much on the right track with how to do the markup (probably in a version previous to what you saw). I didn't know about bind though. That's fantastic. I really appreciate your help. Learning on your own is so hard, and it's people like you that make it possible to move forward.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •