Develop Reference

On Hover Link move Div Horizontally to current hovered Link position

I have a menu with 5 links, Each individual link has the same class and ID "navbarLink"
And I also have another div (which is a skewed shape) "#hoveredLink" that moves from 0 to the actual hovered link position (in the background) I want this shape to take the full width of the hovered link (since they're different on width since each one has more or less text). So My intention is to move this "#hoveredLink" horizontally to reach the position of the "navbarLink" actually hovered.
Haven't succeed yet!
window.onload = function() {
var bsDiv = document.getElementById("hoveredLink");
var x;
$("navbarLink").hover(function() {
x = document.getElementById("hoveredLink").left;
bsDiv.style.left = x + "px";
});
}
Can someone tell me what I'm doing wrong here?
Thanks!

It is this?
If it is not, put an example html.
var menu = document.getElementById("menu");
var up = document.getElementById("up");
menu.onmouseover = function(e){
if(e.target.nodeName != "SPAN"){ return; } // If everything is DIV, you can choose another condition to separate the children from the father.
up.style.left = e.target.offsetLeft - 10 + "px";
up.style.width = e.target.offsetWidth + 20 + "px";
};
menu.onmouseleave= function(e){ // Being the event in the parent is not lost between son and son
up.style.width = 0 + "px";
up.style.left = 0 + "px";
};
.content{
position: relative;
}
#up{
position: absolute;
top: 0px;
left: 0px;
width: 0px;
height: 3px;
background-color: red;
transition: all 0.25s;
}
#menu > span{
margin: 10px;
}
<div class="content">
<div id="up"></div>
<div id="menu">
<span>Link 1</span>
<span>Link_Link 2</span>
<span>Link3</span>
<span>Link 4...</span>
<span>L5</span>
</div>
</div>

Attribute in Background Image url

First look at my code:
IMAGE:
<img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="200"/>
BACKGROUND URL:
<div class="small" style="background-image: url('http://thecodeplayer.com/uploads/media/iphone.jpg')" ></div>
In the IMAGE I can use an attribute src in jquery
attr("src");
But how can I do it to in a background Image URL? I made this code and added an attribute but it's not working, any ideas?
<div class="small" style="background-image: url(attr(data-image-src='http://thecodeplayer.com/uploads/media/iphone.jpg')" ></div>
attr("data-image-src");
Now the reason why I want this to happen is that if you will look in this CodePen:
codepen
The sample code is an image and they used an attr(src) in jquery code, but I want it to be a background image URL, not an image.

