Forums

Give help. Get help.

Mottie


Forum Replies Created

Viewing 15 posts - 1 through 15 (of 1,287 total)
  • # October 4, 2017 at 9:45 pm

    Maybe you need the polyfill? https://github.com/adobe-webplatform/dropcap.js

    # June 27, 2017 at 7:56 pm

    It looks like I can’t show the HTML properly… you can see it in the jsFiddle I shared.

    # June 27, 2017 at 7:49 pm

    You really shouldn’t use tables for that. I would recommend using a css column layout (demo)

    HTML

    <div class="row">
      <div class="column">
        <div class="cell">
          <p>2:00<span>PM</span> Jim Smith</p>
          <em>Chiropractic Standard <i class="fa fa-clock-o"></i> 15 min</em>
        </div>
        <div class="cell">
          <p>2:15<span>PM</span> Patient Name</p>
          <em>Chiropractic Standard <i class="fa fa-clock-o"></i> 30 min
            <div class="spacer"></div>
          </em>
        </div>
        <div class="cell">
          <p>2:45<span>PM</span> Patient Name</p>
          <em>Chiropractic Standard <i class="fa fa-clock-o"></i> 15 min</em>
        </div>
      </div>
      <div class="column">
        <div class="cell">
          <p>2:00<span>PM</span> Bob Jones</p>
          <em>Chiropractic Standard <i class="fa fa-clock-o"></i> 15 min</em>
        </div>
        <div class="cell">
          <p>2:15<span>PM</span> Patient Name</p>
          <em>Chiropractic Standard <i class="fa fa-clock-o"></i> 15 min</em>
        </div>
        <div class="cell">
          <p>2:30<span>PM</span> Patient Name</p>
          <em>Chiropractic Standard <i class="fa fa-clock-o"></i> 30 min
          <div class="spacer"></div>
          </em>
        </div>
      </div>
    </div>
    

    CSS

    .row {
      -moz-column-count: 2;
      -webkit-column-count: 2;
      column-count: 2;
      padding: 10px;
    }
    .column {
      -moz-column-width: 50%x;
      -webkit-column-width: 50%;
      column-width: 50%;
    }
    .cell {
      padding: 10px;
      border-top: 1px solid #777;
    }
    .cell span {
      font-variant-caps: all-small-caps;
    }
    .cell em {
      background: #e6e6f8;
      display: block;
      padding: 2px;
    }
    .cell .spacer {
      height: 30px;
    }
    

    The .cell .spacer was included only for appearances…

    # May 25, 2017 at 12:31 pm

    @raju0prt I don’t have a copy of the original post I made… not sure why it’s gone now. Sorry!

    # May 11, 2017 at 2:07 pm

    Hehe, I did Funkaholik … https://github.com/Mottie/visualNav

    # April 1, 2017 at 8:47 am

    It looks like Cherri is a purchased theme with 6 months of support, why not use that support?

    in reply to: CSS Tab Adjustments
    # April 1, 2017 at 8:44 am

    Also the HTML isn’t valid in that they are not wrapped properly…

    <h2><font color=#ce6905>Product Development</h2></font>
    

    When you do replace the <font> tag with a <span>, make sure to place the closing tag inside the header:

    <h2><span class="highlight-color">Product Development</span></h2>
    
    # March 22, 2017 at 6:38 pm

    Hi @neeta!

    Sadly, there are no parent selectors in css (see this post). The easiest option would be to always target the parent when adding and removing classes. For example, add a “child-1-active” or “child-2-active” and a “active” class to the parent when a child is active.

    Or, maybe I misunderstood your question. If so, please provide an example on CodePen… include any relevant HTML, CSS and any javascript please.

    # March 22, 2017 at 2:10 pm

    I have a jQuery plugin named visualNav that works well with page blocks that are smaller than the viewport. It also allows you to cancel the scrolling animation on user interaction.

    This demo even updates the hash as well as scrolls horizontally with a different easing setting.

    Eventually, I’d like to rewrite it in plain JS and use CSS/polyfill for the smooth scrolling.

    # March 21, 2017 at 6:37 pm

    Smooth scrolling will eventually become available to all browsers, and all you would need to do is add a css property, see scroll-behavior.

    Current browser support @ http://caniuse.com/#feat=css-scroll-behavior

    For now, you can use this polyfill to add support: https://github.com/iamdustan/smoothscroll

    # March 20, 2017 at 11:58 am

    @motion2082 Have you see this article? https://css-tricks.com/centering-in-the-unknown/

    Newer methods use flexbox:

    div {
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: center;
    }
    
    # March 20, 2017 at 11:26 am

    You can accomplish the same thing without using javascript…

    http://codepen.io/Mottie/pen/bqLaJm

    HTML template

    <article>
      ....
      <input id="read-more-toggle-1" class="read-more-toggle" type="checkbox">
      < div class="read-more-content">
        ...
      < /div>
      <label class="read-more-toggle-label" for="read-more-toggle-1">Read </label>
    </article>

    Change the number in “read-more-toggle-1” if you add more than one “Read More” block

    CSS

    .read-more-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height .5s ease;
    }
    .read-more-toggle {
      display: none;
    }
    .read-more-toggle-label {
      display: inline-block;
      user-select: none;
      cursor: pointer;
      border: none;
      padding: 5px;
      margin: .5em;
      font-size: .8em;
      background: #555;
      color: white;
    }
    .read-more-toggle-label:after {
      content: "More";
      display: inline-block;
    }
    .read-more-toggle:checked + .read-more-content {
      display: block;
      /* css animation won't work with "auto"; set to some height larger
        than the content */
      max-height: 1000px;
    }
    .read-more-toggle:checked + .read-more-content + .read-more-toggle-label:after {
      content: "Less";
    }
    
    # March 20, 2017 at 10:56 am

    Well actually that question/answer on SO is about binding to touch & click events, not really about ghost clicks. I think you should find a question and add an answer there since you’re doing all this work – I’d up-vote you!… or at least write up a blog post somewhere and share a link here.

    # March 20, 2017 at 5:30 am

    Hehe thanks for continuing to work on this… did you try adding the css property?

    # March 18, 2017 at 11:53 pm

    It looks like you figured out the problem of the images not working… wrong directory?

    But now if you click on the page, a javascript error pops up:

    functions.js: 170 Uncaught TypeError: Cannot read property ‘tagName’ of null

    You can fix it by adding a check on the n parameter:

    function isInPageLink(n) {
      return n && n.tagName.toLowerCase() === 'a' &&
          n.hash.length > 0 &&
          stripHash(n.href) === pageUrl;
    }
    
Viewing 15 posts - 1 through 15 (of 1,287 total)
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag