moving the caption of a tooltip - javascript

Can somebody please tell me how to arrange the caption above the image in the jsfiddle below as I can not seem to do it. The caption is currently below the image. Thanks in advance.
Sample Code
<script type="text/javascript">
$(function(){
$("ul.thumb li").hover(function() {
$(this)
.css('z-index', '10')
.find('img').addClass("hover")
.stop()
.animate({
marginTop: '-150px',
marginLeft: '-150px',
top: '50%',
left: '50%',
width: '300px',
height: '300px',
padding: '20px'
}, 200, function() {
var $this = $(this),
h = $this.height();
$caption = $('<div class="caption">' + this.title + '</div>')
.css('top', h.toString() + 'px');
$this.after($caption);
});
}, function() {
$('.caption').remove();
$(this)
.css('z-index', '0')
.find('img').removeClass("hover")
.stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '200px',
height: '200px',
padding: '5px'
}, 400);
});
});
</script>
I hope this helps


Here is an updated FIDDLE.
The relevant line is this one:
.css('top', -h.toString() + 'px');
It positions the div for the text, and to change the position above the image, I just placed a negative sign in front of h.toString(). You could finely adjust the position by multiplying the h.toString() by a coefficient like -.8 or -.92 to make finer adjustments. It may be problematic putting it above the image, because you'll have to adjust the position based on the height of the text div.

Related

How to let the html image move to a certain place?