To get the background-image in jQuery you can use:
var urlFull = $('.small').css('background-image');
//You will get the full value here
url = urlFull.split('"');
//But for using it properly you have to split it and get the url with `"` which will be holding the url.
console.log(url[1]); //You will get URL here
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="small" style="background-image: url('http://thecodeplayer.com/uploads/media/iphone.jpg')"></div>
Now for your real issue:
$(document).ready(function() {
var native_width = 0;
var native_height = 0;
var urlFull = $('.small').css('background-image');
//You will get the full value here
url = urlFull.split('"');
//But for using it properly you have to split it and get the url with `"` which will be holding the url.
//console.log(urlFull);
$(".large").css("background-image", urlFull);
//Now the mousemove function
$(".magnify").mousemove(function(e) {
//When the user hovers on the image, the script will first calculate
//the native dimensions if they don't exist. Only after the native dimensions
//are available, the script will show the zoomed version.
if (!native_width && !native_height) {
//This will create a new image object with the same image as that in .small
//We cannot directly get the dimensions from .small because of the
//width specified to 200px in the html. To get the actual dimensions we have
//created this image object.
var image_object = new Image();
image_object.src = url[1];
//This code is wrapped in the .load function which is important.
//width and height of the object would return 0 if accessed before
//the image gets loaded.
native_width = image_object.width;
native_height = image_object.height;
} else {
//x/y coordinates of the mouse
//This is the position of .magnify with respect to the document.
var magnify_offset = $(this).offset();
//We will deduct the positions of .magnify from the mouse positions with
//respect to the document to get the mouse positions with respect to the
//container(.magnify)
var mx = e.pageX - magnify_offset.left;
var my = e.pageY - magnify_offset.top;
//Finally the code to fade out the glass if the mouse is outside the container
if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
$(".large").fadeIn(100);
} else {
$(".large").fadeOut(100);
}
if ($(".large").is(":visible")) {
//The background position of .large will be changed according to the position
//of the mouse over the .small image. So we will get the ratio of the pixel
//under the mouse pointer with respect to the image and use that to position the
//large image inside the magnifying glass
var rx = Math.round(mx / $(".small").width() * native_width - $(".large").width() / 2) * -1;
var ry = Math.round(my / $(".small").height() * native_height - $(".large").height() / 2) * -1;
var bgp = rx + "px " + ry + "px";
//Time to move the magnifying glass with the mouse
var px = mx - $(".large").width() / 2;
var py = my - $(".large").height() / 2;
//Now the glass moves with the mouse
//The logic is to deduct half of the glass's width and height from the
//mouse coordinates to place it with its center at the mouse coordinates
//If you hover on the image now, you should see the magnifying glass in action
$(".large").css({
left: px,
top: py,
backgroundPosition: bgp
});
}
}
})
})
/*Some CSS*/
* {
margin: 0;
padding: 0;
text-align: center
}
.magnify {
width: 200px;
margin: 50px auto;
position: relative;
cursor: none;
display: inline-block;
}
/*Lets create the magnifying glass*/
.large {
width: 175px;
height: 175px;
position: absolute;
border-radius: 100%;
/*Multiple box shadows to achieve the glass effect*/
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
/*hide the glass by default*/
display: none;
background-repeat: no-repeat;
}
/*To solve overlap bug at the edges during magnification*/
.small {
display: block;
width: 200px;
height: 400px;
float: left;
background-size: contain;
background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Lets make a simple image magnifier -->
<div class="magnify">
<!-- This is the magnifying glass which will contain the original/large version -->
<div class="large"></div>
<!-- This is the small image -->
<div class="small" style="background-image:url('http://thecodeplayer.com/uploads/media/iphone.jpg')" width="200" />
</div>
</div>
Codepen if you want.
I hope this woks for you.

I think you have missed a Single quote in your attribute.
Change
<div class="small" style="background-image: url(http://thecodeplayer.com/uploads/media/iphone.jpg')" ></div>
to
<div class="small" style="background-image: url('http://thecodeplayer.com/uploads/media/iphone.jpg')" ></div>
Hope this helps.

First you have to set '' to url
<div class="small" style="background-image: url('http://thecodeplayer.com/uploads/media/iphone.jpg')" ></div>
To get url of background-image:
var url=$('.small').attr('src')
$('.large').css('background-image',"url('"+ url + "')");
.large{
background-repeat: no-repeat;
width: 175px;
height: 175px;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="200"/>
<div class="large"></div>

How do I increment the rotation property of this box one degree at a time?

I've wrote the following code in an attempt to rotate the box identified as "player" by one single degree to the left every time I strike the left arrow key on the key board. I tried setting the initial value of the degree by declaring a variable called "numberD" and setting it to 0. Then I incremented this variable with the numberD++; statement. Then I tried to attach the value from numberD into the statement following it by inserting it into the rotate degrees statement.
Im not getting any syntax errors however the box is not moving, i know the keystroke is working because i attached a console log to fire every time i strike the left key. i think my issue is that when i declare the numberD it doesn't know to connect it the the transform property of the CSS element player.
Any thoughts would be appreciated. Thx!
Also heres a CODEPEN LINK for this example.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #1f1f2e;
margin: 0px;
padding: 0px;
}
#arena {
background-color:black;
margin: 0px;
padding: 0px;
width: 500px;
height: 500px;
}
#player {
background-color: white;
width: 10px;
height: 10px;
position: relative;
top:50%;
left:50%;
transform:rotate(0deg);
}
</style>
<script>
document.addEventListener("keydown", keyBoardInput);
function keyBoardInput() {
var i = event.keyCode;
if (i == 37) {
numberD = 0;
numberD ++;
document.getElementById('player').style.transform = "rotate(" +
numberD +"deg)";
console.log('fired');
}
}
</script>
<body>
<div id="arena">
<div id="player"></div>
</div>
</body>
</head>
</html>

