User settings and realtime updates

Javascript & Ajax
#1

Hello, i’ve mentioned before that i have css background photos attached to the body on my site pages. I suppose that it could be compared to Bing. I didn’t know that Bing uses photos until recently. Anyway, i place all of my page content in semi-transparent divs (like 0.8 black). The pages look nice but a few photos are bright or very detailed and i can understand if someone likes a photo but cannot tolerate the details (for example, maple leaves in sunlight).

I actually make my own body tag using a div and css. So i decided to add a feature to the site: use a range slider to darken the css body div bg color to lessen the effect of detailed photos. I figure that the best range is 0 to 0.5. I want to start working on this today but i am not sure if this should be done using javascript for realtime changes or to submit the setting and store it in the database for use when writing the css to each page. I will store the setting in the database regardless but i don’t know if using javascript for realtime changes is a good idea or not? i don’t see alot of sites adding dynamic css this way. My javascript skills are minimal. I still use inline script versus event listeners. Anywy, i don’t know ajax at all, so i don’t know if ajax is a better option or not.

how would you do this if it were your site? or what would you prefer as a user?
and yes, one can select no background as well.

my idea is to use javascript onchange to show the opacity while you slide the range slider. Then when you find a nice opacity, you submit the setting via form post to be stored in your user settings database table. I will then write this opacity to the style tag in the head of each document. I once tried creating a dynamic php css file, but it didn’t work out very well.

Thank you.

#2

I’d prefer if it just worked. So either store a suitable opacity with each image, or use some kind of image processing tool to detect image brightness and select opacity based on that.

#3

Good day, Sir Jim, i hope that you are well.

I have to laugh at your reply “I’d prefer if it just worked.” I must agree With this opinion. I will just use JavaScript and allow realtime changes but the changes will need to be saved to your user settings in the database. I have a few very pretty photos of flowers but the flowers are very bright and have a tendency to distract a bit, thus i wanted to allow a tint of sorts instead of me just darkening the image permanently. I do this too because i am making a “lock screen” feature for members. Thus, if you have to pipi or something, then you can leave the site with lock screen and nothing will be visible until you enter your password again (like a pc desktop). In this case, the photos will look nice in full opacity.

#4

By the way, i all ready thought about applying values to each image but i find this option to be a bit offensive. I may think that an image is too bright but a single user may disagree, thus to impose my will is not very user-friendly. I think that an opacity range slider is better on a per-user basis.

here is what i came up with and it works but only in newer browsers. IE 11 doesn’t show the javascript values. I imagine this is because i need to use something like innerhtml value. I will try to research this subjectt to see how i can make it compatible with ie11. I think that ie11 still has a significant amount of users to warrant a fix. yes? anyway, here is my code without slider styling:

<html>
<head>
  <title></title>
  <link rel="Stylesheet" type="text/css" href="test3.css" />
  <style>
  label.opacityLabel { display: inline-block; width: 56px; text-align: left; }
  output.percentage { display: inline-block; width: 32px; text-align: right; }
  div.testbox { background: rgba(0,0,0,0); color: #000000; }
  </style>
</head>
<body>

<div>
  <form oninput="result.value=parseInt(opacityRange.value,10)+'%'; document.getElementById('bodycss').style.background = 'rgba(0,0,0,'+ opacityRange.value/100 +')';">
    <label class="opacityLabel" for="opacity-slider">Opacity</label>
    <input type="range" min="0" max="50" value="0" name="opacityRange" step="10" />
    <output class="percentage" name="result" for="opacityRange">0%</output>
  </form>
</div>

<div class="testbox" id="bodycss">
  <div>&nbsp;</div><br />
  <div>&nbsp;</div><br />
  <div>&nbsp;</div><br />
  <div>&nbsp;</div><br />
  <div>&nbsp;</div><br />
</div>

</body></html>
#5

the opacity changes in ie11 when i use onchange instead of oninput but the output percentage doesn’t work. anyone know why?

#6

I got it to work by calling a function using both onchange and oninput, then changing the css opacity and using using innerHTML to show the value inside of a span.

the output is great. I just have to make a prg form submission to save the data to the database, then use this data to write the values where needed.

Thanks for trying to help :slight_smile:

finishedscript

Sponsor our Newsletter | Privacy Policy | Terms of Service