I am working on a game and I want to create tooltip for items, there is alot of them and player can possibly store 100 or more items. I want each of them to display stats in tooltip, without any delay when hovering. I am using basic html data-toogle I believe or maybe its part of bootstrap I dont know.
html += '<img src="images/items/' + playerInventory[i].subType + "/" +
playerInventory[i].image + '.png" "data-toggle=" "tooltip" title="'
html += "You will gain:"
html += '\n'
html += "Item Type: " + playerInventory[i].subType + '\n'
if (playerInventory[i].minDamage > 0 && playerInventory[i].maxDamage > 0) {
html += "Min Damage: " + (playerInventory[i].minDamage - itemStat.minDamage) + '\n'
html+= "Max Damage: " + (playerInventory[i].maxDamage - itemStat.maxDamage) + '\n'
}
The problem is that I want to change the way this pop up window appear, I want to remove delay, change colors/font etc. I am using javascript only and so far I found most if not all answer in jquery which does not help me at all.
Related
I am reading data from a javascript file and then importing them into the HTML file. The issue I am having is that I am unable to get my p tags and h3 tags in my section tag. This is what it looks like when I load it up:
The following code is what I have tried. I have used inner HTML to create the tags and I am not sure what I can do to fix this.
// create a box class section for whole thing
containerElement.innerHTML += "<section class='flight-info'> ";
// another class for top part of box
containerElement.innerHTML += "<div class='topBox' ";
// add all the elements such as destination and code
containerElement.innerHTML += "<h3 class='destination'> " + FlightInfo[i].destination + " </h3>";
containerElement.innerHTML += "<p class='departTime'> Depart time: " + FlightInfo[i].departTime + " </p>";
// have to check for # of stops to format. if its not 0, we can add the # of stops and time, otherwise its Non-stop, time
if (FlightInfo[i].stops != 0) {
containerElement.innerHTML += "<p class='timeStop'>" + FlightInfo[i].stops + ", " + FlightInfo[i].time + " min </p>";
} else if (FlightInfo[i].stops == 0) {
containerElement.innerHTML += "<p class='timeStop'> Non-Stop" + ", " + FlightInfo[i].time + " min </p>";
}
// end the topBox class
containerElement.innerHTML += "</div>"
containerElement.innerHTML += "</section>"
It's because you keep adding everything to the container.
containerElement.innerHTML +=
You only need the code above one time (at least the way you're doing it now), and add everything in one long string.
Otherwise, add the section, then select the section and add everything to the section's innerHTML. Same idea with the div.
I'm working on a .NET Core project for my company where work orders are loaded from our SQL database using Entity Framework, filtered and then displayed as markers on a map through Google Maps API for our installers.
We have two types of filters: one that gets included in an Ajax POST, and one that filters locally to decrease load times and performance issues. What I'm trying to do is load the local filter items (lists that are included in the response when calling the initial Ajax POST). If the list of filter items exceeds 5 items, I want them to collapse to only 5 items and insert an anchor which expands (utilizes jQuery's toggle()) showing the rest of the items in that list.
This is the excerpt from the JavaScript function which takes care of that:
filterItems
.forEach((filterItem, i) => {
var localItem = '<label class="' + selectorContainerClass
+ ' selectorContainer" id="' + selectorContainerIdPrefix + filterItem.key
+ '"><input id="' + convertValToEng(filterItem.value)
+ '" type = "checkbox" class="filled-in navy" name="' + inputName
+ '" value="' + filterItem.key
+ '" onchange="localFilter(this, this.value)" /><span class="selector-value">'
+ filterItem.value
+ '</span> <span id="' + paramName + 'Cnt__' + filterItem.key
+ '" class="selector-count"></span></label ><br />';
document.querySelector("#" + colId).insertAdjacentHTML('beforeend', localItem);
if (i >= 5) {
$("#" + colId + " #" + selectorContainerIdPrefix + filterItem.key).addClass("collapse");
$("#" + colId + " #" + selectorContainerIdPrefix + filterItem.key).toggle(100);
$("#" + colId + " #" + selectorContainerIdPrefix + filterItem.key + " + br").toggle(100);
}
});
if (filterItems.length > 5) {
//TODO: Fix the bug here; the .filter-collapse element is not being inserted under local installers.
var newEl = '<a class="filter-collapse" onclick="toggleFilterExpand(false, this)";><i class="material-icons">expand_more</i></a>';
document.getElementById(colId).insertAdjacentHTML('beforeend', newEl);
}
I should be getting a newEl inserted under the "Installer" column (8 installers, 3 of them not being displayed), but I'm not. I've tried jQuery's after() and insertAfter() methods, but neither of those worked. newEl is being generated for the "Area" column, as it should, but for the "Installer" column it's not.
I've also tried inserting the element manually through the console window with the exact same code and it works.
Would appreciate some help with this as I feel lost regarding this issue.
Thanks.
It turned out to be a stupid mistake on my end where I was removing the element newEl from the all the other filter lists before inserting a new one to the currently iterated one.
I'm writing my first code in an interactive/follow-along program through Cengage (MindTap). The program is instructing me to "write the HTML code for the inline element showing the sky image to use in the webpage." I am supposed to create a variable named imgStr that stores this text string:
<img src='sd_skyMap.png' />
Where Map is the value of the mapNum variable (there are 23 files titled sd_sky0, sd_sky1, sd_sky3 and so fourth). It says to use the + operator to combine text strings together and to include single-quote characters within the text strings.
I cannot get the sky images to appear on the webpage to save my life.
I've attempted going through a tutor provided through my university but have still have no luck getting the image to display.
var imgStr = "<img src='sd_sky0 + sd_sky1 + sd_sky2 + sd_sky3 +
sd_sky4 + sd_sky5 + sd_sky6 + sd_sky7 + sd_sky8 + sd_sky9 +
sd_sky10 + sd_sky11 + sd_sky12 + sd_sky13 + sd_sky14 + sd_sky15
+ sd_sky16 + sd_sky17 + sd_sky18 + sd_sky19 + sd_sky20 +
sd_sky21 + sd_sky22 + sd_sky23' + mapNum + '.png' />";
document.getElementById("planisphere").insertAdjacentHTML() = imgStr;
Having inserted the code into jshint.com, it stated one warning and one unused variable.
(Bad assignment.)
document.getElementById("planisphere").insertAdjacentHTML() = imgStr;
and mapNum is an unused variable.
InsertAdjacentHTML takes two strings as parameters.
The first parameter is the position which takes one of four static values.
The second parameter is your HTML string to be inserted.
An example for what you want could be:
document.getElementById("planisphere").insertAdjacentHTML('afterbegin', imgStr);
You were nearly there, just append beforeend using the document.insertAdjacentHTML()
const imgStr = `<img src='sd_sky0 + sd_sky1 + sd_sky2 + sd_sky3 +
sd_sky4 + sd_sky5 + sd_sky6 + sd_sky7 + sd_sky8 + sd_sky9 +
sd_sky10 + sd_sky11 + sd_sky12 + sd_sky13 + sd_sky14 + sd_sky15
+ sd_sky16 + sd_sky17 + sd_sky18 + sd_sky19 + sd_sky20 +
sd_sky21 + sd_sky22 + sd_sky23' + mapNum + '.png' />`;
document.getElementById("planisphere").insertAdjacentHTML('beforeend', imgStr);
<div id = "planisphere">
</div>
There are two problems on your code, the first is you need to run trough the different image files and add each one separately. On the code you provided, all image's names are being combined as one.
The second problem is your use of the insertAdjacentHTML() function. The function expects as arguments the position of the new tag and the tag itself, none is being passed. Check here for a better explanation.
Assuming you have n images that you want to add as n tags, you can try something like this:
// variable to hold the total number of images used
var numberOfImages = 23;
// we loop trough all images, where i will count from 0 to numberOfImages
for (var i = 0; i < numberOfImages; i++) {
// on each step of the loop we add a new img tag with sd_skyi as source
document.getElementById("planisphere")
.insertAdjacentHTML('afterend', "<img src='sd_sky" + i + ".png' />")
}
If you use this exerpt as is, it will add 23 img tags to an element with id planisphere.
I am using lazy load plugin (jquery.lazyload.js) and I try to get the image size that it loads.
So in the display part I have:
echo '<img #img id="img-' . $i . '" name="' . $filename . '" class="lazy" data-original="'.$image.'" />';
Java Script:
<script type="text/javascript">
displaysize(img) {
console.log(img.clientWidth, img.clientHeight);
}
</script>
<script src="js/rectangle3.class.js"></script>
HTML:
<div id="imgsize">
<p id='imgsize-debug'></p>
<button id='map-download-btn' onclick='displaysize();'>Image size:</button>
<div id='imagesize'></div>
</div>
The image display is ok but when I add displaysize(img) function to the script and button, the page keep loading. I will need to get image size for calculation in my java script file,
document.getElementById("rectRecord-" + this.rectPointer).innerHTML =
"Rectangle " + (this.rectPointer + 1) + " ("
+ this.startX + ", "
+ this.startY + ", "
+ this.endX + ", "
+ this.endY + ")"
need to change to:
document.getElementById("rectRecord-" + this.rectPointer).innerHTML =
"Rectangle " + (this.rectPointer + 1) + " ("
+ (this.startX)/width + ", "
+ (this.startY)/height + ", "
+ (this.endX-this.startX)/width+" , "
+ (this.endY-this.startY)/height +""
As I said in the comments, you need to pass the image to the function in order to fetch the width/height. In this example you can click the image to get the size.
In order to use a button you would need to use a selector to target the right image you want the dimensions of.
function displaysize(img) {
console.log(img.clientWidth, img.clientHeight);
}
$(function() {
$("img.lazy").lazyload();
$(document).on('click', '.lazy', function() {
displaysize($(this)[0]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.js"></script>
<img class="lazy" data-original="http://appelsiini.net/img/bmw_m1_hood.jpg" />
Where is the display size button relative to your lazy loaded image?
Does each lazy load image have a display size button or is there only one lazy loaded image?
Your problem is that your displaysize method which uses a parameter called img but you do not pass any parameter when you call the function on click.
So you need to pass something to that display size method which will point it to the correct image.
Of your image is like this relative to your button:
<img id="lazyLoadedImage" />
<div id="imgsize">
<p id='imgsize-debug'></p>
<button id='map-download-btn' onclick='displaysize("lazyLoadedImage");'>Image size:</button>
<div id='imagesize'></div>
</div>
displaysize(imgID) {
console.log(document.getElementById(imgID).width + ","+ document.getElementById(imgID).height);
}
If you do not have a static set up like this depending on the questions i asked at the beginning here you will have to adjust this code. However whatever the case you will be able to do this by passing an actual reference of the image you would like to inspect to your display image size method.
According to lazy loading plugin site you need to set image dimensions before loading the image:
PRO TIP! You must set image dimensions either as width and height attributes or in CSS. Otherwise plugin might not work properly.
I see you are using PHP, so you can try to set width and height as advised in this answer.
You can also add an id to your images to make the javascript call from the button easier.
Finnaly I managed to find the width and height of the image since it is parent of the rectangular I created inside. So in the javascript file I will use:
var options = {
width: $('#' + rectangles[rectPointer].rectangleDiv.id).parent().width() + 1,
height: $('#' + rectangles[rectPointer].rectangleDiv.id).parent().height() - 3
};
Then width and height get from:
(options.width ||rectangles[rectPointer].startX) + " "
options.height ||rectangles[rectPointer].startY
then for my calculation:
Rectangle.prototype.updatePosition = function (data, options) {
this.startX = data.newStartX;
this.startY = data.newStartY;
this.endY = parseFloat(this.startY) + parseFloat(this.rectangleDiv.style.height);
this.endX = parseFloat(this.startX) + parseFloat(this.rectangleDiv.style.width);
console.log("END: "
+ parseFloat(this.startY) + parseFloat(this.rectangleDiv.style.height) + " - " + parseFloat(this.startX) + parseFloat(this.rectangleDiv.style.width));
document.getElementById("rectRecord-" + this.rectPointer).innerHTML =
"Rectangle " + (this.rectPointer + 1) + " ("
+ (options.width || this.startX) + ", "
+ (options.height || this.startY) + ", "
+ (this.startX)/(options.width || this.startX) + ", "
+ (this.startY)/(options.height || this.startY) + ")"
;
Thanks all for your help ! I have credited up points for all but couldn't accept as answer since it doesn't really be used to solve my issue.
I need help with a little script ...
when i append content and drigger create tho content is loaded...
but then when i use $('#set').empty(); for the second time the content is loaded but no JQM style is added (just plain text)
i have read about this problem but i dont find any solution ... i guess that $('#set').collapsibleset('refresh');as it should... any idea ?
thanks
var content ="<div data-role='collapsible' id='set" + i + "'><h3>Sectionit " + i + "</h3><p>I\'m collapsible number ' + i + '</p></div>";
$('#set').append(content).trigger("create");
$('#set').collapsibleset('refresh');
Instead of
var content ="<div data-role='collapsible' id='set" + i + "'><h3>Sectionit " + i + "</h3><p>I\'m collapsible number ' + i + '</p></div>";
$('#set').append(content).trigger("create");
$('#set').collapsibleset('refresh');
try
$('#set').empty();
var content ="<div data-role='collapsible' id='set" + i + "'><h3>Sectionit " + i + "</h3><p>I\'m collapsible number ' + i + '</p></div>";
$('#set').append(content);
$('#set').collapsibleset().trigger("create");
In this way you only call trigger('create') once after all content has been added.
Here is a DEMO