Jump to content

absolutebeginner

Members
  • Posts

    9
  • Joined

  • Last visited

Posts posted by absolutebeginner

  1. Hmm, seems I jumped the gun. 

    The  $(document).ready(function() part seemed to create issues with certain browsers. I removed it and added the  $("#col1 ~ 3").css("height","auto"); lines at the beginning of the resize event. It appears to have another advantage in making responsive code for small screens unnecessary. Still testing, but looking good so far.

                $(window).resize(function(){
                
                    $("#col1").css("height","auto");
                    
                    $("#col2").css("height","auto");
                    
                    $("#col3").css("height","auto");
                
                    if($("#col1").css("height") >= $("#col2").css("height")){
                
                        $("#col2").css("height", function(){ 
                            return $("#col1").height();
                        });            

                        $("#col3").css("height", function(){ 
                            return $("#col1").height();
                        });
                    
                    }
                    
                    else {
                    
                        $("#col1").css("height", function(){ 
                            return $("#col2").height();
                        });            

                        $("#col3").css("height", function(){ 
                            return $("#col2").height();
                        });    
                    
                    }
                
                });

  2. I appear to have solved this, almost.

    Due to word length vs column height, it's always the first card's div or the second card's div that has more height. 

    After giving them ids of "col1", "col2" and "col3", I use the below jQuery. I guess that a better solution to is to loop through each of them, but I'm not at that level yet. I'm also using the resize event, for when I manually adjust the browser width. Note that it's not perfect, I get some weird overflow at certain resolutions. Also see the issue when rotating devices to "portrait" mode.

                // Equalise card heights
                $(document).ready(function(){
                
                    if($("#col1").css("height") >= $("#col2").css("height")){
                
                        $("#col2").css("height", function(){ 
                            return $("#col1").height();
                        });            

                        $("#col3").css("height", function(){ 
                            return $("#col1").height();
                        });
                    
                    }
                    
                    else {
                    
                        $("#col1").css("height", function(){ 
                            return $("#col2").height();
                        });            

                        $("#col3").css("height", function(){ 
                            return $("#col2").height();
                        });    
                    
                    }

                });        

                $(window).resize(function(){
                
                    if($("#col1").css("height") >= $("#col2").css("height")){
                
                        $("#col2").css("height", function(){ 
                            return $("#col1").height();
                        });            

                        $("#col3").css("height", function(){ 
                            return $("#col1").height();
                        });
                    
                    }
                    
                    else {
                    
                        $("#col1").css("height", function(){ 
                            return $("#col2").height();
                        });            

                        $("#col3").css("height", function(){ 
                            return $("#col2").height();
                        });    
                    
                    }
                
                });

    I'm working on resetting the heights in "portrait" mode as there's too much white space due to the height manipulation.

    @media only screen and (max-width: 600px) {

        //responsive code goes here

    }

    Anyway, I'll post what I came up with later if successful. If any of you have a better solution to what I have so far, or something to reset the heights when in portrait mode, I'll be glad to see it.

  3. Hi everyone,

    I borrowed part of the Marketing / Website Template (W3.CSS), specifically the <!-- Work Row --> portion.

    It looks fantastic, but according to the device browser, (specifically phones and tablets) when in "landscape" mode, the "w3-card" divs have different height according to the text.

    I've been trying for days to find a solution - flexbox, w3-cell, pseudo-elements - mostly way above my understanding, and nothing has worked so far. Wouldn't be surprising if I've found a valid solution and mucked it up because of my inexperience :(

    Anyway, here's the code from the template. Maybe delete  <p>Blablabla</p> from one one of the divs inside the cards to see the issue. Actually the length of text I have inside those divs results in the cards showing the same height down to 1440px, any smaller results in the cards showing unequal height.

    <!-- Work Row -->
    <div class="w3-row-padding w3-padding-64 w3-theme-l1" id="work">

    <div class="w3-quarter">
    <h2>Our Work</h2>
    <p>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.</p>
    </div>

    <div class="w3-quarter">
    <div class="w3-card w3-white">
      <img src="/w3images/fjords.jpg" alt="Vernazza" style="width:100%">
      <div class="w3-container">
      <h3>Customer 1</h3>
      <h4>Trade</h4>
      <p>Blablabla</p>
      <p>Blablabla</p>
      <p>Blablabla</p>
      <p>Blablabla</p>
      </div>
      </div>
    </div>

    <div class="w3-quarter">
    <div class="w3-card w3-white">
      <img src="/w3images/lights.jpg" alt="Cinque Terre" style="width:100%">
      <div class="w3-container">
      <h3>Customer 2</h3>
      <h4>Trade</h4>
      <p>Blablabla</p>
      <p>Blablabla</p>
      <p>Blablabla</p>
      <p>Blablabla</p>
      </div>
      </div>
    </div>

    <div class="w3-quarter">
    <div class="w3-card w3-white">
      <img src="/w3images/mountains.jpg" alt="Monterosso" style="width:100%">
      <div class="w3-container">
      <h3>Customer 3</h3>
      <h4>Trade</h4>
      <p>Blablabla</p>
      <p>Blablabla</p>
      <p>Blablabla</p>
      <p>Blablabla</p>
      </div>
      </div>
    </div>

    </div>

  4. I worked out how to it using some jQuery. Don't know if it's good practice to mix (regular?) Javascript and jQuery, but here's how I did it. (You guys probably do this better in your sleep)

    In the button tags, I added IDs named the same as the div IDs, but with "_btn" on the end.

    The Javascript/jQuery code is this (using a link to google.apis at the top for the jQuery, jQuery code is shown in blue)

                function Accordion(id) {
                    var x = document.getElementById(id);
                    if (x.className.indexOf("w3-show") == -1) {
                        x.className += " w3-show";
                        $("#"+id+"_btn").text("Hide details");
                    } else { 
                        x.className = x.className.replace(" w3-show", "");
                        $("#"+id+"_btn").text("Click for details");
                    }
                }

    Tested on Chrome, FF, IE, Edge and Safari (PC version and iPhone)

  5. I have some W3.CSS accordions on a webpage based on this tutorial.

    They work fine, but I'd like to change the button text too (not just show/hide the div)

    When shown, I'd like the button to show "Click for details".

    When hidden, I'd like the button to show "Hide details".

    Thanks in advance for any assistance/advice you can give me.

     

     

     

  6. Hi Everyone,

    First of all, w3Schools is an incredible resource.

    I was able to find code for Sticky Top Navigation and Responsive Top Navigation.

    Sticky Top Navigation

    https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

    Responsive Top Navigation

    https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

    But what I really want is both. Is it possible?

    Also, I don't know if this is wise, but I'm trying to W3.CSS (which I just discovered) but I settle for anything that works.

    On a related note, in CSS, what do some styles use "." and some use "#"?

    Many thanks in advance for any help you can give me?

     

     

×
×
  • Create New...