Collision detection wont work in Jquery? - javascript

So I'm making this project for school where we have to create a game and I picked space invaders. So it's going pretty well but the collision detection won't work. I've spent hours on google trying to find my problem but I couldn't. Here are the 2 JS files.
var newPlayer=0;
var hero = new Object();
var playerCount=0;
var pTag="";
var redImage=$("#red");
var blueImage=$("#blue");
var greenImage=$("#green");
function Hero(n,life,speed,buls)
{
var that=this;
playerCount++;
this.name=n;
this.lives=life;
this.speed=speed;
this.bulSpeed=buls;
this.warning=lowLives;
function stats()
{
alert("Name: " + that.name + "\n" + "Lives: "+ that.lives + "\n" + "Speed: " + that.speed + "\n" + "Bullet speed: " + that.bulSpeed);
}
function lowLives(life)
{
if(life==1)
alert("You have low lives. Be careful!");
else
alert("Don\'t worry! You still have " + life + " lives left");
}
this.buttonTag=$("#" + n + "B")
this.buttonTag.dblclick(startTheGame);
this.imageTag=$("#" + n);
this.imageTag.click(stats);
}
function newPlayerCreation1()
{
hero=new Hero("Red",3,5,6);
$("#RedB").off('click');
}
function newPlayerCreation2(){
hero=new Hero("Blue",4,3,4);
$("#BlueB").off('click');
}
function newPlayerCreation3(){
hero=new Hero("Green",2,8,2);
$("#GreenB").off('click');
}
$(document).ready(function(){
$("#RedB").click(newPlayerCreation1);
$("#BlueB").click(newPlayerCreation2);
$("#GreenB").click(newPlayerCreation3);
});
And this is the code where all the action happens
var position;
var position1;
var bulletCount=0;
var enemy=new Array(20);
var enemyVerticalCenter;
var enemyHorizontalCenter;
var verticalDifference;
var horizontalDifference;
var bulVerticalCenter;
var bulHorizontalCenter;
function startTheGame()
{
$("p").remove();
$("button").remove();
$("img").remove();
document.title="Space invaders";
var backGround = $("<div id='bground' style='background-color:black; width: 500px; height: 600px; position: relative; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto; background-repeat:no-repeat; border:10px;'>");
$("body").append(backGround);
var player = $("<img id='player' src='" + hero.name + ".png' style='position: absolute; height:40px; width:40px; left: 250; top: 540;'>");
var base1 = $("<img src='baseshelter.jpg' style='position: absolute; height:80px; width:60px; left:36; top: 440;'>");
var base2 = $("<img src='baseshelter.jpg' style='position: absolute; height:80px; width:60px; left:153; top: 440;'>");
var base3 = $("<img src='baseshelter.jpg' style='position: absolute; height:80px; width:60px; left:286; top: 440;'>");
var base4 = $("<img src='baseshelter.jpg' style='position: absolute; height:80px; width:60px; left:413; top: 440;'>");
for(i=1;i<=15;i++){
if(i<=5)
enemy[i]=$("<img src='space_invaders_alien.png' style='position: absolute; height:80px; width:60px; left:" + (i-1)*98 + "; top:0;'>");
else if(i>5 && i<=10)
enemy[i]=$("<img src='space_invaders_alien.png' style='position: absolute; height:80px; width:60px; left:" + i%5*98 + "; top:100;'>");
else
enemy[i]=$("<img src='space_invaders_alien.png' style='position: absolute; height:80px; width:60px; left:" + i%5*98 + "; top:200;'>");
}
$("#bground").append(base1);
$("#bground").append(base2);
$("#bground").append(base3);
$("#bground").append(base4);
$("#bground").append(player);
for(i=1;i<=15;i++)
$("#bground").append(enemy[i]);
$("html").keyup(stop).keydown(moveAndFire);
function enemyMoving()
{
for(var i=1;i<=15;i++)
{
enemy[i].animate({left: "+=50" + "px"}, 1000, "linear")
.animate({left: "-=50" + "px"},1000, "linear");
}
}
function stop(evt)
{
player.stop(true);
}
function moveAndFire(evt)
{
if (player.position().left > 0 && evt.keyCode == 37)
{
player.css("left", (player.position().left - hero.speed) + "px");
}
else if (player.position().left < (backGround.width() - player.width()) && evt.keyCode == 39)
{
player.css("left", (player.position().left + hero.speed) + "px");
}
else if (evt.keyCode==32)
{
bulletCount++;
position=player.position();
var bullet=$("<img id='bullet' src='bullet.png' style='position: absolute; height:30px; width:5px;'>");
$("#bground").append(bullet);
$("#bullet").css({ position: "absolute",top: player.position().top + "px", left: (player.position().left + 18) + "px"});
bullet.animate({top: "-=540" + "px"},{
duration: 3000/hero.speed,
step: checkCollision(bullet,enemy),
done: bullet.remove()
});
}
}
var interval=setInterval(enemyMoving,1000);
}
function checkCollision(bul,obs)
{
for(i=1;i<=15;i++)
{
enemyVerticalCenter = obs[i].position().top + obs[i].height()/2;
enemyHorizontalCenter=obs[i].position().left + obs[i].width()/2;
verticalDifference = bul.height()/2 + obs[i].height()/2;
horizontalDifference = bul.width()/2 + obs[i].width()/2;
bulVerticalCenter = bul.position().top + bul.height()/2;
bulHorizontalCenter = bul.position().left + bul.width()/2;
if(Math.abs(bulVerticalCenter - enemyVerticalCenter) <= verticalDifference && Math.abs(bulHorizontalCenter - enemyHorizontalCenter) <= horizontalDifference)
{
$(bul).remove();
$(obs[i]).remove();
}
}
}
And this is the html code
<html>
<head>
<title>Character creation</title>
</head>
<body>
<p id="name">Choose your Character</p>
<p class="info">Click the button once to create a hero, click the image of a hero to view its stats after creating him and double click the button to start the game with that hero</p>
<p class="info">The hero you start the game with must be the last one you created</p>
<img name="image" id="Red" src="Red.png" width="100px" height="100px">
<img name="image2" id="Blue" src="Blue.png" width="100px" height="100px">
<img name="image3" id="Green" src="Green.png" width="100px" height="100px">
<br>
<button id="RedB" style = "position: absolute; left:12px; top:213px">Choose Red!</button>
<button id="BlueB" style = "position: absolute; left:112px; top:213px">Choose Blue!</button>
<button id="GreenB" style = "position: absolute; left:212px; top:213px">Choose Green!</button>
<script src="jquery.js"></script>
<script src="startGame.js"></script>
<script src="script.js"></script>
</body>
</html>
So my bullet won't even be created. When I remove the done: bullet.remove() in the second jquery file, it won't collide with the enemies. Can someone tell me why?

