Fader&Slider

Page 1 of 1

6 Replies - 1403 Views - Last Post: 09 January 2010 - 10:47 AM

#1 Blade2021   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 204
  • Joined: 31-October 08

Fader&Slider

Posted 08 January 2010 - 01:11 PM

My objectives are:
- To create a slider
- To create a div that will fade to a percent dependent on the sliders position.

I was inspired by the 52 weeks of code challenge but this is something I want to do for my website. I don't believe I completely understand jquery yet.

My code so far: (NOTE: some pieces of this segement of code came from jquery.com )
<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
  <style type="text/css">
	#slider { margin: 10px; }
  </style>
  <script type="text/javascript">
  $(document).ready(function(){
	$("#slider").slider();
	$('.selector').slider({ min: 0 });
	$('.selector').slider({ max: 1 });
	var block = $('.selector').slider('option', 'block');
	$("div").click(function() {
		$(this).fadeTo("slow", "#block");
	});
  });
  </script>
</head>
<body style="font-size:62.5%;">
<br><br><bR>
<div id="slider"></div>
<br><br><bR><div id="tester">This is a test</div>
</body>
</html>


I know its setup to where you have to click inside the div to get it to fade. I didn't know what I should put there to get it to automatically adjust.

This post has been edited by Blade2021: 08 January 2010 - 01:15 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Fader&Slider

#2 Wimpy   User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: Fader&Slider

Posted 08 January 2010 - 01:14 PM

What is the problem? :) You didn't specify what it is you have trouble with only what you want to do! :(
Was This Post Helpful? 0
  • +
  • -

#3 Blade2021   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 204
  • Joined: 31-October 08

Re: Fader&Slider

Posted 08 January 2010 - 01:15 PM

Thats simple, it doesn't work! lol

I came here to see what I have wrong in my code. If everything is wrong then back to square one I guess.

This post has been edited by Blade2021: 08 January 2010 - 01:16 PM

Was This Post Helpful? 0
  • +
  • -

#4 Wimpy   User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: Fader&Slider

Posted 08 January 2010 - 02:04 PM

Not to be rude or mean but almost everything is wrong! :( Sorry! I think you should start off by getting a hang of the basics of jQuery... and when you feel that you have a good grip of how to attach/detach events and traverse and manipulate elements I think you should give it a go again! :)

In the meanwhile, I think this is what you wanted to do ( or have I misunderstood you completely? :( ):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Hello World</title>
		
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="ui.js"></script>
		<script type="text/javascript">
			
			function Update(event, ui)
			{
				$("#show").fadeTo(0, ui.value / 100);
			}
			
			$(document).ready(function()
			{
				$("#slider").slider
				({
					min   : 0,
					max   : 100,
					value : 100,
					slide : Update
				});
			});
			
		</script>
		
		<link rel="Stylesheet" type="text/css" href="custom.css" />
		<style type="text/css">
			#slider
			{
				width: 300px;
				height: 12px;
			}
			
			#show
			{
				padding: 30px;
				margin-top: 2em;
				width: 100px;
				text-align: center;
				border: 1px solid #000;
				background: #f00;
				color: #00f;
			}
			
			body
			{
				padding: 4em;
			}		
		</style>
		
	</head>
	<body>
		<div id="slider"></div>
		
		<div id="show">Hello World</div>
	</body>
</html>


jquery.js is the jquery source file,
ui.js is the jquery ui source file and
custom.css is the jquery ui theme css file

Hope it helps! :)

This post has been edited by Wimpy: 08 January 2010 - 02:05 PM

Was This Post Helpful? 0
  • +
  • -

#5 Blade2021   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 204
  • Joined: 31-October 08

Re: Fader&Slider

Posted 09 January 2010 - 12:54 AM

Yeah, kinda rushed into it. I"ll admit that, but i'll try what you posted and try to see what I understand from it.
Was This Post Helpful? 0
  • +
  • -

#6 Blade2021   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 204
  • Joined: 31-October 08

Re: Fader&Slider

Posted 09 January 2010 - 10:03 AM

Your code either doesn't work, or it isn't doing what I was trying.
Was This Post Helpful? 0
  • +
  • -

#7 Wimpy   User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: Fader&Slider

Posted 09 January 2010 - 10:47 AM

My code should work if you have included all js-files needed! :) The div with the id "show" will be faded in/out when you drag on the slider! :)

This post has been edited by Wimpy: 09 January 2010 - 10:48 AM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1