I have successfully created an interactive image slider. When a user clicks on an image, I am using JavaScript to dynamically generate and display a div with additional text content. However, I am facing an issue where the newly created div appears on the very right side of the page instead of being positioned in line with the selected image. How can I ensure that it occupies the same position as the image?
Below is the code snippet I am currently using to create the div and insert the image:
function flipIt(obj){
console.log("value before Function status "+status);
$(obj).wrap($('<div class="foobar"/>').css({
"position" : "absolute",
"left" : $(obj).position().left,
"top" : $(obj).position().top,
"height" :$(obj).height(),
"width" :$(obj).width(),
}));
alert('classes ..'+$(obj).hasClass("foobar").toString());
$(obj).animate({"left": "-=40px","opacity": "0.65"},"slow");
$(obj).animate({"height":"600px","width":"320px"},30);
$(obj).css("-webkit-backface-visibility","hidden");
$(obj).css("-webkit-transform-style","preserve-3d");
$(obj).css("-webkit-transition","all 1.0s linear");
$(obj).css("transform-style","preserve-3d");
$(obj).css("transition","all 1.0s linear");
$(obj).css("-webkit-transform","rotateY(180deg)");
$(obj).css("transform","rotateY(180deg)");
status=0;
console.log("after if value set status "+status);
}
CSS styling for the .foobar div:
.foobar {
-webkit-backface-visibility:visible;
position:absolute;
color:red;
background-color: red;
background:red;
content: div is here;
height:450px;
width:250px;
}
How can I position the dynamically created div at the exact location of the selected img?