JQuery load multiple div classes issue

  • (3 Pages)
  • +
  • 1
  • 2
  • 3

31 Replies - 23223 Views - Last Post: 09 July 2011 - 01:37 AM

#16 lindsaygelle   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 29-June 11

Re: JQuery load multiple div classes issue

Posted 30 June 2011 - 03:48 PM

Will that allow me to swap the divs back and forth when different drop down options are selected?


View Postjapanir, on 30 June 2011 - 07:36 AM, said:

You want to replace the content of the .Option div?
You can use .html().
Is that what you mean?

Was This Post Helpful? 0
  • +
  • -

#17 japanir   User is offline

  • jaVanir
  • member icon

Reputation: 1014
  • View blog
  • Posts: 3,025
  • Joined: 20-August 09

Re: JQuery load multiple div classes issue

Posted 01 July 2011 - 04:10 PM

When you want to swap two existing elements, simply call show on one of them and hide on the other.

But it seems I don't understand the problem. could you please specify what you want to do, and provide more info?
Was This Post Helpful? 0
  • +
  • -

#18 lindsaygelle   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 29-June 11

Re: JQuery load multiple div classes issue

Posted 02 July 2011 - 08:42 AM

Okay, not a problem. Sorry it's one of those things that's hard to explain.

Okay, so I have two div boxes where I want content to be updated.

One of these div boxes is updated directly through the use of a selector. Basically it just loads a div full of text.

When this happens, and depending on the option the person picks I want a div box on the left hand of the page to swap, so ideally this would be a picture.

Just to clarify on the left there would be one displayed div box and one hidden. Depending on the option chosen from the selector menu, the div box 1 or 2 will be shown.

For example:

User selects from the drop down menu "Colour Blue". The div box on the right updates with text saying 'you've selected the colour blue'. At the same time, jquery hides or shows the div on the left hand side so there is a box with a blue square. 

	  $(function() {    // Makes sure the code contained doesn't run until
                  //     all the DOM elements have loaded

    $('#locationselector').change(function(){ < ---- so this is the drop down menu selector 
        $('.location').hide(); < ---- this swaps content for the location class div
		$('.temp1').swap(); <--- this is meant to what div boxes are displayed for the temp1 class div
        $('#' + $(this).val()).show();
		

});

		
    });


I hope this helps!

View Postjapanir, on 01 July 2011 - 04:10 PM, said:

When you want to swap two existing elements, simply call show on one of them and hide on the other.

But it seems I don't understand the problem. could you please specify what you want to do, and provide more info?

Was This Post Helpful? 0
  • +
  • -

#19 japanir   User is offline

  • jaVanir
  • member icon

Reputation: 1014
  • View blog
  • Posts: 3,025
  • Joined: 20-August 09

Re: JQuery load multiple div classes issue

Posted 03 July 2011 - 07:36 AM

You can do it with .css() and .html()
something like:
<html>
<head>

<script type='text/javascript' src='jquery-1.5.1.js'></script>
<script>
</script>
<style type='text/css'>
#colorBox {
width:50px;
height:50px;
}
</style>
</head>
<body>
	
	<select id='colors'>
	<option value='red'>Red</option>
	<option value='blue'>Blue</option>
	<option value='green'>Green</option>
	</select>
	<div id='colorBox'></div>
	<div id='colorText'></div>
	
	<script type='text/javascript'>
	$(document).ready(function(){
		$('#colors').change(function(){
			$('#colorBox').css('background-color', $(this).val());
			$('#colorText').html('You selected ' + $(this).val());
		});
	});
	</script>

</body>
</html>

Was This Post Helpful? 1
  • +
  • -

#20 lindsaygelle   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 29-June 11

Re: JQuery load multiple div classes issue

Posted 03 July 2011 - 04:41 PM

That's so awesome! Basically yeah, that's almost exactly the type of function I want to execute. The only difference is when the selector is chosen, a div box is loaded. So basically you know how when you pick blue, the css updates the box to be blue? Well, I would like that to be an actual div with an id so I can write things in it.

For example,

Select 'blue'

Blue div box is displayed. Inside is my written content composed in html etc.

Does that make sense?

This is really great progress. :D

Repped!

View Postjapanir, on 03 July 2011 - 07:36 AM, said:

You can do it with .css() and .html()
something like:
<html>
<head>