Related

How do i keep a set of elements wrapped in a div inline?

https://jsfiddle.net//2L4t9saq/61/ is my code
this is the output of one line of iterations
<span class="inline"><div class="pixels" x="1" y="1" style="background-color: red; width: 10px; height: 10px;"></div><div class="pixels" x="2" y="1" style="background-color: red; width: 10px; height: 10px;"></div><div class="pixels" x="3" y="1" style="background-color: red; width: 10px; height: 10px;"></div><div class="pixels" x="4" y="1" style="background-color: red; width: 10px; height: 10px;"></div><div class="pixels" x="5" y="1" style="background-color: red; width: 10px; height: 10px;"></div><div class="pixels" x="6" y="1" style="background-color: red; width: 10px; height: 10px;"></div><div class="pixels" x="7" y="1" style="background-color: red; width: 10px; height: 10px;"></div><div class="pixels" x="8" y="1" style="background-color: red; width: 10px; height: 10px;"></div><div class="pixels" x="9" y="1" style="background-color: red; width: 10px; height: 10px;"></div><div class="pixels" x="10" y="1" style="background-color: red; width: 10px; height: 10px;"></div></span>
this creates 10 divs with width/height of 10px with the background color red, all 10 divs are wrapped in the span with class inline. this process is then repeated 10 times to create the 10*10 array.
this can be configured, currently all that can be configured are the width and height of the array, and the width and height of each individual pixel
currently it is just a vertical 100 block line of red squares.
how would i make all element wrapped in classinline stay inline? as to turn it from a 1*100 line to a 10*10 square
thanks in advance
/*
$("#body").append(
"<div x='1'></div>"
);
$("div[x=1]").css("background-color","red")
$("div[x=1]").css("width","16")
$("div[x=1]").css("height","16")
*/
var createGrid = function(dimx, dimy, pixx, pixy) {
for (var n = 1; n < dimy + 1; n++) {
var str = "<div class='inline'>"
for (var i = 1; i < dimx + 1; i++) {
var opentag = "<div class='pixels' x='"
var midtag = "' y='"
var endtag = "'></div>"
str = str + opentag + i + midtag + n + endtag
}
str = str + "</div>"
$("#main").append(str)
}
$(".pixels").css("background-color", "red")
$(".pixels").css("width", pixx)
$(".pixels").css("height", pixy)
};
createGrid(10, 10, 10, 10)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div canvas="canvas" id="main">
</div>
span should be inside the div and make them inline-block to be able to specify width/height
var createGrid = function(dimx,dimy,pixx,pixy){
for(var n = 1; n <dimy+1; n++){
var str = "<div>"
for(var i=1;i<dimx+1;i++){
var opentag = "<span class='pixels' x='"
var midtag = "' y='"
var endtag = "'></span>"
str = str+opentag+i+midtag+n+endtag
}
str=str+"</div>"
$("#main").append(str)
}
$(".pixels").css("background-color","red")
$(".pixels").css("width",pixx)
$(".pixels").css("height",pixy)
};
createGrid(10,10,10,10)
#main {
font-size:0; /* To fix white-space issue*/
}
.pixels {
display:inline-block;
border:1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div canvas="canvas" id="main">
</div>
Add display: flex on canvas div.
And no need of making the inline element as span, make it a div instead.
/*
$("#body").append(
"<div x='1'></div>"
);
$("div[x=1]").css("background-color","red")
$("div[x=1]").css("width","16")
$("div[x=1]").css("height","16")
*/
var createGrid = function(dimx, dimy, pixx, pixy) {
for (var n = 1; n < dimy + 1; n++) {
var str = "<div class='inline'>"
for (var i = 1; i < dimx + 1; i++) {
var opentag = "<div class='pixels' x='"
var midtag = "' y='"
var endtag = "'></div>"
str = str + opentag + i + midtag + n + endtag
}
str = str + "</div>"
$("#main").append(str)
}
$(".pixels").css("background-color", "red")
$(".pixels").css("width", pixx)
$(".pixels").css("height", pixy)
};
createGrid(10, 10, 10, 10)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div canvas="canvas" id="main" style="display: flex;">
</div>
The parent element should be display: block and the inner elements could be display: inline-block for them to display in a grid-like manner. Changing only the CSS:
var createGrid = function(dimx, dimy, pixx, pixy) {
for (var n = 1; n < dimy + 1; n++) {
var str = "<span class='inline'>"
for (var i = 1; i < dimx + 1; i++) {
var opentag = "<div class='pixels' x='"
var midtag = "' y='"
var endtag = "'></div>"
str = str + opentag + i + midtag + n + endtag
}
str = str + "</span>"
$("#main").append(str)
}
$(".pixels").css("background-color", "red")
$(".pixels").css("width", pixx)
$(".pixels").css("height", pixy)
};
createGrid(10, 10, 10, 10)
.inline {
display: block;
height: 10px;
}
.pixels {
display: inline-block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div canvas="canvas" id="main">
</div>
But it would be better to put spans inside divs, not the other way around (divs are display: block by default):
var createGrid = function(dimx, dimy, pixx, pixy) {
for (var n = 1; n < dimy + 1; n++) {
var str = "<div>"
for (var i = 1; i < dimx + 1; i++) {
var opentag = "<span class='pixels' x='"
var midtag = "' y='"
var endtag = "'></span>"
str = str + opentag + i + midtag + n + endtag
}
str = str + "</div>"
$("#main").append(str)
}
$(".pixels").css("background-color", "red")
$(".pixels").css("width", pixx)
$(".pixels").css("height", pixy)
};
createGrid(10, 10, 10, 10)
.pixels {
display: inline-block
}
#main > div {
height: 10px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div canvas="canvas" id="main">
</div>

html2canvas resetting letter spacing

$('#cypher-branding-letter-spacing').change(function(e) {
$('#cypher-branding-main-edit-right-txt-text').css('letter-spacing', $('#cypher-branding-letter-spacing').val() + 'px');
});
//add text to design
$(document).on('click', '#cypher-branding-btn-add-to-design-text', function() {
//remove the canvas border before creating the image, then add it back
$("#cypher-branding-main-edit-right-txt-text-wrapper").css('border', 'none');
html2canvas($("#cypher-branding-main-edit-right-txt-text-wrapper"), {
onrendered: function(canvas) {
var id = guid();
var img = new Image();
img = $('#cypher-branding-text-temp-img').find('img')[0];
img.src = canvas.toDataURL('image/png');
var w = canvas.width;
var h = canvas.height;
//var elem = $('<div id="cypher_container_' + id + '" class="cypher-container"><div id="cypher_container_inner_' + id + '" class="tooltip"><img id="cypher_container_img' + id + '" onclick=showLogoCommands("' + id + '"); src="' + img.src + '" class="cypher-blocks" style="width:' + w + 'px; height:' + h + 'px" /><span class="tooltiptext"><a href="#" onclick=rotatePlus("' + id + '");>Rotate +</a><a href="#" onclick=rotateMinus("' + id + '");>Rotate -</a><a href="#" onclick=removeFromDesign("' + id + '");>Remove</a><br /></span></div></div>');
var elem = $('<div id="cypher_container_' + id + '" class="cypher-container" style="width:100px;"><div id="cypher_container_inner_' + id + '" class="tooltip"><span class="tooltiptext"><a href="#" onclick=removeFromDesign("' + id + '");>x</a><br /></span><img id="cypher_container_img' + id + '" onclick=showLogoCommands("' + id + '"); src="' + img.src + '" class="cypher-blocks" style="width:' + w + 'px; height:' + h + 'px" /></div></div>');
$('.cypher-block').append(elem);
elem.draggable({
cancel: ".ui-rotatable-handle"
});
//rotate handles
var nw = $("<div>", {
class: "ui-rotatable-handle"
});
var ne = nw.clone();
var se = nw.clone();
elem.find('.cypher-blocks:first').resizable();
elem.rotatable();
elem.addClass("ui-rotatable-handle-sw");
elem.addClass("ui-rotatable-handle-nw");
elem.addClass("ui-rotatable-handle-ne");
elem.addClass("ui-rotatable-handle-se");
// Assign handles to box
elem.find('.cypher-blocks:first').append(nw, ne, se);
elem.find("div[class*='ui-rotatable-handle-']").bind("mousedown", function(e) {
elem.find('.cypher-blocks:first').rotatable("instance").startRotate(e);
});
}
});
//$("#cypher-branding-main-edit-right-txt-text-wrapper").css('border', '1px dashed #777');
});
.cypher-blocks {
display: inline-block;
width: initial;
cursor: move;
}
.cypher-block {
padding: 10px;
border: none;
margin: 0px;
margin-left: auto;
margin-right: auto;
overflow-x: hidden;
overflow-y: hidden;
background: transparent;
height: 100%;
width: 100%;
}
.cypher-block .ui-resizable-handle,
.cypher-block .ui-resizable-se {
border: none;
background-color: none;
color: none;
background-image: url("")
}
.cypher-block .ui-resizable-handle {}
.cypher-block .ui-rotatable-handle {
background-image: url("")
}
.cypher-block:hover .ui-resizable-handle,
.cypher-block:hover .ui-resizable-se {
border: 1px dotted #fff;
background-color: #f00;
color: #fff;
resize: both;
}
.cypher-block:hover .ui-rotatable-handle {
background: url('cypher-brand/rotate.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 16px;
width: 16px;
position: absolute;
}
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ui.rotatable/1.0.1/jquery.ui.rotatable.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="cypher-block" style="margin-top:20px;"></div>
<div id="cypher-branding-main-edit-right-txt-text-wrapper" style="width:300px;height:170px;padding:0;">
<div id="cypher-branding-main-edit-right-txt-text">Sample Text</div>
</div>
<input type="number" id="cypher-branding-letter-spacing" class="cypher-branding-text-input" value="0" />
<span id="cypher-branding-btn-add-to-design-text" class="cypher-branding-input-btn cypher-branding-command-padding">Add to Product Design</span>
I'm trying to create an image from text, then add it to another div.
The issue is with 'letter-spacing' CSS style.
After applying the CSS, then creating an image using html2canvas, the CSS on the image does not show.
Just to note, all other CSS styles I apply to the div shows, like line-spacing, color, font etc. It's only letter-spacing that is the issue.
I've added a snippet, however it's giving me a 'Script error' this is only when adding the external scripts. Not sure yet on how to resolve it as I'm new to snippets.
You need to set letterRendering:true
html2canvas($("#cypher-branding-main-edit-right-txt-text-wrapper"), {
onrendered: function(canvas) {
var id = guid();
var img = new Image();
img = $('#cypher-branding-text-temp-img').find('img')[0];
img.src = canvas.toDataURL('image/png');
var w = canvas.width;
var h = canvas.height;
//var elem = $('<div id="cypher_container_' + id + '" class="cypher-container"><div id="cypher_container_inner_' + id + '" class="tooltip"><img id="cypher_container_img' + id + '" onclick=showLogoCommands("' + id + '"); src="' + img.src + '" class="cypher-blocks" style="width:' + w + 'px; height:' + h + 'px" /><span class="tooltiptext"><a href="#" onclick=rotatePlus("' + id + '");>Rotate +</a><a href="#" onclick=rotateMinus("' + id + '");>Rotate -</a><a href="#" onclick=removeFromDesign("' + id + '");>Remove</a><br /></span></div></div>');
var elem = $('<div id="cypher_container_' + id + '" class="cypher-container" style="width:100px;"><div id="cypher_container_inner_' + id + '" class="tooltip"><span class="tooltiptext"><a href="#" onclick=removeFromDesign("' + id + '");>x</a><br /></span><img id="cypher_container_img' + id + '" onclick=showLogoCommands("' + id + '"); src="' + img.src + '" class="cypher-blocks" style="width:' + w + 'px; height:' + h + 'px" /></div></div>');
$('.cypher-block').append(elem);
elem.draggable({
cancel: ".ui-rotatable-handle"
});
//rotate handles
var nw = $("<div>", {
class: "ui-rotatable-handle"
});
var ne = nw.clone();
var se = nw.clone();
elem.find('.cypher-blocks:first').resizable();
elem.rotatable();
elem.addClass("ui-rotatable-handle-sw");
elem.addClass("ui-rotatable-handle-nw");
elem.addClass("ui-rotatable-handle-ne");
elem.addClass("ui-rotatable-handle-se");
// Assign handles to box
elem.find('.cypher-blocks:first').append(nw, ne, se);
elem.find("div[class*='ui-rotatable-handle-']").bind("mousedown", function(e) {
elem.find('.cypher-blocks:first').rotatable("instance").startRotate(e);
});
},
letterRendering:true
});
That should work I think.
Based on this Letter-spacing isn't supported

Stick a div underneath thumbnails + limit the width

Alright. This might sound a little bit complicated. I've got a script which fetches thumbnails from a JSON. It fetches 9 thumbnails and onclick of the #load it fetches 9 more. How can I set the Load more button underneath the thumbnails and how to make it stick to the bottom of them each time you click it? ( I do not want it like it's now, on the side, but right in the middle and underneath them ).
+BONUS question: How can I fixate the thumbnails so they always show up 3 in a row. Since now, when I resize the window they change ( as you can see in the fiddle, there's only 2 per row now ).
jsfiddle.net/z6ge55ky/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="twitch">
<script src="js/main.js"></script>
<div id="load">
<img class="hvr-pulse" src="http://i.imgur.com/KHIYHFz.png?1">
</div>
</div>
$(function() {
var i=0;
var twitchApi = "https://api.twitch.tv/kraken/streams";
var twitchData;
$.getJSON(twitchApi, function(json) {
twitchData = json.streams;
setData()
});
function setData(){
var j = twitchData.length > (i + 9) ? (i + 9) : twitchData.length;
for (; i < j; i++) {
var streamGame = twitchData[i].game;
var streamThumb = twitchData[i].preview.medium;
var streamVideo = twitchData[i].channel.name;
var img = $('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"/>')
$('#twitch').append(img);
img.click(function(){
$('#twitch iframe').remove()
$('#twitchframe').append( '<iframe frameborder="0" style="overflow:hidden; margin-left: 25px; width:400px; height:250px; position: fixed; top: 0; margin-top: 23.55%;" src="http://player.twitch.tv/?channel=' + streamVideo + '"></iframe>');
});
}
}
$('#load').click(function() {
setData();
});
});
#twitch {
width: 60%;
position: absolute;
left: 20%;
text-align: center;
}
#twitch img {
border: 5px solid rgba(0,0,0,0);
margin: 0 auto;
cursor: pointer;
}
#load {
bottom: 0;
position: absolute;
}
You have declared the width for #twitch 60% remove that and for #load use top:100%
DEMO on jsfiddle

