#StackBounty: #javascript #html Make a div visible on full screen of another div

Bounty: 100

I made an element take full screen by using the below method:

if (element.requestFullscreen) {
  element.requestFullscreen();
} else if (element.msRequestFullscreen) {
  element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
  element.webkitRequestFullscreen();
} else {
  return;
}

It works well but I want to show another element when on the fullscreen mode.

The other element has position: fixed and z-index: 999999999 but it’s not visible when on fullscreen mode.

Could anyone help me, please?

Below is the link to the example

https://stackblitz.com/edit/web-platform-z1phjd?file=index.html

So I want to show the blue element when the red element is full screen sized.


Get this bounty!!!

#StackBounty: #html #visual-studio-code How Launch Multiple HTML files in Visual Studio Code?

Bounty: 50

I am trying to launch HTML multiple files in the same folder, and open them in Chrome (not a new window with every file) in Visual Studio Code. I tried this solution: Multiple Launch Files in Visual Studio Code, but I think, I am missing something.

I always get the message to close my current debug session before starting a new one.

Here is my launch.json file for the folder:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [

        {
            "name": "Chrome1",
            "request": "launch",
            "type": "pwa-chrome",
            "webRoot": "${workspaceFolder}",
            "file":"${file}"
        },
        {
            "name": "Chrome2",
            "request": "launch",
            "type": "pwa-chrome",
            "webRoot": "${workspaceFolder}",
            "file": "${file}"
        },
        {
            "name": "Chrome3",
            "request": "launch",
            "type": "pwa-chrome",
            "webRoot": "${workspaceFolder}",
            "file": "${file}"
        }
    ],
        "compounds": [
            {
              "name": "Chrome1/Chrome2/Chrome3",
              "configurations": ["Launch Chrome","Launch Chrome","Launch Chrome"],
              "preLaunchTask": "${defaultBuildTask}"
            }
        ]
}

Thanks!


Get this bounty!!!

#StackBounty: #javascript #html #canvas #html5-canvas #fabricjs FabricJS Alternating between canvas elements?

Bounty: 50

Let’s say I have two canvas elements:

<canvas id="c1" width="400" height="300"></canvas>
<canvas id="c2" width="400" height="300"></canvas>
<canvas id="c3" width="400" height="300"></canvas>

From looking at the docs, it tells me that I can use this to convert the canvas into a FabricJS canvas.

var c = new fabric.Canvas('c1', {
    preserveObjectStacking: true,
    isDrawingMode: false
});

Now, if I wanted to do something with this new canvas, adding a circle for instance, I could use this function:

function AddCircle() {
  var object = new fabric.Circle({
      radius: 15,
      fill: 'blue',
      left: 100,
      top: 100
  });
  c.add(object);
}

Now, this is all well and good for c1 but c2 and c3 won’t do anything because it’s never being initialized. So is it possible to alternate between FabricJS canvas elements?

I’d like the functionality to be similar to activeCanvas.add(object) instead of just c.add(object).

Before you respond, please note that I’m well aware that I could just use the same method for the c2 element, but I’d like to alternate between canvas elements instead as I have something planned for that.


Get this bounty!!!

#StackBounty: #javascript #java #html #safari Html report opened in Safari from Java application displays as if Javascript not enabled

Bounty: 200

I have a Java application that as part of it’s output creates an html report ,then opens the html reports in users browser. On Firefox and Google Chrome this works but on Safari it opens the report as if Javascript was not enabled, even though it is. However if you reopen the report by clicking on a link from another webpage (which lists all reports) then it opens fine in Safari.

What do I need to do to trigger Safari to open the report with Javascript enabled.

Console shows some errors, but I dont understand them

enter image description here

This is related issue https://apple.stackexchange.com/questions/361245/safari-kcferrordomaincfnetwork-error-1-on-local-html-files but doesn’t provide a satisafactory answer.

Actually the answer here https://apple.stackexchange.com/questions/366448/safari-giving-kcferrordomaincfnetwork-error-303-when-visiting-a-site about removing my site from Preferecnes:Privacy works but that is no good because the problem occurs on new computer after running the program only a few times so would have to continually do it.


Get this bounty!!!

#StackBounty: #org-mode #org-export #latex #html #pdf The export of external links in org files to pdf and html files

Bounty: 50

I have a problem with the export of external links in org files to pdf and html files.

Let’s say I have the two org files in the same directory:

file1.org =

here is the label of file1:  <<label>>

and file2.org =

