-
Posts
-
i am trying to use tables with atleast 20 columns . The problem is that as you try to see in mobile the tables are unreadable . I found a better solution to my problem but i cannot get it to work with enfold theme . http://zurb.com/playground/responsive-tables .
Hi 7thflow!
can you please post a link to your website showing what you mean? What is happening with the tables? please show it for us using screenshots (you can use imgur.com for hosting them). What is happening when you try to use the zurb.com code? Make sure to have the newest version of Enfold and WordPress. Also try to deactivate all plugins to see if one is causing any conflict and activate them again one by one.
Regards,
AndyHi Andy ,
I tried as you said , this is the screenshot when first i use the script
this is what it shows in mobile versions
The problem is that i want to to add so many columns that they will move out of page when viewed , so this code will help to solve the problem.
no , my problem is not yet solved i want the table to show like the demo in mobile site . see the example at zurb.com in mobile view . I am not getting the same ouitput after loading the script.
Hey!
Try using our own HTML/CSS in a codeblock element to see if the script gets applied to that. If not then you could be getting a javascript error. Send us a link to your page and paste the code your using here.
Best regards,
Elliotti am just calling the regular js and css files only and using their html code .
link to my test page
http://sbecpl.net/test/JS & CSS files
<link type="text/css" media="screen" rel="stylesheet" href="http://zurb.com/playground/projects/responsive-tables/responsive-tables.css" /> <script type="text/javascript" src="http://zurb.com/playground/projects/responsive-tables/responsive-tables.js"></script>also i am using this html code
<table class="responsive"> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> <th>Header 5</th> <th>Header 6</th> <th>Header 7</th> <th>Header 8</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 1, cell 3</td> <td>row 1, cell 4</td> <td>row 1, cell 5</td> <td>row 1, cell 6</td> <td>row 1, cell 7</td> <td>row 1, cell 8</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> <td>row 2, cell 3</td> <td>row 2, cell 4</td> <td>row 2, cell 5</td> <td>row 2, cell 6</td> <td>row 2, cell 7</td> <td>row 2, cell 8</td> </tr> <tr> <td>row 3, cell 1</td> <td>row 3, cell 2</td> <td>row 3, cell 3</td> <td>row 3, cell 4</td> <td>row 3, cell 5</td> <td>row 3, cell 6</td> <td>row 3, cell 7</td> <td>row 3, cell 8</td> </tr> <tr> <td>row 4, cell 1</td> <td>row 4, cell 2</td> <td>row 4, cell 3</td> <td>row 4, cell 4</td> <td>row 4, cell 5</td> <td>row 4, cell 6</td> <td>row 4, cell 7</td> <td>row 4, cell 8</td> </tr> </table>Hey!
Have you verified that the style and script files are being applied to your code? Since this is Foundation code I would recommend trying it out with a Foundation boiler plate theme like FoundationPress to verify if it works or not. Or just write the most basic HTML page with the Foundation code.
Regards,
Rikardwhat i have observed is that when the site is opened in a mobile view the javascript modifies the html , which is not happening in the test page . If i get this working , i will then somehow manage the css . But for not the jquery and the javascript are not performing only.
Hey!
I’m seeing this error.
TypeError: $ is not a functionPerhaps you could try downloading the script and host it on your own site and then change all references of “$” to “jQuery”.
For example if there was a line like this.
$(document).ready(function(){Then you would change it to this.
jQuery(document).ready(function(){Cheers!
Elliott
- You must be logged in to reply to this topic.