Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Help with this code ...

    Hey! I have this code on jsfiddel that works great but I can not seem to get it to work right when I insert it into a .html file ... here is a link to the jsfiddel http://jsfiddle.net/JosiahB/6Uxux/5/ and this a link to it in a web page http://bible.comze.com/popup.html

    any help would be appreciated!!!

    this is the code that I have written out ...

    <doctype<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <style type="text/css">
    .pro3a {
    padding:0px;
    margin-top:10px;
    margin-left:18px;
    color:#3B88CB;
    font-size: 16px;
    font-weight: thinner;
    white-space: nowrap;
    display: block;
    }

    #show-hide
    {
    display:none;
    margin: 0;
    padding: 0;
    clear:both;
    }

    #show-hide .highlighted
    {
    display:block;
    margin: 0;
    padding: 0;
    clear:both;
    }

    #related-btn
    {
    margin: 0;
    padding: 0;
    background-color:#ffffff;
    padding-right: 20px;
    border:none;
    overflow:hidden;
    outline:none;
    white-space: nowrap;
    height:30px;
    cursorointer;
    display:block;
    color:#3B88CB;
    font-size: 16px;
    }

    </style>


    <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
    </head>
    <body>
    <div class="pro3a">
    <a href="#" id="related-btn" title="Vis relaterte produkter" value="">Click me!</a>
    </div>

    <div id="show-hide">
    <div id="relatedProducts">
    random content
    more random content
    </div>
    </div>


    </body>
    </html>v

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    I think you forgot the javascript

    Code:
    <script>
    $(function() {
        $("#related-btn").hover(function() {
          if(!$(this).data('pinned'))
            $("#show-hide").toggle("slow");
        });
        $("#related-btn").click(function() {
          $(this).data('pinned', !$(this).data('pinned'));
        });
    });
    </script>

  • #3
    New Coder
    Join Date
    May 2012
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    yeah ... I had that there but not sure what happened ... but it still does not work with the script ... http://bible.comze.com/popup.html

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    from your source code:
    Code:
    </style>
        <script type="text/javascript">
    <script>
    $(function() {
        $("#related-btn").hover(function() {
          if(!$(this).data('pinned'))
            $("#show-hide").toggle("slow");
        });
        $("#related-btn").click(function() {
          $(this).data('pinned', !$(this).data('pinned'));
        });
    });
    </script>
        </script>
    
    	<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
    	</head>
    1. you have double <script> and </script> tags
    2. being that your javascript relies on jQuery, you have to include the jQuery file first...
    Code:
    </style>
    		<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
        <script type="text/javascript">
    $(function() {
        $("#related-btn").hover(function() {
          if(!$(this).data('pinned'))
            $("#show-hide").toggle("slow");
        });
        $("#related-btn").click(function() {
          $(this).data('pinned', !$(this).data('pinned'));
        });
    });
        </script>
    	</head>
    the error console tells you these things.

  • Users who have thanked xelawho for this post:

    JosiahB (09-17-2012)

  • #5
    New Coder
    Join Date
    May 2012
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    ok wow I am sorry for that ... I did allot of changing around and missed that ... but it still will not work even with all the errors taken out ...

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    look at point 2, above.

    the error console tells you that $ is not defined. Being that $ is used by jQuery you know there is a problem with jQuery. It could be that the file is not loading, or it could be...

  • Users who have thanked xelawho for this post:

    JosiahB (09-17-2012)

  • #7
    New Coder
    Join Date
    May 2012
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    thank you sooo much for all your help so far!! I have made a few changes and need some help with how to make some of the things that I have in mind happen with js ... so I want it so that only one subhiden-content can be open at a time (so if another one is clicked, the previous one open would then close) ... Right now I have all the subhiden-content's with different #'s (eg 1, 2, 3, ... ) attached to them but I would like it so that they had all the same name. Also I want only one hiden-content to be displayed at a time (basically the same thing with the subhiden-content idea that the previous one opened would then close) and when it does close that all the subhiden-content's would be set back to display:none ... Hope this kinda makes sense ...

    Code:
    <doctype<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <style type="text/css">
    .hiden-content1
    {
        display:none;
        margin: 0;
        padding: 0;
        clear:both;
    }
    
    .hiden-content1 .highlighted
    {
        display:block;
        margin: 0;
        padding: 0;
        clear:both;
    }
    
    .hiden-content2
    {
        display:none;
        margin: 0;
        padding: 0;
        clear:both;
    }
    
    .hiden-content2 .highlighted
    {
        display:block;
        margin: 0;
        padding: 0;
        clear:both;
    }
    
    
    .subshow-hide1
    {
        overflow:hidden;
        cursor:pointer;
        display:block;
    }
    
    .subhiden-content1
    {
        display:none;
        margin: 0;
        padding: 0;
        clear:both;
    }
    
    .subhiden-content1 .highlighted
    {
        display:block;
        margin: 0;
        padding: 0;
        clear:both;
    }
    
    
    
    .subshow-hide1
    {
        overflow:hidden;
        cursor:pointer;
        display:block;
    }
    
    .subshow-hide2
    {
        overflow:hidden;
        cursor:pointer;
        display:block;
    }
    
    .subhiden-content2
    {
        display:none;
        margin: 0;
        padding: 0;
        clear:both;
    }
    
    .subhiden-content2 .highlighted
    {
        display:block;
        margin: 0;
        padding: 0;
        clear:both;
    }
    
    
    
    .subshow-hide2
    {
        overflow:hidden;
        cursor:pointer;
        display:block;
    }
    
    .subshow-hide3
    {
        overflow:hidden;
        cursor:pointer;
        display:block;
    }
    
    .subhiden-content3
    {
        display:none;
        margin: 0;
        padding: 0;
        clear:both;
    }
    
    .subhiden-content3 .highlighted
    {
        display:block;
        margin: 0;
        padding: 0;
        clear:both;
    }
    
    
    
    .subshow-hide3
    {
        overflow:hidden;
        cursor:pointer;
        display:block;
    }
    
    .subshow-hide4
    {
        overflow:hidden;
        cursor:pointer;
        display:block;
    }
    
    .subhiden-content4
    {
        display:none;
        margin: 0;
        padding: 0;
        clear:both;
    }
    
    .subhiden-content4 .highlighted
    {
        display:block;
        margin: 0;
        padding: 0;
        clear:both;
    }
    
    
    
    .subshow-hide4
    {
        overflow:hidden;
        cursor:pointer;
        display:block;
    }
    
    </style>
    
    <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
    
    <script type="text/javascript">
    $(function() {
        $(".show-hide1").hover(function() {
          if(!$(this).data('pinned'))
            $(".hiden-content1").toggle("fast");
        });
        $(".show-hide1").click(function() {
          $(this).data('pinned', !$(this).data('pinned'));
        });
    });
    </script>
    
    <script type="text/javascript">
    $(function() {
        $(".show-hide2").hover(function() {
          if(!$(this).data('pinned'))
            $(".hiden-content2").toggle("fast");
        });
        $(".show-hide2").click(function() {
          $(this).data('pinned', !$(this).data('pinned'));
        });
    });
    </script>
    
    
    
        <script type="text/javascript">
        $(function() {
            $(".subshow-hide1").hover(function() {
              if(!$(this).data('pinned'))
                $(".subhiden-content1").toggle("fast");
            });
            $(".subshow-hide1").click(function() {
              $(this).data('pinned', !$(this).data('pinned'));
            });
        });
        </script>
    
        <script type="text/javascript">
        $(function() {
            $(".subshow-hide2").hover(function() {
              if(!$(this).data('pinned'))
                $(".subhiden-content2").toggle("fast");
            });
            $(".subshow-hide2").click(function() {
              $(this).data('pinned', !$(this).data('pinned'));
            });
        });
        </script>
    
        <script type="text/javascript">
        $(function() {
            $(".subshow-hide3").hover(function() {
              if(!$(this).data('pinned'))
                $(".subhiden-content3").toggle("fast");
            });
            $(".subshow-hide3").click(function() {
              $(this).data('pinned', !$(this).data('pinned'));
            });
        });
        </script>
    
        <script type="text/javascript">
        $(function() {
            $(".subshow-hide4").hover(function() {
              if(!$(this).data('pinned'))
                $(".subhiden-content4").toggle("fast");
            });
            $(".subshow-hide4").click(function() {
              $(this).data('pinned', !$(this).data('pinned'));
            });
        });
        </script>
    
     
    </head>
    <body>
        <div id="page-rap">
            <div id="popover">
                <a href="#" class="show-hide1" title="Cross-References">a</a>
                <div class="hiden-content1">
                    <ul>
                        <li>
                            <a href="#" class="subshow-hide1">Psalms 1:3</a>
                            <div class="subhiden-content1">
                                <h1>Psalms 1:3</h1>
                                <p>"Blah blah blah ... "</p>
                            </div>
                        </li>
                        <li>
                            <a href="#" class="subshow-hide2">Genesis 22:5</a>
                            <div class="subhiden-content2">
                                <h1>Genesis 22:5</h1>
                                <p>"Blah blah blah ... "</p>
                            </div>
                        </li>
                        <li>
                            <a href="#" class="subshow-hide3">Ezekial 4:11</a>
                            <div class="subhiden-content3">
                                <h1>Ezekial 4:11</h1>
                                <p>"Blah blah blah ... "</p>
                            </div>
                        </li>
                        <li>
                            <a href="#" class="subshow-hide4">Job 11:27</a>
                            <div class="subhiden-content4">
                                <h1>Job 11:27</h1>
                                <p>"Blah blah blah ... "</p>
                            </div>
                        </li>
                    </ul>
                </div>
    
                <a href="#" class="show-hide2" title="Cross-References">b</a>
                <div class="hiden-content2">
                    <ul>
                        <li>
                            <a href="#" class="subshow-hide1">Psalms 1:3</a>
                            <div class="subhiden-content1">
                                <h1>Psalms 1:3</h1>
                                <p>"Blah blah blah ... "</p>
                            </div>
                        </li>
                        <li>
                            <a href="#" class="subshow-hide2">Genesis 22:5</a>
                            <div class="subhiden-content2">
                                <h1>Genesis 22:5</h1>
                                <p>"Blah blah blah ... "</p>
                            </div>
                        </li>
                        <li>
                            <a href="#" class="subshow-hide3">Ezekial 4:11</a>
                            <div class="subhiden-content3">
                                <h1>Ezekial 4:11</h1>
                                <p>"Blah blah blah ... "</p>
                            </div>
                        </li>
                        <li>
                            <a href="#" class="subshow-hide4">Job 11:27</a>
                            <div class="subhiden-content4">
                                <h1>Job 11:27</h1>
                                <p>"Blah blah blah ... "</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
    </html>

  • #8
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You have this

    <doctype

    at the very top of your code, which should be deleted. And you don't need $(function () ) as two separate scripts:

    Code:
    <script type="text/javascript">
    $(function() {
        $(".show-hide1").hover(function() {
          if(!$(this).data('pinned'))
            $(".hiden-content1").toggle("fast");
        });
        $(".show-hide1").click(function() {
          $(this).data('pinned', !$(this).data('pinned'));
        });
    
        $(".show-hide2").hover(function() {
          if(!$(this).data('pinned'))
            $(".hiden-content2").toggle("fast");
        });
        $(".show-hide2").click(function() {
          $(this).data('pinned', !$(this).data('pinned'));
        });
    });
    </script>
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    I don't know if I do get it, but is it kind of like this...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <style type="text/css">
    .hiden-content
    {
        display:none;
        margin: 0;
        padding: 0;
        clear:both;
    }
    
    .hiden-content .highlighted
    {
        display:block;
        margin: 0;
        padding: 0;
        clear:both;
    }
    
    .subshow-hide
    {
        overflow:hidden;
        cursor:pointer;
        display:block;
    }
    
    .subhiden-content
    {
        display:none;
        margin: 0;
        padding: 0;
        clear:both;
    }
    
    .subhiden-content .highlighted
    {
        display:block;
        margin: 0;
        padding: 0;
        clear:both;
    }
    
    
    
    .subshow-hide
    {
        overflow:hidden;
        cursor:pointer;
        display:block;
    }
    
    
    
    </style>
    
    <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
    
    <script type="text/javascript">
    var shown;
    var subshown;
    $(function() {
    
        $(".show-hide").hover(function() {
          if(!$(this).data('pinned'))
            $(this).next().toggle("fast");
        }); 
        $(".show-hide").click(function() {
    	if(shown){shown.toggle()
    	}
          $(this).data('pinned', !$(this).data('pinned'));
    	  shown=$(this).next();
        });
    
            $(".subshow-hide").hover(function() {
              if(!$(this).data('pinned'))
                $(this).next().toggle("fast");
            });
            $(".subshow-hide").click(function() {
    		if(subshown){subshown.toggle()}
              $(this).data('pinned', !$(this).data('pinned'));
    		  subshown=$(this).next();
            });
        }); 
        </script>
    
    
     
    </head>
    <body>
        <div id="page-rap">
            <div id="popover">
                <a href="#" class="show-hide" title="Cross-References">a</a>
                <div class="hiden-content">
                    <ul>
                        <li>
                            <a href="#" class="subshow-hide">Psalms 1:3</a>
                            <div class="subhiden-content">
                                <h1>Psalms 1:3</h1>
                                <p>"Blah blah blah ... "</p>
                            </div>
                        </li>
                        <li>
                            <a href="#" class="subshow-hide">Genesis 22:5</a>
                            <div class="subhiden-content">
                                <h1>Genesis 22:5</h1>
                                <p>"Blah blah blah ... "</p>
                            </div>
                        </li>
                        <li>
                            <a href="#" class="subshow-hide">Ezekial 4:11</a>
                            <div class="subhiden-content">
                                <h1>Ezekial 4:11</h1>
                                <p>"Blah blah blah ... "</p>
                            </div>
                        </li>
                        <li>
                            <a href="#" class="subshow-hide">Job 11:27</a>
                            <div class="subhiden-content">
                                <h1>Job 11:27</h1>
                                <p>"Blah blah blah ... "</p>
                            </div>
                        </li>
                    </ul>
                </div>
    
                <a href="#" class="show-hide" title="Cross-References">b</a>
                <div class="hiden-content">
                    <ul>
                        <li>
                            <a href="#" class="subshow-hide">Psalms 1:3</a>
                            <div class="subhiden-content">
                                <h1>Psalms 1:3</h1>
                                <p>"Blah blah blah ... "</p>
                            </div>
                        </li>
                        <li>
                            <a href="#" class="subshow-hide">Genesis 22:5</a>
                            <div class="subhiden-content2">
                                <h1>Genesis 22:5</h1>
                                <p>"Blah blah blah ... "</p>
                            </div>
                        </li>
                        <li>
                            <a href="#" class="subshow-hide">Ezekial 4:11</a>
                            <div class="subhiden-content">
                                <h1>Ezekial 4:11</h1>
                                <p>"Blah blah blah ... "</p>
                            </div>
                        </li>
                        <li>
                            <a href="#" class="subshow-hide">Job 11:27</a>
                            <div class="subhiden-content">
                                <h1>Job 11:27</h1>
                                <p>"Blah blah blah ... "</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
    </html>

  • Users who have thanked xelawho for this post:

    JosiahB (09-18-2012)

  • #10
    New Coder
    Join Date
    May 2012
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    that is really close to what I want! there is just a few problems ... if you click on on one of the links and then try to hide it by re-clicking it, it will only hide when you hover over it ... so not sure what to do about that ... http://bible.comze.com/bootstrap/doe...s%20work.html#

    Also I was wondering what kinda of js I would use to pull text from another <div> I already have into one of the cross-references <div> ..

    thank you sooo much!


  •  

    Tags for this Thread

    Posting Permissions

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