CSS within PHP statement

Question

I am trying to create a number of div's that are responsive to a click event via js. If I use a universal id/class instead of a variable it works but upon clicking every div by the same name responds. Here is the code, much thanks ahead of time!

    <?php
$con=mysqli_connect("host","user","password","database");
// Check connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$sql = "SELECT * FROM items";
$result = mysqli_query($con,$sql);


echo "";
while ($row = mysqli_fetch_array($result)) {
    echo "

    <style>


#" . $row['ID'] ." {
    margin-left: 100px;
    margin-top: 0px;
    height:0px;
    width:750px;
    background: rgba(255, 255, 255, 0.3);
    color: rgba(11, 11, 11, 0.8);
    cursor:pointer;
    transition: height 0.5s;
    border-radius: 10px;
    overflow: hidden;  
    box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
  -webkit-transition:box-shadow 1.0s;
    }
#" . $row['ID'] .".csseffect {
    margin-left: 100px;
    margin-top: 5px;
    width: 750px;
    height: 125px;
    }    
#" . $row['item'] ." {
  margin-left: 75px;
  height: 50px;
  width: 800px;
  outline: none;
  font-family : inherit;
  font-size   : 100%;
  background: rgba(255, 255, 255, 1.0);
  -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
  -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
  box-sizing: border-box;
  border-radius: 20px;
  padding: 5px;
  border: solid 1px #dcdcdc;
  box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
  -webkit-transition:box-shadow 0.5s;

    }

  </style>



    <div id=\"".$row['ID']."\" class=\"".$row['ID']."\">" . $row['item'] ."<br></div>
    <div id=\"".$row['item']."\" class=\"".$row['item']."\"><br>
    <div class=\"forms\">
Blah blah blah
</div>
<p class=\"pos_fixed\">Some positioned text.</p>
</div><br>

<script>
$(document).ready(function(){  // when the page has loaded in browser...
  $('.".$row['ID']."').click(function(){      // bind a click event to the div element...
    $('.".$row['item']."').toggleClass('csseffect');  // that toggles the   'csseffect' class
  });
});


</script>


";
}
?>

instead of being a smart ass, try explaining why I shouldn't be using an echo to begin with and maybe something useful beyond your half cent of sarcasim — Leo Frost
– Leo Frost, Commented Mar 23, 2015 at 14:05
WOOO!! Dude somebody woke up on the wrong side of the bed today. It's called having a sense of humor. — dowomenfart
– dowomenfart, Commented Mar 23, 2015 at 14:07
Well, this is complete nonsense, put that CSS in a .css file with a class as a selector, and do the same with the Javascript, it belongs in a .js file, with a class as a selector, and then use this to reference the clicked element like others have said above. What you're doing is not the way to solve this. — adeneo
– adeneo, Commented Mar 23, 2015 at 14:14

Chris · Accepted Answer · 2015-03-23 14:25:48Z

1

What about putting each item group in a div and fire the toggle when the containing div gets clicked instead.

<div class="div_class">    
    <div id=\"".$row['ID']."\" class="id_class">" . $row['item'] ."<br></div>
    <div id=\"".$row['item']."\" class="item_class"><br>
        <div class=\"forms\">
            Blah blah blah
        </div>
    </div>
</div>

<script>
    $(document).ready(function(){  // when the page has loaded in browser...
        $('.div_class').click(function(){
        $(this > .item_class).toggleClass('csseffect');
            //toggle class
        });
     });
</script>

answered Mar 23, 2015 at 14:25

Chris

717 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Leo Frost Over a year ago

Just tried and this works as well! I will keep both your and um's answers for future reference as I work on the next iteration of the design. One may work when the other may not!

Turnip · Accepted Answer · 2015-03-23 14:26:22Z

1

You need to use $(this).next('.".$row['item']."') to target the next item that comes after the clicked element in the DOM...

$(document).ready(function(){  // when the page has loaded in browser...
  $('.".$row['ID']."').click(function(){      // bind a click event to the div element...
    $(this).next('.".$row['item']."').toggleClass('csseffect');  // that toggles the   'csseffect' class
  });
});

edited Mar 23, 2015 at 14:26

answered Mar 23, 2015 at 14:13

Turnip

36.8k15 gold badges92 silver badges118 bronze badges

1 Comment

Leo Frost Over a year ago

This is what I originally had, the issue is its clicking of one element to fire the csseffect on another element. The ID element/div when clicked is intended to expand out the item element/div

Collectives™ on Stack Overflow

CSS within PHP statement

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related