Search Results

Search found 12538 results on 502 pages for 'min width'.

Page 324/502 | < Previous Page | 320 321 322 323 324 325 326 327 328 329 330 331  | Next Page >

  • Code golf: Word frequency chart

    - by ChristopheD
    The challenge: Build an ASCII chart of the most commonly used words in a given text. The rules: Only accept a-z and A-Z (alphabetic characters) as part of a word. Ignore casing (She == she for our purpose). Ignore the following words (quite arbitary, I know): the, and, of, to, a, i, it, in, or, is Clarification: considering don't: this would be taken as 2 different 'words' in the ranges a-z and A-Z: (don and t). Optionally (it's too late to be formally changing the specifications now) you may choose to drop all single-letter 'words' (this could potentially make for a shortening of the ignore list too). Parse a given text (read a file specified via command line arguments or piped in; presume us-ascii) and build us a word frequency chart with the following characteristics: Display the chart (also see the example below) for the 22 most common words (ordered by descending frequency). The bar width represents the number of occurences (frequency) of the word (proportionally). Append one space and print the word. Make sure these bars (plus space-word-space) always fit: bar + [space] + word + [space] should be always <= 80 characters (make sure you account for possible differing bar and word lenghts: e.g.: the second most common word could be a lot longer then the first while not differing so much in frequency). Maximize bar width within these constraints and scale the bars appropriately (according to the frequencies they represent). An example: The text for the example can be found here (Alice's Adventures in Wonderland, by Lewis Carroll). This specific text would yield the following chart: _________________________________________________________________________ |_________________________________________________________________________| she |_______________________________________________________________| you |____________________________________________________________| said |____________________________________________________| alice |______________________________________________| was |__________________________________________| that |___________________________________| as |_______________________________| her |____________________________| with |____________________________| at |___________________________| s |___________________________| t |_________________________| on |_________________________| all |______________________| this |______________________| for |______________________| had |_____________________| but |____________________| be |____________________| not |___________________| they |__________________| so For your information: these are the frequencies the above chart is built upon: [('she', 553), ('you', 481), ('said', 462), ('alice', 403), ('was', 358), ('that ', 330), ('as', 274), ('her', 248), ('with', 227), ('at', 227), ('s', 219), ('t' , 218), ('on', 204), ('all', 200), ('this', 181), ('for', 179), ('had', 178), (' but', 175), ('be', 167), ('not', 166), ('they', 155), ('so', 152)] A second example (to check if you implemented the complete spec): Replace every occurence of you in the linked Alice in Wonderland file with superlongstringstring: ________________________________________________________________ |________________________________________________________________| she |_______________________________________________________| superlongstringstring |_____________________________________________________| said |______________________________________________| alice |________________________________________| was |_____________________________________| that |______________________________| as |___________________________| her |_________________________| with |_________________________| at |________________________| s |________________________| t |______________________| on |_____________________| all |___________________| this |___________________| for |___________________| had |__________________| but |_________________| be |_________________| not |________________| they |________________| so The winner: Shortest solution (by character count, per language). Have fun! Edit: Table summarizing the results so far (2012-02-15) (originally added by user Nas Banov): Language Relaxed Strict ========= ======= ====== GolfScript 130 143 Perl 185 Windows PowerShell 148 199 Mathematica 199 Ruby 185 205 Unix Toolchain 194 228 Python 183 243 Clojure 282 Scala 311 Haskell 333 Awk 336 R 298 Javascript 304 354 Groovy 321 Matlab 404 C# 422 Smalltalk 386 PHP 450 F# 452 TSQL 483 507 The numbers represent the length of the shortest solution in a specific language. "Strict" refers to a solution that implements the spec completely (draws |____| bars, closes the first bar on top with a ____ line, accounts for the possibility of long words with high frequency etc). "Relaxed" means some liberties were taken to shorten to solution. Only solutions shorter then 500 characters are included. The list of languages is sorted by the length of the 'strict' solution. 'Unix Toolchain' is used to signify various solutions that use traditional *nix shell plus a mix of tools (like grep, tr, sort, uniq, head, perl, awk).

    Read the article

  • vertical navigation that shows hidden submenu on click using JQuery

    - by user346602
    Hi, I am trying to make a menu that works like the one on this flash site: http://elevensix.de/ When I click "portfolio", only then to the subnavigation links reveal themselves. Right now I have only managed to get a typical vertical "reveal subnavigation on hover menu" working. What is required is that once the appropriate menu item it cicked, its submenu shows. This submenu remains revealed as the submenu items are hovered over then selected. When the submenu item is selected, the content shows, and both the menu and submenu remain visible (the selected menu and submenu item are given a distinct colour to show the navigation path). Whew. Here is my html: <div id="nav"> <ul> <li><a href="#">about</a></li> <li><a href="#">testimonials</a> <ul> <li><a href="#">testimonial1</a></li> <li><a href="#">testimonial2</a></li> <li><a href="#">testimonial3</a></li> <li><a href="#">testimonial4</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">services1</a></li> <li><a href="#">services2</a></li> <li><a href="#">services3</a></li> <li><a href="#">services4</a></li> </ul> </li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div><!--end #nav--> and here is my css: #nav { width:160px; position: relative; top: 250px; left: 20px; } #nav ul { margin:0px; padding:0px; } #nav ul li { line-height:24px; list-style:none; } #nav a { text-decoration: none; color: #9d9fa2; } #nav ul li a:hover { position:relative; color: #00aeef; } #nav ul ul { display:none; position:absolute; left:160px; top:4px; } #nav ul li:hover ul { display:block; color: #00aeef; } #nav ul ul li { width:160px; float:left; display:inline; line-height:16px; } .selected { color: #00aeef !important; } Should I be giving the submenus a class so that I can hide then show them? And where would the class be applied? To the ul? could I use the same class for both submenus? Am I wrong in how I am applying the display:none values for this purpose? Many thanks to all the clever people on here.

    Read the article

  • Many DIVs inside parent DIV, CSS height issue

    - by Benjamin
    Hi everyone, I am putting together a dynamic photo gallery and getting stuck trying to place thumbnails. Basically I am trying to place each thumbnail and caption in its own DIV, floated to the left. The thumbnails are working just as I want them to but for some reason the parent DIV refuses to cover the height of the thumbnail area. Here is the CSS I am using.. #galleryBox { width: 650px; background: #fff; margin: auto; padding: 5px; text-align: center; } .item { display: block; margin: 10px; padding: 10px; float: left; background: #353535; min-width: 120px; } .label { display: block; color: #fff; } I have tried height: auto and that hasn't done anything. Here is what I am trying to style: <div id="galleryBox" class="ui-corner-all"> <div class="item ui-corner-all"> <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/> <p><span class="label">Testing</span></p> </div> <div class="item ui-corner-all"> <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/> <p><span class="label">Testing</span></p> </div> <div class="item ui-corner-all"> <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/> <p><span class="label">Testing</span></p> </div> <div class="item ui-corner-all"> <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/> <p><span class="label">Testing</span></p> </div> <div class="item ui-corner-all"> <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/> <p><span class="label">Testing</span></p> </div> <div class="item ui-corner-all"> <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/> <p><span class="label">Testing</span></p> </div> <div class="item ui-corner-all"> <img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/> <p><span class="label">Testing</span></p> </div> </div> Thanks!

    Read the article

  • mediaelement.js control sizes are wrong when clip nested in a hidden element

    - by Martin Francis
    It's a nasty one this. In an audio control placed within a container element whose display property is initially set to none, the audio clip does NOT correctly size the progress bar when it is initialised. This is clear when the container's display property is changed from 'none' to '' (which is equivalent to 'static'). But who would ever do that? I make extensive use of 'tabbed' display arrangements on community sites like this one: http://www.churchesInBracebridge.ca Owing to the page arrangement, the audio controls which you see under 'sermons' (which at the time of writing still using Flash rather than John's excellent library here) are initially rendered in a div that is hidden. Simplified Test case Rather than have anyone have to wade through all of that, here's a much simplified test case: http://jsfiddle.net/sJL6T/36 Here's the full page source for those who'd prefer to work with it that way. <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>MediaElementPlayer.js</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://mediaelementjs.com/js/mejs-2.13.1/mediaelement-and-player.js"></script> <link rel="stylesheet" href="http://mediaelementjs.com/js/mejs-2.13.1/mediaelementplayer.css" /> <script type="text/javascript"> function toggle(id){ document.getElementById(id).style.display= (document.getElementById(id).style.display=='none' ? '' : 'none'); } </script> </head> <body> <h1>MediaElementPlayer.js</h1> <h2 onclick="return toggle('test1')">Initially Hidden (Click to toggle)</h2> <div id='test1' style='display:none'> <audio controls="controls"> <source src="http://mediaelementjs.com/media/AirReview-Landmarks-02-ChasingCorporate.mp3" type="audio/mp3" /> </audio> </div> <h2 onclick="return toggle('test2')">Initially Shown (Click to toggle)</h2> <div id='test2' style=''> <audio controls="controls"> <source src="http://mediaelementjs.com/media/AirReview-Landmarks-02-ChasingCorporate.mp3" type="audio/mp3" /> </audio> </div> <script> $('audio').mediaelementplayer(); </script> </body> </html> Possible Workarounds Now I know that Google maps has the same quirk and there are two possible ways I've used to deal with that: Use absolute positioning in a displayed div to place the element 10,000px to the left then bring it onto the stage when we want to see it Have the map pane displayed when loading then hide it as soon as it's loaded (ugly I know, but it usually works) However either approach would be a pain to do, as I have a lot of legacy code using the simpler div hiding method. I know that JQuery can get the dimensions of an element event if it is hidden - someone thoughtfully fiddled that and it does work: http://jsfiddle.net/sJL6T/9 Perhaps it may be possible to modify the actual library to find correct dimensions, even if the container itself is hidden? That would be wonderful, if it can be done! Initial experiments on mediaelement-and-player.js code I found that when I provided a fixed value in the setControlsSize function for railWidth, I got consistent results with both controls in the test case above (and obviously I'm working with my own copy of the library to do that, not the one stored at mediaelementjs.com): // outer area rail.width(railWidth); Change to this: // outer area railWidth=216; rail.width(railWidth); Many thanks in anticipation! Martin Francis <<

    Read the article

  • Resizing Images In a Table Using JavaScript

    - by Abluescarab
    Hey, all. I apologize beforehand if none of this makes sense, or if I sound incompetent... I've been making webpages for a while, but don't know any JavaScript. I am trying to make a webpage for a friend, and he requested if I could write some code to resize the images in the page based on the user's screen resolution. I did some research on this question, and it's kind of similar to this, this, and this. Unfortunately, those articles didn't answer my question entirely because none of the methods described worked. Right now, I have a three-column webpage with 10 images in a table in the left sidebar, and when I use percentages for their sizes, they don't resize right between monitors. As such, I'm trying to write a JavaScript function that changes their sizes after detecting the screen resolution. The code is stripped from my post if I put it all, so I'll just say that each image links to a website and uses a separate image to change color when you hover over it. Would I have to address both images to change their sizes correctly? I use a JavaScript function to switch between them. Anyway, I tried both methods in this article and neither worked for me. If it helps, I'm using Google Chrome, but I'm trying to make this page as cross-browser as possible. Here's the code I have so far in my JavaScript function: function resizeImages() { var w = window.width; var h = window.height; var yuk = document.getElementById('yuk').style; var wb = document.getElementById('wb').style; var tf = document.getElementById('tf').style; var lh = document.getElementById('lh').style; var ko = document.getElementById('ko').style; var gz = document.getElementById('gz').style; var fb = document.getElementById('fb').style; var eg = document.getElementById('eg').style; var dl = document.getElementById('dl').style; var da = document.getElementById('da').style; if (w = "800" && h = "600") { } else if (w = "1024" && h = "768") { } else if (w = "1152" && h = "864") { } else if (w = "1280" && h = "720") { } else if (w = "1280" && h = "768") { } else if (w = "1280" && h = "800") { } else if (w = "1280" && h = "960") { } else if (w = "1280" && h = "1024") { } } Yeah, I don't have much in it because I don't know if I'm doing it right yet. Is this a way I can detect the "width" and "height" properties of a window? The "yuk", "wb", etcetera are the images I'm trying to change the size of. To sum it up: I want to resize images based on screen resolution using JavaScript, but my research attempts have been... futile. I'm sorry if that was long-winded, but thanks ahead of time!

    Read the article

  • Why only one video shows up in ASP.NET Video panel ?

    - by user284523
    It is possible to have multiple videos with Flowplayer http://flowplayer.org/demos/installation/multiple-players.html To do so in ASP.NET DYNAMICALLY, one has to use a Panel (see http://idevwebs.com/Default.aspx?id=25): <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- A minimal Flowplayer setup to get you started --> <!-- include flowplayer JavaScript file that does Flash embedding and provides the Flowplayer API. --> <script type="text/javascript" src="flowplayer-3.1.4.min.js"></script> <!-- page title --> <title>Minimal Flowplayer setup</title> </head><body> <form id="form1" runat="server"> <div id="page"> <h1>Minimal Flowplayer setup</h1> <p>View commented source code to get familiar with Flowplayer installation.</p> <!-- this A tag is where your Flowplayer will be placed. it can be anywhere --> <!-- player #1 --> <asp:Panel ID="panelVideo" runat="server"> </asp:Panel> <!-- this will install flowplayer inside previous A- tag. --> <script type="text/javascript"> flowplayer("player", "flowplayer-3.1.5.swf"); </script> <!-- after this line is purely informational stuff. does not affect on Flowplayer functionality --> <p> If you are running these examples <strong>locally</strong> and not on some webserver you must edit your <a href="http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html"> Flash security settings</a>. </p> <p class="less"> Select "Edit locations" &gt; "Add location" &gt; "Browse for files" and select flowplayer-x.x.x.swf you just downloaded. </p> <h2>Documentation</h2> <p> <a href="http://flowplayer.org/documentation/installation/index.html">Flowplayer installation</a> </p> <p> <a href="http://flowplayer.org/documentation/configuration/index.html">Flowplayer configuration</a> </p> <p> See this identical page on <a href="http://flowplayer.org/demos/example/index.htm">Flowplayer website</a> </p> </div> </form> </body></html> and then add video anchor dynamically public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { this.panelVideo.Controls.Add(new LiteralControl("<a href=\"" + "http://blip.tv/file/get/" + "KimAronson-TwentySeconds58192" + ".flv\" style=\"display:block;width:388px;height:230px\" id=\"player\"></a>")); this.panelVideo.Controls.Add(new LiteralControl("<a href=\"" + "http://blip.tv/file/get/" + "KimAronson-TwentySeconds67463" + ".flv\" style=\"display:block;width:388px;height:230px\" id=\"player\"></a>")); } } But it works only partially as the first video shows up not both. And all html below doesn't show up either.

    Read the article

  • Function calls not working in my page

    - by Vivek Dragon
    I made an select menu that works with the google-font-Api. I made to function in JSBIN here is my work http://jsbin.com/ocutuk/18/ But when i made the copy of my code in a html page its not even loading the font names in page. i tried to make it work but still it is in dead end. This is my html code <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script> <meta charset=utf-8 /> <title>FONT API</title> <script> function SetFonts(fonts) { for (var i = 0; i < fonts.items.length; i++) { $('#styleFont') .append($("<option></option>") .attr("value", fonts.items[i].family) .text(fonts.items[i].family)); } } var script = document.createElement('script'); script.src = 'https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyB8Ua6XIfe-gqbkE8P3XL4spd0x8Ft7eWo&callback=SetFonts'; document.body.appendChild(script); WebFontConfig = { google: { families: ['ABeeZee', 'Abel', 'Abril Fatface', 'Aclonica', 'Acme', 'Actor', 'Adamina', 'Advent Pro', 'Aguafina Script', 'Akronim', 'Aladin', 'Aldrich', 'Alegreya', 'Alegreya SC', 'Alex Brush', 'Alfa Slab One', 'Alice', 'Alike', 'Alike Angular', 'Allan', 'Allerta', 'Allerta Stencil', 'Allura', 'Almendra', 'Almendra Display', 'Almendra SC', 'Amarante', 'Amaranth', 'Amatic SC', 'Amethysta', 'Anaheim', 'Andada', 'Andika', 'Angkor', 'Annie Use Your Telescope', 'Anonymous Pro', 'Antic', 'Antic Didone', 'Antic Slab', 'Anton', 'Arapey', 'Arbutus', 'Arbutus Slab', 'Architects Daughter', 'Archivo Black', 'Archivo Narrow', 'Arimo', 'Arizonia', 'Armata', 'Artifika', 'Arvo', 'Asap', 'Asset', 'Astloch', 'Asul', 'Atomic Age', 'Aubrey', 'Audiowide', 'Autour One', 'Average', 'Average Sans', 'Averia Gruesa Libre', 'Averia Libre', 'Averia Sans Libre', 'Averia Serif Libre', 'Bad Script', 'Balthazar', 'Bangers', 'Basic', 'Battambang', 'Baumans', 'Bayon', 'Belgrano', 'Belleza', 'BenchNine', 'Bentham', 'Berkshire Swash', 'Bevan', 'Bigelow Rules', 'Bigshot One', 'Bilbo', 'Bilbo Swash Caps', 'Bitter', 'Black Ops One', 'Bokor', 'Bonbon', 'Boogaloo', 'Bowlby One', 'Bowlby One SC', 'Brawler', 'Bree Serif', 'Bubblegum Sans', 'Bubbler One', 'Buda', 'Buenard', 'Butcherman', 'Butterfly Kids', 'Cabin', 'Cabin Condensed', 'Cabin Sketch', 'Caesar Dressing', 'Cagliostro', 'Calligraffitti', 'Cambo', 'Candal', 'Cantarell', 'Cantata One', 'Cantora One', 'Capriola', 'Cardo', 'Carme', 'Carrois Gothic', 'Carrois Gothic SC', 'Carter One', 'Caudex', 'Cedarville Cursive', 'Ceviche One', 'Changa One', 'Chango', 'Chau Philomene One', 'Chela One', 'Chelsea Market', 'Chenla', 'Cherry Cream Soda', 'Cherry Swash', 'Chewy', 'Chicle', 'Chivo', 'Cinzel', 'Cinzel Decorative', 'Clicker Script', 'Coda', 'Coda Caption', 'Codystar', 'Combo', 'Comfortaa', 'Coming Soon', 'Concert One', 'Condiment', 'Content', 'Contrail One', 'Convergence', 'Cookie', 'Copse', 'Corben', 'Courgette', 'Cousine', 'Coustard', 'Covered By Your Grace', 'Crafty Girls', 'Creepster', 'Crete Round', 'Crimson Text', 'Croissant One', 'Crushed', 'Cuprum', 'Cutive', 'Cutive Mono']} }; (function() { var wf = document.createElement('script'); wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); $("#styleFont").change(function (){ var id =$('#styleFont option' +':selected').val(); $("#custom_text").css('font-family',id); }); </script> <style> #custom_text { font-family: Arial; resize: none; margin-top: 20px; width: 500px; } #styleFont { width: 100px; } </style> </head> <body> <select id="styleFont"> </select><br> <textarea id="custom_text"></textarea> </body> </html> How can i make it work. Whats the mistake i am making here.

    Read the article

  • Monorail - Form submission using GET instead of POST

    - by Septih
    Hello, I'm writing some additions to a Castle MonoRail based site involving an Add and an Edit form. The add form works fine and uses POST but the edit form uses GET. The only major difference I can see is that the edit method is called with the Id of the object being edited in the query string. When the submit button is pressed on the edit form, the only argument passed is this object Id again. Here is the code for the edit form: <form action="edit.ashx" method="post"> <h3>Coupon Description</h3> <textarea name="comments" width="200">$comments</textarea> <br/><br/> <h3>Coupon Actions</h3> <br/> <div>Give Stories</div> <ul class="checklist" style="overflow:auto;height:144px;width:100%"> #foreach ($story in $stories.Values) <li> <label> #set ($associated = "") #foreach($storyId in $storyIds) #if($story.Id == $storyId) #set($associated = " checked='true'") #end #end <input type="checkbox" name="chk_${story.Id}" id="chk_${story.Id}" value="true" class="checkbox" $associated/> $story.Name </label> </li> #end </ul> <br/><br/> <div>Give Credit Amount</div> <input type="text" name="credit" value="$credit" /> <br/><br/> <h3>Coupon Uses</h3> <input type="checkbox" name="multi" #if($multi) checked="true" #end /> Multi-Use Coupon?<br/><br/> <b>OR</b> <br/> <br/> Number of Uses per Coupon: <input type="text" name="uses" value="$uses" /> <br/> <input type="submit" name="Save" /> </form> The differences between this and the add form is the velocity stuff to do with association and the values of the inputs being from the PropertyBag. The Method dealing with this on the controller starts like this: public void Edit(int id) { Coupon coupon = Coupon.GetRepository(User.Site.Id).FindById(id).Value; if(coupon == null) { RedirectToReferrer(); return; } IFutureQueryOfList<Story> stories = Story.GetRepository(User.Site.Id).OnlyReturnEnabled().FindAll("Name", true); if (Params["Save"] == null) { ... } } It reliably gets called but a breakpoint on the Params["Save"] lets me see that the HttpMethod is "GET" and the only arguments passed (In the Form and the Request) are the object Id and additional HTTP headers. At the end of the day I'm not that familiar with MonoRail and this may be a stupid mistake on my behalf, but I would very much appreciate being made a fool out of if it fixes the problem! :) Thanks

    Read the article

  • innter.HTML not working after submit button is clicked

    - by user1781453
    I am trying to get the innerHTML to change to what is in the end of the function "calculate" but nothing happens once I hit submit. Here is my code: Pizza Order Form .outp {border-style:solid;background-color:white; border-color:red;padding:1em; border-width: .5em;} .notes {font-size:smaller;font-style:italic;} p {margin-left: 15%; width: 65%;} textarea {resize : none;} </style> function calculate(){ var type; var newline=""; var sum=0; var toppings=""; if( document.getElementById("small").checked==true){ type="Small Pizza"; sum+=4; } if( document.getElementById("medium").checked==true){ type="Medium Pizza"; sum+=6; } if( document.getElementById("large").checked==true){ type="Large Pizza"; sum+=8; } if( document.getElementById("pepperoni").checked==true){ toppings=toppings+"pepperoni, "; sum+=0.75; } if( document.getElementById("olives").checked==true){ toppings=toppings+"olives, "; sum+=0.6; } if( document.getElementById("sausage").checked==true){ toppings=toppings+"sausage, "; sum+=0.75; } if( document.getElementById("peppers").checked==true){ toppings=toppings+"peppers, "; sum+=0.5; } if( document.getElementById("onions").checked==true){ toppings=toppings+"onions, "; sum+=0.5; } if( document.getElementById("cheese").checked==true){ toppings=toppings+"Cheese Only, "; } var length = toppings.length; toppings = toppings.slice(0,length-2); document.getElementById("opta").innerHTML = type+newline+"Toppings:"+newline+toppings+newline+"Price - $"+sum; } Joe's Pizza Palace On-line Order Form <p id = "op" class = "outp" > <b /> Select the size Pizza you want: &nbsp;&nbsp; <input type="radio" name = "size" id="small" value = "small"> Small - $4.00 <b /> <input type="radio" name = "size" id="medium" value = "medium"> Medium - $6.00 <b /> <input type="radio" name = "size" id="large" value = "large"> Large - $8.00 <b /> </p> <p id = "op1" class = "outp" > <b /> Select the toppings: &nbsp;&nbsp; <input type="checkbox" name = "size" id="pepperoni" value = "pepperoni"> Pepperoni ($0.75) <b /> <input type="checkbox" name = "size" id="olives" value = "olives"> Olives ($0.60) <b /> <input type="checkbox" name = "size" id="sausage" value = "sausage"> Sausage ($0.75) <b /> <br /> <input type="checkbox" name = "size" id="peppers" value = "peppers"> Peppers ($0.50) <b /> <input type="checkbox" name = "size" id="onions" value = "onions"> Onions ($0.50) <b /> <input type="checkbox" name = "size" id="cheese" value = "cheese"> Cheese Only <b /> To obtain the price of your order click on the price button below: <br /><br /> <input type="button" align = "left" onclick="calculate();" value="Price (Submit Button)"/> <input type="reset" align = "left" value="Clear Form"/> <br /><br /> <textarea class="outp3" id="opta" style="border-color:black;" rows="6" cols="40" > </textarea>

    Read the article

  • Craziest JavaScript behavior I've ever seen

    - by Dan Ray
    And that's saying something. This is based on the Google Maps sample for Directions in the Maps API v3. <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Directions</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var directionDisplay; var directionsService = new google.maps.DirectionsService(); var map; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var myOptions = { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById("directionsPanel")); } function render() { var start; if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { start = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); }, function() { handleNoGeolocation(browserSupportFlag); }); } else { // Browser doesn't support Geolocation handleNoGeolocation(); } alert("booga booga"); var end = '<?= $_REQUEST['destination'] ?>'; var request = { origin:start, destination:end, travelMode: google.maps.DirectionsTravelMode.DRIVING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); } </script> </head> <body style="margin:0px; padding:0px;" onload="initialize()"> <div><div id="map_canvas" style="float:left;width:70%; height:100%"></div> <div id="directionsPanel" style="float:right;width:30%;height 100%"></div> <script type="text/javascript">render();</script> </body> </html> See that "alert('booga booga')" in there? With that in place, this all works fantastic. Comment that out, and var start is undefined when we hit the line to define var request. I discovered this when I removed the alert I put in there to show me the value of var start, and it quit working. If I DO ask it to alert me the value of var start, it tells me it's undefined, BUT it has a valid (and accurate!) value when we define var request a few lines later. I'm suspecting it's a timing issue--like an asynchronous something is having time to complete in the background in the moment it takes me to dismiss the alert. Any thoughts on work-arounds?

    Read the article

  • Adding to database with multiple text boxes

    - by kira423
    What I am trying to do with this script is allow users to update a url for their websites, and since each user isn't going to have the same amount of websites is is hard for me to just add $_POST['website'] for each of these. Here is the script <?php include("config.php"); include("header.php"); include("functions.php"); if(!isset($_SESSION['username']) && !isset($_SESSION['password'])){ header("Location: pubs.php"); } $getmember = mysql_query("SELECT * FROM `publishers` WHERE username = '".$_SESSION['username']."'"); $info = mysql_fetch_array($getmember); $getsites = mysql_query("SELECT * FROM `websites` WHERE publisher = '".$info['username']."'"); $postback = $_POST['website']; $webname = $_POST['webid']; if($_POST['submit']){ var_dump( $_POST['website'] ); $update = mysql_query("UPDATE `websites` SET `postback` = '$postback' WHERE name = '$webname'"); } print" <div id='center'> <span id='tools_lander'><a href='export.php'>Export Campaigns</a></span> <div id='calendar_holder'> <h3>Please define a postback for each of your websites below. The following variables should be used when creating your postback.<br /> cid = Campaign ID<br /> sid = Sub ID<br /> rate = Campaign Rate<br /> status = Status of Lead. 1 means payable 2 mean reversed<br /> A sample postback URL would be <br /> http://www.example.com/postback.php?cid=#cid&sid=#sid&rate=#rate&status=#status</h3> <table class='balances' align='center'> <form method='POST' action=''>"; while($website = mysql_fetch_array($getsites)){ print" <tr> <input type ='hidden' name='webid' value='".$website['id']."' /> <td style='font-weight:bold;'>".$website['name']."'s Postback:</td> <td><input type='text' style='width:400px;' name='website[]' value='".$website['postback']."' /></td> </tr>"; } print" <td style='float:right;position:relative;left:150px;'><input type='submit' name='submit' style='font-size:15px;height:30px;width:100px;' value='Submit' /></td> </form> </table> </div>"; include("footer.php"); ?> What I am attempting to do insert the what is inputted in the text boxes to their corresponding websites, and I cannot think of any other way to do it, and this obviously does not works and returns a notice stating Array to string conversion If there is a more logical way to do this please let me know.

    Read the article

  • Spring MVC working with Web Designers

    - by jboyd
    When working with web-designers in a Spring-MVC and JSP environment, are there any tools or helpful patterns to reduce the pain of going back and forth from HTML to JSP and back? Project requirements dictate that views will change often, and it can be difficult to make changes efficiently because of the amount of Java code that leaks into the view layer. Ideally I'd like to remove almost all Java code from the view, but it does not seem like this works with the Spring/JSP philosophy where often the way to remove Java code is to replace that code with tag libraries, which will still have a similar problem. To provide a little clarity to my question I'm going to include some existing code (inherited by me) to show the kinds of problems I'm likely to face when change the look of our views: <%-- Begin looping through results --%> <% List memberList = memberSearchResults.getResults(); for(int i = start - 1; i < memberList.size() && i < end; i++) { Profile profile = (Profile)memberList.get(i); long profileId = profile.getProfileId(); String nickname = profile.getNickname(); String description = profile.getDescription(); Image image = profile.getAvatarImage(); String avatarImageSrc = null; int avatarImageWidthNum = 0; int avatarImageHeightNum = 0; if(null != image) { avatarImageSrc = image.getSrc(); avatarImageWidthNum = image.getWidth(); avatarImageHeightNum = image.getHeight(); } String bgColor = i % 2 == 1 ? "background-color:#FFF" : ""; %> <div style="float:left;clear:both;padding:5px 0 5px 5px;cursor:pointer;<%= bgColor %>" onclick='window.location="profile.sp?profileId=<%= profileId %>"'> <div style="float:right;clear:right;padding-left:10px;width:515px;font-size:10px;color:#7e7e7e"> <h6><%= nickname %></h6> <%= description %> </div> <img style="float:left;clear:left;" alt="Avatar Image" src="<%= null != avatarImageSrc && avatarImageSrc.trim().length() > 0 ? avatarImageSrc : "images/defaultUserImage.png" %>" <%= avatarImageWidthNum < avatarImageHeightNum ? "height='59'" : "width='92'" %> /> </div> <% } // End loop %> Now, ignoring some of the code smells there, it's obvious that if someone wants to change the look of that DIV it would be neccesary to re-place all the Java/JSP code into the new HTML given (the designers don't work in JSP files, they have their own HTML versions of the website). Which is tedious, and prone to errors.

    Read the article

  • Cordova - Scrolling with a fixed header and footer (ios)

    - by Samu Singh
    Using Cordova (phonegap) & bootstrap to make a mobile application, testing on IOS for now. Getting an issue with a header and footer bar that are fixed with scrollable content in the middle. When tapping to scroll, the header/footer bar moves down or up with the content but then snaps back to place as soon as the scrolling completes. If I use -webkit-overflow-scrolling: touch; it works as expected, but it makes it really awkward to scroll through the content, and if you scroll passed the end, it only scrolls the header or footer (with elastic overflow) until you stop for a second. here's my html for the header/footer bars: <div id="headerBar"> <div class="container-fluid" style="background-color: #1569C7"> <div class="row"> <div class="col-xs-3 text-left"> <button id="logoutButton" type="button" class="btn btn-default"> Log Out </button> <button type="button" class="btn btn-default" id="restoreQuestionFeedButton"> <span class="glyphicon glyphicon-chevron-left"></span> </button> </div> <div class="col-xs-6 text-center" style="height: 55px"> <strong id="usernameText"></strong> </div> <div class="col-xs-3 text-right"> <button id="oldCreatQuestionButton" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus"></span> </button> </div> </div> </div> </div> <div id="footerBar"> <div class="container-fluid" style="padding: 0"> <div class="row text-center"> <button id="createQuestionButton" type="button" class="btn btn-default footerButton"> <span class="glyphicon glyphicon-plus"></span> <strong>Ask a new free question!</strong> </button> </div> </div> </div> And here is the related CSS: #headerBar { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; background-color: #1569C7; } #footerBar { position: fixed; z-index: 100; bottom: 0; left: 0; width: 100%; background-color: #1569C7 !important; }

    Read the article

  • CSS: move a "float:right" element to top (to align with the first element of the list)

    - by Patrick
    hi, I've a sequence of elements and the last one has css "float:left". I would like to display it at the same height of the first element and not on the bottom of the list. (I cannot change the html code, so it is the last in the list). At the same time, I would like to keep it on the right. How can I make it wich CSS ? thanks Code: <div class="field field-type-text field-field-year"> <div class="field-items"> <div class="field-item odd"> <div class="field-label-inline-first"> Year:&nbsp;</div> 2009 </div> </div> </div> <div class="field field-type-text field-field-where"> <div class="field-items"> <div class="field-item odd"> <div class="field-label-inline-first"> Where:&nbsp;</div> Musée Rath, Geneva </div> </div> </div> <div class="field field-type-text field-field-when"> <div class="field-items"> <div class="field-item odd"> <div class="field-label-inline-first"> When:&nbsp;</div> 25.8 – 27.9.2009 </div> </div> </div> <div class="field field-type-text field-field-editor"> <div class="field-items"> <div class="field-item odd"> <div class="field-label-inline-first"> Editor:&nbsp;</div> Blabla Blabla </div> </div> </div> <div class="field field-type-text field-field-material"> <div class="field-items"> <div class="field-item odd"> <div class="field-label-inline-first"> Material/techniques:&nbsp;</div> contemporary art installations </div> </div> </div> <div class="field field-type-text field-field-dimension"> <div class="field-items"> <div class="field-item odd"> <div class="field-label-inline-first"> Dimension:&nbsp;</div> 2 floors in a neoclassical building </div> </div> </div> <div class="field field-type-text field-field-artists"> <div class="field-items"> <div class="field-item odd"> <div class="field-label-inline-first"> Artists:&nbsp;</div> Blablablabla balbalbalbalba </div> </div> </div> .field-field-year, .field-field-where, .field-field-when, .field-field-editor, .field-field-material, .field-field-dimension { width:300px; } .field-field-artists { width:400px; float:right; clear:right; top-margin: -200px; }

    Read the article

  • What is this XML Parse Error?

    - by Jake
    I am using the following script to generate a RSS feed for my site: <?php class RSS { public function RSS() { $root = $_SERVER['DOCUMENT_ROOT']; require_once ("../connect.php"); } public function GetFeed() { return $this->getDetails() . $this->getItems(); } private function dbConnect() { DEFINE ('LINK', mysql_connect (DB_HOST, DB_USER, DB_PASSWORD)); } private function getDetails() { $detailsTable = "rss_feed_details"; $this->dbConnect($detailsTable); $query = "SELECT * FROM ". $detailsTable ." WHERE feed_category = ''"; $result = mysql_db_query (DB_NAME, $query, LINK); while($row = mysql_fetch_array($result)) { $details = '<?xml version="1.0" encoding="ISO-8859-1" ?> <rss version="2.0"> <channel> <title>'. $row['title'] .'</title> <link>'. $row['link'] .'</link> <description>'. $row['description'] .'</description> <language>'. $row['language'] .'</language> <image> <title>'. $row['image_title'] .'</title> <url>'. $row['image_url'] .'</url> <link>'. $row['image_link'] .'</link> <width>'. $row['image_width'] .'</width> <height>'. $row['image_height'] .'</height> </image>'; } return $details; } private function getItems() { $itemsTable = "rss_posts"; $this->dbConnect($itemsTable); $query = "SELECT * FROM ". $itemsTable ." ORDER BY id DESC"; $result = mysql_db_query (DB_NAME, $query, LINK); $items = ''; while($row = mysql_fetch_array($result)) { $items .= '<item> <title>'. $row["title"] .'</title> <link>'. $row["link"] .'</link> <description><![CDATA['.$row["readable_date"]."<br /><br />".$row["description"]."<br /><br />".']]></description> </item>'; } $items .= '</channel> </rss>'; return $items; } } ?> The baffling thing is, the script works perfectly fine on my localhost but gives the following error on my remote server: XML Parsing Error: junk after document element Location: http://mysite.com/rss/main/ Line Number 2, Column 1:<b>Parse error</b>: syntax error, unexpected T_STRING in <b>/home/studentw/public_html/rss/global-reach/rssClass.php</b> on line <b>1</b><br /> ^

    Read the article

  • opening a fancybox from a drop down box and passing the selected value to it directly

    - by andy
    <select name="mySelectboxsituation_found" id="mySelectboxsituation_found"> <option value="100">Firecall</option> <option value="200">FireAlarm</option> <option value="300">FireAlarm2</option> <option value="400">FireAlarm4</option> </select> < a href="#" class="incidenttype" name="all" onClick="JavaScript:var dropdown=document.getElementById('mySelectboxsituation_found');this.href='main_situation_found.php?incident_maincateid='+dropdown.options[dropdown.selectedIndex].value;return true;"/>CLICK HERE < / a> function cleanUp(){ var subsituation_found1 = $("#fancybox- frame").contents().find('input:radio[name=incident_subcate]:checked').val(); } $(".incidenttype").fancybox({ 'width' : 900, 'height' : 600, 'autoScale': false, 'transitionIn': 'none', 'transitionOut': 'none', 'type': 'iframe', 'onCleanup': cleanUp ); }); clicking on "CLICK HERE" opens the fancybox and transfers the value selected in the drop down box. What I would like to do is open the fancy box when i change the value in the dropdown box...without having to click on the click here link.....i know it is posisble using something like _this....but i am not sure and am looking for some direction... ideally some thing like this ... <select name="mySelectboxsituation_found" id="mySelectboxsituation_found" onChange="JavaScript:var dropdown=document.getElementById('mySelectboxsituation_found');this.href='main_situation_found.php?incident_maincateid='+dropdown.options[dropdown.selectedIndex].value;return true;"> <option value="100">Firecall</option> <option value="200">FireAlarm</option> <option value="300">FireAlarm2</option> <option value="400">FireAlarm4</option> </select> does any have an idea how to do it.... I have also tried... function test_fan() { alert(document.getElementById('mySelectboxsituation_found').options[document.getElementById('mySelectboxsituation_found').selectedIndex].value); var dropval =document.getElementById('mySelectboxsituation_found').options[document.getElementById('mySelectboxsituation_found').selectedIndex].value; return dropval; } $(document).ready(function(){ $("#autostart").fancybox({ 'onStart':test_fan, 'width': 800, 'height': 700, 'type': 'iframe', href:'main_situation_found.php?incident_maincateid='+document.getElementById('mySelectboxsituation_found').options[document.getElementById('mySelectboxsituation_found').selectedIndex].value }); <a href="#" id="autostart" style="display:none"></a> <form><select id="mySelectboxsituation_found" onchange="$('#autostart').trigger('click');"> <option value="">select</option> <option value="100">option 1</option> <option value="200">trigger</option> <option value="300">option 3</option> <option value="400">option 4</option> </select> </form> the really funny that happens there is that .... on the alert id do get the value i selected so if i selected alert fancybox window 100 100 nothing shows up empty 200 200 100 300 300 200 400 400 300 the fancybox seems to me the the previously selected values and i am not sure why that is happening... thanks andy

    Read the article

  • Why i cannot get the frame of a UIView in order to move it? The view is defined.

    - by Jann
    I am creating a nav-based app with a view that floats at the bottom of the screen (Alpha .7 most of the time). I create it like this... // stuff to create the tabbar/nav bar. // THIS ALL WORKS... // then add it to subview. [window addSubview:tabBarController.view]; // need this last line to display the window (and tab bar controller) [window makeKeyAndVisible]; // Okay, here is the code i am using to create a grey-ish strip exactly `zlocationAccuracyHeight` pixels high at `zlocationAccuracyVerticalStartPoint` starting point vertically. CGRect locationManagerAccuracyUIViewFrame = CGRectMake(0,zlocationAccuracyVerticalStartPoint,[[UIScreen mainScreen] bounds].size.width,zlocationAccuracyHeight); self.locationManagerAccuracyUIView = [[UIView alloc] initWithFrame:locationManagerAccuracyUIViewFrame]; self.locationManagerAccuracyUIView.autoresizingMask = (UIViewAutoresizingFlexibleWidth); self.locationManagerAccuracyUIView.backgroundColor = [UIColor darkGrayColor]; [self.locationManagerAccuracyUIView setAlpha:0]; CGRect locationManagerAccuracyLabelFrame = CGRectMake(0, 0,[[UIScreen mainScreen] bounds].size.width,zlocationAccuracyHeight); locationManagerAccuracyLabel = [[UILabel alloc] initWithFrame:locationManagerAccuracyLabelFrame]; if ([myGizmoClass useLocationServices] == 0) { locationManagerAccuracyLabel.text = @"GPS Accuracy: Using Manual Location"; } else { locationManagerAccuracyLabel.text = @"GPS Accuracy: One Moment Please..."; } locationManagerAccuracyLabel.font = [UIFont boldSystemFontOfSize:12]; locationManagerAccuracyLabel.textAlignment = UITextAlignmentCenter; locationManagerAccuracyLabel.textColor = [UIColor whiteColor]; locationManagerAccuracyLabel.backgroundColor = [UIColor clearColor]; [locationManagerAccuracyLabel setAlpha:0]; [self.locationManagerAccuracyUIView addSubview: locationManagerAccuracyLabel]; [window addSubview: self.locationManagerAccuracyUIView]; this all works (i am not sure about the order i create the uiview in ... meaning i am creating the frame, the view, creating the "accuracy text" and adding that to the view, then adding the uiview as a subview of the window . It works and seems correct in my logic. So, here is the tough part. I have a timer that i am testing with. I am trying to float the uiview up by 30 pix. here is that code: [UIView beginAnimations:nil context:NULL]; [UIView setAnimationDuration:0.3]; CGRect rect = [ self.locationManagerAccuracyUIView frame]; NSLog(@"ORIGIN: %d x %d (%@)\n",rect.origin.x,rect.origin.y,rect); rect.origin.y -= 30; [UIView commitAnimations]; The problem? rect is nill, rect.origin.x and rect.origin.y are both zero. Can anyone tell me why? Here is how i set up self.locationManagerAccuracyUIView in my files: Delegate.h UIView *locationManagerAccuracyUIView; UILabel *locationManagerAccuracyLabel; ... @property (nonatomic, retain) IBOutlet UIView *locationManagerAccuracyUIView; @property (nonatomic, retain) IBOutlet UILabel *locationManagerAccuracyLabel; Delegate.m ... @synthesize locationManagerAccuracyUIView; @synthesize locationManagerAccuracyLabel; ... BTW: Other places in another timer i DO set the alpha to fade in and out and THAT works! So locationManagerAccuracyUIView is valid and defined as a view... For instance: [UIView beginAnimations:nil context:NULL]; [UIView setAnimationDuration:0.5]; [locationManagerAccuracyLabel setAlpha:1]; [UIView commitAnimations]; [UIView beginAnimations:nil context:NULL]; [UIView setAnimationDuration:0.5]; [self.locationManagerAccuracyUIView setAlpha:.7]; [UIView commitAnimations]; ...and it DOES work. Can anyone help me? As an aside: I know, when typing this I used self.locationManagerAccuracyUIView and locationManagerAccuracyUIView interchangeably to see if for some reason that was the issue. It is not. :) Thx

    Read the article

  • How get <body> element from the html which one have as a string

    - by Oleg
    Hello! I have a stupid problem. An jQuery.ajax request return me a full HTML text as a string. I receive such response in an case of error on the server. The server give me an error description which I want to place inside of the corresponding place of my current page. So now the question: I have a string contains full HTML document (which is not an XML!!! see <hr> element inside). I need to have for example only BODY part as a jQuery object. Then I could append it to the corresponding part of my page. Here is an example of the string which I need to parse: <html> <head> <title>The resource cannot be found.</title> <style> body {font-family:"Verdana";font-weight:normal;font-size: .7em;color:black;} p {font-family:"Verdana";font-weight:normal;color:black;margin-top: -5px} // ... </style> </head> <body bgcolor="white"> <span><H1>Server Error in '/' Application.<hr width=100% size=1 color=silver></H1> <h2> <i>The resource cannot be found.</i> </h2></span> <font face="Arial, Helvetica, Geneva, SunSans-Regular, sans-serif "> <b> Description: </b>HTTP 404. The resource you are looking for ...bla bla.... <br><br> <b> Requested URL: </b>/ImportBPImagesInfos/Repository.svc/GetFullProfilimageSw<br><br> <hr width=100% size=1 color=silver> <b>Version Information:</b>&nbsp;Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.1 </font> </body> </html> <!-- [HttpException]: A public action method &#39;.... at System.Web.Mvc.Controller.HandleUnknownAction(String actionName) at System.Web.Mvc.Controller.ExecuteCore() at System.Web.Mvc.ControllerBase.Execute(RequestContext requestContext) at System.Web.Mvc.ControllerBase.System.Web.Mvc.IController.Execute(RequestContext requestContext) at System.Web.Mvc.MvcHandler.<>c__DisplayClass8.<BeginProcessRequest>b__4() at System.Web.Mvc.Async.AsyncResultWrapper.<>c__DisplayClass1.<MakeVoidDelegate>b__0() at System.Web.Mvc.Async.AsyncResultWrapper.<>c__DisplayClass8`1.<BeginSynchronous>b__7(IAsyncResult _) at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResult`1.End() at System.Web.Mvc.Async.AsyncResultWrapper.End[TResult](IAsyncResult asyncResult, Object tag) at System.Web.Mvc.Async.AsyncResultWrapper.End(IAsyncResult asyncResult, Object tag) at System.Web.Mvc.MvcHandler.EndProcessRequest(IAsyncResult asyncResult) at System.Web.Mvc.MvcHandler.System.Web.IHttpAsyncHandler.EndProcessRequest(IAsyncResult result) at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) -->

    Read the article

  • jQuery gallery scrolling effect with ease

    - by Sebastian Otarola
    So, I got this page from a friend and I think the gallery is amazingly done. Too bad it's in Flash ; http://selected.com/en/#/collection/homme/ Now, I'm trying to replicate the effect with jQuery. I've made all the loco searches on google one could think of. Zooming the picture is not a problem, the problem lies within the scrolling, how they come together at the ease part. I'm looking for solution in how to make the thumbnail animate when you scroll the page, they drag behind and infront of each other in a very subtle way - I've got (With a lot of help from Whirl3d in the jQuery-irc channel) this for the scrollup/down part of the mouse but the scrolling goes haywire; I Thought I post it here where I've come many times to get answers to a lot of questions and code-errors. This is my first post in stackoverflow and I know you guys are geniuses! Give it a shot! Thanks in advance! jQuery Part $(document).ready(function() { var fronts=$(".front"); var backs=$(".back"); var tempScrollTop, currentScrollTop = 0; $(document).scroll(function () { currentScrollTop = $(document).scrollTop(); if (tempScrollTop < currentScrollTop) { //Scroll down fronts.animate({marginTop:"-=100"},{duration:500, queue:false, easing:"easeOutBack"}); backs.animate({marginTop:"-=100"}, {duration:300, queue:false, easing:"easeOutBack"}); console.log('scroll down'); } else if (tempScrollTop > currentScrollTop) { //scroll up fronts.animate({marginTop:"+=100"},{duration:500, queue:false, easing:"easeOutBack"}); backs.animate({marginTop:"+=100"}, {duration:300, queue:false, easing:"easeOutBack"}); console.log('scroll up'); } tempScrollTop = currentScrollTop ;}) ;}); The HTML <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="http://www.paigeharvey.net/assets/js/jquery.easing.js"></script> <script type="text/javascript" src="gallery.js"></script> <title>Parallax testing image gallery</title> </head> <body> <div class="container"> <div class='box front'>First Group</div> <div class='box back'>First Group</div> <div class='box front'>First Group</div> <div class='box back'>First Group</div> <br style="clear:both"/> <div class='box front'>Second Group</div> <div class='box back'>Second Group</div> <div class='box front'>Second Group</div> <div class='box back'>Second Group</div> <br style="clear:both"/> <div class='box front'>Third Group</div> <div class='box back'>Third Group</div> <div class='box front'>Third Group</div> <br style="clear:both"/> </div> </body> And finally the CSS Part .container {margin: auto; width: 410px; border: 1px solid red;} .box.front{border: 1px solid red;background-color:Black;color:white;z-Index:500;} .box.back {border: 1px solid green;z-Index:300;background-color:white;} .box {float:left; text-align:center; width:100px; height:100px;}

    Read the article

  • ASP.NET gridview control in side update panel has a problem

    - by Eyla
    Greetings, I have gridview with SelectedIndexChanged event. when I click on a record in gridview it should call the SelectedIndexChanged event and do some operations. SelectedIndexChanged event is working OK, but when I put the gridview inside ajax updatepanle SelectedIndexChanged event will not response even if I add AsyncPostBackTrigger trigger for SelectedIndexChanged event. Please look at my code and advice me what I should do!! Thank you <%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="IMAM_APPLICATION.WebForm1" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <div id="mydiv"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <br /> <br /> <br /> <asp:GridView ID="GridView1" runat="server" style="position:absolute; top: 280px; left: 30px; height: 240px; width: 915px;" PageSize="5" onselectedindexchanged="GridView1_SelectedIndexChanged" AutoGenerateColumns="False" DataKeyNames="idcontact_info"> <Columns> <asp:CommandField ShowSelectButton="True" /> <asp:BoundField AccessibleHeaderText="Midle Name" DataField="Midle_Name" /> <asp:BoundField DataField="Last_Name" HeaderText="Last Name" /> <asp:BoundField DataField="Phone_home" HeaderText="Phone Home" /> <asp:BoundField DataField="cell_home" HeaderText="Mobile Home" /> <asp:BoundField DataField="phone_work" HeaderText="Phone Work" /> <asp:BoundField DataField="cell_Work" HeaderText="Mobile Work" /> <asp:BoundField DataField="Email_Home" HeaderText="Personal Home" /> <asp:BoundField DataField="Email_work" HeaderText="Work Email" /> </Columns> </asp:GridView> <br /> <br /> <br /></ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="GridView1" EventName="SelectedIndexChanged" /> </Triggers> </asp:UpdatePanel> <asp:RadioButton ID="rdoSearchFlat" runat="server" style="position:absolute; top: 565px; left: 70px;" Text="Flat Search" GroupName="Search"/> <asp:TextBox ID="txtSearch" runat="server" style="position:absolute; top: 560px; left: 170px;" ></asp:TextBox> <asp:Button ID="btnSearch" runat="server" Text="Search" style="position:absolute; top: 555px; left: 375px;" CausesValidation="False" onclick="btnSearch_Click"/> <asp:Label ID="Label7" runat="server" Style="position: absolute; top: 630px; left: 85px;" Text="First Name"></asp:Label> <asp:TextBox ID="txtFirstName" runat="server" Style="top: 630px; left: 185px; position: absolute; height: 22px; width: 128px"> </asp:TextBox> </div> </asp:Content>

    Read the article

  • AsyncPostBackTrigger Just flashing/flicking the UpdatePanel but not updating it

    - by Pankaj
    I am trying UpdatePanel & AsyncPostBackTrigger on master pages through find control method but problem is when I click on button (UpdateButton) It just flash/flick (No Postback) the UpdatePanle but still it don't update or refresh the gridview (images) inside the updatePanel. I have placed script Manger on the master page & an AJAX Update panel in a ContentPlaceHolder in the child page. Also, in another ContentPlaceholder there is an asp button (outside of the UpdatePanel). I want to refresh/reload the AJAX UpdatePanel with this asp button. Thanks for suggestions. Child Page Code :- protected void Page_Load(object sender, EventArgs e) { ScriptManager ScriptManager1 = (ScriptManager)Master.FindControl("ScriptManager1"); ContentPlaceHolder cph = (ContentPlaceHolder)Master.FindControl("cp_Button"); Button btnRefresh = (Button)cph.FindControl("btnRefresh"); ScriptManager1.RegisterAsyncPostBackControl(btnRefresh); } protected void btnRefresh_Click(object sender, EventArgs e) { UpdatePanel1.Update(); } <%@ Page Title="" Language="C#" MasterPageFile="~/InnerMaster.master" AutoEventWireup="true" CodeFile="A.aspx.cs" Inherits="A" Async="true" %> <asp:Content ID="Content3" ContentPlaceHolderID="MainContent" Runat="Server"> <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server"> <ContentTemplate> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="id" DataSourceID="SqlDataSource1"> <Columns> <asp:TemplateField> <ItemTemplate> <asp:Image ID="img12" runat="server" Width="650px" Height="600" ToolTip="A" ImageUrl='<%# Page.ResolveUrl(string.Format("~/Cli/{0}", Eval("image"))) %>' /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </ContentTemplate> </asp:UpdatePanel> </asp:Content> <asp:Content ID="Content4" ContentPlaceHolderID="cp_Button" Runat="Server"> <asp:Button ID ="btnRefresh" runat="server" onclick="btnRefresh_Click" Height="34" Width="110" Text="More Images" /> </asp:Content> Hi updated code :- Now on click event whole pages is refreshed. using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; namespace EProxy { public class EventProxy : Control, IPostBackEventHandler { public EventProxy() { } public void RaisePostBackEvent(string eventArgument) { } public event EventHandler<EventArgs> EventProxied; protected virtual void OnEventProxy(EventArgs e) { if (this.EventProxied != null) { this.EventProxied(this, e); } } public void ProxyEvent(EventArgs e) { OnEventProxy(e); } } } On Master Page Code (btn click):- protected void btnRefresh_Click(object sender, EventArgs e) { ContentPlaceHolder cph = (ContentPlaceHolder)this.FindControl("MainContent"); EventProxy eventProxy = (EventProxy)cph.FindControl("ProxyControl") as EventProxy; eventProxy.ProxyEvent(e); } Web Config :- <pages maintainScrollPositionOnPostBack="true" enableViewStateMac="true"> <controls> <add tagPrefix="it" namespace="EProxy" assembly="App_Code"/> </controls> </pages>

    Read the article

  • input in table > td, But yet extra bottom spacing between rows! Internet Explorer

    - by phpExe
    Im using meyer css reset. But I have problem with input in a table. There in extra space between rows: <table class="table" cellpadding="0" cellspacing="0" border="0"> <tr> <td>&nbsp;</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> </tr> <tr> <td>1</td> <td><input type="text"/></td> <td><input type="text"/></td> <td><input type="text"/></td> <td><input type="text"/></td> <td><input type="text"/></td> <td><input type="text"/></td> <td><input type="text" class="black"/></td> <td><input type="text"/></td> <td><input type="text"/></td> <td><input type="text"/></td> </tr> <tr> <td>2</td> <td><input type="text" /></td> <td><input type="text"/></td> <td><input type="text"/></td> <td><input type="text"/></td> <td><input type="text"/></td> <td><input type="text"/></td> <td><input type="text"/></td> <td><input type="text" class="black"/></td> <td><input type="text"/></td> <td><input type="text"/></td> </tr> </table> and css: .table { border-collapse: collapse; border-spacing: 0px; } .table tr { margin-bottom:0; overflow:hidden; height:25px; width: 100%; padding:0; } .table input { width:25px; height:25px; border:1px solid #000; text-align:center; } .black { background:#000; } Why there is extra bottom spacing in internet explorer (I hate ie :(()? Thanks alot

    Read the article

  • swap a div to an embed form when user tweets using the @anywhere function box

    - by Jeff
    I'm using the @anywhere twitter function on the front page of my site (vocabbomb.com) and right now it works great to allow users to tweet straight away. Problem is, when they click tweet, it just reloads the twitter box, empty. I want it to load something new, like a "thank you, now fill in this email form" and show a mailchimp form. Ok so this is the @anywhere code currently working fine: <div id="tbox"></div> <script type="text/javascript"> twttr.anywhere(function (T) { T("#tbox").tweetBox({ height: 100, width: 400, defaultContent: " #vocabbomb", label: "Use the word foo in a tweet:", }); }); </script> So this is fine, and when the user writes a tweet, it just re-displays the twitter box. I understand there is a function that lets you specify stuff after the tweet is made: (example from http://dev.twitter.com/pages/anywhere_tweetbox) <div id="example-ontweet"></div> <script type="text/javascript"> twttr.anywhere(function (T) { T("#example-ontweet").tweetBox({ onTweet : function(plaintext, html) { console.log(plaintext); alert(html); } }); }); </script> Is this the best way to attempt this? Or do I need a function or something that changes what's in the div to something else? I want the mailchimp email form to show up after the tweet. It includes a ton of script and tags and starts like this: <!-- Begin MailChimp Signup Form --> <!--[if IE]> <style type="text/css" media="screen"> #mc_embed_signup fieldset {position: relative;} #mc_embed_signup legend {position: absolute; top: -1em; left: .2em;} </style> <![endif]--> <!--[if IE 7]> <style type="text/css" media="screen"> .mc-field-group {overflow:visible;} </style> <![endif]--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.validate.js"></script> <script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.form.js"></script> <div id="mc_embed_signup"> <form action="http://faresharenyc.us1.list-manage.com/subscribe/post?u=106b58b4751a007d826715754&amp;id=2fe6ba4e6a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" style="font: normal 100% Arial, sans-serif;font-size: 10px;"> ... So my attempt to just require it inside the function didn't work at all: <div id="tbox"></div> <script type="text/javascript"> twttr.anywhere(function (T) { T("#tbox").tweetBox({ height: 100, width: 400, defaultContent: " #vocabbomb", label: "Use the word foo in a tweet:", onTweet: function(plain, html){ <?php require_once('mailchimp.html'); ?> } }); }); </script> Nettuts had a brief discussion here: http://net.tutsplus.com/tutorials/javascript-ajax/using-twitters-anywhere-service-in-6-steps/ I am seeing now that the 'onTweet' function simply adds some text above the twitter box, but doesn't actually replace the entire twitter box. How do I do that? Is it possible? Thanks!

    Read the article

  • Imitate Google suggest with Ajax and php

    - by phil
    I want to imitate Google suggest with the following code, which means: step 1: When user types in search box, the query string will be processed by a server php file and query suggestion string is returned(using Ajax object). step 2:When user clicks on a query suggestion, it will fill into the search box (autocomplete). Step 1 is achieved while step 2 is not. I think the problem lies in the .click() method. My intention is to use .click() binding a onclick event to the dynamically created <li> element. Any idea? <script src="jquery-1.4.2.js"> </script> <style> #search,#suggest,ul,li{margin: 0; padding:0; width: 200px;} ul{ list-style-type: none;} .border{border: solid red 1px; } </style> <p>My first language is:</p> <input type="text" width="200px" id="search" onkeyup="main(this.value)" value="" /> <ul id="suggest"></ul> <script type="text/javascript"> function main(str) { //setup Ajax object var request=new XMLHttpRequest(); request.open("GET","language.php?q="+str,true) //core function request.onreadystatechange=function() { if ( request.readyState==4 && request.status==200) { if (str=="") {$('li').remove(); $('ul').removeClass('border');return;} $('li').remove(); array=request.responseText.split(","); for (i=0;i<array.length;i++) { //create HTML element of <li> $('#suggest').append($('<li>',{id: 'li'+i, html: array[i]})); //style ul $('ul').addClass('border'); //I THINK HERE IS THE PROBLEM! $('li'+i).click(function(){ $("#search").html(array[i]);}); } } } request.send(); } </script> PHP: <?php $q=$_GET[q]; $a[]='english'; $a[]='chinese'; $a[]='japanese'; $a[]='eeeeee'; //lookup all hints from array if length of q>0 if (strlen($q) > 0) { $hint=""; for($i=0; $i<count($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if ($hint=="") { $hint=$a[$i]; } else { $hint=$hint." , ".$a[$i]; } } } } // Set output to "no suggestion" if no hint were found // or to the correct values if ($hint == "") { $response="no suggestion"; } else { $response=$hint; } //output the response echo $response; ?>

    Read the article

  • how to make css submenu stay put when subpage has been selected.

    - by Ronedog
    I have a css horizontal menu with a menu / submenu display working on the hover, but I would also like to make the submenu options stay put when I've selected that page. The code below shows the submenu on hover, but goes away on mouse out. I'm having some difficulty figuring out how to make my code work to keep the submenu items staying put? How can I do this? Thanks for your help. Here's the HTML: <ul id="menu_nav"> <li> <a href="#" class="button">Home</a> <span> <a href="#">Home Link1</a> <a href="#">Home Link2</a> <a href="#">Home Link3</a> </span> </li> <li> <a href="#" class="button">About Us</a> <span> <a href="#">About Link1</a> <a href="#">About Link2</a> <a href="#">About Link3</a> </span> </li> </ul> Here's the CSS ul#menu_nav { position:relative; float:left; width:790px; padding:0; margin:0; list-style-type:none; background-color:#000099; } ul#menu_nav li {float: left; margin: 0; padding: 0; border-right: 1px solid #555;} ul#menu_nav li a.button { float:left; text-decoration:none; color:white; background-color:#000099; padding:0.2em 0.6em; border-right:1px solid #CCCCCC; font-family: Tahoma; font-size: 11px; font-style: normal; font-weight: bold; position: relative; height: 21px; line-height:1.85em; } ul#menu_nav li a:hover { background-color:#F7F7F7; color:#000099; border-top:1px solid #CCCCCC; } ul#menu_nav li span{ float: left; padding: 15px 0; position: absolute; left: 0; top:25px; display: none; /*--Hide by default--*/ width: 790px; background: #F7F7F7; color: #fff; } ul#menu_nav li:hover span { display: block; } /*--Show subnav on hover--*/ ul#menu_nav li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/ ul#menu_nav li span a:hover {text-decoration: underline;} Heres the jquery: $("ul#menu_nav li").hover(function() { //Hover over event on list item $(this).css({ 'background' : '#1376c9'}); //Add background color and image on hovered list item $(this).find("span").show(); //Show the subnav } , function() { //on hover out... $(this).css({ 'background' : 'none'}); //Ditch the background $(this).find("span").hide(); //Hide the subnav });

    Read the article

< Previous Page | 320 321 322 323 324 325 326 327 328 329 330 331  | Next Page >