[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 232
  • Last Modified:

Jquery Clashing

I have two different Javascript elements on this page. A scrolling menu and a expose box, but they will not work together. To get expose to work I have to delete references to these three files:

<script type="text/javascript" src="http://www.heavensfamilymedia.org/newhf/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="http://www.heavensfamilymedia.org/newhf/hoverslide2.js"></script>
<script type="text/javascript" src="http://www.heavensfamilymedia.org/newhf/hoverslide.js"></script>

I explored the jquery no conflict thing but could not get it to work. Any detailed instructions of how to fix this would be greatly appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<style type="text/css">
<!--
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, font, img, ins, kbd, q, s, samp, small, strike, strong, em, sub, sup, tt, var, b, i, u, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption
{margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

#news_feed_wrapper {
	position: relative;
	width:279px;
	float: left;
	margin-top: 15px;
	margin-right: 0;
	margin-bottom: 15px;
	margin-left: 15px;
}
#news_feed_slider {
	width:265px;
	top:0;
	margin-left:15px;
}
.news_feed_item {
	padding-top:5px;
	padding-bottom:8px;
	font-family:"Trebuchet", Arial, Helvetica, sans-serif;
	text-align: center;
	background-image:url(http://www.heavensfamilymedia.org/newhf/images/funds-bg.jpg);
}
.news_feed_item a:link {
	color:#F6F6F6;
	text-decoration: none;
}
.news_feed_item a:visited {
	color:#F6F6F6;
	text-decoration: none;
}
.news_feed_item a:hover, a:active, a:focus {
	color:#569BBA;
	text-decoration:underline;
}

div.hoverscroll {
	position:relative;
}
/* List container */
div.hoverscroll div.listcontainer {
	overflow:hidden;
}
div.hoverscroll div.fixed-listcontainer {
    overflow: hidden;
    float: left;
}

/* Items contained in the list */
div.hoverscroll ul.list li.item {
	display:block;
	padding:0;
}
/* Arrows */
div.hoverscroll div.arrow {
	position:absolute;
	float:none;
	background-color:transparent;
	background-position:center;
	background-repeat:no-repeat;
}
div.hoverscroll div.fixed-arrow {
    display: block;
    float: left;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
}


div.hoverscroll div.arrow.top,
div.hoverscroll div.arrow.bottom,
div.hoverscroll div.fixed-arrow.top,
div.hoverscroll div.fixed-arrow.bottom {
	left:0px;
	width:100%;
	height:0px;
}
div.hoverscroll div.arrow.right,
div.hoverscroll div.fixed-arrow.right {
	top:0px;
	width:23px;
	height:100%;
}
div.hoverscroll div.arrow.top,
div.hoverscroll div.fixed-arrow.top {
	top:0px;
	background-image:url();
	
}
div.hoverscroll div.arrow.bottom,
div.hoverscroll div.fixed-arrow.bottom {
	bottom:0px;
	background-image: url();
}
div.hoverscroll div.arrow.right,
div.hoverscroll div.fixed-arrow.right {
	right:0px;
	background-image: url(http://www.heavensfamilymedia.org/newhf/images/funds-arrows.png);
}
-->
</style>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'></script>
<script type="text/javascript" src="http://www.heavensfamilymedia.org/newhf/expose.js"></script>

		

<script type="text/javascript" src="http://www.heavensfamilymedia.org/newhf/jquery.jscrollpane.min.js"></script>


<script type="text/javascript" src="http://www.heavensfamilymedia.org/newhf/hoverslide2.js"></script>
<script type="text/javascript" src="http://www.heavensfamilymedia.org/newhf/hoverslide.js"></script>






</head>

<body>

<!-- Scrolling Menu --> 
 <div id="news_feed_wrapper">
<img src="http://www.heavensfamilymedia.org/newhf/images/funds-top.png" width="279" height="31" />
<ul id="news_feed">
					<li>
<div class="news_feed_item">
	<a href="#">Testlink</a>
    <br class="clear" />
</div>
<div class="news_feed_item">
	<a href="#">Testlink</a>
    <br class="clear" />
</div>
<div class="news_feed_item">
	<a href="#">Testlink</a>
    <br class="clear" />
</div>
<div class="news_feed_item">
	<a href="#">Testlink</a>
    <br class="clear" />
</div>
<div class="news_feed_item">
	<a href="#">Testlink</a>
    <br class="clear" />
</div>
<div class="news_feed_item">
	<a href="#">Testlink</a>
    <br class="clear" />
</div>
<div class="news_feed_item">
	<a href="#">Testlink</a>
    <br class="clear" />
</div>
<div class="news_feed_item">
	<a href="#">Testlink</a>
    <br class="clear" />
</div>
<div class="news_feed_item">
	<a href="#">Testlink</a>
    <br class="clear" />
</div>
<div class="news_feed_item">
	<a href="#">Testlink</a>
    <br class="clear" />
</div>
<div class="news_feed_item">
	<a href="#">Testlink</a>
    <br class="clear" />
</div>


</li>					</ul>
<img src="http://www.heavensfamilymedia.org/newhf/images/funds-bottom.png" width="279" height="31" />
				</div> 
            <!-- Scrolling Menu --> 
		
        
        
  <!-- Exposed Box -->       
        <div id="test">
	Click on this element to expose it.
</div>

<!-- javascript coding -->
<script>

// execute your scripts when the DOM is ready. this is a good habit
$(function() {

	// assign a click event to the exposed element, using normal jQuery coding
	$("#test").click(function() {

		// perform exposing for the clicked element
		$(this).expose();

	});
});
</script>
  <!-- /Exposed Box -->  

</body>
</html>

Open in new window

0
turtleman2009
Asked:
turtleman2009
  • 2
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
0
 
turtleman2009Author Commented:
That looks like it works but how would I go about getting all the code in one place. When i copied the code from those three windows it did not work on my computer.
0
 
turtleman2009Author Commented:
I figured it out, duh. Thank you it works great.
0
 
leakim971PluritechnicianCommented:
you just need the javascript part, put it in the head section after all other scripts
remove this :
<script type="text/javascript" src="http://www.heavensfamilymedia.org/newhf/hoverslide.js"></script>

Open in new window

and the javascript you've at the end of your body

that's all
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now