Develop Reference

How to change background color randomly on on window load event up to the background image? [duplicate]

This question already has answers here:
Getting a random background color in javascript
(4 answers)
Closed 5 years ago.
I have a background image with a body HTML tag, my code is as follows:
CSS
body {
width: 100%;
height: 100%;
background:linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
), url(../img/imahe-1.jpg);
}
It is working, and I need the same things, but the color should change randomly when page is loaded (window load function).in body tag there would be a background-image.and color would be with opacity (overlay).it is working with CSS method.but i need to change color randomly (overlay color) not image.
Thank you advance.

This will create a random gradient background every time it's run...
function getRandomColor() {
var hex = Math.floor(Math.random() * 0xFFFFFF);
return "#" + ("000000" + hex.toString(16)).substr(-6);
}
$(function() {
var col1 = getRandomColor();
var col2 = getRandomColor();
$("body").css("background", "linear-gradient(" + col1 + "," + col2 + ")");
});
body {
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
You can ignore the css in this example. It's only required to make the snippet work.

Using the link Serge K posted in the comments you could do the following:
function getRandomColor() {
var hex = Math.floor(Math.random() * 0xFFFFFF);
return "#" + ("000000" + hex.toString(16)).substr(-6);
}
document.getElementsByTagName("BODY")[0].style.background = getRandomColor();

Filling in the screen with a diamond grid with pure javascript (jsfiddle is available)

Those who solve this will get 150 reputation points once im eligible for a bounty.
https://jsfiddle.net/testopia/xzxe6y5k/
As you can see in the jsfiddle I did some trigonometric calculations to figure out the exact position for the adjacent placements.
The following formula gives me the exact positioning:
elem.offsetHeight * Math.cos(degrees converted into radians) + elem.offsetTop
elem.offsetWidth * Math.cos(degrees converted into radians) + elem.offsetLeft
Of course the same thing is also possible by getting the vertex points, the code would just be larger. Here a small example:
elem.offsetLeft + elem.offsetWidth
elem.offsetTop + elem.offsetHeight
Anyways, I figure that automatic placement is pretty hard. I mean I am trying to achieve something like in the image below: http://www.purplesquirrels.com.au/wp-content/uploads/2015/02/dg.png
Question: So how can I make the diamond grid spread to the full height and width of the screen / container from the center? Not a loop from left to right and top to bottom but starting from the center in a somewhat circular way.

I was able to get the screen filled with two while loops. For now I used some static margins, so the spacings are not perfect, but I guess your computePosition function can help with generating the right spacings between the diamonds.
https://jsfiddle.net/xzxe6y5k/3/
var wrapper = document.getElementById('grid'), diamond = wrapper.children, newDiamond, prevDiamond, evenRow = true;
function createDiamonds() {
while (!newDiamond || newDiamond.getBoundingClientRect().bottom < window.innerHeight) {
evenRow = !evenRow;
prevDiamond = newDiamond;
newDiamond = wrapper.appendChild(document.createElement('div'));
if (prevDiamond) {
newDiamond.style.top = prevDiamond.getBoundingClientRect().bottom + 10 - (newDiamond.getBoundingClientRect().height / 2) + 'px';
if (evenRow) {
newDiamond.style.left = diamond[0].getBoundingClientRect().left + newDiamond.getBoundingClientRect().width / 2 + 7 + 'px';
}
}
while (newDiamond.getBoundingClientRect().right < window.innerWidth) {
prevDiamond = newDiamond;
newDiamond = wrapper.appendChild(document.createElement('div'));
newDiamond.style.left = prevDiamond.getBoundingClientRect().right + 10 + 'px';
newDiamond.style.top = prevDiamond.style.top;
}
}
}
createDiamonds();
#grid div {
background: black;
height: 25px;
width: 25px;
position: absolute;
transform: rotate(45deg)
}
<div id="grid"></div>

Show/Hide Text Every Time An Arrow Is Clicked

