I am using this moving highlight as reference on my website: https://css-tricks.com/examples/MovingHighlight/
<script>
var originalBG = '',
lightColor = 'fff',
gradientSize = 500;
$('.navigation .flex, .navigation a, .black')
.mousemove(function(e) {
originalBG = $(".navigation .flex, .black").css("background-color");
x = e.pageX - this.offsetLeft;
y = e.pageY - this.offsetTop;
xy = x + " " + y;
bgWebKit = "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", 400, from(rgba(255,255,255,0.2)), to(rgba(255,255,255,0.0))), " + originalBG;
bgMoz = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, " + originalBG + " " + gradientSize + "px)";
$(this)
.css({ background: bgWebKit })
.css({ background: bgMoz });
}).mouseleave(function() {
$(this).css({ background: originalBG });
});
</script>
I've tried removing various scripts etc but nothing seems to be working. Any ideas why I'm not seeing the gradient on the home page?
removing the parent elements position:relative; solved the problem.
Related
I'm still very new to jquery and javascript.
I'm trying to make a image change whenever the mouse move to the left. For example, every 50px the mouse move to the left, the image will change.
I don't know where to start. But I found this in JSFiddle .
Not too sure how to advance from there though.
$( "div" ).mousemove(function( event ) {
var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
$( "span:first" ).text( "( event.pageX, event.pageY ) : " + pageCoords );
$( "span:last" ).text( "( event.clientX, event.clientY ) : " + clientCoords );
if(event.pageX){
}
});
I appreciate all helps. Thank you so much.
found an interesting jsfiddle that detects mouse movement, taken from this question.
i was able to get it to work with four images. just create more classes, oldMath variables, and else if statements for more.
var oldMath = 0;
var oldMath2 = 50;
var oldMath3 = 100;
$('#image').mousemove(function(event) {
var startingTop = 10,
startingLeft = 22,
math = Math.round(Math.sqrt(Math.pow(startingTop - event.clientY, 2) +Math.pow(startingLeft - event.clientX, 2))) + 'px';
$('#currentPos').text('you are at :' + math); // remove this line if you don't want the span
if(Math.abs(parseInt(math) - oldMath) > 50){
//you have moved 5 pixles, put your stuff in here
$('.example').removeClass('example').addClass('example2').text('it\'s fall!');
oldMath = parseInt(math);
} else if(Math.abs(parseInt(math) - oldMath2) > 50){
//you have moved 5 pixles, put your stuff in here
$('.example2').removeClass('example2').addClass('example3').text('it\'s winter!');
oldMath2 = parseInt(math);
} else if(Math.abs(parseInt(math) - oldMath3) > 50){
//you have moved 5 pixles, put your stuff in here
$('.example3').removeClass('example3').addClass('example4').text('it\'s spring!');
oldMath3 = parseInt(math);
}
});
#image {
width: 500px;
height: 500px;
color: white;
font-size: 25px;
}
.example {
background: url('http://writers.uclaextension.edu/wp-content/uploads/2013/03/summer.jpg');
}
.example2 {
background: url('http://pcafalcons.com/wp-content/uploads/2014/10/Fall_image.jpg');
}
.example3 {
background: url('http://cdn1.theodysseyonline.com/files/2015/12/04/635848557150633136-120303261_winter.jpg');
}
.example4 {
background: url('http://sites.psu.edu/showerthoughts/wp-content/uploads/sites/21601/2015/03/spring-flowers-background-3.jpg');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="currentPos"></span>
<div class="example" id="image">hover to change the season</div>
got the following problem. i need the following just to be drag/dropable in the green area.
should be something like that:
limit($(this).parent());
but thats not working, im using this for dnd:
$('#dragThis').draggable({
drag: function () {
var offset = $(this).offset();
var xPos = Math.abs(offset.left);
var yPos = Math.abs(offset.top);
$('#posX').val('x: ' + xPos);
$('#posY').val('y: ' + yPos);
},
stop: function (event, ui) {
// Show dropped position.
var Stoppos = $(this).position();
var left = Math.abs(Stoppos.left);
var top = Math.abs(Stoppos.top);
$('#posX').val('x: ' + left);
$('#posY').val('y: ' + top);
}
});
hope someone can help me with that ;) thx so far
http://jsfiddle.net/DGbT3/1850/
///////////////
Update - getting correct x/y Position and just allow inside green area:
http://jsfiddle.net/DGbT3/1858/
You can use containment option for this which constrains dragging to within the bounds of the specified element or region.:
$('#dragThis').draggable({
drag: function() {
var offset = $(this).offset();
var xPos = Math.abs(offset.left);
var yPos = Math.abs(offset.top);
$('#posX').val('x: ' + xPos);
$('#posY').val('y: ' + yPos);
},
stop: function(event, ui) {
// Show dropped position.
var Stoppos = $(this).position();
var left = Math.abs(Stoppos.left);
var top = Math.abs(Stoppos.top);
$('#posX').val('x: ' + left);
$('#posY').val('y: ' + top);
$('#info').val('x: ' + left + ' y: ' + top);
},
containment: $("#content")
});
Example
If you want to get the position according to its parent then use .position(), then check if the xPos and yPos are bigger than 0 and smaller that its parent's width..
$('#dragThis').draggable({
drag: function() {
var offset = $(this).position();
var xPos = offset.left;
var yPos = offset.top;
$('#posX').val('x: ' + xPos);
$('#posY').val('y: ' + yPos);
if(xPos < 0 || xPos > $(this).parent().width())
console.log("outside");
},
stop: function(event, ui) {
// Show dropped position.
var Stoppos = $(this).position();
var left = Stoppos.left;
var top = Stoppos.top;
$('#posX').val('left: ' + left);
$('#posY').val('top: ' + top);
if(xPos < 0 || xPos > $(this).parent().width())
console.log("outside");
}
});
NOTE: there is a typo in your #content css position..
I made a function that allow user to drag any element inside body. The problem I am having is when user move the mouse too fast, it lost track of the position. Is there a better way to track the mouse ?
here is my functions
$(this).on("mousedown",function(event){
//$(this).on("click",function(event){
$(this).css("cursor","move");
mouseX = event.pageX;
mouseY = event.pageY;
xx = mouseX - $(this).position().left;
yy = mouseY - $(this).position().top;
console.log(" mouseX : " +mouseX+ " mouseY : " +mouseY ) ;
console.log(" XX : " +xx+ " YY : " +yy ) ;
$(this).on("mousemove",function(event){
startX = event.pageX;
startY = event.pageY;
console.log("after move page X : " +startX+ " page Y : " +startY ) ;
console.log("before left : " + $(this).position().left + " top : " + $(this).position().top ) ;
dragging = true;
if(dragging){
//this.style.top = startY - yy + 'px';
//this.style.left = startX - xx + 'px';
// $(this).animate({"left":(startX - xx),"top":(startY - yy)},0);
$(this).css("top",(startY - yy));
$(this).css("left",(startX - xx));
console.log("after left : " + this.style.left + " top : " + this.style.top ) ;
}
});
});
it did move with the cursor but can't follow up with fast movement.
I'm using a JS script to change div background colors depending of my mouse position.
$(document).mousemove(function(e){
var $width = ($(document).width())/(252 - 23);
var $height = ($(document).height())/(253 - 2);
var $pageX = 253 - parseInt(e.pageX / $width,10);
var $pageY = 200 - parseInt(e.pageY / $height,10) + 2;
$("body").css("background-color", "rgb("+$pageY+","+$pageY+","+$pageY+")");
});
it works perfectly fine.
what I'm trying to do now is to apply the same color changes to my links when hover and when active.
when trying this code, the color changes on hover, depending of the mouse position, but when mouseout the changed color belongs :
$(document).mousemove(function(e){
var $width = ($(document).width())/(252 - 23);
var $height = ($(document).height())/(253 - 2);
var $pageX = 253 - parseInt(e.pageX / $width,10);
var $pageY = 200 - parseInt(e.pageY / $height,10) + 2;
$("a:hover").css("color", "rgb("+$pageX+","+$pageY+","+$pageX+")");
$("a:hover").css("border-bottom", "1px dotted rgb("+$pageX+","+$pageY+","+$pageX+")");
$("a:active").css("color", "rgb("+$pageX+","+$pageY+","+$pageX+")");
$("a:active").css("border-bottom", "1px dotted rgb("+$pageX+","+$pageY+","+$pageX+")");
});
I think I need to add a mouseover and mouseout function but I don't know how to do this...
anyone know how I can do this ?
here is a jsfiddle : http://jsfiddle.net/BrZjJ/36/
thanks a lot for your help
You better use mouseleave instead of mouseout
$('a').mouseleave(function(e){
$('a').css({'color':'#000', 'border':'none'});
});
Because of some signifcant changes in the fiddle, I'll answer here instead of leaving it as a comment. If I understand you right, you want the color of the link to change depending on where you move over it and having the link keep that color when you click on it (or activate it).
In this jsFiddle it does just that:
CSS
a.active {
border-bottom: 1px dotted;
}
a:visted {
color:blue;
}
a {
color: blue;
text-decoration: none;
}
a:hover {
border-bottom: 1px dotted;
}
JavaScript
var pageX, pageY;
$(document).mousemove(function (e) {
var $width = ($(document).width()) / (252 - 23);
var $height = ($(document).height()) / (253 - 2);
var $pageX = 253 - parseInt(e.pageX / $width, 10);
var $pageY = 200 - parseInt(e.pageY / $height, 10) + 2;
$("body").css("background-color", "rgb(" + $pageY + "," + $pageY + "," + $pageY + ")");
});
$(document).mousemove(function (e) {
var $width = ($(document).width()) / (252 - 23);
var $height = ($(document).height()) / (253 - 2);
pageX = 253 - parseInt(e.pageX / $width, 10);
pageY = 200 - parseInt(e.pageY / $height, 10) + 2;
$("a").on("mousemove", function () {
$(this).css("color", "rgb(" + pageX + "," + pageY + "," + pageX + ")");
}).on("mouseleave", function () {
if (!$(this).hasClass("active")) $(this).removeAttr("style");
});
$("a.active").css("color", "rgb(" + pageX + "," + pageY + "," + pageX + ")");
});
$("a").on("click", function () {
$("a").removeAttr("style").removeClass("active");
$(this).addClass("active").css("color", "rgb(" + pageX + "," + pageY + "," + pageX + ")");
});
Edit: updated to change color of active link on moving mouse.
Ok, so I am trying to use jQuery to get the innerWidth() of an element #preview. I want to create a conditional that says IF x offset LEFT + #preview width is greater than page width, give it style right: z where z = #preview width + xOffset.
I apologize my code below is a mess and the syntax for .css ("right", (rightFloat + xOffset) + "px") (line 125) is off, but that's part of my problem.
<script>
$(document).ready(function(){
//append "gallery" class to all items with "popup" class
imagePreview();
$(".popup").addClass("gallery");
});
//The overlay or pop-up effect
this.imagePreview = function() { /* CONFIG */
xOffset = 40;
yOffset = 40;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.preview").click(function(e) {
return false;
});
$("a.preview").hover(function(e) {
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
var rightFloat = e.pageX + ("#preview").innerWidth;
$("body").append("<p id='preview'><img src='" + this.href + "' alt='Image preview' />" + c + "</p>");
$("#preview").hide().css("top", (e.pageY - yOffset) + "px").css("left", (e.pageX + xOffset) + "px").fadeIn("2000");
while ((left + 400) > window.innerWidth) {.css("right", (rightFloat + xOffset) + "px")
}
}, function() {
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e) {
var top = e.pageY - yOffset;
var left = e.pageX + xOffset;
var rightFloat = e.pageX + ("#preview").innerWidth;
//flips the image if it gets too close to the right side
while ((left + 400) > window.innerWidth) {.css("right", +(rightFlaot + xOffset) + "px")
}
$("#preview").css("top", top + "px").css("left", left + "px");
});
};
</script>
Try using http://api.jquery.com/offset/
if($('#preview').offset().right<0){
var right = parseInt($(window).width()) - e.pageX + xOffset;
$("#preview").css("top", top + "px").css("right", right + "px");
}else{
var left = e.pageX + xOffset;
$("#preview").css("top", top + "px").css("left", left + "px");
}
I made these fixes because I couldn't get your code to work in jsfiddle:
var xOffset = 40;
var yOffset = 40;
$("a.preview").bind('mouseover',function(e){
var rightFloat = parseFloat(e.pageX)+$("#preview").innerWidth();
var ptop = parseFloat(e.pageY) - yOffset;
var pleft = parseFloat(e.pageX) + xOffset;
$("#preview").css({"top":ptop + "px","left":pleft + "px"});
});
There's the fixes for the top half but I have no idea what you're trying to do with the bottom part (with the while loop). Can you explain what functionality you want?