SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: jQuery Margin

  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation jQuery Margin

    This is where I'm having trouble:
    http://hddivx.co.cc/movies/2012

    Basically I have some text, a spoiler to reveal more info and text under the video and when i reveal the info, it expands and the text goes below the video so that you can't see it anymore.

    Is it possible to change the top margins of the text when the Spoiler is clicked, and I'd prefer animate. Thanks.

    Code:
    <script type="text/javascript">
    //<![CDATA[
    $(document).ready(function() { 
    
    	$("span.spoiler").hide();
    
    	 $('<a class="reveal">Full Summary &gt;&gt;</a> ').insertBefore('.spoiler');
    
    	$("a.reveal").click(function(){
    		$(this).parents("p").children("span.spoiler").fadeIn(2500);
    		$(this).parents("p").children("a.reveal").fadeOut(600);
                    $("span#lightsOn").css(marginTop: "800px"};
    	});
    
    });
    //]]>
    </script>
    Note: I just deleted $("span#lightsOn").css(marginTop: "800px"}; it wasn't working, it showed the contents of the spoiler and it looked bad... so keep that in mind. =)

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    There are a couple of ways to deal with this, depending on the markup of the page (which I cannot seem to load).

    One is where the expanding text is set to overflow: auto so that it's container changes size too, thus affecting other content below it.

    Two is to set the video below to clear left, so that it drops down below anything that would overlap it.

    Both of these techniques are based on CSS, which is a more reliable way to affect the presentation oof content on your page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <span class="spoiler" style="overflow:auto;">

    It still doesn't work

    I never heard of clear left, but i tried clear:both; after looking at w3 and it still doesn't work, maybe include it in the style file?

    Or use both overflow:auto; and clear:both;

    ?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Okay, I see that the "lights off" part is positioned asbolutely, so it will not be able to move when the video moves further down the page.

    One solution is to make those absolute parts relative to to the video container itself, the one called "dwpdiv"

    Code css:
    #dwpdiv { position: relative; }

    You will need to readjust the right and top values for the span#lightsOff and span#lightsOn but the problem should then be solved.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the lights on altogether disappeared

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Let me reiterate: You will need to readjust the right and top values for span#lightsOff and span#lightsOn
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh... move it down?

  8. #8
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    turn the lights off now darkens the column, you can see it if you want.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Then you may want to back out until others can find the time to develop a full working solution for you.

    Edit: Even better, the good people in the CSS Forum will be able to provide you with a solution in no time at all.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the help, i think i found a jquery solution:

    <script type="text/javascript">
    //<![CDATA[
    $(document).ready(function() {

    $("span.spoiler").hide();

    $('<a class="reveal">Full Summary &gt;&gt;</a> ').insertBefore('.spoiler');

    $("a.reveal").click(function(){
    $(this).parents("p").children("span.spoiler").fadeIn(2500);
    $(this).parents("p").children("a.reveal").fadeOut(600);
    $("span#lightsOff").animate({"margin-top": (currentMargin + 100) + "px"});
    });

    });
    //]]>
    </script>

    Can you explain why it doesn't work though?

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    omg thank you thank you, in the end. Jquery did it but u were a lot of help.

    You could view it, just to enjoy your glory. (IDK LOL)

    <script type="text/javascript">
    //<![CDATA[
    $(document).ready(function() {

    $("span.spoiler").hide();

    $('<a class="reveal">Full Summary &gt;&gt;</a> ').insertBefore('.spoiler');

    $("a.reveal").click(function(){
    $(this).parents("p").children("span.spoiler").fadeIn(2500);
    $(this).parents("p").children("a.reveal").fadeOut(600);
    $("span#lightsOff").animate({marginTop: "+110px"}, 700);
    });

    });
    //]]>
    </script>


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
  •