I have an endless scroll application in PHP and jQuery. This my javascript:

    var base_url    = window.location.origin;
    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
        var offset  = $(".badge-item").length;
        console.log(offset);
        $.ajax({
            url         : base_url+'/index.php/display/jQuery_movies',
            type        : "post",
            data        :  { offset_cnt : offset },
            datatype    : 'html',
            success     : function(response){
                $("#badgesWrapper").append(response);
                offset  = offset+12;
            },
            error       :function(){
              alert("failure");
              $("#result").append('Error Occurred while fetching data.');
            }
        }); 

        }
    });

This is my php (using CodeIngiter):

function jQuery_movies(){
    $this->load->model('Model_display');
    $offset         = $this->input->post('offset_cnt',TRUE);
    $result         = $this->Model_display->fetch_movies($offset,$limit=12,$method='ajax');
    echo $result;       
}

As designed, the objective is to count the number of occurences of a class $(".badge-item") and use that information to determine the offset for querying the database. The php loads initially loads a page of 12 badge-items when the user first hits the page. As the user scrolls down and gets close to the end another 12 badge-items should load. All is working fine except for the value of offset not updating properly. Batches of 12 are being loaded twice, sometimes as often as four times according to the console.log. Also according to the console.log offset is not registering smoothly. That variable will jump at times going from 12, 24, 48, 72, 96 instead of 12, 24, 36, 48, 60, 72, 84, 96

Is there a better method for this jQuery script to work?

@vedoo

THANK YOU VERY MUCH

Your post and links to articles helped exactly as I had hoped.

This is the javascript to determine the width of the browser:

$(function() {
    var base_url        = window.location.origin;
    var browser_width   = $(window).width();

    $.ajax({
        url         : base_url+'/index.php/user/jquery_library_browser_width',
        cache       : false,
        type        : "POST",
        data        : {"browser_width":browser_width},
        dataType    : "json"
    });
});

This is the function within the controller:

function jquery_library_browser_width() {
    //Assign $_post['browser_width'] to $browser_width
    // TRUE runs data through the XSS filtre within CI
    $browser_width = $this->input->post('browser_width', TRUE);
    $this->session->set_userdata('browser_width', $browser_width);
}//jquery_browser_width

I have more coding still to do for rendering the table based on browser window width but the variable is within the userdata array to run the if method and direct the controller.

@diafol

Well, I think I am on to something. Stay tuned. If it works, I will post an article about it so you can see that which I am trying to accomplish.

I think you're getting too caught up on premises rather than what I am asking:

Using JavaScript and PHP how would I go about determining the width of the browser window and save it to a variable under a Codeigniter environment?

I made and error earlier for the first jsfiddle in my second post.

Where it states "To demonstrate what I mean have a look at..." this is the correct fiddle

My apologies for any confusion.

that's exactly what I want to do, veedoo. Have any idea or and example to go about doing that?

Maybe this will help make sense.

Before the user sees a page with the table data, the user will need to log-in. Logged-in begins a session and from there PHP is already collecting information about the browser. Why not take it a step further and determine window width?

To efficiently use the screen space, the table in question is rendered as two <td> per row at less than 768px and can be rendered as four <td> per row at higher than 768px. To demonstrate what I mean have a look at this jsfiddle.

I have written the functions in my controller to render the table either way. I simply need a variable that will inform the width of the browser and use that variable for an if method to return the table code block.

I have tried a method of a more flexible table layout to display rows as inline blocks dependent on media queries (click here for that example) but the flow broke down if a cell was more than one line.

I have considered rendering the table in the two formats and based on media queries have one hidden using display:none. I question the wisdom of that for the server is doing double the work when there might be a simpler way if the server knows the size of window.

A method that is contingent on the server knowing the size of the window does make sense when there is a small exception that media queries can not ...

I have some experience when it comes to CodeIgniter. I am trying to figure out a method for determining the window size of a browser and assign it POST or $this or the user session (also part of $this). I need the variable to persist for the session.

In my site there is a table of data that needs to be formatted differently for width greater than 768px. By trial and error, I have tried different methods using CSS media queries but there is no way around it: I need to know, server-side, what the browser window width is so I can execute code in my controller send it along with all other HTML to the view.