I need help showing/hiding text on a button click (specifically an arrow). I have a block of text that I have hidden and I need to slide it down in a time consistent with the arrow rotating 180 degrees. I also want it to do this only for the post above the arrow that was clicked. The solution I have come up with in this fiddle has many problems.
Here is the code:
$(function () {
var angle = -180,
height = "100%";
$(".down-arrow").click(function () {
$(".down-arrow").css({
'-webkit-transform': 'rotate(' + angle + 'deg)',
'-moz-transform': 'rotate(' + angle + 'deg)',
'-o-transform': 'rotate(' + angle + 'deg)',
'-ms-transform': 'rotate(' + angle + 'deg)',
});
$(".blog-post").animate({
'height' : height
});
angle -= 180;
height = "50px";
});
});
And these are the issues I am having:
It slides down way too fast
Once it slides back up it won't slide down again.
It does it for every post

This would be more dynamic and clean to use:
First we will take height's of all the .blog-post div's in an array.
Now making height: 50px of the div, after once we know actual height of all the div's. Which will helpful in making div smooth slide as we know height's.
Next on click of arrow class, we will toggle class which holds transform:rotate properties. Along with that we would check corresponding .blog-post div's height. So if it is more than 50px we would make it 50px, else we would take it's actual height from array and give to it.
Here is the JS/JQuery Code:
var totalNum = $('.blog-post').length; // Counting number of .blog-post div on page.
var i, myArray = [];
for (i = 0; i < totalNum; i++) {
var curHeight = $('.blog-post:eq(' + i + ')').outerHeight();
myArray.push(curHeight);
}
$('.blog-post').css('height', '50px');
$('.down-arrow').click(function () {
$(this).toggleClass('invert');
var index = $('.down-arrow').index(this);
var heightCheck = $('.blog-post:eq(' + index + ')').outerHeight();
if (heightCheck < 51) {
$('.blog-post:eq(' + index + ')').css('height', myArray[index] + 'px');
} else {
$('.blog-post:eq(' + index + ')').css('height', '50px');
}
});
Working : Fiddle
If you still do not understand feel free to ask.

