Jump to content

dsonesuk

Members
 View Profile  See their activity

  • Posts

    11,220

  • Joined

  • Last visited

  • Days Won

    117

 Content Type 

Everything posted by dsonesuk

  1. 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*/ }
  2. dsonesuk
    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.
  3. dsonesuk
    QuerySelector() produces a list of matching selector elements which is read by using a index such as used in for loop. Now! how would you index a single item using index key here.
  4. dsonesuk
    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>
  5. dsonesuk
    For every image clicked the OP wants individual pop-up modal for that image I believe.
  6. dsonesuk
    Just because a bucket is empty does not mean it is no longer a bucket..its just a empty bucket. Same goes for empty p, div etc. A tag of br, hr, input, img etc is referred to as a void element. It can never hold, contain content.
  7. dsonesuk
    The hash only, in href does not do anything but stay on current page. Javascript filters the inner text name only and if you are using html5, id ref is used instead of name attribute, so try that instead.
  8. 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.
  9. dsonesuk
    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.
  10. dsonesuk
    IT will still! Be child of header if using position fixed for that element and force it down to bottom using bottom: left: or right: properties and order won't change.
  11. dsonesuk
    IF you mean taking that element outside the header element without using position fixed, then no! It can't be done with CSS, only javascript. CSS can change the order of child sibling elements using display: flex; and order: though.
  12. dsonesuk
    <!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>
  13. dsonesuk
    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.
  14. dsonesuk
    There is no need to use outdated marquee tag, with css3 you can use animation, transform to achieve the same result.
  15. dsonesuk
    Select elements from developer tool then computered styles tab, then look up font-size. IT might be because you have no viewport meta tag, https://www.w3schools.com/css/css_rwd_viewport.asp
  16. dsonesuk
    Seems like its doing exactly what you want it to do, even though you are using old school elements and styling.
  17. dsonesuk
    You cant have a nested comment within a comment, all you can do is close the beginning comment tag before nested comment, then a opening comment tag after nested comment for the end comment tag. /* .foobar { aaa: 10px; *//* blah blah blah comment *//* bbb: 15px !important; ccc: something !important; } */
  18. dsonesuk
    Then you need to allow for margins in width margins left, right 15px. flex: 1 1 auto; max-width: calc(100% - 30px);
  19. dsonesuk
    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.
  20. dsonesuk
    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.
  21. dsonesuk
  22. dsonesuk
    login is in form container element, the others are outside form element in a separate ul element, good luck with that.
  23. dsonesuk
    Strange? It worked for me! Must be magic of xmas.
  24. 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.
  25. dsonesuk
    Can't you create your own print css and @import screen css. If you can use identifier for print css you can add attribute disable manually or with js.
×
×
  • Create New...