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. #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,605
    Thanks
    58
    Thanked 658 Times in 653 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. #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. #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,605
    Thanks
    58
    Thanked 658 Times in 653 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.

  5. Users who have thanked xelawho for this post:

    JosiahB (09-17-2012)

  6. #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 ...

  7. #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,605
    Thanks
    58
    Thanked 658 Times in 653 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...

  8. Users who have thanked xelawho for this post:

    JosiahB (09-17-2012)

  9. #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>

  10. #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

  11. #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,605
    Thanks
    58
    Thanked 658 Times in 653 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>

  12. Users who have thanked xelawho for this post:

    JosiahB (09-18-2012)

  13. #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
  •