<script type='text/javascript' src='jquery-1.5.1.js'></script>
<script>
</script>
<style type='text/css'>
#colorBox {
width:50px;
height:50px;
}
</style>
</head>
<body>
	
	<select id='colors'>
	<option value='red'>Red</option>
	<option value='blue'>Blue</option>
	<option value='green'>Green</option>
	</select>
	<div id='colorBox'></div>
	<div id='colorText'></div>
	
	<script type='text/javascript'>
	$(document).ready(function(){
		$('#colors').change(function(){
			$('#colorBox').css('background-color', $(this).val());
			$('#colorText').html('You selected ' + $(this).val());
		});
	});
	</script>

</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#21 japanir   User is offline

  • jaVanir
  • member icon

Reputation: 1014
  • View blog
  • Posts: 3,025
  • Joined: 20-August 09

Re: JQuery load multiple div classes issue

Posted 03 July 2011 - 05:32 PM

In that case, simply call .html on the div.
The div with the background color is already in the DOM.
All I do, is call css to change it's background color.
simply add .html on that div, like:
<script type='text/javascript'>
	$(document).ready(function(){
		$('#colors').change(function(){
			$('#colorBox').css('background-color', $(this).val());
			$('#colorBox').html('You selected ' + $(this).val());
		});
	});
	</script>

Was This Post Helpful? 0
  • +
  • -

#22 lindsaygelle   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 29-June 11

Re: JQuery load multiple div classes issue

Posted 04 July 2011 - 06:32 AM

Hi Java. I gave what you suggested a shot, however the div box simply wouldn't swap. I've included my project to hopefully provide a bit more clarity to this issue.

Attached File(s)


Was This Post Helpful? 0
  • +
  • -

#23 japanir   User is offline

  • jaVanir
  • member icon

Reputation: 1014
  • View blog
  • Posts: 3,025
  • Joined: 20-August 09

Re: JQuery load multiple div classes issue

Posted 04 July 2011 - 06:46 AM

Better post your code in code tags (on DIC).
Was This Post Helpful? 0
  • +
  • -

#24 lindsaygelle   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 29-June 11

Re: JQuery load multiple div classes issue

Posted 04 July 2011 - 09:17 PM 

<!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>Loading Multiple classes</title>
</head>

<style type='text/css'> 
#colorBox {
	width:50px;
	height:50px;
}
</style>
</head>
 
<body>
<select id='colors'>
  
  <option value='blue' selected="selected">Blue</option>
  <option value='green'>Green</option>
  <option value='red'>Red</option>
</select>
 
 


<div id="ColourContainer" >

<div id='blue' class="blueClass"> THIS IS BLUEEE </div>
<!-- I want this to be displayed when the blue option is selected; hidden when other options chosen -->


<div id='red' class="RedClass" style="display:none;"> This is REEEED </div>
<!-- I want this to be displayed when the red option is selected, hidden when other options chosen -->


<div id='green' class="GreenClass" style="display:none;"> This is green'</div>
<!-- I want this to be displayed when the green option is selected, hidden when other options chosen -->
</div>

<div id="TextColourContainer">

<div id='TextBlue' class="blueClass">The Colour blue is a primay colour</div>
<!-- I want this to be displayed when the blue option is selected, hidden when other options selected -->

<div id='TextRed' class="redClass" style="display:none;">The Colour Red is also a primary colour</div>
<!-- I want this to be displayed when the red option is selected,  hidden when other options selected -->

<div id='TextGreen' class="greenClass" style="display:none;">The Colour Green is another primary colour</div>
<!-- I want this to be displayed when the green option is selected,  hidden when other options selected -->

</div>
 
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#25 japanir   User is offline

  • jaVanir
  • member icon

Reputation: 1014
  • View blog
  • Posts: 3,025
  • Joined: 20-August 09

Re: JQuery load multiple div classes issue

Posted 05 July 2011 - 03:08 AM

Well that is just a matter of show/hide the divs.
have id's that would make it easy for you to select them, like blueText, redText etc. then, simply do so:
<script type='text/javascript'>
 $(document).ready(function(){
  var color = '';
  $('#colors').change(function(){
   $('#' + color).hide();
   $('#' + color + 'Text').hide();
   color = #(this).val();
   $('#' + color).show();
   $('#' + color + 'text').show();
  });
});
</script>


I may have some typos but that is the idea.
Was This Post Helpful? 0
  • +
  • -

#26 lindsaygelle   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 29-June 11

Re: JQuery load multiple div classes issue