Change amount from px to percent based

I am trying to create a carousel with a sliding effect. The basic setup is I have 2 div's wrapping around the sliding content. The first div's width (the outerWrapper) is the size of all slides width together. The next div's width (the innerWrapper) is the size of 1 div.
When it's supposed to change slides, the innerWrapper get's a translation of x amount and it animates from the css transition.
I have everything working, but there's one thing I want to change. I want to change from pixel to percent.
Line 29:
innerWrapper.style.transform = 'translateX(-' + imgWidth * targetIndex + 'px)';
I tried a lot of things, but nothing worked. The only thing that worked was targetIndex * 20 + %, but that only works for 5 divs. It's not a concrete solution. How can I make the translateX percentage based?
JSFiddle
var trigger = document.getElementsByClassName('trigger'),
outerWrapper = document.createElement('div'),
innerWrapper = document.createElement('div'),
slide = document.getElementsByClassName('slide'),
parentElm = slide[0].parentNode,
imgWidth = slide[0].offsetWidth,
lastElm = trigger.length - 1,
previousSelectedIndex = 0;
innerWrapper.id = 'innerWrapper';
outerWrapper.id = 'outerWrapper';
trigger[0].className += ' selected';
innerWrapper.style.width = imgWidth * (lastElm + 1) + 'px';
while (slide.length) {
innerWrapper.appendChild(slide[0]);
}
for (var i = 0; i < trigger.length; i++) {
trigger[i].addEventListener('click', function(e) {
clickEvent(e);
})
}
function clickEvent(e) {
if (!hasClass(e.target, 'selected')) {
var targetIndex = [].slice.call(trigger).indexOf(e.target);
innerWrapper.style.transform = 'translateX(-' + imgWidth * targetIndex + 'px)';
e.target.className += ' selected';
removeClass(trigger[previousSelectedIndex], 'selected');
previousSelectedIndex = targetIndex;
}
}
outerWrapper.appendChild(innerWrapper);
parentElm.appendChild(outerWrapper);
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
ele.className = ele.className.replace(reg, ' ');
}
}
#outerWrapper {
float: left;
width: 270px;
height: 266px;
overflow: hidden;
}
#innerWrapper {
position: relative;
display: flex;
transition: transform 0.7s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
ul.triggers li {
float: left;
margin: 0 5px;
font: bold 16px arial;
cursor: pointer;
background-color: #ccc;
padding: 10px;
}
ul.triggers li.selected {
background-color: orange;
}
<img class="slide" width="270" src="http://i.imgur.com/XyWadkY.jpg" />
<img class="slide" width="270" src="http://i.imgur.com/OpP86hg.jpg" />
<img class="slide" width="270" src="http://i.imgur.com/oWbhwWT.jpg" />
<img class="slide" width="270" src="http://i.imgur.com/IXcqVB1.jpg" />
<img class="slide" width="270" src="http://i.imgur.com/OpP86hg.jpg" />
<ul class="triggers">
<li class="trigger">1</li>
<li class="trigger">2</li>
<li class="trigger">3</li>
<li class="trigger">4</li>
<li class="trigger">5</li>
</ul>
Try this,
innerWrapper.style.transform = 'translateX(-' + (targetIndex*(100/document.getElementsByClassName("slide").length)) + '%)';

How to open div as a tooltip in Grid in MVC?

<style>
#hint{
cursor:pointer;
}
.tooltip{
margin:8px;
padding:8px;
border:1px solid white;
background-color:#e2e2e2;
position: absolute;
z-index: 2;
display:none;
border-radius:5px;
}
</style>
#Html.Raw(item.FirstName + " " + item.MiddleName + " " + item.LastName)
<script type="text/javascript">
$(document).ready(function () {
$('.anchorlink').mouseover(function (e) {
var id = $(this).attr("rel");
$('.tooltip').show().html(id);
}).mousemove(function (e) {
$('.tooltip').css('left', (e.pageX - 20) + 'px');
$('.tooltip').css('top', (e.pageY + 20) + 'px');
}).mouseout(function (e) {
$('.tooltip').hide().html('');
});
});
</script>
You need to have the actual tooltip element in your html:
<div class="tooltip"></div>
I think you are missing you <div class="tooltip"></div> inside your html body.

Categories