jQuery DIVs?

[colby2152]

I am having a tough time with jQuery in SMF.  I don't think I am doing it right.  All I really want to do is having multiple DIVs that are linked to a selection button that hides or shows them.  Ultimately, I only want to have one DIV show at a time, but I am trying to start from scratch.

An example with three images or text links, each connected to its own DIV.  Clicking the image or text link will show the DIV.  Clicking another such image or text link will hide the current DIV and show the new DIV.

[Herman's Mixen]

see http://www.w3schools.com/jquery/jquery_hide_show.asp for just an example for hide / show text

[colby2152]

see http://www.w3schools.com/jquery/jquery_hide_show.asp for just an example for hide / show text

I was using that page as a reference.  That is focused on <p> sections of code rather than DIVs.  I also want to adapt the code to handle multiple DIVs.  Any ideas?

[Suki]

Use an on() method on the select:

Code Select Expand


$('#div1', '#div2', '#div3').hide();
$('#select_ID').on( "change", function() {
    var $this = $(this);
    var div = $this.val();

    // Hide whatever div
    $('#mainDIV').children().fadeOut( "slow", function() {
         // Show the current selected div.
       $('#' + div).fadeIn();
  });

});

This is just some random code, it depends on your HTML structure having a parent div that will hold all your divs and it also depends on each div having an ID with the exact value you are using on your select field:

Code Select Expand


<select id="select_ID">
  <option value="div1">div 1</option>
  <option value="div2">div 2</option>
  <option value="div3">div 3</option>
</select>



Your html should look like this:

Code Select Expand


<div id="mainDIV">
    <div id="vessel"></div>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
</div>

Dunno, something like that.Heres the jsfiddle for it: http://jsfiddle.net/ygrarto8/

Has some quirks but could serve as a start.

[colby2152]

I think I have it working, but it isn't resolving correctly mid-way through the DIVs.  Demo page = http://www.profsl.com/smf/index.php?page=portal

The links work fine until the 'Columns & Articles' link.  You can scroll down and see that all of a sudden the right-hand SimplePortal blocks show (don't show on other DIVs because of some error) within the table.  Furthermore, one of those links is being cut-off, but the code looks fine when I read through it.  Something's off alignment?

[Suki]

There is no event associated with the Columns & Articles, link or any other link after that.

If you have that many links, it would be better to group them into an array or an object with a link => div relationship and use jQuery each() to add an event to all of them, makes it easier for you to keep on adding more.

You can also group all your links inside a div and let jquery to find all anchors inside that particular div, and add an event to them.

[colby2152]

There is no event associated with the Columns & Articles, link or any other link after that.

If you have that many links, it would be better to group them into an array or an object with a link => div relationship and use jQuery each() to add an event to all of them, makes it easier for you to keep on adding more.

You can also group all your links inside a div and let jquery to find all anchors inside that particular div, and add an event to them.

Interesting.  It seems to be an issue when I go back into the page, SimplePortal only saves pages up to 48,569 characters, and my DIV/link setup has so much more.

[Suki]

You can always move your JS code to an external  JS file  or go the way I suggest to avoid redundancy code.

[colby2152]

You can always move your JS code to an external  JS file  or go the way I suggest to avoid redundancy code.

I had a 50,000 character limit on posts.  I removed that, but that hasn't solved this issue.  The code that is saved keeps on getting cutoff within the Columns & Articles DIV.

Moving the JS code to an external file won't save much space.  The DIVs and all of the links take up a lot of characters.  I am going to try and implement an SSI mechanism to move most of this outside SMF.

[colby2152]

Now my issue comes into play when using a PHP page within SimplePortal.

Code Select Expand

<?php
include('/smf/portaldemo.php');

?>

[margarett]

Is that path correct? Does your filesystem tree starts directly at the root?

[colby2152]

Is that path correct? Does your filesystem tree starts directly at the root?

That worked.  Thanks margarett!

I simply needed to add the full path of /home/profsl/public_html/

[Matthew K.]

There is no event associated with the Columns & Articles, link or any other link after that.

If you have that many links, it would be better to group them into an array or an object with a link => div relationship and use jQuery each() to add an event to all of them, makes it easier for you to keep on adding more.

You can also group all your links inside a div and let jquery to find all anchors inside that particular div, and add an event to them.

Just as a side note, knowing that this is now "working", I would really suggest doing something like Suki or I suggested and not be so redundant with the jQuery.