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

x
?
Solved

jquery div slider works by itself but not in HTML

Posted on 2012-08-24
5
Medium Priority
?
537 Views
Last Modified: 2012-08-25
I have a page (pasted below) that works fine if its an empty page, with no HTML other than what you see here.  Once I put it in an HTML page, it does not work.  By not work, I mean that it doesnt hide on load anymore and clicking by button wont trigger the js.

Any ideas?




<!--- Adding script for slider starts here --->
<script type="text/javascript">
$(document).ready(function(){
    $(".slidingDiv").hide();	
	$('.show_hide').click(function(){
		$(this).toggleClass("opened");
		$(".slidingDiv").slideToggle();
	});
	$('.cancel').click(function(){
		$(".slidingDiv").slideToggle();
	});
});
</script>

<div style="float: right; padding-top: 4px; padding-bottom: 4px; height: 5px;"><a href="javascript: void(0)" class="show_hide"><img src="images/seeMoreJewelry.jpg" width="101" height="5" border="0" /></a></div>

<!-- sliding div starts here-->
	<div class="slidingDiv" id="slidingDiv">
	  <form name="slideform" id="slideform" action="" method="post" onsubmit="return false;" enctype="multipart/form-data">
		  <p>xcpovuh sh</p>
		  <p>sfg</p>
		  <p>sfb</p>
		  <p>sdgb</p>
	  </form>
	</div>

Open in new window

0
Comment
Question by:14_east
  • 3
  • 2
5 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38331712
Not able to reproduce the problem with what you have posted. Using Firefox 14.0.1.

Can you post an entire, non-working page? What browser are you testing with?
0
 

Author Comment

by:14_east
ID: 38332464
Hey thanks for resplying...  So, you can get it to work?  I cannot.. for the life of me.  Im about ready to find another script!! I am using firefox 14.0.1 and IE 9.  Neither work... unless I take what is above(above works fine...) and put it into HTML page - with html tags, head tags adn body tags.  So aggravating...
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 1500 total points
ID: 38332550
I added some html markup in various places after pasting in the script, the trigger (my image), and the div with the form in it. Was that a legitimate test? Here's what the whole test looked like:
<!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" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
</head>

<body>
<!--- Adding script for slider starts here --->
<script type="text/javascript">
$(document).ready(function(){
    $(".slidingDiv").hide();	
	$('.show_hide').click(function(){
		$(this).toggleClass("opened");
		$(".slidingDiv").slideToggle();
	});
	$('.cancel').click(function(){
		$(".slidingDiv").slideToggle();
	});
});
</script>

<div style="float: right; padding-top: 4px; padding-bottom: 4px; height: 5px;"><a href="javascript: void(0)" class="show_hide"><img src="cake.jpg" width="101" height="50" border="0" /></a></div>
<div id="div1">Content for  id "div1" Goes Here</div>
<table><tr><th>Header</th></tr><tr><td>Test</td></tr></table>
<!-- sliding div starts here-->
<div class="slidingDiv" id="slidingDiv">
	  <form name="slideform" id="slideform" action="" method="post" onsubmit="return false;" enctype="multipart/form-data">
		  <p>xcpovuh sh</p>
		  <p>sfg</p>
		  <p>sfb</p>
	    <p>sdgb</p>
        <div id="div2">Content for  id "div2" Goes Here</div>
  </form>
</div>
<div id="div3">Content for  id "div3" Goes Here</div>
</body>
</html>

Open in new window

0
 

Author Comment

by:14_east
ID: 38332580
Perfect man!   Thank you... I was putting the JS in the head, not in the body.  Once I shoevd it into the body, it works great!!
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38332768
Weird. The $(document).ready() should make it a non-issue where you put the script. I played with it a little and noticed that if you comment out this line: $(this).toggleClass("opened");, which does not appear to be doing anything, the script works in the head section in Firefox.

Thanks for the points.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month20 days, 10 hours left to enroll

868 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question