Forums

How to get ID of layout column EX: (ccm-layout-column-15)

Permalink
I have multiple rollover blocks on my page using Block Designer. Everything works great except that when you hover on one, they all rollover. This is because the code I have in the Block Config is using a class. What I need to do is setup my jQuery to insert a unique ID on each block.

I was thinking that if I could pull the id="ccm-layout-column-XX" then I could use that.

Anyone have any ideas?
 
tallacman replied on at Permalink Reply
tallacman
Looks like it should be similar to:
class="general-class-here-<?php  echo $bID;?>"
primead replied on at Permalink Reply
That works in the view. But my js needs to work along with it.
<script>
$(".rollover_container").hover(function(){
    $('.rollover_box').show();
},function(){
    $('.rollover_box').hide();
});
</script>
JohntheFish replied on at Permalink Reply
JohntheFish
use area (or block) design to add a marker class and select on that.
primead replied on at Permalink Reply
I have already done that.
<div class="rollover_container-5152" style="background-image: url(https://www.concrete5themes.com/application/files/4115/1257/1540/homebox-image-1.jpg)"> 
   <div class="rollover_box-5152">
      <div class="rollover_text">    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis ligula metus, quis sollicitudin turpis hendrerit eget. In luctus neque sapien, sit amet egestas justo tincidunt in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque fermentum mi interdum elit placerat porttitor. Suspendisse rhoncus velit neque.    <a href="http://google.com">Learn more ></a>
      </div>
   </div>    <div class="text"><h2>Sba<br>    Loans</h2></div> 
</div>


But I need the JS to target each one.
JohntheFish replied on at Permalink Reply
JohntheFish
$('.marker-class').each(function(){
  var target_block = $(this);
});
GrizzlyAdams replied on at Permalink Reply
I have an identical issue. Using the code examples above, I will illustrate my question.
<div class="rollover_container"> 
   <div class="rollover_box">
      <div class="rollover_text">    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis ligula metus, quis sollicitudin turpis hendrerit eget. In luctus neque sapien, sit amet egestas justo tincidunt in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque fermentum mi interdum elit placerat porttitor. Suspendisse rhoncus velit neque.    <a href="http://google.com">Learn more ></a>
      </div>
   </div>    <div class="text"><h2>Sba<br>    Loans</h2></div> 
</div>
<script>
$(".rollover_container").hover(function(){
    $('.rollover_box').show();
},function(){
    $('.rollover_box').hide();
});
</script>

Trying to incorporate what JohnTheFish added...

<script>
$('.rollover_container').each(function(){
  var target_block = $(this);
       $(this).hover(function(){
           $('.rollover_box').show();
        },function(){
            $('.rollover_box').hide();
      });
});
</script>


Something like this? I can't get it to work.
primead replied on at Permalink Reply
Hey all, I got this going. I forgot to post the answer. The JS is simply...
$(document).ready(function (e) {
    $(".rollover_container").hover(function (e) {
        $(this).find('.rollover_box').show();
    }, function (e) {
        $(this).find('.rollover_box').hide();
    });
});