Search Results

Search found 5382 results on 216 pages for 'href'.

Page 78/216 | < Previous Page | 74 75 76 77 78 79 80 81 82 83 84 85  | Next Page >

  • Facebook like button not going back side on the fixed div

    - by Lahiru Chathuranga
    I added a Facebook like button to my website.My website has a fixed div on top of the page(blue color div in the image). The like button is below that(in a div which can scroll) My problem is when the page is scroll down the like button comes on top of the fixed div(blue color).I want to scroll it from the backside of the div.How can I do that? There are couple of screenshots I added Before Scroll After Scroll Here is my code of the fixed div <script type="text/javascript"> function got_to_signup(){ window.location.href = "view/policy"; } </script> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=368003049941951"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div style="width:100%;background-color:#0094d6;" > <div id="dd" style="background-color:#0094d6; width:100%; height:75px;position:fixed; " class="center "><div id="a" style="width:1010px; height:75px; background-color:#000000;background:url(xx.png); background-repeat:no-repeat; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#003; " class="inner div_border"> <table width="1010" border="0" > <tr > <td width="15%" rowspan="2"><a href="" style="cursor:pointer; cursor:hand;"><div style="width:200px; height:50px;background-color:none;"></div></a></td> <td width="22%" height="14">&nbsp;</td> <td width="5%">&nbsp;</td> <td width="5%">&nbsp;</td> <td width="28%">&nbsp;</td> <td width="2%">&nbsp;</td> <td width="23%">&nbsp;</td> </tr> <tr> <td colspan="4"> </td> <td colspan="2"><span style="float: right; " ><div style="background-color:#006d9e;border-radius:3px; width:250px; height:34px; display: table; vertical-align: middle; color:#FFF; "> <table width="100%" border="0" > <tr > <td width="43%" style="text-align:center"> Start to bump !</td> <td width="29%"><div id='basic-modal'><span style="float: right; " ><input name="login_btn" type="button" class="login_button basic" id="login_btn" value="Sign in" /></span></div></td> <td width="28%"><span style="float: right; " ><form id="form_reg" method="post"><input name="register_btn" type="button" class="register_button" id="register_btn" value="Sign up" onclick="got_to_signup()"/></form></span></td> </tr> </table> </div></span></td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td style="color:#FFF; font:Arial, Helvetica, sans-serif; font-size:9px; text-align:right;"> Beta Version </td> </tr> </table> </div></div></div> here is my facebook like button code </script> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=368003049941951"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <td height="21" colspan="2"> <table width="187" style="margin-left:3px;font-size:1px;background-image:url(share_back.png);background-repeat:no-repeat;border-radius:3px;" > <!--tweeter button--> <tr><td width="71"><a href="https://twitter.com/bump_lk" class="twitter-follow-button" data-show-count="false" style="float:right;">Follow @bump_lk</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></td> <!--facebook like button--> <td width="48"><div class="fb-like" data-href="https://www.facebook.com/Bump.lk" data-send="false" data-layout="button_count" data-width="10" data-show-faces="false" style="position:relative;"></div> </td></tr></table></td> <td>&nbsp;</td> <td>&nbsp;</td> <td >

    Read the article

  • How do I control the direction of the scroll on my coda slider?

    - by lightingwrist
    Hello, I have a coda slider and am unable to determine the direction of the scroll. I have 3 panels that I want to scroll left to right. Sometimes it scrolls left to right, sometimes up and down, and sometimes horizontally. How do I lock it down to go the direction I want? Here is the HTML: <body> <div id="slider_home" class="round_10px"> <ul class="navigation_home"> <li><a href="#scroll_Parents" class="round_10px">Information For Parents</a></li> <li><a href="#scroll_Materials" class="round_10px">Print Materials</a></li> <li><a href="#scroll_Resources" class="round_10px">Online Resources</a></li> </ul> <div id="scroll_bg_home"> <div class="scroll_home"> <div class="scrollContainer_home"> <div class="panel_home" id="scroll_Parents"> content </div> <div class="panel_home" id="scroll_Materials"> content </div> <div class="panel_home" id="scroll_Resources"> content </div> </div> </div> </div> </div> </body> Here is the CSS: #wrapper {width:550px;margin:0px auto;} #intro {padding-bottom:10px;} h2 {margin:0;margin-bottom:14px;padding:0;} #slider {width:631px;margin:10px auto 0px auto;position:relative;} #scroll_bg{height:360px;width:590px;overflow:hidden;position:relative;clear:left;background:#FFFFFF url(images/) no-repeat; margin:0px auto 0px auto} .scroll{ background:transparent; width:550px; height:370px; padding:0px; margin:0px auto; overflow:hidden; } .scrollContainer div.panel {padding:20px 0px;height:330px; width:550px;margin:0px;float:left;} #shade {background:#EDEDEC url(images/shade.jpg) no-repeat 0 0;height:50px;} ul.navigation {list-style:none;margin:0px 0px 0px 23px;padding:0px;padding-bottom:0px;} ul.navigation li {display:inline; margin-right:5px;} ul.navigation li a { background:#FFFFFF;font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; color:#CCCCCC;padding:5px 5px 5px 5px;border:1px #F4F4F4 solid;text-decoration: none;} ul.navigation a:hover { color:#EDEDEC;border:1px #E6E6E6 solid;} ul.navigation a.selected {color:#333333;} ul.navigation a:focus {outline:none;} .scrollButtons {position:absolute;top:150px;cursor:pointer;} .scrollButtons.left {left:-37px;top:20px} .scrollButtons.right {right:-32px;top:20px;} .hide {display:none;} And here is the Jquery includes file: // when the DOM is ready... $(document).ready(function () { var $panels = $('#slider_home .scrollContainer_home > div.panel_home'); var $container = $('#slider_home .scrollContainer_home'); // if true, we'll float all the panels left and fix the width // of the container var horizontal = true; // float the panels left if we're going horizontal if (horizontal) { $panels.css({ 'float' : 'left', 'position' : 'relative' // IE fix to ensure overflow is hidden }); // calculate a new width for the container (so it holds all panels) $container.css('width', $panels[0].offsetWidth * $panels.length); } // collect the scroll object, at the same time apply the hidden overflow // to remove the default scrollbars that will appear var $scroll_bg = $('#scroll_bg_home'); var $scroll = $('#slider_home .scroll_home').css('overflow', 'hidden'); // apply our left + right buttons $scroll_bg .before('<img class="scrollButtons_home left" src="styles/images/BackFlip.jpg" />') .after('<img class="scrollButtons_home right" src="styles/images/flipForward.jpg" />'); // handle nav selection function selectNav() { $(this) .parents('ul:first') .find('a') .removeClass('selected') .end() .end() .addClass('selected'); } $('.navigation_home').find('a').click(selectNav); // go find the navigation link that has this target and select the nav function trigger(data) { var el = $('.navigation_home').find('a[href$="' + data.id + '"]').get(0); selectNav.call(el); } if (window.location.hash) { trigger({ id : window.location.hash.substr(1) }); } else { $('.navigation_home a:first').click(); } // offset is used to move to *exactly* the right place, since I'm using // padding on my example, I need to subtract the amount of padding to // the offset. Try removing this to get a good idea of the effect var offset = parseInt((horizontal ? $container.css('paddingTop') : $container.css('paddingLeft')) || 0) * -1; var scrollOptions = { target: $scroll, // the element that has the overflow // can be a selector which will be relative to the target items: $panels, navigation: '.navigation_home a', // selectors are NOT relative to document, i.e. make sure they're unique prev: 'img.left', next: 'img.right', // allow the scroll effect to run both directions axis: 'xy', onAfter: trigger, // our final callback offset: offset, // duration of the sliding effect duration: 500, // easing - can be used with the easing plugin: // http://gsgd.co.uk/sandbox/jquery/easing/ easing: 'swing' }; // apply serialScroll to the slider - we chose this plugin because it // supports// the indexed next and previous scroll along with hooking // in to our navigation. $('#slider_home').serialScroll(scrollOptions); // now apply localScroll to hook any other arbitrary links to trigger // the effect $.localScroll(scrollOptions); // finally, if the URL has a hash, move the slider in to position, // setting the duration to 1 because I don't want it to scroll in the // very first page load. We don't always need this, but it ensures // the positioning is absolutely spot on when the pages loads. scrollOptions.duration = 1; $.localScroll.hash(scrollOptions); });

    Read the article

  • JSON object array to store data of a form in local storage temporary (PhoneGap project)

    - by Nadeesha
    I am building a data aqusition system using PhoneGap. .I am trying to store my form data temporary on local storage using JSON,Data should be visible after I close and reopen the application (after pressing Get Data button),But after I close it only the lastly entered record is visible This is my code <!DOCTYPE html> <html> <head> <title>Household Profile DB storage</title> <meta charset="utf-8"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1,width=device-width" /> <link rel="stylesheet" href="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css"> <link rel="stylesheet" href="css/table.css"> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> <script type="text/javascript" src="js/iscroll.js"></script> <script type="text/javascript" charset="utf-8"> function onDeviceReady() { persistData(homeId,owner,gramaND,contactNo,address,race); } function saveLocal(form){ if (window.localStorage) { var fhomeId = form.homeId.value, fowner = form.owner.value, fgramaND = form.gramaND.value, fcontactNo= form.contactNo.value, faddress = form.address.value, frace = form.race.value; alert("hi"); var highscores = [{"homeId": fhomeId, "owner":fowner, "gramaND":fgramaND, "contactNo":fcontactNo, "address":faddress, "race":frace}]; localStorage.setItem("highscores",JSON.stringify(highscores)); alert("The data has been stored successfully."); } else { alert("Your Browser does not support LocalStorage."); } } function readLocal(){ if (window.localStorage) { var scores =[]; //Get the highscores object scores = localStorage.getItem("highscores"); scores = JSON.parse(scores); for (i=0;i<scores.length;i++){ var text = "homeId :"+scores[i].homeId +"<br>"+ "owner:"+ scores[i].owner+"<br>"+ "address"+scores[i].address +"<br>"+ "gramaND"+scores[i].gramaND +"<br>"+ "contactNo"+scores[i].contactNo+"<br>" + '<Button value="DELETE" onclick="'+scores.splice(i, 0)+'><>/Button>'; var tbodyx = document.getElementsByTagName("tbody"); var tr=document.createElement("TR"); var td=document.createElement("TD"); td.innerHTML = text; tr.appendChild(td); tbody.appendChild(tr); } } } </script> </head> <body> <div data-role="page" id="page1"> <!--/header--> <div data-role="header" data-position="inline" data-theme="b"> <a href="#" data-icon="back" data-rel="back" title="Go back">Back</a> <h1>Household Profile</h1> <a href="index.html" data-icon="home">Menu</a> </div> <!--/header--> <div id="wrapper"> <form id="userInput" action ="" method="GET"> <div data-role="content"> <div data-role="fieldcontain"> <label > Home ID </label> <input class="inputClass" id="homeId" placeholder="H0001" value="" data-mini="true" type="text"> </div> <div data-role="fieldcontain"> <label > Owner </label> <input class="inputClass" id="owner" placeholder="Aberathne" value="" type="text"> </div> <div data-role="fieldcontain"> <label class="select">GramaNiladhari Division</label> <select class="inputClass" id="gramaND"> <option value="GramaNiladhari Division 1">GramaNiladhari Division 1</option> <option value="GramaNiladhari Division 2">GramaNiladhari Division 2</option> <option value="GramaNiladhari Division 3">GramaNiladhari Division 3</option> <option value="GramaNiladhari Division 4">GramaNiladhari Division 4</option> </select> </div> <div data-role="fieldcontain"> <label > Contact No </label> <input class="inputClass" id="contactNo" placeholder="071-9545-073" value="" type="number"> </div> <div data-role="fieldcontain"> <label >Address:</label> <textarea cols="40" rows="8" class="inputClass" id="address"></textarea> </div> <div class="ui-block-a"><button type="submit" data-theme="d">Location in a Map</button></div> <div data-role="fieldcontain"> <label >Race</label> <select class="inputClass" id="race"> <option value=" Sinhalese"> Sinhalese</option> <option value=" Sri Lanka Tamils"> Sri Lanka Tamils</option> <option value=" Moors"> Moors</option> <option value=" Indian Tamils "> Indian Tamils </option> <option value=" Malays "> Malays </option> <option value=" Burghers "> Burghers </option> </select> </div> <input class="buttonClass" type="button" value="Insert Data" onclick="saveLocal(this.form);"> </div> </form> </div> <input class="buttonClass" type="button" value="get Data" onclick="readLocal();"> <!-- <p id="dhomeId"></p> <p id="downer"></p> <p id="dgramaND"></p> <p id="dcontactNo"></p> <p id="daddress"></p> <p id="drace"></p>--> <table border="1"> <tbody id="tbody"> <tr><td>test1</td></tr> <tr><td>test2</td></tr> </tbody> </table> </div> </body> </html> Also I need to expand my code to edit and delete record from local storage.

    Read the article

  • Show Hide Subnav

    - by Jon
    How can I toggle the subnav for each item, and if one is open, hide the open one to show the current one? If there are none shown, just toggle. If you click one and show subnav then and click another hide previous and show current. Here is my html - <header> <div class="content-wrapper"> <div class="user-menu-wrapper"> <div class="hsn-logo"></div> <div class="user-greeting-wrapper"> <div class="user-greeting">Hi, Abraham</div> </div> <div class="user-menu"> <ul class="user-menu-items"> <li>@Html.ActionLink(" ", "Index", "Home", new { @class = "my-account" })</li> <li>@Html.ActionLink(" ", "Index", "Home", new { @class = "my-favorites" })</li> <li>@Html.ActionLink(" ", "Index", "Home", new { @class = "my-bag" })</li> </ul> </div> </div> <div class="hsn-nav-wrapper"> <div class="hsn-nav"> <ul class="hsn-nav-items"> <li style="width: 25%"> <a class="shop" href="#"> <span class="hsn-nav-item-wrap"> <span>SHOP</span><span class="drop-down-arrow"></span> </span> </a> </li> <li style="width: 25%"> <a class="watch" href="#"> <span class="hsn-nav-item-wrap"> <span>WATCH</span><span class="drop-down-arrow"></span> </span> </a> </li> <li style="width: 25%"> <a class="play" href="#"> <span class="hsn-nav-item-wrap"> <span>PLAY</span><span class="drop-down-arrow"></span> </span> </a> </li> <li style="width: 15%"> <a href=""><span class="hsn-search-icon"></span> </a> </li> </ul> </div> <br class="clear" /> </div> </div> </header> <subnav id="shop" class="shop-subnav"> <div class="hsn-subnav-wrapper"> <div class="hsn-subnav"> <div class="hsn-subnav-left"> <ul> <li>SubnavItem</li> <li>SubnavItem</li> <li>SubnavItem</li> <li>SubnavItem</li> <li>SubnavItem</li> <li>SubnavItem</li> <li>SubnavItem</li> <li><span class="hsn-subnav-callout">Deals</span></li> </ul> </div> <div class="hsn-subnav-right"> <ul> <li>SubnavItem</li> <li>SubnavItem</li> <li>SubnavItem</li> <li>SubnavItem</li> <li>SubnavItem</li> <li>SubnavItem</li> <li>SubnavItem</li> <li><span class="hsn-subnav-callout">Clearance</span></li> </ul> </div> </div> </div> </subnav> <subnav id="watch" class="watch-subnav"> <div class="hsn-subnav-wrapper"> <div class="hsn-subnav"> <div class="hsn-subnav-left"> <ul> <li>SubnavItem2</li> <li>SubnavItem2</li> <li>SubnavItem2</li> <li>SubnavItem2</li> </ul> </div> <div class="hsn-subnav-right"> <ul> <li>SubnavItem2</li> <li>SubnavItem2</li> <li>SubnavItem2</li> <li>SubnavItem2</li> </ul> </div> </div> </div> </subnav> Here is my Jquery / JS - $(document).ready(function () { $('ul.hsn-nav-items li a').click(function () { var navitem = $(this).attr('id') , id = $(this).attr('class') , subnav = $('subnav.' + id + '-subnav'); $('a.selected').not(this).removeClass('selected'); $(this).toggleClass('selected'); $('#'+id).toggle(); }); });

    Read the article

  • Ruby on Rails DataTable now working.

    - by Nimroo
    [Ruby on Rails DataTable guide][1]https://github.com/phronos/rails_datatables/blob/master/README.md I"m following the above and have installed the git plugin as well. All i'm getting is the <%= datatable() % returning " <script type="text/javascript"> $(function() { $('#expenses').dataTable({ "oLanguage": { "sSearch": "Search", "sProcessing": 'Processing' }, "sPaginationType": "full_numbers", "iDisplayLength": 25, "bProcessing": true, "bServerSide": false, "bLengthChange": false, "bStateSave": true, "bFilter": true, "bAutoWidth": true, 'aaSorting': [[0, 'desc']], "aoColumns": [ { 'sType': 'html', 'bSortable':true, 'bSearchable':true ,'sClass':'first' },{ 'sType': 'html', 'bSortable':true, 'bSearchable':true },{ 'sType': 'html', 'bSortable':true, 'bSearchable':true },{ 'sType': 'string', 'bSortable':true, 'bSearchable':true ,'sClass':'last' } ], "fnServerData": function ( sSource, aoData, fnCallback ) { aoData.push( ); $.getJSON( sSource, aoData, function (json) { fnCallback(json); } ); } }); }); </script>". My .html.erb looks like this: <% @page_title="User Page"%> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <%=javascript_include_tag "jquery.dataTables" %> <%=stylesheet_link_tag "jquery-ui-1.9.2.custom" %> <script> $(function() { $( "#tabs" ).tabs(); }); </script> <% if current_user %> <div id="tabs"> <ul> <li><a href="#tabs-1">Expenses</a></li> <li><a href="#tabs-2">Accountant</a></li> <li><a href="#tabs-3">Requests (<%[email protected]%>)</a></li> </ul> <div id="tabs-3"> <p> <% if @requests.count != 0 %> <h2> Accountant Requests </h2> <table > <tr> <thead> <th>First Name</th> <th>Last Name</th> <th>Email Address</th> <th>Accept</th> <th>Reject</th> </thead> </tr> <% @requests.each do |request| %> <tr> <td><%= request.accountant.first_name %></td> <td><%= request.accountant.last_name %></td> <td><%= request.accountant.email %></td> <td><%= link_to 'accept', confirm_accountant_path(:accountant_id => request.accountant_id) %></td> <td><%= link_to 'Edit', edit_expense_path(request) %></td> </tr> <% end %> </tbody> </table> <% else %> <h4> You have no pending requests <h4> <% end %> </p> </div> <div id="tabs-2"> <p> <% if @accountants.count != 0 %> <h2> Accountant Info </h2> <table> <tr> <th>First Name</th> <th>Last Name</th> <th>Email Address</th> </tr> <% @accountants.each do |accountant| %> <tr> <td><%= accountant.first_name %></td> <td><%= accountant.last_name %></td> <td><%= accountant.email %></td> </tr> <% end %> </table> <% else %> <h4> Add Accountant <h4> <p> You don't have an accountant yet, perhaps consider adding one by e-mail </p> <%= render 'add_accountant_form' %> <% end %> <% end %> </p> </div> <div id="tabs-1"> <p><% if current_user %> <h4> Submit new expense </h4> <%= render 'expenses/form' %> <% columns = [{:type => 'html', :class => "first"}, {:type => 'html'}, {:type => 'html'}, {:type => nil, :class => "last"}] %> <%= datatable(columns, {:sort_by => "[0, 'desc']", table_dom_id:"expenses" }) %> <table id="expenses" class="datatable"> <thead> <tr> <th>Entry Date</th> <th>Last Update</th> <th>Amount</th> <th>User</th> <th>Receipt</th> <th></th> <th></th> </tr> </thead> <% @expenses.each do |user_expense| %> <tbody> <tr> <td><%= user_expense.created_at %></td> <td><%= user_expense.updated_at %></td> <td><%= user_expense.amount %></td> <td><%= user_expense.user.username %></td> <% if !user_expense.receipt_img.nil? %> <td><%= image_tag user_expense.receipt_img.url(:thumb) %></td> <% else %> <td>Future Button Here</td> <% end %> <td><%= link_to 'Show', user_expense %></td> <td><%= link_to 'Edit', edit_expense_path(user_expense) %></td> </tr> </tbody> <% end %> </table> <% end %></p> </div> </div>

    Read the article

  • Detect if 2 HTML fragments have identical hierarchical structure

    - by sergzach
    An example of fragments that have identical hierarchical structure: (1) <div> <span>It's a message</span> </div> (2) <div> <span class='bold'>This is a new text</span> </div> An example of fragments that have different structure: (1) <div> <span><b>It's a message</b></span> </div> (2) <div> <span>This is a new text</span> </div> So, fragments with a similar structure correspond to one hierarchical tree (the same tag names, the same hierarchical structure). How can I detect if 2 elements (html fragments) have the same structure simply with lxml? I have a function that does not work properly for some more difficult case (than the example): def _is_equal( el1, el2 ): # input: 2 elements with possible equal structure and tag names # e.g. root = lxml.html.fromstring( buf ) # el1 = root[ 0 ] # el2 = root[ 1 ] # move from top to bottom, compare elements result = False if el1.tag == el2.tag: # has no children if len( el1 ) == len( el2 ): if len( el1 ) == 0: return True else: # iterate one of them, for example el1 i = 0 for child1 in el1: child2 = el2[ i ] is_equal2 = _is_equal( child1, child2 ) if not is_equal2: return False return True else: return False else: return False The code fails to detect that 2 divs with class='tovar2' have an identical structure: <body> <div class="tovar2"> <h2 class="new"> <a href="http://modnyedeti-krsk.ru/magazin/product/333193003"> ?????? ?/? </a> </h2> <ul class="art"> <li> ???????: <span>1759</span> </li> </ul> <div> <div class="wrap" style="width:180px;"> <div class="new"> <img src="shop_files/new-t.png" alt=""> </div> <a class="highslide" href="http://modnyedeti-krsk.ru/d/459730/d/820.jpg" onclick="return hs.expand(this)"> <img src="shop_files/fr_5.gif" style="background:url(/d/459730/d/548470803_5.jpg) 50% 50% no-repeat scroll;" alt="?????? ?/?" height="160" width="180"> </a> </div> </div> <form action="" onsubmit="return addProductForm(17094601,333193003,3150.00,this,false);"> <ul class="bott "> <li class="price">????:<br> <span> <b> 3 150 </b> ???. </span> </li> <li class="amount">???-??:<br><input class="number" onclick="this.select()" value="1" name="product_amount" type="text"> </li> <li class="buy"><input value="" type="submit"> </li> </ul> </form> </div> <div class="tovar2"> <h2 class="new"> <a href="http://modnyedeti-krsk.ru/magazin/product/333124803">?????? ?/?</a> </h2> <ul class="art"> <li> ???????: <span>1759</span> </li> </ul> <div> <div class="wrap" style="width:180px;"> <div class="new"> <img src="shop_files/new-t.png" alt=""> </div> <a class="highslide" href="http://modnyedeti-krsk.ru/d/459730/d/820.jpg" onclick="return hs.expand(this)"> <img src="shop_files/fr_5.gif" style="background:url(/d/459730/d/548470803_5.jpg) 50% 50% no-repeat scroll;" alt="?????? ?/?" height="160" width="180"> </a> </div> </div> <form action="" onsubmit="return addProductForm(17094601,333124803,3150.00,this,false);"> <ul class="bott "> <li class="price">????:<br> <span> <b>3 150</b> ???. </span> </li> <li class="amount">???-??:<br><input class="number" onclick="this.select()" value="1" name="product_amount" type="text"> </li> <li class="buy"> <input value="" type="submit"> </li> </ul> </form> </div> </body>

    Read the article

  • Unable to find the cause of an annoying content gap in my HTML/CSS?

    - by user1472747
    I'm quite new to CSS / HTML, and can't find the cause of this little bugger. I want it gone, so that the banner and the nav bar touch each other. Any help is greatly appreciated!! Here is the code for the site. I took out some of the irrelevant code. <!DOCTYPE html> <html> <!-- *****CSS CODE START*****--> <style type="text/css"> #container { margin: 0 auto; width: 900px; background: #fff; } #header { margin-top: 0px; } #header h1 { margin: 0; } #navigation { float: left; width: 900px; background: #333; } #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li a { display: block; float: left; padding: 5px 10px; color: #fff; text-decoration: none; border-right: 1px solid #fff; } #navigation li a:hover { background: #383; } #content-container { float: left; width: 900px; background: #fff url(/wp-content/uploads/layout-two-fixed-background.gif) repeat-y 100% 0; } #content { clear: left; float: left; width: 619px; height: 720px; padding: 10px 0; margin: 0 0 0 0px; display: inline; overflow: auto; } #content h2 { margin: 0; color: #003D5D; padding:10px; } #contentBody { padding:10px; font-size:22px; } #aside { float: right; width: 280px; padding: 20px 0; margin: 0 0px 0 0; display: inline; background: #cccccc; height: 700px; border-left: 1px solid #333 ; } #aside h3 { margin: 0 20px; color: #003D5D; font-family: Times New Roman; } #asideText { margin: 0 20px; font-family: Times New Roman;} #footer { clear: both; background: #ccc; text-align: right; padding: 5px; height: 1%; border-top: 1px solid #333 ; } </style> <!-- *****CSS CODE END***** --> <!-- *****HTML CODE START***** --> <body> <div id="container"> <div id="header"> <img src = file:///Users/jduffy/Desktop/projectSite/banner1.jpg> </img> </div> <div id="navigation"> <ul> <li><a href="file:///Users/jduffy/Desktop/projectSite/home">Home</a></li> <li><a href="file:///Users/jduffy/Desktop/projectSite/theProject">The Project</a></li> <li><a href="file:///Users/jduffy/Desktop/projectSite/Pictures">Pictures</a></li> <li><a href="file:///Users/jduffy/Desktop/projectSite/Contact">Contact us</a></li> </ul> </div> <div id="content-container"> <div id="content"> <h2> Page heading </h2> <div id="contentBody"> <p> home pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome page home pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome page home pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome page </p> <p> test2 </p> <p> test3 </p> </div> </div> <div id="aside"> <div id="asideHeading"> <h3> Aside Heading </h3> </div> <div id="asideText"> <p> test5 </p> </div> </div> <div id="footer"> <text id="footerDate">0</text> </div> </div> </div> </body> <!-- *****HTML CODE END***** --> </html> <!-- *****JavaScript CODE START***** --> <script type="text/javascript"> /*date*/ var today = new Date(); document.getElementById("footerDate").innerHTML = today; </script> <!-- *****JavaScript CODE END***** -->

    Read the article

  • Web Browser Control &ndash; Specifying the IE Version

    - by Rick Strahl
    I use the Internet Explorer Web Browser Control in a lot of my applications to display document type layout. HTML happens to be one of the most common document formats and displaying data in this format – even in desktop applications, is often way easier than using normal desktop technologies. One issue the Web Browser Control has that it’s perpetually stuck in IE 7 rendering mode by default. Even though IE 8 and now 9 have significantly upgraded the IE rendering engine to be more CSS and HTML compliant by default the Web Browser control will have none of it. IE 9 in particular – with its much improved CSS support and basic HTML 5 support is a big improvement and even though the IE control uses some of IE’s internal rendering technology it’s still stuck in the old IE 7 rendering by default. This applies whether you’re using the Web Browser control in a WPF application, a WinForms app, a FoxPro or VB classic application using the ActiveX control. Behind the scenes all these UI platforms use the COM interfaces and so you’re stuck by those same rules. Rendering Challenged To see what I’m talking about here are two screen shots rendering an HTML 5 doctype page that includes some CSS 3 functionality – rounded corners and border shadows - from an earlier post. One uses IE 9 as a standalone browser, and one uses a simple WPF form that includes the Web Browser control. IE 9 Browser:   Web Browser control in a WPF form: The IE 9 page displays this HTML correctly – you see the rounded corners and shadow displayed. Obviously the latter rendering using the Web Browser control in a WPF application is a bit lacking. Not only are the new CSS features missing but the page also renders in Internet Explorer’s quirks mode so all the margins, padding etc. behave differently by default, even though there’s a CSS reset applied on this page. If you’re building an application that intends to use the Web Browser control for a live preview of some HTML this is clearly undesirable. Feature Delegation via Registry Hacks Fortunately starting with Internet Explore 8 and later there’s a fix for this problem via a registry setting. You can specify a registry key to specify which rendering mode and version of IE should be used by that application. These are not global mind you – they have to be enabled for each application individually. There are two different sets of keys for 32 bit and 64 bit applications. 32 bit: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION Value Key: yourapplication.exe 64 bit: HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION Value Key: yourapplication.exe The value to set this key to is (taken from MSDN here) as decimal values: 9999 (0x270F) Internet Explorer 9. Webpages are displayed in IE9 Standards mode, regardless of the !DOCTYPE directive. 9000 (0x2328) Internet Explorer 9. Webpages containing standards-based !DOCTYPE directives are displayed in IE9 mode. 8888 (0x22B8) Webpages are displayed in IE8 Standards mode, regardless of the !DOCTYPE directive. 8000 (0x1F40) Webpages containing standards-based !DOCTYPE directives are displayed in IE8 mode. 7000 (0x1B58) Webpages containing standards-based !DOCTYPE directives are displayed in IE7 Standards mode.   The added key looks something like this in the Registry Editor: With this in place my Html Html Help Builder application which has wwhelp.exe as its main executable now works with HTML 5 and CSS 3 documents in the same way that Internet Explorer 9 does. Incidentally I accidentally added an ‘empty’ DWORD value of 0 to my EXE name and that worked as well giving me IE 9 rendering. Although not documented I suspect 0 (or an invalid value) will default to the installed browser. Don’t have a good way to test this but if somebody could try this with IE 8 installed that would be great: What happens when setting 9000 with IE 8 installed? What happens when setting 0 with IE 8 installed? Don’t forget to add Keys for Host Environments If you’re developing your application in Visual Studio and you run the debugger you may find that your application is still not rendering right, but if you run the actual generated EXE from Explorer or the OS command prompt it works. That’s because when you run the debugger in Visual Studio it wraps your application into a debugging host container. For this reason you might want to also add another registry key for yourapp.vshost.exe on your development machine. If you’re developing in Visual FoxPro make sure you add a key for vfp9.exe to see the rendering adjustments in the Visual FoxPro development environment. Cleaner HTML - no more HTML mangling! There are a number of additional benefits to setting up rendering of the Web Browser control to the IE 9 engine (or even the IE 8 engine) beyond the obvious rendering functionality. IE 9 actually returns your HTML in something that resembles the original HTML formatting, as opposed to the IE 7 default format which mangled the original HTML content. If you do the following in the WPF application: private void button2_Click(object sender, RoutedEventArgs e) { dynamic doc = this.webBrowser.Document; MessageBox.Show(doc.body.outerHtml); } you get different output depending on the rendering mode active. With the default IE 7 rendering you get: <BODY><DIV> <H1>Rounded Corners and Shadows - Creating Dialogs in CSS</H1> <DIV class=toolbarcontainer><A class=hoverbutton href="./"><IMG src="../../css/images/home.gif"> Home</A> <A class=hoverbutton href="RoundedCornersAndShadows.htm"><IMG src="../../css/images/refresh.gif"> Refresh</A> </DIV> <DIV class=containercontent> <FIELDSET><LEGEND>Plain Box</LEGEND><!-- Simple Box with rounded corners and shadow --> <DIV style="BORDER-BOTTOM: steelblue 2px solid; BORDER-LEFT: steelblue 2px solid; WIDTH: 550px; BORDER-TOP: steelblue 2px solid; BORDER-RIGHT: steelblue 2px solid" class="roundbox boxshadow"> <DIV style="BACKGROUND: khaki" class="boxcontenttext roundbox">Simple Rounded Corner Box. </DIV></DIV></FIELDSET> <FIELDSET><LEGEND>Box with Header</LEGEND> <DIV style="BORDER-BOTTOM: steelblue 2px solid; BORDER-LEFT: steelblue 2px solid; WIDTH: 550px; BORDER-TOP: steelblue 2px solid; BORDER-RIGHT: steelblue 2px solid" class="roundbox boxshadow"> <DIV class="gridheaderleft roundbox-top">Box with a Header</DIV> <DIV style="BACKGROUND: khaki" class="boxcontenttext roundbox-bottom">Simple Rounded Corner Box. </DIV></DIV></FIELDSET> <FIELDSET><LEGEND>Dialog Style Window</LEGEND> <DIV style="POSITION: relative; WIDTH: 450px" id=divDialog class="dialog boxshadow" jQuery16107208195684204002="2"> <DIV style="POSITION: relative" class=dialog-header> <DIV class=closebox></DIV>User Sign-in <DIV class=closebox jQuery16107208195684204002="3"></DIV></DIV> <DIV class=descriptionheader>This dialog is draggable and closable</DIV> <DIV class=dialog-content><LABEL>Username:</LABEL> <INPUT name=txtUsername value=" "> <LABEL>Password</LABEL> <INPUT name=txtPassword value=" "> <HR> <INPUT id=btnLogin value=Login type=button> </DIV> <DIV class=dialog-statusbar>Ready</DIV></DIV></FIELDSET> </DIV> <SCRIPT type=text/javascript>     $(document).ready(function () {         $("#divDialog")             .draggable({ handle: ".dialog-header" })             .closable({ handle: ".dialog-header",                 closeHandler: function () {                     alert("Window about to be closed.");                     return true;  // true closes - false leaves open                 }             });     }); </SCRIPT> </DIV></BODY> Now lest you think I’m out of my mind and create complete whacky HTML rooted in the last century, here’s the IE 9 rendering mode output which looks a heck of a lot cleaner and a lot closer to my original HTML of the page I’m accessing: <body> <div>         <h1>Rounded Corners and Shadows - Creating Dialogs in CSS</h1>     <div class="toolbarcontainer">         <a class="hoverbutton" href="./"> <img src="../../css/images/home.gif"> Home</a>         <a class="hoverbutton" href="RoundedCornersAndShadows.htm"> <img src="../../css/images/refresh.gif"> Refresh</a>     </div>         <div class="containercontent">     <fieldset>         <legend>Plain Box</legend>                <!-- Simple Box with rounded corners and shadow -->             <div style="border: 2px solid steelblue; width: 550px;" class="roundbox boxshadow">                              <div style="background: khaki;" class="boxcontenttext roundbox">                     Simple Rounded Corner Box.                 </div>             </div>     </fieldset>     <fieldset>         <legend>Box with Header</legend>         <div style="border: 2px solid steelblue; width: 550px;" class="roundbox boxshadow">                          <div class="gridheaderleft roundbox-top">Box with a Header</div>             <div style="background: khaki;" class="boxcontenttext roundbox-bottom">                 Simple Rounded Corner Box.             </div>         </div>     </fieldset>       <fieldset>         <legend>Dialog Style Window</legend>         <div style="width: 450px; position: relative;" id="divDialog" class="dialog boxshadow">             <div style="position: relative;" class="dialog-header">                 <div class="closebox"></div>                 User Sign-in             <div class="closebox"></div></div>             <div class="descriptionheader">This dialog is draggable and closable</div>                    <div class="dialog-content">                             <label>Username:</label>                 <input name="txtUsername" value=" " type="text">                 <label>Password</label>                 <input name="txtPassword" value=" " type="text">                                 <hr/>                                 <input id="btnLogin" value="Login" type="button">                        </div>             <div class="dialog-statusbar">Ready</div>         </div>     </fieldset>     </div> <script type="text/javascript">     $(document).ready(function () {         $("#divDialog")             .draggable({ handle: ".dialog-header" })             .closable({ handle: ".dialog-header",                 closeHandler: function () {                     alert("Window about to be closed.");                     return true;  // true closes - false leaves open                 }             });     }); </script>        </div> </body> IOW, in IE9 rendering mode IE9 is much closer (but not identical) to the original HTML from the page on the Web that we’re reading from. As a side note: Unfortunately, the browser feature emulation can't be applied against the Html Help (CHM) Engine in Windows which uses the Web Browser control (or COM interfaces anyway) to render Html Help content. I tried setting up hh.exe which is the help viewer, to use IE 9 rendering but a help file generated with CSS3 features will simply show in IE 7 mode. Bummer - this would have been a nice quick fix to allow help content served from CHM files to look better. HTML Editing leaves HTML formatting intact In the same vane, if you do any inline HTML editing in the control by setting content to be editable, IE 9’s control does a much more reasonable job of creating usable and somewhat valid HTML. It also leaves the original content alone other than the text your are editing or adding. No longer is the HTML output stripped of excess spaces and reformatted in IEs format. So if I do: private void button3_Click(object sender, RoutedEventArgs e) { dynamic doc = this.webBrowser.Document; doc.body.contentEditable = true; } and then make some changes to the document by typing into it using IE 9 mode, the document formatting stays intact and only the affected content is modified. The created HTML is reasonably clean (although it does lack proper XHTML formatting for things like <br/> <hr/>). This is very different from IE 7 mode which mangled the HTML as soon as the page was loaded into the control. Any editing you did stripped out all white space and lost all of your existing XHTML formatting. In IE 9 mode at least *most* of your original formatting stays intact. This is huge! In Html Help Builder I have supported HTML editing for a long time but the HTML mangling by the Web Browser control made it very difficult to edit the HTML later. Previously IE would mangle the HTML by stripping out spaces, upper casing all tags and converting many XHTML safe tags to its HTML 3 tags. Now IE leaves most of my document alone while editing, and creates cleaner and more compliant markup (with exception of self-closing elements like BR/HR). The end result is that I now have HTML editing in place that's much cleaner and actually capable of being manually edited. Caveats, Caveats, Caveats It wouldn't be Internet Explorer if there weren't some major compatibility issues involved in using this various browser version interaction. The biggest thing I ran into is that there are odd differences in some of the COM interfaces and what they return. I specifically ran into a problem with the document.selection.createRange() function which with IE 7 compatibility returns an expected text range object. When running in IE 8 or IE 9 mode however. I could not retrieve a valid text range with this code where loEdit is the WebBrowser control: loRange = loEdit.document.selection.CreateRange() The loRange object returned (here in FoxPro) had a length property of 0 but none of the other properties of the TextRange or TextRangeCollection objects were available. I figured this was due to some changed security settings but even after elevating the Intranet Security Zone and mucking with the other browser feature flags pertaining to security I had no luck. In the end I relented and used a JavaScript function in my editor document that returns a selection range object: function getselectionrange() { var range = document.selection.createRange(); return range; } and call that JavaScript function from my host applications code: *** Use a function in the document to get around HTML Editing issues loRange = loEdit.document.parentWindow.getselectionrange(.f.) and that does work correctly. This wasn't a big deal as I'm already loading a support script file into the editor page so all I had to do is add the function to this existing script file. You can find out more how to call script code in the Web Browser control from a host application in a previous post of mine. IE 8 and 9 also clamp down the security environment a little more than the default IE 7 control, so there may be other issues you run into. Other than the createRange() problem above I haven't seen anything else that is breaking in my code so far though and that's encouraging at least since it uses a lot of HTML document manipulation for the custom editor I've created (and would love to replace - any PROFESSIONAL alternatives anybody?) Registry Key Installation for your Application It’s important to remember that this registry setting is made per application, so most likely this is something you want to set up with your installer. Also remember that 32 and 64 bit settings require separate settings in the registry so if you’re creating your installer you most likely will want to set both keys in the registry preemptively for your application. I use Tarma Installer for all of my application installs and in Tarma I configure registry keys for both and set a flag to only install the latter key group in the 64 bit version: Because this setting is application specific you have to do this for every application you install unfortunately, but this also means that you can safely configure this setting in the registry because it is after only applied to your application. Another problem with install based installation is version detection. If IE 8 is installed I’d want 8000 for the value, if IE 9 is installed I want 9000. I can do this easily in code but in the installer this is much more difficult. I don’t have a good solution for this at the moment, but given that the app works with IE 7 mode now, IE 9 mode is just a bonus for the moment. If IE 9 is not installed and 9000 is used the default rendering will remain in use.   It sure would be nice if we could specify the IE rendering mode as a property, but I suspect the ActiveX container has to know before it loads what actual version to load up and once loaded can only load a single version of IE. This would account for this annoying application level configuration… Summary The registry feature emulation has been available for quite some time, but I just found out about it today and started experimenting around with it. I’m stoked to see that this is available as I’d pretty much given up in ever seeing any better rendering in the Web Browser control. Now at least my apps can take advantage of newer HTML features. Now if we could only get better HTML Editing support somehow <snicker>… ah can’t have everything.© Rick Strahl, West Wind Technologies, 2005-2011Posted in .NET  FoxPro  Windows  

    Read the article

  • Using HTML 5 SessionState to save rendered Page Content

    - by Rick Strahl
    HTML 5 SessionState and LocalStorage are very useful and super easy to use to manage client side state. For building rich client side or SPA style applications it's a vital feature to be able to cache user data as well as HTML content in order to swap pages in and out of the browser's DOM. What might not be so obvious is that you can also use the sessionState and localStorage objects even in classic server rendered HTML applications to provide caching features between pages. These APIs have been around for a long time and are supported by most relatively modern browsers and even all the way back to IE8, so you can use them safely in your Web applications. SessionState and LocalStorage are easy The APIs that make up sessionState and localStorage are very simple. Both object feature the same API interface which  is a simple, string based key value store that has getItem, setItem, removeitem, clear and  key methods. The objects are also pseudo array objects and so can be iterated like an array with  a length property and you have array indexers to set and get values with. Basic usage  for storing and retrieval looks like this (using sessionStorage, but the syntax is the same for localStorage - just switch the objects):// set var lastAccess = new Date().getTime(); if (sessionStorage) sessionStorage.setItem("myapp_time", lastAccess.toString()); // retrieve in another page or on a refresh var time = null; if (sessionStorage) time = sessionStorage.getItem("myapp_time"); if (time) time = new Date(time * 1); else time = new Date(); sessionState stores data that is browser session specific and that has a liftetime of the active browser session or window. Shut down the browser or tab and the storage goes away. localStorage uses the same API interface, but the lifetime of the data is permanently stored in the browsers storage area until deleted via code or by clearing out browser cookies (not the cache). Both sessionStorage and localStorage space is limited. The spec is ambiguous about this - supposedly sessionStorage should allow for unlimited size, but it appears that most WebKit browsers support only 2.5mb for either object. This means you have to be careful what you store especially since other applications might be running on the same domain and also use the storage mechanisms. That said 2.5mb worth of character data is quite a bit and would go a long way. The easiest way to get a feel for how sessionState and localStorage work is to look at a simple example. You can go check out the following example online in Plunker: http://plnkr.co/edit/0ICotzkoPjHaWa70GlRZ?p=preview which looks like this: Plunker is an online HTML/JavaScript editor that lets you write and run Javascript code and similar to JsFiddle, but a bit cleaner to work in IMHO (thanks to John Papa for turning me on to it). The sample has two text boxes with counts that update session/local storage every time you click the related button. The counts are 'cached' in Session and Local storage. The point of these examples is that both counters survive full page reloads, and the LocalStorage counter survives a complete browser shutdown and restart. Go ahead and try it out by clicking the Reload button after updating both counters and then shutting down the browser completely and going back to the same URL (with the same browser). What you should see is that reloads leave both counters intact at the counted values, while a browser restart will leave only the local storage counter intact. The code to deal with the SessionStorage (and LocalStorage not shown here) in the example is isolated into a couple of wrapper methods to simplify the code: function getSessionCount() { var count = 0; if (sessionStorage) { var count = sessionStorage.getItem("ss_count"); count = !count ? 0 : count * 1; } $("#txtSession").val(count); return count; } function setSessionCount(count) { if (sessionStorage) sessionStorage.setItem("ss_count", count.toString()); } These two functions essentially load and store a session counter value. The two key methods used here are: sessionStorage.getItem(key); sessionStorage.setItem(key,stringVal); Note that the value given to setItem and return by getItem has to be a string. If you pass another type you get an error. Don't let that limit you though - you can easily enough store JSON data in a variable so it's quite possible to pass complex objects and store them into a single sessionStorage value:var user = { name: "Rick", id="ricks", level=8 } sessionStorage.setItem("app_user",JSON.stringify(user)); to retrieve it:var user = sessionStorage.getItem("app_user"); if (user) user = JSON.parse(user); Simple! If you're using the Chrome Developer Tools (F12) you can also check out the session and local storage state on the Resource tab:   You can also use this tool to refresh or remove entries from storage. What we just looked at is a purely client side implementation where a couple of counters are stored. For rich client centric AJAX applications sessionStorage and localStorage provide a very nice and simple API to store application state while the application is running. But you can also use these storage mechanisms to manage server centric HTML applications when you combine server rendering with some JavaScript to perform client side data caching. You can both store some state information and data on the client (ie. store a JSON object and carry it forth between server rendered HTML requests) or you can use it for good old HTTP based caching where some rendered HTML is saved and then restored later. Let's look at the latter with a real life example. Why do I need Client-side Page Caching for Server Rendered HTML? I don't know about you, but in a lot of my existing server driven applications I have lists that display a fair amount of data. Typically these lists contain links to then drill down into more specific data either for viewing or editing. You can then click on a link and go off to a detail page that provides more concise content. So far so good. But now you're done with the detail page and need to get back to the list, so you click on a 'bread crumbs trail' or an application level 'back to list' button and… …you end up back at the top of the list - the scroll position, the current selection in some cases even filters conditions - all gone with the wind. You've left behind the state of the list and are starting from scratch in your browsing of the list from the top. Not cool! Sound familiar? This a pretty common scenario with server rendered HTML content where it's so common to display lists to drill into, only to lose state in the process of returning back to the original list. Look at just about any traditional forums application, or even StackOverFlow to see what I mean here. Scroll down a bit to look at a post or entry, drill in then use the bread crumbs or tab to go back… In some cases returning to the top of a list is not a big deal. On StackOverFlow that sort of works because content is turning around so quickly you probably want to actually look at the top posts. Not always though - if you're browsing through a list of search topics you're interested in and drill in there's no way back to that position. Essentially anytime you're actively browsing the items in the list, that's when state becomes important and if it's not handled the user experience can be really disrupting. Content Caching If you're building client centric SPA style applications this is a fairly easy to solve problem - you tend to render the list once and then update the page content to overlay the detail content, only hiding the list temporarily until it's used again later. It's relatively easy to accomplish this simply by hiding content on the page and later making it visible again. But if you use server rendered content, hanging on to all the detail like filters, selections and scroll position is not quite as easy. Or is it??? This is where sessionStorage comes in handy. What if we just save the rendered content of a previous page, and then restore it when we return to this page based on a special flag that tells us to use the cached version? Let's see how we can do this. A real World Use Case Recently my local ISP asked me to help out with updating an ancient classifieds application. They had a very busy, local classifieds app that was originally an ASP classic application. The old app was - wait for it: frames based - and even though I lobbied against it, the decision was made to keep the frames based layout to allow rapid browsing of the hundreds of posts that are made on a daily basis. The primary reason they wanted this was precisely for the ability to quickly browse content item by item. While I personally hate working with Frames, I have to admit that the UI actually works well with the frames layout as long as you're running on a large desktop screen. You can check out the frames based desktop site here: http://classifieds.gorge.net/ However when I rebuilt the app I also added a secondary view that doesn't use frames. The main reason for this of course was for mobile displays which work horribly with frames. So there's a somewhat mobile friendly interface to the interface, which ditches the frames and uses some responsive design tweaking for mobile capable operation: http://classifeds.gorge.net/mobile  (or browse the base url with your browser width under 800px)   Here's what the mobile, non-frames view looks like:   As you can see this means that the list of classifieds posts now is a list and there's a separate page for drilling down into the item. And of course… originally we ran into that usability issue I mentioned earlier where the browse, view detail, go back to the list cycle resulted in lost list state. Originally in mobile mode you scrolled through the list, found an item to look at and drilled in to display the item detail. Then you clicked back to the list and BAM - you've lost your place. Because there are so many items added on a daily basis the full list is never fully loaded, but rather there's a "Load Additional Listings"  entry at the button. Not only did we originally lose our place when coming back to the list, but any 'additionally loaded' items are no longer there because the list was now rendering  as if it was the first page hit. The additional listings, and any filters, the selection of an item all were lost. Major Suckage! Using Client SessionStorage to cache Server Rendered Content To work around this problem I decided to cache the rendered page content from the list in SessionStorage. Anytime the list renders or is updated with Load Additional Listings, the page HTML is cached and stored in Session Storage. Any back links from the detail page or the login or write entry forms then point back to the list page with a back=true query string parameter. If the server side sees this parameter it doesn't render the part of the page that is cached. Instead the client side code retrieves the data from the sessionState cache and simply inserts it into the page. It sounds pretty simple, and the overall the process is really easy, but there are a few gotchas that I'll discuss in a minute. But first let's look at the implementation. Let's start with the server side here because that'll give a quick idea of the doc structure. As I mentioned the server renders data from an ASP.NET MVC view. On the list page when returning to the list page from the display page (or a host of other pages) looks like this: https://classifieds.gorge.net/list?back=True The query string value is a flag, that indicates whether the server should render the HTML. Here's what the top level MVC Razor view for the list page looks like:@model MessageListViewModel @{ ViewBag.Title = "Classified Listing"; bool isBack = !string.IsNullOrEmpty(Request.QueryString["back"]); } <form method="post" action="@Url.Action("list")"> <div id="SizingContainer"> @if (!isBack) { @Html.Partial("List_CommandBar_Partial", Model) <div id="PostItemContainer" class="scrollbox" xstyle="-webkit-overflow-scrolling: touch;"> @Html.Partial("List_Items_Partial", Model) @if (Model.RequireLoadEntry) { <div class="postitem loadpostitems" style="padding: 15px;"> <div id="LoadProgress" class="smallprogressright"></div> <div class="control-progress"> Load additional listings... </div> </div> } </div> } </div> </form> As you can see the query string triggers a conditional block that if set is simply not rendered. The content inside of #SizingContainer basically holds  the entire page's HTML sans the headers and scripts, but including the filter options and menu at the top. In this case this makes good sense - in other situations the fact that the menu or filter options might be dynamically updated might make you only cache the list rather than essentially the entire page. In this particular instance all of the content works and produces the proper result as both the list along with any filter conditions in the form inputs are restored. Ok, let's move on to the client. On the client there are two page level functions that deal with saving and restoring state. Like the counter example I showed earlier, I like to wrap the logic to save and restore values from sessionState into a separate function because they are almost always used in several places.page.saveData = function(id) { if (!sessionStorage) return; var data = { id: id, scroll: $("#PostItemContainer").scrollTop(), html: $("#SizingContainer").html() }; sessionStorage.setItem("list_html",JSON.stringify(data)); }; page.restoreData = function() { if (!sessionStorage) return; var data = sessionStorage.getItem("list_html"); if (!data) return null; return JSON.parse(data); }; The data that is saved is an object which contains an ID which is the selected element when the user clicks and a scroll position. These two values are used to reset the scroll position when the data is used from the cache. Finally the html from the #SizingContainer element is stored, which makes for the bulk of the document's HTML. In this application the HTML captured could be a substantial bit of data. If you recall, I mentioned that the server side code renders a small chunk of data initially and then gets more data if the user reads through the first 50 or so items. The rest of the items retrieved can be rather sizable. Other than the JSON deserialization that's Ok. Since I'm using SessionStorage the storage space has no immediate limits. Next is the core logic to handle saving and restoring the page state. At first though this would seem pretty simple, and in some cases it might be, but as the following code demonstrates there are a few gotchas to watch out for. Here's the relevant code I use to save and restore:$( function() { … var isBack = getUrlEncodedKey("back", location.href); if (isBack) { // remove the back key from URL setUrlEncodedKey("back", "", location.href); var data = page.restoreData(); // restore from sessionState if (!data) { // no data - force redisplay of the server side default list window.location = "list"; return; } $("#SizingContainer").html(data.html); var el = $(".postitem[data-id=" + data.id + "]"); $(".postitem").removeClass("highlight"); el.addClass("highlight"); $("#PostItemContainer").scrollTop(data.scroll); setTimeout(function() { el.removeClass("highlight"); }, 2500); } else if (window.noFrames) page.saveData(null); // save when page loads $("#SizingContainer").on("click", ".postitem", function() { var id = $(this).attr("data-id"); if (!id) return true; if (window.noFrames) page.saveData(id); var contentFrame = window.parent.frames["Content"]; if (contentFrame) contentFrame.location.href = "show/" + id; else window.location.href = "show/" + id; return false; }); … The code starts out by checking for the back query string flag which triggers restoring from the client cache. If cached the cached data structure is read from sessionStorage. It's important here to check if data was returned. If the user had back=true on the querystring but there is no cached data, he likely bookmarked this page or otherwise shut down the browser and came back to this URL. In that case the server didn't render any detail and we have no cached data, so all we can do is redirect to the original default list view using window.location. If we continued the page would render no data - so make sure to always check the cache retrieval result. Always! If there is data the it's loaded and the data.html data is restored back into the document by simply injecting the HTML back into the document's #SizingContainer element:$("#SizingContainer").html(data.html); It's that simple and it's quite quick even with a fully loaded list of additional items and on a phone. The actual HTML data is stored to the cache on every page load initially and then again when the user clicks on an element to navigate to a particular listing. The former ensures that the client cache always has something in it, and the latter updates with additional information for the selected element. For the click handling I use a data-id attribute on the list item (.postitem) in the list and retrieve the id from that. That id is then used to navigate to the actual entry as well as storing that Id value in the saved cached data. The id is used to reset the selection by searching for the data-id value in the restored elements. The overall process of this save/restore process is pretty straight forward and it doesn't require a bunch of code, yet it yields a huge improvement in the usability of the site on mobile devices (or anybody who uses the non-frames view). Some things to watch out for As easy as it conceptually seems to simply store and retrieve cached content, you have to be quite aware what type of content you are caching. The code above is all that's specific to cache/restore cycle and it works, but it took a few tweaks to the rest of the script code and server code to make it all work. There were a few gotchas that weren't immediately obvious. Here are a few things to pay attention to: Event Handling Logic Timing of manipulating DOM events Inline Script Code Bookmarking to the Cache Url when no cache exists Do you have inline script code in your HTML? That script code isn't going to run if you restore from cache and simply assign or it may not run at the time you think it would normally in the DOM rendering cycle. JavaScript Event Hookups The biggest issue I ran into with this approach almost immediately is that originally I had various static event handlers hooked up to various UI elements that are now cached. If you have an event handler like:$("#btnSearch").click( function() {…}); that works fine when the page loads with server rendered HTML, but that code breaks when you now load the HTML from cache. Why? Because the elements you're trying to hook those events to may not actually be there - yet. Luckily there's an easy workaround for this by using deferred events. With jQuery you can use the .on() event handler instead:$("#SelectionContainer").on("click","#btnSearch", function() {…}); which monitors a parent element for the events and checks for the inner selector elements to handle events on. This effectively defers to runtime event binding, so as more items are added to the document bindings still work. For any cached content use deferred events. Timing of manipulating DOM Elements Along the same lines make sure that your DOM manipulation code follows the code that loads the cached content into the page so that you don't manipulate DOM elements that don't exist just yet. Ideally you'll want to check for the condition to restore cached content towards the top of your script code, but that can be tricky if you have components or other logic that might not all run in a straight line. Inline Script Code Here's another small problem I ran into: I use a DateTime Picker widget I built a while back that relies on the jQuery date time picker. I also created a helper function that allows keyboard date navigation into it that uses JavaScript logic. Because MVC's limited 'object model' the only way to embed widget content into the page is through inline script. This code broken when I inserted the cached HTML into the page because the script code was not available when the component actually got injected into the page. As the last bullet - it's a matter of timing. There's no good work around for this - in my case I pulled out the jQuery date picker and relied on native <input type="date" /> logic instead - a better choice these days anyway, especially since this view is meant to be primarily to serve mobile devices which actually support date input through the browser (unlike desktop browsers of which only WebKit seems to support it). Bookmarking Cached Urls When you cache HTML content you have to make a decision whether you cache on the client and also not render that same content on the server. In the Classifieds app I didn't render server side content so if the user comes to the page with back=True and there is no cached content I have to a have a Plan B. Typically this happens when somebody ends up bookmarking the back URL. The easiest and safest solution for this scenario is to ALWAYS check the cache result to make sure it exists and if not have a safe URL to go back to - in this case to the plain uncached list URL which amounts to effectively redirecting. This seems really obvious in hindsight, but it's easy to overlook and not see a problem until much later, when it's not obvious at all why the page is not rendering anything. Don't use <body> to replace Content Since we're practically replacing all the HTML in the page it may seem tempting to simply replace the HTML content of the <body> tag. Don't. The body tag usually contains key things that should stay in the page and be there when it loads. Specifically script tags and elements and possibly other embedded content. It's best to create a top level DOM element specifically as a placeholder container for your cached content and wrap just around the actual content you want to replace. In the app above the #SizingContainer is that container. Other Approaches The approach I've used for this application is kind of specific to the existing server rendered application we're running and so it's just one approach you can take with caching. However for server rendered content caching this is a pattern I've used in a few apps to retrofit some client caching into list displays. In this application I took the path of least resistance to the existing server rendering logic. Here are a few other ways that come to mind: Using Partial HTML Rendering via AJAXInstead of rendering the page initially on the server, the page would load empty and the client would render the UI by retrieving the respective HTML and embedding it into the page from a Partial View. This effectively makes the initial rendering and the cached rendering logic identical and removes the server having to decide whether this request needs to be rendered or not (ie. not checking for a back=true switch). All the logic related to caching is made on the client in this case. Using JSON Data and Client RenderingThe hardcore client option is to do the whole UI SPA style and pull data from the server and then use client rendering or databinding to pull the data down and render using templates or client side databinding with knockout/angular et al. As with the Partial Rendering approach the advantage is that there's no difference in the logic between pulling the data from cache or rendering from scratch other than the initial check for the cache request. Of course if the app is a  full on SPA app, then caching may not be required even - the list could just stay in memory and be hidden and reactivated. I'm sure there are a number of other ways this can be handled as well especially using  AJAX. AJAX rendering might simplify the logic, but it also complicates search engine optimization since there's no content loaded initially. So there are always tradeoffs and it's important to look at all angles before deciding on any sort of caching solution in general. State of the Session SessionState and LocalStorage are easy to use in client code and can be integrated even with server centric applications to provide nice caching features of content and data. In this post I've shown a very specific scenario of storing HTML content for the purpose of remembering list view data and state and making the browsing experience for lists a bit more friendly, especially if there's dynamically loaded content involved. If you haven't played with sessionStorage or localStorage I encourage you to give it a try. There's a lot of cool stuff that you can do with this beyond the specific scenario I've covered here… Resources Overview of localStorage (also applies to sessionStorage) Web Storage Compatibility Modernizr Test Suite© Rick Strahl, West Wind Technologies, 2005-2013Posted in JavaScript  HTML5  ASP.NET  MVC   Tweet !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

    Read the article

  • Failed to Install Xdebug

    - by burnt1ce
    've registered xdebug in php.ini (as per http://xdebug.org/docs/install) but it's not showing up when i run "php -m" or when i get a test page to run "phpinfo()". I've just installed the latest version of XAMPP. I've used both "zend_extention" and "zend_extention_ts" to specify the path of the xdebug dll. I ensured that my apache server restarted and used the latest change of my php.ini by executing "httpd -k restart". Can anyone provide any suggestions in getting xdebug to show up? Here are the contents of my php.ini file. [PHP] ;;;;;;;;;;;;;;;;;;; ; About php.ini ; ;;;;;;;;;;;;;;;;;;; ; PHP's initialization file, generally called php.ini, is responsible for ; configuring many of the aspects of PHP's behavior. ; PHP attempts to find and load this configuration from a number of locations. ; The following is a summary of its search order: ; 1. SAPI module specific location. ; 2. The PHPRC environment variable. (As of PHP 5.2.0) ; 3. A number of predefined registry keys on Windows (As of PHP 5.2.0) ; 4. Current working directory (except CLI) ; 5. The web server's directory (for SAPI modules), or directory of PHP ; (otherwise in Windows) ; 6. The directory from the --with-config-file-path compile time option, or the ; Windows directory (C:\windows or C:\winnt) ; See the PHP docs for more specific information. ; http://php.net/configuration.file ; The syntax of the file is extremely simple. Whitespace and Lines ; beginning with a semicolon are silently ignored (as you probably guessed). ; Section headers (e.g. [Foo]) are also silently ignored, even though ; they might mean something in the future. ; Directives following the section heading [PATH=/www/mysite] only ; apply to PHP files in the /www/mysite directory. Directives ; following the section heading [HOST=www.example.com] only apply to ; PHP files served from www.example.com. Directives set in these ; special sections cannot be overridden by user-defined INI files or ; at runtime. Currently, [PATH=] and [HOST=] sections only work under ; CGI/FastCGI. ; http://php.net/ini.sections ; Directives are specified using the following syntax: ; directive = value ; Directive names are *case sensitive* - foo=bar is different from FOO=bar. ; Directives are variables used to configure PHP or PHP extensions. ; There is no name validation. If PHP can't find an expected ; directive because it is not set or is mistyped, a default value will be used. ; The value can be a string, a number, a PHP constant (e.g. E_ALL or M_PI), one ; of the INI constants (On, Off, True, False, Yes, No and None) or an expression ; (e.g. E_ALL & ~E_NOTICE), a quoted string ("bar"), or a reference to a ; previously set variable or directive (e.g. ${foo}) ; Expressions in the INI file are limited to bitwise operators and parentheses: ; | bitwise OR ; ^ bitwise XOR ; & bitwise AND ; ~ bitwise NOT ; ! boolean NOT ; Boolean flags can be turned on using the values 1, On, True or Yes. ; They can be turned off using the values 0, Off, False or No. ; An empty string can be denoted by simply not writing anything after the equal ; sign, or by using the None keyword: ; foo = ; sets foo to an empty string ; foo = None ; sets foo to an empty string ; foo = "None" ; sets foo to the string 'None' ; If you use constants in your value, and these constants belong to a ; dynamically loaded extension (either a PHP extension or a Zend extension), ; you may only use these constants *after* the line that loads the extension. ;;;;;;;;;;;;;;;;;;; ; About this file ; ;;;;;;;;;;;;;;;;;;; ; PHP comes packaged with two INI files. One that is recommended to be used ; in production environments and one that is recommended to be used in ; development environments. ; php.ini-production contains settings which hold security, performance and ; best practices at its core. But please be aware, these settings may break ; compatibility with older or less security conscience applications. We ; recommending using the production ini in production and testing environments. ; php.ini-development is very similar to its production variant, except it's ; much more verbose when it comes to errors. We recommending using the ; development version only in development environments as errors shown to ; application users can inadvertently leak otherwise secure information. ;;;;;;;;;;;;;;;;;;; ; Quick Reference ; ;;;;;;;;;;;;;;;;;;; ; The following are all the settings which are different in either the production ; or development versions of the INIs with respect to PHP's default behavior. ; Please see the actual settings later in the document for more details as to why ; we recommend these changes in PHP's behavior. ; allow_call_time_pass_reference ; Default Value: On ; Development Value: Off ; Production Value: Off ; display_errors ; Default Value: On ; Development Value: On ; Production Value: Off ; display_startup_errors ; Default Value: Off ; Development Value: On ; Production Value: Off ; error_reporting ; Default Value: E_ALL & ~E_NOTICE ; Development Value: E_ALL | E_STRICT ; Production Value: E_ALL & ~E_DEPRECATED ; html_errors ; Default Value: On ; Development Value: On ; Production value: Off ; log_errors ; Default Value: Off ; Development Value: On ; Production Value: On ; magic_quotes_gpc ; Default Value: On ; Development Value: Off ; Production Value: Off ; max_input_time ; Default Value: -1 (Unlimited) ; Development Value: 60 (60 seconds) ; Production Value: 60 (60 seconds) ; output_buffering ; Default Value: Off ; Development Value: 4096 ; Production Value: 4096 ; register_argc_argv ; Default Value: On ; Development Value: Off ; Production Value: Off ; register_long_arrays ; Default Value: On ; Development Value: Off ; Production Value: Off ; request_order ; Default Value: None ; Development Value: "GP" ; Production Value: "GP" ; session.bug_compat_42 ; Default Value: On ; Development Value: On ; Production Value: Off ; session.bug_compat_warn ; Default Value: On ; Development Value: On ; Production Value: Off ; session.gc_divisor ; Default Value: 100 ; Development Value: 1000 ; Production Value: 1000 ; session.hash_bits_per_character ; Default Value: 4 ; Development Value: 5 ; Production Value: 5 ; short_open_tag ; Default Value: On ; Development Value: Off ; Production Value: Off ; track_errors ; Default Value: Off ; Development Value: On ; Production Value: Off ; url_rewriter.tags ; Default Value: "a=href,area=href,frame=src,form=,fieldset=" ; Development Value: "a=href,area=href,frame=src,input=src,form=fakeentry" ; Production Value: "a=href,area=href,frame=src,input=src,form=fakeentry" ; variables_order ; Default Value: "EGPCS" ; Development Value: "GPCS" ; Production Value: "GPCS" ;;;;;;;;;;;;;;;;;;;; ; php.ini Options ; ;;;;;;;;;;;;;;;;;;;; ; Name for user-defined php.ini (.htaccess) files. Default is ".user.ini" ;user_ini.filename = ".user.ini" ; To disable this feature set this option to empty value ;user_ini.filename = ; TTL for user-defined php.ini files (time-to-live) in seconds. Default is 300 seconds (5 minutes) ;user_ini.cache_ttl = 300 ;;;;;;;;;;;;;;;;;;;; ; Language Options ; ;;;;;;;;;;;;;;;;;;;; ; Enable the PHP scripting language engine under Apache. ; http://php.net/engine engine = On ; This directive determines whether or not PHP will recognize code between ; <? and ?> tags as PHP source which should be processed as such. It's been ; recommended for several years that you not use the short tag "short cut" and ; instead to use the full <?php and ?> tag combination. With the wide spread use ; of XML and use of these tags by other languages, the server can become easily ; confused and end up parsing the wrong code in the wrong context. But because ; this short cut has been a feature for such a long time, it's currently still ; supported for backwards compatibility, but we recommend you don't use them. ; Default Value: On ; Development Value: Off ; Production Value: Off ; http://php.net/short-open-tag short_open_tag = Off ; Allow ASP-style <% %> tags. ; http://php.net/asp-tags asp_tags = Off ; The number of significant digits displayed in floating point numbers. ; http://php.net/precision precision = 14 ; Enforce year 2000 compliance (will cause problems with non-compliant browsers) ; http://php.net/y2k-compliance y2k_compliance = On ; Output buffering is a mechanism for controlling how much output data ; (excluding headers and cookies) PHP should keep internally before pushing that ; data to the client. If your application's output exceeds this setting, PHP ; will send that data in chunks of roughly the size you specify. ; Turning on this setting and managing its maximum buffer size can yield some ; interesting side-effects depending on your application and web server. ; You may be able to send headers and cookies after you've already sent output ; through print or echo. You also may see performance benefits if your server is ; emitting less packets due to buffered output versus PHP streaming the output ; as it gets it. On production servers, 4096 bytes is a good setting for performance ; reasons. ; Note: Output buffering can also be controlled via Output Buffering Control ; functions. ; Possible Values: ; On = Enabled and buffer is unlimited. (Use with caution) ; Off = Disabled ; Integer = Enables the buffer and sets its maximum size in bytes. ; Note: This directive is hardcoded to Off for the CLI SAPI ; Default Value: Off ; Development Value: 4096 ; Production Value: 4096 ; http://php.net/output-buffering output_buffering = Off ; You can redirect all of the output of your scripts to a function. For ; example, if you set output_handler to "mb_output_handler", character ; encoding will be transparently converted to the specified encoding. ; Setting any output handler automatically turns on output buffering. ; Note: People who wrote portable scripts should not depend on this ini ; directive. Instead, explicitly set the output handler using ob_start(). ; Using this ini directive may cause problems unless you know what script ; is doing. ; Note: You cannot use both "mb_output_handler" with "ob_iconv_handler" ; and you cannot use both "ob_gzhandler" and "zlib.output_compression". ; Note: output_handler must be empty if this is set 'On' !!!! ; Instead you must use zlib.output_handler. ; http://php.net/output-handler ;output_handler = ; Transparent output compression using the zlib library ; Valid values for this option are 'off', 'on', or a specific buffer size ; to be used for compression (default is 4KB) ; Note: Resulting chunk size may vary due to nature of compression. PHP ; outputs chunks that are few hundreds bytes each as a result of ; compression. If you prefer a larger chunk size for better ; performance, enable output_buffering in addition. ; Note: You need to use zlib.output_handler instead of the standard ; output_handler, or otherwise the output will be corrupted. ; http://php.net/zlib.output-compression zlib.output_compression = Off ; http://php.net/zlib.output-compression-level ;zlib.output_compression_level = -1 ; You cannot specify additional output handlers if zlib.output_compression ; is activated here. This setting does the same as output_handler but in ; a different order. ; http://php.net/zlib.output-handler ;zlib.output_handler = ; Implicit flush tells PHP to tell the output layer to flush itself ; automatically after every output block. This is equivalent to calling the ; PHP function flush() after each and every call to print() or echo() and each ; and every HTML block. Turning this option on has serious performance ; implications and is generally recommended for debugging purposes only. ; http://php.net/implicit-flush ; Note: This directive is hardcoded to On for the CLI SAPI implicit_flush = Off ; The unserialize callback function will be called (with the undefined class' ; name as parameter), if the unserializer finds an undefined class ; which should be instantiated. A warning appears if the specified function is ; not defined, or if the function doesn't include/implement the missing class. ; So only set this entry, if you really want to implement such a ; callback-function. unserialize_callback_func = ; When floats & doubles are serialized store serialize_precision significant ; digits after the floating point. The default value ensures that when floats ; are decoded with unserialize, the data will remain the same. serialize_precision = 100 ; This directive allows you to enable and disable warnings which PHP will issue ; if you pass a value by reference at function call time. Passing values by ; reference at function call time is a deprecated feature which will be removed ; from PHP at some point in the near future. The acceptable method for passing a ; value by reference to a function is by declaring the reference in the functions ; definition, not at call time. This directive does not disable this feature, it ; only determines whether PHP will warn you about it or not. These warnings ; should enabled in development environments only. ; Default Value: On (Suppress warnings) ; Development Value: Off (Issue warnings) ; Production Value: Off (Issue warnings) ; http://php.net/allow-call-time-pass-reference allow_call_time_pass_reference = On ; Safe Mode ; http://php.net/safe-mode safe_mode = Off ; By default, Safe Mode does a UID compare check when ; opening files. If you want to relax this to a GID compare, ; then turn on safe_mode_gid. ; http://php.net/safe-mode-gid safe_mode_gid = Off ; When safe_mode is on, UID/GID checks are bypassed when ; including files from this directory and its subdirectories. ; (directory must also be in include_path or full path must ; be used when including) ; http://php.net/safe-mode-include-dir safe_mode_include_dir = ; When safe_mode is on, only executables located in the safe_mode_exec_dir ; will be allowed to be executed via the exec family of functions. ; http://php.net/safe-mode-exec-dir safe_mode_exec_dir = ; Setting certain environment variables may be a potential security breach. ; This directive contains a comma-delimited list of prefixes. In Safe Mode, ; the user may only alter environment variables whose names begin with the ; prefixes supplied here. By default, users will only be able to set ; environment variables that begin with PHP_ (e.g. PHP_FOO=BAR). ; Note: If this directive is empty, PHP will let the user modify ANY ; environment variable! ; http://php.net/safe-mode-allowed-env-vars safe_mode_allowed_env_vars = PHP_ ; This directive contains a comma-delimited list of environment variables that ; the end user won't be able to change using putenv(). These variables will be ; protected even if safe_mode_allowed_env_vars is set to allow to change them. ; http://php.net/safe-mode-protected-env-vars safe_mode_protected_env_vars = LD_LIBRARY_PATH ; open_basedir, if set, limits all file operations to the defined directory ; and below. This directive makes most sense if used in a per-directory ; or per-virtualhost web server configuration file. This directive is ; *NOT* affected by whether Safe Mode is turned On or Off. ; http://php.net/open-basedir ;open_basedir = ; This directive allows you to disable certain functions for security reasons. ; It receives a comma-delimited list of function names. This directive is ; *NOT* affected by whether Safe Mode is turned On or Off. ; http://php.net/disable-functions disable_functions = ; This directive allows you to disable certain classes for security reasons. ; It receives a comma-delimited list of class names. This directive is ; *NOT* affected by whether Safe Mode is turned On or Off. ; http://php.net/disable-classes disable_classes = ; Colors for Syntax Highlighting mode. Anything that's acceptable in ; <span style="color: ???????"> would work. ; http://php.net/syntax-highlighting ;highlight.string = #DD0000 ;highlight.comment = #FF9900 ;highlight.keyword = #007700 ;highlight.bg = #FFFFFF ;highlight.default = #0000BB ;highlight.html = #000000 ; If enabled, the request will be allowed to complete even if the user aborts ; the request. Consider enabling it if executing long requests, which may end up ; being interrupted by the user or a browser timing out. PHP's default behavior ; is to disable this feature. ; http://php.net/ignore-user-abort ;ignore_user_abort = On ; Determines the size of the realpath cache to be used by PHP. This value should ; be increased on systems where PHP opens many files to reflect the quantity of ; the file operations performed. ; http://php.net/realpath-cache-size ;realpath_cache_size = 16k ; Duration of time, in seconds for which to cache realpath information for a given ; file or directory. For systems with rarely changing files, consider increasing this ; value. ; http://php.net/realpath-cache-ttl ;realpath_cache_ttl = 120 ;;;;;;;;;;;;;;;;; ; Miscellaneous ; ;;;;;;;;;;;;;;;;; ; Decides whether PHP may expose the fact that it is installed on the server ; (e.g. by adding its signature to the Web server header). It is no security ; threat in any way, but it makes it possible to determine whether you use PHP ; on your server or not. ; http://php.net/expose-php expose_php = On ;;;;;;;;;;;;;;;;;;; ; Resource Limits ; ;;;;;;;;;;;;;;;;;;; ; Maximum execution time of each script, in seconds ; http://php.net/max-execution-time ; Note: This directive is hardcoded to 0 for the CLI SAPI max_execution_time = 60 ; Maximum amount of time each script may spend parsing request data. It's a good ; idea to limit this time on productions servers in order to eliminate unexpectedly ; long running scripts. ; Note: This directive is hardcoded to -1 for the CLI SAPI ; Default Value: -1 (Unlimited) ; Development Value: 60 (60 seconds) ; Production Value: 60 (60 seconds) ; http://php.net/max-input-time max_input_time = 60 ; Maximum input variable nesting level ; http://php.net/max-input-nesting-level ;max_input_nesting_level = 64 ; Maximum amount of memory a script may consume (128MB) ; http://php.net/memory-limit memory_limit = 128M ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ; Error handling and logging ; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ; This directive informs PHP of which errors, warnings and notices you would like ; it to take action for. The recommended way of setting values for this ; directive is through the use of the error level constants and bitwise ; operators. The error level constants are below here for convenience as well as ; some common settings and their meanings. ; By default, PHP is set to take action on all errors, notices and warnings EXCEPT ; those related to E_NOTICE and E_STRICT, which together cover best practices and ; recommended coding standards in PHP. For performance reasons, this is the ; recommend error reporting setting. Your production server shouldn't be wasting ; resources complaining about best practices and coding standards. That's what ; development servers and development settings are for. ; Note: The php.ini-development file has this setting as E_ALL | E_STRICT. This ; means it pretty much reports everything which is exactly what you want during ; development and early testing. ; ; Error Level Constants: ; E_ALL - All errors and warnings (includes E_STRICT as of PHP 6.0.0) ; E_ERROR - fatal run-time errors ; E_RECOVERABLE_ERROR - almost fatal run-time errors ; E_WARNING - run-time warnings (non-fatal errors) ; E_PARSE - compile-time parse errors ; E_NOTICE - run-time notices (these are warnings which often result ; from a bug in your code, but it's possible that it was ; intentional (e.g., using an uninitialized variable and ; relying on the fact it's automatically initialized to an ; empty string) ; E_STRICT - run-time notices, enable to have PHP suggest changes ; to your code which will ensure the best interoperability ; and forward compatibility of your code ; E_CORE_ERROR - fatal errors that occur during PHP's initial startup ; E_CORE_WARNING - warnings (non-fatal errors) that occur during PHP's ; initial startup ; E_COMPILE_ERROR - fatal compile-time errors ; E_COMPILE_WARNING - compile-time warnings (non-fatal errors) ; E_USER_ERROR - user-generated error message ; E_USER_WARNING - user-generated warning message ; E_USER_NOTICE - user-generated notice message ; E_DEPRECATED - warn about code that will not work in future versions ; of PHP ; E_USER_DEPRECATED - user-generated deprecation warnings ; ; Common Values: ; E_ALL & ~E_NOTICE (Show all errors, except for notices and coding standards warnings.) ; E_ALL & ~E_NOTICE | E_STRICT (Show all errors, except for notices) ; E_COMPILE_ERROR|E_RECOVERABLE_ERROR|E_ERROR|E_CORE_ERROR (Show only errors) ; E_ALL | E_STRICT (Show all errors, warnings and notices including coding standards.) ; Default Value: E_ALL & ~E_NOTICE ; Development Value: E_ALL | E_STRICT ; Production Value: E_ALL & ~E_DEPRECATED ; http://php.net/error-reporting error_reporting = E_ALL & ~E_NOTICE & ~E_DEPRECATED ; This directive controls whether or not and where PHP will output errors, ; notices and warnings too. Error output is very useful during development, but ; it could be very dangerous in production environments. Depending on the code ; which is triggering the error, sensitive information could potentially leak ; out of your application such as database usernames and passwords or worse. ; It's recommended that errors be logged on production servers rather than ; having the errors sent to STDOUT. ; Possible Values: ; Off = Do not display any errors ; stderr = Display errors to STDERR (affects only CGI/CLI binaries!) ; On or stdout = Display errors to STDOUT ; Default Value: On ; Development Value: On ; Production Value: Off ; http://php.net/display-errors display_errors = On ; The display of errors which occur during PHP's startup sequence are handled ; separately from display_errors. PHP's default behavior is to suppress those ; errors from clients. Turning the display of startup errors on can be useful in ; debugging configuration problems. But, it's strongly recommended that you ; leave this setting off on production servers. ; Default Value: Off ; Development Value: On ; Production Value: Off ; http://php.net/display-startup-errors display_startup_errors = On ; Besides displaying errors, PHP can also log errors to locations such as a ; server-specific log, STDERR, or a location specified by the error_log ; directive found below. While errors should not be displayed on productions ; servers they should still be monitored and logging is a great way to do that. ; Default Value: Off ; Development Value: On ; Production Value: On ; http://php.net/log-errors log_errors = Off ; Set maximum length of log_errors. In error_log information about the source is ; added. The default is 1024 and 0 allows to not apply any maximum length at all. ; http://php.net/log-errors-max-len log_errors_max_len = 1024 ; Do not log repeated messages. Repeated errors must occur in same file on same ; line unless ignore_repeated_source is set true. ; http://php.net/ignore-repeated-errors ignore_repeated_errors = Off ; Ignore source of message when ignoring repeated messages. When this setting ; is On you will not log errors with repeated messages from different files or ; source lines. ; http://php.net/ignore-repeated-source ignore_repeated_source = Off ; If this parameter is set to Off, then memory leaks will not be shown (on ; stdout or in the log). This has only effect in a debug compile, and if ; error reporting includes E_WARNING in the allowed list ; http://php.net/report-memleaks report_memleaks = On ; This setting is on by default. ;report_zend_debug = 0 ; Store the last error/warning message in $php_errormsg (boolean). Setting this value ; to On can assist in debugging and is appropriate for development servers. It should ; however be disabled on production servers. ; Default Value: Off ; Development Value: On ; Production Value: Off ; http://php.net/track-errors track_errors = Off ; Turn off normal error reporting and emit XML-RPC error XML ; http://php.net/xmlrpc-errors ;xmlrpc_errors = 0 ; An XML-RPC faultCode ;xmlrpc_error_number = 0 ; When PHP displays or logs an error, it has the capability of inserting html ; links to documentation related to that error. This directive controls whether ; those HTML links appear in error messages or not. For performance and security ; reasons, it's recommended you disable this on production servers. ; Note: This directive is hardcoded to Off for the CLI SAPI ; Default Value: On ; Development Value: On ; Production value: Off ; http://php.net/html-errors html_errors = On ; If html_errors is set On PHP produces clickable error messages that direct ; to a page describing the error or function causing the error in detail. ; You can download a copy of the PHP manual from http://php.net/docs ; and change docref_root to the base URL of your local copy including the ; leading '/'. You must also specify the file extension being used including ; the dot. PHP's default behavior is to leave these settings empty. ; Note: Never use this feature for production boxes. ; http://php.net/docref-root ; Examples ;docref_root = "/phpmanual/" ; http://php.net/docref-ext ;docref_ext = .html ; String to output before an error message. PHP's default behavior is to leave ; this setting blank. ; http://php.net/error-prepend-string ; Example: ;error_prepend_string = "<font color=#ff0000>" ; String to output after an error message. PHP's default behavior is to leave ; this setting blank. ; http://php.net/error-append-string ; Example: ;error_append_string = "</font>" ; Log errors to specified file. PHP's default behavior is to leave this value ; empty. ; http://php.net/error-log ; Example: ;error_log = php_errors.log ; Log errors to syslog (Event Log on NT, not valid in Windows 95). ;error_log = syslog ;error_log = "C:\xampp\apache\logs\php_error.log" ;;;;;;;;;;;;;;;;; ; Data Handling ; ;;;;;;;;;;;;;;;;; ; Note - track_vars is ALWAYS enabled ; The separator used in PHP generated URLs to separate arguments. ; PHP's default setting is "&". ; http://php.net/arg-separator.output ; Example: arg_separator.output = "&amp;" ; List of separator(s) used by PHP to parse input URLs into variables. ; PHP's default setting is "&

    Read the article

  • Getting this CSS to work in IE6

    - by jerrygarciuh
    Hi folks, Working on this page: http://www.karlsenner.dreamhosters.com/about.php and having trouble with the navigation in IE6. It validates as XHTML 1.0 Transitional. Works great in FF, IE 8, Chrome, and Windows Safari. In IE6 and Opera 10 the drop menus appear too high. I tried adding in the different versions of http://code.google.com/p/ie7-js/ but it did not solve the issue in IE. The CSS looks like this: #wrapper { position: relative; display: block; background-color: inherit; margin: 0px auto; padding: 0; width: 900px; min-height: 900px; } #nav {} .navImage { position:relative; display:inline; height:102px; /* added in hopes of helping IE position but no dice */ } .subMenu { position:absolute; z-index:10; background-color:#FFF; top: 14px; left:0; } .subMenu a:link, .subMenu a:visited, .subMenu a:active{ display:block; width:90%; padding:6px; margin:0; color:#3CF; font-family:Tahoma, Geneva, sans-serif; font-size:14px; text-decoration:none; font-weight:bold; } .subMenu a:hover{ display:block; width:90%; padding:6px; margin:0; color:#3CF; background-color:#CCC; font-family:Tahoma, Geneva, sans-serif; font-size:14px; text-decoration:none; font-weight:bold; } jQuery rollovers: $('#navcompany').hover(function () { $('#companyMenu').css('display', 'block'); $('#companyImg').attr('src','g/nav/company_over.gif'); }, function () { $('#companyMenu').css('display', 'none'); $('#companyImg').attr('src','g/nav/company.gif'); }); And one of the cells. Since the menu is coming out of PHP and IE was not respecting the widths I just use PHP to get the nav image widths and write them to styles on the fly. Solved the width issue as IE acted like they should inherit their width from the wrapper. This may be a clue as to why they don't appear below their nav images but I can't sort it. <div id="navcompany" class="navImage" style="width:128px"> <a href="about.php"> <img src="g/nav/company_over.gif" name="companyImg" width="128" height="102" border="0" id="companyImg" alt="company" /> </a> <div id="companyMenu" class="subMenu" style="display:none; width:128px"> <a href="about.php">About us</a> <a href="location.php">Our location</a> </div> </div> Any advice greatly appreciated! JG

    Read the article

  • facebook iframe stream.Publish cannot close dialog or skip

    - by fooyee
    am pulling my hair over this :( spent 10 hrs but nothing came out I read this thread http://forum.developers.facebook.com/viewtopic.php?pid=198128 but it didn't help much. I'm running a local dev App Engine server ( localhost:8080 ) iframe app so I have a couple of problems. 1) on safari 4.0.4, the publish story dialog comes up nicely with all images/data/action_links. upon posting a story (or skipping), the dialog goes blank and wouldn't close. 2) I tested the same code on firefox 3.5.8, the dialog comes up with all images/data/action_links, but then the whole thing freezes. Clicking anywhere on the dialog doesn't help at all. If i'm patient enough and click "publish", I have to wait for abt 10 seconds before the dialog says "story is published". then it freezes. (clicking on skip doesn't make a difference). btw, there is no "button clicking effect" : ie: the buttons don't look like they "sink down" upon clicking. I checked the firefox memory using the command "top" on the terminal, it all seems okay, no spike in CPU processes ( i could open other firefox tabs and work on them) My futile attempts at solving the problems... 1) so i thought, hmm could this be because of local dev (localhost) problem? I uploaded the code to the production server, the same thing happens. 2) I tried an older firefox (3.1) and the same problem persisted ( the freezing ) 3) I noticed that i kind of used 2 different FB features ( Connect and XFBML). The Connect Feature I used in the PostStory function. The XFBML feature I used before the tag. So I thought, hmm ... I tried replacing the FB_RequireFeatures["Connect"] feature with FB_RequireFeatures["XFBML"]. nothing changed. I still can't close the story dialog. 4) Is there a possibility that I didn't connect to xd_receiver.htm properly? my xd_receiver.htm is stored in my folder /media/fbconnect in my app.yaml handler: - url: /fbconnect static_dir: media/fbconnect so i thought a connection has to be established with xd_receiver.htm. any way I can test that? here're all the codes: <script type="text/javascript"> //post story function function PostStory() { //init facebook FB_RequireFeatures(["Connect"], function() { FB.Facebook.init('my_app_key', "/fbconnect/xd_receiver.htm"); FB.ensureInit(function() { var message = 'the message'; var attachment = { 'name': 'a simple app to send gifts', 'href': 'http://apps.facebook.com/my_app_name', 'caption': '{*actor*} sent u something', 'description': 'some description', "media": [{ "type": "image", "src": "http://bit.ly/105QYr", "href": "http://bit.ly/105QYr"}] }; //action links can only be seen AFTER the feed is published var action_links = [{ 'text': 'Send him/her a gift back!', 'href': 'http://somelink.com'}]; FB.Connect.streamPublish(message, attachment, action_links, null, "Share the gift with your friends", callback, false, null); }); }); function callback(post_id, exception) { //alert('Wall Post Complete'); } } </script> just before the end of the /body tag, i have this: <script type="text/javascript"> function callFBInit() { FB_RequireFeatures( ["XFBML"], function(){ FB.Facebook.init("my_app_key", "/fbconnect/xd_receiver.htm"); } ); } callFBInit(); btw, my xd_receiver.htm contains: <!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? > <head> <title>cross-domain receiver page</title> </head> <body> <script src=?http://static.ak.facebook.com/js/api_lib/v0.4/xdcommreceiver.debug.js? type=? text/javascript? ></script> </body> </html> hope you guys can help out. thx

    Read the article

  • Parsing GeoRSS Feed with jQuery

    - by senfo
    I'm attempting to use the jQuery jFeed plugin for parsing an Atom, GeoRSS feed and I'm running into issues extracting the information I need. For example, I need to extract the summary element and I would like to render the contents in a div on my HTML page. Additionally, I'd like to extract the contents from the georss:point elements and pass them into Google Maps to render them as points on a map. The problem is that it seems jFeed is stripping out the GeoRSS-related information. For example, I can extract the title element without issues, but it seems it doesn't extract the summary or georss:point elements, at all. Following is a snippet of the XML I'm working with: <feed xmlns="http://www.w3.org/2005/Atom" xmlns:georss="http://www.georss.org/georss"> <title>Search Results from DataWarehouse.HRSA.gov</title> <link rel="self" href="http://datawarehouse.hrsa.gov/HGDWDataWebService/HGDWDataService.aspx?service=HC&zip=20002&radius=10"/> <link rel="alternate" href="http://datawarehouse.hrsa.gov/"/> <author> <name>HRSA Geospatial Data Warehouse</name> </author> <id>tag:datawarehouse.hrsa.gov,2010-04-05:/</id> <updated>2010-04-05T19:25:28-05:00</updated> <entry> <title>Christ House</title> <link href="http://www.christhouse.org" /> <id>tag:datawarehouse.hrsa.gov,2010-04-05:/D388C4C6-FFA4-4091-819B-64D67DC64931</id> <summary type="xhtml"> <div xmlns="http://www.w3.org/1999/xhtml"> <div class="vcard"> <div class="fn org">Christ House</div> <div class="adr"> <div class="street-address">1717 Columbia Rd. N.W.</div> <span class="locality">Washington</span>, <span class="region">District of Columbia</span>, <span class="postal-code">20009-2803</span> </div> <div class="tel">202-328-1100</div> </div> <div> Categories: <span class="category">Service Delivery Site</span> </div> </div> </summary> <georss:point>38.9243636363636 -77.0395636363637</georss:point> <updated>2010-04-04T00:00:00-05:00</updated> </entry> </feed> Following is the jQuery code that I'm using: $(document).ready(function() { $.getFeed({ //url: 'http://datawarehouse.hrsa.gov/HGDWDataWebService/HGDWDataService.aspx?service=HC&zip=20002&radius=10', url: 'test.xml', success: function(feed) { $.each(feed.items, function(index, value) { $('#rssContent').append(value.title); // Set breakpoint here }); } }); }); I set a breakpoint on the line that appends to the rssContent div and noticed the objects in feed.items don't have the properties I'm after. Am I doing something wrong or was jFeed simply not designed to work the way I want it to?

    Read the article

  • Bootstrap Backbone Marionette Modal

    - by Greg Pagendam-Turner
    I'm trying to create a dialog in backbone and Marionette based on this article: http://lostechies.com/derickbailey/2012/04/17/managing-a-modal-dialog-with-backbone-and-marionette/ I have a fiddle here: http://jsfiddle.net/netroworx/ywKSG/ HTML: <script type="text/template" id="edit-dialog"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h3 id="actionTitle">Create a New Action</h3> </div> <div class="modal-body"> <input type="hidden" id="actionId" name="actionId" /> <table> <tbody> <tr> <td>Goal: </td> <td> <input type="text" id="goal" name="goal" > <input type="hidden" id="goalid" name="goalid" > <a tabindex="-1" title="Show All Items" class="ui-button ui-widget ui-state-default ui-button-icon-only ui-corner-right ui-combobox-toggle ui-state-hover" role="button" aria-disabled="false" > <span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span><span class="ui-button-text"></span> </a> </td> </tr> <tr> <td>Action name: </td> <td> <input type="text" id="actionName" name="actionName"> </td> </tr> <tr> <td>Target date:</td> <td> <input type="text" id="actionTargetDate" name="actionTargetDate"/> </td> </tr> <tr id="actionActualDateRow"> <td>Actual date:</td> <td> <input type="text" id="actionActualDate" name="actionActualDate"/> </td> </tr> </tbody> </table> </div> <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal">Close</a> <a href='#' class="btn btn-primary" id="actionActionLabel">Create Action</a> </div> </script> <div id="modal"></div> <a href="#" id="showModal">Show Modal</a> Javascript: var ActionEditView = Backbone.Marionette.ItemView.extend({ template: "#edit-dialog" }); function showModal() { var view = new ActionEditView(); view.render(); var $modalEl = $("#modal"); $modalEl.html(view.el); $modalEl.modal(); } $('#showModal').click(showModal); When I click on the show modal link the html pane goes dark as expected and the dialog content is displayed but on the background layer. Why is this happening?

    Read the article

  • How to make a css navigation menu "selected" option still clickable

    - by aslum
    So I have a fairly simple vertical CSS menu based off of UL. <ul class="vertnav"> <li><a href="unselected1.php">Item1</a></li> <li><a href="unselected2.php">Item2</a></li> <li><a href="selected.php" class="vertnavdown">Selected</a></li> </ul> I want three basic colors (say tan for default LI, orange for VERTNAVDOWN, and red for A:HOVER. However I can't seem to get the vertnavdown class to inherit right, and the .vertnav li a:visited overrides it every time. if I use !important to force it through I can't seem to also get the hover to work. Any suggestions? I thought I understood inheritance in CSS but I guess I don't. .vertnav{ list-style: none; margin: 0px; width: 172px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; text-align: left; height: 45px; } .vertnav li{ margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; border-bottom: 0px none; border-right: 0px none; border-top: 1px solid #fff; border-left: 0px none; text-align: left; height: 45px; width: 172px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } .vertnav li a{ display: block; text-align: left; color: #666666; font-weight: bold; background-color: #FFEEC1; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; padding-top: 10px; padding-right: 0px; padding-bottom: 0px; padding-left: 15px; height: 45px; } .vertnav li a:visited{ display: block; text-align: left; color: #666666; background-color: #FFEEC1; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; text-decoration: none; padding-top: 10px; padding-right: 0px; padding-bottom: 0px; padding-left: 15px; height: 45px; } .vertnav li a:hover{ color: white; background-color: #ffbf0c; font-family: Verdana, Arial, Helvetica, sans-serif; height: 45px; text-decoration: none; font-weight: bold; } .vertnavdown a { display:block; color: #FFF; background-color: #ff9000; } .vertnavdown a:hover { background-color: #ffbf0c; } ^^^^^^^^^^^^^ Edited to add CSS. ^^^^^^

    Read the article

  • JQuery/JavaScript confusion with Previous and Next buttons.

    - by Anders H
    I've got some inherited JQuery code that isn't working as I'd think and I'm just not even sure what to research or look up next. The Problem: I've got a few DIVs within the HTML: a container, a "frame" and the content. If the content is longer than the frame, it's cut off using overflow:hidden and a Next - button appears. The next button works correctly. However, there's also a previous button with similar code, but it does not work as expected and just displays whenever the next button does. Whenever either button is hidden, it will not reappear again when navigating back through the "pages". When the I may be overlooking something in the code, but here it is in full. The HTML: <div id="draggable" class="ui-widget-content"> <div id="draggable-title" class="cufon">about</div> <a id="draggable-close" href="javascript:void(0);"><div class="close-img icon"></div></a> <div class="clear"></div> <div id="draggable-frame"> <div id="draggable-content"> </div> </div> <a id="prevContent" href="javascript:void(0);">&laquo; previous</a><a id="nextContent" href="javascript:void(0);">next &raquo;</a> </div> The JavaScript: $(function() { $("#draggable").draggable(); }); $(document).ready(function(){ $("#draggable-frame").scrollTop(0); $("#prevContent").click(function(){ $("#draggable-content").fadeOut("medium"); setTimeout("showPrev()", 250); if($("#draggable-frame").scrollTop()+$("#draggable-frame").height() >= $("#draggable-content").height()) { $("#prevContent").hide(); } $("#draggable-content").fadeIn("medium"); }); $("#nextContent").click(function(){ $("#draggable-content").fadeOut("medium"); setTimeout("showNext()", 250); if($("#draggable-frame").scrollTop()+$("#draggable-frame").height() >= $("#draggable-content").height()) { $("#nextContent").hide(); } $("#draggable-content").fadeIn("medium"); }); $("#draggable-close").click(function(){ $("#draggable").fadeOut("medium"); }); $("#prevContent").hide(); $("#nextContent").hide(); showContent("about"); $(".opener").click(function(){ $("#draggable-frame").scrollTop(0); $("#draggable").fadeIn("medium"); showContent($(this).attr("title")); }); }); // function showPrev() { $("#draggable-frame").scrollTop($("#draggable-frame").scrollTop() - $("#draggable-frame").height()); } // function showNext() { $("#draggable-frame").scrollTop($("#draggable-frame").scrollTop() + $("#draggable-frame").height()); } function showContent(title) { $("#draggable-title").html(title); $("#draggable-content").html($("#"+title).html()); Cufon.replace('.cufon', { fontFamily: 'cav', hover: true }); $("#nextContent").hide(); $("#prevContent").hide(); if($("#draggable-content").height() > $("#draggable-frame").height()) { $("#nextContent").show(); } if($("#draggable-content").height() > $("#draggable-frame").height()) { $("#prevContent").show(); } } Even just point me in the right direction to research would be a big help right now. Thank you.

    Read the article

  • jQuery AJAX (google PageRank)

    - by RobertPitt
    Hey guys, I need a little help.. iv'e been developing a Jqery plug-in to get the page ranks of urls on a website using XHR, The problem is when requesting the rank from google servers the page is returned no content, but if i use an inspector and get the url that was requests and go to it via my browser the pageranks are shown. so it must be something with headers but its just got me puzzled. Heres some source code but i have removed several aspects that are not needed to review. pagerank.plugin.js ( $.fn.PageRank = function(callback) { var _library = new Object(); //Creat the system library _library.parseUrl = function(a) { var b = {}; var a = a || ''; /* * parse the url to extract its parts */ if (a = a.match(/((s?ftp|https?):\/\/){1}([^\/:]+)?(:([0-9]+))?([^\?#]+)?(\?([^#]+))?(#(.+))?/)) { b.scheme = a[2] ? a[2] : "http"; b.host = a[3] ? a[3] : null; b.port = a[5] ? a[5] : null; b.path = a[6] ? a[6] : null; b.args = a[8] ? a[8] : null; b.anchor = a[10] ? a[10] : null } return b } _library.ValidUrl = function(url) { var b = true; return b = url.host === undefined ? false : url.scheme != "http" && url.scheme != "https" ? false : url.host == "localhost" ? false : true } _library.toHex = function(a){ return (a < 16 ? "0" : "") + a.toString(16) } _library.hexEncodeU32 = function(a) { } _library.generateHash = function(a) { for (var b = 16909125, c = 0; c < a.length; c++) { } return _library.hexEncodeU32(b) } var CheckPageRank = function(domain,_call) { var hash = _library.generateHash(domain); $.ajax( { url: 'http://www.google.com/search?client=navclient-auto&ch=8'+hash+'&features=Rank&q=info:' + escape(domain), async: true, dataType: 'html', ifModified:true, contentType:'', type:'GET', beforeSend:function(xhr) { xhr.setRequestHeader('Referer','http://google.com/'); //Set Referer }, success: function(content,textS,xhr){ var d = xhr.responseText.substr(9, 2).replace(/\s$/, ""); if (d == "" || isNaN(d * 1)) d = "0"; _call(d); } }); } //Return the callback $(this).each(function(){ urlsegments = _library.parseUrl($(this).attr('href')) if(_library.ValidUrl(urlsegments)) { CheckPageRank(urlsegments.host,function(rank){ alert(rank) callback(rank); }); } }); return this; //Dont break any chain. } )(jQuery); Index.html (example) <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript" src="pagerank.plugin.js"></script> <script type="text/javascript"> $(document).ready(function() { $('a').PageRank(function(pr){ alert(pr); }) }); </script> </head> <body> <a href="http://facebook.com">a</a> <a href="http://twitter.com">a</a> <div></div> </body> </html> i just cant understand why its doing this.

    Read the article

  • jquery small refactoring , json call

    - by Alexander Corotchi
    Hi everybody, I need you suggestion to make some refactoring in jquery code because now it looks terrible for me. I have 4 json calls but the difference it is just the URL call. EX: var userId = MyuserID; var perPage = '45'; var showOnPage = '45'; var tag = 'tag1'; var tag1 = 'tag2'; var tag2 = 'tagn'; $.getJSON('http://api.flickr.com/services/rest/?format=json&method='+ 'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId + '&tags=' + tag + '&per_page=' + perPage + '&jsoncallback=?', function(data){ var classShown = 'class="lightbox"'; var classHidden = 'class="lightbox hidden"'; $.each(data.photos.photo, function(i, rPhoto){ var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/' + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret; var thumbPhotoURL = basePhotoURL + '_s.jpg'; var mediumPhotoURL = basePhotoURL + '.jpg'; var photoStringStart = '<li><a '; var photoStringEnd = 'title="' + rPhoto.title + '" href="'+ mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' + rPhoto.title + '"/></a><span>'+rPhoto.title+'</span></li>;' var photoString = (i < showOnPage) ? photoStringStart + classShown + photoStringEnd : photoStringStart + classHidden + photoStringEnd; $(photoString).appendTo("#flickr ul"); }); $("#flickr a").fancybox(); }); $.getJSON('http://api.flickr.com/services/rest/?format=json&method='+ 'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId + '&tags=' + tag1 + '&per_page=' + perPage + '&jsoncallback=?', function(data){ var classShown = 'class="lightbox"'; var classHidden = 'class="lightbox hidden"'; $.each(data.photos.photo, function(i, rPhoto){ var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/' + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret; var thumbPhotoURL = basePhotoURL + '_s.jpg'; var mediumPhotoURL = basePhotoURL + '.jpg'; var photoStringStart = '<li><a '; var photoStringEnd = 'title="' + rPhoto.title + '" href="'+ mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' + rPhoto.title + '"/></a><span>'+rPhoto.title+'</span></li>;' var photoString = (i < showOnPage) ? photoStringStart + classShown + photoStringEnd : photoStringStart + classHidden + photoStringEnd; $(photoString).appendTo(".SetPinos1 ul"); }); $(".Sets a").fancybox(); }); $.getJSON('http://api.flickr.com/services/rest/?format=json&method='+ 'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId + '&tags=' + tagn + '&per_page=' + perPage + '&jsoncallback=?', function(data){ var classShown = 'class="lightbox"'; var classHidden = 'class="lightbox hidden"'; $.each(data.photos.photo, function(i, rPhoto){ var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/' + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret; var thumbPhotoURL = basePhotoURL + '_s.jpg'; var mediumPhotoURL = basePhotoURL + '.jpg'; var photoStringStart = '<li><a '; var photoStringEnd = 'title="' + rPhoto.title + '" href="'+ mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' + rPhoto.title + '"/></a><span>'+rPhoto.title+'</span></li>;' var photoString = (i < showOnPage) ? photoStringStart + classShown + photoStringEnd : photoStringStart + classHidden + photoStringEnd; $(photoString).appendTo(".SetPinos ul"); }); $(".Sets a").fancybox(); }); var tag is only one difference in this url : Can somebody help me not to repeat all this stuff ?? Sorry by so long garbage :(

    Read the article

  • Multiple pages PHP how????

    - by sandy
    Here I have a problem in this code .. I want to specify the 4 values in each page .. But I can not ... So far there is a problem, I think, in limit <?php if(!isset($_GET["page"])) { $page=1; include ("connect.php"); } else { $page= intval($_GET['page']); } $max=4; $from=($max*$page)- $max; $sql = mysql_query("select * from uploads,members,rooms where uploads.MemberID = members.MemberID and uploads.RoomID = rooms.RoomID and UploadCategory='L' order by UploadID desc limit $from,$max "); $num_sql = mysql_num_rows($sql); ?> <table width="400" border="0" cellspacing="1" cellpadding="0"> <tr> <td><form name="form1" method="post" action=""> <div align="center"> <table width="400" border="0" cellpadding="3" cellspacing="1" bgcolor="#CCCCCC"> <tr> <td bgcolor="#FFFFFF">&nbsp;</td> <td colspan="4" bgcolor="#FFFFFF"> <p align="center"><font size="4"> file</font></td> </tr> <tr> <td align="center" bgcolor="#FFFFFF">#</td> <td align="center" bgcolor="#FFFFFF"><strong>member</strong></td> <td align="center" bgcolor="#FFFFFF"><strong> Name</strong></td> </tr> </div> <?php //$sql1 = mysql_query("select * from book order by id desc limit $from,$max "); //$num_sql1 = mysql_num_rows($sql1); $pages=ceil($num_sql/$max); $num = mysql_num_rows($sql); //$result = mysql_query("SELECT * FROM book order by id"); while($row = mysql_fetch_array($sql)) { ?> <tr> <td align="center" bgcolor="#FFFFFF"><input name="checkbox[]" type="checkbox" id="checkbox[]" value="<?php echo $row['UploadID']; ?>"></td> <td bgcolor="#FFFFFF"> <?php echo $row[MemberName]. "<br />"; ?></td> <td bgcolor="#FFFFFF"> <?php echo $row[UpoadName]."<br />"; ?></td> </tr> <?php } ?> <tr> <td colspan="5" align="center" bgcolor="#FFFFFF"><input name="delete" type="submit" id="delete" value="delete"></td> </tr> <?php if($page>1) { $prev=$page-1; echo"<a href=".$PHP_SELF."?page=$prev\"></a>"; } for($i=1;$i<=$pages;$i++) { if($page==$i) echo" [$i] "; else { echo" <a href=".$PHP_SELF."?page=$i\">$i</a> "; } } if($page<$pages) { $next=$page+1; echo"<a href=".$PHP_SELF."?page=$next\"></a>"; } ?> </html> thanks alote

    Read the article

  • jquery Uncaught SyntaxError: Unexpected token )

    - by js00831
    I am getting a jquery error in my code... can you guys tell me whats the reason for this when you click the united states red color button in this link you will see this error http://jsfiddle.net/SSMX4/88/embedded/result/ function checkCookie(){ var cookie_locale = readCookie('desired-locale'); var show_blip_count = readCookie('show_blip_count'); var tesla_locale = 'en_US'; //default to US var path = window.location.pathname; // debug.log("path = " + path); var parsed_url = parseURL(window.location.href); var path_array = parsed_url.segments; var path_length = path_array.length var locale_path_index = -1; var locale_in_path = false; var locales = ['en_AT', 'en_AU', 'en_BE', 'en_CA', 'en_CH', 'de_DE', 'en_DK', 'en_GB', 'en_HK', 'en_EU', 'jp', 'nl_NL', 'en_US', 'it_IT', 'fr_FR', 'no_NO'] // see if we are on a locale path $.each(locales, function(index, value){ locale_path_index = $.inArray(value, path_array); if (locale_path_index != -1) { tesla_locale = value == 'jp' ? 'ja_JP':value; locale_in_path = true; } }); // debug.log('tesla_locale = ' + tesla_locale); cookie_locale = (cookie_locale == null || cookie_locale == 'null') ? false:cookie_locale; // Only do the js redirect on the static homepage. if ((path_length == 1) && (locale_in_path || path == '/')) { debug.log("path in redirect section = " + path); if (cookie_locale && (cookie_locale != tesla_locale)) { // debug.log('Redirecting to cookie_locale...'); var path_base = ''; switch (cookie_locale){ case 'en_US': path_base = path_length > 1 ? path_base:'/'; break; case 'ja_JP': path_base = '/jp' break; default: path_base = '/' + cookie_locale; } path_array = locale_in_path != -1 ? path_array.slice(locale_in_path):path_array; path_array.unshift(path_base); window.location.href = path_array.join('/'); } } // only do the ajax call if we don't have a cookie if (!cookie_locale) { // debug.log('doing the cookie check for locale...') cookie_locale = 'null'; var get_data = {cookie:cookie_locale, page:path, t_locale:tesla_locale}; var query_country_string = parsed_url.query != '' ? parsed_url.query.split('='):false; var query_country = query_country_string ? (query_country_string.slice(0,1) == '?country' ? query_country_string.slice(-1):false):false; if (query_country) { get_data.query_country = query_country; } $.ajax({ url:'/check_locale', data:get_data, cache: false, dataType: "json", success: function(data){ var ip_locale = data.locale; var market = data.market; var new_locale_link = $('#locale_pop #locale_link'); if (data.show_blip && show_blip_count < 3) { setTimeout(function(){ $('#locale_msg').text(data.locale_msg); $('#locale_welcome').text(data.locale_welcome); new_locale_link[0].href = data.new_path; new_locale_link.text(data.locale_link); new_locale_link.attr('rel', data.locale); if (!new_locale_link.hasClass(data.locale)) { new_locale_link.addClass(data.locale); } $('#locale_pop').slideDown('slow', function(){ var hide_blip = setTimeout(function(){ $('#locale_pop').slideUp('slow', function(){ var show_blip_count = readCookie('show_blip_count'); if (!show_blip_count) { createCookie('show_blip_count',1,360); } else if (show_blip_count < 3 ) { var b_count = show_blip_count; b_count ++; eraseCookie('show_blip_count'); createCookie('show_blip_count',b_count,360); } }); },10000); $('#locale_pop').hover(function(){ clearTimeout(hide_blip); },function(){ setTimeout(function(){$('#locale_pop').slideUp();},10000); }); }); },1000); } } }); } }

    Read the article

  • print individual tables ??

    - by LiveEn
    I am getting values from a database and displaying in a table. Im trying to print the results as individual . Im using the below javascript <script type="text/javascript"> function print_parent(element) { element.parentNode.className = 'print'; window.print(); element.parentNode.className = ''; return false; } </script> The problem that i have is when i try to print all the results it works great.can some one please tell me how can i print each individual table in each result please? below is my php code $sql="select * from cisdb where pids LIKE '%$pids%'"; $result=mysql_query($sql) or die(mysql_error()); if (mysql_num_rows($result)==0) { echo '<b><center>There was no records !</center></b>'."<br>"; } while ($row=mysql_fetch_array($result)) { $cat=str_replace('+', ' ', $row['category']); print "<center>"; print "<table width='472' border='1' align='center' class='noprint'>"; print "<tr>"; print "<td width='150'><div align='center'><a href='#' onclick='return print_parent(this)'>Print</a> </div></td>"; print "<td width='150'><div align='center'><a href='process.php?mode=ed&id={$row['id']}'>Edit</div></td>"; print "<td width='150'><div align='center'><a href='process.php?mode=del&id={$row['id']}' onclick='return confirm('Are you sure you want to delete?')'>Delete</a></div></td>"; print "</tr>"; print "</table><br>"; print "<div id='divToPrint'>"; print"<table width=700 style=height:900 border=1 cellpadding=1 cellspacing=1 bordercolor=#D6D6D6 class=sss title={$row['title']}> <tr> <td height=25 colspan=2 align=left valign=top><strong>Customer:{$row['name']}</strong></td> <td width=183 align=left valign=top><strong>Sales ID:{$row['said']} </strong></td> <td width=100 align=left valign=top><strong>Phone Cord. ID:{$row['pcid']}</strong></td> <td align=left valign=top><strong>Type:{$row['classtype']}</strong></td> </tr> <tr> <td height=25 colspan=2 valign=top><strong>Contact Name: </strong></td> <td colspan=2 valign=top><strong>Email:</strong></td> <td width=154 valign=top><strong>Phone:</strong></td> </tr <tr> <td height=15 colspan=5 valign=top><strong>Remarks:</strong></td> </tr> <tr> <td height=15 colspan=2 valign=top><strong>Date Added: </strong></td> <td valign=top><strong>Date Edited : </strong></td> <td colspan=2 valign=top><strong>Printed : </strong></td> </tr> </table></div><br>"; print "</center>"; }

    Read the article

  • passing folder path from an asp file

    - by sushant
    i am using this code to navigate through the folders available on a remote computer. <%@ Language=VBScript %><% option explicit dim sRoot, sDir, sParent, objFSO, objFolder, objFile, objSubFolder, sSize %> <META content="Microsoft Visual Studio 6.0" name=GENERATOR><!-- Author: Adrian Forbes --> <% sRoot = "\\iflblw-bpd-12\Vercon_IP-BPD-01\SOFT" sDir = Request("Dir") sDir = sDir & "\" Response.Write "<h1>" & sDir & "</h1>" & vbCRLF Set objFSO = CreateObject("Scripting.FileSystemObject") on error resume next Set objFolder = objFSO.GetFolder(sRoot & sDir) if err.number <> 0 then Response.Write "Could not open folder" Response.End end if on error goto 0 sParent = objFSO.GetParentFolderName(objFolder.Path) ' Remove the contents of sRoot from the front. This gives us the parent ' path relative to the root folder ' eg. if parent folder is "c:webfilessubfolder1subfolder2" then we just want "subfolder1subfolder2" sParent = mid(sParent, len(sRoot) + 1) Response.Write "<table border=""1"">" ' Give a link to the parent folder. This is just a link to this page only pssing in ' the new folder as a parameter Response.Write "<tr><td colspan=3><a href=""browse.asp?dir=" & Server.URLEncode(sParent) & """>Parent folder</a></td></tr>" & vbCRLF ' Now we want to loop through the subfolders in this folder For Each objSubFolder In objFolder.SubFolders ' And provide a link to them Response.Write "<tr><td colspan=3><a href=""browse.asp?dir=" & Server.URLEncode(sDir & objSubFolder.Name) & """>" & objSubFolder.Name & "</a></td></tr>" & vbCRLF Next ' Now we want to loop through the files in this folder 'For Each objFile In objFolder.Files ' if Clng(objFile.Size) < 1024 then ' sSize = objFile.Size & " bytes" ' else ' sSize = Clng(objFile.Size / 1024) & " KB" 'end if ' And provide a link to view them. This is a link to show.asp passing in the directory and the file ' as parameters ' Response.Write "<tr><td><a href=""show.asp?file=" & server.URLEncode(objFile.Name) & "&dir=" & server.URLEncode (sDir) & """>" & objFile.Name & "</a></td><td>" & sSize & "</td><td>" & objFile.Type & "</td></tr>" & vbCRLF 'Next Response.Write "</table>" %> i want to pass the folder path to a form on another page. actually while filling the form, this page should be called. how to pass the path? for ex: what i need is that when a user wants to select a folder, he clicks a button which calls this page. and on selecting the folder , the folder path should be returned to the form. any help is really appreciated. and sorry for the formatting issue.

    Read the article

  • Cannot Display Chinese Character in my PHP code

    - by Jun1st
    I want to display my Twitter Info in my blog. So I write some code to get it. the issue I got is that Chinese characters displayed as unknown code. Here is the test code. Could anyone take a look and help? Thanks <html> <title>Twitter Test</title> <body> <?php function mystique_objectToArray($object){ if(!is_object($object) && !is_array($object)) return $object; if(is_object($object)) $object = get_object_vars($object); return array_map('mystique_objectToArray', $object); } define( 'ABSPATH', dirname(dirname(__FILE__)) . '/' ); require_once('/home/jun1st/jun1stfeng.com/wp-includes/class-snoopy.php'); $snoopy = new Snoopy; $response = @$snoopy->fetch("http://twitter.com/users/show/jun1st.json"); if ($response) $userdata = json_decode($snoopy->results, true); else $error = true; $response = @$snoopy->fetch("http://twitter.com/statuses/user_timeline/jun1st.json"); if ($response) $tweets = json_decode($snoopy->results, true); else $error = true; if(!$error): // for php < 5 (included JSON returns object) $userdata = mystique_objectToArray($userdata); $tweets = mystique_objectToArray($tweets); $twitdata = array(); $twitdata['user']['profile_image_url'] = $userdata['profile_image_url']; $twitdata['user']['name'] = $userdata['name']; $twitdata['user']['screen_name'] = $userdata['screen_name']; $twitdata['user']['followers_count'] = $userdata['followers_count']; $i = 0; foreach($tweets as $tweet): $twitdata['tweets'][$i]['text'] = $tweet['text']; $twitdata['tweets'][$i]['created_at'] = $tweet['created_at']; $twitdata['tweets'][$i]['id'] = $tweet['id']; $i++; endforeach; endif; // only show if the twitter data from the database is newer than 6 hours if(is_array($twitdata['tweets'])): ?> <div class="clear-block"> <div class="avatar"><img src="<?php echo $twitdata['user']['profile_image_url']; ?>" alt="<?php echo $twitdata['user']['name']; ?>" /></div> <div class="info"><a href="http://www.twitter.com/jun1st"><?php echo $twitdata['user']['name']; ?> </a><br /><span class="followers"> <?php printf(__("%s followers","mystique"),$twitdata['user']['followers_count']); ?></span></div> </div> <ul> <?php $i = 0; foreach($twitdata['tweets'] as $tweet): $pattern = '/\@(\w+)/'; $replace = '<a rel="nofollow" href="http://twitter.com/$1">@$1</a>'; $tweet['text'] = preg_replace($pattern, $replace , $tweet['text']); $tweet['text'] = make_clickable($tweet['text']); // remove +XXXX $tweettime = substr_replace($tweet['created_at'],'',strpos($tweet['created_at'],"+"),5); $link = "http://twitter.com/".$twitdata['user']['screen_name']."/statuses/".$tweet['id']; echo '<li><span class="entry">' . $tweet['text'] .'<a class="date" href="'.$link.'" rel="nofollow">'.$tweettime.'</a></span></li>'; $i++; if ($i == $twitcount) break; endforeach; ?> </ul> <? endif?> ?> </body> </html>

    Read the article

  • Pagination number elements do not work - jquery

    - by ClarkSKent
    Hello, I am trying to get my pagination links to work. It seems when I click any of the pagination number links to go the next page, the new content does not load. literally nothing happens and when looking at the console in Firebug, nothing is sent or loaded. I have on the main page 3 links to filter the content and display it. When any of these links are clicked the results are loaded and displayed along with the associated pagination numbers for that specific content. Here is the main page so you can see what the structure looks like for the jquery: <?php include_once('generate_pagination.php'); ?> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript" src="jquery_pagination.js"></script> <div id="loading" ></div> <div id="content" data-page="1"></div> <ul id="pagination"> <?php generate_pagination($sql) ?> </ul> <br /> <br /> <a href="#" class="category" id="marketing">Marketing</a> <a href="#" class="category" id="automotive">Automotive</a> <a href="#" class="category" id="sports">Sports</a> The jquery below is pretty simple and I don't think I need to explain what it does. I believe the problem may be with the $("#pagination li").click(function(){ since the li elements are the numbers that do not work when clicked. Even when I try to fadeOut or hide the content on click nothing happens. I'm pretty new to the jquery structure so I do not fully understand where the real problem is occurring, this is just from my observation. The jquery file looks like this: $(document).ready(function(){ //Display Loading Image function Display_Load() { $("#loading").fadeIn(900,0); $("#loading").html("<img src='bigLoader.gif' />"); } //Hide Loading Image function Hide_Load() { $("#loading").fadeOut('slow'); }; //Default Starting Page Results $("#pagination li:first").css({'color' : '#FF0084'}).css({'border' : 'none'}); Display_Load(); $("#content").load("pagination_data.php?page=1", Hide_Load()); //Pagination Click $("#pagination li").click(function(){ Display_Load(); //CSS Styles $("#pagination li") .css({'border' : 'solid #dddddd 1px'}) .css({'color' : '#0063DC'}); $(this) .css({'color' : '#FF0084'}) .css({'border' : 'none'}); //Loading Data var pageNum = this.id; $("#content").load("pagination_data.php?page=" + pageNum, function(){ $(this).attr('data-page', pageNum); Hide_Load(); }); }); // Editing below. // Sort content Marketing $("a.category").click(function() { Display_Load(); var this_id = $(this).attr('id'); $.get("pagination.php", { category: this.id }, function(data){ //Load your results into the page var pageNum = $('#content').attr('data-page'); $("#pagination").load('generate_pagination.php?category=' + pageNum +'&ids='+ this_id ); $("#content").load("filter_marketing.php?page=" + pageNum +'&id='+ this_id, Hide_Load()); }); }); }); If anyone could help me on this that would be great, Thanks. EDIT: Here are the innards of <ul id="pagination">: <?php function generate_pagination($sql) { include_once('config.php'); $per_page = 3; //Calculating no of pages $result = mysql_query($sql); $count = mysql_fetch_row($result); $pages = ceil($count[0]/$per_page); //Pagination Numbers for($i=1; $i<=$pages; $i++) { echo '<li class="page_numbers" id="'.$i.'">'.$i.'</li>'; } } $ids=$_GET['ids']; generate_pagination("SELECT COUNT(*) FROM explore WHERE category='$ids'"); ?>

    Read the article

  • HTML overflow:hidden doesn't format text correctly

    - by Rens Groenveld
    I'm working on a website for an American Football team. They have these newsitems on their front page which they can manage through a CMS system. I have a problem with alligning the text inside those news items. Two of the news items look like this: As you can see, the right newsitem text are displayed nicely. But the left cuts it off really bad. You can only see the top half of the text at the last sentence. I use overflow: hidden; to make sure the text doesn't make the div or newsitem bigger. Does anyone have any idea how to solve this through HTML and CSS or should I cut it off serverside with PHP? Here's my code (HTML): <div class="newsitem"> <div class="titlemessagewrapper"> <h2 class="titel" align="center"><?php echo $row['homepagetitel']; ?></h2> <div class="newsbericht"> <?php echo $row['homepagebericht']; ?> </div> </div> <div class="newsfooter"> <span class="footer_author"><a href=""><?php echo get_gebruikersnaam_by_id($row['poster_id']); ?></a></span> <span class="footer_comment"><a href="">Comments <span>todo</span></a></span> <a href="" class="footer_leesmeer">Lees meer</a> </div> </div> And here is the CSS: .newsitem{ float: left; height: 375px; width: 296px; margin: 20px 20px 0px 20px; background-color: #F5F5F5; } .newsitem .titel{ color:#132055; font-size:1.2em; line-height:1.3em; font-weight:bold; margin:10px 5px 5px 5px; padding:0 0 6px 0; border-bottom:1px dashed #9c0001; } .titlemessagewrapper{ height: 335px; overflow: hidden; } .newsitem .newsbericht{ padding:5px 5px 5px 5px; font-size: 0.8em; margin-bottom: 5px; } .newsitem .newsfooter{ width: 100%; height: 25px; background-color: #132055; margin: 0px auto; font-size: 0.8em; padding-top: 5px; margin-top: 10px; border: 1px solid #9c0001; }

    Read the article

< Previous Page | 74 75 76 77 78 79 80 81 82 83 84 85  | Next Page >