Javascript rotating banner - Initial BG Colour change - javascript

I'm currently using the Dynamic drive java script code for a rotating banner on one of our company websites.
The problem I'm having is that the initial background colour for the banner when loading into the page is pure black, and I'm struggling to find where I can change that.
example website: http://www.sakawater.com
You'll notice the initial BG is black, going to white - which does not look great.
The javascript comes from : http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
I've not modified much apart from the scale of the banner and fade speed, can someone point me in the right direction on how to fix/change the initial loading background colour please? Or how to remove having a BG for that at all.
Thank you,
Navson

in fadeslideshow.js Try to search gallerylayer and you will see this line:
setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide
.css({position:'absolute', left:0, top:0, width:'100%', height:'100%', background:'black'})
Here you will see the color black, change it accordingly.

Related

Divert background color choosing in p5js

I'm a noobie, so please be kind to me :)
I'm putting together a p5js script. Background color is random, choosing from an array with values for black or white background. Drawing color is also random.
It works fine most of the times, but from now and then I get a color that can't really be appreciated from the background, so the question is, is there a way in which I can vary the background resulting color depending on the color of the draw? How would I go about discerning what combination is "perceivable" and which one isn't?
You could just round the background value so they differentiate more:
background(roundTo(random(250),10));
function roundTo(val, num){
return round(val / num) * num;
}

How to hide the display of background HDR map, but save hdri's work for lighting in three.js?

I repeat this example in my code:
https://threejs.org/examples/?q=RGBELoader#webgl_loader_gltf
Source:
https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_gltf.html#L53
HDRI lighting works great. But i cant hide hdr map from background. Is there way to do this? To leave this hdri lightning and set a custom color for background.
Using the example you provided, and assuming you want to keep the reflections of the photo on the helmet but remove the photo from the background, all you have to do is remove (or comment out) the following line:
scene.background = cubeGenerator.renderTarget;
This will remove the photo from the background which will then display as the default color (black), as you can see from this screenshot:

Changing opacity on Mouseover

The ultimate goal of my project is to make my image of circle chart interactive on mouseovers. I want the pieces of the circle to change opacity to .5 (from 1) when the user hovers them. I have an image of the chart but I'm not sure how to make areas of one single image change opacity on hover. I have tried several things:
I image mapped the chart with each piece in its own map, but I wasn't sure how to change opacity of an area of one single image (css)(if its even possible)
My second approach was that i sliced the chart up into individual pieces and made their opacity .5 and saved them all separately. Then, I image mapped the single image of the chart and tried to load the individual piece on hover (css)
My final approach was saving each piece of the chart as individual images and when the image is hovered, change the opacity to .5 with css. This works perfectly except i am not sure how to position the pieces to form a perfect circle in dreamweaver.
Any direction or advise is greatly appreciated. I am willing to learn javascript or jquery to help get this done.
Thank you
EDIT Image of the chart is now attached
http://i.stack.imgur.com/KwIfY.jpg
I'm not sure if I understood the question right regarding the current answers but if you want to make the parts of the chart interactive I have 2 approaches:
To achieve the effect with pure CSS I guess you need to divide the chart in individual images as you already mentioned. The positioning is quite simple. I've used in my demo below one image an let it rotate. In your case you can cut each part of the chart individually and get the right place for them with absolute positionig.
Again as you already mentioned you can use map area to define the parts of the chart. With a plugin like this: ImageMapster you can achieve what you want. I've used this once for the following map. It's again very simple, when hovering any part of the map it's background will be replaced by another background. In your case you could save the chart with full opacity and display on hover an image of the chart with 50% opacity.
Demo
The Demo is not very clean as I didn't spent much time in position the parts perfectly but you can see how it works.
transform: rotate(45deg);
I don't know if CSS3 transition will fit to you:
http://www.w3schools.com/css/css3_transitions.asp
.chart-item { opacity: 0.5; transition:opacity 2s; }
.chart-item:hover { opacity: 1; }
Check documentation for browser support.
Maybe create a div and put each image as the background or content of one div (in order), then create a listener for the div class to change opacity upon mouseenter or mouseleave using jQuery.
Here's a simple example (pardon any mistakes):
jQuery:
$( ".somedivclass" )
.mouseenter(function() {
$(this).fadeTo(200, 0.5);
})
.mouseleave(function() {
$(this).fadeTo(200, 1);
});
Here's more info on $.mouseenter(). Here's some for $.fadeTo().
Check this demo. Hover your cursor exactly on the eyes of the owl, and you will see the opacity changing. It will not change if you hover on the rest of the image.
http://jsfiddle.net/q6d57/14/
$('.eye1').on('mouseenter mouseleave', function(e) {
$('.box2').stop(true, false).fadeToggle(1500)
});
I suggest using svg. Here is an implementation of exactly what you are trying to do, because I felt like learning d3.js today:
http://jsfiddle.net/6m26k/1/
You don't need to make the chart through code though, because you can just load the svg onto the page with html5 and use css similar to mine:
.arc.filled:hover {
opacity: .8;
cursor: pointer;
}

How to change the selection tip of custom cursor using css

In my website, I am using a color picker jquery plugin for picking colors from an image.I have change the cursor to an eyedropper icon using CSS. Right now,while clicking on the image,the color pointed by the upper part of cursor is picked.Since it is eyedrope cursor, i need to use its lower part to pick colors. Please help me out.
This is the cursoram that using :
Thanks
cursor:url(http://www.yourwebsite.com/yourcursorname.cur) 0 16,default;
Tell it where to set the x y coords in your css when declaring the cursor.

How do non-HTML5 JavaScript RGB color pickers work?

I already asked how HSV color pickers work, now I would like to know how RGB color pickers with JavaScript work. Those that don't use the HTML5 Canvas API. Could somebody explain me the concept behind them?
Here is an example of what I mean: http://www.eyecon.ro/colorpicker/
Note: I'm not looking for ready to use jQuery color pickers. I want to develop my own one for learning purposes! jQuery for the solution is fine though!
Assuming you want to pick RGB values between 0 and 255, similar to the example you are linking to, here's how I would approach it:
Generate 1 static image (1x256 pixels) that contains the 'rainbow gradient' shown in the slider on the right
Generate 1 static overlay image RGBA image of 256x256 pixels as follows
top left: R=1 G=1 B=1 A=1
top right: R=0 G=0 B=0 A=0
bottom left: R=0 G=0 B=0 A=1
bottom right: R=0 G=0 B=0 A=1
Use the first image as a background for the slider. It should generate the color to be displayed in the top left corner of the color picker. Use mouse coordinates to find the actual Y value for the color
create a 'background' div (256x256 px) that has the color picked with the slider. Use the second static image as on overlay div on top of it. With the alpha values it should give you a white and 2 black corners and one corner of the color you need.
use the mouse coordinates in that that square. The color will have to be calculated.
I'm leaving creating the formulas and images to you. :)

Categories