Quantcast
Channel: Active questions tagged html - Stack Overflow

My Next button is not redirecting to the next page

$
0
0

I am at my very first attempt at website making and am trying to make a very simple webpage where people enter, write their name/nickname, pick an address (if possible to enable location based services even better), their number, press Next, on the second page, Press + or - to 5 pre-existing options that each has a different price and it sums up the total at the bottom, Press Next, on the third page confirm the entered data, Press Next, On Fourth Page: Display: Thank You For Your Order and automatically send me a email with the data he just entered and the secret picture just taken.

This is my code:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Comanda Cu Tupeu</title><link rel="stylesheet" href="styles.css"></head><body><div id="page1"><h1>Care si Unde Esti?</h1><input type="text" id="name" placeholder="Nume/Porecla" required><input type="text" id="address" placeholder="Unde Vin" required><input type="text" id="phone" placeholder="Tel" required><button onclick="goToPage2()">Next</button></div><div id="page2" style="display:none;"><h1>Select Options</h1><div id="options"><div>Something ($10)</div><button onclick="updateTotal(30)">+</button><button                onclick="updateTotal(-30)">-</button><div>Something ($15)</div><button onclick="updateTotal(150)">+</button><button                onclick="updateTotal(-150)">-</button><div>Adaug Later ($20)</div><button onclick="updateTotal(20)">+</button><button                onclick="updateTotal(-20)">-</button><div>Adaug Later ($25)</div><button onclick="updateTotal(25)">+</button><button                onclick="updateTotal(-25)">-</button><div>Adaug Later ($30)</div><button onclick="updateTotal(30)">+</button><button                onclick="updateTotal(-30)">-</button></div><h2>Total: $<span id="total">0</span></h2><button onclick="goToPage3()">Next</button></div><div id="page3" style="display:none;"><h1>Confirma Ba!</h1><div id="confirmData"></div><video id="video" width="300" height="200" autoplay></video><button onclick="captureImage()">Capture</button><button onclick="submitData()">Submit</button></div><div id="page4" style="display:none;"><h1>Ti-am primit comanda. Is pe drum! Sa ai bani fixi pregatiti.</h1></div><script src="script.js"></script></body></html>

And I can't for the life of me figure out why the next button isn't Next-ing.


How is the bgcolor property being calculated? [duplicate]

$
0
0

Possible Duplicate:
Why does HTML think “chucknorris” is a color?

How is the bgcolor property calculated?

When i use the following HTML code...

<body bgcolor="#Deine Mutter hat eine Farbe und die ist grün."></body>

...what I get is the following color:

#Deine Mutter hat eine Farbe und die ist grün.

By the way: When I try to use it in CSS it won't work and will apply the standard color:

body {    color: #IchwillGOLD;}

Why?

How to open Android's built-in HTML Viewer from the command line?

$
0
0

For example, I am able to open the Android Settings app from Termux using the following code'

am start -a android.intent.action.MAIN -n com.android.settings/.Settings

Is there a way to open Android's built-in HTML Viewer from Termux that same way?

Vertically Center div Using Bootstrap

$
0
0

I'm currently working with a template, and I'm trying to position the elements with the following requirements:

  • The header must stick to the top, be horizontally centered, with spacing between the H3 and the set of <nav> links.
  • The <main> must be horizontally and vertically centered, with text-alignment being to the right.

I've been at this for 3 hours and I still haven't managed to get it to work. Here is the template:

<div><header className='fixed-top d-flex justify-content-around'><div className=""><h3 className="float-md-start mb-0">Ethan Leyden</h3><nav className="nav nav-masthead justify-content-center float-md-end"><a className="nav-link fw-bold py-1 px-0 active" aria-current="page" href="#">Home</a><a className="nav-link fw-bold py-1 px-0" href="#">Features</a><a className="nav-link fw-bold py-1 px-0" href="#">Contact</a></nav></div></header><div className="mx-auto my-auto"><main className=""><h1>Welcome to the site</h1><p className="lead">It's definitely still under construction. Do you know how to vertically center content with Bootstrap? I sure don't</p><p className="lead"><a href="#" className="btn btn-lg btn-light fw-bold border-white bg-white">Learn more</a></p></main></div></div>

I've tried various combinations of mx-auto, my-auto, align-items-center, d-flex but to no avail. I'm sure this is a trivial question but I can't find the answer anywhere to my specific question (or find one that works, at least).

Progress bar but marker on top of the bar

$
0
0

I've been stuck on this task for a couple of hours. Tried a lot of things including calculations but I cannot recreate this mockup. I was able to do this but the marker is inline the bar, and using

Is this possible in CSS? Or are there other approaches you could suggest? This is a part of an html report so the figures will not dynamically change. But on the rendering of the report, the marker should move the progress bar and follow the color of the gradient it is on.

Any help would be greatly appreciated.

outcome mockupThis is what I currently have.

<html><head><style>    body {      display: flex;      align-items: center;      justify-content: center;    }    /* Container styling */    .progress-container {      display: flex;      align-items: center;      gap: 10px;    }    /* Progress bar container */    .progress-bar {      position: relative;      height: 10px;      width: 300px;      background: linear-gradient(to right, #ff00ff, #00f0ff, #00ff99);      border-radius: 5px;    }    /* Progress fill */    .progress {      position: relative;      height: 100%;      background-color: transparent;      /* No color needed as the full gradient is in the parent */      z-index: 1;    }    /* Marker styling */    .marker {      position: absolute;      top: -6px;      /* Adjust to lift it above the bar */      right: -7px;      /* Positions at the end of the progress */      width: 15px;      height: 15px;      background: inherit;      /* Inherit the gradient color */      border-radius: 50%;      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);      z-index: 2;      /* Ensures the marker is above the progress bar */    }    /* Text styling */    .progress-text {      background-color: black;      color: white;      padding: 5px 10px;      border-radius: 20px;      font-weight: bold;    }</style></head><body><div class="progress-container"><div class="progress-bar"><div class="progress" style="width: 15%;"><div class="marker"></div></div></div><div class="progress-text">15%</div></div></body></html>

How can I click through a div to open youtube link?

$
0
0

I made a custom play button via PNG that appears when the cursor is hovering over the video thumbnail. But now the video isn't clickable. If I set pointer events to none it won't make the hover event show up.

.videothumbnail img{    width: 100%;    object-fit: contain;    display: block;}.videothumbnail{    overflow: hidden;    position: relative;}.videothumbnail img{    transition: transform .3s ease;}.videothumbnail:hover img {    transform: scale(1.1);  }.playbutton{    position: absolute;    width: 100%;    height: 100%;    top: 0;    bottom: 0;    background-color: rgba(0, 0, 0, 0.521);    opacity: 0;    transition: .3s;}.playbutton:hover{    opacity: 1;}
<div class="column"> <div class="videothumbnail"><a href="https://www.youtube.com/watch?v=MVTQJQQkj4E"><img src="afp_images/photographs/musicvideos/UNTAINTED_THUMBNAIL.jpg" alt=""/></a>  <div class="playbutton"><img src="afp_images/photographs/musicvideos/playbuttonoverlay.png"></div> </div></div>

Instead of sourcing the play button overlay in the HTML, I tried to source it as a background-image in the CSS but that didn't work either. Help would be greatly appreciated. Would it be better to just make a play button shape with raw CSS and overlay it on top of my video link? How would I go about that? I figured just having a image overlay would be the easiest way to go about it.

I have no jquery knowledge but I would hope this is possible to do without it.

How to make div not immediately wrap words

$
0
0

I'm trying to make a tooltip, that pops up when hovered over, not wrap text when it is immediately able to. The tooltip functionality works perfectly, this question is purely related to text wrapping and width and such. Currently, the tooltip wraps to the width of the longest word it contains, but I want it to reach the width of the viewport before wrapping text.

.tooltip {  position: relative;  display: inline-block;}.tooltip .tooltiptext {  visibility: hidden;  position: absolute;  z-index: 1;}.tooltip:hover .tooltiptext {  visibility: visible;}
<a class="tooltip">        Hover<div class="tooltip tooltiptext">                Tooltip Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div></a>

Is it possible mix Javascript and C# code in a DOM event in Blazor?

$
0
0

I'm trying to achieve the next in Blazor WebAssembly; I need to be able to listen for an event in a component, and use both Javscript and C# code like the next way:

<button onclick="console.log('Showing event from Js: '+ event); @Test()">Test</button>@code {   public void Test()   {       JSRuntime.InvokeVoidAsync("console.log", "Showing log from C#");   }}

The first problem is that I get the error "cannot implicitly convert type void to object", so if I change the Test method signature just to return an object

public object Test(){    JSRuntime.InvokeVoidAsync("console.log", "Showing log from C#");    return null;}

The App compiles but once the page is loaded, the "Test()" function is executed automatically, and if I click the button, it just executes the Javascript code, and not both pieces of code.

I know I should handle events in Blazor prefixing the event name with "@" symbol in order to call a C# method, and execute Javascript code there using the interop, but in that way, I can't use the default Javascript "event" which I need to use, instead of the Blazor "event" version.

Thanks in advance!


Add active class to navbar element when clicked

$
0
0

I have created with navbar, I haven't done much web development.

<nav class="navbar navbar-custom navbar-light navbar-expand-md justify-content-center"><button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2"> <span class="navbar-toggler-icon"></span> </button><div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2"><ul class="navbar-nav mx-auto text-center"><li class="nav-item"><a class="nav-link" href="index.html"><strong style="text-transform:uppercase">home</strong></a></li><li class="nav-item"><a class="nav-link" href="about.html"><strong style="text-transform:uppercase">about</strong></a></li><li class="nav-item"><a class="nav-link" href="flights.html"><strong>FLIGHTS</strong></a></li><li class="nav-item"><a class="nav-link" href="hotels.html"><strong>HOTELS</strong></a></li><li class="nav-item"><a class="nav-link" href="holidays.html"><strong>HOLIDAYS</strong></a></li><li class="nav-item "><a class="nav-link" href="property.html"><strong>PROPERTY</strong></a></li><li class="nav-item active"><a class="nav-link" href="car_hire.html"><strong>CAR HIRE</strong></a></li></ul></div></nav>

This navbar is linked to at the top of all other pages to reduce repetition of code. Can someone help me with code so when menu item clicked "active" class is added to li element. This then triggers css.

CSS:

.nav-link.active {  color: white;}

Thank you

Attributes nodeName of elements become lowerCase automatically

$
0
0

Why does the nodeName of an attribute in the attributes property of an element become lowercase, and how to make it camelCase?

I have the following code:

<div myAttr = "true"></div><script>var div = document.getElementsByTagName('div')[0];var attr = div.attributes[0];console.log(attr.nodeName);</script>

this will display myattr, but in the markup, it's myAttr, why is it like that? and how to fix it?

Center items correctly when using justify-content: space-between

$
0
0

I created a header bar and want to place 3 items there. The first should be aligned on the left side, the second in the middle of the header and the third on the right side.

I went for this

body{  background: #eeeeee;}#header {  background: #ffffff;  height: 53px;  display: flex;  flex-direction: row;  align-items: center;  justify-content: space-between;}.headerEle {}
<div id="header"><img class="headerEle" src="https://cdn.discordapp.com/attachments/316916526760591362/390814093340311565/unknown.png"><a class="headerEle" href="https://www.google.de/">Google</a><button class="headerEle">Logout</button></div>

but when using justify-content: space-between; the items don't get centered correctly. The image takes a bigger place than the small button on the right.

So the link in the middle is not centered correctly, it overlaps the right side. I want the link being in the horizontal center of the page.

Fully responsive collapsible images not functioning correctly

$
0
0

I have a wall of images and when an image is clicked a separate div rolls down underneath the row in which the image was clicked. At the moment it is fully responsive, meaning when the screen size is reduced it creates more rows and the collapsible always drops down underneath the image row. I need the collapsible div to span across the full container.

However, in my code now, the collapsible div, with class .info, keeps shifting left and right depending which image is being clicked. I just want the .info div to stay within the container and stay in the same place for each row.

For example, when an image is clicked on in the first row the .info div rolls down and shows the information. Then, when the third image on the same row is clicked the .info div is in the same place, but just the text changes. Then, when an image on the second row is clicked the .info on the first row is closed then the .info div opens up underneath the second row spanning the full container width.

function toggleInfo(element) {  const allPartners = document.querySelectorAll('.partner');  allPartners.forEach(partner => {    if (partner !== element) {      partner.classList.remove('active');    }  });  element.classList.toggle('active');}
body {  font-family: Arial, sans-serif;  margin: 0;  padding: 20px;  overflow-x: hidden;  /* Prevent horizontal scrolling */}.container {  display: flex;  flex-wrap: wrap;  gap: 5px;}.partner {  position: relative;  width: calc(25% - 5px);  /* 4 images per row with 5px gap */  cursor: pointer;  margin-bottom: 20px;  /* Space for the info box */}.image-wrapper {  position: relative;  overflow: hidden;}.image-wrapper img {  width: 100%;  height: auto;  display: block;  transition: opacity 0.3s;}.gradient {  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);  display: flex;  justify-content: center;  align-items: center;}.name {  color: white;  font-size: 1.5rem;  z-index: 1;}.info {  display: none;  background-color: white;  padding: 10px;  border: 1px solid #ddd;  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  position: relative;  width: 100vw;  left: 10px;  /* Adjust for body padding */  transform: translateX(-50%);  margin-top: 10px;  margin-left: 0;  margin-right: 0;  box-sizing: border-box;}.partner.active .info {  display: block;  animation: slideDown 0.3s ease;}.partner.active .image-wrapper img {  opacity: 1;}.partner:not(.active) .image-wrapper img {  opacity: 0.5;}@keyframes slideDown {  from {    max-height: 0;    opacity: 0;  }  to {    max-height: 500px;    /* Adjust as needed */    opacity: 1;  }}/* Responsive Design */@media (max-width: 800px) {  .partner {    width: calc(50% - 5px);    /* 2 images per row on smaller screens */  }}@media (max-width: 500px) {  .partner {    width: 100%;    /* 1 image per row on very small screens */  }}
<div class="container"><!-- Generate 8 partner entries with placeholder images --><div class="partner" onclick="toggleInfo(this)"><div class="image-wrapper"><img src="https://via.placeholder.com/200x300" alt="Partner 1"><div class="gradient"><span class="name">Partner 1</span></div></div><div class="info"><p>More information about Partner 1...</p></div></div><div class="partner" onclick="toggleInfo(this)"><div class="image-wrapper"><img src="https://via.placeholder.com/200x300" alt="Partner 2"><div class="gradient"><span class="name">Partner 2</span></div></div><div class="info"><p>More information about Partner 2...</p></div></div><div class="partner" onclick="toggleInfo(this)"><div class="image-wrapper"><img src="https://via.placeholder.com/200x300" alt="Partner 3"><div class="gradient"><span class="name">Partner 3</span></div></div><div class="info"><p>More information about Partner 3...</p></div></div><div class="partner" onclick="toggleInfo(this)"><div class="image-wrapper"><img src="https://via.placeholder.com/200x300" alt="Partner 4"><div class="gradient"><span class="name">Partner 4</span></div></div><div class="info"><p>More information about Partner 4...</p></div></div><div class="partner" onclick="toggleInfo(this)"><div class="image-wrapper"><img src="https://via.placeholder.com/200x300" alt="Partner 5"><div class="gradient"><span class="name">Partner 5</span></div></div><div class="info"><p>More information about Partner 5...</p></div></div><div class="partner" onclick="toggleInfo(this)"><div class="image-wrapper"><img src="https://via.placeholder.com/200x300" alt="Partner 6"><div class="gradient"><span class="name">Partner 6</span></div></div><div class="info"><p>More information about Partner 6...</p></div></div><div class="partner" onclick="toggleInfo(this)"><div class="image-wrapper"><img src="https://via.placeholder.com/200x300" alt="Partner 7"><div class="gradient"><span class="name">Partner 7</span></div></div><div class="info"><p>More information about Partner 7...</p></div></div><div class="partner" onclick="toggleInfo(this)"><div class="image-wrapper"><img src="https://via.placeholder.com/200x300" alt="Partner 8"><div class="gradient"><span class="name">Partner 8</span></div></div><div class="info"><p>More information about Partner 8...</p></div></div></div>

Why does using image_url in one part of my Shopify Liquid code cause a 404 error, but not in others?

$
0
0

I'm building a custom section in Shopify that includes an image modal for displaying product images. The issue I'm facing is that when I use image_url for the src attribute in one part of my code, I get a 404 warning in the console, while it works fine in other parts of my code.

Code that gives a 404 warning:

<!-- Product Modal --><a id="product-modal" class="product-modal" href="" target="_self"><div class="modal-content"><img id="modal-product-image" src="{{ product.featured_image | image_url: width: 500, height: 500 }}" alt="Product Image" class="modal-product-image" width="500" height="500"><h3 id="modal-product-name" class="modal-product-name"></h3><p id="modal-product-price" class="modal-product-price"></p><button id="close-modal" class="close-modal">×</button></div></a>

Code that works (but is flagged as outdated):

<!-- Product Modal --><a id="product-modal" class="product-modal" href="" target="_self"><div class="modal-content"><img id="modal-product-image" src="" alt="Product Image" class="modal-product-image" width="500" height="500"><h3 id="modal-product-name" class="modal-product-name"></h3><p id="modal-product-price" class="modal-product-price"></p><button id="close-modal" class="close-modal">×</button></div></a>

I've tried:

  • Using img_url instead, which successfully generates the image URL but gets flagged by Shopify's theme check as outdated and not best practice.
  • Ensuring product.featured_image is present and valid in the current context to confirm that the image source is correctly referenced.
  • Using image_url throughout my code, where it works correctly in other parts of the template but causes a 404 warning specifically when used in the src attribute of the modal image.
  • Using <img id="modal-product-image" src="" ...>, which avoids the 404 warning but gets flagged as not best practice due to an empty src attribute.

My Question: Why does using image_url work in other parts of my code but causes a 404 warning when used in the modal's src attribute? How can I fix this while adhering to Shopify's best practices?

why blob not working while in new Image src

$
0
0
<input type="file" @change="handleUpdateFIle">

I'm having trouble running the following code snippet in my application. When I try to set the src of an img element using the result of a FileReader object, I get an error saying "img src is not valid". Can you help me fix this issue?

const handleUpdateFIle = (e: file) => {  const file= e.target.files[0]  const reader = new FileReader()  const img = new Image()  reader.onload = () => {      const arrayBuffer = reader.result      const blob = new Blob([arrayBuffer],{type: file.type || 'image/png'})      console.log('blob',blob)      const URL = window.URL || window.webkitURL      const url = URL.createObjectURL(blob)      img.src = url   //img.src blob:http:xxx  }  reader.readAsArrayBuffer(file)}

console tip

Uncaught (in promise) img src is not valid

I've tried using readAsDataURL instead of readAsArrayBuffer, but I still get the same error. Can you please provide a solution?

img.src = URL.createObjectURL(file)

How to sum up values in XML

$
0
0

I have an XML file with tournament data and want to calculate the total points for each team. Here’s the XML:

<tournoi date="2012-12-12"><match date="2012-12-20" heure="18:00:00"><equipe nom="AAAA" score="3" /><equipe nom="BBBB" score="0" /></match><match date="2012-12-20" heure="20:00:00"><equipe nom="CCCC" score="1" /><equipe nom="DDDD" score="1" /></match><match date="2012-12-21" heure="18:00:00"><equipe nom="AAAA" score="2" /><equipe nom="CCCC" score="4" /></match><match date="2012-12-21" heure="20:00:00"><equipe nom="BBBB" score="7" /><equipe nom="DDDD" score="0" /></match><match date="2012-12-22" heure="18:00:00"><equipe nom="AAAA" score="3" /><equipe nom="DDDD" score="2" /></match><match date="2012-12-22" heure="20:00:00"><equipe nom="CCCC" score="5" /><equipe nom="BBBB" score="1" /></match></tournoi>

Here is the XSLT code I’m using to calculate points:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:key name="teams" match="equipe" use="@nom"/><xsl:template match="/"><html><body><h2>Total points of each team</h2><table border="1" width="100%"><tr bgcolor="green"><th>Team</th><th>Total Points</th></tr><!-- Group by unique team names --><xsl:for-each select="tournoi/match/equipe[not(@nom = preceding::equipe/@nom)]"><tr><td><xsl:value-of select="@nom"/></td><td><xsl:variable name="teamName" select="@nom"/><xsl:variable name="totalPoints" as="number"><xsl:for-each select="key('teams', $teamName)"><xsl:variable name="opponentScore" select="../equipe[@nom != $teamName]/@score"/><xsl:choose><xsl:when test="@score &gt; $opponentScore"><xsl:value-of select="2" as="number"/></xsl:when><xsl:when test="@score = $opponentScore"><xsl:value-of select="1" as="number"/></xsl:when><xsl:otherwise><xsl:value-of select="0" as="number"/></xsl:otherwise></xsl:choose></xsl:for-each></xsl:variable><xsl:value-of select="$totalPoints"/></td></tr></xsl:for-each></table></body></html></xsl:template></xsl:stylesheet>

Expected Output Example:Equipe PointsAAAA 4

But currently, I’m getting AAAA as 202 instead of 4.


How to add sidebar to taxonomy template Wordpress

$
0
0

I am working on a WordPress website, using a theme.

I have a page "Careers", that shows all the careers on the right side, and on the left side there is the sidebar "sidebar_widgets" with some filtering options.

careers page, all good

Now when I click on some filtering option, let's say "Full-Time", I am being automatically redirected to the link /career-career-tag/full-time. This I assume is the taxonomy page, and it correctly shows me only the careers that have the tag full-time.

taxonomy page, working but without sidebar

The problem now is, that the sidebar with the filtering widgets is no longer shown, and I cannot filter further. This page I think is some kind of default WordPress page, not visible in the "Pages" section of wp-admin.

Upon looking into the code, I found that this taxonomy page uses the code from index.php, which is the most generic template.

Now I have created a file called taxonomy.php, in order to edit the template and to include the sidebar, but I don't know what to put inside.

The index.php contains this code:

<?php/** * The main template file. * * This is the most generic template file in a WordPress theme * and one of the two required files for a theme (the other being style.css). * It is used to display a page when nothing more specific matches a query. * E.g., it puts together the home page when no home.php file exists. * Learn more: http://codex.wordpress.org/Template_Hierarchy * * @package WordPress * @subpackage AUTOPARTS * @since AUTOPARTS 1.0 */if ( substr(autoparts_get_theme_option('blog_style'), 0, 7) == 'classic' )    get_template_part( 'index', 'classic' );else if ( substr(autoparts_get_theme_option('blog_style'), 0, 7) == 'masonry' )    get_template_part( 'index', 'classic' );else if ( substr(autoparts_get_theme_option('blog_style'), 0, 7) == 'gallery' )    get_template_part( 'index', 'portfolio' );else if ( substr(autoparts_get_theme_option('blog_style'), 0, 9) == 'portfolio' )    get_template_part( 'index', 'portfolio' );else if ( substr(autoparts_get_theme_option('blog_style'), 0, 5) == 'chess' )    get_template_part( 'index', 'chess' );else    get_template_part( 'index', 'excerpt' );?>

How to edit this? Or what do i need to add in the taxonomy.php in order to add the sidebar, and the sidebar widgets?

UPDATE

So I've used the tutorial here: and I have added this:

function taxonomy_widgets_init() {    register_sidebar( array('name' => 'Taxonomy sidebar','id' => 'taxonomy_sidebar',    ) );}add_action( 'widgets_init', 'taxonomy_widgets_init' );

and in my taxonomy.php:

<?php/** * Template for displaying taxonomy archive pages. * * @package WordPress * @subpackage AUTOPARTS * @since AUTOPARTS 1.0 */get_header(); ?><div class="content-wrapper"><main class="main-content"><?php            if ( substr(autoparts_get_theme_option('blog_style'), 0, 7) == 'classic' )                get_template_part( 'index', 'classic' );            else if ( substr(autoparts_get_theme_option('blog_style'), 0, 7) == 'masonry' )                get_template_part( 'index', 'classic' );            else if ( substr(autoparts_get_theme_option('blog_style'), 0, 7) == 'gallery' )                get_template_part( 'index', 'portfolio' );            else if ( substr(autoparts_get_theme_option('blog_style'), 0, 9) == 'portfolio' )                get_template_part( 'index', 'portfolio' );            else if ( substr(autoparts_get_theme_option('blog_style'), 0, 5) == 'chess' )                get_template_part( 'index', 'chess' );            else                get_template_part( 'index', 'excerpt' );         ?></main><aside class="sidebar"><?php dynamic_sidebar( 'sidebar_widgets' ); ?></aside></div><?php get_footer(); ?>

I can see the sidebar in WordPress and I have added the widgets that I want. Just, when I run the page, I get these errors:

the errors after i add the sidebar

Media queries for different sized screens not working [closed]

$
0
0

The @media queries are not changing the widths as per different screen sizes. If I remove the width in pixels of the left and right , then each line is such that it fits the contents of the left div table and then starts the right div table instead of both left div tables being of the same width. How to change the @media queries to change the widths as per different screen sizes but have a left div table of uniform width?

          .container {  display: flex;}.container>div {}.left {  width: 140px;}.right {  width: 180px;  margin-top: -12px;}@media (max-width: 480px) {  .left {    width: 140px;  }  .right {    width: 180px;    margin-top: -12px;  }  @media (min-width: 481px) and (max-width: 767px) {    .left {      width: 140px;    }    .right {      width: 210px;    }    @media (min-width: 768px) and (max-width: 1024px) {      .left {        width: 140px;      }      .right {        width: 240px;      }      @media (min-width: 1025px) and (max-width: 1280px) {        .left {          width: 140px;        }        .right {          width: 300px;        }        @media (min-width: 1281px) {          .left {            width: 140px;          }          .right {            width: 300px;          }
<div class="container"><div class="left"><p class=MsoNormal><b><span style='font-size:13.5pt;line-height:115%;    font-family:"Verdana","sans-serif";color:red'>SYNONYMS </span></b></p></div><div class="right"><p class=MsoNormal style='margin-bottom:12.0pt'><span style='font-size:    13.5pt;line-height:115%;font-family:"Verdana","sans-serif";color:black'>Abies    balsamea, Pinus canadensis. </span></p></div></div><div class="container"><div class="left"><p class=MsoNormal><b><span style='font-size:13.5pt;line-height:115%;    font-family:"Verdana","sans-serif";color:red'>MIND</span></b></p></div><div class="right"><p class=MsoNormal style='margin-bottom:12.0pt'><span style='font-size:    13.5pt;line-height:115%;font-family:"Verdana","sans-serif";color:black'>Vanishing of thoughts; confusion and stupefaction of the mind as if intoxicated.</span></p></div></div>

How can I make the div inside of my TD use up 100% of it's parent's height? [duplicate]

$
0
0

I am not an expert when it comes to CSS. I am seeking your help for the following problem: I am trying to make the div inside of the TD-tag of my table use up 100% of the available height. Despite of many attempts with solely using CSS, I haven't found the answer yet.

However, with some Javascript magic I was able to calculate the height of it's parent, but I don't know if that is the best solution in this case.

Here is a simplified version of the code that I am using:

<td><div :style="{ backgroundColor: row.statusbarColor, width: '12px', height: '100%' }"></div></td>

Any help would be highly appreciated! Thanks in advance.

image not showing, only the image container

$
0
0

I have the following issue.

  • nginx server running in docker container
  • shared nas folder with images and video's on my nas in the same network
  • in the nginx container a mount to the shared folder: /mnt/myPhotos

php code: $imageUrl = "/mnt/myPhotos/photo.jpg"

html code: <img src="<?php echo imageUrl; ?>" />

I get the following:https://pasteboard.co/N42KWdzXHqzT.png

Does anyone have an idea why the image doesn't show?

I looked online for it, but didn't find anything related.

Asked chatGPT for help, but that only tells me the code is 'correct'.

Expecting that the image is shown, or another solution to have an image on my site that's on this shared nas folder.

html5 video (MP4) does not start automatically

$
0
0

I have this React page where I want to add a video to it but autoplay is not working I am using Opera GX but I tried also on Chrome and Edge and still the autoplay does not work on any of them:

import React from 'react';import './home.css'; import video from '../../images/backgroundvid.mp4';const Home = () => {  return (<video src={video} width="750" height="500"  autoplay muted loop></video>  );};export default Home;

When I add controls and play the video manually it works:

<video src={video} width="750" height="500" controls autoplay muted loop>

Is it possible to inject or blend parent background between child background and foreground?

$
0
0

I would like to alter parent element (only parent) in such way that it will affect its children background. I cannot change the code for the children though.

Visually parent background should be either inserted between child background and foreground or parent background should blend with child background.

Consider the following code -- you will notice the red color (parent background) is covered by yellow (children). I can easily blend backgrounds when changing blend mode on children, but as I wrote I cannot do this -- this has to be responsibility of parent.

And one more obstacle -- it should work for parent with display block and grid at least.

Is it possible at all? If yes, how?

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>    h1    {        z-index: 0;        border: 1px green solid;    }    h1:nth-child(odd)    {        background-color: yellow;    }    .pane-bg    {        height: 8rem;    }    .indicator-bg    {        position: relative;        overflow-y: scroll;        height: 100%;        background: radial-gradient(at top, rgba(255, 0, 0, 1), transparent 70%) 50% 0 / 50% 55px;        background-repeat: no-repeat;        background-attachment: scroll;        isolation: isolate;        mix-blend-mode: multiply;        background-blend-mode: screen;        z-index: 1;    }</style></head><body><div class="pane-bg"><div class="indicator-bg"><h1>QUHWFHUIWHFIUFHWNWKNFWEFWEFHUIFWHEUIHFUIHWUIFHWUIFEHUIWFHWNWFUIFUI</h1><h1> Hello </h1><h1> XXXXXXXXXXXX </h1><h1> ala ma kota </h1><h1> bardzo malego </h1></div></div></body></html>

What I am really trying to achieve -- top and bottom scroll indicators for single scrolling container. Some time ago I "solved" this with a workaround -- by creating two containers and indicators were regular child elements of the outer container. Now I want to solve this the right way, with single container. This technique is copied from CSS Secrets by Lea Verou, the original code is here: https://dabblet.com/gist/20205b5fcdd834461e80

how to overlap two div in css?

$
0
0

I have two div likes ,

<div class="imageDiv"></div><div class="imageDiv"></div>

and css class ,

 .imageDiv    {        margin-left: 100px;        background: #fff;        display: block;        width: 345px;        height: 220px;        padding: 10px;        border-radius: 2px 2px 2px 2px;        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;        -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;    }

You can see the result Here :)

I want to overlap this two div likes ,

enter image description here


Space between Grids Semantic UI

$
0
0

I am learning Semantic UI Grid these days. It's pretty cool to use, but I am having some issues with the grids. Below I created two different grids, but I don't understand why there is no spacing between the two grids and I can't figure out how to add the spacing between them (without me adding some new css). Is there a class to add to the grids to have the spacing that I want?

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script><div class="ui container"><div class="ui equal width padded grid"><div class="ui row"><div class="ui black column"></div><div class="ui red column"></div></div></div><div class="ui padded grid"><div class="ui blue row"><div class="ui column">Single Row</div></div><div class="ui yellow equal width row"><div class="ui green column">1</div><div class="ui column">2</div><div class="ui red column">3</div></div><div class="ui three column row"><div class="ui pink left floated column">LEFT</div><div class="ui pink right floated column">RIGHT</div></div></div></div>

R GT Table with tooltip seems to leave a bit of HTML

$
0
0

I have been trying to add conditional tooltips in gt tables for ages and I think I have almost cracked it. However I am getting a silly "> appear in my row. I have tried replacing it but that doesn't seem to work. So nearly there, any ideas what is is causing this. I think it might be a HTML thing.

library(gt)library(gtExtras)library(tidyverse)df <- tibble(  col_name = c("Example 1","Example 2","Example 3","Example 4"))df |>  gt() |>  tab_style(    style = list(      cell_fill(color = "lightcyan"),      with_tooltip(NULL, "This is a piece of explainatory textthat explains what is happening or significantwithin the highlighted box")    ),    locations = cells_body(      columns = col_name,      rows = parse_number(col_name) > 2    )) |>  text_replace(    pattern = '">',    replacement = " ",    locations = cells_body(columns = col_name)  )

Example of issue

R version 4.4.1 (2024-06-14 ucrt)Platform: x86_64-w64-mingw32/x64Running under: Windows 11 x64 (build 22631)

Matrix products: default

locale:1 LC_COLLATE=English_United Kingdom.utf8 LC_CTYPE=English_United Kingdom.utf8
[3] LC_MONETARY=English_United Kingdom.utf8 LC_NUMERIC=C
[5] LC_TIME=English_United Kingdom.utf8

time zone: Europe/Londontzcode source: internal

attached base packages:1 stats graphics grDevices utils datasets methods base

other attached packages:1 lubridate_1.9.3 forcats_1.0.0 stringr_1.5.1 dplyr_1.1.4 purrr_1.0.2 readr_2.1.5
[7] tidyr_1.3.1 tibble_3.2.1 ggplot2_3.5.1 tidyverse_2.0.0 gtExtras_0.5.0 gt_0.11.1
[13] iheatmapr_0.7.1

loaded via a namespace (and not attached):1 sass_0.4.9 utf8_1.2.4 generics_0.1.3 NHSRplotthedots_0.1.0[5] xml2_1.3.6 fastcluster_1.2.6 stringi_1.8.4 hms_1.1.3
[9] digest_0.6.37 magrittr_2.0.3 grid_4.4.1 timechange_0.3.0
[13] RColorBrewer_1.1-3 fastmap_1.2.0 jsonlite_1.8.9 rematch2_2.1.2
[17] fansi_1.0.6 scales_1.3.0 cli_3.6.3 rlang_1.1.4
[21] munsell_0.5.1 withr_3.0.1 tools_4.4.1 tzdb_0.4.0
[25] colorspace_2.1-1 paletteer_1.6.0 vctrs_0.6.5 R6_2.5.1
[29] lifecycle_1.0.4 htmlwidgets_1.6.4 fontawesome_0.5.2 pkgconfig_2.0.3
[33] pillar_1.9.0 gtable_0.3.5 glue_1.8.0 xfun_0.48
[37] tidyselect_1.2.1 rstudioapi_0.16.0 knitr_1.48 htmltools_0.5.8.1
[41] compiler_4.4.1

Arabic text not displayed using Aframe

$
0
0

I'm trying to display Arabic text in A-Frame using the following code:

htmlCopy code

<a-entity text="value: مرحباًبالعالم;"></a-entity>

However, instead of the expected Arabic text, I'm seeing a blank page. I've used the same method for English text, and it works fine. Why is this happening, and what do I need to do to properly render Arabic text in A-Frame? Do I need to configure something for right-to-left text or font support?

Pure HTML Back Button

$
0
0

I want to create a Page Back Button using HTML & CSS Without using Javascript or any other language. I want to do it in pure HTML & CSS.

I searched but didn't get any solution every time javascript is included in code but I need a pure HTML no any other language.

What happened to AR mode in AFrame?

$
0
0

I'm trying to build a mixed reality experience in A-Frame on Glitch, and I used to see an "AR" button in addition to the "VR" button I currently see. How do I enable AR mode? I'm not using VR for this project.

I'm using the latest 1.6.0 AFrame and I'm expecting to see an AR button but I can't figure out how to configure it.

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><link rel="icon" href="https://glitch.com/favicon.ico" /><title>MAPS</title><!-- Import A-Frame Library --><script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script><!-- Import Hand Tracking Controls --><script src="https://aframe.io/releases/1.6.0/aframe-hand-tracking-controls.min.js"></script><!-- The website stylesheet --><style>      body {        margin: 0;        display: flex;        justify-content: center;        align-items: center;        height: 100vh;        overflow: hidden;      }</style></head><body><div id="overlay" style="display: none;"></div><a-scene      xrweb="mode: immersive-ar; requiredFeatures: hit-test; optionalFeatures: dom-overlay; overlayElement: #overlay"      xr-mode-ui="enabled: true"      renderer="colorManagement: true; antialias: true; foveationLevel: 1"      embedded><!-- Assets management section --><a-assets><img          id="yosemite"          src="https://cdn.glitch.me/4fc60967-2f19-4e8f-b905-44c0d1c89db7/8798000.png?v=1728421365754"        /></a-assets><!-- Camera setup with hand tracking controls --><a-camera        position="0 1.6 0"        look-controls="enabled: true; pointerLockEnabled: true"        wasd-controls="acceleration: 50"></a-camera><!-- Left and Right Hand Tracking --><a-entity        id="leftHand"        hand-tracking-controls="hand: left; modelColor: #ffffff; modelOpacity: 0.8; modelStyle: mesh"        hand-tracking-grab-controls="hand: left; hoverEnabled: true; hoverColor: #538df1"></a-entity><a-entity        id="rightHand"        hand-tracking-controls="hand: right; modelColor: #ffffff; modelOpacity: 0.8; modelStyle: mesh"        hand-tracking-grab-controls="hand: right; hoverEnabled: true; hoverColor: #538df1"></a-entity><!-- Lights to illuminate objects (adjust as needed, but no global light to interfere with AR passthrough) --><a-light type="ambient" color="#ffffff" intensity="0.7"></a-light><a-light        type="directional"        position="1 3 1"        color="#ffffff"        intensity="0.6"></a-light><!-- Grabbable Plane --><a-plane        position="0 2 -2"        rotation="0 0 0"        width="1.5"        height="1.5"        material="src: #yosemite; transparent: true; alphaTest: 0.5"        grabbable></a-plane></a-scene></body></html>

Why does one of the objects not react to the raycaster and the others react in A-Frame?

$
0
0

In the following scene, when with the Oculus Quest 2 with the right hand I direct it to one of the three cubes, the dodecahedron moves: object with the id console-log (It also makes an animation by increasing the size and changing the color). But on the other hand the object with id 5, similar to a book, does not. It seems to react with the raycaster, because the line does not go through it, but the animation of the rotating dodecahedron is not performed.

This is the code:

<!DOCTYPE html><html><head><script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script><script src="https://unpkg.com/aframe-environment-component@1.3.3/dist/aframe-environment-component.min.js"></script><script>      AFRAME.registerComponent("color-change-on-point", {        schema: {          originalColor: { type: "string", default: "#red" },          transitionTime: { type: "number", default: 5000 },          scaleIncrease: { type: "number", default: 1.05 },        },        init: function () {          this.el.setAttribute("color", this.data.originalColor);          this.isPointing = false;          this.startTime = null;          this.hasGrown = false;          this.originalScale = this.el.object3D.scale.clone();          // Bind methods to maintain proper 'this' context          this.onIntersectionStart = this.onIntersectionStart.bind(this);          this.onIntersectionEnd = this.onIntersectionEnd.bind(this);          this.tick = this.tick.bind(this);          // Add event listeners          this.el.addEventListener("raycaster-intersected",            this.onIntersectionStart          );          this.el.addEventListener("raycaster-intersected-cleared",            this.onIntersectionEnd          );        },        onIntersectionStart: function () {          this.isPointing = true;          this.startTime = Date.now();          this.hasGrown = false;        },        onIntersectionEnd: function () {          this.isPointing = false;          this.startTime = null;          // Return to original color gradually          this.el.removeAttribute("animation");          this.el.setAttribute("animation", {            property: "components.material.material.color",            type: "color",            to: this.data.originalColor,            dur: 1000,          });        },        tick: function () {          if (!this.isPointing || this.hasGrown) return;          const entityScene = document.querySelector("a-scene");          const entityEl = entityScene.querySelector("#console-log");          entityEl.object3D.rotation.y += THREE.MathUtils.degToRad(-2);          if (this.startTime) {            const elapsedTime = Date.now() - this.startTime;            // Calculate color transition            if (elapsedTime <= this.data.transitionTime) {              const progress = elapsedTime / this.data.transitionTime;              const currentColor = this.lerpColor(                this.data.originalColor,"#FFFFFF",                progress              );              this.el.setAttribute("color", currentColor);            }            // After 5 seconds, increase size            if (elapsedTime >= this.data.transitionTime && !this.hasGrown) {              this.hasGrown = true;              this.el.object3D.scale.multiplyScalar(this.data.scaleIncrease);              // Return to original color              this.el.setAttribute("animation", {                property: "components.material.material.color",                type: "color",                to: this.data.originalColor,                dur: 1000,              });            }          }        },        // Helper function to interpolate between colors        lerpColor: function (startColor, endColor, progress) {          const start = new THREE.Color(startColor);          const end = new THREE.Color(endColor);          const r = start.r + (end.r - start.r) * progress;          const g = start.g + (end.g - start.g) * progress;          const b = start.b + (end.b - start.b) * progress;          return `#${new THREE.Color(r, g, b).getHexString()}`;        },      });</script></head><body><a-scene><a-entity        hand-tracking-controls="hand: right"        line="color: #FF0000; opacity: 0.5"><a-entity          position="0 0 0"          raycaster="showLine: true; far: 10; interval: 100; objects: .clickable"></a-entity></a-entity><a-entity hand-tracking-controls="hand: left"></a-entity><!-- Cubos interactivos --><a-box        class="clickable"        position="-2 1.5 -3"        color-change-on-point="originalColor: #FF0000; transitionTime: 1000; scaleIncrease: 1.05"        animation></a-box><a-box        class="clickable"        position="0 1.5 -3"        color-change-on-point="originalColor: #00FF00; transitionTime: 1000; scaleIncrease: 1.05"        animation></a-box><a-box        class="clickable"        position="2 1.5 -3"        color-change-on-point="originalColor: #0000FF; transitionTime: 1000; scaleIncrease: 1.05"        animation></a-box><a-box        class="clickable"        position="2 1.5 -3"        animation></a-box><a-entity        id="5"        class="clickable"        position="-0.35 1.53 -0.5"        geometry="depth: 0.15; height: 0.24; width: 0.02"        material="color: #225560"        animation></a-entity>      <a-entity        id="console-log"        position="-1.49266 2.57466 -5"        radius="1.25"        color="#EF2D5E"        material="color: #2eefa5"        geometry="primitive: dodecahedron; radius: 0.72"></a-entity><!-- Environment --><a-entity environment="preset: forest; dressingAmount: 1"></a-entity><a-sky color="#ECECEC"></a-sky></a-scene></body></html>

It can be viewed with the Oculus Quest 2 at https://chipped-stormy-explanation.glitch.me/

A-Frame and AR.js not loading gltf

$
0
0

I have the code below which I am expecting would render the gltf I have locally in the same folder but it is not rendering. Based on the network traffic, I can see the textures/meshes coming through ok with 200, but nothing rendering.

<html><head><!-- include A-Frame obviously --><script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script><!-- include ar.js for A-Frame --><script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script><script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script><title></title></head><body style='margin : 0px; overflow: hidden;'><a-scene embedded arjs><!-- create your content here. just a gltf for now --><a-assets><a-asset-item id="car" src="scene.gltf"></a-asset-item></a-assets><!-- define a camera which will move according to the marker position --><a-marker-camera preset='hiro'><a-entity            animation-mixer            gltf-model="#car"            scale="0.2 0.2 0.2"            position='0 1 -3'></a-entity></a-marker-camera></a-scene></body></html>```I am working from the tutorial on this page: https://aframe.io/blog/arjs/The image tracker example using the hiro preset with a simple preset works but I have not been able to load anything else than a box or other built-in geometries as a scene object.

Print Invoice A6

$
0
0

I want to print an invoice in A6 size. I’m using the following CSS for printing:

@media print {    body {        background: none;        margin: 0;    }    .invoice {      width: 105mm;      height: 148mm;      padding: 15mm;      margin: 0 auto;    }    .invoice-header h1 {        font-size: 20px;    }    .items th, .items td {        font-size: 12px;    }    .total p {        font-size: 14px;    }    .invoice-footer {        font-size: 10px;    }    @page {        size: A6;        margin: 0;    }    .invoice {        page-break-after: always;    }}

However, in the print view, I see some alignment issues. The invoice layout is not displaying as expected. Could you suggest a solution to adjust the layout for A6 invoice printing?

The currently used printer is printing invoices in A6 size correctly, without any errors. The print settings are configured to the following dimensions: 80 (72.1) * 297 mm.

enter image description here



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>