Every time the function is called, you reset the value for the rotation: numberD = 0;
To fix this you have to declare the variable outside of the function. You could do this by defining it as a document wide variable: document.numberD = 0;
Here is the code:
document.addEventListener("keydown", keyBoardInput);
document.numberD = 0;
function keyBoardInput() {
var i = event.keyCode;
if (i == 37) {
document.numberD++;
document.getElementById('player').style.transform = "rotate(" + document.numberD + "deg)";
console.log('fired');
}
}
And here is a working example.

Exiting a for loop that creates divs when reached end of screen

I am trying to complete a little exercise that refreshes the page when the big button in the middle is clicked and the little dots change colour.
I have stopped the page from scrolling so the page is full of dots but I have noticed that the overflow property acts differently on different browsers. Then I thought of another issue, on mobile or tablets the dots will show differently again!
So I'm not sure if this is even possible but the desired result is for the loop to create dots until the screen is full and the button displaying in the middle of the screen.
Could someone please tell me if this idea is possible as I haven't been able to find any similar questions. Or if there is a better way to get my desired result. Also if you have the time could you please briefly explain why as I want to understand how it works and learn from it.
So...
This is the JavaScript
var htmlDot = "";
var red;
var green;
var blue;
var rgbColor;
function colourSelect() {
return Math.floor(Math.random() * 256 );
}
for(var i = 1; i<=100; i+=1) {
red = colourSelect();
green = colourSelect();
blue = colourSelect();
rgbColor = "rgb(" + red + "," + green + "," + blue + ")";
htmlDot += "<div style=\"background-color:"+ rgbColor + " \"></div>";
}
document.write(htmlDot);
This is the HTML
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<button id="refresh">Click Me!</button>
<script src="script.js"></script>
</body>
</html>
This is the CSS
body {
position: relative;
overflow: hidden;
}
#refresh {
font: 40px bold;
font-family: sans-serif;
width: 200px;
height: 200px;
display: inline-block;
border-radius: 50%;
margin: 5px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background-color: rgb();
}
div {
width: 50px;
height: 50px;
display: inline-block;
border-radius: 50%;
margin: 5px;
}
Thank you in advance

I think you're looking for something like this:
https://jsbin.com/racahapevi/edit?html,css,js,output
Key points:
Calculate numbers of dots that can fit horizontally
Calculate total numbers of dots
Define <html>, <body> width and height to 100% of the viewport
overflow: hidden on html, so there will not be scroll
Add onclick event the button.
Here some code:
var numDots = hdots * vdots;
while(numDots--){
red = colourSelect();
green = colourSelect();
blue = colourSelect();
rgbColor = "rgb(" + red + "," + green + "," + blue + ")";
htmlDot += "<div class='dot' style=\"background-color:"+ rgbColor + " \"></div>";
}

Instead of using 100 for the number of dots you have to figure out how many dots fit in your browser window given the dimensions of the browser window.
var w = window.innerWidth; // browser width
var h = window.innerHeight; // browser height
var size = 60; // 50px + 5px + 5px (width or height) + (left or top margin) + (right or bottom margin)
var hdots = Math.floor(w/size); // how many dots fit horizontally
var vdots = Math.floor(h/size); // how many dots fit vertically
var numDots = hdots * vdots;

how to make divs appear at the location where user clicks?

I want to have a div filled with a background color and fixed dimensions ( width and height) appear on the screen wherever I click. However, if there are 10 div's on the screen, I want to stop being able to create a div when I click on the page and have a message (alert) tell me that "I'm done".
Thank you very much.

See the example below.
var numOfDivs = 0;
document.addEventListener("click", function (e) {
if (numOfDivs < 10) {
var d = document.createElement("DIV");
d.style.top = e.clientY + "px";
d.style.left = e.clientX + "px";
document.body.appendChild(d);
numOfDivs++;
} else {
alert("Done");
}
});
div {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
transform: translateX(-50%) translateY(-50%);
}
<html>
<body>
</body>
</html>