Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Changing code with drop down menu

Status
Not open for further replies.
Stev4444

Stev4444

Technical User
Mar 8, 2007
10
GB
<td style="FILTER: progid:DXImageTransform.Microsoft.gradient(GradientType=1,
startColorstr=red, endColorstr=blue); COLOR: green; HEIGHT: 120px">

The above gives a gradient color change, I would like visitors to be able to change the colors ie red and blue using drop down menus, these values would then be part of a form submmision so I assume they need some sort of id

I know little coding so any help would be appreciated.

Steve
 
Sort by date Sort by votes
Changing the startColorstr and endColorstr properties using script will give you the result you desire:
Code: 
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
 <head>
  <script type="text/javascript">

  function changeStartColorstr(strColour){
	var objDisplay = document.getElementById("colourcell");
	objDisplay.filters.item("DXImageTransform.Microsoft.gradient").startColorstr = strColour;
  }

  function changeEndColorstr(strColour){
	var objDisplay = document.getElementById("colourcell");
	objDisplay.filters.item("DXImageTransform.Microsoft.gradient").endColorstr = strColour;
  }

  </script>
 </head>
 <body>
  <table width="95%">
   <tr>
    <td align="left">
     <select onchange="changeStartColorstr(this.value)">
      <option value="#000000">Black</option>
      <option value="#FF0000" selected="selected">Red</option>
      <option value="#00FF00">Green</option>
      <option value="#0000FF">Blue</option>
      <option value="#FF00FF">Purple</option>
      <option value="#FFFFFF">White</option>
     </select>
    </td>
    <td align="right">
     <select onchange="changeEndColorstr(this.value)">
      <option value="#000000">Black</option>
      <option value="#FF0000">Red</option>
      <option value="#00FF00">Green</option>
      <option value="#0000FF" selected="selected">Blue</option>
      <option value="#FF00FF">Purple</option>
      <option value="#FFFFFF">White</option>
     </select>
    </td>
   </tr>
   <tr>
    <td colspan="2" id="colourcell" style="FILTER: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=red, endColorstr=blue); COLOR: green; HEIGHT: 120px">
   </tr>
  </table>
 </body>
</html>

Bear in mind you'll need to warn your users that this is IE only functionality.

Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.
Enable Apps
 
Upvote 0 Downvote
Thanks that is exactly what I needed,
Thought I would be able to create a button to disable so as the viewer had the option to see as it would be when using other than IE

I have tried to make colors transparent but with out success
is there a simple way viewer can disable?

Thanks again Steve
 
Upvote 0 Downvote
Not quite sure what you mean by making the colours transparent.

But disabling the demo would be easily enough achieved by wrapping it in a [tt]div[/tt] tag and using the function called by the button to set the [tt].style.display[/tt] property of that [tt]div[/tt] tag to either "block" or "none" depending on whether the user wanted it shown or hidden.

Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.
Enable Apps
 
Upvote 0 Downvote
Thankyou for your answer

Could you please give me an example

Im not sure which bits are which

Thanks Steve
 
Upvote 0 Downvote
No sweat...

Code: 
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
 <head>
  <script type="text/javascript">

  function toggleDisplay(strObjectID){
	var objElement = document.getElementById(strObjectID);
	if(objElement != null){
		var strCurrentState = objElement.style.display;
		if(strCurrentState.toUpperCase() == "NONE"){
			objElement.style.display = "block";
		}
		else{
			objElement.style.display = "none";
		}
	}
  }

  </script>
 </head>
 <body>
  <button onclick="toggleDisplay('divtohide');">Toggle Display</button>
  <div id="divtohide">
  In here I can put any text or HTML code that I want to be hidden or displayed using
  the above button.
  </div>
 </body>
</html>

Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.
Enable Apps
 
Upvote 0 Downvote
Thankyou I can use that for a couple of things, but I probably should have explained in more detail


I have a Table say background green (color is set by viewer)
This will be the color seen when not using IE
in that table I have a second same size table that viewer can set gradient colours, this then also contains any text or images.
by hiding my gradient table it also hides any text or images

The page I am trying to create is at

This obviously is not finished and changes each time I learn something some menus are not working but I can fix those, but I dont know how to turn of the gradient options

Hope this makes a little more sense

Steve
 
Upvote 0 Downvote
I have found how to make the colors transparent, so happy now, thanks for all your help (please ignore above)

Steve
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

trevil620
  • Locked
  • Question
SoThink DHTML Menu Conversion
Replies
0
Views
586
trevil620
trevil620
nanbread
  • Locked
  • Question
Sweeping drop-down menus
Replies
0
Views
575
nanbread
nanbread
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
582
rogerte
rogerte
TheLazyPig
  • Locked
  • Question
Dropdown (option) using Anguarjs
Replies
0
Views
571
TheLazyPig
TheLazyPig
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
185
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top