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 derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

brightness control --->

Status
Not open for further replies.
acerdude

acerdude

Programmer
Joined
Dec 13, 2002
Messages
5
Location
US
Hey, is there any way i could have a large blask transparent box that would completely mask my site, and then have a little slider that could adjust its transparency? i would like to be able to do this so it could serve as a brightness adjuster for my site. or is there a better way? thnx :)
 
Sort by date Sort by votes
Instead of trying to mask the page with a box, just keep changing the background color of the page with increasing or decreasing brightness.

You can download the slider control from this site:

Have the color codes for the range you would like to give to the user. Attach each color code to the values in the slider.In the onchange event of the slider,get the color code associated and set the background color of your page with that color.

Hope this helps.
 
Upvote 0 Downvote
my page is almost completely made of graphix so i need to change the brightness of them too. any suggestions on that? thnx. :-)
 
Upvote 0 Downvote
I put together a little sample to see if this is what you're looking for:
Code: 
<html>
<head>
<title>Brightness Control</title>
<script>
<!--
function slide() {
	dot.style.pixelLeft = event.clientX - 10;
	brightVal = 100 - (dot.style.pixelLeft / 3);
	brightness.style.filter = &quot;alpha(opacity=&quot;+brightVal+&quot;)&quot;;
}
//-->
</script>
</head>
<body bgcolor=&quot;White&quot;>
<div style=&quot;position:absolute;top:0;left:0;height:100%;width:106%;background-color:#000000;filter:alpha(opacity=100)&quot; id=&quot;brightness&quot;></div>
<div style=&quot;position:absolute;top:0;left:5&quot; id=&quot;slider&quot;>
<hr color=&quot;#444444&quot;><img src=&quot;C:\Windows\Triangles.bmp&quot; style=&quot;position:absolute;top:0;left:0;cursor:hand&quot; name=&quot;dot&quot; ondrag=&quot;slide()&quot;></div>
<table height=&quot;100%&quot; width=&quot;100%&quot;>
<tr>
<td align=&quot;center&quot; valign=&quot;middle&quot;>
Hello there!
</td>
</tr>
</table>
</body>
</html>
Let me know :)
 
Upvote 0 Downvote
I dont know about any transparent control that can be used.
If your graphics controls' colors can be changed you can try that in the on change event of the slider.

I am sorry, i dont know any other way.
 
Upvote 0 Downvote
hey, thnx much supra, it seems that that does it good. the only problem is, will links work through it? i think it makes it where you cant click the buttons on the page. thnx :-):-D
 
Upvote 0 Downvote
here ya go..i was playing around today and came up with this:
Code: 
<html>
<head>
<title>Slider Test</title>
<script language='javascript'>
<!--
function slide()
{
width = document.images[1].width + 33;
pixleft = 0;
pixright = width * .18;
towhere = event.clientX - (width * .402);
if (towhere < pixleft || towhere > pixright)
{
return false;
}
else {
butt.style.pixelLeft = towhere;
}
gd = width * .402;
num = Math.round(towhere/15);
bgColors = ['#000000','#333333','#444444','#555555','#666666','#777777','#888888','#999999','#AAAAAA','#BBBBBB','#CCCCCC','#DDDDDD','#FFFFFF'];
if (gd > 400){
document.body.bgColor = bgColors[Math.round(towhere/15)];}
else {
document.body.bgColor = bgColors[Math.round(towhere/9.5)];}
}
//-->
</script>
</head>
<body bgcolor=&quot;black&quot;>
<div id='slider' style='position:absolute;top:5%;left:40%;width:20%;'>
<hr><img name='butt' src=&quot;C:\Windows\Triangles.bmp&quot; style='position:absolute;cursor:hand;top:0;left:0;' onDrag='slide()'></div>
<img src='holder.bmp' style='width:100%;height:1px;visibility:hidden;'>
<BR><BR><CEnteR><a href='javascript:alert(&quot;yea&quot;)'>Links Work!</a></center>
</body>
</html>

hope it helps &quot;Those who dare to fail miserably can achieve greatly.&quot; - Robert F. Kennedy
So true..
 
Upvote 0 Downvote
thats cool, so will the gaphic buttons work like that too? maybe specify and invisible link right over the button? thnx :-)
 
Upvote 0 Downvote
well just treat it like a normal page, anything that works on a normal page will work there.

so to answer your question, yes graphic buttons will work. &quot;Those who dare to fail miserably can achieve greatly.&quot; - Robert F. Kennedy
So true..
 
Upvote 0 Downvote
and will the graphic buttons fade along with the rest of the site? cuz it seems that the ling doesnt fade. thnx :-):-)
 
Upvote 0 Downvote
heres an example of what needs done for each graphic button:
Code: 
<html>
<head>
<title>Slider Test</title>
<script language='javascript'>
<!--
function slide()
{
width = document.images[1].width + 33;
pixleft = 0;
pixright = width * .18;
towhere = event.clientX - (width * .402);
if (towhere < pixleft || towhere > pixright)
{
return false;
}
else {
butt.style.pixelLeft = towhere;
}
gd = width * .402;
num = Math.round(towhere/15);
bgColors = ['#000000','#333333','#444444','#555555','#666666','#777777','#888888','#999999','#AAAAAA','#BBBBBB','#CCCCCC','#DDDDDD','#FFFFFF'];
if (gd > 400){
document.body.bgColor = bgColors[Math.round(towhere/15)];}
else {
document.body.bgColor = bgColors[Math.round(towhere/9.5)];}
fadeDiv = document.getElementById('fader');
fwidth = document.images[2].width;
fheight = document.images[2].height;
alphas = [95,90,85,80,75,70,65,60,55,45,35,25,15,5,0];
fadeDiv.style.width = fwidth;
fadeDiv.style.height = fheight;
fadeDiv.style.filter = 'alpha(opacity='+alphas[Math.round(towhere/13)]+')';
}
//-->
</script>
</head>
<body bgcolor=&quot;black&quot;>
<div id='slider' style='position:absolute;top:5%;left:40%;width:20%;'>
<hr><img name='butt' src=&quot;C:\Windows\Triangles.bmp&quot; style='position:absolute;cursor:hand;top:0;left:0;' onDrag='slide()'></div>
<img src='holder.bmp' style='width:100%;height:1px;visibility:hidden;'>
<BR><BR><CEnteR><img src='C:\Windows\Circles.bmp' style='position:absolute;top:15%;align:center'></center>
<div id='fader' style='position:absolute;top:15%;left:50%;background-color:black;filter:alpha(opacity=100)' onClick='document.location.href=&quot;linkGoes.html&quot;'>yea</div>
</body>
</html>
&quot;Those who dare to fail miserably can achieve greatly.&quot; - Robert F. Kennedy
So true..
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
2K
ggriffit
ggriffit
amrmnabil
  • Locked
  • Question Question
Dynamic Control Name Access
Replies
2
Views
374
amrmnabil
amrmnabil
chillay
  • Locked
  • Question Question
Add Control + F feature to a Web Page
Replies
3
Views
499
feherke
feherke
rogerte
  • Locked
  • Question Question
Javascript updating form control not working
Replies
3
Views
589
rogerte
rogerte
1DMF
  • Locked
  • Question Question
invalid form control with name='' is not focusable
Replies
1
Views
321
1DMF
1DMF

Part and Inventory Search

Sponsor

Back
Top