Optimal method of displaying a lot of data when hovering over icons - javascript

I'm building a website that is going to show a lot of data when hovering over icons (about 2000 icons with different data), and I'm having doubts about what the best approach to do this is.
For a better idea of what I'm doing, I made a very short video - https://i.imgur.com/Ra2De3v.mp4
I'm currently storing all data in a huge PHP array and caching (pre-formatting) the HTML code that is going to be displayed on hover. Here's a snippet of what this looks like for the first icon as shown in the video:
custom_data.php:
'c1' =>
array (
'custom_description_raw' => '{{stat|tears+}} +0.7 tears.',
'costume' => 'Collectible_The_Sad_Onion_appearance.webp',
'keywords' => 'tears',
'pools' => 'treasure 1.0, greedTreasure 1.0, craneGame 1.0',
'tags' => 'summonable tearsup offensive',
'transformations-text' => '',
'mod' => '!vanilla',
'id' => 'c1',
'type' => 'passive',
'gfx' => '/IsaacGuru/core/data/!vanilla/collectibles/collectibles_001_thesadonion.webp',
'achievement' => '',
'cache' => 'firedelay',
'maxcharges' => '',
'chargetype' => '',
'cooldown' => '',
'hidden' => false,
'id-raw' => '1',
'name_key' => 'THE_SAD_ONION_NAME',
'description_key' => 'THE_SAD_ONION_DESCRIPTION',
'type_full' => 'Passive item',
'name' => 'The Sad Onion',
'description' => 'Tears up',
'quality' => '3',
'custom_description' => '<span class=\'sprite-block stat-spritesheet\' style=\'--width: 16px; --height: 9px; --x: -67px; --y: -118px\'></span> <span class=\'sprite-block stat-spritesheet\' style=\'--width: 16px; --height: 16px; --x: -118px; --y: -10px\'></span> +0.7 tears.',
'wiki_link' => 'https://bindingofisaacrebirth.fandom.com/wiki/The Sad Onion',
'html' => '<span class="item-id">#1</span><img src="/IsaacGuru/core/assets/img/quality/wiki-style/3.webp" class="item-quality-icon pixelated" loading="lazy"><p class="item-name">The Sad Onion</p><p class="item-description">"Tears up"</p><p class="item-pools"><span class="isaac-tooltip" data-bs-html="true" data-bs-toggle="tooltip" data-bs-title="Treasure Room<br><em>(weight: 1.0/1.0)</em>"><img src="/IsaacGuru/core/assets/img/item_pools/treasure.webp" class="item-pool-icon pixelated" loading="lazy"></span><span class="isaac-tooltip" data-bs-html="true" data-bs-toggle="tooltip" data-bs-title="Greed Treasure Room<br><em>(weight: 1.0/1.0)</em>"><img src="/IsaacGuru/core/assets/img/item_pools/greedTreasure.webp" class="item-pool-icon pixelated" loading="lazy"></span><span class="isaac-tooltip" data-bs-html="true" data-bs-toggle="tooltip" data-bs-title="Crane Game<br><em>(weight: 1.0/1.0)</em>"><img src="/IsaacGuru/core/assets/img/item_pools/craneGame.webp" class="item-pool-icon pixelated" loading="lazy"></span></p><img src="data:image/webp;base64,UklGRiABAABXRUJQVlA4WAoAAAAQAAAAHwAAHwAAVlA4TKwAAAAvH8AHEDegpm0DJmf5oyqoRUMtJEnQhutP9Z3BKVx4AArZSIIWY9FetDM7mfkPABC/zyL98UxO4KiRJEeqZtC17j+9Q2C1CM4BOB2Cdc2fw0l1FkBE/ycA/9H5CmmaL8k3uAlgDka+wGUwZUmm4kvmkoTIzIUmLfvSKX6qUc9USkSEwqZEsDGhe+oEn8auzoRwH0t5KOAtzr0pzmtHyCRNcpKQDQ6T4AbXDP8bUFNBSU4AAAA4QklNA+0AAAAAABAASAAAAAEAAQBIAAAAAQABOEJJTQQoAAAAAAAMAAAAAj/wAAAAAAAAOEJJTQRDAAAAAAANUGJlVwEQAAUBAAAAAAA=" class="item-icon-in-description pixelated" alt="The Sad Onion"><p class="item-type">Passive item</p><hr><p class="item-contents"><span class=\'sprite-block stat-spritesheet\' style=\'--width: 16px; --height: 9px; --x: -67px; --y: -118px\'></span> <span class=\'sprite-block stat-spritesheet\' style=\'--width: 16px; --height: 16px; --x: -118px; --y: -10px\'></span> +0.7 tears.</p><hr><p class="item-tags-title">- Tags -</p><p class="item-tags"><span class="isaac-tooltip" data-bs-html="true" data-bs-toggle="tooltip" data-bs-title="<span class=\'tooltip-tag-name\'>summonable</span><hr class=\'quick-hr\'>Can be summoned via <a href="/IsaacGuru/tags/summonable"><img src="/IsaacGuru/core/assets/img/item_tags/summonable.webp" class="item-tag-icon pixelated" loading="lazy"></span><span class="isaac-tooltip" data-bs-html="true" data-bs-toggle="tooltip" data-bs-title="<span class=\'tooltip-tag-name\'>tearsup</span><hr class=\'quick-hr\'>Contributes towards unlocking <a href="/IsaacGuru/tags/tearsup"><img src="/IsaacGuru/core/assets/img/item_tags/tearsup.webp" class="item-tag-icon pixelated" loading="lazy"></span><span class="isaac-tooltip" data-bs-html="true" data-bs-toggle="tooltip" data-bs-title="<span class=\'tooltip-tag-name\'>offensive</span><hr class=\'quick-hr\'>Can appear for <b>Tainted Lost</b>."><img src="/IsaacGuru/core/assets/img/item_tags/offensive.webp" class="item-tag-icon pixelated" loading="lazy"></span></p><p class="item-tags-title">- Links -</p><p class="item-tags"><img src="/IsaacGuru/core/assets/img/custom/wiki.png" class="item-tag-icon pixelated" loading="lazy"><p class="item-tags-title">- Costume -</p><p class="item-tags"><img src="/IsaacGuru/core/assets/img/costumes/Collectible_The_Sad_Onion_appearance.webp" class="item-costume pixelated" loading="lazy"></a></p>',
'unlock' => NULL,
'wiki' => NULL,
'custom_pools' => NULL,
'chargetext' => NULL,
'youtube' => NULL,
'weight-bar' =>
array (
'treasure' => '<div class="weight-bar"><div style="--weight: 100%; --weight-color: lime"></div><center>1.0 / 1.0</center></div>',
'greedTreasure' => '<div class="weight-bar"><div style="--weight: 100%; --weight-color: lime"></div><center>1.0 / 1.0</center></div>',
'craneGame' => '<div class="weight-bar"><div style="--weight: 100%; --weight-color: lime"></div><center>1.0 / 1.0</center></div>',
'zodiacBeggar' => '<div class="weight-bar"><div style="--weight: 100%; --weight-color: lime"></div><center>1.0 / 1.0</center></div>',
),
'custom_gfx' => NULL,
'guru-id' => 0,
'custom_gfx_raw' => NULL,
'custom_transformations' => NULL,
'main-type' => 'item',
'synergies_raw' => NULL,
'synergies' =>
array (
),
'icon-size' => '1',
'sounds' => NULL,
'gfx-uri' => 'data:image/webp;base64,UklGRiABAABXRUJQVlA4WAoAAAAQAAAAHwAAHwAAVlA4TKwAAAAvH8AHEDegpm0DJmf5oyqoRUMtJEnQhutP9Z3BKVx4AArZSIIWY9FetDM7mfkPABC/zyL98UxO4KiRJEeqZtC17j+9Q2C1CM4BOB2Cdc2fw0l1FkBE/ycA/9H5CmmaL8k3uAlgDka+wGUwZUmm4kvmkoTIzIUmLfvSKX6qUc9USkSEwqZEsDGhe+oEn8auzoRwH0t5KOAtzr0pzmtHyCRNcpKQDQ6T4AbXDP8bUFNBSU4AAAA4QklNA+0AAAAAABAASAAAAAEAAQBIAAAAAQABOEJJTQQoAAAAAAAMAAAAAj/wAAAAAAAAOEJJTQRDAAAAAAANUGJlVwEQAAUBAAAAAAA=',
'animated' => false,
'death-icon-file' => '/IsaacGuru/core/assets/img/items/death_icons/vanilla_death_items.webp',
'death-icon-column' => '1',
'death-icon-row' => '1',
'death-icon-file-raw' => 'vanilla_death_items.webp',
),
And to display this information I use a simple Ajax load directly inside the description box:
$(".item-container").on("mouseover", ".item-icon-container", function()
{
$("#desc").load(directory + "/core/includes/ajax/desc.php?item=" + encodeURIComponent($(this).attr('itemid')), function()
});
desc.php:
require_once('../../../core/includes/custom_data.php');
echo $itemsArray[$_GET['item']]['html'];
Currently everything is working fine but I'm only testing this locally on a powerful machine, and I have doubts about its performance on an actual hosted website, especially since the PHP array file currently sits at 15 MB with nearly 100.000 lines of code.
Would it be better to use JSON and load the entire file directly in JS when the page loads, or pull from a JSON array via Ajax, or some other Ajax method?
Is caching the HTML code a good idea or should I just pass the smaller details and do all the formatting directly in the JS script?
Is it better to use data URI for displaying small icons, especially when there can be a lot of them on a single mouse hover (up to 50 at most), or should I just use a normal "src" path?
Thanks in advance!

Related

Yii2 Modal close button not working with JQuery 3.6.0

I just updated my JQuery.js to version 3.6.0 and all of a sudden some of my functions stopped working, eg my modal close buttons don't work anymore. I am using Yii2 ver2.0.45. I was previously using JQuery 3.4.4 which was working very well. Any suggestions/solutions will be appreciated. Here is my modal code block.
<?php
Modal::begin([
'title' => '<h4></h4>',
'id' => 'modal',
'titleOptions' => [
'style' => 'background: rgba(0, 0, 0, 0.5)',
],
'closeButton' => [
'class' => 'btn btn-danger btn-xs pull-right',
],
'options' => [
'tabindex' => false // important for Select2 to work properly
],
'size' => 'modal-lg',
// keeps from closing modal with esc key or by clicking out of the modal
// user must click cancel or X to close
'clientOptions' => ['backdrop' => 'static', 'keyboard' => false],
]);
$contentDiv = "<div id='content'></div>";
echo $contentDiv;
Modal::end();
?>

Yii2 fullcalendar not show events before 09:00:00 in calendar

I have a yii2 project and i would like show events in calendar.
Yii2 fullcalendar not show events before 09:00:00, but after all good.
After 09:00:00 all good.
I'll show you my code, which works fine.
Thank you for your help.
echo yii2fullcalendar\yii2fullcalendar::widget(array(
'options' => [
'lang' => 'hu',
],
'events' => $events,
'clientOptions' =>[
'header' => [
'right'=>'month,agendaWeek'
],
'displayEventTime' => false,
'height' => 'auto',
'minTime' => '06:00:00',
'maxTime' => '20:00:00',
'html' => true,
'eventClick' => new \yii\web\JsExpression($JSEventClick),
'eventRender' => new \yii\web\JsExpression($JSEventRender),
],
));
$events array:
Array
(
[0] => yii2fullcalendar\models\Event Object
(
[id] => 1
[title] => TEST TITLE
[allDay] => 2020-03-23 08:30:00
[start] => 2020-03-23 08:30:00
[end] => 2020-03-23 9:30:00
)
}

Functions.php Wordpress syntax error

I'm implementing Wordpress (from scratch) in a custom design and I'm having some issues with the functions.php file.
I don't have any plugins added to my website that current hosted locally with MAMP.
There are three parts of the code: one to create custom size of thumbnails, another to fix a media library error and another to create 3 different sidebar widgets.
I added the first two sections (thumbnail + media library) and everything worked fine, but after adding the last part (sidebar) the media library doesn't work again. When deleting the sidebar code, the media library works again. So these three parts are interfering and canceling each other out somehow.
I'm pretty sure my mistake is of syntax... Here is the full code:
<?php
// Add custom size of thumbnails
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true ); // default Post Thumbnail dimensions (cropped)
add_image_size( 'another-size', 600, 400 ); // Not Cropped (additional sizes) size doesn't matter because we're adding "full"
}
// Fixes Media Library error (without this it's not possible to add images or manage it – it just appears empty)
function ms_image_editor_default_to_gd( $editors ) {
$gd_editor = 'WP_Image_Editor_GD';
$editors = array_diff( $editors, array( $gd_editor ) );
array_unshift( $editors, $gd_editor );
return $editors;
}
add_filter( 'wp_image_editors', 'ms_image_editor_default_to_gd' );
?>
<?php
// Created three different sidebars and allows user to edit their content as widgets
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'column 1',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>'
));
register_sidebar(array(
'name' => 'column 2',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>'
));
register_sidebar(array(
'name' => 'column 3',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>'
));
}?>
Try this, maybe you should use only one <?php ?> section
<?php
// Add custom size of thumbnails
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true ); // default Post Thumbnail dimensions (cropped)
add_image_size( 'another-size', 600, 400 ); // Not Cropped (additional sizes) size doesn't matter because we're adding "full"
}
// Fixes Media Library error (without this it's not possible to add images or manage it – it just appears empty)
function ms_image_editor_default_to_gd( $editors ) {
$gd_editor = 'WP_Image_Editor_GD';
$editors = array_diff( $editors, array( $gd_editor ) );
array_unshift( $editors, $gd_editor );
return $editors;
}
add_filter( 'wp_image_editors', 'ms_image_editor_default_to_gd' );
// Created three different sidebars and allows user to edit their content as widgets
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'column 1',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>'
));
register_sidebar(array(
'name' => 'column 2',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>'
));
register_sidebar(array(
'name' => 'column 3',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>'
));
}?>