I did consider the User Agent class but that will only inform me as to whether the device might be mobile, not the browser window width.

From research, I found various javascript and jQuery tutorials for dynamically saving the browser window width to a variable but these are all premised on after the document is loaded and ready.

Is there a simple way to accomplish this?

The thing is I do not want multiple carousels. I want part on the carousel's functionality:

  • grab 4 divs
  • wrap them in another set of divs
  • have the script do the math and resize the divs on the fly
    etc...

if you looks at the sample page I provided, you might have a better view of what I'm trying.

I don't want someone to solve it totally for me. Someone with whom I can keep a dialogue with and bring this to light. From the research I have done, some have resized one div depenedent on browser window dimensions but not four.

After writing out that which appears below I realise help I am asking for might be outside the scope of support for Owl Carousel. The plug-in itself is working as it should. It is functions within this plug-in that I want to emulate for the rest of the content that appears on my site.

I am using Owl Carousel and it works great. I wish to adapt some of the CSS and/or javavscript to the rest of the page displaying the carousel but have hit a wall and hoping someone can assist.

This link http://carouselhelp.position-is-everything.com/ will demonstrate how I am using the carousel and somewhat of what I want. I want the divs below the carousel to have the same widths, same gutters and be 4 across like those in the carousel. I am close for the layout of 4 across is achieved if the browser is at it's widest, but reduces to 3 across and 2 across, etc. as the browser window width decreases. I would like 4 across for the carousel and 4 across for the non-carousel divs below it. The carousel would be left to paginate according to how wide the browser window is and the user clicking one of the buttons just below the carousel viewing area

Setting up Owl Carousel these options were set for the number of panels to be displayed in the carousel at different sizes of windows and want similar guidelines:

