Search Results

Search found 17311 results on 693 pages for 'jquery chaining'.

Page 487/693 | < Previous Page | 483 484 485 486 487 488 489 490 491 492 493 494 | Next Page >

Fixed Table Header And Scrolling Body

- by user2881191

can Anyone please help me with the example that is on site 'http://mkoryak.github.io/floatThead/examples/inner-scroll/' How Can i Apply the Jquery to the below example. please provide Me the Demo in JSFiddle. I Want to Make My Table Header Fixed With Scrolling (both horizontal and vertical) Body. If Possible I also need to make the last column Fixed as the Header. Please Help Me Reageding the Issue. I Have Been Stuck For a Week. Below Is My test Code For which I need to apply the style as in the above link or any other better approach. Css : #table-container{ background-color :white; overflow:auto; position:absolute; top : 0px; bottom : 18px; width : 100%; z-index: 1; } Jsp : <div id="table-container"> <table id="maintable" style="width: 100%"> <thead> <tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> <th>Col 4</th> <th>Col 5</th> <th>Col 6</th> <th>Col 7</th> <th>Col 8</th> <th>Col 9</th> </tr> </thead> <tbody> <tr> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> </tbody> </table> </div>

Read the article
List/Grid Toggle for Photo Gallery with Shadowbox

- by InfamouslyBubbly

