Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks
Reload this Page jQuery Help with this code ...

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 09-15-2012, 04:45 AM   PM User | #1
JosiahB
New Coder

 
Join Date: May 2012
Posts: 10
Thanks: 3
Thanked 0 Times in 0 Posts
JosiahB is an unknown quantity at this point
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
JosiahB is offline   Reply With Quote
Old 09-15-2012, 05:18 AM   PM User | #2
xelawho
Senior Coder

 
xelawho's Avatar
 
Join Date: Nov 2010
Posts: 2,437
Thanks: 52
Thanked 454 Times in 452 Posts
xelawho will become famous soon enoughxelawho will become famous soon enough
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>
xelawho is online now   Reply With Quote
Old 09-15-2012, 05:37 AM   PM User | #3
JosiahB
New Coder

 
Join Date: May 2012
Posts: 10
Thanks: 3
Thanked 0 Times in 0 Posts
JosiahB is an unknown quantity at this point
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
JosiahB is offline   Reply With Quote
Old 09-15-2012, 02:13 PM   PM User | #4
xelawho
Senior Coder

 
xelawho's Avatar
 
Join Date: Nov 2010
Posts: 2,437
Thanks: 52
Thanked 454 Times in 452 Posts
xelawho will become famous soon enoughxelawho will become famous soon enough
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.
xelawho is online now   Reply With Quote
Users who have thanked xelawho for this post:
JosiahB (09-17-2012)
Old 09-15-2012, 05:10 PM   PM User | #5
JosiahB
New Coder

 
Join Date: May 2012
Posts: 10
Thanks: 3
Thanked 0 Times in 0 Posts
JosiahB is an unknown quantity at this point
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 ...
JosiahB is offline   Reply With Quote
Old 09-15-2012, 05:17 PM   PM User | #6
xelawho
Senior Coder

 
xelawho's Avatar
 
Join Date: Nov 2010
Posts: 2,437
Thanks: 52
Thanked 454 Times in 452 Posts
xelawho will become famous soon enoughxelawho will become famous soon enough
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...
xelawho is online now   Reply With Quote
Users who have thanked xelawho for this post:
JosiahB (09-17-2012)
Old 09-17-2012, 03:22 AM   PM User | #7
JosiahB
New Coder

 
Join Date: May 2012
Posts: 10
Thanks: 3
Thanked 0 Times in 0 Posts
JosiahB is an unknown quantity at this point
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>
JosiahB is offline   Reply With Quote
Old 09-17-2012, 04:11 AM   PM User | #8
AndrewGSW
Senior Coder

 
Join Date: Apr 2011
Location: London, England
Posts: 2,120
Thanks: 15
Thanked 354 Times in 353 Posts
AndrewGSW will become famous soon enough
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
AndrewGSW is offline   Reply With Quote
Old 09-17-2012, 04:13 AM   PM User | #9
xelawho
Senior Coder

 
xelawho's Avatar
 
Join Date: Nov 2010
Posts: 2,437
Thanks: 52
Thanked 454 Times in 452 Posts
xelawho will become famous soon enoughxelawho will become famous soon enough
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>
xelawho is online now   Reply With Quote
Users who have thanked xelawho for this post:
JosiahB (09-18-2012)
Old 09-18-2012, 01:11 AM   PM User | #10
JosiahB
New Coder

 
Join Date: May 2012
Posts: 10
Thanks: 3
Thanked 0 Times in 0 Posts
JosiahB is an unknown quantity at this point
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!
JosiahB is offline   Reply With Quote
Reply

Bookmarks

Tags
javascript, jsfiddel

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 05:34 AM.
Advertisement
Log in to turn off these ads.