Search Results

Search found 2033 results on 82 pages for 'absolute'.

Page 75/82 | < Previous Page | 71 72 73 74 75 76 77 78 79 80 81 82  | Next Page >

  • jQuery dialog box, php form.

    - by tony noriega
    i have a dialog box that opens on pageload for a site. script type="text/javascript"> $(function() { $('#dialog-message').dialog({ modal: 'true', width: '400' }); }); </script> this pulls up an include: <div id="dialog-message" title="Free Jiu Jitsu Session at Alliance"> <!--#include virtual="/includes/guest.php" --> guest.php has a very small form that is processed by the page itself: <?php $dbh=mysql_connect //login stuff here if (isset($_POST['submit'])) { if (!$_POST['name'] | !$_POST['email']) { echo"<div class='error'>Error<br />Please provide your Name and Email Address so we may properly contact you.</div>"; } else { $age = $_POST['age']; $name = $_POST['name']; $gender = $_POST['gender']; $email = $_POST['email']; $phone = $_POST['phone']; $comments = $_POST['comments']; $query = "INSERT INTO table here (age,name,gender,email,phone,comments) VALUES ('$age','$name','$gender','$email','$phone','$comments')"; mysql_query($query); mysql_close(); $yoursite = "my site here"; $youremail = $email; $subject = "Website Guest Contact Us Form"; $message = "message here"; $email2 = "send to email address"; mail($email2, $subject, $message, "From: $email"); echo"<div class='thankyou'>Thank you for contacting us,<br /> we will respond as soon as we can.</div>"; } } ?> <form id="contact_us" class="guest" method="post" action="/guest.php" > <fieldset> <legend>Personal Info</legend> <label for="name" class="guest">Name:</label> <input type="text" name="name" id="name" value="" /><br> <label for="phone" class="guest">Phone:</label> <input type="text" name="phone" id="phone" value="" /><br> <label for="email" class="guest">Email Address:</label> <input type="text" name="email" id="email" value="" /><br> <label for="age" class="guest">Age:</label> <input type="text" name="age" id="age" value="" size="2" /><br> <label for="gender" class="guest">Sex:</label> <input type="radio" name="gender" value="male" /> Male <input type="radio" name="gender" value="female" /> Female<br /> </fieldset> <fieldset> <legend>Comments</legend> <label for="comments" class="guest">Comments / Questions:</label> <textarea id="comments" name="comments" rows="4" cols="22"></textarea><br> <input type="submit" value="Submit" name="submit" /> <input type="Reset" value="Reset" /> </fieldset> </form> Problem is, that the path of the form action does not work, becasue this dialog box is on the index.html page of the site, and if i put the absolute path, it doesnt process... i have this functioning on another contact us page, so i know it works, but wit the dialog box, it seems to have stumped me... what should i do?

    Read the article

  • css & horizontal scrolling

    - by zen
    One of my most favorite websites is that of the Oxford Hotel in Romania. I like the simplicity of the site and how it flows. I am trying to create a similar scrolling effect using jquery and I've been somewhat successful to a point. My trouble is with css... I am not a wizard in that department. Anyway,...my questions! 1. How can I first make sure that the ".box" class will be in the center of the page when the corresponding link is clicked? Right now it positions itself on the left. 2. Then, how can I tweak this code so that the user only can see the width of the screen and not the browser scroller/the rest of my ".box" divs? Refer to the oxford link if you need to see an example of what I'd like to achieve. This is a portion of my current CSS. body { background: #f2f2f2; text-align:left; color:#666; font-size:14px; font-family:georgia, 'time new romans', serif; margin:0 auto; padding:0; } #menu { background: #333333; position: fixed; top: 0px; left: 0; border: 1px solid #000; clear: both; float: left; font-family: helvetica, sans-serif; font-size: 18px; text-transform: uppercase; margin: 0; padding: 18px; z-index: 500; filter: alpha(opacity=75); opacity: .75; } #menu ul{ list-style-type: none; margin: 0; padding: 0; } #menu ul li{ list-style-type: none; color: #777; display: inline; margin: 0; padding: 0 10px 0 10px; } #menu ul li a{ text-decoration: none; list-style-type: none; color: #777; display: inline; margin: 0; padding: 0; } #menu ul li a:hover{ text-decoration: none; list-style-type: none; color: #fff; display: inline; margin: 0; padding: 0; } #container { position: absolute; top: 120px; width: 70000px; margin: 0; padding: 0; } .box { background: white; border: 3px dashed #f2f2f2; width: 600px; float: left; font-size: 10px; line-height: 15px; margin: 0; padding: 5px 30px 30px 30px; }

    Read the article

  • .animate question/help

    - by Josh
    So, I've built this navigation bar so far and I'm curious if it's even possible to achieve what I'm thinking. Currently, when you hover over each of the links they drop down (padding is increased). Now, what I'm curious in doing is if you hover over say "test1", test2-4 also drop with it but in the padding that has been created from the drop down, "test1" information shows up. Allowing the user to click or read whatever information is in there. Also, if the user would like to, they can move their mouse to test2 and everything would animate (opacity, this I can do I think) to whatever is in the test2 field, test3 doing the same and so on. I haven't had much success with this, I've created a completely separate panel before, but that didn't exactly work or I wasn't doing it correctly. Here is what I've been working on, ANY help would be appreciated! Thanks! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function() { $("#nav li > a").hover(function() { $(this).stop().animate({paddingTop: "100px"}, 100); }, function() { $(this).stop().animate({paddingTop: "10px"}, 200); }); }); </script> <style type="text/css"> #nav { position: absolute; top: 0; left: 60px; padding: 0; margin: 0; list-style: none; } #nav li { display: inline; } #nav li a { float: left; display: block; color: #555; text-decoration: none; padding: 10px 30px; background-color: #d1d1d1; border-top: none; } </style> </head> <body> <div id="wrap"> <ul id="nav"> <li><a href="">test1</a></li> <li><a href="">test2</a></li> <li><a href="">test3</a></li> <li><a href="">test4</a></li> </ul> </div> </body> </html>

    Read the article

  • Working on a jQuery plugin : viewport simulator

    - by pixelboy
    Hi community, i'm working on a jQuery plugin that's aiming to simulate one axis camera movements. The first step to achieving this is simple : use conventional, clean markup, and get the prototype to work. Heres how to initiate the plugin : $('#wrapper').fluidGrids({exclude: '.exclude'}); Here's a working demo of the WIP thing : http://sandbox.test.everestconseil.com/protoCitroen/home.html Where am I having issues : Is there a fast way to detect if parent of each target (clickable animated element) is a href link, and if so to save this url ? My clone uses the original background image to then animate it.fade it to black/white. But when you clik on an element, image url is found, but doesn't seem to be injected. Do you see anything ? Finally, about animation of elements : as you can see in source code, I'm using the container $('#wrapper') to position all animated children. What would be the perfect properties to apply to make this cross browser proof ? Here's the source code for the plugin, fully commented. (function($){ $.fn.extend({ //plugin name - fluidGrids fluidGrids: function(options) { //List and default values for available options var defaults = { //The target that we're going to use to handle click event hitTarget: '.animateMe', exclude: '.exclude', animateSpeed: 1000 }; var options = $.extend(defaults, options); return this.each(function() { var o = options; //Assign current element to variable var obj = $(this); //We assign default width height and positions to each object in order to get them back when necessary var objPosition = obj.position(); //Get all ready to animate targets in innerViewport var items = $(o.hitTarget, obj); //Final coords of innerViewport var innerViewport = new Object(); innerViewport.top = parseInt(objPosition.top); innerViewport.left = parseInt(objPosition.left); innerViewport.bottom = obj.height(); innerViewport.right = obj.width(); items.each(function(e){ //Assign a pointer cursor to each clickable element $(this).css("cursor","pointer"); //To load distant url at last, we look for it in Title Attribute if ($(this).attr('title').length){ var targetUrl = $(this).attr('title'); } //We assign default width height and positions to each object in order to get them back when necessary var itemPosition = $(this).position(); var itemTop = itemPosition.top; var itemLeft = itemPosition.left; var itemWidth = $(this).width(); var itemHeight = $(this).height(); //Both the original and it's animated clone var original = $(this); //To give the if (original.css('background-image')){ var urlImageOriginal = original.css('background-image').replace(/^url|[("")]/g, ''); var imageToInsert = "<img src="+urlImageOriginal+"/>" } var clone = $(this).clone(); original.click(function() { $(clone).append(imageToInsert); $(clone).attr("id","clone"); $(clone).attr('top',itemTop); $(clone).attr('left',itemLeft); $(clone).css("position","absolute"); $(clone).insertAfter(this); $(this).hide(); $(clone).animate({ top: innerViewport.top, left: innerViewport.left, width: innerViewport.bottom, height: innerViewport.right }, obj.animateSpeed); $("*",obj).not("#clone, #clone * , a , "+ o.exclude).fadeOut('fast'); //Si l'objet du click est un lien return false; }); }); }); } }); })(jQuery);

    Read the article

  • Animated background image in a hidden <div> doesn't load or loads not animated

    - by Guanche
    Hello, I have spent the whole day trying to make a script which on "submit" hides the form and shows hidden with animated progress bar. The problem is that Internet Explorer doesn't show animated gif images in hidden divs. The images are static. I visited many websites and found a script which uses: document.getElementById(id).style.backgroundImage = 'url(/images/load.gif)'; Finally, my script works in Internet Explorer, Firefox, Opera but... Google Chrome doesn't display the image at all. I see only div text. After many tests I discovered the following: the only way to see the background image in Google Chrome is to include the same image somewhere in the page (outside of hidden div) with 1px dimensions: <img src="/images/load.gif" width="1" heigh="1" /> This did the trick but... after this dirty solution Microsoft Explorer for some reason shows the image as static again. So, my question is: is there any way how to force Gogle Chrome to show the image? Thanks. This is my script: <script language="JavaScript" type="text/javascript"> function ver (id, elementId){ if (document.getElementById('espera').style.visibility == "visible") { return false; }else{ var esplit = document.forms[0]['userfile'].value.split("."); ext = esplit[esplit.length-1]; if (document.forms[0]['userfile'].value == '') { alert('Please select a file'); return false; }else{ if ((ext.toLowerCase() == 'jpg')) { document.getElementById(id).style.position = 'absolute'; document.getElementById(id).style.display = 'inline'; document.getElementById(id).style.visibility = "visible"; document.getElementById(id).style.backgroundImage = 'url(/images/load.gif)'; document.getElementById(id).style.height = "100px"; document.getElementById(id).style.backgroundColor = '#f3f3f3'; document.getElementById(id).style.backgroundRepeat = "no-repeat"; document.getElementById(id).style.backgroundPosition = "50% 50%"; var element; if (document.all) element = document.all[elementId]; else if (document.getElementById) element = document.getElementById(elementId); if (element && element.style) element.style.display = 'none'; return true; }else{ alert('This is not a jpg file'); return false; } } } } </script> <div id="frmDiv"> <form enctype="multipart/form-data" action="/upload.php" method="post" name="upload3" onsubmit="return ver('espera','frmDiv');"> <input type="hidden" name="max_file_size" value="4194304" /> <table border="0" cellspacing="1" cellpadding="2" width="100%"> <tr bgcolor="#f5f5f5"> <td>File (jpg)</td> <td> <input type="file" name="userfile" class="upf" /></td></tr> <tr bgcolor="#f5f5f5"> <td>&nbsp;</td> <td> <input class="upf2" type="submit" name="add" value="Upload" /> </td></tr></table></form> </div> <div id="espera" style="display:none;text-align:center;float:left;width:753px;">&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br /> &nbsp;<br />Please wait...<br />&nbsp; </div>

    Read the article

  • Internet Explorer percent based layout issue

    - by Tom
    Heya, My goal is to make a layout that is 200% width and height, with four containers of equal height and width (100% each), using no javascript as the bear minimum (or preferably no hacks). Right now I am using HTML5, and CSS display:table. It works fine in Safari 4, Firefox 3.5, and Chrome 5. I haven't tested it yet on older versions. Nonetheless, in IE7 and IE8 this layout fails completely. (I do use the Javascript HTML5 enabling script /cc../, so it should not be the use of new HTML5 tags) Here is what I have: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="UTF-8" /> <title>IE issue with layout</title> <style type="text/css" media="all"> /* styles */ @import url("reset.css"); /* Generall CSS */ .table { display:table; } .row { display:table-row; } .cell { display:table-cell; } /* Specific CSS */ html, body { //overflow:hidden; I later intend to limit the viewport } section#body { position:absolute; width:200%; height:200%; overflow:hidden; } section#body .row { width:200%; height:50%; overflow:hidden; } section#body .row .cell { width:50%; overflow:hidden; } section#body .row .cell section { display:block; width:100%; height:100%; overflow:hidden; } section#body #stage0 section header { text-align:center; height:20%; display:block; } section#body #stage0 section footer { display:block; height:80%; } </style> </head> <body> <section id="body" class="table"> <section class="row"> <section id="stage0" class="cell"> <section> <header> <form> <input type="text" name="q" /> <input type="submit" value="Search" /> </form> </header> <footer> <table id="scrollers"> </table> </footer> </section> </section> <section id="stage1" class="cell"> <section> content </section> </section> </section> <section class="row"> <section id="stage2" class="cell"> <section> content </section> </section> <section id="stage3" class="cell"> <section> content </section> </section> </section> </section> </body> </html> You can see it live here: http://www.tombarrasso.com/ie-issue/

    Read the article

  • Toggle KML Layers, Infowindow isnt working

    - by user1653126
    I have this code, i am trying to toggle some kml layers. The problem is that when i click the marker it isn't showing the infowindow. Maybe someone can show me my error. Thanks. Here is the CODE <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=IzaSyAvj6XNNPO8YPFbkVR8KcTl5LK1ByRHG1E&sensor=false"> </script> <script type="text/javascript"> var map; // lets define some vars to make things easier later var kml = { a: { name: "Productores", url: "https://maps.google.hn/maps/ms?authuser=0&vps=2&hl=es&ie=UTF8&msa=0&output=kml&msid=200984447026903306654.0004c934a224eca7c3ad4" } // keep adding more if you like }; // initialize our goo function initializeMap() { var options = { center: new google.maps.LatLng(13.324182,-87.080071), zoom: 8, mapTypeId: google.maps.MapTypeId.TERRAIN } map = new google.maps.Map(document.getElementById("map_canvas"), options); createTogglers(); }; google.maps.event.addDomListener(window, 'load', initializeMap); // the important function... kml[id].xxxxx refers back to the top function toggleKML(checked, id) { if (checked) { var layer = new google.maps.KmlLayer(kml[id].url, { preserveViewport: true, suppressInfoWindows: true }); // store kml as obj kml[id].obj = layer; kml[id].obj.setMap(map); } else { kml[id].obj.setMap(null); delete kml[id].obj; } }; // create the controls dynamically because it's easier, really function createTogglers() { var html = "<form><ul>"; for (var prop in kml) { html += "<li id=\"selector-" + prop + "\"><input type='checkbox' id='" + prop + "'" + " onclick='highlight(this,\"selector-" + prop + "\"); toggleKML(this.checked, this.id)' \/>" + kml[prop].name + "<\/li>"; } html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" + "Remove all layers<\/a><\/li>" + "<\/ul><\/form>"; document.getElementById("toggle_box").innerHTML = html; }; function removeAll() { for (var prop in kml) { if (kml[prop].obj) { kml[prop].obj.setMap(null); delete kml[prop].obj; } } }; // Append Class on Select function highlight(box, listitem) { var selected = 'selected'; var normal = 'normal'; document.getElementById(listitem).className = (box.checked ? selected: normal); }; </script> <style type="text/css"> .selected { font-weight: bold; } </style> </head> <body> <div id="map_canvas" style="width: 50%; height: 200px;"></div> <div id="toggle_box" style="position: absolute; top: 200px; right: 1000px; padding: 20px; background: #fff; z-index: 5; "></div> </body> </html>

    Read the article

  • using JQuery and Prototype in the same page; more explanation needed!

    - by xenogen
    Hi everybody! I'm continuously having the problem when i use jquery lightbox (which runs prototype) and jquery news slider. I tried the "noconflict" method. The problem is I don't know the exact place to put the code. So, here, i'm putting my scripts within . So, please troubleshoot it and explain me where to put the patch. thank you very much. <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Jquery</title> <script type="text/javascript" src="lb/js/prototype.js"></script> <script type="text/javascript" src="lb/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="lb/js/lightbox.js"></script> <link href="lb/css/lightbox.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="news/jquery-1.2.3.pack.js"></script> <script type="text/javascript" src="news/jquery.easynews.js"></script> <style> html { background-color: #FFA928; font: normal 76% "Arial", "Lucida Grande",Verdana, Sans-Serif; color:black; } a { text-decoration: none; font-weight: bold; } .news_style{ display:none; } .news_show { background-color: white; color:black; width:350px; height:150px; font: normal 100% "Arial", "Lucida Grande",Verdana, Sans-Serif; overflow: auto; } .news_border { background-color: white; width:350px; height:150px; font: normal 100% "Arial", "Lucida Grande",Verdana, Sans-Serif; border: 1px solid gray; padding: 5px 5px 5px 5px; overflow: auto; } .news_mark{ background-color:white ; font: normal 70% "Arial", "Lucida Grande",Verdana, Sans-Serif; border: 0px solid gray; width:361px; height:35px; color:black; text-align:center; } .news_title{ font: bold 120% "Arial", "Lucida Grande",Verdana, Sans-Serif; border: 0px solid gray; padding: 5px 0px 9px 5px; color:black; } .news_show img{ margin-left: 5px; margin-right: 5px; } .buttondiv { position: absolute; /*float: left;*/ /*top: 169px;*/ padding: 5px 5px 5px 5px; background-color:white ; border: 1px solid gray; /*border-top-color: white;*/ border-top:none; height:20px; } </style> <script> $(document).ready(function(){ var newsoption1 = { firstname: "mynews", secondname: "showhere", thirdname:"news_display", fourthname:"news_button", newsspeed:'6000' } $.init_news(newsoption1); var myoffset=$('#news_button').offset(); var mytop=myoffset.top-1; $('#news_button').css({top:mytop}); }); </script> </head>

    Read the article

  • Flex 4: Traversing the Stage More Easily

    - by Steve
    The following is a MXML Module I am producing in Flex 4: <?xml version="1.0" encoding="utf-8"?> <mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()" layout="absolute" width="100%" height="100%"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Style source="BMChartModule.css" /> <s:Panel id="panel" title="Benchmark Results" height="100%" width="100%" dropShadowVisible="false"> <mx:TabNavigator id="tn" height="100%" width="100%" /> </s:Panel> <fx:Script> <![CDATA[ import flash.events.Event; import mx.charts.ColumnChart; import mx.charts.effects.SeriesInterpolate; import mx.controls.Alert; import spark.components.BorderContainer; import spark.components.Button; import spark.components.Label; import spark.components.NavigatorContent; import spark.components.RadioButton; import spark.components.TextInput; import spark.layouts.*; private var xml:XML; private function init():void { var seriesInterpolate:SeriesInterpolate = new SeriesInterpolate(); seriesInterpolate.duration = 1000; xml = parentApplication.model.xml; var sectorList:XMLList = xml.SECTOR; for each(var i:XML in sectorList) { var ncLayout:HorizontalLayout = new HorizontalLayout(); var nc:NavigatorContent = new NavigatorContent(); nc.label = i.@NAME; nc.name = "NC_" + nc.label; nc.layout = ncLayout; tn.addElement(nc); var cC:ColumnChart = new ColumnChart(); cC.percentWidth = 70; cC.name = "CC"; nc.addElement(cC); var bClayout:VerticalLayout = new VerticalLayout(); var bC:BorderContainer = new BorderContainer(); bC.percentWidth = 30; bC.layout = bClayout; nc.addElement(bC); var bClabel:Label = new Label(); bClabel.percentWidth = 100; bClabel.text = "Select a graph to view it in the column chart:"; var dpList:XMLList = sectorList.(@NAME == i.@NAME).DATAPOINT; for each(var j:XML in dpList) { var rB:RadioButton = new RadioButton(); rB.groupName = "dp"; rB.label = j.@NAME; rB.addEventListener(MouseEvent.CLICK, rBclick); bC.addElement(rB); } } } private function rBclick(e:MouseEvent):void { var selectedTab:NavigatorContent = this.tn.selectedChild as NavigatorContent; var colChart:ColumnChart = selectedTab.getChildByName("CC") as ColumnChart; trace(selectedTab.getChildAt(0)); } ]]> </fx:Script> </mx:Module> I'm writing this function rBclick to redraw the column chart when a radio button is clicked. In order to do this I need to find the column chart on the stage using actionscript. I've currently got 3 lines of code in here to do this: var selectedTab:NavigatorContent = this.tn.selectedChild as NavigatorContent; var colChart:ColumnChart = selectedTab.getChildByName("CC") as ColumnChart; trace(selectedTab.getChildAt(0)); Getting to the active tab in the tabnavigator is easy enough, but then selectedTab.getChildAt(0) - which I was expecting to be the chart - is a "spark.skin.spark.SkinnableContainerSkin"...anyway, I can continue to traverse the tree using this somewhat annoying code, but I'm hoping there is an easier way. So in short, at run time I want to, with as little code as possible, identify the column chart in the active tab so I can redraw it. Any advice would be greatly appreciated.

    Read the article

  • Explain the Peak and Flag Algorithm

    - by Isaac Levin
    EDIT Just was pointed that the requirements state peaks cannot be ends of Arrays. So I ran across this site http://codility.com/ Which gives you programming problems and gives you certificates if you can solve them in 2 hours. The very first question is one I have seen before, typically called the Peaks and Flags question. If you are not familiar A non-empty zero-indexed array A consisting of N integers is given. A peak is an array element which is larger than its neighbours. More precisely, it is an index P such that 0 < P < N - 1 and A[P - 1] < A[P] A[P + 1] . For example, the following array A: A[0] = 1 A[1] = 5 A[2] = 3 A[3] = 4 A[4] = 3 A[5] = 4 A[6] = 1 A[7] = 2 A[8] = 3 A[9] = 4 A[10] = 6 A[11] = 2 has exactly four peaks: elements 1, 3, 5 and 10. You are going on a trip to a range of mountains whose relative heights are represented by array A. You have to choose how many flags you should take with you. The goal is to set the maximum number of flags on the peaks, according to certain rules. Flags can only be set on peaks. What's more, if you take K flags, then the distance between any two flags should be greater than or equal to K. The distance between indices P and Q is the absolute value |P - Q|. For example, given the mountain range represented by array A, above, with N = 12, if you take: two flags, you can set them on peaks 1 and 5; three flags, you can set them on peaks 1, 5 and 10; four flags, you can set only three flags, on peaks 1, 5 and 10. You can therefore set a maximum of three flags in this case. Write a function that, given a non-empty zero-indexed array A of N integers, returns the maximum number of flags that can be set on the peaks of the array. For example, given the array above the function should return 3, as explained above. Assume that: N is an integer within the range [1..100,000]; each element of array A is an integer within the range [0..1,000,000,000]. Complexity: expected worst-case time complexity is O(N); expected worst-case space complexity is O(N), beyond input storage (not counting the storage required for input arguments). Elements of input arrays can be modified. So this makes sense, but I failed it using this code public int GetFlags(int[] A) { List<int> peakList = new List<int>(); for (int i = 0; i <= A.Length - 1; i++) { if ((A[i] > A[i + 1] && A[i] > A[i - 1])) { peakList.Add(i); } } List<int> flagList = new List<int>(); int distance = peakList.Count; flagList.Add(peakList[0]); for (int i = 1, j = 0, max = peakList.Count; i < max; i++) { if (Math.Abs(Convert.ToDecimal(peakList[j]) - Convert.ToDecimal(peakList[i])) >= distance) { flagList.Add(peakList[i]); j = i; } } return flagList.Count; } EDIT int[] A = new int[] { 7, 10, 4, 5, 7, 4, 6, 1, 4, 3, 3, 7 }; The correct answer is 3, but my application says 2 This I do not get, since there are 4 peaks (indices 1,4,6,8) and from that, you should be able to place a flag at 2 of the peaks (1 and 6) Am I missing something here? Obviously my assumption is that the beginning or end of an Array can be a peak, is this not the case? If this needs to go in Stack Exchange Programmers, I will move it, but thought dialog here would be helpful. EDIT

    Read the article

  • set all nested li's to be width of widest li

    - by unhitched
    hey, How do I make nested li's the same width? When I use the below code each nested li is only as wide as it's text + margin. I'd like all of the li's to be as wide as the widest li under the parent ul. eg: <ul id="menu"> <li <a href="#" title="Menu a">Menu a</a></li> <li <a href="#" title="Menu b">Menu b</a></li> <li <a href="#" title="Nested Menu">Nested Menu</a> <ul> <li <a href="#" title="Menu Item">Menu Item</li> <li <a href="#" title="Long Menu Item">Long Menu Item</a></li> <li <a href="#" title="Longer Menu Item">Longer Menu Item</a></li> </ul> </li> <li <a href="#" title="Menu z">Menu z</a></li> </ul> with css: <style type="text/css" media="all"> * { padding:0; margin:0; } body, html { width: 100%; height: 100%; } #wrapper { width: 800px; height: 100%; margin: auto; } #menu { margin: 0 0 0 8px; padding: 0; font-size: 14px; font-weight: normal; } #menu ul { list-style-type:none; list-style-position:outside; position:relative; z-index:300; height: 32px; font-weight:bold; white-space: nowrap; padding:0; } #menu a {text-decoration:none; line-height: 32px; } #menu a:hover { } #menu li { float:left; position:relative; display: inline; height: 100%; list-style-type: none; padding: 0 20px; background: #ccc; } #menu ul { position:absolute; display:none; left:0px; background: #BDCCD4; width:100%; } #menu ul a, #menu li a { display: block; } #menu li ul { background: #BDCCD4; display:block; } #menu li ul a { font-weight: normal; height:auto; float:left; } #menu ul ul { padding: 0 9px; display:block; } #menu li ul li { padding: 0 9px; background: #BDCCD4; } #menu li:hover { background: #ddd; height: 32px; } #menu li li:hover, #menu li li li:hover { background: #ddd; height: 32px; } #menu li a:link, #menu li a:visited { text-decoration: none; color: #003E7E; margin: auto; }

    Read the article

  • Website Link Injection

    - by Ryan B
    I have a website that is fairly static. It has some forms on it to send in contact information, mailing list submissions, etc. Perhaps hours/days after an upload to the site I found that the main index page had new code in it that I had not placed there that contained a hidden bunch of links in a invisible div. I have the following code the handles the variables sent in from the form. <?php // PHP Mail Order to [email protected] w/ some error detection. $jamemail = "[email protected]"; function check_input($data, $problem='') { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); if ($problem && strlen($data) == 0) { die($problem); } return $data; } $email = check_input($_POST['email'], "Please input email address."); $name = check_input($_POST['name'], "Please input name."); mail($jamemail, "Mailing List Submission", "Name: " . $name . " Email: " .$email); header('Location: index.php'); ?> I have the following code within the index page to present the form with some Javascript to do error detection on the content of the submission prior to submission. <form action="sendlist.php" method="post" onSubmit="return checkmaill(this);"> <label for="name"><strong>Name: </strong></label> <input type="text" name="name"/><br /> <label for="email"><strong>Email: </strong></label> <input type="text" name="email"/><br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="Subscribe" style="width: 100px;"/> </form> At the end of the day, the source code where the injected hyperlinks is as follows: </body> </html><!-- google --><font style="position: absolute;overflow: hidden;height: 0;width: 0"> xeex172901 <a href=http://menorca.caeb.com/od9c2/xjdmy/onondaga.php>onondaga</a> <a href=http://menorca.caeb.com/od9c2/xjdmy/tami.php>tami</a> <a href=http://menorca.caeb.com/od9c2/xjdmy/shotguns.php>shotguns</a> <a href=http://menorca.caeb.com/od9c2/xjdmy/weir.php>weir</a> <a href=http://menorca.caeb.com/od9c2/xjdmy/copperhead.php>copperhead</a> <a href=http://menorca.caeb.com/od9c2/xjdmy/mpv.php>mpv</a> <a href=http://menorca.caeb.com/od9c2/xjdmy/brunei.php>brunei</a> <a href=http://menorca.caeb.com/od9c2/xjdmy/doreen.php>doreen</a>

    Read the article

  • ie9/CSS: Flyout menu not working in ie9, but looks great in Firefox/Chrome

    - by Brandon
    Please see this flyout menu: http://www.caseen.com/store.html. It looks amazing in both Firefox and Chrome, but not in IE9! Trying to see what is going on =(. It looks like ie9 is completing ignoring the stylesheet, but in error checking and clicking ie9 direct mode, it shows up however VERY ugly with huge nasty white borders around the links! Please see my code: <div class="flyout"> <ul> <!--START: CATEGORIES--> <!--START: CATEGORY_FORMAT--> <li><a href="view_category.asp?cat=CATID">&nbsp;CATEGORY</a> <!--END: CATEGORY_FORMAT--> <ul><!--START: SUB_CATEGORY_FORMAT--> <li><a href="view_category.asp?cat=CATID">&nbsp;CATEGORY</a></li> <!--END: SUB_CATEGORY_FORMAT--></ul> <!--END: CATEGORIES--> </li> </ul> </div> AND CSS .flyout { width: 130px; height: auto; position:relative; margin: -10 0; padding: 0; z-index:10000; } .flyout ul li a { display:block; text-decoration:none; color: #fff; width: 130px; border: solid; border-color: #000; border-width: 0 0 0 5px; text-align:left; font-size:12px; line-height: 25px; } .flyout ul { padding:0px; list-style-type: none; } .flyout ul li { float:left; margin-right:1px; position:relative; } .flyout ul li ul { display: none; } .flyout ul li:hover a { border: solid; border-color: #fff; border-width: 0 2 0 5px; color: #60dfe5; } .flyout ul li:hover ul { display:block; position:absolute; top:0; left:130px; width:10px; } .flyout ul li:hover ul li a.hide { background:#000; color:#fff; } .flyout ul li:hover ul li:hover a.hide {width:180px;} .flyout ul li:hover ul li ul {display: none;} .flyout ul li:hover ul li a { display:block; background:#000; color:#60dfe5; width:200px; } .flyout ul li:hover ul li a:hover { background:#000; color:#fff; } Thanks, Brandon

    Read the article

  • jquery-ui .draggable is not a function error

    - by niczoom
    I am getting the following error (using Firefox 3.5.9): $("#dragMe_" + myCount).draggable is not a function $("#dragMe_"+myCount).draggable({ containment: 'parent', axis: 'y' }); Line 231 http://www.liamharding.com/pgi/pgi.php Link to page in question : http://www.liamharding.com/pgi/pgi.php For example, click the 2 checkbox's 'R25 + R50 Random Walk' then click Show/Refresh Graphs. Two graphs should be displayed, both with draggable thin horizontal red lines. Re-open the options panel and de-select R50 Random Walk, now click Show/Refresh Graphs again, 1 graph is removed and the other updated; now re-select R50 Random Walk and click Show/Refresh, you will find the still checked R25 graph gets updated ok the above error occurs and i cant figure out why. Initially, when displaying the first 2 graphs it uses the same code and it works just fine. The error occurs on this line: //********* ERROR OCCURS HERE ********** $("#dragMe_"+myCount).draggable({ containment: 'parent', axis: 'y' }); Here is the code for the Show/Refresh Graphs.click() event: $("#btnShowGraphs").click(function(){ // Hide 'Options' panel (only if open AND an index is checked) if (IsOptionsPanelOpen && ($("#indexCheck:checked").length != 0)) {$('#optionImgDiv').click();}; var myCount = 0; var divIsNew = false; var gif_loader_small = '<div id="gif_loader_small"></div>'; var gif_loader_big = '<div id="gif_loader_big"></div>'; $("input:checkbox[id=indexCheck]").each(function() { if (this.checked) { // check for an existing wrapper div for the current forex item, using the current checkbox value (foxex name) if ( $("#"+this.value).length == 0 ) { console.log("New 'graphContainer' div : "+this.value); divIsNew = true; // Create new divs for graph image, drag bar and heading var $structure = " \ <li id=\""+this.value+"\" class=\"graphContainer\"> \ <div id=\"dragMe_"+myCount+"\" class=\"dragMe\"></div> \ <div id=\"image_"+myCount+"\" class=\"image\"></div> \ <div id=\"heading_"+myCount+"\" class=\"heading\"></div> \ </li> \ "; $('#graphResults').append($structure); // Hide dragMe DIV $('#dragMe_'+myCount).hide(); // Make 'dragMe' draggable div //********* ERROR OCCURS HERE ********** $("#dragMe_"+myCount).draggable({ containment: 'parent', axis: 'y' }); } // Display small loading gif $(gif_loader_small).clone().appendTo( $(this).parent() ); // Display large circular loading gif var $loader = $(gif_loader_big); // add temporary css attributes onto existing graph divs as they need to be displayed diffrently if(!divIsNew){ console.log("Reposition existing 'gif_loader_big' div"); $loader = $(gif_loader_big).css({ "position" : "absolute", "top" : "35%", "opacity" : ".85"}); } // add newly styled big-loader-gif to index div $loader.clone().prependTo( $("#"+this.value) ); // Call function to fetch image using ajax get_graph(this, myCount, divIsNew); } else { // REMOVE 'graphContainer' DIVS NOT CHECKED // check for div existance if ( $("#"+this.value).length != 0 ) { console.log("DESTROY: #dragMe_"+myCount+", REMOVE: #"+this.value); // DESTROY draggable //$("#dragMe_"+myCount).draggable("destroy"); // remove div $("#"+this.value).remove(); } } // reset counters and other variables myCount++; divIsNew = false; console.log("Complete: "+this.value+", NEXT index"); }); });

    Read the article

  • How to get dropdown menu to open/close on click rather than hover?

    - by TankDriver
    Hello! I am very new to java and ajax/jquery and have been working on trying to get a script to open and close the drop menu on click rather that hover. The menu in question is found on http://www.gamefriction.com/Coded/ and is the dark menu on the right side under the header. I would like it to open and close like the other menu that is further below it (it is light gray and is in the "Select Division" module). The gray menu is part of a menu and the language menu is not. I have a jquery import as well which can be found in the view source of the above link. My Java: <script type="text/javascript"> /* Language Selector */ $(function() { $("#lang-selector li").hover(function() { $('ul:first',this).css('display', 'block'); }, function() { $('ul:first',this).css('display', 'none'); }); }); $(document).ready(function(){ /* Navigation */ $('.subnav-game').hide(); $('.subnav-game:eq(0)').show(); $('.preorder-type').hide(); $('.preorder-type:eq(3)').show(); }); </script> My CSS: #lang-selector { font-size: 11px; height: 21px; margin: 7px auto 17px auto; width: 186px; } #lang-selector span { color: #999; float: left; margin: 4px 0 0 87px; padding-right: 4px; text-align: right; } #lang-selector ul { float: left; list-style: none; margin: 0; padding: 0; } #lang-selector ul li a { padding: 3px 10px 1px 10px; } #lang-selector ul, #lang-selector a { width: 186px; } #lang-selector ul ul { display: none; position: absolute; } #lang-selector ul ul li { border-top: 1px solid #666; float: left; position: relative; } #lang-selector a { background: url("http://www.gamefriction.com/Coded/images/language_bg.png") no-repeat; color: #666; display: block; font-size: 10px; height: 17px; padding: 4px 10px 0 10px; text-align: left; text-decoration: none; width: 166px; } #lang-selector ul ul li a { background: #333; color: #999; } #lang-selector ul ul li a:hover { background: #c4262c; color: #fff; } My HTML: <div id="lang-selector"> <ul> <li> <a href="#">Choose a Language</a> <ul> <li><a href="?iw_lang=en">English</a></li> <li><a href="?iw_lang=de">Deutsch</a></li> <li><a href="?iw_lang=es">Espa&ntilde;ol</a></li> <li><a href="?iw_lang=fr">Fran&ccedil;ais</a></li> <li><a href="?iw_lang=it">Italiano</a></li> </ul> </li> </ul> </div> Thanks!

    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

  • 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

  • Java Applet Deployment, ClassNotFoundException (primary class)

    - by Matt
    This is driving me up the wall. I have checked and rechecked spelling and paths. I have tried just about every combination of paths, including relative, absolute, and full http paths. I continue to get the following error when trying to load a Java applet: java.lang.ClassNotFoundException: AppletClient.class at sun.plugin2.applet.Applet2ClassLoader.findClass(Unknown Source) at java.lang.ClassLoader.loadClass(Unknown Source) at java.lang.ClassLoader.loadClass(Unknown Source) at sun.plugin2.applet.Plugin2ClassLoader.loadCode(Unknown Source) at sun.plugin2.applet.Plugin2Manager.createApplet(Unknown Source) at sun.plugin2.applet.Plugin2Manager$AppletExecutionRunnable.run(Unknown Source) at java.lang.Thread.run(Unknown Source) Exception: java.lang.ClassNotFoundException: AppletClient.class The HTML used to load the applet: <applet width="100" height="100" archive="applet/myapplet.jar, applet/applet_dependency.jar" code="AppletClient.class"> <param value="blahblah" name="username"> <param value="false" name="codebase_lookup"> </applet> The applet is in a relative directory, "applet", from the path of the current page. I have unzipped the jar file and can see AppletClient.class. Also, in the source of the project, it is spelled that way (casing and all). I have tried with/without the parameters. I have changed the names of the archive jars in the applet include tag just to see if I get a different error for bad file names (same error). I have manually done GETs on the jars to make sure the server is responding to the requests (it is). I have tried with and without the codebase tag, with all different varieties of paths (start getting bad "magic number" errors on those). I know that this error sometimes pops up when a dependency fails to load, so it can be misleading, but all dependencies are present, accounted for, and are fetchable via manual GETs. Between each and every attempt I always clear my cache in FireFox. These problems are reproduced in IE8 and Chrome as well. Per my Java Console from the browser, I am running Java Plug-in 1.6.0_20. This is from the same machine that I develop the applet on, which runs fine via Eclipse. Finally, I kicked on Fiddler2, and I don't see a single request for the jar files anywhere The host site is running from my Visual Studio debugger, so it's running on localhost. But I see the requests for all the other resources on Fiddler. Just... no Jars. ANYWHERE. I clear the log, cleared my browser cache, and did a ctrl-R refresh. And still, not a single Jar request on the Fiddler log. I even did a delayed write (with JS) of the applet tag after the page loaded, once all the Fiddler activity slowed down. The element gets written to the document (and I can see the 100x100 Java error window), but not a single request shows up on Fiddler. Any suggestions, before I go crawl into the corner and cry myself to sleep? EDIT: From the Java console, if I hit "l" (el) to "dump classloader list", I see something that looks like this: Live entry: key=http://localhost:55446/BaseWebSite/,http://localhost:55446/BaseWebSite/applet/myappliet.jar, http://localhost:55446/BaseWebSite/applet/applet_dependency.jar, refCount=1, threadGroup=sun.plugin2.applet.Applet2ThreadGroup[name=http://localhost:55446/BaseWebSite/-threadGroup,maxpri=4]

    Read the article

  • RackSpace Cloud Strips $_SESSION if URL Has Certain File Extensions

    - by macinjosh
    The Situation I am creating a video training site for a client on the RackSpace Cloud using the traditional LAMP stack (RackSpace's cloud has both Windows and LAMP stacks). The videos and other media files I'm serving on this site need to be protected as my client charges money for access to them. There is no DRM or funny business like that, essentially we store the files outside of the web root and use PHP to authenticate user's before they are able to access the files by using mod_rewrite to run the request through PHP. So let's say the user requests a file at this URL: http://www.example.com/uploads/preview_image/29.jpg I am using mod_rewrite to rewrite that url to: http://www.example.com/files.php?path=%2Fuploads%2Fpreview_image%2F29.jpg Here is a simplified version of the files.php script: <?php // Setups the environment and sets $logged_in // This part requires $_SESSION require_once('../../includes/user_config.php'); if (!$logged_in) { // Redirect non-authenticated users header('Location: login.php'); } // This user is authenticated, continue $content_type = "image/jpeg"; // getAbsolutePathForRequestedResource() takes // a Query Parameter called path and uses DB // lookups and some string manipulation to get // an absolute path. This part doesn't have // any bearing on the problem at hand $file_path = getAbsolutePathForRequestedResource($_GET['path']); // At this point $file_path looks something like // this: "/path/to/a/place/outside/the/webroot" if (file_exists($file_path) && !is_dir($file_path)) { header("Content-Type: $content_type"); header('Content-Length: ' . filesize($file_path)); echo file_get_contents($file_path); } else { header('HTTP/1.0 404 Not Found'); header('Status: 404 Not Found'); echo '404 Not Found'; } exit(); ?> The Problem Let me start by saying this works perfectly for me. On local test machines it works like a charm. However once deployed to the cloud it stops working. After some debugging it turns out that if a request to the cloud has certain file extensions like .JPG, .PNG, or .SWF (i.e. extensions of typically static media files.) the request is routed to a cache system called Varnish. The end result of this routing is that by the time this whole process makes it to my PHP script the session is not present. If I change the extension in the URL to .PHP or if I even add a query parameter Varnish is bypassed and the PHP script can get the session. No problem right? I'll just add a meaningless query parameter to my requests! Here is the rub: The media files I am serving through this system are being requested through compiled SWF files that I have zero control over. They are generated by third-party software and I have no hope of adding or changing the URLs that they request. Are there any other options I have on this? Update: I should note that I have verified this behavior with RackSpace support and they have said there is nothing they can do about it.

    Read the article

  • How to overlay a div (or any element) over a table row (tr)?

    - by slolife
    I'd like to overlay a div (or any element that'll work) over a table row (tr tag) that happens to have more than one column. I have tried a few methods, which don't seem to work. I've posted my current code below. I do get an overlay, but not directly over just the row. I tried setting the overlay top to $divBottom.css('top'), but that is always 'auto'. So, am I on the right track, or is there a better way of doing it? Utilizing jQuery is fine as you can see. If I am on the right track, how do I get the div placed correctly? Is the offsetTop an offset in the containing element, the table, and I need to do some math? Any other gotchas I'll run into with that? <html> <head> <title>Overlay Tests</title> <style> #rowBottom { outline:red solid 2px } #divBottom { margin:1em; font-size:xx-large; position:relative; } #divOverlay { background-color:Silver; text-align:center; position:absolute; z-index:10000; opacity:0.5; } </style> </head> <body> <p align="center"><a id="lnkDoIt" href="#">Do it!</a></p> <table width="100%" border="0" cellpadding="10" cellspacing="3" style="position:relative"> <tr> <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></td> </tr> <tr id="rowBottom"> <td><div id="divBottom"><p align="center">This is the bottom text</p></div></td> </tr> <tr> <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></td> </tr> </table> <div id="divOverlay" style=""><p>This is the overlay div.</p><p id="info"></p></div> <script src="../includes/javascript/jquery/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#lnkDoIt').click(function() { var $divBottom = $('#rowBottom'); var $divOverlay = $('#divOverlay'); var bottomTop = $divBottom.attr('offsetTop'); var bottomLeft = $divBottom.attr('offsetLeft'); var bottomWidth = $divBottom.css('width'); var bottomHeight = $divBottom.css('height'); $divOverlay.css('top', bottomTop); $divOverlay.css('left', bottomLeft); $divOverlay.css('width', bottomWidth); $divOverlay.css('height', bottomHeight); $('#info').text('Top: ' + bottomTop + ' Left: ' + bottomLeft); }); }); </script> </body> </html>

    Read the article

  • find style attribute using jquery

    - by Rubans
    HI, I want to find all input elements in a HTML string that has display not set to none. I have tried with JQuery and it doesn't seem to like looking for in the style attribute. Any ideas? I have the following HTML: <SPAN style="DISPLAY: none">4B holdings AG</SPAN><SPAN dropdownCell="onShowInvestorDropDown(ele, currentText)"></SPAN><INPUT style="DISPLAY: none" value="4B holdings AG" name=potbookgrid$ctl00$ctl08$ctl02> <DIV id=investorComboBoxPC> <DIV class="RadComboBox RadComboBox_Default" id=ctl02 style="DISPLAY: inline; WIDTH: 416px; ZOOM: 1" value="4B holdings AG"> <TABLE style="BORDER-TOP-WIDTH: 0px; TABLE-LAYOUT: fixed; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px" cellSpacing=0 cellPadding=0 summary=combobox border=0> <TBODY> <TR> <TD class="rcbInputCell rcbInputCellLeft" style="MARGIN-TOP: -1px; MARGIN-BOTTOM: -1px; WIDTH: 100%"><INPUT class=rcbInput id=ctl02_Input style="DISPLAY: block" value="4B holdings AG" name=ctl02 autocomplete="off" jQuery1276253231647="1"></TD> <TD class="rcbArrowCell rcbArrowCellRight rcbArrowCellHidden" style="MARGIN-TOP: -1px; MARGIN-BOTTOM: -1px"><A id=ctl02_Arrow style="DISPLAY: block; OVERFLOW: hidden; POSITION: relative; outline: none">select</A></TD></TR></TBODY></TABLE> <DIV class=rcbSlide style="Z-INDEX: 6000"><IFRAME style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; FILTER: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0); LEFT: 0px; BORDER-LEFT: 0px; WIDTH: 0px; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 0px" tabIndex=-1 src="javascript:'';" frameBorder=0>Your browser does not support inline frames or is currently configured not to display inline frames.</IFRAME> <DIV class="RadComboBoxDropDown RadComboBoxDropDown_Default " id=ctl02_DropDown style="DISPLAY: none; FLOAT: left; WIDTH: 416px"> <DIV class=rcbHeader id=ctl02_Header> <TABLE style="TABLE-LAYOUT: fixed"> <TBODY> <TR> <TD width=60>Investor Code</TD> <TD width=150>Investor Name</TD> <TD width=90>City</TD> <TD width=100>Country</TD></TR></TBODY></TABLE></DIV> <DIV class="rcbScroll rcbWidth" style="WIDTH: 100%" jQuery1276253231647="2"></DIV></DIV></DIV><INPUT id=ctl02_ClientState type=hidden value='{"logEntries":[],"value":"","text":"4B holdings AG","enabled":true}' name=ctl02_ClientState autocomplete="off"> </DIV></DIV>

    Read the article

  • Why is the dropdown menu aligned to the left?

    - by fmz
    I am working on a dropdown navigation for a site and am having some trouble with the dropdown portion aligning with the parent category - it shifts all the way to the left. Here is the html: <ul class="dropdown"> <li><a href="#" id="home">Home</a></li> <li><a href="#" id="about">About Us</a> <ul class="sub-menu"> <li><a href="#">Our History</a></li> <li><a href="#">Our Process</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Financing</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Subcontractors</a></li> </ul> </li> <li><a href="#" id="personal">Personal Banking</a></li> <li><a href="#" id="commercial">Commercial Banking</a></li> <li><a href="#" id="service">Customer Service</a> <ul class="sub-menu"> <li><a href="#">Our History</a></li> <li><a href="#">Our Process</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Financing</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Subcontractors</a></li> </ul> </li> <li><a href="#" id="investors">Investor Relations</a></li> <li><a href="#" id="contact">Contact Us</a></li> </ul> Here is the CSS: ul.dropdown { position: relative; background: #4e8997; height: 40px; padding-left: 5px; } ul.dropdown li { float: left; zoom: 1; } ul.dropdown li a { display: block; margin-top: 5px; padding: .5em .6em; color: #fff; font: bold 14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; text-transform: uppercase; border: none; } ul.dropdown a:hover { background-color: #c29c5d; color: #fff; } ul.dropdown a:active { background-color: #c29c5d; color: #fff; } /* LEVEL TWO */ ul.dropdown ul { width: 200px; visibility: hidden; position: absolute; top:100%; left: 0; } ul.dropdown ul li { font: 13px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; border-bottom: 1px solid #ccc; float: none; color: #fff; background-color: #c29c5d; height: 20px; } ul.dropdown ul li a { display: inline-block; } ul.dropdown ul li a:hover { background-color: #a2834d; color: #fff; height: 20px; } I tried changing the ul.dropdown ul to position relative, but that breaks the navigation. I would appreciate some help getting this corrected. Thanks.

    Read the article

  • Passing a list of files to javac

    - by Robert Menteer
    How can I get the javac task to use an existing fileset? In my build.xml I have created several filesets to be used in multiple places throughout build file. Here is how they have been defined: <fileset dir = "${src}" id = "java.source.all"> <include name = "**/*.java" /> </fileset> <fileset dir = "${src}" id = "java.source.examples"> <include name = "**/Examples/**/*.java" /> </fileset> <fileset dir = "${src}" id = "java.source.tests"> <include name = "**/Tests/*.java" /> </fileset> <fileset dir = "${src}" id = "java.source.project"> <include name = "**/*.java" /> <exclude name = "**/Examples/**/*.java" /> <exclude name = "**/Tests/**/*.java" /> </fileset> I have also used macrodef to compile the java files so the javac task does not need to be repeated multiple times. The macro looks like this: <macrodef name="compile"> <attribute name="sourceref"/> <sequential> <javac srcdir = "${src}" destdir = "${build}" classpathref = "classpath" includeantruntime = "no" debug = "${debug}"> <filelist dir="." files="@{sourceref}" /> <-- email is about this </javac> </sequential> What I'm trying to do is compile only the classes that are needed for specific targets not all the targets in the source tree. And do so without having to specify the files every time. Here are how the targets are defined: <target name = "compile-examples" depends = "init"> <compile sourceref = "${toString:java.source.examples}" /> </target> <target name = "compile-project" depends = "init"> <compile sourceref = "${toString:java.source.project}" /> </target> <target name = "compile-tests" depends = "init"> <compile sourceref = "${toString:java.source.tests}" /> </target> As you can see each target specifies the java files to be compiled as a simi-colon separated list of absolute file names. The only problem with this is that javac does not support filelist. It also does not support fileset, path or pathset. I've tried using but it treats the list as a single file name. Another thing I tried is sending the reference directly (not using toString) and using but include does not have a ref attribute. SO THE QUESTION IS: How do you get the javac task to use a reference to a fileset that was defined in another part of the build file? I'm not interested in solutions that cause me to have multiple javac tasks. Completely re-writting the macro is acceptable. Changes to the targets are also acceptable provided redundant code between targets is kept to a minimum. p.s. Another problem is that fileset wants a comma separated list. I've only done a brief search for a way to convert semi-colons to commas and haven't found a way to do that. p.p.s. Sorry for the yelling but some people are too quick to post responses that don't address the subject.

    Read the article

  • Vertical text inside table headers using a JavaScript-based SVG library

    - by Oleg
    I use jqGrid with many columns containing boolean information, which are displayed as checkboxes inside the table (see http://www.ok-soft-gmbh.com/VerticalHeaders/TestFixedO.htm as an example). To display information more compactly I use vertical column headers. It works very well and works in jqGrid in all browsers (see my discussion with Tony Tomov in jqGrid forum http://www.trirand.com/blog/?page_id=393/feature-request/headers-with-vertical-orientation/), but in IE vertical text is blurred and doesn't look nice enough (open the link above in IE and you will see exactly what I mean). I was asked from users why the text displayed so strangely. So I'm thinking of using a JavaScript-based SVG library like SVG Web ( http://code.google.com/p/svgweb/ ) or Raphaël ( http://raphaeljs.com/ ). SVG is very powerful and it is difficult to find a good example. I need only to display vertical text (-90 grad, from the bottom up) and use if possible without working in mode of absolute positioning. So one more time my question: I need to have a possibility to display vertical text (-90 grad rotation) inside <td> elements of a table header. I want to use a JavaScript-based SVG library like SVG Web or Raphaël. The solution must support IE6. Does anybody have a good reference example which could help me do this? If somebody posts a whole solution of the problem I would be happy. To be exact here is my current solution: I define .rotate { -webkit-transform: rotate(-90deg); /* Safari 3.1+, Chrome */ -moz-transform: rotate(-90deg); /* Firefox 3.5+ */ -o-transform: rotate(-90deg); /* Opera starting with 10.50 */ /* Internet Explorer: */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE6, IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)" /* IE8 */; } define RotateCheckboxColumnHeaders function var RotateCheckboxColumnHeaders = function (grid, headerHeight) { // we use grid as context (if one have more as one table on tnhe page) var trHead = $("thead:first tr", grid.hdiv); var cm = grid.getGridParam("colModel"); $("thead:first tr th").height(headerHeight); headerHeight = $("thead:first tr th").height(); for (var iCol = 0; iCol < cm.length; iCol++) { var cmi = cm[iCol]; if (cmi.formatter === 'checkbox') { // we must set width of column header div BEFOR adding class "rotate" to // prevent text cutting based on the current column width var headDiv = $("th:eq(" + iCol + ") div", trHead); headDiv.width(headerHeight).addClass("rotate"); if (!$.browser.msie) { if ($.browser.mozilla) { headDiv.css("left", (cmi.width - headerHeight) / 2 + 3).css("bottom", 7); } else { headDiv.css("left", (cmi.width - headerHeight) / 2); } } else { var ieVer = jQuery.browser.version.substr(0, 3); // Internet Explorer if (ieVer !== "6.0" && ieVer !== "7.0") { headDiv.css("left", cmi.width / 2 - 4).css("bottom", headerHeight / 2); $("span", headDiv).css("left", 0); } else { headDiv.css("left", 3); } } } } }; And include a call like RotateCheckboxColumnHeaders(grid, 110); after creating jqGrid.

    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

< Previous Page | 71 72 73 74 75 76 77 78 79 80 81 82  | Next Page >