Symfony 2 - Dynamically hide field based on selection in another field

I've searched a lot, but can't find the answer to this rather simple question:
In Symfony 2.8 I have a form, that renders a country field. Based on it's selection I want to display a zipcode and federalstate field only for the choice 'Deutschland' (data 'D'). Here is the code for the country-field:
->add('nationveranstaltungsort', ChoiceType::class, array(
'choices' => array(
'D' => 'Deutschland',
'AFG' => 'Afghanistan',
//many other countries following
),
'data' => 'D',
'label' => 'Nation Tagungsstätte'))
it's prepopulated with the Choice 'Deutschland', data 'D'.
based on that i want to dynamically display:
->add('plzveranstaltungsort', TextType::class, array('label' => 'PLZ', 'attr' => array('size' => '5', 'maxlength' => '5')))
->add('bundeslandveranstaltungsort', ChoiceType::class, array(
'choices' => array(
0 => ' ',
1 => 'Baden-Württemberg',
2 => 'Bayern',
3 => 'Berlin',
4 => 'Brandenburg',
5 => 'Bremen',
6 => 'Hamburg',
7 => 'Hessen',
8 => 'Mecklenburg-Vorpommern',
10 => 'Nordrhein-Westfalen',
11 => 'Rheinland-Pfalz',
12 => 'Saarland',
13 => 'Sachsen',
14 => 'Sachsen-Anhalt',
15 => 'Schleswig-Holstein',
16 => 'Thüringen',
),
'data' => 0,
'label' => 'Bundesland Tagungsstätte'))
If "Deutschland" is not selected, I simply want to hide/disable these fields (and handle the null value somewhere else).
I tried http://symfony.com/doc/current/form/dynamic_form_modification.html and some other javascript stuff, but as I basically don't know any JS, I couldn't find any proper resources.
Since by default the nationveranstaltungsort field has Germany selected, then there is no need to hide plzveranstaltungsort. You can hide in Javascript by using something like:
var bund = document.getElementById("bundeslandveranstaltungsort");
bund.style.display = "none";
Then to show the element use:
bund.style.display = "inline";
Depending on what css you are using, you might need to use:
bund.style.display = "block";
In you form you can specify an attribute to run a Javascript function on change like so:
->add('nationveranstaltungsort', ChoiceType::class, array(
'choices' => array(
'D' => 'Deutschland',
'AFG' => 'Afghanistan',
),
'data' => 'D',
'label' => 'Nation Tagungsstätte',
'attr' => array(
'onchange' => 'changeCountry()',
),
))
Then in the Javascript function changeCountry() hide the element or show it using the above.
The ids I show are not actually what you will use, but if you use the browser tools, for example in Firefox (I suggest using FireFox for testing), you can right-click on the choice element and choose "Inspect element"; then you can see what the "actual" id value is that you need to use. It depends on your Form name.

Retrieve data in Select Option in Edit Page

I'm using Laravel 4. I'm having some problem. I have a users table with fields like. State, Region, Area and City, they are all in string (varchar).
Now, I have my "Edit Users" page. In edit users how can I display the users info ing State, Region etc. in a Select Dropdown? Here's my code.
{{ Form::select('state', array(
'' => 'Choose One', 1 => 'Luzon', 2 => 'Visayas', 3 => 'Mindanao'),
null,
array('class' => 'selectpicker',
'id' => 'state',
'data-live-search' => 'true',
'onchange' => 'document.getElementById("state2").value=this.options[this.selectedIndex].text'
));
}}
How can I make a value for that specific user already appeared or selected in the dropdown?
Thanks!
See if this works for you:
$states = array( 'Choose One', 'Luzon', 'Visayas', 'Mindanao' );
{{ Form::select('state',
$states,
array_search($user->State, $states ), // default value
array(
'class' => 'selectpicker',
'id' => 'state',
'data-live-search' => 'true',
'onchange' => 'document.getElementById("state2").value=this.options[this.selectedIndex].text'
));
}}

Categories

Resources