Posted 05 July 2011 - 06:08 AM

Hey thanks for the consistent support on this thread. I really appreciate it; I wouldn't be able to do this without your help.

Unfortunately I have a syntax error on line 

 

   color = #(this).val();


View Postjapanir, on 05 July 2011 - 03:08 AM, said:

Well that is just a matter of show/hide the divs.
have id's that would make it easy for you to select them, like blueText, redText etc. then, simply do so:
<script type='text/javascript'>
 $(document).ready(function(){
  var color = '';
  $('#colors').change(function(){
   $('#' + color).hide();
   $('#' + color + 'Text').hide();
   color = #(this).val();
   $('#' + color).show();
   $('#' + color + 'text').show();
  });
});
</script>


I may have some typos but that is the idea.

Was This Post Helpful? 0
  • +
  • -

#27 japanir   User is offline

  • jaVanir
  • member icon

Reputation: 1014
  • View blog
  • Posts: 3,025
  • Joined: 20-August 09

Re: JQuery load multiple div classes issue

Posted 05 July 2011 - 06:09 AM

Yeah I type in the browser so I'll definetley have errors..
Should be:
var color = $(this).val();

This post has been edited by japanir: 05 July 2011 - 06:10 AM

Was This Post Helpful? 0
  • +
  • -

#28 lindsaygelle   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 29-June 11

Re: JQuery load multiple div classes issue

Posted 05 July 2011 - 06:25 AM

Unfortunately it functions as my first script does. I loads some of the divs, but doesn't hide the non selected ones.


View Postjapanir, on 05 July 2011 - 06:09 AM, said:

Yeah I type in the browser so I'll definetley have errors..
Should be:
var color = $(this).val();

Was This Post Helpful? 0
  • +
  • -

#29 japanir   User is offline

  • jaVanir
  • member icon

Reputation: 1014
  • View blog
  • Posts: 3,025
  • Joined: 20-August 09

Re: JQuery load multiple div classes issue

Posted 05 July 2011 - 06:42 AM

call:
$('#some_div_id').hide();

for each of the divs.
put it before the change() function.
Was This Post Helpful? 0
  • +
  • -

#30 lindsaygelle   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 29-June 11

Re: JQuery load multiple div classes issue

Posted 06 July 2011 - 08:29 AM

Well there are no errors but if I could just get it to swap then the problem would be solved. This is what I'm working with atm.

<!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>Loading Multiple classes</title>
</head>
<style type='text/css'>
09 #colorBox {
width:50px;
height:50px;

}

</style>

<script type='text/javascript'>
$(document).ready(function(){
var color = '';
$('#blue').hide();
$('#red').hide();
$('#green').hide();
$('#TextGreen').hide();
$('#TextRed').hide();
$('#TextBlue').hide();



$('#colors').change(function(){
$('#' + color).hide();
$('#' + color + 'Text').hide();
var color = $(this).val();
$('#' + color).show();
$('#' + color + 'text').show();
});
});
</script>



</head>
<body>
<select id='colors'>
  
<option value='blue' selected="selected">Blue</option>
  	  
<option value='green'>Green</option>
  
	  
<option value='red'>Red</option>
  

</select>
<div id="ColourContainer" > 
  <div id='blue' class="blueClass"> THIS IS BLUEEE </div>
  <!-- I want this to be displayed when the blue option is selected; hidden when other options chosen --> 
   <div id='red' class="RedClass" style="display:none;"> This is REEEED </div>
  <!-- I want this to be displayed when the red option is selected, hidden when other options chosen --> 
  <div id='green' class="GreenClass" style="display:none;"> This is green'</div>
  <!-- I want this to be displayed when the green option is selected, hidden when other options chosen --> 
  </div>
<div id="TextColourContainer">  
  
  <div id='TextBlue' class="blueClass">The Colour blue is a primay colour</div>
  <!-- I want this to be displayed when the blue option is selected, hidden when other options selected --> 
  
  <div id='TextRed' class="redClass" style="display:none;">The Colour Red is also a primary colour</div>
  <!-- I want this to be displayed when the red option is selected,  hidden when other options selected -->
  
  <div id='TextGreen' class="greenClass" style="display:none;">The Colour Green is another primary colour</div>
  <!-- I want this to be displayed when the green option is selected,  hidden when other options selected --> 
</div>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -
  • (3 Pages)
  • +
  • 1
  • 2
  • 3