Activity

• 
  Comment

  Keryth987 → thaen

  August 14

  Ok was gonna post publically but think it better to msg you. I shared that piece of code, which I got the original from these very forums a year or so ago, to help people out and to improve OP. The capability that one piece of Java code does is a capability many of OP’s competitors already provide.
  If you must ‘close the loophole’ I ask first that you find a way for op to allow a new tab or window to be opened first. I know I’m not the only one using this code for different links
  
  Also you might want to rethink the whole outlook on slamming down on Java. I know from the discord and conversations with many of the COTM winners that Tightening restrictions on what we can do as designers is liable to bring back the feelings that you have worked so hard to fix. If other sites can allow the usage there must be a way to do so safely beyond not allowing it

  • 
    thaen

    August 14

    Hey Keryth,
    
    I definitely appreciate the comments.  Actually, can you post this reply publicly on that thread, and if you're comfortable, ask for anyone in the discord that might be interested to also comment?
    
    I'd like to have an open discussion and see if anyone has any ideas about how to allow this, while not leaving it open for hackers to steal someones info or hack their computer.  If y'all can point me at an example of a competitor that is allowing something like this, then I should be able to look at how they are doing it and use the same solution, assuming their solution actually doesn't allow an exploit.
    
    Thanks!
    
    Aleks
  • 
    thaen

    August 14

    Meant to say, the fix I'm working on currently would leave existing uses of this in place, but re-Saving a page make it not work, and new pages would not work.
  • Write a comment
• 
  Comment

  CharlesNCharge → thaen

  July 9

  This was the code I entered: I went through it line by line before finalizing it, and thought it all made sense. Code is from https://www.w3schools.com/howto/howto_css_timeline.asp, which was recommended by the forums here, so I must have entered something wrong - otherwise, you'd have had this problem before.
  
  /* CAMPAIGN TIMELINE */
  
  * {box-sizing: border-box;}
  body {background-color: #474e5d; font-family: Helvetica, sans-serif;}
  .timeline {position: relative; max-width: 1200px; margin: 0 auto;}
  .timeline::after {content: ''; position: absolute; width: 6px; background-color: white; top: 0; bottom: 0; left: 50%; margin-left: -3px;}
  .container {padding: 10px 40px; position: relative; background-color: inherit; width: 50%;}
  .container::after {content: ''; position: absolute; width: 25px; height: 25px; right: -17px; background-color: white; border: 4px solid #FF9F55; top: 15px; border-radius: 50%; z-index: 1;}
  .left {left: 0;}
  .right {left: 50%;}
  .left::before {content: " "; height: 0; p

  • 
    thaen

    July 9

    I think the issue is the ".letft" and ".right" global lines.  OP already uses ".left" and ".right" classes in the layout, so these are going to cause issues if they aren't scoped.  I'd suggest something like this (I added ".timeline " in front of the ".left" and ".right" lines.  And also deleted the "*" and "body" lines as those will also affect your entire Campaign):
    
    /* CAMPAIGN TIMELINE */
    
    .timeline {position: relative; max-width: 1200px; margin: 0 auto;}
    
    .timeline::after {content: ''; position: absolute; width: 6px; background-color: white; top: 0; bottom: 0; left: 50%; margin-left: -3px;}
    
    .timeline .container {padding: 10px 40px; position: relative; background-color: inherit; width: 50%;}
    
    .timeline .container::after {content: ''; position: absolute; width: 25px; height: 25px; right: -17px; background-color: white; border: 4px solid #FF9F55; top: 15px; border-radius: 50%; z-index: 1;}
    
    .timeline .left {left: 0;}
    
    .timeline .right {left: 50%;}
    
    .timeline .left::before {content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; right: 30px; border: medium solid white; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent white;}
    
    .timeline .right::before {content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; left: 30px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent;}
    
    .timeline .right::after {left: -16px;}
    
    .timeline .content {padding: 20px 30px; background-color: white; position: relative; border-radius: 6px;}
    
    @media screen and (max-width: 600px) { .timeline::after {left: 31px;}
    
    .timeline  .container {width: 100%; padding-left: 70px; padding-right: 25px;}
    
    .timeline  .container::before {left: 60px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent;}
    
    .timeline  .left::after, .right::after {left: 15px;}
    
    .timeline  .right {left: 0%; }}
  • Write a comment