go to the label of file1: [[file:./file1.org::label]]

After exporting: Both links of file2.html and file2.pdf don’t work.

Both variables org-latex-prefer-user-labels and org-html-prefer-user-labels are t. So the labels are constructed with the correct name (also correct format?):

In file1.html:

here is the label of file1:  <a id="label"></a>

In file1.tex:

here is the label of file1:  label{label}

In file2.html:

go to the label of file1: <a href="./file1.html#MissingReference">./file1.html#MissingReference</a>

The linked file is here correct (file1.html) but the label isn’t found.

In file2.tex:

go to the label of file1: url{./file1.org}

The org file is linked not the pdf file. So even the linked file is here wrong.

What I’ve tried is using the CUSTOM_ID as label. This works perfectly with the html export but not with the pdf export. And I prefer the <<..>> labels because they are more flexible.

Any Idea to solve the problem? Should I use another link format?
(Org version: 9.4.4)


Get this bounty!!!

#StackBounty: #html #css #sass #font-face SASS: Search folders within folder and target all files

Bounty: 50

I previously had the following folder structure for fonts:

theme
  assets
    src
      fonts
        font-bold.eot
        font-bold.svg
        font-bold.otf
        font-bold.woff
        font-bold.woff2
        font-bold.ttf
        font-medium.eot
        ...

However, now I want to clean up the fonts folder, so have now got the following:

theme
  assets
    src
      fonts
        font-bold
          font-bold.eot
          font-bold.svg
          font-bold.otf
          font-bold.woff
          font-bold.woff2
          font-bold.ttf
        font-medium
          font-medium.eot
          ...

I have basically grouped the fonts into folders.

Now, in my font-face, I’m trying to search through each folder and generate the font family, but I’m currently a 404 error, full message:

/theme/assets/fonts/**/ net::ERR_ABORTED 404 (Not Found)

@each $key, $val in $font-families {
  @font-face {
    font-family: #{$key};
    src:  url('../../fonts/**/#{$val}.eot');
    src:  url('../../fonts/**/#{$val}.eot?#iefix') format('embedded-opentype'),
          url('../../fonts/**/#{$val}.woff') format('woff'),
          url('../../fonts/**/#{$val}.woff2') format('woff2'),
          url('../../fonts/**/#{$val}.ttf') format('truetype'),
          url('../../fonts/**/#{$val}.svg#sansationregular') format('svg');
    font-style: normal;
    font-display: swap;
  }
}

Does ** not work in this sense as it does when importing files? or am I missing something?

Edit:

I have the following set-up in my mixin:

$font-families: (
  'lemonmilk-regular': 'lemonmilk-regular/lemonmilk-regular',
  'lemonmilk-light': 'lemonmilk-light/lemonmilk-light',
  'lemonmilk-medium': 'lemonmilk-medium/lemonmilk-medium',
  'lemonmilk-bold': 'lemonmilk-bold/lemonmilk-bold',
);

@each $key, $val in $font-families {
  @font-face {
    font-family: #{$key};
    src:  url('../../fonts/#{$val}.eot');
    src:  url('../../fonts/#{$val}.eot?#iefix') format('embedded-opentype'),
          url('../../fonts/#{$val}.woff') format('woff'),
          url('../../fonts/#{$val}.woff2') format('woff2'),
          url('../../fonts/#{$val}.ttf') format('truetype'),
          url('../../fonts/#{$val}.svg#sansationregular') format('svg');
    font-style: normal;
    font-display: swap;
  }
}

Some of fonts seem to be showing up on the front end, but I also get a batch of 404 errors on the font files even though they exist?

enter image description here


Get this bounty!!!

#StackBounty: #wordpress #html #moodle WordPress+HTML -> Moodle

Bounty: 50

One has a site with a lot of (a lot of a lot of) pages in HTML. The pages are managed through WordPress and includ motions, different fonts, videos, images, etc., ie, are elaborated pages.

Because of the Moodle is more usable, it is convenient to migrate for Moodle for continuing posting pages. However, is not good (1) Have two domains (the initial site and the moodle) nor (2) Make a PDF or other repository of the initial pages, as it would lose interactivity etc.

So, there is a manner to migrate HTML pages in automatically for Moodle (I mean, not one to one) with the minimun lose?

Thank you in advance.


Get this bounty!!!

#StackBounty: #html #css #scrollbar #chromium #web-component Stop a -webkit-scrollbar-track appearing on top of other content when over…

Bounty: 300

I have a set of styles that create a slim overlay scrollbar for Chromium/Webkit using -webkit-scrollbar-track (fallbacks in FX don’t have this issue), something like:

#wrapper {
  height: 125px;
  display: flex;
}

.slim-scroll {
    flex: 1;
    overflow-y: overlay !important;
    padding-right: calc(8px * 1.5);
}

    .slim-scroll::-webkit-scrollbar-track
    {
    }
        .slim-scroll:hover::-webkit-scrollbar-track { 
            -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
            box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
            background: grey; 
        }

    .slim-scroll::-webkit-scrollbar
    {   
        height: 8px;
        width: 8px;
        background: none;
        -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.1);
        box-shadow: inset 0 0 8px rgba(0,0,0,0.1);
    }

    .slim-scroll::-webkit-scrollbar-thumb
    {
        background: black;
    }
        .slim-scroll:hover::-webkit-scrollbar-thumb { background: red; }
<div id="wrapper">
  <div class="slim-scroll">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt risus eros, non fermentum quam lacinia eu. In nec nibh ipsum. Nunc sollicitudin lectus sed leo euismod, sed tincidunt nunc eleifend. Nunc sed nunc felis. Nunc dolor metus, luctus in aliquet sit amet, congue sed lacus. Cras pellentesque nisl quis quam vehicula, eget fermentum metus luctus. Vestibulum eget arcu eget nisl volutpat tincidunt. Maecenas pharetra ex ex, sit amet eleifend leo hendrerit ac.

Nulla sed tristique quam. Aliquam quis nisi sit amet mi hendrerit eleifend a feugiat neque. Suspendisse tincidunt auctor dui, quis convallis eros bibendum in. Donec dui ex, sollicitudin quis tristique a, interdum nec nibh. Duis mattis, leo eget consectetur mollis, enim tellus imperdiet ante, eu viverra felis ante scelerisque velit. Integer sit amet tincidunt lectus. Nulla hendrerit lectus est, a mattis augue cursus et. Praesent sit amet nunc lorem. Etiam sollicitudin ut neque a ultrices. Phasellus vel nulla mauris. Donec malesuada porta dui. Praesent mi augue, laoreet nec consectetur nec, tincidunt in erat. Aliquam laoreet vel dolor et mattis. Fusce eu augue ut felis posuere auctor.
  </div>
</div>

However, in the wild this has a weird bug: sometimes, not always, the -webkit-scrollbar-track appears on top of other content.

In this screen shot there are two web components, both with shadow DOM and using the style for the scrollbar, but the one on the left appears correctly, while on the right the -webkit-scrollbar-track and -webkit-scrollbar-thumb are on top of the next panel:

image showing scroll appearing over subsequent content

I can’t reproduce this bug in a simple example – I don’t know what’s different between the two web components (or rather there are a huge number of differences, but I don’t know which one is causing this).

Update

Thanks @jolan for the idea that has helped me find the cause: switching from overflow-y: overlay to overflow-y: auto stops the scroll bar appearing on top of other content.

That only gets me part way there – this uses overlay specifically (rather than scroll or auto because I want to keep the horizontal layout of the content the same regardless of parent height, but I also don’t want to show a scrollbar when the content isn’t scrollable.

  • Is this a known bug with overlay? Can anyone point me to a blink/webkit issue?

  • Does anyone know why overlay does this and is there any way to resolve it without switching to auto or scroll?

  • Is there a CSS solution that doesn’t change the content width depending on vertical height? It would have to work in flex and grid contexts as well as explicit height/width.


Get this bounty!!!

#StackBounty: #php #html #wordpress #pagination How to add Pagination to a blog page in WordPress

Bounty: 100

I need to insert a pagination to the post instead of the load more button and I don’t know how how to do it. I require pagination of Next & Previous or numbers.

Here’s our dev work, but I don’t know where to start or where I should put this example.

<?php
/*
 * Template Name: Blog
 * description: >-
  Page template without sidebar
 */

get_header(); ?>

<body class=" pageHeader--gray">
    <div class="wrapper">
      <div class="content">
        <div class="pageHeader">
          <div class="container animate">
            <h1 class="pageHeader__title"><?php the_field('title'); ?>
            </h1>
          </div>
          <div class="pageHeader__background">
            <svg xmlns="http://www.w3.org/2000/svg" width="1920" viewBox="0 0 1920 126">
              <path fill="#FFF" fill-rule="evenodd" d="M9.09494702e-13,7.95807864e-13 L1920,7.95807864e-13 L1920,22.1174168 C1622.41146,91.3724723 1302.41146,126 960,126 C617.588542,126 297.588542,91.3724723 9.09494702e-13,22.1174168 L9.09494702e-13,7.95807864e-13 Z" transform="rotate(180 960 63)"></path>
            </svg>
          </div>
          <div class="pageHeader__decor animate animate--wrapper">
            <div class="pageHeader__decor-1 animate__child">
            </div>
            <div class="pageHeader__decor-2 animate__child">
            </div>
          </div>
        </div>
        <div class="blog">
          <div class="container">
            <div class="blog__tags animate">
              <?php
                $categories = get_categories( array(
                    'orderby' => 'name',
                    'order'   => 'ASC'
                ) );

                $active = "";
                if ( null == @$_GET['category_id'] ) {
                  $active = "active";
                }
                echo '<a class="blog__tag '.$active.'" href="'. site_url() .'/blog">All Categories</a>';
                foreach( $categories as $category ) {
                  $active = "";

                  if ( $category->name == @$_GET['category_id']) {
                    $active = "active";
                  }
                  echo '<a class="blog__tag '.$active.'" href="'. site_url() .'/blog?category_id='.$category->name.'">'.$category->name.'</a>';
                }
              ?>
            </div>
            <div class="blog__wrapper">
              <?php

                $args = array(
                  'posts_per_page' => 1,
                  'post__in' => get_option( 'sticky_posts' ),
                  'ignore_sticky_posts' => 1,
                  'category_name' => @$_GET['category_id']
                );
                $sticky_query = new WP_Query( $args );

                while ( $sticky_query->have_posts() ) : $sticky_query->the_post();

                ?>
                  <a class="newsCard newsCard--big animate" href="<?php the_permalink(); ?>">
                    <?php if (has_post_thumbnail( get_the_ID() ) ): ?>
                      <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'single-post-thumbnail' ); ?>
                      <div class="newsCard__image"><img src="<?php echo $image[0]; ?>" alt=""/></div>
                    <?php endif; ?>
                    <div class="newsCard__content">
                      <div class="newsCard__tag">
                        <?php 
                          $categories="";
                          foreach((get_the_category()) as $category){
                            $categories = $category->name.",";
                          }
                          echo substr($categories, 0, -1);
                        ?>
                      </div>
                      <div class="newsCard__title"><?php the_title(); ?>
                      </div>
                      <div class="newsCard__description"><?php the_excerpt(); ?>
                      </div>
                      <div class="newsCard__link">Learn more
                        <div class="newsCard__link-icon">
                        </div>
                      </div>
                    </div>
                  </a>
                <?php
                endwhile;

                wp_reset_postdata();
              ?>

              <?php
                $load = 0;
                $total_post =wp_count_posts()->publish;
                if (null !== @$_GET['load']){
                  $load = $_GET['load'];
                }
                $i = 6 + $load;
              ?>
              <?php 
                // the query
                $wpb_all_query = new WP_Query(array(
                  'post_type'=>'post',
                  'post_status'=>'publish',
                  'posts_per_page'=>$i,
                  'ignore_sticky_posts' => 1,
                  'category_name' => @$_GET['category_id']
                ));
                $count = $wpb_all_query->found_posts;
              ?>
             
              <?php if ( $wpb_all_query->have_posts() ) : ?>
             
                <!-- the loop -->
                <?php while ( $wpb_all_query->have_posts() ) : $wpb_all_query->the_post(); ?>
                  <a class="newsCard newsCard animate" href="<?php the_permalink(); ?>">
                    <?php if (has_post_thumbnail( get_the_ID() ) ): ?>
                      <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'single-post-thumbnail' ); ?>
                      <div class="newsCard__image"><img src="<?php echo $image[0]; ?>" alt=""/></div>
                    <?php endif; ?>
                    <div class="newsCard__content">
                      <div class="newsCard__tag">
                        <?php 
                          $categories="";
                          foreach((get_the_category()) as $category){
                            $categories = $category->name.",";
                          }
                          echo substr($categories, 0, -1);
                        ?>
                      </div>
                      <div class="newsCard__title"><?php the_title(); ?>
                      </div>
                      <div class="newsCard__description"><?php the_excerpt(); ?>
                      </div>
                      <div class="newsCard__link">Learn more
                        <div class="newsCard__link-icon">
                        </div>
                      </div>
                    </div>
                  </a>
                <?php endwhile; ?>
                <!-- end of the loop -->
             
              <?php wp_reset_postdata(); ?>
             
              <?php else : ?>
                <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
              <?php endif; ?>
            </div>
            <?php if( null == @$_GET['load'] && $count > 6 ) : ?>
              <div class="blog__button animate">
                <?php 
                  if ( null == @$_GET['category_id'] ) {
                ?>
                    <a class="btn" href="<?php echo site_url(); ?>/blog?load=<?php echo $load + $total_post; ?>"><?php the_field('load_more_button_label'); ?></a>
                <?php
                  } else {
                ?>
                    <a class="btn" href="<?php echo site_url(); ?>/blog?category_id=<?php echo $_GET['category_id']; ?>&load=<?php echo $load + $total_post; ?>"><?php the_field('load_more_button_label'); ?></a>
                <?php
                  }
                ?>
              </div>
            <?php endif; ?>
          </div>
        </div>
        <div class="achievments">
          <div class="container">
            <div class="blockTitle blockTitle--center blockTitle--small">
              <h2><?php the_field('achievement_title'); ?></h2>
            </div>
            <div class="rewardsCards2 animate animate--wrapper">
              <?php 
                // the query
                $wpb_all_query = new WP_Query(array(
                  'post_type'=>'achievement_cpt',
                  'post_status'=>'publish',
                  'posts_per_page'=>-1,
                  // 'ignore_sticky_posts' => 1,
                  // 'meta_key' => 'departament',
                  // 'meta_value' => 'Information Technology and Security'
                  ));
              ?>
             

              <?php if ( $wpb_all_query->have_posts() ) : ?>
                 <?php while ( $wpb_all_query->have_posts() ) : $wpb_all_query->the_post(); ?>
                  <div class="rewardsCards2__item animate__child"><img src="<?php echo get_field('image', get_the_ID()); ?>" alt=""/>
                    <div class="rewardsCards2__tooltip">
                      <div class="rewardsCards2__tooltip-logo"><img src="<?php echo get_field('image', get_the_ID()); ?>" alt=""/>
                      </div>
                      <div class="rewardsCards2__tooltip-content">
                        <div class="rewardsCards2__tooltip-title"><?php echo get_field('title', get_the_ID());?>
                        </div>
                        <div class="rewardsCards2__tooltip-description"><?php echo get_field('content', get_the_ID());?> 
                        </div><a class="rewardsCards2__tooltip-link" href="<?php echo get_field('url',get_the_ID());?>">Read More</a>
                      </div>
                    </div>
                  </div>
                <?php endwhile; ?>
                <?php wp_reset_postdata(); ?>
              <?php else : ?>
                <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
              <?php endif; ?>
            </div>
          </div>
        </div>
        <?php get_footer('phone'); ?>
      </div>
  </body>