[0, 1],
[450, 2],
[600, 3],
[700, 3],
[1000, 3],
[1200, ...

I modified what was shared from JorgeM. This is what I am working with:

<p class="link_entry">
    <img alt="Delete this link" title="Delete this link" src="images/ajax-urls/Cross-icon-24-pixels.png" class="LibraryItemDelete">
    <img alt="Edit this link" title="Edit this link" src="images/ajax-urls/Actions-document-edit-icon-24-pixels.png" class="LibraryItemEdit">
    <input type="hidden" class="tableid" name="id" value="1">
    <a href="http://whoknows.com">Huh ?</a>
</p>

This is the javascript:

$(document).on('click', '.LibraryItemEdit', function() {
    var url_id  = $(this).parent().find('.tableid').val();
    }):

It works as intended with a slight difference. In my original post, I had more div`s so that I could have hanging paragraph effect. The icons would be a flush left and the url or anchor text whould not be under the icons if it wrapped to a new line. I have a similar effect with p tags and this css:

p.link_entry {
    margin-left:    4em;
    text-indent:    -4em;
}

Thanks for the reply, dany12. But it did not work. I follow your logic and it should work, but when I run the script, the variable url_id remains undefined.

From my earlier messaage and your suggestion, this is how a typical entry appears now:

<div class="link_entry">
    <div class="link_actions left">
        <span class="LibraryItemDelete">
            <img src="images/ajax-urls/delete_icon.png" title="Delete this link" alt="Delete this link">
        </span>&nbsp;
        <span class="LibraryItemEdit">
            <img src="images/ajax-urls/edit_icon.png" title="Edit this link" alt="Edit this link">
        </span>
    </div><!-- /link_actions -->
    <div class="link right">
        <input type="hidden" value="92" name="id" class="table_id">         
        <a href="http://www.somewhere.com">somewhere.com</a>
    </div><!-- link -->
</div><!-- /link_entry -->

The js/jQuery:

$(document).on('click', '.LibraryItemEdit', function() {
    var url_id = $(this).find('.table_id').val();
    ....
}

Still seeking an answer.

This is a typical entry of many on a page:

<div class="link_entry">
    <div class="link_actions left">
        <span class="LibraryItemDelete">
            <img src="images/ajax-urls/delete_icon.png" title="Delete this link" alt="Delete this link">
        </span>&nbsp;
        <span class="LibraryItemEdit">
            <img src="images/ajax-urls/edit_icon.png" title="Edit this link" alt="Edit this link">
        </span>
    </div><!-- /link_actions -->
    <div class="link right">
        <input type="hidden" value="92" name="id">          <--want to find and assign that value
        <a href="http://www.somewhere.com">somewhere.com</a>
    </div><!-- link -->
</div><!-- /link_entry -->

This is the start of a jQuery function for an ajax call:

$(document).on('click', '.LibraryItemEdit', function() {
    var url_id = $(this).find('input[name="id"]').val();
}

I want a way to find and assign to a variable the value of the hidden input field that is below the span LibraryItemEdit.

I am using hidden input fields to store the database table id for each link. Is there a better method? The id's are only for the purposes of ajax calls.

Thanks, JorgeM. Newbie 101 mistake. Your suspicion was right.

I have two forms that are fairly identical located on different pages of a site. In order to call distinct jQuery ajax functions there are two class names I need to alter. For one of the pages, I place this script

<script>
    $(document).ready(function(){
        $(".itemDelete").switchClass("itemDelete","LibraryItemDelete");
        $(".itemEdit").switchClass("itemEdit","LibraryItemEdit");
    });
</script>

and it is not working. I have tried with that script loaded in the header or the footer. Most examples of switchClass I found on the net have examples where the trigger event is clicking on a div. Is what I am trying to do possible?

Don't I feel like an idiot. I have no idea what I was doing wrong last night. It was late when I tried working on this. It was not working so I thought Leave it. Document what you did and post it somewhere in the morning.

Tried it again and it works no problem

I have the following snippet of function and call to another function for returning tabs to format code.

public function makelinks ($urls_data) {
    ...code...
    $i = 5;
    $tabs   = $this->echo_tabs($i);
    $output = "$tabs<ul class=\"url_list\">\n";
    ...code...
}

public function echo_tabs($i){
    $x  = 0;
    $o = '';
    for ($x;$x<$i;$x++) {
        $o .= "\t"; 
    }
    return $o;
}

What I would like is for $output to result in \t\t\t\t\t<ul class=\"url_list\">\n the \t's translating to actual tabs when a browser view source is generated. I am aware if I simply had that block string of characters assigned to $output, then they would have the desired result in the browser. Instead the \t's are echoing out as a string and displaying as unformatted and unwanted text.

To try and generate the desired result, I have also tried $o .= '\t'; as well as $o .= "\\t";. Neither of these is working either. I have googled a lot on this using terms such as 'assigning tabs to variable php'.

What would be the method for prepending or appending strings of tabs to code so they translate as tabs?

Thanks for the possible solution, diafol. I am opting for server side solution with an AJAX call, modifying a jquery javascript I have in place for deleting a link/li from the DOM and the database.

I thought it would be easier to manipulated what is already on the page for scooping up what is there and manipulating it on the client-side rather than server-side.

This might be a duplicate but I can not find a solution for the small challenge I am facing. I want to assign the href and text in an <a> tag to variables and use them in a jquery script. Examples I have found pertain to diving into the DOM and retrieving several <a> based on class or specific ones based on an id. I think there should be a way to drill down and select a particular one.

I have a list of links rendered from php. Currently, they all have the same class. An admin user has the option of editing or deleting the link. These editing and deleting options are carried out with jquery and ajax. Below is how any of the links is coded. (Formatted for simple presentation here.)

<ul class="url_list">
<li>
    <input type="hidden" value="95" name="id">
    <a href="http://www.foo.com/index.html" target="blank">See this</a>&nbsp;
    <span class="itemDelete">
        <img alt="Delete this link" title="Delete this link" 
            src="images/ajax-urls/deleteIcon.png">
    </span>&nbsp; 
    <span class="itemEdit">
        <img alt="Edit this link" title="Edit this link" 
            src="/images/ajax-urls/editIcon.png">
    </span>
</li>
</ul>

The hidden field with a numeric value is to be used for deleting a url from the database.

This is my javascript:

$(document).on('click', '.itemEdit', function() {
    var url_id = $('input[name="id"]').val();
    var recipie_id = $('input[name="recipe_id"]').val();
    var href = $(this).closest('a').attr('href');

    ... more code 
});

I also tried:

$(document).on('click', '.itemEdit', function(e) {
    var url_id = $('input[name="id"]').val();
    var recipie_id = $('input[name="recipe_id"]').val();
    var href = $(e.target).closest('a').attr('href');

    ... more code 
});

I can't figure out how to assign href to a variable. Stepping through the code or echoing ...

Thanks for the help. I interpreted the second argument of the three as optional. From the documentation:

row
Row number in result to fetch. Rows are numbered from 0 upwards. If omitted or NULL, the next row is fetched.

In case anyone else reads this thread, don't omit the second argument.

I am converting a PHP application from MySQL to PostgresSQL. The MySQL works flawlessly. The database for this application is a one to many relationship. I have a while loop nested inside another while loop

<?php while ($movie_row = pg_fetch_array($movie, PGSQL_ASSOC)) { ?>
 [html code to echo various elements of $movie_row]
 [a record in this part will have multiple records of information
    from another table in the db which the following code will 
    fetch and process]
<?php $movie_file_result = pg_query ($conn, "SELECT DISTINCT(cd_name)
            FROM movie_files 
            WHERE data_id=".$movie_row[id]."
            ORDER BY cd_name");?>
            <div class="files">
              <p>Find in:</p>
              <ul class="file_list">
<?php while ($filesrow = pg_fetch_array($movie_file_result, PGSQL_ASSOC)) { ?>
PROBLEM RESIDES HERE (see below)
                <li class="cd_name">
                  <?php echo $filesrow[cd_name]."\n" ?>
                </li>

<?php }?>
 [remainder of html code to iterate elements of $movie_row]
<?php }?>

For the nested while using $filesrow an infinite loop happens. Debugging in Netbeans sometimes the infinite loop happens only on the second while loop. Other times, I get a page full of the first layer while loop.

An unordered list would not suffice because of the need for consistent placement between the amount of the ingredient and the ingredient. A gutter/invisible cell-border is necessary.

I have a php application for a cookbook site. To make this application responsive for all devices, I need to convert the listing of ingredients from a table format to div's but I am having a challenge with how to set-up the div structure and css.

To better explain what I have presently and what I want, kindly click here.

This is a typical block of recipe ingredients:

<table id="recipe">
    <tr>
        <td class="ingramt">2½</td>
        <td class="ingred">cups flour</td>
        <td class="ingramt">1 tbsp</td>
        <td class="ingred">baking powder</td>
    </tr>
    <tr>
        <td class="ingramt">½ cup</td>
        <td class="ingred">butter or shortening</td>
        <td class="ingramt">1</td>
        <td class="ingred">egg</td>
    </tr>
    <tr>
        <td class="ingramt">1 tsp</td>
        <td class="ingred">salt</td>
        <td colspan="2" class="merged">some milk</td>
    </tr>
</table>

As you can see from the mark-up, I have four table columns to create two columns of data. For higher resolutions I want the div's and css to render the appearance much the same as the table method. Using media queries in the css for screen widths like smart-phones, I desire the two table columns of data on the right to appear below the two on the left but using divs. (Refer to the demo website stated above to see what I mean)

The mark-up for div's would appear much like:

<div id="recipe">
    <div class="ingredBlock">
        <div class="ingramt">2½</div>
        <div class="ingred">cups flour</div>
        <div class="ingramt">1 tbsp</div>
        <div class="ingred">baking powder</div>
    </div>
    <div class="ingredBlock">
        <div class="ingramt">½ cup</div>
        <div class="ingred">butter or shortening</div>
        <div class="ingramt">1</div>
        <div class="ingred">egg</div>
    </div>
    <div class="ingredBlock">
        <div class="ingramt">1 tsp</div>
        <div class="ingred">salt</div>
        <div class="merged">some milk</div>
    </div>
</div>

Can someone think of a better method for the ...

thanks for the help.

I am working on a responsive web design. For some resolutions like below 800px across, I hide a whole div with syntax such as:

@media only (max-width : 800px) {
    div.well._menu {
        display: none;
    }
}

How do I bring the div back to its default if the display property has not been declared originally? Do I use inherit?

    @media only (min-width : 801px) {
        div.well._menu {
            display: inherit;
        }
    }

I am having a challenge with the spacing of breadcrumbs items in IE8. The attached pics show how the area displays in browsers. Those shots are from a brand new fresh install of Joomla 3.

65b575f43580aac9921698a85dc658f8
This is how they appear in IE 8. Notice the wrap of how Home and the arrow are not on the same line. If I am a bit deeper in the navigation, all of the links in the breadcrumbs appear not in a line.

60650e82c41a4264fa3fc132f916326c
In this shot, it displays how the breadcrumbs are supposed to appear and do appear in Chrome, Firefox, Safari and Opera

I have tried adding some margin-right or padding-right to the <li> or <a>. I also tried adding float left to see if that would work. None of these has resolved the matter. This is the css:

.breadcrumb li {
   display: inline-block;
   *display: inline;
   *zoom: 1;
   text-shadow: 0 1px 0 #fff;
}

After some research I found out those asterisks before display and zoom are hacks for Internet Explorer. The asterisk in front of display is supposed to trigger IE to ignore display: inline-block. I tried *display: inline-block and that did not effect the IE output either.

This site will be destined for mobile devices so I need a solution compatible with that standard.

Thanks for taking the time to read this.

I am trying to debug some CSS in IE8 and the item I need to look at involes either hover or focus. The CSS has to be edited in IE8 for it is filters for IE browsers to achieve gradients. These filters are not showing in Firebug under FF or Chrome.

Attempts to examine this by using the Developer tools under F12 or the Debug Bar add-on have not been succesful for examining what is being applied in a hover state. Is there an option such as the one in Firebug to lock the item in that state?

Thanks for the input. Giving the checkbox a left margin worked well.

Is there some standard trick to styling labels and checkboxes so they appear consistently in all browsers? The attatched pic with the label obscured by overlapping checkbox is what I get with Chrome and Safari for Windows. The other attatched pic is what I see in Firefox, IE and Opera.

This is the code for the HTML:

<div class="login-fields">
    <label for="remember" id="remember-lbl">Remember me</label>
    <input type="checkbox" alt="Remember me" value="yes" class="inputbox" name="remember" id="remember">
</div>

The only css is this:

.login-fields label, .contact-form label {
    float: left;
    width: 8em;
}

I am trying to implement a font package I downloaded from Font Squirrel. The demo included css & html code and works ok but everything is in the root. For the application I am using, I need relvant paths. This is my tree structure:

/site-root
    |--/Fonts
    |        /*.ttf files
    |--/Styles
    |        /stylesheet.css
    |--/Text
             /*.html that will call these fonts

This is what I have for my css:

@font-face {
    font-family: 'LibreBaskervilleRegular';
    src: local('LibreBaskerville-Regular-webfont'), url('../Fonts/LibreBaskerville-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LibreBaskervilleItalic';
    src: local('LibreBaskerville-Italic-webfont'), url('../Fonts/LibreBaskerville-Italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LibreBaskervilleBold';
    src: local('LibreBaskerville-Bold-webfont'), url('../Fonts/LibreBaskerville-Bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;    
}

The local() I added to each src based on research and debugging.

This is the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Font Face Demo</title>
    <link rel="stylesheet" href="../Styles/stylesheet.css" type="text/css" charset="utf-8">
    <style type="text/css" media="screen">
        h1.fontface {font: 60px/68px LibreBaskervilleRegular, Courier, monospace;letter-spacing: 0;}

        p.style1 {font: 18px/27px 'LibreBaskervilleRegular', Courier, monospace;}
        p.style2 {font: 18px/27px 'LibreBaskervilleItalic', Courier, monospace;}
        p.style3 {font: 18px/27px 'LibreBaskervilleBold', Courier, monospace;}

        #container {
            width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>

<body>
    <div id="container">
        <h1 class="fontface calibre2">Font-face Demo for the Libre Baskerville Font</h1>

        <p class="style1">Libre Baskerville Regular - Lorem ipsum...</p>

        <p class="style2">Libre Baskerville Italic - Lorem ipsum...</p>

        <p class="style3">Libre Baskerville Bold - Lorem ipsum...</p>
    </div>
</body>
</html>

In FF and Chrome, all I am getting is Courier.

The embedding of these fonts must be done this way for I am mimicking the structure that will ...

I am using Sigil as my editor and it does not accept the search string as what you cited. I get a not found result.

Thanks for the try.