[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Inserting a break in jquery

Posted on 2011-04-25
7
Medium Priority
?
181 Views
Last Modified: 2012-05-11
I have this code that breaks a table for mobile device what I am trying to accomplish is having a break or line feed between each row.  Any help with this is greatly appreciated.  Thanks
$(document).ready(function StripTable() {
if (screen.width > 800) {  // Windows 7 phone is 480px wide; if screen size is less than 800 best to have one column
    //Detected mobile else desktop
        $("td").each(function () {
            $(this).replaceWith("<div id=\"" + $(this).attr("id") + "\">" + $(this).html() + "</div>")

        });
        $("tr").each(function () {
            $(this).replaceWith("<div id=\"" + $(this).attr("id") + "\">" + $(this).html() + "</div>")
        });
        $("table").each(function () {
            $(this).replaceWith("<div id=\"" + $(this).attr("id") + "\">" + $(this).html() + "</div>")

        });
        // other option is to add row for every element in the table, 
        //      but then blank rows will be inserted when natural new row occurs
        
    }
});

Open in new window

0
Comment
Question by:zrazak
  • 4
  • 3
7 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35465100
So if you have
<table id="table1">
<tr id="row1">
  <td id="r1cell1">Row 1 cell 1</td>
  <td id="r1cell2">Row 1 cell 2</td>
</tr>
<tr id="row2">
  <td id="r2cell1">Row 2 cell 1</td>
  <td id="r2cell2">Row 2 cell 2</td>
</tr>
</table>

you will get

<div id="table1">
<div id="row1">
  <div id="r1cell1">Row 1 cell 1</div>
  <div id="r1cell2">Row 1 cell 2</div>
</div>
<div id="row2">
  <div id="r2cell1">Row 2 cell 1</div>
  <div id="r2cell2">Row 2 cell 2</div>
</div>
</div>

you hope?

Then why have a table at all?



0
 

Author Comment

by:zrazak
ID: 35467348
This will allow to break a table of original website to not be of tabular form.  Thus a check will check if mobile device and runs code to render the table to display properly for mobile devices.  Since mobile does not display table well.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35467401
so what exactly is the problem?

$("tr").each(function () {
            $(this).replaceWith("<div id=\"" + $(this).attr("id") + "\">" + $(this).html() + "</div><br style=\"clear:all\" />")
        });
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 1500 total points
ID: 35467996
0
 

Author Comment

by:zrazak
ID: 35468088
Mplungjan can you explain this
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35468109
can I explain what?

I just added a break to your script after each row
0
 

Author Closing Comment

by:zrazak
ID: 35515738
some good info but not complete
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

868 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question