lundi 26 avril 2021

Background color in HTML is not applied to the whole page

I made the background of the body gray . I added a picture to the body part but the back of the picture is white. but the back of the h4 sticker is gray . why the back of the picture is not gray .It happens if I manually give the basement px but I want it to do it automatically.

HTML CODES

<body class="body" style="background-color: #212325" > 
    
    <h4 class="h4"> <i style="color: yellow;" class="bi bi-upload"></i> Dikkat Çeken Yeni Diziler</h4>

    <div class="container">
      <div class="box">
      <a href="">  <img style="width: 200px; height: 300px;" src="assets/images/thePianist.jpg" alt="Shadow and Bone" ></a>
      </div>  
    </div>
   
     
</body>

CSS CODES

.h4{
    color: rgb(214, 214, 214);
    padding-bottom: 15px;
}

.body{
    padding-left: 15px;
    padding-top: 10px;
}

.container {
    width: 80%;
    padding: 80px 0;
    display: flex;
    flex-direction: row;
    float: left;
}

.box {
    width: 150px;
    height: 150px;
    background: gray;
    margin: 0px 14px;
    transition: 0.5s;
}

.box img {border-radius: 0px;}

.box:hover {
    transform: scale(1.1);
    background: black;
    z-index: 2;
}

It Look Like This :

unwanted image

I Want it look like this :

wanted




Pixi JS fill behaviour vs SVG fill behaviour

I'm wondering if there's a way to get the behaviour of Pixi.JS's Graphics API to fill the same way SVG paths are filled. I am guessing there may not be a quick-fix way to do this.

Basically, in SVGs when a path with a fill crosses over itself, the positive space will automatically get filled, whereas in the Pixi.JS Graphics API, if the path crosses itself it seems to try and fill the largest outside space.

This is quite difficult to explain in text so here is a codepen to show the differences between the two and how the same data will cause them to render in different ways.

And so you can see the code, here is my SVG:

<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" style="background-color:#5BBA6F">

    <path style="fill: #E74C3C; stroke:black; stroke-width:3" d="M 200 200 L 700 200 L 600 400 L 500 100 z" />
</svg>

And here is the Pixi.js implementation:

import * as PIXI from "https://cdn.skypack.dev/pixi.js";

 const app = new PIXI.Application({
      width: 800,
      height: 600,
      backgroundColor: 0x5bba6f
    });
app.start();
document.getElementById("root").appendChild(app.view)

const lineData = {
  color: 0xe74c3c,
  start: [200, 200],
  lines: [
    [700, 200],
    [600, 400],
    [500, 100],
  ]
};

  const { start, lines, color } = lineData;
  const g = new PIXI.Graphics();

    if (g) {
      g.clear();
      g.lineStyle({width:3})
      g.beginFill(color);
      g.moveTo(start[0], start[1]);
      lines.map((l) => g.lineTo(l[0], l[1]));
      g.closePath();
      g.endFill();
      app.stage.addChild(g);
    }

Thanks for taking a look.




Why ı cant change plugin.js path?

I am trying to implement Infinty-v2.0.0 theme. Why url has two dot ?I m sure there wasnt dot character in url(the error was shown in the pictures) . Pages are mostly work.But everytime when ı refresh page ,ı get plugin.js error in every time.I think this error cause switchery.min.css not found or another error . How can fix plugin.js ?

 <?php
    <script src="<?php echo base_url("assets");?>/assets/js/plugins.js"></script> ?php>

datatables.min.css

switchery.min.css




Old error message wont go away Eclipe - Tomcat

I am trying to implement simple rest-ful web-sevice where i get book number from url and embed book name in a json object. I followed a tutorial. It is working fine. So i furthered my work by adding data access stuff to retrieve credentials from data base and add to json object. The moment i ran service it gave me a couple of messages. i removed the code (data access), stopped tomcat, cleaned, re-built project and restarted tomcat. cleared history of chrome. but no matter what, service wont go in the previous state. Here initial class file (snippet 1):-

 package book;
//annotations
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;
import org.apache.tomcat.util.codec.binary.Base64;
import org.json.simple.JSONObject;
@Path("/number")
public class bnumber {
@GET
@Produces("application/json")
@Path("{booknumber}")
   //  public JSONObject numberinfo(@PathParam("booknumber") int bnumb) {       
JSONObject obj = new JSONObject();
String bname = "test book";
obj.put("name", bname);
obj.put("bookid", bnumb);
return obj;
}
}

the url that i use

   localhost:8080/WS/number/1234

i get output

    {name,test book; bookid,1234}

Now i added persistance to get data from db i recieved a myriad of errors (snippet 2):-