my image cannot to move to the place that I set.
this is some code that i found in https://codepen.io/anon/pen/REvbEZ it not working when i try to apply into my code.
I have try to change some movement but its does not working at all.
$('.add-to-cart').on('click', function () {
var cart = $('.shopping-cart');
var imgtodrag = $(this).parent('.item').find("img").eq(0);
if (imgtodrag) {
var imgclone = imgtodrag.clone()
.offset({
top: imgtodrag.offset().top,
left: imgtodrag.offset().left
})
.css({
'opacity': '0.5',
'position': 'absolute',
'height': '150px',
'width': '150px',
'z-index': '100'
})
.appendTo($('body'))
.animate({
'top': cart.offset().top + 10,
'left': cart.offset().left + 10,
'width': 75,
'height': 75
}, 1000, 'easeInOutExpo');
});
Let the product image move to the cart image after i press the add to cart button.
This is for the user to know the product is successfully added to the cart.

Create a DIV at click; Then remove same DIV by clicking on it

I'm very new to programming and particularly JS and JQuery.
I've searched SO for hours trying to figure out how to do this seemingly simple task and observed plenty of code from talented programmers, but nothing what would suit my request.
I'm simply trying to
(A) create a dynamic DIV at the point on the page where the user clicks the mouse. This part I can accomplish.
(B) The next step is clicking on that new DIV and removing it from the page.
Here's what I've found to accomplish step A:
$(function(){
$('#picture').click(function(e){
var x = e.pageX - 20 + 'px';
var y = e.pageY - 20 + 'px';
var div = $('<div>', {
'class':'face',
'css': {
'position':'fixed',
'left': x,
'top': y,
'width': '40px',
'height': '40px'
},
});
$(document.body).append(div);
This simply creates a small 40x40px DIV in the body of the document.
Step B is proving beyond my knowledge. Simply being able to click on that newly created DIV and remove it from the document?
If I create the same div manually prior to the page loading, I can click it as expected. I just cant find a way to 'find' the newly created DIV's. Please help. I have researched extensively, and cant seem to find out how to accomplish this.

jsbin demo
Use dynamic event delegation with the .on() method
$("body").on("click", ".face", function(){
$(this).fadeOut(function(){
$(this).remove();
});
});
http://api.jquery.com/on/#direct-and-delegated-events
P.S: to prevent dispatching events all over the document or "body" use rather the first static parent ID as selector $("#someid").on.
or as Santiago suggested (but slightly different), accessing the "click" Element property and not using the div variable at all:
$('#picture').click(function(e) {
var x = e.pageX - 20 + 'px';
var y = e.pageY - 20 + 'px';
$('<div />', { // Don't forget closign slash!
'click': function(){ // The click property
$(this).fadeOut(function(){
$(this).remove();
});
},
'class':'face',
'css': {
position: 'fixed',
left: x,
top: y,
width: 40,
height: 40
}
}).appendTo("body");
});
jsbin demo

what about this:
$(function(){
$('#picture').click(function(e) {
var x = e.pageX - 20 + 'px';
var y = e.pageY - 20 + 'px';
var div = $('<div>', {
'class':'face',
'css': {
'position':'fixed',
'left': x,
'top': y,
'width': '40px',
'height': '40px'
},
'click': function(ev) {
$(ev.target).remove();
}
});
$("body").append(div);
});
});
#picture {
height: 150px;
width: 150px;
background:gray;
display:block;
}
.face {
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="picture"></div>

It's pretty simple actually. Add a function to your javascript to remove the element after you create it. You can do it even more easily thanks to jQuery. I think that my answer is one of the most elegants here ;P hihi
div.click(function(){
div.remove();
});
I did a live example below, if you want to test it :)
$(function(){
$('#picture').click(function(e){
var x = e.pageX - 20 + 'px';
var y = e.pageY - 20 + 'px';
var div = $('<div>', {
'class':'face',
'css': {
'position':'fixed',
'left': x,
'top': y,
'width': '40px',
'height': '40px'
},
});
/* HELLO DEAR, I DO THE TRICK */
div.click(function(){
div.remove();
});
$(document.body).append(div);
});
});
#picture{
width:500px;
height:500px;
background-color:green;
}
.face {
background-color:red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="picture">
</div>

Use event delegation:
$(document).on('click', '.face', function(){
$(this).remove();
});
$(function(){
$('#picture').click(function(e){
var x = e.pageX - 20 + 'px';
var y = e.pageY - 20 + 'px';
var div = $('<div/>', {
'class':'face',
'css': {
'position':'fixed',
'left': x,
'top': y,
'width': '40px',
'height': '40px'
}
});
$(document.body).append(div);
});
});
$(document).on('click','.face', function() {
$(this).remove();
});
#picture {
width: 200px;
height: 200px;
border: 1px solid black;
}
.face {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="picture"></div>

I would create the jQuery object first, then you can append and remove it at will, without creating a new jQuery object.
In the image click listener all the script below does is change the position of the square and append it if it isn't already appended, while clicking on the square itself will remove it.
$(function(){
var body = $('body');
var div = $('<div>', {
'class':'face',
'css': {
'position':'fixed',
'width': '40px',
'height': '40px',
'background': '#f9fd42',
}
});
$(document).on('click', function(e){
if(div.is(e.target)) div.remove();
});
$('#demo').click(function(e){
div.css({
'left': e.pageX - 20 + 'px',
'top': e.pageY - 20 + 'px'
}).appendTo(body);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="//lorempixel.com/200/100" id="demo">

<div class="full-page">
<div class="imgbox">
</div>
</div>
js
$('.imgbox').click(function(e){
var x=e.pageX-20;
var y=e.pageY-20;
var ap_div='<div class="ap_div" style="left:'+ x +'px;top:'+ y+'px"></div>';
$('.full-page').append(ap_div)});
$('body').delegate(".ap_div", 'click', function(e){
$(this).remove();
});
fiddle
http://jsfiddle.net/6czbzb38/2/

Why I am getting wrong cursor position when scaling entire body?

I'm scaling the entire using a CSS scale transform. The problem is that I get the wrong cursor position. I want to create a new div where the cursor is clicked but div is being created in wrong position.
$(document).ready(function() {
$('body').css({
transform: 'scale(0.5,0.5)'
});
var k = 1;
$('.container').off('click').on('click', function(e) {
var top = e.pageY;
var left = e.pageX;
$('<div />', {
id: 'temp' + k
}).css({
position: 'absolute',
top: top + 'px',
left: left + 'px',
width: '50px',
height: '50px',
border: '1px solid red'
}).appendTo('.container');
k++;
});
});

How To Get This to Fade In?

The code below works, but #wrapperone justs pops up on the screen.. is there a way to get it to fade in?
jQuery(window).load(function(){
function fixDiv() {
var jQuerydiv = jQuery("#wrapperone");
if (jQuery(window).scrollTop() > jQuerydiv.data("top")) {
jQuery('#wrapperone').css({'position': 'fixed', 'top': '0', 'width': '100%', 'background': 'rgba(255,255,255,0.1)'});
}
else {
jQuery('#wrapperone').css({'position': 'static', 'top': 'auto', 'width': '100%', 'background': 'transparent'});
}
}
jQuery("#wrapperone").data("top", jQuery("#wrapperone").offset().top);
jQuery(window).scroll(fixDiv);
});

Try playing with the opacity and using the fadeIn feature of jQuery.
jQuery(window).load(function(){
function fixDiv() {
var jQuerydiv = jQuery("#wrapperone");
if (jQuery(window).scrollTop() > jQuerydiv.data("top")) {
jQuery('#wrapperone').css({'position': 'fixed', 'top': '0', 'width': '100%', 'background': 'rgba(255,255,255,0.1)', 'opacity': '0'}).fadeIn(100);
}
else {
jQuery('#wrapperone').css({'position': 'static', 'top': 'auto', 'width': '100%', 'background': 'transparent'});
}
}
jQuery("#wrapperone").data("top", jQuery("#wrapperone").offset().top);
jQuery(window).scroll(fixDiv);
});`

$("#wrapperone").fadeIn();
I think this is what you are looking for.
More about the fadeIn feature here

Try like below,
function fixDiv() {
var jQuerydiv = jQuery("#wrapperone");
if (jQuery(window).scrollTop() > jQuerydiv.data("top")) {
jQuery('#wrapperone')
.hide() //Hide the wrapper
// v-- Position it
.css({'position': 'fixed', 'top': '0', 'width': '100%', 'background': 'rgba(255,255,255,0.1)'})
.fadeIn(); //Fade In
}
else {
jQuery('#wrapperone')
.hide() //Hide the wrapper
// v-- Position it
.css({'position': 'static', 'top': 'auto', 'width': '100%', 'background': 'transparent'})
.fadeIn(); //Fade In
}
}

Jquery: functions calls when the page loads

I have a complex function called animated(). Now this function has to affect 2 different DOM elements: one when the page loads, and the second one when I click on it.
$("li div").click(animated);
How can I make it happen for at the start in any case on another <div>?
Something like:
$("li div").animated();
I know that's not right, so how can I do something like that?
thanks for the answers....any way I'm pretty new with Jquery so i'm gonna copy the my code here so yous have an idea about what is going on...this code works perfectly but is redundant and I'm sure there is a way to reduce it.
here is the jquery code
$(document).ready(function() {
var wrapperheightanim = $(window).height(); // check the dimension of the window to see how many rectangles i can fit
var locid = window.location.hash.replace("!", ""); // save the location id in case the user starts from a page that is not the home
$(window).resize(function() {
wrapperheightanim = $(window).height();
});
//rollover
$("li").hover(
function () {
$("img", this).fadeIn(500);
},
function () {
$("img", this).fadeOut(500);
}
);
//click on the navbar
function animated() {
var titletemp = $(this).attr("id"); // save the id in a temp var
var title=titletemp.replace(/_/g, ' '); // I use the id as titles so i substitute underscores with spaces
var color = $(this).css("background-color"); // save the bgcolor of the main square
// animation that bring every square to the start position
$("#about").animate({top:'200px', left:"0", height: "180px", width:"200px"}, 1000, "easeInOutBack");
$("#social_media").animate({top:'90px', left:"200px", height: "140px", width:"200px"}, 1000, "easeInOutBack");
$("#bd_package").animate({top:'90px', left:"400px", height: "140px", width:"200px"}, 1000, "easeInOutBack");
$("#services").animate({top:'230px', left:"200px", height: "130px", width:"560px"}, 1000, "easeInOutBack");
$("#portfolio").animate({top:'360px', left:"200px", height: "350px", width:"200px"}, 1000, "easeInOutBack");
$("#clients").animate({top:'360px', left:"400px", height: "220px", width:"200px"}, 1000, "easeInOutBack");
$("#contact").animate({top:'290px', left:"600px", height: "160px", width:"220px"}, 1000, "easeInOutBack");
$("#quote").animate({top:'230px', left:"760px", height: "60px", width:"60px"}, 1000, "easeInOutBack");
$("#blog").animate({top:'280px', left:"840px", height: "60px", width:"60px"}, 1000, "easeInOutBack");
$(".shape").animate({top:'200px', left:"200px", height: "0", width:"0"}, 1000, "easeInOutBack");
// remove the images from the rollover
$("img", "li").fadeIn(1);
$("img", this).fadeOut(1);
// create the main container
$(this).css("z-index", 99);
$(this).animate({
top: '50px',
left: '150px',
width: '700px',
height: '585px'
}, 500
);
// create the side navbar squares
$("li").not(this).css("z-index", 3);
$("li").not(this).animate({
left: '10px',
width: '140px',
height: '60px'
}, 500
);
// move the squares to create the side navbar
$("li").not(this).eq(0).animate({top:'50px'}, 1000, "easeOutExpo");
$("li").not(this).eq(1).animate({top:'125px'}, 1000, "easeOutExpo");
$("li").not(this).eq(2).animate({top:'200px'}, 1000, "easeOutExpo");
$("li").not(this).eq(3).animate({top:'275px'}, 1000, "easeOutExpo");
$("li").not(this).eq(4).animate({top:'350px'}, 1000, "easeOutExpo");
$("li").not(this).eq(5).animate({top:'425px'}, 1000, "easeOutExpo");
$("li").not(this).eq(6).animate({top:'500px'}, 1000, "easeOutExpo");
$("li").not(this).eq(7).animate({top:'575px'}, 1000, "easeOutExpo");
$("li").not(this).eq(8).animate({top:'650px'}, 1000, "easeOutExpo");
$("li").not(this).eq(9).animate({top:'725px'}, 1000, "easeOutExpo");
// animate the additional square around the main one
$("#title").delay(1000).queue(function(n) { // the title square gets the same color of the main container, an gets the the title from the class
$(this).html("<h1>" + title + "</h1>"); // the function queue allows me to delay the process of changing title when i click
n();
}).animate({
top: '-40px',
left: '400px',
width: '450px',
height: '70px',
backgroundColor: color
}, 1000);
$("#2").css("background-color", "#9090AF").delay(1400).animate({
top: '50px',
left: '870px',
width: '150px',
height: '70px'
}, 500);
$("#3").css("background-color", "#47477A").delay(800).animate({
top: '655px',
left: '270px',
width: '750px',
height: '70px'
}, 1000);
$("#4").css("background-color", "#A5264E").delay(700).animate({
top: '450px',
left: '870px',
width: '120px',
height: '70px'
}, 456);
if(wrapperheightanim > 1000){
$("#5").css("background-color", "#fff").delay(1000).animate({
top: '745px',
left: '270px',
width: '250px',
height: '70px'
}, 1000);
}
locid = window.location.hash.replace("!", "");
}
function animated2() {
var titletemp2 = $(locid).attr("id"); // save the id in a temp var
var title2=titletemp2.replace(/_/g, ' '); // I use the id as titles so i substitute underscores with spaces
var color2 = $(locid).css("background-color"); // save the bgcolor of the main square
// animation that bring every square to the start position
$("#about").animate({top:'200px', left:"0", height: "180px", width:"200px"}, 1000, "easeInOutBack");
$("#social_media").animate({top:'90px', left:"200px", height: "140px", width:"200px"}, 1000, "easeInOutBack");
$("#bd_package").animate({top:'90px', left:"400px", height: "140px", width:"200px"}, 1000, "easeInOutBack");
$("#services").animate({top:'230px', left:"200px", height: "130px", width:"560px"}, 1000, "easeInOutBack");
$("#portfolio").animate({top:'360px', left:"200px", height: "350px", width:"200px"}, 1000, "easeInOutBack");
$("#clients").animate({top:'360px', left:"400px", height: "220px", width:"200px"}, 1000, "easeInOutBack");
$("#contact").animate({top:'290px', left:"600px", height: "160px", width:"220px"}, 1000, "easeInOutBack");
$("#quote").animate({top:'230px', left:"760px", height: "60px", width:"60px"}, 1000, "easeInOutBack");
$("#blog").animate({top:'280px', left:"840px", height: "60px", width:"60px"}, 1000, "easeInOutBack");
$(".shape").animate({top:'200px', left:"200px", height: "0", width:"0"}, 1000, "easeInOutBack");
// remove the images from the rollover
$("img", "li").remove();
// create the main container
$(locid).css("z-index", 99);
$(locid).animate({
top: '50px',
left: '150px',
width: '700px',
height: '585px'
}, 500
);
// create the side navbar squares
$("li").not(locid).css("z-index", 3);
$("li").not(locid).animate({
left: '10px',
width: '140px',
height: '60px'
}, 500
);
// move the squares to create the side navbar
$("li").not(locid).eq(0).animate({top:'50px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(1).animate({top:'125px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(2).animate({top:'200px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(3).animate({top:'275px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(4).animate({top:'350px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(5).animate({top:'425px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(6).animate({top:'500px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(7).animate({top:'575px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(8).animate({top:'650px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(9).animate({top:'725px'}, 1000, "easeOutExpo");
// animate the additional square around the main one
$("#title").delay(1000).queue(function(n2) { // the title square gets the same color of the main container, an gets the the title from the class
$(this).html("<h1>" + title2 + "</h1>"); // the function queue allows me to delay the process of changing title when i click
n2();
}).animate({
top: '-40px',
left: '400px',
width: '450px',
height: '70px',
backgroundColor: color2
}, 1000);
$("#2").css("background-color", "#9090AF").delay(1400).animate({
top: '50px',
left: '870px',
width: '150px',
height: '70px'
}, 500);
$("#3").css("background-color", "#47477A").delay(800).animate({
top: '655px',
left: '270px',
width: '750px',
height: '70px'
}, 1000);
$("#4").css("background-color", "#A5264E").delay(700).animate({
top: '450px',
left: '870px',
width: '120px',
height: '70px'
}, 456);
if(wrapperheightanim > 1000){
$("#5").css("background-color", "#fff").delay(1000).animate({
top: '745px',
left: '270px',
width: '250px',
height: '70px'
}, 1000);
}
}
$("li").click(animated);
animated2();
});
as you can see the functions animated and animated2 are exactly the same with the difference
that one happens to the div when i click, one happens to a certain div when i load the page..hope with the code it's easier. my problem is how to write the function once and execute it once when i click on one element, and once when the page load on the specific element saved in the variable locid..

You can't do $('li div').animate() because your function is not a property of a jquery object (unless you implement it as so - like a plugin).
You can trigger the event click you just defined though:
$('li div').click(); // or $('li div').trigger('click');
This will execute your animatedevent handler attached with $("li div").click(animated);

Let's say your function looks like this:
function animate()
{
// do complex stuff to 2 DOM nodes
}
To run that function on whenever a <div> inside a <li> is clicked, do this:
$('li div').click(function() {
animate();
});
If you want to run animate when the page loads, do this:
$(function() {
animate();
});
Edit: On the other hand, if your function looks like this:
function animate(domElement)
{
// do complex stuff to domElement
}
To run that function on any <div> inside a <li>, when it is clicked, do this:
$('li div').click(function() {
animate(this);
});
And if you want to run the function on page load, on all the <div>s that are inside <li>s, do this:
$('li div').each(function(index, element) {
animate(element);
});

Categories