so I'm new to this site, and new to jquery, and javascript as a whole really, but I have very good comprehension of HTML and CSS. For a class in school, I'm making a photo gallery webpage using the Shadowbox plugin. I have that part all down, but one of the requirements is to add some sort of user option that the user can change that will get saved in a cookie. (I haven't gotten to the cookie part yet) For my option, I decided to add a toggle that will switch the view of the page from a grid view (default) with images, to a list view of just the captions of the images. I figured out how to do that, but decided it could probably done in a much simpler fashion with the use of loops. Here is the HTML I have: <body> <div id="preferences"> <h1>My Photo Gallery</h1> <ul id="options"> <li><a href="#" id="list"><img src="media/listview.png" alt="List view"/></a></li> <li><a href="#" id="grid"><img src="media/gridview.png" alt="List view"/></a></li> </ul> </div> <div id="gallery"> <a rel="shadowbox[Gallery]" class="l1 img" href="media/img1.jpg" title="Black and White Leopard Pattern"><img src="media/thumb1.jpg" alt="Black and White Leopard Pattern"/></a> <a rel="shadowbox[Gallery]" class="l2 img" href="media/img2.jpg" title="Snow Leopard Pattern"><img src="media/thumb2.jpg" alt="Snow Leopard Pattern"/></a> <a rel="shadowbox[Gallery]" class="l3 img" href="media/img3.jpg" title="Colorful Triangle Pattern"><img src="media/thumb3.jpg" alt="Colurful Triangle Pattern"/></a> <a rel="shadowbox[Gallery]" class="l4 img" href="media/img4.jpg" title="Tie Dye Zebra Stripe Pattern"><img src="media/thumb4.jpg" alt="Tie Dye Zebra Stripe Pattern"/></a> <a rel="shadowbox[Gallery]" class="l5 img" href="media/img5.jpg" title="Blue Knitted Pattern"><img src="media/thumb5.jpg" alt="Blue Knitted Pattern"/></a> <a rel="shadowbox[Gallery]" class="l6 img" href="media/img6.jpg" title="Black and White Damask Pattern"><img src="media/thumb6.jpg" alt="Black and White Damask Pattern"/></a> <a rel="shadowbox[Gallery]" class="l7 img" href="media/img7.jpg" title="Wooden Panel Pattern"><img src="media/thumb7.jpg" alt="Wooden Panel Pattern"/></a> <a rel="shadowbox[Gallery]" class="l8 img" href="media/img8.jpg" title="Brick Pattern"><img src="media/thumb8.jpg" alt="Brick Pattern"/></a> <a rel="shadowbox[Gallery]" class="l9 img" href="media/img9.jpg" title="Watercolor Pattern"><img src="media/thumb9.jpg" alt="Watercolor Pattern"/></a> <a rel="shadowbox[Gallery]" class="l10 img" href="media/img10.jpg" title="Orange Stripe Pattern"><img src="media/thumb10.jpg" alt="Orange Stripe Pattern"/></a> <a rel="shadowbox[Gallery]" class="l11 img" href="media/img11.jpg" title="Blue Scales Pattern"><img src="media/thumb11.jpg" alt="Blue Scales Pattern"/></a> <a rel="shadowbox[Gallery]" class="l12 img" href="media/img12.jpg" title="Woven Pattern"><img src="media/thumb12.jpg" alt="Woven Pattern"/></a> </div> </body> So here is the sample that works (for the list portion anyways), but seems excessive in terms of code since I'd have to repeat for each image: $(document).ready(function(){ $( "#list" ).click(function() { $( "a.l1" ).removeClass( "img" ); $( "a.l1" ).addClass( "lst" ); $( "a.l1" ).text( $( "a.l1" ).attr( "title" ); //repeat for l1 through l12 (that`s the letter L not a 1) }); $( "#grid" ).click(function() { $( "a.l1" ).removeClass( "lst" ); $( "a.l1" ).addClass( "grid" ); //actually have no idea at all how to get this back to the original img tag other than maybe .innerHTML??? //repeat for l1 through l12 (again, that`s the letter L not a 1) }); }): And here is kinda how I'd like it (Y'know, except in a way that works) $(document).ready(function(){ var i = 1; var selcur = $( "'a.l" + i + "'" ); var title = selcur.attr( "title" ); var image = '<img src="media/thumb' + i + '.jpg" alt="' + title + '"/>'; $( "#list" ).click(function() { while (1<=12) { selcur.addClass("lst"); selcur.removeClass("img"); selcur.text( title ); i++; } i = 1; }); $( "#grid" ).click(function() { while (1<=12) { selcur.removeClass("lst"); selcur.addClass("img"); selcur.text( image ); i++; } i = 1; }); }); Please tell me how I am going about this wrong, keep in mind again I'm new to this, I appreciate any and all responses! Is there a better way to do this? I really want to keep it simple.

Read the article
when text changed inputbox automatically updates next text boxes?

- by James123

Extension to my previous question http://bit.ly/c5yiVM I have 7 textboxes. If Top 1 textbox(Volume All Years) text changed, text need to be updated in next 6 inputboxes(Latest 2009 Volume to Latest 2014 Volume). I need javascript or Jquery for this. I will write Js textchanged() or focuschange() for top 1 textbox. So what should I write in focuschage() or textchanged methods(). I changed little bit in code. Now Html will like below. These textboxes have common CssClass. volumetextbox. Can we use this class and change text in all textboxes those have same CssClass. <tr id="row12_136" class="RegText"> <td style="width:420px;Padding-right:20px;">Volume All Years</td> <td style="width:420px;Padding-left:0px;"> <input name="12_136" type="text" maxlength="255" id="12_136" tabindex="61" title="Volume All Years" class="volumetextbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" /> </td> <tr id="row12_60" class="RegText"> <td style="width:420px;Padding-right:20px;">Latest 2009 Volume</td> <td style="width:420px;Padding-left:0px;"> <input name="12_136" type="text" maxlength="255" id="12_60" tabindex="56" title="Volume All Years" class="volumetextbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" /> </td> <tr id="row12_61" class="RegText"> <td style="width:420px;Padding-right:20px;">Latest 2010 Volume</td> <td style="width:420px;Padding-left:0px;"> <input name="12_136" type="text" maxlength="255" id="12_61" tabindex="57" title="Volume All Years" class="volumetextbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" /> </td> <tr id="row12_62" class="RegText"> <td style="width:420px;Padding-right:20px;">Latest 2011 Volume</td> <td style="width:420px;Padding-left:0px;"> <input name="12_136" type="text" maxlength="255" id="12_62" tabindex="58" title="Volume All Years" class="volumetextbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" /> </td> <tr id="row12_63" class="RegText"> <td style="width:420px;Padding-right:20px;">Latest 2012 Volume</td> <td style="width:420px;Padding-left:0px;"> <input name="12_136" type="text" maxlength="255" id="12_63" tabindex="59" title="Volume All Years" class="volumetextbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" /> </td> <tr id="row12_64" class="RegText"> <td style="width:420px;Padding-right:20px;">Latest 2013 Volume</td> <td style="width:420px;Padding-left:0px;"> <input name="12_136" type="text" maxlength="255" id="12_64" tabindex="60" title="Volume All Years" class="volumetextbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" /> </td> <tr id="row12_65" class="RegText"> <td style="width:420px;Padding-right:20px;">Latest 2014 Volume</td> <td style="width:420px;Padding-left:0px;"> <input name="12_136" type="text" maxlength="255" id="12_65" tabindex="61" title="Volume All Years" class="volumetextbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" /> </td>

Read the article
superfish dropdowns to be columned when there's many children and no "grandchildren" nodes

- by ocergynohtna

i have a horizontal nav menu that's using jquery superfish. in one of my dropdown menus there'll be no more dropdowns within it (i.e. no grandchildren nodes.) but there are several children. 45 to be exact right now and it may go up or down in time. i'm trying to find a way to have the dropdown be columned passed a certain count. 15 works for me nicely since there are 45. so without showing all the includes here's the html list - and for the sake of less code i'll use 15: <ul class="sf-menu sf-js-enabled sf-shadow" id="menu-1"> <li class="current"> <a href="#a" class="sf-with-ul">menu item<span class="sf-sub-indicator"> »</span></a> <ul style="display: none; visibility: hidden;"> <li> <a href="#aa">menu item</a> </li> <li> <a href="#ab">menu item</a> </li> <li> <a href="#ac">menu item</a> </li> <li> <a href="#ac">menu item</a> </li> <li> <a href="#ad">menu item</a> </li> <li> <a href="#aa">menu item</a> </li> <li> <a href="#ab">menu item</a> </li> <li> <a href="#ac">menu item</a> </li> <li> <a href="#ac">menu item</a> </li> <li> <a href="#ad">menu item</a> </li> <li> <a href="#aa">menu item</a> </li> <li> <a href="#ab">menu item</a> </li> <li> <a href="#ac">menu item</a> </li> <li> <a href="#ac">menu item</a> </li> <li> <a href="#ad">menu item</a> </li> </ul> </li> <li> <a href="#">menu item</a> </li> <li> <a href="#">menu item</a> </li> <li> <a href="#">menu item</a> </li> </ul> so if i wanted the columns to start at 5 i'd have exactly 3 columns. i can't seem to figure out how i can accomplish this and not break everything. i've tried using some css and came up with no solutions. any thoughts are greatly appreciated... O_o

Read the article
custom error message using (bassistance.de form validation)

- by Abu Hamzah

How can I add a custom error message to my .aspx. Is there a way to make it template for other pages to use? Here is how my .aspx page looks like: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="validation.aspx.cs" Inherits="Web.validation" %> <br> < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br> < html xmlns="http://www.w3.org/1999/xhtml" > <br> < head id="Head1" runat="server"><br> <title>Untitled Page</title><br> < /head><br> < body><br> < form id="form1" runat="server"><br> < div><br> < li><br> < label id="lblFirstName" for="FirstName"><br> First Name : < /label> < input id="FirstName" name="FirstName" type="text" maxlength="25" class="required" /><em><img src="images/required.png" alt="required" /></em> </li> <li><br> < label id="lbllastName" for="LastName"><br> Last Name : < /label><br> < input id="LastName" name="LastName" type="text" maxlength="25" class="required" /><em><img src="images/required.png" alt="required" /></em> </li><br> <li><br> < label id="lblAddr1" for="Addr1"> Address : < /label><br> <input id="Addr1" name="Addr1" type="text" maxlength="25" /> </li> <li> <label id="lblAddr2" for="Addr2"> Address 2 : </label> <input id="Addr2" name="Addr2" type="text" maxlength="25" /> </li> <li> <label id="lblZip" for="txtZip"> Zip : </label> <input id="txtZip" name="txtZip" type="text" class="ZipCodeMask" /> </li> <li> <label id="lblCity" for="City"> City : </label> <input id="City" name="City" type="text" maxlength="25" /> </li> <li> <label id="lblState" for="State"> State : </label> <input id="txtState" name="txtState" type="text" maxlength="25" /> </li> <li> <label id="lblPhone" for="txtPhone"> Phone : </label> <input id="txtPhone" type="text" name="txtPhone" class="phone PhoneMask" /> </li> <li> <label id="lblEmail" for="EMail"> E-Mail : </label> <input id="EMail" name="EMail" type="text" maxlength="100" class="required email" /><em><img src="images/required.png" alt="required" /></em> </li> <li> <label id="lblComment" for="Comment"> Comment or Question : </label> <textarea id="Comment" name="Comment" cols="40" rows="6" class="required"></textarea><em> <img src="images/required.png" alt="required" /></em> </li> <li> <ul> <li> <button id="btnCancel" name="btnCancel" type="button"> Cancel</button></li> <li> <button id="btnReset" name="btnReset" type="reset"> Reset</button></li> <li> <button id="btnSubmit" name="btnSubmit" type="submit"> Submit</button></li> </ul> </li> </div> </form> <script src="js/jquery.validate.min.js" type="text/javascript"></script> </body> </html>

Read the article
files get uploaded just before they get cancelled

- by user1763986

Got a little situation here where I am trying to cancel a file's upload. What I have done is stated that if the user clicks on the "Cancel" button, then it will simply remove the iframe so that it does not go to the page where it uploads the files into the server and inserts data into the database. Now this works fine if the user clicks on the "Cancel" button in quickish time the problem I have realised though is that if the user clicks on the "Cancel" button very late, it sometimes doesn't remove the iframe in time meaning that the file has just been uploaded just before the user has clicked on the "Cancel" button. So my question is that is there a way that if the file does somehow get uploaded before the user clicks on the "Cancel" button, that it deletes the data in the database and removes the file from the server? Below is the image upload form: <form action="imageupload.php" method="post" enctype="multipart/form-data" target="upload_target_image" onsubmit="return imageClickHandler(this);" class="imageuploadform" > <p class="imagef1_upload_process" align="center"> Loading...<br/> <img src="Images/loader.gif" /> </p> <p class="imagef1_upload_form" align="center"> <br/> <span class="imagemsg"></span> <label>Image File: <input name="fileImage" type="file" class="fileImage" /></label><br/> <br/> <label class="imagelbl"><input type="submit" name="submitImageBtn" class="sbtnimage" value="Upload" /></label> </p> <p class="imagef1_cancel" align="center"> <input type="reset" name="imageCancel" class="imageCancel" value="Cancel" /> </p> <iframe class="upload_target_image" name="upload_target_image" src="#" style="width:0px;height:0px;border:0px;solid;#fff;"></iframe> </form> Below is the jquery function which controls the "Cancel" button: $(imageuploadform).find(".imageCancel").on("click", function(event) { $('.upload_target_image').get(0).contentwindow $("iframe[name='upload_target_image']").attr("src", "javascript:'<html></html>'"); return stopImageUpload(2); }); Below is the php code where it uploads the files and inserts the data into the database. The form above posts to this php page "imageupload.php": <body> <?php include('connect.php'); session_start(); $result = 0; //uploads file move_uploaded_file($_FILES["fileImage"]["tmp_name"], "ImageFiles/" . $_FILES["fileImage"]["name"]); $result = 1; //set up the INSERT SQL query command to insert the name of the image file into the "Image" Table $imagesql = "INSERT INTO Image (ImageFile) VALUES (?)"; //prepare the above SQL statement if (!$insert = $mysqli->prepare($imagesql)) { // Handle errors with prepare operation here } //bind the parameters (these are the values that will be inserted) $insert->bind_param("s",$img); //Assign the variable of the name of the file uploaded $img = 'ImageFiles/'.$_FILES['fileImage']['name']; //execute INSERT query $insert->execute(); if ($insert->errno) { // Handle query error here } //close INSERT query $insert->close(); //Retrieve the ImageId of the last uploded file $lastID = $mysqli->insert_id; //Insert into Image_Question Table (be using last retrieved Image id in order to do this) $imagequestionsql = "INSERT INTO Image_Question (ImageId, SessionId, QuestionId) VALUES (?, ?, ?)"; //prepare the above SQL statement if (!$insertimagequestion = $mysqli->prepare($imagequestionsql)) { // Handle errors with prepare operation here echo "Prepare statement err imagequestion"; } //Retrieve the question number $qnum = (int)$_POST['numimage']; //bind the parameters (these are the values that will be inserted) $insertimagequestion->bind_param("isi",$lastID, 'Exam', $qnum); //execute INSERT query $insertimagequestion->execute(); if ($insertimagequestion->errno) { // Handle query error here } //close INSERT query $insertimagequestion->close(); ?>  <script> window.top.stopImageUpload(<?php echo $result; ?>, '<?php echo $_FILES['fileImage']['name'] ?>'); </script> </body> UPDATE: Below is the php code "cancelimage.php" where I want to delete the cancelled file from the server and delete the record from the database. It is set up but not finished, can somebody finish it off so I can retrieve the name of the file and it's id using $_SESSION? <?php // connect to the database include('connect.php'); /* check connection */ if (mysqli_connect_errno()) { printf("Connect failed: %s\n", mysqli_connect_error()); die(); } //remove file from server unlink("ImageFiles/...."); //need to retrieve file name here where the ... line is //DELETE query statement where it will delete cancelled file from both Image and Image Question Table $imagedeletesql = " DELETE img, img_q FROM Image AS img LEFT JOIN Image_Question AS img_q ON img_q.ImageId = img.ImageId WHERE img.ImageFile = ?"; //prepare delete query if (!$delete = $mysqli->prepare($imagedeletesql)) { // Handle errors with prepare operation here } //Dont pass data directly to bind_param store it in a variable $delete->bind_param("s",$img); //execute DELETE query $delete->execute(); if ($delete->errno) { // Handle query error here } //close query $delete->close(); ?> Can you please provide an sample code in your answer to make it easier for me. Thank you

Read the article
Display database content which is last inserted using last inserted ID

- by user2330772

What i am doing is i am displaying last inserted data when form data is submitted,the form is multipart/form-data. I am getting this form data using jquery,here i am sending this data to php file using Ajax POST.In that php file i am inserting that data in db table..where i am getting the id of inserted data..on success of Ajax call i am sending that id to another PHP file..where using that id i am displaying the last inserted data... My form is: <form method="post" enctype="multipart/form-data" name="upload_form" id="data"> <select id="sel"> <option>Select the Project Stream</option> <option value="1">Computer Science</option> <option value="2">Mechanical</option> <option value="3">IT</option> <option value="4">Web Development</option> <option value="5">MCA</option> <option value="6">Civil</option> </select><br /> <input type="text" id="title" placeholder="Project Title"/><br /> <input type="text" id="vurl" placeholder="If You have any video about project write your video url path here" style="width:435px;"/><br /> <textarea id="prjdesc" name="prjdesc" rows="20" cols="80" style="border-style:groove;box-shadow: 10px 10px 10px 10px #888888;"placeholder="Please describe Your Project"></textarea> <label for="file">Filename:</label> <input type="file" name="file" id="file"/><br /> <button>Submit</button> </form> My js file: $("form#data").submit(function() { alert("update"); var sid=$("#sel").val(); alert(sid); var ttle = $("#title").val(); alert(ttle); var text = $("#prjdesc").val(); var vurl = $("#vurl").val(); /*var dataString = 'param='+text+'&param1='+vurl+'&param2='+ttle+'&param3='+id;*/ var formData = new FormData($(this)[0]); formData.append('param',text); formData.append('param1',vurl); formData.append('param2',ttle ); formData.append('param3',sid ); $.ajax({ type:'POST', data:formData, url:'insert.php', success:function(id) { alert(id); window.location ="another.php?id="+id; }, cache: false, contentType: false, processData: false }); return false; }); insert.php: <?php print_r($_FILES); $desc = $_POST['param']; echo $desc; $video = $_POST['param1']; echo $video ; $title = $_POST['param2']; echo $title; $tech_id=$_POST['param3']; echo $tech_id; $host="localhost"; $username="root"; $password=""; $db_name="geny"; $tbl_name="project_details"; mysql_connect("$host", "$username", "$password")or die("cannot connect"); mysql_select_db("$db_name")or die("cannot select DB"); $allowedExts = array("gif", "jpeg", "jpg", "png"); $extension = end(explode(".", $_FILES["file"]["name"])); $url_dir = "C:/wamp/www/WebsiteTemplate4/upload/"; if ((($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/pjpeg") || ($_FILES["file"]["type"] == "image/x-png") || ($_FILES["file"]["type"] == "image/png")) && ($_FILES["file"]["size"] < 50000) && in_array($extension, $allowedExts)) { if ($_FILES["file"]["error"] > 0) { echo "Return Code: " . $_FILES["file"]["error"] . "<br>"; } else { if (file_exists($url_dir . $_FILES["file"]["name"])) { echo $_FILES["file"]["name"] . " already exists. "; } else { move_uploaded_file($_FILES["file"]["tmp_name"],$url_dir. $_FILES["file"]["name"]); // echo "Stored in: " . "upload/" . $_FILES["file"]["name"]; $tmp = "C:/wamp/www/WebsiteTemplate4/upload/" . $_FILES["file"]["name"]; $sql="INSERT INTO $tbl_name (title, content, img_path, video_url, project_tech_Id) VALUES ('$title','$desc','$tmp','$video','$tech_id')"; if(mysql_query($sql)) { echo mysql_insert_id(); } else { echo "Cannot Insert"; } } } } else { echo "Invalid file"; } ?> another.php: <?php $temp=$_GET['id']; echo $temp; $host="localhost"; $username="root"; $password=""; $db_name="geny"; $tbl_name="project_details"; mysql_connect("$host", "$username", "$password")or die("cannot connect"); mysql_select_db("$db_name")or die("cannot select DB"); $query = mysql_query("SELECT content FROM project_details WHERE id=". $temp); if (!$query) { echo 'Could not run query: ' . mysql_error(); exit; } $row = mysql_fetch_row($query); echo "<div id='uprjct' style='background:#336699;'> <p>$row[0]</p> </div>"; ?> but the ID what i am returning in insert.php containg array of elements...i dont want all these thing i want only ID(which is number).. please tell me what is wrong in my code...

Read the article
Backbone.js Adding Model to Collection Issue

- by jtmgdevelopment

I am building a test application in Backbone.js (my first app using Backbone). The app goes like this: Load Data from server "Plans" Build list of plans and show to screen There is a button to add a new plan Once new plan is added, add to collection ( do not save to server as of now ) redirect to index page and show the new collection ( includes the plan you just added) My issue is with item 5. When I save a plan, I add the model to the collection then redirect to the initial view. At this point, I fetch data from the server. When I fetch data from the server, this overwrites my collection and my added model is gone. How can I prevent this from happening? I have found a way to do this but it is definitely not the correct way at all. Below you will find my code examples for this. Thanks for the help. PlansListView View: var PlansListView = Backbone.View.extend({ tagName : 'ul', initialize : function() { _.bindAll( this, 'render', 'close' ); //reset the view if the collection is reset this.collection.bind( 'reset', this.render , this ); }, render : function() { _.each( this.collection.models, function( plan ){ $( this.el ).append( new PlansListItemView({ model: plan }).render().el ); }, this ); return this; }, close : function() { $( this.el ).unbind(); $( this.el ).remove(); } });//end NewPlanView Save Method var NewPlanView = Backbone.View.extend({ tagName : 'section', template : _.template( $( '#plan-form-template' ).html() ), events : { 'click button.save' : 'savePlan', 'click button.cancel' : 'cancel' }, intialize: function() { _.bindAll( this, 'render', 'save', 'cancel' ); }, render : function() { $( '#container' ).append( $( this.el ).html(this.template( this.model.toJSON() )) ); return this; }, savePlan : function( event ) { this.model.set({ name : 'bad plan', date : 'friday', desc : 'blah', id : Math.floor(Math.random()*11), total_stops : '2' }); this.collection.add( this.model ); app.navigate('', true ); event.preventDefault(); }, cancel : function(){} }); Router (default method): index : function() { this.container.empty(); var self = this; //This is a hack to get this to work //on default page load fetch all plans from the server //if the page has loaded ( this.plans is defined) set the updated plans collection to the view //There has to be a better way!! if( ! this.plans ) { this.plans = new Plans(); this.plans.fetch({ success: function() { self.plansListView = new PlansListView({ collection : self.plans }); $( '#container' ).append( self.plansListView.render().el ); if( self.requestedID ) self.planDetails( self.requestedID ); } }); } else { this.plansListView = new PlansListView({ collection : this.plans }); $( '#container' ).append( self.plansListView.render().el ); if( this.requestedID ) self.planDetails( this.requestedID ); } }, New Plan Route: newPlan : function() { var plan = new Plan({name: 'Cool Plan', date: 'Monday', desc: 'This is a great app'}); this.newPlan = new NewPlanView({ model : plan, collection: this.plans }); this.newPlan.render(); } FULL CODE ( function( $ ){ var Plan = Backbone.Model.extend({ defaults: { name : '', date : '', desc : '' } }); var Plans = Backbone.Collection.extend({ model : Plan, url : '/data/' }); $( document ).ready(function( e ){ var PlansListView = Backbone.View.extend({ tagName : 'ul', initialize : function() { _.bindAll( this, 'render', 'close' ); //reset the view if the collection is reset this.collection.bind( 'reset', this.render , this ); }, render : function() { _.each( this.collection.models, function( plan ){ $( this.el ).append( new PlansListItemView({ model: plan }).render().el ); }, this ); return this; }, close : function() { $( this.el ).unbind(); $( this.el ).remove(); } });//end var PlansListItemView = Backbone.View.extend({ tagName : 'li', template : _.template( $( '#list-item-template' ).html() ), events :{ 'click a' : 'listInfo' }, render : function() { $( this.el ).html( this.template( this.model.toJSON() ) ); return this; }, listInfo : function( event ) { } });//end var PlanView = Backbone.View.extend({ tagName : 'section', events : { 'click button.add-plan' : 'newPlan' }, template: _.template( $( '#plan-template' ).html() ), initialize: function() { _.bindAll( this, 'render', 'close', 'newPlan' ); }, render : function() { $( '#container' ).append( $( this.el ).html( this.template( this.model.toJSON() ) ) ); return this; }, newPlan : function( event ) { app.navigate( 'newplan', true ); }, close : function() { $( this.el ).unbind(); $( this.el ).remove(); } });//end var NewPlanView = Backbone.View.extend({ tagName : 'section', template : _.template( $( '#plan-form-template' ).html() ), events : { 'click button.save' : 'savePlan', 'click button.cancel' : 'cancel' }, intialize: function() { _.bindAll( this, 'render', 'save', 'cancel' ); }, render : function() { $( '#container' ).append( $( this.el ).html(this.template( this.model.toJSON() )) ); return this; }, savePlan : function( event ) { this.model.set({ name : 'bad plan', date : 'friday', desc : 'blah', id : Math.floor(Math.random()*11), total_stops : '2' }); this.collection.add( this.model ); app.navigate('', true ); event.preventDefault(); }, cancel : function(){} }); var AppRouter = Backbone.Router.extend({ container : $( '#container' ), routes : { '' : 'index', 'viewplan/:id' : 'planDetails', 'newplan' : 'newPlan' }, initialize: function(){ }, index : function() { this.container.empty(); var self = this; //This is a hack to get this to work //on default page load fetch all plans from the server //if the page has loaded ( this.plans is defined) set the updated plans collection to the view //There has to be a better way!! if( ! this.plans ) { this.plans = new Plans(); this.plans.fetch({ success: function() { self.plansListView = new PlansListView({ collection : self.plans }); $( '#container' ).append( self.plansListView.render().el ); if( self.requestedID ) self.planDetails( self.requestedID ); } }); } else { this.plansListView = new PlansListView({ collection : this.plans }); $( '#container' ).append( self.plansListView.render().el ); if( this.requestedID ) self.planDetails( this.requestedID ); } }, planDetails : function( id ) { if( this.plans ) { this.plansListView.close(); this.plan = this.plans.get( id ); if( this.planView ) this.planView.close(); this.planView = new PlanView({ model : this.plan }); this.planView.render(); } else{ this.requestedID = id; this.index(); } if( ! this.plans ) this.index(); }, newPlan : function() { var plan = new Plan({name: 'Cool Plan', date: 'Monday', desc: 'This is a great app'}); this.newPlan = new NewPlanView({ model : plan, collection: this.plans }); this.newPlan.render(); } }); var app = new AppRouter(); Backbone.history.start(); }); })( jQuery );

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
Stretch UL to fill the entire DIV

- by Interfaith

There is a similar post: Stretch horizontal ul to fit width of div But mine is a little bit tricky, as I have tried the above example but failed. My code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-… <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/li… <script> function mainmenu(){ $(" #nav ul ").css({display: "none"}); // Opera Fix $(" #nav li").hover(function(){ $(this).find('ul:first').css({visibi… "visible",display: "none"}).show(400); },function(){ $(this).find('ul:first').css({visibi… "hidden"}); }); } $(document).ready(function(){ mainmenu(); }); </script> <style> body{ font-size:0.85em; font-family:Verdana, Arial, Helvetica, sans-serif; } #nav, #nav ul{ margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; display: table; width: 100%; } #nav a{ display:block; padding:10px 15px 10px 15px; border:1px solid #fff; color:#fff; text-align: center; margin:0; text-decoration:none; background: #C34328; border-top:1px solid #EF593B; -moz-box-shadow:0px 3px 4px #591E12 inset; -webkit-box-shadow:0px 3px 4px #591E12 inset; -box-shadow:0px 3px 4px #591E12 inset; } #nav a:hover{ background-color:#fff; color:#333; } #nav li{ float:left; position:relative; } #nav ul { position:absolute; display:none; width:12em; top:3.2em; } #nav li ul a{ width:12em; height:auto; float:left; } #nav ul ul{ top:auto; } #nav li ul ul { left:12em; margin:0px 0 0 10px; } </style> </head> <body> <div style="width: 980px; border: 1px black solid;"> <ul id="nav"> <li><a href="#">Find a Doctor</a></li> <li><a href="#">Why Interfaith</a></li> <li><a href="#">For Patients & Visitors</a> <ul> <li><a href="#">3.1 jQuery</a></li> <li><a href="#">3.2 Mootools</a></li> <li><a href="#">3.3 Prototype</a></li> </ul> </li> <li><a href="#">Medical Services</a> <ul> <li><a href="#">Behavioral Health</a></li> <li><a href="#">Clinical Laboratory</a></li> <li><a href="#">Dentistry</a></li> <li><a href="#">Emergency</a></li> <li><a href="#">Gynecology</a></li> <li><a href="#">Medicine</a></li> <li><a href="#">Pastoral</a></li> <li><a href="#">Pediatrics</a></li> <li><a href="#">Physical Medicine & Rehab</a></li> </ul> </li> <li><a href="#">Medical Trainings</a> <ul> <li><a href="#">Medical Training</a></li> <li><a href="#">Behavioral Health</a></li> <li><a href="#">Predoctoral Externship</a></li> <li><a href="#">Podiatric Residency</a></li> <li><a href="#">Dental Residency</a></li> <li><a href="#">Pulmonary Medicine</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </div> </body> </html> Can someone tell me where I have to edit to complete the code? Thanks

Read the article
How to autostart this slide

- by lchales

Hello there: first of all i have no idea on coding or anything related, simple question: is there any simple way to tell this code to autostart the slide? at the current moment the images change on click. currently the index page only have one image, what i want is to add a few but without the need to click to see the next one here is the code from my index: <script type="text/javascript"> //<![CDATA[ /* the images preload plugin */ (function($) { $.fn.preload = function(options) { var opts = $.extend({}, $.fn.preload.defaults, options), o = $.meta ? $.extend({}, opts, this.data()) : opts; var c = this.length, l = 0; return this.each(function() { var $i = $(this); $('<img/>').load(function(i){ ++l; if(l == c) o.onComplete(); }).attr('src',$i.attr('src')); }); }; $.fn.preload.defaults = { onComplete : function(){return false;} }; })(jQuery); //]]> </script><script type="text/javascript"> //<![CDATA[ $(function() { var $tf_bg = $('#tf_bg'), $tf_bg_images = $tf_bg.find('img'), $tf_bg_img = $tf_bg_images.eq(0), $tf_thumbs = $('#tf_thumbs'), total = $tf_bg_images.length, current = 0, $tf_content_wrapper = $('#tf_content_wrapper'), $tf_next = $('#tf_next'), $tf_prev = $('#tf_prev'), $tf_loading = $('#tf_loading'); //preload the images $tf_bg_images.preload({ onComplete : function(){ $tf_loading.hide(); init(); } }); //shows the first image and initializes events function init(){ //get dimentions for the image, based on the windows size var dim = getImageDim($tf_bg_img); //set the returned values and show the image $tf_bg_img.css({ width : dim.width, height : dim.height, left : dim.left, top : dim.top }).fadeIn(); //resizing the window resizes the $tf_bg_img $(window).bind('resize',function(){ var dim = getImageDim($tf_bg_img); $tf_bg_img.css({ width : dim.width, height : dim.height, left : dim.left, top : dim.top }); }); //expand and fit the image to the screen $('#tf_zoom').live('click', function(){ if($tf_bg_img.is(':animated')) return false; var $this = $(this); if($this.hasClass('tf_zoom')){ resize($tf_bg_img); $this.addClass('tf_fullscreen') .removeClass('tf_zoom'); } else{ var dim = getImageDim($tf_bg_img); $tf_bg_img.animate({ width : dim.width, height : dim.height, top : dim.top, left : dim.left },350); $this.addClass('tf_zoom') .removeClass('tf_fullscreen'); } } ); //click the arrow down, scrolls down $tf_next.bind('click',function(){ if($tf_bg_img.is(':animated')) return false; scroll('tb'); }); //click the arrow up, scrolls up $tf_prev.bind('click',function(){ if($tf_bg_img.is(':animated')) return false; scroll('bt'); }); //mousewheel events - down / up button trigger the scroll down / up $(document).mousewheel(function(e, delta) { if($tf_bg_img.is(':animated')) return false; if(delta > 0) scroll('bt'); else scroll('tb'); return false; }); //key events - down / up button trigger the scroll down / up $(document).keydown(function(e){ if($tf_bg_img.is(':animated')) return false; switch(e.which){ case 38: scroll('bt'); break; case 40: scroll('tb'); break; } }); } //show next / prev image function scroll(dir){ //if dir is "tb" (top -> bottom) increment current, //else if "bt" decrement it current = (dir == 'tb')?current + 1:current - 1; //we want a circular slideshow, //so we need to check the limits of current if(current == total) current = 0; else if(current < 0) current = total - 1; //flip the thumb $tf_thumbs.flip({ direction : dir, speed : 400, onBefore : function(){ //the new thumb is set here var content = '<span id="tf_zoom" class="tf_zoom"><\/span>'; content +='<img src="' + $tf_bg_images.eq(current).attr('longdesc') + '" alt="Thumb' + (current+1) + '"/>'; $tf_thumbs.html(content); } }); //we get the next image var $tf_bg_img_next = $tf_bg_images.eq(current), //its dimentions dim = getImageDim($tf_bg_img_next), //the top should be one that makes the image out of the viewport //the image should be positioned up or down depending on the direction top = (dir == 'tb')?$(window).height() + 'px':-parseFloat(dim.height,10) + 'px'; //set the returned values and show the next image $tf_bg_img_next.css({ width : dim.width, height : dim.height, left : dim.left, top : top }).show(); //now slide it to the viewport $tf_bg_img_next.stop().animate({ top : dim.top },700); //we want the old image to slide in the same direction, out of the viewport var slideTo = (dir == 'tb')?-$tf_bg_img.height() + 'px':$(window).height() + 'px'; $tf_bg_img.stop().animate({ top : slideTo },700,function(){ //hide it $(this).hide(); //the $tf_bg_img is now the shown image $tf_bg_img = $tf_bg_img_next; //show the description for the new image $tf_content_wrapper.children() .eq(current) .show(); }); //hide the current description $tf_content_wrapper.children(':visible') .hide() } //animate the image to fit in the viewport function resize($img){ var w_w = $(window).width(), w_h = $(window).height(), i_w = $img.width(), i_h = $img.height(), r_i = i_h / i_w, new_w,new_h; if(i_w > i_h){ new_w = w_w; new_h = w_w * r_i; if(new_h > w_h){ new_h = w_h; new_w = w_h / r_i; } } else{ new_h = w_w * r_i; new_w = w_w; } $img.animate({ width : new_w + 'px', height : new_h + 'px', top : '0px', left : '0px' },350); } //get dimentions of the image, //in order to make it full size and centered function getImageDim($img){ var w_w = $(window).width(), w_h = $(window).height(), r_w = w_h / w_w, i_w = $img.width(), i_h = $img.height(), r_i = i_h / i_w, new_w,new_h, new_left,new_top; if(r_w > r_i){ new_h = w_h; new_w = w_h / r_i; } else{ new_h = w_w * r_i; new_w = w_w; } return { width : new_w + 'px', height : new_h + 'px', left : (w_w - new_w) / 2 + 'px', top : (w_h - new_h) / 2 + 'px' }; } }); //]]> </script>

Read the article
pagination for displaytag with colorbox in Spring framework

- by Hitesh Solanki

Hi..... I want to display the pop up for user selection using colorbox. I have put link on manageblacklist.jsp named 'select'. when I click on 'select' link ,colorbox is displayed. all user is displayed but pagination is not worked. I have used display tag for pagination. Without using colorbox, pagination is worked fine. I have used spring framework. The code of manageblacklist.jsp is given below: <%@ page contentType="text/html" pageEncoding="UTF-8" import="java.util.*"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ include file="/WEB-INF/jsp/include.jsp" %> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <%@ taglib uri="http://displaytag.sf.net" prefix="display" %> <%@ page import="com.sufalam.mailserver.bean.User"%> <%@ page import="javax.servlet.http.HttpSession" %> <% String pageSize = (String) request.getAttribute("pageSize"); System.out.println("page size:" + pageSize); HttpSession session1 = request.getSession(); List<User> userList = (List<User>) session1.getAttribute("userList"); Iterator iterator = userList.iterator(); String user = (String) request.getAttribute("user"); System.out.println("user in the jsp :" + user); %> <html> <head> <script type="text/javascript" src="js/jquery142.js"></script> <script type="text/javascript" src="js/jquery.colorbox.js"></script> <link rel="stylesheet" href="style/colorbox.css" type="text/css"> <script type="text/javascript"> $(document).ready(function(){ //Examples of how to assign the ColorBox event to elements $(".example5").colorbox(); //Example of preserving a JavaScript event for inline calls. $("#click").click(function(){ $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); return false; }); }); </script> <script type="text/javascript"> function changePageSize() { var myValue = document.getElementById("combo1").value; document.getElementById("selectedPageSize").value=myValue; document.whitelistBlacklistForm.submit(); } function selectAll() { var selectAll = document.getElementById("checkAll"); var returnById = document.getElementsByName("check"); var i; var val; if (selectAll.checked == true) { val = true; } else { val = false; } for (i = 0; i < returnById.length; i++) { returnById[i].checked = val; } } function onload() { insertNavigation ('insertHereTop', 'insertHereBottom'); } function insertNavigation( topElementID, BottomElementID ) { if ( document.getElementById('pagingBanner') ){ document.getElementById(topElementID).innerHTML=document.getElementById('pagingBanner').innerHTML; document.getElementById(BottomElementID).innerHTML=document.getElementById('pagingBanner1').innerHTML; } } function confirmDelete() { if (confirm("Are you sure you want to delete selected records?")) { flag = 1; return true; } else { return false; } } function loadModels() { var flag=true; var textValue = document.getElementById('txtuser'); $.getJSON("ajaxblacklist.htm", // url { param :textValue.value }, // request params function(json) { // callback // var options = '<table class="displayTable" cellspacing="0"><thead><tr><th align = "center">Blacklisted Sender</th>'+ // '<th align ="center">Delete</th></tr></thead><tbody>'; var options = '<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td style="background:url(images/leftbg.gif) repeat-y; width:8px;"></td>' + '<td class="middlesection"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>' + '<td height="30" class="p10"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="allboder" >' + '<tr><td class="tebelhd"> Blacklisted Sender </td></tr>'; for (i in json) { var state = json[i]; for(j in state){ var op = state[j]; if(op.length==undefined){ options += '<tr><td class="tdhd"><table width="0%" border="0" cellspacing="0" cellpadding="0"><tr><td width="741">'+ state[j].senderEmail + '</td><td align="center" width="148"><a href="managewhitelistblacklist.htm?sender='+state[j].senderEmail+'&recipient='+ state[j].recipientEmail+'&action=delete"><span> <img src="/MailServerV2/images/delete.gif"/> </span></a></td></tr></table></td></tr>'; break; } for(k in op) { if(flag == true) { flag = false; options += '<tr><td class="tdhd"><table width="0%" border="0" cellspacing="0" cellpadding="0"><tr>'; } else { flag = true; options += '<tr><td class="tdhd2"><table width="0%" border="0" cellspacing="0" cellpadding="0"><tr>'; } options += '<td width="741">'+ op[k].senderEmail +'</td><td align="center" width="148"><a href="managewhitelistblacklist.htm?sender='+op[k].senderEmail+'&recipient='+op[k].recipientEmail+'&action=delete"><span> <img src="/MailServerV2/images/delete.gif"/> </span></a></td></tr></table></td></tr>'; } } } options += '</td></tr></table>'; $("div[name^=blacklist]").html(options); }); } </script> </head> <body> <table width="" border="0" align="center" cellpadding="0" cellspacing="0" class="maintable"> <tr> <td class="topsection"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top" align="center" class="middlesection" ><table width="96%" border="0" cellspacing="0" cellpadding="0"> <tr> <td > </td> </tr> <tr> <td> <table width="100%" border="0" cellspacing ="0" cellpadding="0"> <tr> <td> <table width="100%" border="0" cellspacing="0" cellpadding="3"> <tr> <td align="left" valign="middle"><h1>Manage Blacklist</h1></td> <td align="right" valign="bottom"><div style="float:right;"><a href="savewhitelistblacklist.htm" class="buttonash"><span>Create Whitelist Blacklist </span></a></div></td> </tr> </table></td> </tr> <tr> <td class="bottomboder"><img src="images/ashish.gif" height="1" /></td> </tr> </table> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> <div id="TabbedPanels1" class="TabbedPanels"/> <div style="display: block;" class="TabbedPanelsContent"/> <div align="left" class="tebelhd"> Blacklist Information </div><div class="entry-edit"> <div class="fieldset" id="base_fieldset"> <div class="hor-scroll_1" align="left"> <fieldset Class="label1css" style="color:#666666"> <legend>Fields</legend> <table> <tr> <td align="right"> Recipient Email : </td> <td><input type="text" id="txtuser" name="txtuser" <% if (user != null) { %> value="<%=user%>" <% } else { %> value="" <% } %> /> </td> <td><a href="#" class="buttonash" onclick="loadModels()"><span>Search</span></a></td>  <td><a href="selectuser.htm" class="example5 buttonash" ><span>Select</span></a> </td> <td align="right"> </td> </tr> </table> </fieldset> <div id="blacklist" name="blacklist"></div> </div> </div> </div> </td> </tr> </table> </td> </tr> </table> </td>  <td style="background:url(images/rightbg.gif) repeat-y; width:8px;"></td> </tr> </table> <% // session1.removeAttribute("user"); %> </body> </html> So , please tell me how to work pagination .... Thanks in advanced...

Read the article
Create xml file to be used in wordpress post import

- by adedoy

Alright here is the thing, I have this site that was once wordpress but have been converted into 70+ static pages, the admin is deleted and the whole site is static(which means every page is in index.html), I want to create a script that makes an xml so that I will just have to import it in the new wordpress install. So far, I am able to create an XML but it only imports one post. The data source is the URL of a page and I use jquery $get to filter only to gather the post of a given archive. //html <input type="text" class="full_path"> <input type="button" value="Get Data" class="getdata"> //script $('.getdata').click(function(){ $.get($('.full_path').val(), function(data) { post = $(data).find('div [style*="width:530px;"]'); $('.result').html(post.html()); }); });//get Data Through AJAX I send the cleaned data into a php below that creates the XML: $file = 'newpost.xml'; $post_data = $_REQUEST['post_data']; // Open the file to get existing content $current = file_get_contents($file); // Append a new post to the file $catStr = ''; if(isset($post_data['categories']) && count($post_data['categories']) > 0){ foreach($post_data['categories'] as $category) { $catStr .= '<category domain="category" nicename="'.$category.'"><![CDATA['.$category.']]></category>'; } } $tagStr = ''; if(isset($post_data['tags']) && count($post_data['tags']) > 0){ foreach($post_data['tags'] as $tag) { $tagStr = '<category domain="post_tag" nicename="'.$tag.'"><![CDATA['.$tag.']]></category>'; } } $post_name = str_replace(' ','-',$post_data["title"]); $post_name = str_replace(array('"','/',':','.',',','[',']','“','”'),'',strtolower($post_name)); $post_date = '2011-4-0'.rand(1, 29).''.rand(1, 12).':'.rand(1, 59).':'.rand(1, 59); $pubTime = rand(1, 12).':'.rand(1, 59).':'.rand(1, 59).' +0000'; $post = ' <item> <title>'.$post_data["title"].'</title> <link>'.$post_data["link"].'</link> <pubDate>'.$post_data["date"].' '.$pubTime.'</pubDate> <dc:creator>admin</dc:creator> <guid isPermaLink="false">http://localhost/saunders/?p=1</guid> <description></description> <content:encoded><![CDATA['.$post_data["content"].']]></content:encoded> <excerpt:encoded><![CDATA[]]></excerpt:encoded> <wp:post_id>1</wp:post_id> <wp:post_date>'.$post_date.'</wp:post_date> <wp:post_date_gmt>'.$post_date.'</wp:post_date_gmt> <wp:comment_status>open</wp:comment_status> <wp:ping_status>open</wp:ping_status> <wp:post_name>'.$post_name.'</wp:post_name> <wp:status>publish</wp:status> <wp:post_parent>0</wp:post_parent> <wp:menu_order>0</wp:menu_order> <wp:post_type>post</wp:post_type> <wp:post_password></wp:post_password> <wp:is_sticky>0</wp:is_sticky> '.$catStr.' '.$tagStr.' <wp:postmeta> <wp:meta_key>_edit_last</wp:meta_key> <wp:meta_value><![CDATA[1]]></wp:meta_value> </wp:postmeta> </item> '; // Write the contents back to the file with the appended post file_put_contents($file, $current.$post); After being appended I add the code below to complete the xml rss tag </channel> </rss> If I look and compare the xml file of one that is exported from a wordpress site, I see little difference. Please HELP!! here is a sample of a generated xml: <?xml version="1.0" encoding="UTF-8" ?> <rss version="2.0" xmlns:excerpt="http://wordpress.org/export/1.2/excerpt/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:wp="http://wordpress.org/export/1.2/" > <channel> <title>lols why</title> <link>http://localhost/lols</link> <description>Just another WordPress site</description> <pubDate>Wed, 03 Oct 2012 04:24:04 +0000</pubDate> <language>en-US</language> <wp:wxr_version>1.2</wp:wxr_version> <wp:base_site_url>http://localhost/lols</wp:base_site_url> <wp:base_blog_url>http://localhost/lols</wp:base_blog_url> <wp:author><wp:author_id>1</wp:author_id><wp:author_login>adedoy</wp:author_login><wp:author_email>[email protected]</wp:author_email><wp:author_display_name><![CDATA[adedoy]]></wp:author_display_name><wp:author_first_name><![CDATA[]]></wp:author_first_name><wp:author_last_name><![CDATA[]]></wp:author_last_name></wp:author> <generator>http://wordpress.org/?v=3.4.1</generator> <item> <title>Sample lift?</title> <link>../../breast-lift/delaware-breast-surgery-do-i-need-a-breast-lift/</link> <pubDate>Wed, 03 Oct 2012 9:29:16 +0000</pubDate> <dc:creator>admin</dc:creator> <guid isPermaLink="false">http://localhost/lols/?p=1</guid> <description></description> <content:encoded><![CDATA[<p>sample</p>]]></content:encoded> <excerpt:encoded><![CDATA[]]></excerpt:encoded> <wp:post_id>1</wp:post_id> <wp:post_date>2011-4-0132:45:4</wp:post_date> <wp:post_date_gmt>2011-4-0132:45:4</wp:post_date_gmt> <wp:comment_status>open</wp:comment_status> <wp:ping_status>open</wp:ping_status> <wp:post_name>sample-lift?</wp:post_name> <wp:status>publish</wp:status> <wp:post_parent>0</wp:post_parent> <wp:menu_order>0</wp:menu_order> <wp:post_type>post</wp:post_type> <wp:post_password></wp:post_password> <wp:is_sticky>0</wp:is_sticky> <category domain="category" nicename="Sample Lift"><![CDATA[Sample Lift]]></category><category domain="category" nicename="Sample Procedures"><![CDATA[Yeah Procedures]]></category> <category domain="post_tag" nicename="delaware"><![CDATA[delaware]]></category> <wp:postmeta> <wp:meta_key>_edit_last</wp:meta_key> <wp:meta_value><![CDATA[1]]></wp:meta_value> </wp:postmeta> </item> <item> <title>lalalalalala</title> <link>../../administrative-tips-for-surgery/delaware-cosmetic-surgery-a-better-experience/</link> <pubDate>Wed, 03 Oct 2012 3:20:43 +0000</pubDate> <dc:creator>admin</dc:creator> <guid isPermaLink="false">http://localhost/lols/?p=1</guid> <description></description> <content:encoded><![CDATA[ lalalalalala ]]></content:encoded> <excerpt:encoded><![CDATA[]]></excerpt:encoded> <wp:post_id>1</wp:post_id> <wp:post_date>2011-4-0124:39:30</wp:post_date> <wp:post_date_gmt>2011-4-0124:39:30</wp:post_date_gmt> <wp:comment_status>open</wp:comment_status> <wp:ping_status>open</wp:ping_status> <wp:post_name>lalalalalala</wp:post_name> <wp:status>publish</wp:status> <wp:post_parent>0</wp:post_parent> <wp:menu_order>0</wp:menu_order> <wp:post_type>post</wp:post_type> <wp:post_password></wp:post_password> <wp:is_sticky>0</wp:is_sticky> <category domain="category" nicename="lalalalalala"><![CDATA[lalalalalala]]></category> <category domain="post_tag" nicename="oink"><![CDATA[oink]]></category> <wp:postmeta> <wp:meta_key>_edit_last</wp:meta_key> <wp:meta_value><![CDATA[1]]></wp:meta_value> </wp:postmeta> </item> </channel> </rss> Please tell me what am I missing....

Read the article
How to improve performance of map that loads new overlay images

- by anthonysomerset

I have inherited a website to maintain that uses a html map overlaying a real map to link specific countries to specific pages. previously it loaded the default map image, then with some javascript it would change the image src to an image with that particular country in a different colour on mouseover and reset the image source back to the original image on mouse out to make maintenance (adding new countries) easier i made the initial map a background image by utilising some CSS for the div tag, and then created new images for each country which only had that countries hightlight so that the images remain fairly small. this works great but theres one issue which is particularly noticeable on slower internet connections when you hover over a country if you dont have the image file in your browser cache or downloaded it wont load the image unless you hover over another country and then back onto the first country - i guess this is due to the image having to manually be downloaded on first hover. My question: is it possible to force the load of these extra images AFTER the page and all the other assets have finished loading so that this behaviour is all but eliminated? the html code for the MAP is as follows: <div class="gtmap"><img id="Image-Maps_6200909211657061" src="<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png" usemap="#Image-Maps_6200909211657061" alt="We offer Guided Motorcycle Tours all around the world" width="615" height="296" /> <map id="_Image-Maps_6200909211657061" name="Image-Maps_6200909211657061"> <area shape="poly" coords="511,134,532,107,542,113,520,141" href="/guided-motorcycle-tours-japan/" alt="Guided Japan Motorcycle Tours" title="Japan" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-japan.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="252,61,266,58,275,64,262,68" href="/guided-motorcycle-tour.php?iceland-motorcycle-adventure-39" alt="Guided Iceland Motorcycle Tours" title="Iceland" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-iceland.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="587,246,597,256,577,279,568,270" href="/guided-motorcycle-tour.php?new-zealand-south-island-adventure-10" alt="New Zealand Guided Motorcycle Tours" title="New Zealand" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-nz.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="418,133,412,145,412,154,421,178,430,180,430,166,443,154,443,145,438,144,433,142,430,138,431,130,430,129,425,128" href="/guided-motorcycle-tours-india/" alt="India Guided Motorcycle Tours" title="India" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-india.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="460,152,466,149,474,165,470,171,466,161" href="/guided-motorcycle-tours-laos/" alt="Laos Guided Motorcycle Tours" title="Laos" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-laos.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="468,179,475,166,468,152,475,152,482,169" href="/guided-motorcycle-tour.php?indochina-motorcycle-adventure-tour-32" onClick="javascript: pageTracker._trackPageview('/internal-links/guided-tours/map/vietnam');" alt="Vietnam Guided Motorcycle Tours" title="Vietnam" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-viet.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="330,239,337,235,347,226,352,233,351,243,344,250,335,253,327,255,323,249,322,242,323,241" href="/guided-motorcycle-tours-southafrica/" alt="South Africa Guided Motorcycle Tours" title="South Africa" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-sa.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="290,77,293,86,298,96,286,102,285,97,285,89,282,84,282,79" href="/guided-motorcycle-tour.php?great-britain-isle-of-man-scotland-wales-uk-18" alt="United Kingdom" title="United Kingdom Guided Motorcycle Tours" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-uk.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="357,118,368,118,369,126,345,129,338,125,338,117,342,115,348,116" href="/guided-motorcycle-tour.php?explore-turkey-adventure-45" alt="Turkey" title="Turkey Guided Motorcycle Tours" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-turkey.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="206,95,193,101,185,101,178,106,165,111,157,109,147,105,134,103,121,103,107,103,96,103,86,104,81,99,77,91,70,83,62,79,60,72,61,64,59,57,60,51,71,50,83,49,95,50,107,54,117,53,129,47,137,36,148,37,163,38,177,44,187,54,195,60,184,72,191,80,200,87" href="/guided-motorcycle-tours-canada/" alt="Guided Canada Motorcycle Tours" title="Canada" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-canada.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="61,75,60,62,60,55,59,44,51,44,43,43,36,42,28,43,23,48,17,51,15,62,19,74,27,79,19,83,16,93,35,83,43,77,50,75,55,75" href="/guided-motorcycle-tours-alaska/" alt="Guided Alaska Motorcycle Tours" title="Alaska" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-alaska.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="82,101,99,101,133,101,148,105,161,110,172,106,187,100,180,113,171,122,165,131,159,149,147,141,137,140,129,147,120,141,112,138,103,137,93,132,86,122,86,112,86,106" href="/guided-motorcycle-tours-usa/" alt="USA Guided Motorcycle Tours" title="USA" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-usa.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="178,225,180,214,175,208,174,204,178,198,174,193,167,192,157,199,158,204,164,211,167,218" href="/guided-motorcycle-tour.php?peru-machu-picchu-adventure-25" alt="Peru Guided Motorcycle Tours" title="Peru" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-peru.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="172,226,169,239,166,256,166,267,164,279,171,277,174,262,175,250,179,234,180,225,176,224" href="/guided-motorcycle-tours-chile/" alt="Guided Chile Motorcycle Tours" title="Chile" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-chile.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="199,260,194,261,187,265,184,276,183,296,170,292,168,282,174,270,174,257,177,245,180,230,190,228,205,237,199,245" href="/guided-motorcycle-tours-argentina/" alt="Guided Argentina Motorcycle Tours" title="Argentina" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-arg.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> </map> </div> The <?php echo cdnhttpsCheck(); ?> is just a site specific function that gets the correct web domain/url from a config file to load resources from CDN where possible (eg all non HTTPS requests) We are loading Jquery at the bottom of the HTML if anybody wonders why it is missing from the code snippet for reference, the page with the map in question is found here: http://www.motoquest.com/guided-motorcycle-tours/

Read the article
I would like to filter XSL output based on a Radio button selection

- by Phil Speth

Here is my example I am trying to filter by year based on user selection: I assume some js or jQuery code would be needed: XML file: <?xml version="1.0" encoding="ISO-8859-1"?> <catalog> <cd> <title>Empire Burlesque3</title> <artist>Bob Dylan</artist> <country>USA</country> <company>Columbia</company> <price>10.90</price> <year>1985</year> </cd> <cd> <title>Hide your heart</title> <artist>Bonnie Tyler</artist> <country>UK</country> <company>CBS Records</company> <price>9.90</price> <year>1988</year> </cd> <cd> <title>Greatest Hits</title> <artist>Dolly Parton</artist> <country>USA</country> <company>RCA</company> <price>9.90</price> <year>1982</year> </cd> <cd> <title>Still got the blues</title> <artist>Gary Moore</artist> <country>UK</country> <company>Virgin records</company> <price>10.20</price> <year>1990</year> </cd> <cd> <title>Eros</title> <artist>Eros Ramazzotti</artist> <country>EU</country> <company>BMG</company> <price>9.90</price> <year>1997</year> </cd> <cd> <title>One night only</title> <artist>Bee Gees</artist> <country>UK</country> <company>Polydor</company> <price>10.90</price> <year>1998</year> </cd> <cd> <title>Sylvias Mother</title> <artist>Dr.Hook</artist> <country>UK</country> <company>CBS</company> <price>8.10</price> <year>1973</year> </cd> <cd> <title>Maggie May</title> <artist>Rod Stewart</artist> <country>UK</country> <company>Pickwick</company> <price>8.50</price> <year>1990</year> </cd> <cd> <title>Romanza</title> <artist>Andrea Bocelli</artist> <country>EU</country> <company>Polydor</company> <price>10.80</price> <year>1996</year> </cd> <cd> <title>When a man loves a woman</title> <artist>Percy Sledge</artist> <country>USA</country> <company>Atlantic</company> <price>8.70</price> <year>1987</year> </cd> <cd> <title>Black angel</title> <artist>Savage Rose</artist> <country>EU</country> <company>Mega</company> <price>10.90</price> <year>1995</year> </cd> <cd> <title>1999 Grammy Nominees</title> <artist>Many</artist> <country>USA</country> <company>Grammy</company> <price>10.20</price> <year>1999</year> </cd> <cd> <title>For the good times</title> <artist>Kenny Rogers</artist> <country>UK</country> <company>Mucik Master</company> <price>8.70</price> <year>1995</year> </cd> <cd> <title>Big Willie style</title> <artist>Will Smith</artist> <country>USA</country> <company>Columbia</company> <price>9.90</price> <year>1997</year> </cd> <cd> <title>Tupelo Honey</title> <artist>Van Morrison</artist> <country>UK</country> <company>Polydor</company> <price>8.20</price> <year>1971</year> </cd> <cd> <title>Soulsville</title> <artist>Jorn Hoel</artist> <country>Norway</country> <company>WEA</company> <price>7.90</price> <year>1996</year> </cd> <cd> <title>The very best of</title> <artist>Cat Stevens</artist> <country>UK</country> <company>Island</company> <price>8.90</price> <year>1990</year> </cd> <cd> <title>Stop</title> <artist>Sam Brown</artist> <country>UK</country> <company>A and M</company> <price>8.90</price> <year>1988</year> </cd> <cd> <title>Bridge of Spies</title> <artist>T`Pau</artist> <country>UK</country> <company>Siren</company> <price>7.90</price> <year>1987</year> </cd> <cd> <title>Private Dancer</title> <artist>Tina Turner</artist> <country>UK</country> <company>Capitol</company> <price>8.90</price> <year>1983</year> </cd> <cd> <title>Midt om natten</title> <artist>Kim Larsen</artist> <country>EU</country> <company>Medley</company> <price>7.80</price> <year>1983</year> </cd> <cd> <title>Pavarotti Gala Concert</title> <artist>Luciano Pavarotti</artist> <country>UK</country> <company>DECCA</company> <price>9.90</price> <year>1991</year> </cd> <cd> <title>The dock of the bay</title> <artist>Otis Redding</artist> <country>USA</country> <company>Atlantic</company> <price>7.90</price> <year>1987</year> </cd> <cd> <title>Picture book</title> <artist>Simply Red</artist> <country>EU</country> <company>Elektra</company> <price>7.20</price> <year>1985</year> </cd> <cd> <title>Red</title> <artist>The Communards</artist> <country>UK</country> <company>London</company> <price>7.80</price> <year>1987</year> </cd> <cd> <title>Unchain my heart</title> <artist>Joe Cocker</artist> <country>USA</country> <company>EMI</company> <price>8.20</price> <year>1987</year> </cd> </catalog> XSL File: <?xml version="1.0" encoding="ISO-8859-1"?>  <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <input type="radio" name="Cost" value="1980" checked="checked" /> 1980 <input type="radio" name="Cost" value="1990" /> 1990 <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th> </tr> <xsl:for-each select="catalog/cd"> <xsl:if test="year>1990"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> <td><xsl:value-of select="year"/></td> </tr> </xsl:if> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet>

Read the article
jQuery and Firebug

- by Jeffrey Karbowski

I am using jQuery's cycle plugin, and found that I can call up the default for "speed" by typing this into Firebug's console: $.fn.cycle.defaults.speed 1000 I would like to know how to call up the override I have for speed: $('.xxx').cycle({ speed: 1700 }); If you have the answer, please let me know the steps taken to figure it out so I can understand Firebug better. Thanks a bunch!

Read the article
jQuery - insert item into array at a specific index

- by tags2k

I am looking for a JavaScript array insert method, in the style of: arr.insert(index, item) Preferably in jQuery, but any JavaScript implementation will do at this point because I can't believe the trouble I'm having finding such a basic function! Thanks for your help.

Read the article
jquery to have animated popup

- by Anish Mohan

Hi, In my main page, I need to have a main links dispayed...and on mouse hover of each main link it shud display a layer (something like modal popup but.smooth one)...and in the layer user shud be able to select other links. It shud allow the user to move smoothly between the main links. can i use jquery for this..if not what shud i use? Plz help...Thanks in advance !

Read the article
Calling methods or functions with Jquery

- by Ross

So I can call a php page using jquery $.ajax({ type: "GET", url: "refresh_news_image.php", data: "name=" + name, success: function(html) { alert(html) $('div.imageHolder').html(html); } }); However this getting a bit messy, I have a few .php files that only really preform very simple tasks. If I want to call a method $images-refresh_image(); is this possible. Failing that I could just create a big file with lots of functions in it? Thanks, Ross

Read the article
Why are pieces of my HTML showing up on the page and breaking it? Is it PHP related?

- by Jason Rhodes

I've been building a site in PHP, HTML, CSS, and using a healthy dose of jQuery javascript. The site looks absolutely fine on my Mac browsers, but for some reason, when my client uses PC Safari, she's seeing strange bits of my HTML show up on the page. Here are some (small) screenshot examples: Figure 1: This one is just a closing </li> tag that should've been on the Media li element. Not much harm done, but strange. Figure 2: Here this was part of <div class='submenu'> and since the div tag didn't render properly, the entire contents of that div don't get styled correctly by CSS. Figure 3: This last example shows what should have been <a class='top current' href=... but for some reason half of the HTML tag stops being rendered and just gets printed out. So the rest of that list menu is completely broken. Here's the code from the header.php file itself. The main navigation section (seen in the screenshots) is further down, marked by a line of asterisks if you want to skip there. <?php // Setting up location variables if(isset($_GET['page'])) { $page = Page::find_by_slug($_GET['page']); } elseif(isset($_GET['post'])) { $page = Page::find_by_id(4); } else { $page = Page::find_by_id(1); } $post = isset($_GET['post']) ? Blogpost::find_by_slug($_GET['post']) : false; $front = $page->id == 1 ? true : false; $buildblog = $page->id == 4 ? true : false; $eventpage = $page->id == 42 ? true : false; // Setting up content edit variables $edit = isset($_GET['edit']) ? true : false; $preview = isset($_GET['preview']) ? true : false; // Finding page slug value $pageslug = $page->get_slug($loggedIn); ?> <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> <?php if(!$post) { if($page->id != 1) { echo $page->title." | "; } echo $database->site_name(); } elseif($post) { echo "BuildBlog | ".$post->title; } ?> </title> <link href="<?php echo SITE_URL; ?>/styles/style.css" media="all" rel="stylesheet" /> <?php include(SITE_ROOT."/scripts/myJS.php"); ?> </head> <body class=" <?php if($loggedIn) { echo "logged"; } else { echo "public"; } if($front) { echo " front"; } ?>"> <?php $previewslug = str_replace("&edit", "", $pageslug); ?> <?php if($edit) { echo "<form id='editPageForm' action='?page={$previewslug}&preview' method='post'>"; } ?> <?php if($edit && !$preview) : // Edit original ?> <div id="admin_meta_nav" class="admin_meta_nav"> <ul class="center nolist"> <li class="title">Edit</li> <li class="cancel"><a class="cancel" href="?page=<?php echo $pageslug; ?>&cancel">Cancel</a></li> <li class="save"><input style='position: relative; z-index: 500' class='save' type="submit" name="newpreview" value="Preview" /></li> <li class="publish"><input style='position: relative; z-index: 500' class='publish button' type="submit" name="publishPreview" value="Publish" /></li> </ul> </div> <?php elseif($preview && !$edit) : // Preview your edits ?> <div id="admin_meta_nav" class="admin_meta_nav"> <ul class="center nolist"> <li class="title">Preview</li> <li class="cancel"><a class="cancel" href="?page=<?php echo $pageslug; ?>&cancel">Cancel</a></li> <li class="save"><a class="newpreview" href="?page=<?php echo $pageslug; ?>&preview&edit">Continue Editing</a></li> <li class="publish"><a class="publish" href="?page=<?php echo $pageslug; ?>&publishLastPreview">Publish</a></li> </ul> </div> <?php elseif($preview && $edit) : // Return to preview and continue editing ?> <div id="admin_meta_nav" class="admin_meta_nav"> <ul class="center nolist"> <li class="title">Edit Again</li> <li class="cancel"><a class="cancel" href="?page=<?php echo $pageslug; ?>&cancel">Cancel</a></li> <li class="save"><input style='position: relative; z-index: 500' class='save button' type="submit" name="newpreview" value="Preview" /></li> <li class="publish"><input style='position: relative; z-index: 500' class='publish button' type="submit" name="publishPreview" value="Publish" /></li> </ul> </div> <?php else : ?> <div id="meta_nav" class="meta_nav"> <ul class="center nolist"> <li><a href="login.php?logout">Logout</a></li> <li><a href="<?php echo SITE_URL; ?>/admin">Admin</a></li> <li><a href="<?php if($front) { echo "admin/?admin=frontpage"; } elseif($event || $eventpage) { echo "admin/?admin=events"; } elseif($buildblog) { if($post) { echo "admin/editpost.php?post={$post->id}"; } else { echo "admin/?admin=blog"; } } else { echo "?page=".$pageslug."&edit"; } ?>">Edit Mode</a></li> <li><a href="<?php echo SITE_URL; ?>/?page=donate">Donate</a></li> <li><a href="<?php echo SITE_URL; ?>/?page=calendar">Calendar</a></li> </ul> <div class="clear"></div> </div> <?php endif; ?> <div id="public_meta_nav" class="public_meta_nav"> <div class="center"> <ul class="nolist"> <li><a href="<?php echo SITE_URL; ?>/?page=donate">Donate</a></li> <li><a href="<?php echo SITE_URL; ?>/?page=calendar">Calendar</a></li> </ul> <div class="clear"></div> </div> </div> * Main Navigation Section, as seen in screenshots above, starts here ** <div class="header"> <div class="center"> <a class="front_logo" href="<?php echo SITE_URL; ?>"><?php echo $database->site_name(); ?></a> <ul class="nolist main_nav"> <?php $tops = Page::get_top_pages(); $topcount = 1; foreach($tops as $top) { $current = $top->id == $topID ? true : false; $title = $top->title == "Front Page" ? "Home" : ucwords($top->title); $url = ($top->title == "Front Page" || !$top->get_slug($loggedIn)) ? SITE_URL : SITE_URL . "/?page=".$top->get_slug($loggedIn); if(isset($_GET['post']) && $top->id == 1) { $current = false; } if(isset($_GET['post']) && $top->id == 4) { $current = true; } echo "<li"; if($topcount > 3) { echo " class='right'"; } echo "><a class='top"; if($current) { echo " current"; } echo "' href='{$url}'>{$title}</a>"; if($children = Page::get_children($top->id)) { echo "<div class='submenu'>"; echo "<div class='corner-helper'></div>"; foreach($children as $child) { echo "<ul class='nolist level1"; if(!$subchildren = Page::get_children($child->id)) { echo " nochildren"; } echo "'>"; $title = ucwords($child->title); $url = !$child->get_slug($loggedIn) ? SITE_URL : SITE_URL . "/?page=".$child->get_slug($loggedIn); if($child->has_published() || $loggedIn) { echo "<li><a class='title' href='{$url}'>{$title}</a>"; if($subchildren = Page::get_children($child->id)) { echo "<ul class='nolist level2'>"; foreach($subchildren as $subchild) { if($subchild->has_published() || $loggedIn) { $title = ucwords($subchild->title); $url = !$subchild->get_slug($loggedIn) ? SITE_URL : SITE_URL . "/?page=".$subchild->get_slug($loggedIn); echo "<li><a href='{$url}'>{$title}</a>"; } } echo "</ul>"; } echo "</li>"; } echo "</ul>"; } echo "</div>"; } echo "</li>"; $topcount++; } ?> </ul> <div class="clear"></div> </div> </div> <div id="mediaLibraryPopup" class="mediaLibraryPopup"> <h3>Media Library</h3> <ul class="box nolist"></ul> <div class="clear"></div> <a href="#" class="cancel">Cancel</a> </div> <div class="main_content"> Does anyone have any idea why the PC Safari browser would be breaking things up like this? I'm assuming it's PHP related but I cannot figure out why it would do that.

Read the article
Help with css and jquery grid

- by NachoF

Im trying to add jquery grid to my site. (codeigniter php) It loads the data just fine but the grid ends up looking awful.. I dont know much about css.... heres an image of what Im getting

Read the article
Microsoft CDN for JQuery or Google CDN?

- by Xaisoft

Does it actually matter which CDN you use to link to your jquery file or any javascript file for that matter. Is one potentially faster than the other? What other factors could play a role in which cdn you decide to use? I know that Microsoft, Yahoo, and Google all have CDN's now.

Read the article
Fullcalendar jquery plugin Show years on nextYear buttons

- by Nathan Neff

I'm using the fullcalendar jquery plugin, and would like to display 2009 and 2011 in the nextYear and prevYear buttons. For exmaple: 2009 May 2010 2011 I know I can put static text on the buttons like this: buttonText: { prevYear: '2009', nextYear: '2011' }, But I would like those years to change, depending on the year that the calendar is currently viewing. There's documentation about 'year' here: http://arshaw.com/fullcalendar/docs/current_date/ but I don't know how to get that 'year' property. Any examples would be appreciated, Thanks, --Nate

Read the article
Best way to save user settings on client-side (javascript,jquery)

- by Johua

I have a settings page that a user can enter some text and save directly to a combobox. Next time when page loads, combobox is filled in with the previous entered text. Also i have a modify button, so the user can delete or edit a value from the combobox. My question is, what's the best way to save to user settings on the client with javascirpt/jquery? I can only think of using an array and then (push/pop).,,Anyone got some bad experience with arrrays? thx

Read the article
Jquery, AJAX and URL changes...

- by user305270

Jquery, AJAX and URL changes... I have a gallery, and when the image change i would like to change my url to "#image_id=321" and when i load an url with this appended: "#image_id=321", loads the image with id 321. is this possible to make without the "#" and using "/photo-id/321"? thanks

Read the article

< Previous Page | 483 484 485 486 487 488 489 490 491 492 493 494 | Next Page >