Javascript functions not working when integrating two codes together - javascript

these javascript functions are working perfectly separate, however when i try to write them in the same page they become inactive. All of the id and class names are correct. I have been fiddleing with it for a while
part 1:
<script>
$("#pic1").click(function(){
var div=$("#pic1");
div.animate({top:'-100px',opacity:'0.4'},"slow");
div.animate({height:'100%',opacity:'1'},"slow");
});
</script>
Part 2:
<script>
var mouseX = 0;
var mouseY = 0;
var offsetWidth = $('.area').width()/2;
var offsetHeight = $('.area').height()/2;
var origBoxTop = parseInt($('.box').css('top'));
var origBoxLeft = parseInt($('.box').css('left'));
$('.area').mousemove( function(e) {
mouseX = offsetWidth - e.pageX;
mouseY = offsetHeight - e.pageY;
$('.box').css('top', origBoxTop + mouseY);
$('.box').css('left', origBoxLeft + mouseX);
$('.info').attr('value', 'x: ' + mouseX + ', y: ' + mouseY);
});
</script> `
I am pretty positive my html and css is correct since both these parts work alone. I just want both to be active on the same page.
By putting them together all i've tried stacking them inside the script tag, i don't know what i don't know so its probably very simple, i'm new to javascript and jQuery. I have just posted the entire code under.
<!DOCTYPE html>
<html>
<head></head>
<script src="jquery2.js"></script>
<style>
body {
background: url("back1.gif");
}
#tree {
position: absolute;
top: 100px;
left: -20px;
}
#tree2 {
position: absolute;
top: -10px;
right: -90px;
}
.box2 {
position: absolute;
height: 200px;
width: 200px;
}
#hi {
cursor: pointer;
top: 600px;
left: 1075px;
position: absolute;
clear: all;
}
#re {
position: absolute;
top: 500px;
left: 500px;
cursor: pointer;
clear all;
}
#st {
position: absolute;
top: 500px;
left: 300px;
cursor: pointer;
clear: all;
}
.info {
position: absolute;
z-index: 99;
}
.box {
position: absolute;
top: 100%;
left: 100%;
margin-top: -50px;
margin-left: -50px;
}
.box:hover {
cursor: pointer;
}
.area {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<body>
<script>
$(document).ready(function(){
$("#re").click(function(){
var div=$("#re");
div.animate({top:'-100px',opacity:'0.4'},"slow");
div.animate({height:'100%',opacity:'1'},"slow");
});
$("#st").click(function(){
var div=$("#st");
div.animate({right:'-100',opacity:'0.4'},"slow");
div.animate({width:'100%',opacity:'1'},"slow");
});
$("#hi").click(function(){
var div=$("#hi");
div.animate({left:'-400px',opacity:'0.4'},"slow");
div.animate({width:'100%',opacity:'1'},"slow");
});
var mouseX = 0;
var mouseY = 0;
var offsetWidth = $('.area').width()/2;
var offsetHeight = $('.area').height()/2;
var origBoxTop = parseInt($('.box').css('top'));
var origBoxLeft = parseInt($('.box').css('left'));
$('.area').mousemove( function(e) {
mouseX = offsetWidth - e.pageX;
mouseY = offsetHeight - e.pageY;
$('.box').css('top', origBoxTop + mouseY);
$('.box').css('left', origBoxLeft + mouseX);
$('.info').attr('value', 'x: ' + mouseX + ', y: ' + mouseY);
});
});
</script>
<div id="wrapper">
<img src="tree.gif" id="tree">
<img src="tree2.gif" id="tree2">
<img src="1.gif" class="box2" id="st">
<img src="3.gif" class="box2" id="hi">
<img src="2.gif" class="box2" id="re">
</div>
<section class="area">
<div class="box" id="what"><img src="what.png"></div>
</section>
</div>
</body>
</html>

I've tried the code in a browser, and I can tell that the script ran. Try adding this in your css, and see if it works better:
.area {
z-index: -1;
}
If it doesn't help, press F12 and F5, and see if there are any errors in the console.
Also you shouldn't put tags between </head> and <body>.

Related

Why does this javascript code work on stackoverflow, but in my html file it doesn't? [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 2 years ago.
javascript noob here, I have the following pickle.
I'm trying to make a resizable div and I found this code:
var m_pos;
function resize(event) {
var parent = resize_el.parentNode;
var dx = m_pos - event.x;
m_pos = event.x;
parent.style.width = (parseInt(getComputedStyle(parent, '').width) + dx) + "px";
}
var resize_el = document.getElementById("resize");
if (resize_el) {
resize_el.addEventListener("mousedown", function(event) {
m_pos = event.x;
document.addEventListener("mousemove", resize, false);
}, false);
}
document.addEventListener("mouseup", function() {
document.removeEventListener("mousemove", resize, false);
}, false);
#update_panel {
position: fixed;
min-width: 420px;
padding-left: 4px;
height: 100%;
top: 0%;
right: 0;
background-color: #f0f0f0;
}
#resize {
background-color: #ccc;
position: absolute;
left: 0;
width: 4px;
height: 100%;
cursor: w-resize;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="update_panel">
<div id="resize"></div>
</div>
</body>
</html>
My file looks like this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var m_pos;
function resize(event) {
var parent = resize_el.parentNode;
var dx = m_pos - event.x;
m_pos = event.x;
parent.style.width = (parseInt(getComputedStyle(parent, '').width) + dx) + "px";
}
var resize_el = document.getElementById("resize");
if (resize_el) {
resize_el.addEventListener("mousedown", function(event) {
m_pos = event.x;
document.addEventListener("mousemove", resize, false);
}, false);
}
document.addEventListener("mouseup", function() {
document.removeEventListener("mousemove", resize, false);
}, false);
</script>
<style>
#update_panel {
position: fixed;
min-width: 420px;
padding-left: 4px;
height: 100%;
top: 0%;
right: 0;
background-color: #f0f0f0;
}
#resize {
background-color: #ccc;
position: absolute;
left: 0;
width: 4px;
height: 100%;
cursor: w-resize;
}
</style>
</head>
<body>
<div id="update_panel">
<div id="resize"></div>
</div>
</body>
</html>
I'm using XAMPP localhost with Chrome. Please help me!
Move <script>....</script> block code to the end of <body>. Like this:
<body>
<div>
...
</div>
<script>
...
</script>
</body>
it should work
For an explanation of why this works see here:
Where should I put <script> tags in HTML markup?

How to make info text appear and follow the cursor when hovering over image?

For my portfolio website, I want to include info text that becomes visible when hovering over the according image and I want the text to follow along the cursor.
I'm by no means a coding expert, so I tried to achieve the effect by replacing the default cursor with an image of the text on white background via css and the cursor-property.
However, this left me with weird gray edged around the image that the image originally doesn't have.
So I figured that this was a sloppy approach anyway and that I should rather try solving it via javascript... which left me with the following code:
$(document).bind('mousemove', function(e){
$('#tail').css({
left: e.clientX + 20,
top: e.clientY + document.body.scrollTop
});
});
#tail {
position: absolute;
background-color: #ffffff;
padding: 5px;
opacity: 0;
}
#tail p {
margin: 0px;
}
.project-01:hover > #tail {
opacity: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="project-01">
<a href="project-site-01.html">
<img src="images/project-cover-01.png" alt="Project description">
</a>
<div id="tail">
<p>Project description</p>
</div>
</div>
I am now left with text that appears when hovering over the image and it follows the cursor properly, even if the cursor position changes due to scrolling (which it didn't do properly at first, which is why I added the 'document.body.scrollTop').
The only problem: The info text is way to far away from the cursor. I tried adjusting the offset, adding '- 900' after 'document.body.scrollTop' but that only makes it look right with my specific browser height – if I switch to a smaller or bigger screen, the '- 900' of course doesn't fit anymore.
Is there anyone who can explain what I'm doing wrong on a dummy level or even better – tell me how to fix the problem? I've been trying to get that hover text effect working for literally the past two days. HELP!
PS: You can see the effect I want to create on https://playgroundparis.com
I hope this can help you!
Edit: Technically this is a duplicated. I realized the problem with scrolling that you talking about. I've found a solution in this post and I readaptated it for
your specific case.
var mouseX = 0, mouseY = 0, limitX, limitY, containerWidth;
window.onload = function(e) {
var containerObjStyle = window.getComputedStyle(document.querySelectorAll(".project-01")[0]);
containerWidth = parseFloat(containerObjStyle.width).toFixed(0);
containerHeight = parseFloat(containerObjStyle.height).toFixed(0);
var follower = document.querySelector('#tail');
var xp = 0, yp = 0;
limitX = containerWidth;
limitY = containerHeight;
var loop = setInterval(function(){
//Change the value 5 in both axis to set the distance between cursor and text.
xp = (mouseX == limitX) ? limitX : mouseX + 5;
xp = (xp < 0) ? 0 : xp;
yp = (mouseY == limitY) ? limitY : mouseY + 5;
yp = (yp < 0) ? 0 : yp;
follower.style.left = xp + 'px';
follower.style.top = yp + 'px';
}, 15);
window.onresize = function(e) {
limitX = parseFloat(window.getComputedStyle(document.querySelectorAll(".project-01")[0]).width).toFixed(0);
}
document.onmousemove = function(e) {
mouseX = Math.min(e.pageX, limitX);
mouseY = Math.min(e.pageY, limitY);
}
};
//Change the 100 value to set the fade time (ms).
$(".project-01").hover(function () {
$(this).find('#tail').fadeIn(100);
},
function () {
$(this).find('#tail').fadeOut(100);
});
#tail {
position: absolute;
background-color: #ffffff;
padding: 5px;
overflow: hidden;
}
#debug {
position: absolute;
right: 0;
top: 100px;
width: 100px;
height:100px;
background-color: red;
color: black;
}
#tail p {
margin: 0px;
}
.project-01 {
width: 300px;
overflow: hidden;
}
.project-01 img {
height: 100%;
width: 100%;
}
.project-01 a {
height: 100%;
width: 100%;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="project-01">
<a href="project-site-01.html">
<img src="https://picsum.photos/200/300" alt="Project description">
</a>
<div id="tail">
<p>Project descriptions</p>
</div>
</div>
You can use the below code's
.description {
display: none;
position: absolute;
z-index: 2000 !important;
color: black;
padding: 15px;
margin-left: 32px;
margin-top: -200px;
top: auto;
height: auto;
width: 500px;
}
.image {
height: 200px;
width: 200px;
}
.my-image:hover + .description {
display: block;
position: absolute;
background-color: black;
color: white;
}
.description:hover {
display: block;
background-color: black;
color: white;
}
<div class="project-01">
<a href="project-site-01.html" class="my-image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/monarch.png" alt="Project description" class="image">
</a>
<div id="tail" class="description">
Butterflies are insects in the macrolepidopteran clade Rhopalocera from the order Lepidoptera, which also includes moths. Adult butterflies have large, often brightly coloured wings, and conspicuous, fluttering flight.
</div>
</div>
I hope this helps i recenty made one myselff for my website a few days ago
No info cursor:
.info:hover .tooltip {
color: red;
visibility: visible;
opacity: 1;
transition: opacity 1s
}
.tooltip {
visibility: hidden;
opacity: 0;
transition: opacity 1s
}
}
.tootip:hover {
visibility: visible
}
<span class="info"><img src="https://google.com/favicon.ico">Hover Me</img> <span class="tooltip">Welcome</span></a></span>
With info cursor:
.info:hover .tooltip {
color: red;
visibility: visible;
opacity: 1;
transition: opacity 1s
}
.tooltip {
visibility: hidden;
opacity: 0;
transition: opacity 1s
}
}
.tootip:hover {
visibility: visible
}
.info {
cursor: help
}
<span class="info"><img src="https://google.com/favicon.ico">Hover Me</img> <span class="tooltip">Welcome</span></a></span>

How to create circular image gallery

I have to arranged clients logos in circle as it shows in image, I have tried but
not get perfect circle, There is any template available for this?
Something like this?
To calculate a point on a circle you can use:
var x = Math.cos(point) * size;
var y = Math.sin(point) * size;
and then it's a matter of either looping in the value like I did below, or just manually calculating the points in the circle and hard coding them in.
function getCircle(offset, size, point, circlesize) {
var x = Math.cos(point) * size;
var y = Math.sin(point) * size;
var $div = $('<div class="picturediv"></div>');
var $wrap = $('<div class="wrap"></div>');
$wrap.css({
top: offset + 'px',
left: offset + 'px'
});
$div.css({
top: (size+x) + 'px',
left: (size+y) + 'px',
width: circlesize + 'px',
height: circlesize + 'px'
});
$wrap.append($div);
$('#wrap').append($wrap)
}
for(var c=0;c<6;c++) {
getCircle(200, 100,c * 45,50);
}
for(var c=0;c<=10;c++) {
getCircle(100, 200,c * 25.7, 75);
}
.picturediv {
width: 50px;
height: 50px;
background-color:black;
border: 1px solid red;
border-radius:50%;
position: absolute;
top: 0px;
left: 0px;
background-image: url(https://i.imgur.com/AilIzSF.jpg);
background-position: -219px -193px;;
background-repeat: no-repeat;
}
.wrap {
position: relative;
left: 0px;
left: 0px;
}
#wrap {
width:100%;
height: 100%;
background-color: gray;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div class="wrap">
<div class="picturediv" style="width:120px;height:120px;left:265px;top:265px;"></div>
</div>
</div>

element.scrollTop/left is really slow in Safari, why?

When the given HTML code below is loaded in Safari 6.0.8, the scroll function executes in ~1500 ms. In Chrome that number is ~50 ms and in FireFox ~5 ms.
I've identified the scroll methods to be the culprits, but I can't figure out why Safari is so damn slow executing them. Is it an implementation detail of Safari, or am I doing something wrong?
<html>
<head>
<style>
.container {
width: 20%;
height: 100px;
background: #FF9800;
position: relative;
}
</style>
</head>
<body>
<div id="top">
<!-- 500 of these will be generated and added to the #top element -->
<div class="container">
<div style="position: absolute; left: -1px; top: -1px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;">
<div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;">
<div style="position: absolute; left: 0px; top: 0px; width: 294.796875px; height: 110px;"></div>
</div>
<div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;">
<div style="position: absolute; left: 0px; top: 0px; width: 200%; height: 200%;"></div>
</div>
</div>
</div>
</div>
<script>
//Generates the 500 container elements.
var numElements = 499;
var containerOriginal = document.querySelector(".container");
for(var i = 0; i < numElements; i++) {
var container = containerOriginal.cloneNode(true);
document.getElementById("top").appendChild(container);
}
//Why is this function so slow in Safari?
function scroll(el, et, sl, st) {
var containers = document.querySelectorAll(".container");
for(var i = 0; i < containers.length; i++) {
var container = containers[i];
var expand = container.children[0].children[0];
var shrink = container.children[0].children[1];
expand.scrollLeft = el;
expand.scrollTop = et;
shrink.scrollLeft = sl;
shrink.scrollTop = st;
}
}
//Execute the actual test on document ready.
document.addEventListener('DOMContentLoaded', function () {
console.time("test");
scroll(9, 9, 144, 101);
console.timeEnd("test");
}, false);
</script>
</body>
</html>
To my best guess of why this is so slow is because you are trying to load many elements. What I would suggest instead of
var expand = container.children[0].children[0];
var shrink = container.children[0].children[1];
putting a class on these children elements you are wanting to get and getting them that way.

Moving div gravity effect javascript/jquery

I am making a game with javascript/jquery and I am trying to make a gravity effect. I have <div id="block"><img src="block/block1.png"/><div> and I want it to constantly move down but I also want it just to sit on top of other divs instead of going right through them. So far I have tried:
var obj = $('#block');
function down()
{
obj.animate({top:'-=20'}, 1000, down);
}
down();
This (fiddle) is not elegant and can be improved a lot, but it works. It uses a very simple collision model and an interval timer. You will need to adapt some parts (and you will hopefully improve it).
HTML:
<div class="gravity" style="width: 90px; height: 15px; background-color: red; position: absolute; top: 10px; left: 20px;"></div>
<div class="gravity" style="width: 90px; height: 25px; background-color: green; position: absolute; top: 60px; left: 30px;"></div>
<div class="gravity" style="width: 90px; height: 25px; background-color: gray; position: absolute; top: 30px; right: 45px;"></div>
<div class="obstacle" style="width: 230px; height: 40px; background-color: blue; position: absolute; top: 240px; right: 19px;"></div>
<div class="obstacle" style="width: 180px; height: 40px; background-color: blue; position: absolute; top: 90px; left: 30px;"></div>
JavaScript:
(function() {
// All falling objects
var gravity = $('.gravity'),
// All static objects
obstacle = $('.obstacle');
var all = gravity.add(obstacle);
setInterval(function() {
// Calculate positions of all falling objects
gravity.each(function() {
var e = this,
g = $(this),
ypos = g.offset().top,
xpos = g.offset().left,
h = g.height(),
w = g.width();
// Check whether something is in our way
var conflicts = false;
all.each(function() {
if(this === e) return;
var a = $(this);
if(xpos < a.offset().left + a.width() && xpos + w > a.offset().left) {
if(ypos + h > a.offset().top && ypos + h < a.offset().top + a.height()) {
conflicts = true;
}
}
});
if(!conflicts) {
// Move down (real gravitation would be v = a * t)
g.css('top', g.offset().top + 3);
}
});
}, 50);
})();
To prevent negative comments and such stuff: Yes, you should call this once the document has been loaded. Yes, this code is dirty and should not be used in a production environment. It is just what it claims to be - a working example.

Categories