Slide button Not working

Codewalkers Forums Sponsor:

Warn stan801003 · View stan801003's Warnings · View your Warnings · #1

January 3rd, 2013, 09:33 AM

stan801003

Contributing User

Join Date: Apr 2007

Posts: 159

Time spent in forums: 3 Days 4 h 20 m 41 sec
Reputation Power: 7

Javascript - Slide button Not working

I have a javascript slide button that once pressed slides down to reveal a google map, however when i click on the slide button nothing moves.

Code:

$(document).ready(function(){
    $('#jobmap').on('click', '.slide', function(){
        $('#panel').slideToggle();
        $('#map').toggleClass('visible');
    });
});

sliding panel

Code:

  <div id="jobmap">
     <div id="panel">
  <div id="map" style="width: 100%; height: 100%"></div><br />
     </div>
     <p align="right" class="slide"><a href="#" class="btn-slide">View Job Map</a></p>
  </div>

and the CSS

Code:

#panel {display:none; 
        height:600px; 
		width:960px; 
		background:#ccc;}
		
#map {opacity:0; transition(all 0.4s linear); -webkit-transition(all 0.4s linear); -moz-transition(all 0.4s linear); -o-transition(all 0.4s linear);}
 
#map.visible {opacity:1; transition(all 0.4s linear); -webkit-transition(all 0.4s linear); -moz-transition(all 0.4s linear); -o-transition(opacity 0.4s linear);}

.slide {
	margin: 0;
	padding: 0;
	border-top: solid 0px #fff;
	margin-left:80%;
}
.btn-slide {
	
	text-align: center;
	width: 144px;
	height: 31px;
	padding: 10px 10px 0 0;
	margin: 0 auto;
	display: block;
	font: bold 120%/100% Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
}

__________________
Security Vacancies | Security Jobs | Security Officer Jobs
Lead Generation |Business Marketing Tool | IP Look Up Tool

Warn IAmALlama · View IAmALlama's Warnings · View your Warnings · #2

January 3rd, 2013, 12:50 PM

IAmALlama

Join Date: Apr 2007

Location: San Diego, CA

Posts: 2,267

Time spent in forums: 2 Weeks 1 Day 6 h 30 m 38 sec
Reputation Power: 9

are you getting an error in the developer tools (f12->console)? Nothing stands out as obvious. If you can't figure it out, perhaps a link?

Warn stan801003 · View stan801003's Warnings · View your Warnings · #3

January 4th, 2013, 06:08 PM

stan801003

Contributing User

Join Date: Apr 2007

Posts: 159

Time spent in forums: 3 Days 4 h 20 m 41 sec
Reputation Power: 7

Hi Thanks I simplified the code a little and added to this page

Link

in the console i now get the following error

Uncaught SyntaxError: Unexpected token ILLEGAL
slidetest2.html:13

Thanks

Lee

Warn IAmALlama · View IAmALlama's Warnings · View your Warnings · #4

January 7th, 2013, 12:55 PM

IAmALlama

Join Date: Apr 2007

Location: San Diego, CA

Posts: 2,267

Time spent in forums: 2 Weeks 1 Day 6 h 30 m 38 sec
Reputation Power: 9

I copied the source and ran it. Had the same error. Went to where it says there is an illegal character and pressed backspace. The cursor didn't move but the script ran just fine. I'm assuming there is an invalid character at the end of the script like a null character that was accidentally inserted.

Warn stan801003 · View stan801003's Warnings · View your Warnings · #5

January 8th, 2013, 12:07 PM

stan801003

Contributing User

Join Date: Apr 2007

Posts: 159

Time spent in forums: 3 Days 4 h 20 m 41 sec
Reputation Power: 7

OK well i tried the same but it didn't work so i deleted it and wrote the last line again, now i don't get an error, but the panel still doesn't slide open?

Warn stan801003 · View stan801003's Warnings · View your Warnings · #6

January 8th, 2013, 12:08 PM

stan801003

Contributing User

Join Date: Apr 2007

Posts: 159

Time spent in forums: 3 Days 4 h 20 m 41 sec
Reputation Power: 7

Link

Here is a link to the test page

Warn DavidMR · View DavidMR's Warnings · View your Warnings · #7

January 8th, 2013, 02:46 PM

DavidMR

Contributing User

Codewalkers Beginner (1000 - 1499 posts)

Join Date: Apr 2007

Location: Galway

Posts: 1,369

Time spent in forums: 1 Month 4 h 23 sec
Reputation Power: 8

Code:

<!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.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#jobmap').on('click', '.slide', function(){
        $('#panel').slideToggle();
        $('#map').toggleClass('visible');
    });
});	
</script>
<style>
#panel {display:none; height:600px; width:960px; background:#ccc;}

#map {opacity:0; transition(all 0.4s linear); -webkit-transition(all 0.4s linear); -moz-transition(all 0.4s linear); -o-transition(all 0.4s linear);} 

#map.visible {opacity:1; transition(all 0.4s linear); -webkit-transition(all 0.4s linear); -moz-transition(all 0.4s linear); -o-transition(opacity 0.4s linear);}?
</style>

<span class="slide">Show</span>
  <div id="jobmap">
     <div id="panel">
  <div id="map" style="width: 100%; height: 100%"></div><br />
     </div>
     <p align="right" class="slide"><a href="#" class="btn-slide">View Job Map</a></p>
  </div>
</div>?
</body>
</html>

works for me...

__________________
When I die, I want to go peacefully like my Grandfather did, in his sleep -- not screaming, like the passengers in his car.

Last edited by DavidMR : January 8th, 2013 at 02:49 PM.

Warn IAmALlama · View IAmALlama's Warnings · View your Warnings · #8

January 8th, 2013, 03:02 PM

IAmALlama

Join Date: Apr 2007

Location: San Diego, CA

Posts: 2,267

Time spent in forums: 2 Weeks 1 Day 6 h 30 m 38 sec
Reputation Power: 9

like I said, there is an extra invisible character. I copied and pasted it from my text editor and ran php's ord() function giving me 226. according to http://www.ascii-code.com/, it is "Latin small letter a with circumflex"

Javascript - Slide button Not working

Developer Shed Advertisers and Affiliates