Design a php form scroll list?!

[adishardis]

Hi,

I'm working on a site and but have come to an halt.

http://adam.synology.me/help1.png

today I have a dropdown list (circled in red) which lets the user choose a row of data from my database to visualize in the area to the right in various graphs and such.

I would instead of the dropdownlist like to have it like the green circled area in wich every row in the database is represented by a picture and some keystats from that row and when clicking it would behave like the dropdownlist and visualizing the data from the selected row.

Is this even technically possible?

Sinceraly Adam

Yeah, sure - it should be quite straightforward.
You can place the data rows into an unordered list or a table - the choice is yours.
You can limit the maximum height of the table/list (place it in a div) and then use the css overflow property in order to describe scrollbar options.

If you place the whole list item within a link (a tag) or use js, for example in jQuery - $('li.dbthumb').click(...) you can use Ajax to display further info on that clicked item.

With jQuery, it's very simple. There are many ways to do this, perhaps the easiest is to apply a unique id (record #5) to the listitem id attribute:

<li id="item_5" class="dbthumb">...</li>
<li id="item_6" class="dbthumb">...</li>
<li id="item_7" class="dbthumb">...</li>

Pick up the id via jQuery and pass it on to a php file via $.post or $.ajax
The data from the php file then updates the 'graph div' or whatever.

[adishardis]

Thanks for your suggestions, I will look into it!

[adishardis]

So, i've designed the "scroller" as described, surrounded the divs with a link tag which gets its id from the appropriate row like this:

<a href="index.php" class='mylink' id=".$row[Id]."><div class='scrollcard'>...

So now I'm wondering how to get the id number from the link to my $scrollvariable. I don't know how to finish the jquery you started: $('li.dbthumb').click(...).

I don't know really what I'm doing but here's what I started with :)

$(document).ready(function() {
    $('.mylink').click(function() {
        $scrollvariable=id...

I would be supergrateful for some more assistance!!

Oh, and the variable $scrollvariable is on the same page if that matters!

Cheers
Adam

You can access the new (html5?) data-* properties as opposed to providing each link with a numeric index - which doesn't look that nice :)

<a href="index.php" class='mylink' data-id=".$row[Id]."><div class='scrollcard'>...

In your code, you use a php variablen($scrollvariable) in the middle of your js. That's all well and good if you're writing on page load, but useless for anything else. Once the page is sent from the server, pHp is done - the browser cannot manipulate php variables. JS variables of course can be manipulated through the browser window.

[adishardis]

Thank you! Didn't understand/know about the client-server side of php, hmmm this makes me question my use of php variables on my page... But for the time being I ended up sending the variable via url and using $scrollvariable=$_GET["scroll"] setting my php variable.

The last thing (hopefully) regarding the "clickable scroll list" is:
How to make the DIV "card" in the list change border-color after clicked link (and then refreshed page).

Is it maybe possible to put an if statement inside the style attribute of the div like

   echo "<div data-id=".$row26[Id]."  .if ($scrollvariable==data-id){style=\" border-style:solid;border-width:5px;\"}./>; echo "</div>";

Thanks again for taking time!

/Adam

Not sure what you're after. You want to use a php variable to check the value of a data-* property? That won't work.

You can do soemthing like this:

$style = ($scrollvariable == $row26['Id']) ? ' style=" border-style:solid;border-width:5px;"' : '';
echo "<div data-id='{$row26[Id]}'$style /></div>";

However, you may find setting a classname more useful:

$classname = ($scrollvariable == $row26['Id']) ? ' focused' : 'normal';
echo "<div data-id='{$row26[Id]}' class='$style' /></div>";

You just have class rules in CSS:

.focused{
    border-style:solid;
    border-width:5px;
    color: red;
}

.normal{
    color: blue;
}

[adishardis]

The second suggestion was exactly what I needed!!! I'm unbelievably grateful for all of your help! Thanks for your patience! :)

/Adam