Clever Geek Handbook

Orientation and movement of children with jquery

I am currently trying to create a template for the Volus platform e-commerce website. There is a table that loads into my category pages that I need to move using a script. This would have been easy enough if I could add a unique class to this table element, however Volusion locked the page's internal HTML, which only allowed me to change the header / footer HTML.

The script should do the following:

  • Check if the current page is a category page.
  • The purpose of the specified table
  • Add it to display before #MainForm

I created a JS script with all the information I need: http://jsfiddle.net/Lno034u8/1/

Thanks for any help you can provide!

Here is the JSFiddle HTML:

<div class="content">
    <main id="content_area">
        <!--Table To Move --><table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr><td>This Content Should display second, and should be colored blue</td></tr>
        </table><!-- / -->
        <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tbody>
                <tr>
                    <td>
                        <table width="100%" cellspacing="0" cellpadding="0" border="0"></table>
                        <table width="100%" cellspacing="0" cellpadding="8" border="0">
                            <tr><td>This Content Should display first</td></tr>
                        </table>
                        <!-- Move Table To This Position --><!-- / -->
                        <form id="MainForm"></form>
                        <table width="100%" cellspacing="0" cellpadding="0" border="0"></table>
                    </td>    
                </tr>    
            </tbody>    
        </table>    
    </main>
</div>
+3


source to share


3 answers


Here's an alternative:

$(function() {
     var table_to_move = $("#content_area").find("table").first();
     $("#content_area").find("form").before(table_to_move);
});


EXAMPLE: http://jsfiddle.net/nr5q1Lkz/

+2


source


Place this code after determining that you are on the category page:



$('#content_area').find('table').first().remove().clone().appendTo('#MainForm');
0


source


This simple function will do what you ask. He makes certain assumptions:

  • Painting is done over existing CSS
  • The table to be moved is the first parent address of the table content_area

code:

// Script I currently have that checks if the page is a category page.
$(function() {
     if (location.pathname.indexOf("-s/") != -1) {
         moveTable();
     }
    else {
    }
});
// END Script I currently have that checks if the page is a category page.
function moveTable(){
    $("#MainForm").before($("#content_area > table:first-of-type"));
}

Powered by fiddle

0


source






More articles:


All Articles