seo Question posted in
Some basic information to get you started with this can be found here.

.insertAfter() with resize() event: how to avoid duplication – SEO

I need to make a p tag visible or invisible into my html depending on the size of the width device.

The fastest solution is to give two different classes like “desktop” and “mobile” and make them displayed into block or none depending on media query.

The problem with this solution is that the text is into html twice, so for my SEO this is a problem: so, I create a little function, using .append, .appendTo aand finally .insertAfter, to insert my text into specific divs, but with no happy ending: https://jsfiddle.net/noemi84/rej5av6y/

<div class="main-image-block">

</div>

<div class="home-main-text">

</div>

<script>

function resize() {
  if (jQuery(window).width() < 934) {
    jQuery('<p>example text</p>').insertAfter('.main-image-block');
  } else {
    jQuery('<p>bottom text</p>').insertAfter('.home-main-text');
  }
}

resize();

jQuery(document).ready(function($) {

  $(window).on('resize', resize);

});

</script>

The p tag is duplicated again and again, but I want it once; I want also to have this resize active on the page, so, if a user resize the window he will never see two text but only the one depending on the actual window sizes.

Thanks a lot 🙂

Tags:

4

Answers


  1. 0

    There’s no need for JS code here as you can achieve what you need using CSS media queries.

    Simply insert the <p> element in all the places it may be viewed and set the CSS to only show the default in the initial state and hide the other. Then using an @media rule you can show the alternate one when the screen size meets your requirement. Try this:

    .main-image-block + p { display: none; }

@media (max-width: 934px) {
    .home-main-text + p { display: none; }
    .main-image-block + p { display: block; }
}

    <div class="main-image-block">MAIN IMAGE</div>
<p>testo di esempio</p>

<div class="home-main-text">HOME MAIN</div>
<p>testo di esempio</p>

    Working example

    If you try resizing the output frame of the jsFiddle you can see the effect working.

    Login or Signup to reply.
  2. 0

    Give an ID to the element and remove every occurence of it before inserting a new one 🙂

    function resize() {
  jQuery('#verySpecial').remove();
  if (jQuery(window).width() < 934) {
    jQuery('<p id="verySpecial">example text</p>').insertAfter('.main-image-block');
  } else {
    jQuery('<p id="verySpecial">bottom text</p>').insertAfter('.home-main-text');
  }
}

resize();

jQuery(document).ready(function($) {

  $(window).on('resize', resize);

});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main-image-block">

</div>

<div class="home-main-text">

</div>

    If you need multiple of these elements, you could do it on the same way, but with classes instead of id’s.

    Login or Signup to reply.
  3. 0

    I think @Roy McCrossan’s media queries way is the best solution. But since you’re asking for a JS solution (useful if maybe you need to do something else acording to screen size), this is the problem.

    function resize() {
  if (jQuery(window).width() < 934) {
    //EACH TIME the window is resized to any width under 934 px, the <p> is created and inserted
    jQuery('<p>example text</p>').insertAfter('.main-image-block');
  } else {
    //EACH TIME the window is resized to any width over 934 px, the <p> is created and inserted
    jQuery('<p>bottom text</p>').insertAfter('.home-main-text');
  }

    }

    Basically, you should either move the p or check if already exists before inserting a new one.

    Better insert the ps in your HTML and display them acording to screen size.

    <div class="main-image-block">

</div>
<p id="example-text">example text</p>

<div class="home-main-text">

</div>
<p id="bottom-text">bottom text</p>

<script>

function resize() {
  if (jQuery(window).width() < 934) {
    jQuery("#example-text").show();
    jQuery("#bottom-text").hide();
  } else {
    jQuery("#example-text").hide();
    jQuery("#bottom-text").show();
  }
}
...

    Other (better) option is to add a class name to the body or any other parent element and display/hide the elements with CSS.

    function resize() {
   if (jQuery(window).width() < 934) {
     jQuery("body").addClass("large-screen");
   } else {
     jQuery("body").removeClass("large-screen");
   }
 }

    Other option is to keep track of the resizes and only perform the changes when neccesary, instead of every time resize is fired.

    Login or Signup to reply.
  4. 0

    This Solution should work for you 🙂

    var mainImageBlock, homeMainText;
function resize() {
  if (jQuery(window).width() < 934) {
    if(!mainImageBlock){
      jQuery('.home-main-text').remove();
      jQuery('<p>testo di esempio</p>').insertAfter('.main-image-block');
      mainImageBlock = true;
      homeMainText = false;
      console.log('inside main-image-block');
    }
  } else {
    if(!homeMainText){
            jQuery('.main-image-block').remove();
      jQuery('<p>testo di esempio</p>').insertAfter('.home-main-text');
      homeMainText = true;
      mainImageBlock = false;
      console.log('inside home-main-text');
    }
  }
}

function initialize(){
    if(jQuery(window).width() < 934){
    mainImageBlock = false;
    homeMainText = true;
    console.log('init if');
  } else {
    mainImageBlock = true;
    homeMainText = false;
    console.log('init else');
  }
    resize();
}
initialize();

jQuery(document).ready(function($) {
  $(window).on('resize', resize);
});

    Fiddle: https://jsfiddle.net/3k46bhhs/1/

    console.log is to show that its working 😉 can be removed

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search