<?php get_footer(); ?>


Get this bounty!!!

#StackBounty: #html #forms #input #radio-button Multiple values in radio input within form with vanilla HTML

Bounty: 250

I am aiming to create a form to handle disabled JavaScript experience for a small component on my website. Currently I have the following form:

<form method="GET" action="https://mywebsite.com/somedirectory/">

    <input type="radio" id="uid1" name="someParam" value="fruity" />
    <label for="uid1">Fruit</label>

    <input type="radio" id="uid2" name="someParam" value="veggie" />
    <label for="uid2">Vegetable</label>

    ...other radio options

    <input type="submit" value="Submit" />
</form>

Clicking on either of the radio options and then on the submit button will result in:

option 1: https://mywebsite.com/somedirectory/?someParam=fruity
option 2: https://mywebsite.com/somedirectory/?someParam=veggie

How can I add another value for each of the radio options? Say I would like to pass someOtherParam which is unique for each option and I would like to get this as output for my options:

option 1: https://mywebsite.com/somedirectory/?someParam=fruity&someOtherParam=apple
option 2: https://mywebsite.com/somedirectory/?someParam=veggie&someOtherParam=pepper

What I have tried is:

<input type="radio" id="uid1" name="someParam" value="fruity&someOtherParam=apple" />
<input type="radio" id="uid2" name="someParam" value="veggie&someOtherParam=pepper" />

However, the & symbol is converted to %26 inside the link and feels too hacky. Is there a better way to achieve this? Also, is there a way to make sure the Submit button is only enabled once a radio option is selected?

P.S. I am aiming for pure HTML experience with no Javascript involved. Is that possible?


Get this bounty!!!