I guess you should convert the 100% to pixels (with $(this).parent().innerHeight() or something like that, then it works well.
You should build some sort of toggle: keep track of which blog-post/arrow is up and which one is down (flag the blog posts or the arrows with some sort of class) and based on that, you should let it slide up or down.
Of course, you're referring to the post with a css selector. You should use a combination of $(this), .next() and .prev() functions in order to get the right post(s).

"It slides down way too fast"
Just set an animation duration. See the jquery.animate() documentation.
It seems that jquery is pretty buggy when it comes to animating using percentages. http://bugs.jquery.com/ticket/10669 http://bugs.jquery.com/ticket/9505 Try using pixels instead of percentage http://jsfiddle.net/8obybt1d/1/
"Once it slides back up it won't slide down again."
Because you are not changing the value of height back to hundred%
A rough piece of code:
if (height == "50px") {
height = "100%";
}
else {
height == "50px"
}
"It does it for every post"
Try using the 'this' keyword.

To solve point 2:
$(".blog-post").animate({
...
height = (height === "50px") ? height = "100%": height = "50px";
});

slide image from left to right and reverse back again

I am trying to slide image from left to right and after a set point it should again slide in reverse direction. This is my code somehow its not working as i am going wrong somewhere in the if statement.
(function($) {
var x = 0;
var y = 0;
//cache a reference to the banner
var banner = $("#banner");
// set initial banner background position
banner.css('backgroundPosition', x + 'px' + ' ' + y + 'px');
// scroll up background position every 90 milliseconds
window.setInterval(function() {
banner.css("backgroundPosition", x + 'px' + ' ' + y + 'px');
x++;
//x--;
//if you need to scroll image horizontally -
// uncomment x and comment y
}, 90);
if ($(banner.offset().left > 40) {
banner.css("backgroundPosition", "0px 0px ");
}
})(jQuery);
div#banner {
width: 960px;
height: 200px;
margin: auto;
background: url(http://cdn-careers.sstatic.net/careers/gethired/img/companypageadfallback-leaderboard-2.png?v=59b591051ad7) no-repeat 0 0;
}
div#banner p {
font: 15px Arial, Helvetica, sans-serif;
color: white;
position: relative;
left: 20px;
top: 120px;
width: 305px;
padding: 20px;
background: black;
text-align: center;
text-transform: uppercase;
letter-spacing: 20px;
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner"></div>

Firstly, you are using a IIFE (Immediately Invoked Function Expression) instead of a DOM ready handler. This code will only work if placed after the elements it references.
Use this shortcut for DOM ready that also provides a locally scoped $
jQuery(function ($) {...});
You also have a missing closing paren (or really a redundant $( as it is already a jQuery object):
JSFiddle: http://jsfiddle.net/g0gn4osy/7/
You also need to have a delta value that changes the direction when you hit a bound value. I sped up your timing to show this:
jQuery(function ($) {
var delta = 1;
var y = 0;
//cache a reference to the banner
var $banner = $("#banner");
// set initial banner background position
$banner.css('background-position', '0px' + ' ' + y + 'px');
// scroll up background position every 90 milliseconds
window.setInterval(function () {
var position = parseInt($banner.css('background-position'));
if (position >= 40 || position < 0) {
delta = -delta;
}
position += delta;
$banner.css("background-position", position + 'px' + ' ' + y + 'px');
}, 10);
});
Notes:
You also had backgroundPosition instead of background-position for the CSS property. I prefer to use the values that match the css properties (personal choice only for maintenance).
To avoid the redundant $() issue, I recommend you prefix jQuery variables with $. e.g. $banner in this case. Then it becomes obvious you are dealing with a jQuery object.
I tend to use the current position of an element, rather than keep a global var running. This allows for external influences to change the position and still work. Have removed x and just use position.

Inspired and modelled on Gone Coding's answer.
I have expanded his example to take into account the image width and the view pane DIV width.
It now scrolls to image end and then back. You never scroll off the canvas or past a visible part of the image. It doesn't jerk or rock, just switches direction.
With awareness of the viewing box width you can easily adjust the width of div#banner to fit the display space and the code adjusts. Just remember to set the background image width imgW var.
I have also added:
Visual indicator for testing with a current position and scroll direction. (With -1 is scrolling left, +1 is scrolling right),
Image start position in px. (A minus number or Zero. With 0 is start image at left, Minus number is start image part way through i.e image pre-scrolled left)
Image start vertical position in px (to vertically pull image up/down. Useful if view pane height shorter than image height and you want to tweak what is seen)
Things to do:
Change image URL (background: url(IMAGENAMEHERE) no-repeat 0 0;)
Insert image width (var imgW = #PIXELWIDTH#;)
Play with WIDTH: and HEIGHT: of view pane (div#banner)
Enjoy.
Fiddle
Have a play http://jsfiddle.net/Lm5yk46h/
Image credit Mark Higgins | Dreamstime.com Image source for purchase
Javascript
jQuery(function ($) {
var delta = 1;
var imgW = 3000;//width of image px
var imgY = 0;//to shift image view vertically px (Minus or zero)
//cache ref to #banner
var $banner = $("#banner");
var viewpaneW = $banner.width();
var endpos = (imgW - viewpaneW);
var startpos = 0;//0 or negative number
// set initial banner background position
$banner.css('background-position', startpos + 'px' + ' ' + imgY + 'px');
// scroll background position every 20ms
window.setInterval(function () {
var position = parseInt($banner.css('background-position'));
// minus is left, plus is right
if (position >= 0 ) delta = -delta;//go left
if (position < (-1*endpos)) delta = (-1*delta);//go right
position += delta;//increment posn
$banner.css("background-position", position + 'px' + ' ' + imgY + 'px');
$("#indicator").text('Posn:' + position + ' | direction: ' + delta);
}, 20);
});
CSS
div#canvas {
background-color: #999;
width: 100%;
height: 400px;
margin:0;padding:10px;
}
div#banner {
width: 460px;
height: 300px;
margin: 10px;
background: url(https://digido.net/eg/newcastle-beach-3000x300.jpg) no-repeat 0 0;
}
div#banner p {
font: 13px Arial, Helvetica, sans-serif;
color: white;
position: relative;
left: 0;
top: 310px;
width: 99%;
padding: 10px;
background: black;
text-align: center;
text-transform: uppercase;
letter-spacing: 8px;
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
HTML
<div id="canvas">
<div id="banner">
<p id="indicator">Hit run</p>
</div>
</div>

Just put the if condition inside the setInterval. And check the syntax error. The if doesn't have a closing }:
// scroll up background position every 90 milliseconds
window.setInterval(function() {
banner.css("backgroundPosition", x + 'px' + ' ' + y + 'px');
x++;
//x--;
if (banner.offset().left > 40) {
banner.css("backgroundPosition", "0px 0px ");
}
}, 90);

Your "if" should be like this:
if ($(banner).offset().left > 40) {
banner.css("backgroundPosition", "0px 0px ");
}
https://jsfiddle.net/wc4b2g97/

your if should be inserted inside your setInterval handler, so it would get evaluated every 90 milliseconds (thank you for correcting me).
Actually, your if is evaluted only the first time, when your javascript file is parse.
Add it into your setInterval and it should work as expected

Variable amount of slices : Pie Chart concept

This is my image sketch:
Here is a jsfiddle to work on:
<div id="a"></div>
the goal is to divide this circle into variable amount of slices.
for instance if i want 10 slices.. i can just change something to "10"
and it will show me this ring that has been divided into 10 pieces.
or '20' or '50' or '100'.
in other words some way to avoid having to deal with each individual line.
being able to rotate would be a plus.
alternatively.. i also would like the version of this.. within which only the border is divided into X slices.
either would work fine for me.

So came up with a nice little script for you. Fairly straight forward, and should work on any size circle you throw at it.
Used minimalist HTML and took care of the rest using jQuery:
HTML
<div id="a" data-lines="8"></div>
jQuery
$(document).ready(function(){
var numLines = parseInt($('#a').data('lines'));
var theta = 180/(numLines/2);
var center = $('#a').innerWidth()/2 - 1; /*-1 to account for the line width*/
var currAngle = 0;
for(var i = 0; i < numLines/2; i++){
$('<div class="lines" style="' + setAngle(currAngle) +' top: ' + center + 'px;"></div>').appendTo('#a');
currAngle += theta;
}
});
function setAngle(theta) {
return '-ms-transform: rotate('+ theta +'deg); -webkit-transform: rotate('+ theta +'deg); transform: rotate('+ theta +'deg);';
}
Example Fiddle
--Just a side note... the more lines you add the cooler it looks
Also, just playing around and added a spin animation on hover... http://jsfiddle.net/bqah9jex/4/

Here you go http://jsfiddle.net/bqah9jex/10/ .. extra compact Javascript, HTML and CSS code to represent Pie Chart.
HTML
<div id="a"></div>
CSS
#a{width:25em;height:25em;border:1em red solid;text-align:center;
border-radius:50%;background:#fff;position:relative
}
.l{width:100%;border:1px solid black;position:absolute}
Javascript
$(function () {
for (var a = 0, c = 200; c--;) {
var b = "transform: rotate(" + a + "deg)";
$('<div class="l" style="'+ ("-ms-"+ b + ";
-webkit-"+ b + ";" + b + ";") + 'top: 50%;"></div>').appendTo("#a");
a += 194; // number of lines
}
});
Demo result
http://i.stack.imgur.com/gFQZ6.png