package book;
//annotations
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;
import org.apache.tomcat.util.codec.binary.Base64;
import org.json.simple.JSONObject;
@Path("/number")
public class bnumber {
@GET
@Produces("application/json")
@Path("{booknumber}")
   //  public JSONObject numberinfo(@PathParam("booknumber") int bnumb) {       
JSONObject obj = new JSONObject();
String bname = "test book";
//............data from db...............
List booklist = new ArrayList();
Session session = HibernateUtils.currentSession();

Criteria cri = session.createCriteria(BookInfo.class);
cr.add(Restrictions.eq("bookid",bnumb);
booklist = cr.list();
bname = boolist.get(0).getName();
//.......................................
obj.put("name", bname);
obj.put("bookid", bnumb);
return obj;
}
}

The errors i get for this are:=

Unresolved compilation errors:-
Illegal modifier for getName() only static final allowed
Duplicate local variable bnumb

So i reverted code back to snippet 1. However, the above mentioned error wont go away. Further, why cant i access db in this class, i have to as i need to get info for the book from DB. If not in this class, then what is the correct method?




best way to lock fields and methods in web app?

I've decided to build in my web and "read-only" mode which means that the user wont be able to changes certain data in certain field. I want to know what is the best way to prevent him from changing field and calling certain method that might change the current state (will break the read-only mode).

  1. I would've freeze everything but the problem is that some fields are not object so I cant freeze them

  2. I can use a lock for every methods I'm calling which will return if the read-only == true but that seems stupid to add it for each method

  3. I can try to do something with the event-listner but sit might be a problematic.

p.s I don't mind doing working hard, just want to make sure what the best practice for that scenario.

thanks again :)




JavaScript Regular Expression : I want to replace last 4 words of my variables

I'm currently making an e-commerce website with Spring, Java and Javascript. I want to hide the last four words of the users when they register a question like

hello123 >> hell**** stackoverflow >> stackover****

This is the code that I've written in my jsp.

<table>
<td id="userId">${ qna.userId }</td>
</table>

<script>
var userId = document.getElementById("userId");
    
    function maskingNumbers(userId) {
           return userId.replace(/\d(?=\d{4})/g, "*");
         }
</script>

Well, my "userId" still prints out on its original form. It would be really thankful if you be specific with the steps.




Media query not working (or something else) [duplicate]

There is a code (file tablet.css)

body {
    margin: 0;
    padding: 0;
}

.globalcontainer {
    margin-top: 0px;
    margin-right: (calc(39/768*100)%);
    margin-bottom: 0px;
    margin-left: (calc(39/768*100)%);
    /*height: 100%;*/
}

.header > .header__text {
position: relative;
width: 93px;
height: 24px;
left: 0;
margin-top: 129px;
margin-bottom: 20px;

font-family: TT Norms;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 100%;
/* identical to box height, or 24px */


color: #000000;
}

/*
.header__buttons {
    left: 0;
    top: 193px;
}
*/


.header__button {
    width: 75px;
    height: 30px;
    border-radius: 4px;
    border-color: #5f3ec0;
    background-color: #fff;
    margin-right: 1.75%;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

.header__buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 7px 15px 7px 0px;
    overflow: hidden;
    /*margin-right: 10%;*/
}
<html>
<head>
<!-- <link rel="stylesheet" href="testsite.css">-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Example</title>
<link rel="stylesheet" type="text/css" href="../css/mobile.css" media="screen and (min-width: 320px) and (max-width: 639px)"></link>
<link rel="stylesheet" type="text/css" href="../css/tablet.css" media="screen and (min-width: 640px) and (max-width: 1023px)"></link>
<link rel="stylesheet" type="text/css" href="../css/desktop.css" media="screen and (min-width: 1024px) and (max-width: 1920px)"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>
<body>
    <div class="container">
        <div class="globalcontainer">
                <div class="header">
                        <div class="header__text">
                            Обзоры
                        </div>
                        <div class="header__buttons">
                            <!-- <span> -->
                                <button class="header__button">Все</button>
                                <button class="header__button">Видео</button>               
                                <button class="header__button">Текст</button>               
                                <button class="header__button">Обзоры</button>
                                <button class="header__button">Сравнения</button>
                                <button class="header__button">Краш видео</button>
                                <button class="header__button">Распаковка</button>
                            <!-- </span> -->
                        </div>
                </div>
        </div>
    </div>
<script type="text/javascript" src="jsactions.js"></script>
</body>
</html>     

And it is displayed as in the screenshot below

Tablet view

Where is the padding margin-left: (calc (39/768 * 100))%;? (fillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillervfillerfillerfillerfillervvfillerfillerfillerfillerv)