Jump to content

dsonesuk

Members
 View Profile  See their activity

  • Posts

    11,220

  • Joined

  • Last visited

  • Days Won

    117

 Content Type 

Posts posted by dsonesuk

    My CSS Tooltip is contained by the Div it's Inside Of

    in CSS

    Posted · Edited by dsonesuk

    The .panel parent container is using overflow: hidden; its doing what it says on the tin 'hiding" any overflow that occurs 

    .panel {
  padding: 10px;
  background-color: white;
  border: 1px solid rgb(246, 246, 246);
  border-radius: 0px 0px 10px 10px;
  box-shadow: rgba(152, 152, 152, 0.5) 0px 0px 5px;
  max-height: 0px;
  overflow: hidden; /* HERE*/
  transition: max-height 0.4s ease-out 0s;
}
.panel {
  padding: 5px;
  background-color: white;
  display: none;
  overflow: hidden;/* HERE*/
}

     

    How to write a html property value into its inner content?

    in JavaScript

    Posted

    Yep! Your right! I Suspect you are not including a function to look at and swap content after the whole page is fully rendered, by use of event or the placement of code below reference it is looking for.

    I recreated using my original example, removing for loop coding , indexing and it worked! So its the way your code is setup that is NOT working.

    How to write a html property value into its inner content?

    in JavaScript

    Posted

    Using https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_data 

    <!DOCTYPE html>
<html>
<head>
<script>
window.onload = function (){
swapContent();
}
function showDetails(animal) {
  var animalType = animal.getAttribute("data-animal-type");
  alert("The " + animal.innerHTML + " is a " + animalType + ".");
}

function swapContent(){
ItemElems = document.querySelectorAll("[data-itemprop='aaaaa']");

for (let i = 0; i < ItemElems.length; i++) {
  ItemElems[i].innerHTML = ItemElems[i].getAttribute('data-otherprop');
}

}


</script>
</head>
<body>

<h1>Species</h1>
<p>Click on a species to see what type it is:</p>

<ul>
  <li onclick="showDetails(this)" data-itemprop="aaaaa" id="owl" data-animal-type="bird" data-otherprop="11223344">Owl</li>
  <li onclick="showDetails(this)" data-itemprop="aaaaa" id="salmon" data-animal-type="fish" data-otherprop="11223344">Salmon</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>  
</ul>

</body>
</html>

     

    The CSS Grouping Selector

    in CSS

    Posted · Edited by dsonesuk

    The space indicates the next selector element will be a child of current. The h2 and h3 are siblings not parent of child so it is currect to add coma as they are independent from each other.

    Just noticed your html h2/3 closing tags are wrong also, opening and closing should match.

    How to fix responsiveness? When I reduce the pages, I put it to reduce the letters, but it was not good, and the image was also terrible.

    in CSS

    Posted

    responsive text can be done similar to 

    font-size: calc(20px + .5vw);

    the 20px will be minimum size, while .5vw will be to max size.

    If .content is max width: 800px; why have img element the same?

    use  

    img {
max-width: 100%;
height: auto;
}

    is the norm, the img will fill total width and not extent beyond 800px because its parent .content is prevented from doing that! height: auto; will make image expand proportionately by height.

    • Thanks 1

    Showing data from foreach into Marquee

    in PHP

    Posted 

    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0" />
        <title>Document Title</title>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <script type="text/javascript">

        </script>
        <style type="text/css">

            .scroll-left {
                width: 1200px;
                height:170px;
                overflow: hidden;
                position: relative;
                background: white;
                color: black;
                border: 1px solid orange;
                margin: 0 auto;
            }

            .scroll-left p {
                position: absolute;
                width: auto;
                height: 100%;
                font-size:150px;
                line-height: 170px;
                margin: 0;
                text-align: center;
                white-space:nowrap;
                padding-right: 100%;
                padding-left:25%;
                /* Starting position */

                top: 0;
                left:100%;

                -moz-transform: translateX(0);
                -webkit-transform: translateX(0);
                transform: translateX(0);
                /* Apply animation to this element */

                -moz-animation: scroll-left 13s linear infinite;
                -webkit-animation: scroll-left 13s linear infinite;
                animation: scroll-left 13s linear infinite;/**/
            }
            /* Move it (define the animation) */

            @-moz-keyframes scroll-left {
                0% {
                    -moz-transform: translateX(0);
                }
                100% {
                    -moz-transform: translateX(-100%);
                }
            }

            @-webkit-keyframes scroll-left {
                0% {
                    -webkit-transform: translateX(0);
                }
                100% {
                    -webkit-transform: translateX(-100%);
                }
            }

            @keyframes scroll-left {
                0% {
                    -moz-transform: translateX(0);
                    /* Browser bug fix */

                    -webkit-transform: translateX(0);
                    /* Browser bug fix */

                    transform: translateX(0);
                }
                100% {
                    -moz-transform: translateX(-100%);
                    /* Browser bug fix */

                    -webkit-transform: translateX(-100%);
                    /* Browser bug fix */

                    transform: translateX(-100%);
                }
            }
        </style>
    </head>
    <body>

        <div class="scroll-left">
            <p>Start - The Quick Brown Fox Jumps over the lazy Dog and barks out Loudly - End</p>
        </div>

    </body>
</html>

     

    Showing data from foreach into Marquee

    in PHP

    Posted

    I don't know why you included a flock of white birds, flying across pale blue sky, at a vast distance in a row of 3 for?

    The reason you get one row each time is $marq1 will always overwrite the previous content and replace with the new current content.

    You need to set $marq1 =$marq2=""; outside the loop the add '.=' to join content 

       if($reginoal_own_units==1){
                $marq1.= "you have ". $reginoal_own_units . " unit, ". $countryname ." and your revenue : ".round($regional_calc,0);
            }else{
                $marq2.= "you have ". $reginoal_own_units . " units, ". $countryname ." and your revenue : ".round($regional_calc,0);
            }

    ALL paragraphs, must be outside the loop, being block elements they will stack content above one another if within a loop. 

    How do I get the containers with the same width?

    in CSS

    Posted

    First you need to get parent container to be responsive and adjust to full width of device whether portrait or landscape orientation. Then how many colums to have to accommodate the content, this is can be for example 4 for wide width device such as desktop, 2 column device tablet and finally single column for moble phone.

    You use css media queries to identify device width and adjust width of 4 columns 25% desktop, 2 columns 50%, tablet, 100% width 1 column mobile OR any widths you want! If the content wont fit on one line you have no alternative  but to let it go to two. You could aways adust rows to allow 2 lines of content set min-height to allow this so 1 line of content is centred vertically. Again! You can set this to happen on smaller width devices using media queries for specific width of device, also change font size etc.

    I don't understand how I did this (lol)

    in CSS

    Posted

    100vh Viewport Height is the height of your device screen.

    So it adjusts and remains to current screen height, not like 100% which can be higher or lower than screen height depending its parent container height.

    When using 100px it remains vertically centered but! To 100px height from top of body container, instead of the body container full height of device screen. With overflow: hidden; the div container content probably would be clipped.

    align-items: deals with vertical alignment of display: flex; container.

    justify-content: deals horizontal alignment of display: flex; container.

     

     

    NFT Preview Card FrontEndMentor Challenge. My image "escapes" from its container and preview problems

    in CSS

    Posted · Edited by dsonesuk

    Try adding max-width: 100%; height: auto; to  image, I imagine its showing as full size and not responsive so any margins, padding will push its full width to the right.

    Try using unit of px, as rem, em dont work well in mobile because of pixel density so they end up looking elliptical. Set height as well and maybe add border round image instead.

×
×
  • Create New...