.clone().appendTo - Replace element styles not working?

Question

I have individual three arrows. on click; I want the div below them (letsChat) to change styles and I want to clone and append relevant information in that div. I also want it to revert back to it's original state when it is clicked again or if orientation is changed to portrait.

document.querySelector('#compositionArrow').onclick = function(){
  var letsChat = document.querySelector('.lets-chat');
  var letsChatButton = document.querySelector('.lets-chat a');
  var compositionArrow = document.querySelector('#compositionArrow')
  var compositionText = document.querySelector('.composition-text');

    if (letsChatButton.style.display='flex' && window.matchMedia("(orientation: landscape)").matches) {
        
      compositionArrow.style.transform='rotate(180deg)';

      //letsChat.appendChild(compositionText).cloneNode(true);
      //compositionText.clone().appendTo.letsChat; return false;
      document.querySelector('.composition-text').clone().appendTo(document.querySelector('.lets-chat'));
      letsChat.style.background='#00BCD4';
      letsChatButton.style.display='none';
    }
    
    else if (letsChatButton.style.display='none' || window.matchMedia("(orientation: portrait)").matches){ 
      
      compositionArrow.style.transform='rotate(180deg)';

      letsChat.style.background='#ff8f00';
      letsChatButton.style.display='flex';
    }
}

example can be found below: (you may have to play with window

artpenleystudios.com

CaffeineFueled · Answer 1 · 2016-05-02T00:06:09.023

0

Here's something that demonstrates part of what you asked. It doesn't take into account orientation change, but it handles the click part. As far as I know, there's no straightforward way to detect orientation change, but here's an article that talks about a few options. Another idea would be to use jQuery Mobile as it fires orientationchange events.

So after much back and forth and after looking at your site more closely, this is what I managed to cobble together.

jQuery('#compositionArrow').click(function() {

  var $letsChat = jQuery('.lets-chat');
  var letsChat = $letsChat[0];
  var letsChatButton = $letsChat.find('a')[0];

  // Remove old composition text if it exists.
  $letsChat.find('.composition-text').remove();

  if (letsChatButton.style.display !== 'none' && window.matchMedia("(orientation: landscape)").matches) {

    this.style.transform = 'rotate(180deg)';

    $letsChat.append(jQuery('.composition-text').clone());
    letsChat.style.background = '#00BCD4';
    letsChatButton.style.display = 'none';
  }

  else if (letsChatButton.style.display === 'none' || window.matchMedia("(orientation: portrait)").matches) {

    this.style.transform = '';

    letsChat.style.background = '#ff8f00';
    letsChatButton.style.display = 'flex';
  }

});

It works for me in FireFox on a downloaded version of your site.

Cheers!

edited May 02 '16 at 00:06

answered Apr 29 '16 at 14:10

CaffeineFueled

561
2
9

Thanks! this is exactly what I need, except on mine debug comes up with "Uncaught TypeError: $ is not a function" and doesn't work? I tried relinking jQuery and then it just did nothing?! so strange – Art Penley Apr 29 '16 at 17:24
@ArtPenley - Interesting. The web site you linked seems to be including jQuery. Maybe something else is overriding **$**. I have updated my code snippet (above) to compensate for this. If that still doesn't work, I'll convert it back to plain JavaScript. Let me know! – CaffeineFueled Apr 29 '16 at 17:59
Thanks for all your help I really appreciate it, it's still not working? it's not even giving any errors? just nothing is happening? – Art Penley Apr 29 '16 at 18:43
@ArtPenley: At this point, I'd probably need to see the exact code you're working with in order to continue helping. Is the link to your website (that you provided above) the most recent code? – CaffeineFueled Apr 29 '16 at 20:01
Hi, yes the link is up to date, the code you provided is in it, I've been playing around with it but I'm totally stumped, in not very experienced with JavaScript and I'm fairly new to Wordpress too – Art Penley Apr 30 '16 at 21:42
@ArtPenley: After playing around with your website locally, I think I managed to hack together something that'll work. I updated my answer above. Good luck! – CaffeineFueled May 02 '16 at 00:06

.clone().appendTo - Replace element styles not working?

1 Answers1