Search Results

Search found 363 results on 15 pages for 'googleapis'.

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

Page 12/15 | < Previous Page | 8 9 10 11 12 13 14 15  | Next Page >

  • JQuery $.ajax doesn't return anything, but only in Google Chrome!?

    - by Shawson
    Hi All, I'm hoping someone can help me with this as I'm at a loss. I'm trying to simply load a plain text file into a page at runtime using jquery- everything works fine in IE8 (8.0.7600.16385), Firefox 3.6.3, however in Google Chrome 5.0.375.55 the "data" comes back as nothing- i get an empty alert box. This is the code i'm using; <!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> <title>Animation Test</title> <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function () { $.ajax({ url: 'level1.txt', success: function (data) { alert(data); }, async: true, type: 'GET' }); }); </script> </head> <body> <canvas id="canvas" width="640" height="480"> Unsupported Browser </canvas> </body> </html> The file I'm loading in is a plain text file containing this; Central Cavern 100 O.........1.C....C...........1.O O................1.............O O..............................O O..............................O O......................B1..B...O O=============~~~~=~~~~========O O.............................1O O===...........................O O............A..OOO.B..........O O====...<<<<<<<<<<<<<<<<<<<<...O O............................==O O..............................O O..........B........OOO.....===O O....===============...........O O%............................XO O==============================O (Yes- it's the first level from Manic Miner! I'm making a javascript version using the html5 canvas to get my head around using it.) I'm at a total loss- it can't be the code because it runs in the other 2 browsers- is there an issue with jquery and this version of Chrome? Thanks for reading!! Shaw.

    Read the article

  • Radio button inside anchor element is reset after jQuery click handler

    - by GrievousAngel
    I have a situation where an element, of type radio, is contained in an element. The anchor element has a href but I want to override that behaviour by adding a jQuery 'click' handler to the element. The click handler makes the radio button inside it the selected one within the group. This all works when the anchor is clicked, however, when the radio button is clicked it appears that jQuery resets the selected radio to the previously selected one! Here is a the simplified page that duplicates the issue: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#a1").click(function(event) { anchorClicked("a1"); return false; }); $("#a2").click(function(event) { anchorClicked("a2"); return false; }); }); function anchorClicked(anchorId) { $('#' + anchorId + ' input:radio').attr("checked", true); alert("Look at what is selected and what happens after the event when this dialog is closed!"); } </script> </head> <body> <form> <ul> <li id="li1"> <a id="a1" href="javascript:alert('default functionality')"> <input value="1" name="rb" type="radio" id="rb1"> <span>Details 1</span> </a> </li> <li id="li2"> <a id="a2" href="javascript:alert('default functionality')"> <input value="2" name="rb" type="radio" id="rb2"> <span>Details 2</span> </a> </li> </ul> </form> </body> Does anyone have any idea how I can prevent jQuery for resetting the radio button?

    Read the article

  • chrome renders js different depending on the extension of the file to render [testcase included]

    - by pakore
    I was trying to implement an image panner I found here Chrome renders the same document differently depending on the extension of the file requested. I have created a test case, where it works when the file it's not named as test.xhtml You can download the test case from here Does anybody know why or how to solve it? I want my files to be .xhtml In IE and FF it works fine. Code: test.html / test.xhtml (change the name to see that works with one but not with the other). <!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" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <style type="text/css"> /*Default CSS for pan containers*/ .pancontainer { position: relative; /*keep this intact*/ overflow: hidden; /*keep this intact*/ width: 300px; height: 300px; border: 1px solid black; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex4/imagepanner.js"></script> </head> <body> <div class="pancontainer" data-orient="center" data-canzoom="yes" style="width: 350px; height: 200px; float: left; position: relative; overflow-x: hidden; overflow-y: hidden; cursor: move; "><img src="./test_files/image.jpg" style="position: absolute; width: 700px; height: 525px; left: -175px; top: -163px; display: block;" /> </div> </body> </html>

    Read the article

  • Google Maps API 3 How to call initialize without putting it in Body onload

    - by Bex
    Hi I am using the google maps API and have copied the examples and have ended up with a function called "initialize" that is called from the body onload. I am using the maps in a few different user controls, which are placed within content place holders, so the body tag is in the master page. Is there a way of calling initialize directly in the usercontrol rather than having to place an onload on the masterpage? Ideally I want my user control to be a stand alone control that I can just slot into pages without trying to access the master page body onload. I have tried calling the Initialize function from my page load of the user control (by adding a start up script), but the map doesn't appear. Any suggestions? My code: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">/script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> var map; var geocoder; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(51.8052184317649, -4.965819906250006); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); $.ajax({ type: "POST", url: "/GoogleMapsService.asmx/GetPointers", contentType: "application/json; charset=utf-8", dataType: "json", beforeSend: function () { $(".loadingData").html("<p>Loading data..</p>"); }, complete: function () { $(".loadingData").html(""); }, cache: true, success: mapPoints, error: onError }); } function onError(xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(xhr.responseText); } function mapPoints(response) { if (response.d != null) { if (response.d.length > 0) { for (var i = 0; i < response.d.length; i++) { plotOnMap(response.d[i].Id, response.d[i].Name, response.d[i].Lat, response.d[i].Long, response.d[i].ShortDesc) } } } } and on my test master page: <body onload="initialize()"> <form runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager> <asp:ContentPlaceHolder ID="MainContent" runat="server"> </asp:ContentPlaceHolder> </form> </body>

    Read the article

  • Flexslider position of previous and next slides

    - by TJ15
    I am using the basic flexslider, I wantto display some of the previous and next , so if slide 2 is showing you will see part of slide 1 to the left and part of slide 3 to the right. <!DOCTYPE html> <head> <link rel="stylesheet" href="flexslider.css" type="text/css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <style> .container {overflow: hidden; width: 100%} .flexslider {max-width: 500px; width: 500px; margin: 0 auto} .content {background: #f2f2f2; max-width: 500px; display: block; margin: 0 auto} .flex-viewport {overflow: visible !important} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <div class="container"> <div class="flexslider"> <ul class="slides"> <li><img src="785.jpg" /></li> <li><img src="785.jpg" /></li> <li><img src="785.jpg" /></li> <li><img src="785.jpg" /></li> </ul> </div> </div> <script src="jquery.flexslider.js"></script> <script> jQuery(document).ready(function($) { // You can use the locally-scoped $ in here as an alias to jQuery. $(window).load(function() { $('.flexslider').flexslider(); }); }); </script> </body> </html> I have reduced the image to 70% and positioned it in the middle of the page. I want to have the next and previous slides visible on either side of the main pic but no idea where to make the appropriate changes (I assume in the js file). I thought this was a margin issue but setting this to 0 in styles makes no difference. Has anyone done this and can provide some advice?

    Read the article

  • How can I create a Searchstring for a Google AJAX Search API?

    - by elmaso
    Hello, i have this code to get the search resutls from the api: querygoogle.php: <?php session_start(); // Here's the Google AJAX Search API url for curl. It uses Google Search's site:www.yourdomain.com syntax to search in a specific site. I used $_SERVER['HTTP_HOST'] to find my domain automatically. Change $_POST['searchquery'] to your posted search query $url = 'http://ajax.googleapis.com/ajax/services/search/web?rsz=large&v=1.0&start=20&q=' . urlencode('' . $_POST['searchquery']); // use fopen and fread to pull Google's search results $handle = fopen($url, 'rb'); $body = ''; while (!feof($handle)) { $body .= fread($handle, 8192); } fclose($handle); // now $body is the JSON encoded results. We need to decode them. $json = json_decode($body); // now $json is an object of Google's search results and we need to iterate through it. foreach($json->responseData->results as $searchresult) { if($searchresult->GsearchResultClass == 'GwebSearch') { $formattedresults .= ' <div class="searchresult"> <h3><a href="' . $searchresult->unescapedUrl . '">' . $searchresult->titleNoFormatting . '</a></h3> <p class="resultdesc">' . $searchresult->content . '</p> <p class="resulturl">' . $searchresult->visibleUrl . '</p> </div>'; } } $_SESSION['googleresults'] = $formattedresults; header('Location: ' . $_SERVER['HTTP_REFERER']); exit; ?> search.php <?php session_start(); ?> <form method="post" action="querygoogle.php"> <label for="searchquery"><span class="caption">Search this site</span> <input type="text" size="20" maxlength="255" title="Enter your keywords and click the search button" name="searchquery" /></label> <input type="submit" value="Search" /> </form> <?php if(!empty($_SESSION['googleresults'])) { echo $_SESSION['googleresults']; unset($_SESSION['googleresults']); } ?> but with this code, I cant add a searchstring.. how can i add a search string like search.php?search=keyword ? thanks

    Read the article

  • jQuery reports incorrect element height in Firefox iframe

    - by Augustus
    Here a short test to demonstrate my problem. I have a page that loads an iframe: <html> <head> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> </head> <body> <iframe id="iframe" src="box.html" style="width: 100px; height: 100px"></iframe> <script> $('#iframe').bind('load', function () { var div = $(this).contents().find('div'); alert(div.height()); alert(div.innerHeight()); alert(div.outerHeight()); alert(div.outerHeight(true)); }); </script> </body> </html> The iframe (box.html) contains a single styled div: <html> <head> <title></title> <style> div { height: 50px; width: 50px; margin: 5px; padding: 5px; border: 2px solid #00f; background-color: #f00; } </style> </head> <body> <div></div> </body> </html> The four alerts should return 50, 60, 64 and 74, respectively. This works as expected in Safari and Chrome. In FF 3.5.1, they all return 64. This is wrong. Does anyone know how I can force FF/jQuery to return the correct values?

    Read the article

  • Infinite Refresh Loop in Firefox 3.0

    - by Martin Gordon
    I'm having a strange issue with my Javascript in Firefox 3.0.x. In Firefox 3.0.12, the page constantly reloads as soon as the list body is loaded. Neither Firefox 3.5, Safari 4 nor Chrome 5 (all on Mac) experience this issue. EDIT: I've created an isolated example rather than pulling this from my existing code. test.js function welcomeIndexOnLoad() { $("#options a").live('click', function () { optionClicked($(this), "get_list_body.html"); return false; }); $(document).ready(function() { optionClicked(null, "get_list_body.html"); }); } function optionClicked(sender, URL) { queryString = ""; if (sender != null) { queryString = $(sender).attr("rel"); } $("#list_body").load(URL + "?" + queryString, function(resp, status, AJAXReq) { console.log(resp); console.log("" + status); location.hash = queryString; }); }? test.html <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> <script type="text/javascript" src="test.js"></script> <script> welcomeIndexOnLoad(); </script> </head> <body> <div id="container"> Outside of list body. <div id="list_body"> </div> </div> </body> </html> get_list_body.html <h3> <div id="options"> <a href="#" rel="change_list">Change List</a> </div> <ul> <li>li</li> </ul> jQuery line 5252 (an xhr.send() call) shows up in the console as soon as the page reloads: xhr.send( type === "POST" || type === "PUT" || type === "DELETE" ? s.data : null );

    Read the article

  • Simple html page using Bootstrap

    - by Athashri
    I am writing a simple HTML page using the Twitter Bootstrap. But the navbar and links are rendered as normal HTML on the browser. I have referred to multiple sites but the same steps are given everywhere. I am not sure where I am going wrong. Code: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel= "stylesheet" href= "css/bootstrap.css" type="text/css"> <title> Bootstrap example</title> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/bootstrap.js"></script> <h1>Hello, world!</h1> <div class ="container"> <h1><a href="#">Bootstrap Site</a></h1> <div class="navbar"> <div class="navbar-inner"> <div class="container"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Services</a></li> <li><a href="#">Downloads</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div> </div> </body> </html>

    Read the article

  • Reloading a Flickr request from author

    - by user1797325
    I have my flickr gallery coded, but I want to be able to click on the Author's name and the page will reload just with the images from that author. Here is my current code <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Outbrain Test Gallery</title> <link href="styles.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="jquery.masonry.min.js"></script> <script type="text/javascript"> $(window).load(function(){ $('#flkr').masonry({ // options itemSelector : '.tiles', isResizable: true, }); }); </script> <script type="text/javascript">$(document).ready(function() { $('<ul />').prependTo('#flkr'); $.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?lang=en-us&format=json&jsoncallback=?', function(data) { $.each(data.items, function(i,item) { var squares = (item.media.m).replace('_m.jpg', '_q.jpg'); if(i <= 20){ $('<img/>').attr({ alt: item.title, src: squares, height: '150', width: '150' }).appendTo('#flkr ul').wrap('<li class="tiles"><a href="' + item.link + '"></a><p class="title">' + item.title + '</p><p class="author"><strong>By:</strong> ' + item.author + '</p><p class="date"><strong>Uploaded: </strong>' + item.published + '</p></li>'); } }); }); }); </script> </head> <body> <ul id="flkr"></ul> </body> </html>

    Read the article

  • Serialize JavaScript's navigator object

    - by kappa
    Hi, I'm creating a page to help diagnose the problem our users are experiencing with our web pages (you know, asking a user "What browser are you using?" usually leads to "Internet"). This page already submits to me all the HTTP headers and now I'm trying to have JavaScript give some more informations, so I thought it would be great to have the user's navigator JavaScript object and I started looking how to serialize it so I can submit it through a form. The problem is I'm not able to serialize the navigator object using any JSON library I know of, everyone returns an empty object (?!), so I decided to write an ad-hoc serializer. You can find the code here: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> function serialize (object) { var type = typeof object; if (object === null) { return '"nullValue"'; } if (type == 'string' || type === 'number' || type === 'boolean') { return '"' + object + '"'; } else if (type === 'function') { return '"functionValue"'; } else if (type === 'object') { var output = '{'; for (var item in object) { if (item !== 'enabledPlugin') { output += '"' + item + '":' + serialize(object[item]) + ','; } } return output.replace(/\,$/, '') + '}'; } else if (type === 'undefined') { return '"undefinedError"'; } else { return '"unknownTypeError"'; } }; $(document).ready(function () { $('#navigator').text(serialize(navigator)); }); </script> <style type="text/css"> #navigator { font-family: monospaced; } </style> <title>Serialize</title> </head> <body> <h1>Serialize</h1> <p id="navigator"></p> </body> </html> This code seems to work perfectly in Firefox, Opera, Chrome and Safari but (obviously) doesn't work in Internet Explorer (at least version 8.0), it complains that "Property or method not supported by the object" at line for (var item in object) {. Do you have any hint on how to fix the code or how to reach the goal (serialize the navigator object) by other means?

    Read the article

  • Eclipse javascript character encoding

    - by Bardock
    Hi, I'd like to display some language specific characters from javascript but I can't. My app is a Java webapp and the front end is jQuery. All the characters that are sended from the server - in a JSP or with AJAX - are displayed properly. When I want to display some text hardcoded in to the javascript file it's broken. I'm using Eclipse. In the JSP's header I use: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> I've tried this (charset in the script element) too: <script type="text/javascript" charset="utf-8"><c:import url="/JS/mainJS.js" /></script> In my Eclipse I've set the project properties / text file encoding to UTF-8 AND I've checked the JS files' resource properties / text file encoding that is UTF-8 too. But when I try this: $.test = function(){ var s = "éééáááuuuu"; alert(s); } I get: éééáááűűűű The strange thing is that: When I try in a separate html file (in the same project), It's working: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <style type="text/css"> body {background: #c0c0c0;} </style> <script type="text/javascript"> $(document).ready(function(){ var s = "éááuuúúú"; $("#console").text(s); alert(s); }) </script> </head> <body> <div id="console"></div> </body> </html> Even if I DO NOT use any content type and page encoding settings. What is the problem? What shall I do? (I'm using Apache Tomcat integrated in Eclipse) Thanks in advance!

    Read the article

  • Issue with blocking the UI during a onchange request - prevents other event from firing.

    - by jfrobishow
    I am having issues with jQuery blockUI plugins and firing two events that are (I think, unless I am loosing it) unrelated. Basically I have textboxes with onchange events bound to them. The event is responsible for blocking the UI, doing the ajax call and on success unblocking the UI. The ajax is saving the text in memory. The other control is a button with on onclick event which also block the UI, fire an ajax request saving what's in memory to the database and on success unblock the UI. Both of these work fine separately. The issue arise when I trigger the onchange by clicking on the button. Then only the onchange is fired and the onclick is ignored. I can change the text in the checkbox, click on the link and IF jQuery.blockUI() is present the onchange alone is fired and the save is never called. If I remove the blockUI both function are called. Here's a fully working example where you can see the issue. Please note the setTimeout are there when I was trying to simulate the ajax delay but the issue is happening without it. <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></script> <script> function doSomething(){ $.blockUI(); alert("doing something"); //setTimeout(function(){ $.unblockUI(); //},500); } function save(){ $.blockUI(); //setTimeout(function(){ alert("saving"); $.unblockUI(); //}, 1000); } </script> </head> <body> <input type="text" onchange="doSomething();"> <a href="#" onclick="save()">save</a> </body> </html>

    Read the article

  • jQuery function execute on Button Click and Enter/Return (key)

    - by Alvin Jones
    I'm trying to create a little search box that allows you to search Twitter based on the keyword you enter in the input field. While it's work, it only works if you press the Submit button. I would also like to be able to press the Enter or Return key to initiate the search. I've tried using the .sumbit function and wrapping my input around a form element with no success. Any insight would be greatly appreciate! Live example: http://tinyurl.com/84axyym <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function(){ function(data) { $('#startSearch').click(function(){ $('#tweets .results').remove(); var searchTerm = 'http://search.twitter.com/search.json?q=' + $('#twitterSearch').val() + '&callback=?' $.getJSON(searchTerm, function(data) { $.each(data.results, function() { $('<div class="results"></div>') .hide() .append('<a class="userPicLink" href="http://twitter.com/' + this.from_user + '">' + '<img class="userImg" src="' + this.profile_image_url + '">' + '</a>') .append('<span class="userName">' + '<a href="http://twitter.com/' + this.from_user + '">' + this.from_user + '</span>') .append('<span class="userText">' + this.text + '</span>') .append('<time class="textTime">' + relTime(this.created_at) + '</time>') .appendTo('#tweets') .fadeIn(); }); }); </script> <body> <label id="searchLabel" for="twitterSearch">Search</label> <input type="search" list="searchSugg" id="twitterSearch" placeholder="css3 animation" required aria-required="true"> <input id="startSearch" type="submit"> <datalist id="searchSugg"> <option value="css3 mulitple backgrounds"> <option value="html5 video"> <option value="responsive web design"> <option value="twitter api"> </datalist> <div id="tweets"> </div> </body>

    Read the article

  • Can't figure out the color of an svg element

    - by yass
    I have a very simple HTML page, viewable on gh-pages with the following code: <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link href="style.css" media="screen" rel="stylesheet" type="text/css"> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'> </script> </head> <body> <div id="page"> <div id="content"> <div id="heatmap"> <svg style="margin-left: 80px; color: rgb(255, 255, 255);" width="800" height="880"> <g transform="translate(80,80)"> <rect style="color: rgb(255, 255, 255);" height="720" width="720"> </rect> </g> </svg> </div> </div> </div> </body> </html> with the following CSS: body { background-color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #FFFFFF; } #wrapper { margin: 0 auto; padding: 0; } #page { width: 1000px; margin: 0 auto; padding: 40px 0px 0px 0px; } #content { float: left; width: 660px; padding: 0px 0px 0px 0px; background: #FFFFFF; } I expect the rectangle, 'svg rect' to be the color #FFFFFF, or white. But it shows up as some other color. I opened it up in firebug, and it shows the computed color to be #FFFFF:

    Read the article

  • Javascript table construction bug using JQuery in Firefox on Mac OSX

    - by Poita_
    I'm using some code to build up tables using JQuery, but in Firefox 3.5.3 on Mac OSX, the table cells all appear on separate lines by themselves, instead of in their respective rows. Chrome 5.0.342.7 beta on OSX correctly produces the table, as does Safari 4.0.5. Here is a minimal reproduction case: <html> <body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var b = $('body'); b.append("<table>"); for (var i = 0; i < 3; ++i) { b.append("<tr>"); for (var j = 0; j < 3; ++j) b.append("<td>x</td>"); b.append("</tr>"); } b.append("</table>"); }); </script> </body> </html> In Chrome and Safari, I get this correct output: x x x x x x x x x but Firefox produces: x x x x x x x x x Note that if I manually create that exact table without using Javascript (i.e. direct into the HTML) then the table appears correctly in Firefox. Also, if I change the JS to append then entire table in one call then it also works -- the only time it doesn't work is if you append it part-by-part as I have done before. My question is: is this to be expected, or should I report this as a bug to Firefox? I'm pretty sure this is a Firefox bug, but I'm a bit of a newbie to JS and web development in general, so perhaps there's something I'm missing? P.S. obviously there are easy ways to get around this -- that's not my concern. See above.

    Read the article

  • position:absolute within border-radius and overflow:hidden

    - by JaNightmare
    I had a problem with border-radius in webkit browsers and found the solution at the following URL: How to make CSS3 rounded corners hide overflow in Chrome/Opera but iam using a another element with position: absolute; inside this now I need to make the caption with rounded border too, but do not know how note: i can't use another border-radius in caption, because this will have an animation see the code with: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Problem</title> <style type="text/css"> img { border: 0; } a { text-decoration: none; } .wrap-events { float: left; position: relative; width: 500px; height: 250px; } .events { overflow: hidden; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .caption { position: absolute; width: 100%; bottom: 0; color: #FFFFFF; background-color: #151515; font: 12px "Arial", Helvetica, sans-serif; opacity: 0.6; border-radius: 0 0 50px 50px; /* add border-radius to caption */ } .caption p { padding: 10px; } </style> </head> <body> <div class="wrap-events"> <div class="events"> <a href="#"> <img src="http://www.cg-auto.com.br/forum/imagens/imagens_news/26c4dc4359edcfd4c6871ee1fa958539.jpg" alt="image"> </a> <div class="caption"> <p>This is a caption</p> </div> </div> </div> <button id="slide">Slide It!</button> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $('#slide').click(function(){ $('.caption').hide().slideDown(2000); }); </script> </body> </html> cheers

    Read the article

  • how to use method in AsyncTask in android?

    - by J.R.P
    In my application use JASON webservice to get data from Google Navigarion api. I use the Code is below. i got Exception android.os.NetworkOnMainThreadException. how to use AsyncTask? here is my code. Thanks.`public class MainActivity extends MapActivity { MapView mapView ; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); System.out.println("*************1**************1"); setContentView(R.layout.activity_main); System.out.println("*************2**************"); mapView = (MapView) findViewById(R.id.mapv); System.out.println("*************3**************"); Route route = directions(new GeoPoint((int)(26.2*1E6),(int)(50.6*1E6)), new GeoPoint((int)(26.3*1E6),(int)(50.7*1E6))); RouteOverlay routeOverlay = new RouteOverlay(route, Color.BLUE); mapView.getOverlays().add(routeOverlay); mapView.invalidate(); System.out.println("*************4**************"); } @SuppressLint("ParserError") private Route directions(final GeoPoint start, final GeoPoint dest) { //https://developers.google.com/maps/documentation/directions/#JSON <- get api String jsonURL = "http://maps.googleapis.com/maps/api/directions/json?"; final StringBuffer sBuf = new StringBuffer(jsonURL); sBuf.append("origin="); sBuf.append(start.getLatitudeE6()/1E6); sBuf.append(','); sBuf.append(start.getLongitudeE6()/1E6); sBuf.append("&destination="); sBuf.append(dest.getLatitudeE6()/1E6); sBuf.append(','); sBuf.append(dest.getLongitudeE6()/1E6); sBuf.append("&sensor=true&mode=driving"); Parser parser = new GoogleParser(sBuf.toString()); Route r = parser.parse(); System.out.println("********r in thread*****" +r); return r; } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.activity_main, menu); return true; } @Override protected boolean isRouteDisplayed() { // TODO Auto-generated method stub return false; } } `

    Read the article

  • Newbie jQuery question: Need slideshow to rotate automatically, not just when clicking navigation.

    - by Justin
    Hi everyone, This is my first post, so please forgive me if this question has been asked a million times. I'm a self professed jQuery hack and I need a little guidance on taking this script I found and adapting it to my needs. Anyway, what I'm making is an image slide show with navigation. The script I found does this, but does not automatically cycle through the images. I'm using jQuery 1.3.2 and would rather stick with that than using the newer library. I would also prefer to edit what is already here rather than start from scratch. Anywho, here's the html: <div id="myslide"> <div class="cover"> <div class="mystuff"> <img alt="&nbsp;" src="http://www.mfhc.com/wp/wp-content/uploads/2010/05/current_Denver-skyline.jpg" /> </div> <div class="mystuff"> <img alt="&nbsp;" src="http://www.mfhc.com/wp/wp-content/uploads/2010/05/pepsi_center-IS42RF-0D111C.jpg" /> </div> <div class="mystuff"> <img alt="&nbsp;" src="http://www.mfhc.com/wp/wp-content/uploads/2010/05/columbine-2689820469_D1104.jpg" /> </div> <div class="mystuff"> <img alt="&nbsp;" src="http://www.mfhc.com/wp/wp-content/uploads/2010/05/ist2_10460354-RedRocks.jpg" /> </div> </div> <!-- end of div cover --> </div> <!-- end of div myslide --> And here's the jQuery: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/JavaScript"> $(document).ready(function (){ $('#button a').click(function(){ var integer = $(this).attr('rel'); $('#myslide .cover').css({left:-820*(parseInt(integer)-1)}).hide().fadeIn(); /*----- Width of div #mystuff (here 820) ------ */ $('#button a').each(function(){ $(this).removeClass('active'); if($(this).hasClass('button'+integer)){ $(this).addClass('active')} }); }); }); </script> Here's where I got the script: http://www.webdeveloperjuice.com/2010/04/07/create-lightweight-jquery-fade-manual-slideshow/ Again, if this question is too basic for this site please let me know and possibly provide a reference link or two. Thanks a ton!

    Read the article

  • Creating a multiplatform webapp with HTML5 and Google maps

    - by Bart L.
    I'm struggling how to develop a webapp for Android and iOS. My first app was a simple todo app which was easy to test in my browser and it only used html, javascript and css. However, I have to create an app which uses Google Maps Api to get the location. I created a simple html5 page to test which places a marker on a map. It works fine when testing it on my local server. But when I create an .apk file for Android, the app doesn't work. So I'm wondering, isn't it possible to use it like this? Do I have the use the phonegap libraries to use their geolocation library? And if so, how do you handle the development of a webapp in phonegap for multiple OS? Do you have to install an Android environment and an iOS environment to each include the right phonegap library and to test them properly? Update: I use the following code on my webserver and it works perfectly. When I upload it in a zip-folder to the photogap cloud and install the APK file on my phone, it doesn't work. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Simple Geo test</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> </head> <body> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script> function success(position) { var mapcanvas = document.createElement('div'); mapcanvas.id = 'mapcontainer'; mapcanvas.style.height = '200px'; mapcanvas.style.width = '200px'; document.querySelector('article').appendChild(mapcanvas); var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var options = { zoom: 15, center: coords, mapTypeControl: false, navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("mapcontainer"), options); var marker = new google.maps.Marker({ position: coords, map: map, title:"You are here!" }); } if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success); } else { error('Geo Location is not supported'); } </script> <article></article> </body> </html>

    Read the article

  • A Simple Collapsible Menu with jQuery

    - by Vincent Maverick Durano
    In this post I'll demonstrate how to make a simple collapsible menu using jQuery. To get started let's go ahead and fire up Visual Studio and create a new WebForm.  Now let's build our menu by adding some div, p and anchor tags. Since I'm using a masterpage then the ASPX mark-up should look something like this:   1: <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 2: <div id="Menu"> 3: <p>CARS</p> 4: <div class="section"> 5: <a href="#">Car 1</a> 6: <a href="#">Car 2</a> 7: <a href="#">Car 3</a> 8: <a href="#">Car 4</a> 9: </div> 10: <p>BIKES</p> 11: <div class="section"> 12: <a href="#">Bike 1</a> 13: <a href="#">Bike 2</a> 14: <a href="#">Bike 3</a> 15: <a href="#">Bike 4</a> 16: <a href="#">Bike 5</a> 17: <a href="#">Bike 6</a> 18: <a href="#">Bike 7</a> 19: <a href="#">Bike 8</a> 20: </div> 21: <p>COMPUTERS</p> 22: <div class="section"> 23: <a href="#">Computer 1</a> 24: <a href="#">Computer 2</a> 25: <a href="#">Computer 3</a> 26: <a href="#">Computer 4</a> 27: </div> 28: <p>OTHERS</p> 29: <div class="section"> 30: <a href="#">Other 1</a> 31: <a href="#">Other 2</a> 32: <a href="#">Other 3</a> 33: <a href="#">Other 4</a> 34: </div> 35: </div> 36: </asp:Content>   As you can see there's nothing fancy about the mark up above.. Now lets go ahead create a simple CSS to set the look and feel our our Menu. Just for for the simplicity of this demo, add the following CSS below under the <head> section of the page or if you are using master page then add it a the content head. Here's the CSS below:   1: <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"> 2: <style type="text/css"> 3: #Menu{ 4: width:300px; 5: } 6: #Menu > p{ 7: background-color:#104D9E; 8: color:#F5F7FA; 9: margin:0; 10: padding:0; 11: border-bottom-style: solid; 12: border-bottom-width: medium; 13: border-bottom-color:#000000; 14: cursor:pointer; 15: } 16: #Menu .section{ 17: padding-left:5px; 18: background-color:#C0D9FA; 19: } 20: a{ 21: display:block; 22: color:#0A0A07; 23: } 24: </style> 25: </asp:Content>   Now let's add the collapsible effects on our menu using jQuery. To start using jQuery then register the following script at the very top of the <head> section of the page or if you are using master page then add it the very top of  the content head section.   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>   As you can see I'm using Google AJAX API CDN to host the jQuery file. You can also download the jQuery here and host it in your server if you'd like. Okay here's the the jQuery script below for adding the collapsible effects:   1: <script type="text/javascript"> 2: $(function () { 3: $("a").mouseover(function () { $(this).addClass("highlightRow"); }) 4: .mouseout(function () { $(this).removeClass("highlightRow"); }); 5:   6: $(".section").hide(); 7: $("#Menu > p").click(function () { 8: $(this).next().slideToggle("Slow"); 9: }); 10: }); 11: </script>   Okay to give you a little bit of explaination, at line 3.. what it does is it looks for all the "<a>" anchor elements on the page and attach the mouseover and mouseout event. On mouseover, the highlightRow css class is added to <a> element and on mouse out we remove the css class to revert the style to its default look. at line 6 we will hide all the elements that has a class name set as "section" and if you look at the mark up above it is refering to the <div> elements right after each <p> element. At line 7.. what it does is it looks for a <p> element that is a direct child of the element that has an ID of "Menu" and then attach the click event to toggle the visibilty of the section. Here's how it looks in the page: On Initial Load: After Clicking the Section Header:   That's it! I hope someone find this post usefu!   Technorati Tags: ASP.NET,JQuery,Master Page,JavaScript

    Read the article

  • How can I center XHTML content with CSS?

    - by drea
    so I recently converted a website of mine from a table content format to a div content format. Table format Version: Table version of the website: here. Table version style CSS: body { width: 1020px; margin: 0 auto; background-image: url(images/bg.png); } .logo{ width:301px; height:151px; background:url(images/logo.png); text-indent:-9999px; border:none; cursor:pointer; } .logo:hover { opacity:0.9; } .signin{ width:69px; height:30px; background:url(images/signin.png); text-indent:-9999px; border:none; cursor:pointer; } .signin:hover { opacity:0.9; } .register{ width:79px; height:30px; background:url(images/register.png); text-indent:-9999px; border:none; cursor:pointer; } .register:hover { opacity:0.9; } .Contact_Us{ width:53px; height:9px; background:url(images/Contact_Us.png); text-indent:-9999px; border:none; cursor:pointer; } .Contact_Us:hover { opacity:0.9; } .Code_of_Conduct{ width:84px; height:9px; background:url(images/Code_of_Conduct.png); text-indent:-9999px; border:none; cursor:pointer; } .Code_of_Conduct:hover { opacity:0.9; } .Privacy_Policy{ width:65px; height:12px; background:url(images/Privacy_Policy.png); text-indent:-9999px; border:none; cursor:pointer; } .Privacy_Policy:hover { opacity:0.9; } .Copyright{ width:149px; height:9px; background:url(images/Copyright.png); text-indent:-9999px; border:none; cursor:pointer; } .Copyright:hover { opacity:0.9; } .slideshow{ width:301px; height:151px; background: url(slideshow.png), url(minecraft.png), url(tf2.png), url(CSS.png), url(GM.png), url(aos.png), url(CSGO.png), url(voip.png), text-indent:-9999px; border:none; cursor:pointer; } .slideshow:hover { opacity:0.9; } Table version source: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head profile="http://www.w3.org/2005/10/profile"> <link rel="icon" type="image/png" href="http://www.xodusen.com/resources/images/favicon.png"> <title>Welcome to XodusEN</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); }); </script> <meta name="description" content="This is the homepage of XodusEN. Xodus Entertainment Network is a unique & friendly Gaming Community that welcomes & realises the potential, and value within any user regardless of their origin. " > <meta name="keywords" content="XeN, Xodus, XEN, xen, Xodus Entertainment Network, gaming, community, PC, Steam, XBL, Xbox 360, PSN, Playstation, games, Gaming, Community, XodusEN, Gaming Network, Network, TF2, Server, CS:S, Minecraft, premium, servers, Counter-Strike: Source, Website, Homepage, Minecraftia" > <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="style.css" rel="stylesheet" type="text/css"> <!--[if IE]> <script type="text/javascript"> window.location = "http://www.xodusen.com/ie/"; </script> <![endif]--> </head> <body bgcolor="#d7d7d7"> <table id="Table_01" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="18"> <img src="images/index_01.png" width="1020" height="9" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="9" alt=""></td> </tr> <tr> <td colspan="11" rowspan="2"> <img src="images/index_02.png" width="826" height="252" alt=""></td> <td> <a id="signin" class="signin" href="http://s.xodusen.com/VrtqYm"> <img src="images/signin.png" width="69" height="30" border="0" alt=""></a> <td rowspan="6"> <img src="images/index_04.png" width="3" height="643" alt=""></td> <td colspan="3"> <a id="register" class="register" href="http://s.xodusen.com/WW3rpZ"> <img src="images/Register.png" width="79" height="30" border="0" alt=""></a> <td colspan="2" rowspan="6"> <img src="images/index_06.png" width="43" height="643" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="30" alt=""></td> </tr> <tr> <td rowspan="5"> <img src="images/index_07.png" width="69" height="613" alt=""></td> <td colspan="3" rowspan="5"> <img src="images/index_08.png" width="79" height="613" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="222" alt=""></td> </tr> <tr> <td colspan="5"> <img src="images/index_09.png" width="385" height="53" alt=""></td> <td> <img src="images/index_10.png" width="250" height="53" alt=""></td> <td colspan="5"> <img src="images/index_11.png" width="191" height="53" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="53" alt=""></td> </tr> <tr> <td colspan="4" rowspan="3"> <img src="images/index_09-13.png" width="360" height="338" alt=""></td> <td colspan="3"> <a id="logo" class="logo" href="http://www.xodusen.com/community"> <img src="images/logo.png" alt=""></a> </td> <td colspan="4" rowspan="3"> <img src="images/index_11-15.png" width="165" height="338" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="151" alt=""></td> </tr> <tr> <td rowspan="2"> <img src="images/index_09-16.png" width="25" height="187" alt=""></td> <td> <img src="images/index_16.png" width="250" height="46" alt=""></td> <td rowspan="2"> <img src="images/index_11-18.png" width="26" height="187" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="46" alt=""></td> </tr> <tr> <td> <img src="images/index_12.png" width="250" height="141" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="141" alt=""></td> </tr> <tr> <td rowspan="7"> <img src="images/index_13.png" width="27" height="548" alt=""></td> <td colspan="16" id="slideshow" class="slideshow"> <a href="http://www.xodusen.com/community"><img src="images/slideshow.png" width="960" height="305" alt=""></a> <a href="http://www.xodusen.com/mcurl"><img src="images/minecraft.png" width="960" height="305" alt=""></a> <a href="steam://connect/74.121.188.194:27015"><img src="images/tf2.png" width="960" height="305" alt=""></a> <a href="steam://connect/74.121.188.195:27015"><img src="images/CSS.png" width="960" height="305" alt=""></a> <a href="steam://connect/74.121.188.197:27015"><img src="images/GM.png" width="960" height="305" alt=""></a> <a href="aos://3267131722:32887"><img src="images/aos.png" width="960" height="305" alt=""></a> <a href="steam://connect/74.121.188.196:27015"><img src="images/CSGO.png" width="960" height="305" alt=""></a></td> <td rowspan="7"> <img src="images/index_15.png" width="33" height="548" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="305" alt=""></td> </tr> <tr> <td colspan="16"> <img src="images/index_16-23.png" width="960" height="155" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="155" alt=""></td> </tr> <tr> <td rowspan="5"> <img src="images/index_17.png" width="38" height="88" alt=""></td> <td rowspan="2"> <a id="Copyright" class="Copyright" href="http://www.xodusen.com/community"> <img src="images/Copyright.png" width="149" height="9" border="0" alt=""></a></td> <td colspan="14"> <img src="images/index_25.png" width="773" height="5" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="5" alt=""></td> </tr> <tr> <td colspan="5" rowspan="4"> <img src="images/index_20.png" width="527" height="83" alt=""></td> <td rowspan="3"> <a id="Privacy_Policy" class="Privacy_Policy" href="http://s.xodusen.com/VhGEkH"> <img src="images/Privacy_Policy.png" width="65" height="12" border="0" alt=""></a></td> <td rowspan="4"> <img src="images/index_28.png" width="8" height="83" alt=""></td> <td colspan="3" rowspan="2"> <a id="Code_of_Conduct" class="Code_of_Conduct" href="http://s.xodusen.com/Tf5Gz7"> <img src="images/Code_of_Conduct.png" width="84" height="9" border="0" alt=""></a></td> <td rowspan="4"> <img src="images/index_30.png" width="6" height="83" alt=""></td> <td rowspan="2"> <a id="Contact_Us" class="Contact_Us" href="http://s.xodusen.com/T5EYsG"> <img src="images/Contact_Us.png" width="53" height="9" border="0" alt=""></a></td> <td colspan="2" rowspan="4"> <img src="images/index_26.png" width="30" height="83" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="4" alt=""></td> </tr> <tr> <td rowspan="3"> <img src="images/index_27.png" width="149" height="79" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="5" alt=""></td> </tr> <tr> <td colspan="3" rowspan="2"> <img src="images/index_28-35.png" width="84" height="74" alt=""></td> <td rowspan="2"> <img src="images/index_29.png" width="53" height="74" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="3" alt=""></td> </tr> <tr> <td> <img src="images/index_30-37.png" width="65" height="71" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="71" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="27" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="38" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="149" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="146" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="25" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="250" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="26" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="80" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="65" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="8" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="12" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="69" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="3" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="6" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="53" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="20" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="10" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="33" height="1" alt=""></td> <td></td> </tr> </table> </body> </html> Div format Version: Div version of the website: here. Div version style CSS: body { width: 1020px; margin: 0 auto; background-image: url(images/bg.png); } #Table_01 { position:absolute; left:0px; top:0px; width:1020px; height:1200px; } #index-01_ { position:absolute; left:0px; top:0px; width:1020px; height:9px; } #index-02_ { position:absolute; left:0px; top:9px; width:826px; height:305px; } #Signin_ { position:absolute; left:826px; top:9px; width:69px; height:30px; } #index-04_ { position:absolute; left:895px; top:9px; width:3px; height:643px; } #Register_ { position:absolute; left:898px; top:9px; width:79px; height:30px; } #index-06_ { position:absolute; left:977px; top:9px; width:43px; height:643px; } #index-07_ { position:absolute; left:826px; top:39px; width:69px; height:613px; } #index-08_ { position:absolute; left:898px; top:39px; width:79px; height:613px; } #index-09_ { position:absolute; left:0px; top:314px; width:360px; height:338px; } #Logo_ { position:absolute; left:360px; top:314px; width:301px; height:151px; } #index-11_ { position:absolute; left:661px; top:314px; width:165px; height:338px; } #index-12_ { position:absolute; left:360px; top:465px; width:301px; height:187px; } #index-13_ { position:absolute; left:0px; top:652px; width:27px; height:548px; } #Slideshow_ { position:absolute; left:27px; top:652px; width:960px; height:305px; } #index-15_ { position:absolute; left:987px; top:652px; width:33px; height:548px; } #index-16_ { position:absolute; left:27px; top:957px; width:960px; height:155px; } #index-17_ { position:absolute; left:27px; top:1112px; width:39px; height:88px; } #Copyright_ { position:absolute; left:66px; top:1112px; width:148px; height:13px; } #index-19_ { position:absolute; left:214px; top:1112px; width:773px; height:5px; } #index-20_ { position:absolute; left:214px; top:1117px; width:526px; height:83px; } #Privacy-Policy_ { position:absolute; left:740px; top:1117px; width:68px; height:23px; } #index-22_ { position:absolute; left:808px; top:1117px; width:6px; height:83px; } #Code-of-Conduct_ { position:absolute; left:814px; top:1117px; width:84px; height:23px; } #index-24_ { position:absolute; left:898px; top:1117px; width:2px; height:83px; } #Contact-Us_ { position:absolute; left:900px; top:1117px; width:57px; height:23px; } #index-26_ { position:absolute; left:957px; top:1117px; width:30px; height:83px; } #index-27_ { position:absolute; left:66px; top:1125px; width:148px; height:75px; } #index-28_ { position:absolute; left:740px; top:1140px; width:68px; height:60px; } #index-29_ { position:absolute; left:814px; top:1140px; width:84px; height:60px; } #index-30_ { position:absolute; left:900px; top:1140px; width:57px; height:60px; } .logo{ width:301px; height:151px; background:url(images/logo.png); text-indent:-9999px; border:none; cursor:pointer; } .logo:hover { opacity:0.9; } .signin{ width:69px; height:30px; background:url(images/signin.png); text-indent:-9999px; border:none; cursor:pointer; } .signin:hover { opacity:0.9; } .register{ width:79px; height:30px; background:url(images/register.png); text-indent:-9999px; border:none; cursor:pointer; } .register:hover { opacity:0.9; } .contact_Us{ width:53px; height:9px; background:url(images/Contact_Us.png); text-indent:-9999px; border:none; cursor:pointer; } .contact_Us:hover { opacity:0.9; } .code_of_Conduct{ width:84px; height:9px; background:url(images/Code_of_Conduct.png); text-indent:-9999px; border:none; cursor:pointer; } .code_of_Conduct:hover { opacity:0.9; } .privacy_policy{ width:65px; height:12px; background:url(images/Privacy_Policy.png); text-indent:-9999px; border:none; cursor:pointer; } .privacy_policy:hover { opacity:0.9; } .copyright{ width:148px; height:13px; background:url(images/Copyright.png); text-indent:-9999px; border:none; cursor:pointer; } .copyright:hover { opacity:0.9; } .slideshow{ width:301px; height:151px; background: url(slideshow.png), url(minecraft.png), url(tf2.png), url(CSS.png), url(GM.png), url(aos.png), url(CSGO.png), url(voip.png), text-indent:-9999px; border:none; cursor:pointer; } .slideshow:hover { opacity:0.9; } Div version source: <!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> <script type="text/javascript"> //<![CDATA[ window.__CF=window.__CF||{};window.__CF.AJS={"vig_key":{"sid":"c6d1454039dd49b1c8400bbfdf74df7a"},"trumpet":{"message":"XodusEN is undergoing background maintenance, that will provide performance & graphical improvements to our system, but will not hinder your experience across our services."},"ga_key":{"ua":"UA-35779435-1","ga_bs":"2"},"exprmntly":{"service_id":"7967"},"cdnjs":{"__h":"1","cdnjs":"MO,GF,FX,CS,JS"},"abetterbrowser":{"ie":"10"}}; //]]> </script> <script type="text/javascript"> //<![CDATA[ try{if (!window.CloudFlare) { var CloudFlare=[{verbose:0,p:0,byc:0,owlid:"cf",mirage:{responsive:0,lazy:0},oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/aav=1870252173/"},atok:"d6e39f49946fcb6d690f0d10d5a963f3",zone:"xodusen.com",rocket:"a",apps:{"vig_key":{"sid":"c6d1454039dd49b1c8400bbfdf74df7a"},"trumpet":{"message":"XodusEN is undergoing background maintenance, that will provide performance & graphical improvements to our system, but will not hinder your experience across our services."},"ga_key":{"ua":"UA-35779435-1","ga_bs":"2"},"exprmntly":{"service_id":"7967"},"cdnjs":{"__h":"1","cdnjs":"MO,GF,FX,CS,JS"},"abetterbrowser":{"ie":"10"}}}];document.write('<script type="text/javascript" src="//ajax.cloudflare.com/cdn-cgi/nexp/aav=4114775854/cloudflare.min.js"><'+'\/script>')}}catch(e){}; //]]> </script> <script type="text/javascript" src="//ajax.cloudflare.com/cdn-cgi/nexp/aav=1566821048/appsh.min.js"></script><script type="text/javascript">__CF.AJS.inith();</script><link rel="icon" type="image/png" href="http://www.xodusen.com/resources/images/favicon.png"> <title>Welcome to XodusEN</title> <meta name="description" content="This is the homepage of XodusEN. Xodus Entertainment Network is a unique & friendly Gaming Community that welcomes & realises the potential, and value within any user regardless of their origin. "> <meta name="keywords" content="XeN, Xodus, XEN, xen, Xodus Entertainment Network, gaming, community, PC, Steam, XBL, Xbox 360, PSN, Playstation, games, Gaming, Community, XodusEN, Gaming Network, Network, TF2, Server, CS:S, Minecraft, premium, servers, Counter-Strike: Source, Website, Homepage, Minecraftia"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/rocketscript" data-rocketsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/rocketscript" data-rocketsrc="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> <script type="text/rocketscript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); }); </script> <!--[if IE]> <script type="text/javascript"> window.location = "http://www.xodusen.com/ie/"; </script> <![endif]--> <script type="text/javascript"> /* <![CDATA[ */ var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-35779435-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); (function(b){(function(a){"__CF"in b&&"DJS"in b.__CF?b.__CF.DJS.push(a):"addEventListener"in b?b.addEventListener("load",a,!1):b.attachEvent("onload",a)})(function(){"FB"in b&&"Event"in FB&&"subscribe"in FB.Event&&(FB.Event.subscribe("edge.create",function(a){_gaq.push(["_trackSocial","facebook","like",a])}),FB.Event.subscribe("edge.remove",function(a){_gaq.push(["_trackSocial","facebook","unlike",a])}),FB.Event.subscribe("message.send",function(a){_gaq.push(["_trackSocial","facebook","send",a])}));"twttr"in b&&"events"in twttr&&"bind"in twttr.events&&twttr.events.bind("tweet",function(a){if(a){var b;if(a.target&&a.target.nodeName=="IFRAME")a:{if(a=a.target.src){a=a.split("#")[0].match(/[^?=&]+=([^&]*)?/g);b=0;for(var c;c=a[b];++b)if(c.indexOf("url")===0){b=unescape(c.split("=")[1]);break a}}b=void 0}_gaq.push(["_trackSocial","twitter","tweet",b])}})})})(window); /* ]]> */ </script> <meta name="pinterest" content="nopin"/></head> <body style="background-color:#d7d7d7;"><script type="text/javascript"> //<![CDATA[ try{(function(a){var b="http://",c="www.xodusen.com",d="/cdn-cgi/cl/",e="618e40fe1e01787d9cb9aa2f8abc52caf8a32796.gif",f=new a;f.src=[b,c,d,e].join("")})(Image)}catch(e){} //]]> </script> <div id="Table_01"> <div id="index-01_"> <img id="index_01" src="images/index_01.png" width="1020" height="9" alt=""/> </div> <div id="index-02_"> <img id="index_02" src="images/index_02.png" width="826" height="305" alt=""/> </div> <div id="Signin_"> <a href="http://s.xodusen.com/VrtqYm"> <img id="Signin" class="signin" src="images/Signin.png" width="69" height="30" border="0" alt=""/></a> </div> <div id="index-04_"> <img id="index_04" src="images/index_04.png" width="3" height="643" alt=""/> </div> <div id="Register_"> <a href="http://s.xodusen.com/WW3rpZ"> <img id="Register" class="register" src="images/Register.png" width="79" height="30" alt=""/></a> </div> <div id="index-06_"> <img id="index_06" src="images/index_06.png" width="43" height="643" alt=""/> </div> <div id="index-07_"> <img id="index_07" src="images/index_07.png" width="69" height="613" alt=""/> </div> <div id="index-08_"> <img id="index_08" src="images/index_08.png" width="79" height="613" alt=""/> </div> <div id="index-09_"> <img id="index_09" src="images/index_09.png" width="360" height="338" alt=""/> </div> <div id="Logo_"> <a href="http://s.xodusen.com/WW3rpZ"> <img class="logo" src="images/Logo.png" width="301" height="151" alt=""></a> </div> <div id="index-11_"> <img id="index_11" src="images/index_11.png" width="165" height="338" alt=""/> </div> <div id="index-12_"> <img id="index_12" src="images/index_12.png" width="301" height="187" alt=""/> </div> <div id="index-13_"> <img id="index_13" src="images/index_13.png" width="27" height="548" alt=""/> </div> <div id="Slideshow_" class="slideshow"> <a href="http://www.xodusen.com/community"> <img src="images/slideshow.png" width="960" height="305" alt=""></a> <a href="http://www.xodusen.com/mcurl"> <img src="images/minecraft.png" width="960" height="305" alt=""></a> <a href="steam://connect/74.121.188.194:27015"> <img src="images/tf2.png" width="960" height="305" alt=""></a> <a href="steam://connect/74.121.188.195:27015"> <img src="images/CSS.png" width="960" height="305" alt=""></a> <a href="steam://connect/74.121.188.197:27015"> <img src="images/GM.png" width="960" height="305" alt=""></a> <a href="aos://3267131722:32887"> <img src="images/aos.png" width="960" height="305" alt=""></a> <a href="steam://connect/74.121.188.196:27015"> <img src="images/CSGO.png" width="960" height="305" alt=""></a> </div> <div id="index-15_"> <img id="index_15" src="images/index_15.png" width="33" height="548" alt=""/> </div> <div id="index-16_"> <img id="index_16" src="images/index_16.png" width="960" height="155" alt=""/> </div> <div id="index-17_"> <img id="index_17" src="images/index_17.png" width="39" height="88" alt=""/> </div> <div id="Copyright_"> <a href="http://www.xodusen.com/community"> <img id="Copyright" src="images/Copyright.png" width="148" height="13" alt=""></a> </div> <div id="index-19_"> <img id="index_19" src="images/index_19.png" width="773" height="5" alt=""/> </div> <div id="index-20_"> <img id="index_20" src="images/index_20.png" width="526" height="83" alt=""/> </div> <div id="Privacy-Policy_"> <a href="http://s.xodusen.com/VhGEkH"> <img id="Privacy_Policy" src="images/Privacy_Policy.png" width="68" height="23" alt=""></a> </div> <div id="index-22_"> <img id="index_22" src="images/index_22.png" width="6" height="83" alt=""/> </div> <div id="Code-of-Conduct_"> <a href="http://s.xodusen.com/Tf5Gz7"> <img id="Code_of_Conduct" src="images/Code_of_Conduct.png" width="84" height="23" alt=""></a> </div> <div id="index-24_"> <img id="index_24" src="images/index_24.png" width="2" height="83" alt=""/> </div> <div id="Contact-Us_"> <a href="http://s.xodusen.com/T5EYsG"> <img id="Contact_Us" src="images/Contact_Us.png" width="57" height="23" alt=""></a> </div> <div id="index-26_"> <img id="index_26" src="images/index_26.png" width="30" height="83" alt=""/> </div> <div id="index-27_"> <img id="index_27" src="images/index_27.png" width="148" height="75" alt=""/> </div> <div id="index-28_"> <img id="index_28" src="images/index_28.png" width="68" height="60" alt=""/> </div> <div id="index-29_"> <img id="index_29" src="images/index_29.png" width="84" height="60" alt=""/> </div> <div id="index-30_"> <img id="index_30" src="images/index_30.png" width="57" height="60" alt=""/> </div> </div> <script type="text/javascript" src="//ajax.cloudflare.com/cdn-cgi/nexp/aav=4188748942/apps1.min.js"></script><script type="text/javascript">__CF.AJS.init1();</script></body> </html> My issue is, how can I achieve the same 'centered' results in the div format of the website, as the table format of the website? I have done some research to no avail, so I'd thought given the reputation of this site, that i'd post my issue here. Thank you in advance, ~ drea.

    Read the article

  • Comments show up in database, but only show up on my index page after a refresh.

    - by Truong
    Hi, I have AJAX, PHP, jquery, and mySQL in this very simple website I'm trying to make. All there is is a text area that sends data to the database and uses ajax\jquery to display that data onto the index page. For some reason though, I press submit and the data goes to the database, but I have to refresh the page myself to see that data on the page. I'm assuming that the problem has to do with my AJAX JQuery or even some mistake in the index. Also, when I type the text into the text area and press submit, the text remains in the textarea until I refresh the page. Haha, sorry if this is such a noob question.. I'm trying to learn. Thanks so much Here is the AJAX: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript"> $(function() { $(".submit").click(function() { var comment = $("#comment").val(); var post_id = $("#post").val(); var dataString = '&comment=' + comment if(comment=='') { alert('Fill something in please!'); } else { $("#flash").show(); $("#flash").fadeIn(400).html('<img src="noworries.jpg" /> '); $.ajax({ type: "POST", url: "commentajax.php", data: dataString, cache: false, success: function(html){ $("ol#update").append(html); $("ol#update li:last").fadeIn("slow"); $("#flash").hide(); } }); }return false; }); }); </script> Here is the index\form area: <body> <div id="container"><img src="banner.jpg" width="890" height="150" alt="title" /></div> <id="update" class="timeline"> <div id="flash"></div> <div id="container"> <form action="#" method="post"> <textarea name="comment" id="comment" cols="35" rows="4"></textarea><br /> <input name="submit" type="submit" class="submit" id="submit" value=" Submit Comment " /><br /> </form> </div> <id="update" class="timeline"> <?php include('config.php'); //$post_id value comes from the POSTS table $prefix="I'm happy when"; $sql=mysql_query("select * from comments order by com_id desc"); while($row=mysql_fetch_array($sql)) { $comment=$row['com_dis']; ?> <!--Displaying comments--> <div id="container"> <class="box"> <?php echo "$prefix $comment"; ?> </div> <?php } ?> Here is my commentajax.php <?php include('config.php'); if($_POST) { $comment=$_POST['comment']; $comment=mysql_real_escape_string($comment); mysql_query("INSERT INTO comments(com_id,com_dis) VALUES ('NULL', '$comment')"); } ?> <li class="box"><br /> <?php echo $comment; ?> </li> I'm sorry for so much code but I just started learning this four days ago and this is probably one of the last bugs until the website is functional.

    Read the article

  • Jquery change function don’t work properly

    - by user1493448
    I have same id, name two html select. If I change first html select then it’s work properly but If I change second html select then it’s not work. Please can someone point out what I may be doing wrong here? Many thanks. Here is my code: <html> <head> <title>the title</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("#name").change(function(){ $.post( "data.php", $("#testform").serialize(), function(data) { $('#stage1').html(data); } ); var str = $("#testform").serialize(); $("#stage2").text(str); }); }); </script> </head> <body> <div id="stage1" style="background-color:blue; color: white"> STAGE - 1 </div> <form id="testform"> <table> <tr> <td><p>Fruit:</p></td> <td> <select id="name" name="name[]"> <option>Apple</option> <option>Mango</option> <option>Orange</option> <option>Banana</option> </select> </td> </tr> <tr> <td><p>Fruit:</p></td> <td> <select id="name" name="name[]"> <option>Apple</option> <option>Mango</option> <option>Orange</option> <option>Banana</option> </select> </td> </tr> </table> </form> </body> </html> Php code: <?php $fruit=$_REQUEST["name"]; $n = count($fruit); for($i=0;$i<$n; $i++) { echo $fruit[$i]."<br/>"; } ?>

    Read the article

  • How to use multiple instances of a usercontrol (with jquery) on the same page

    - by Julian
    Hi All, I've been working on an usercontrol with a jquery timer in it. At first I had the jquery within the usercontrol. But when I add 2 of those controls to my page the second usercontrol isn't showing it's data very well. Now I've put the jquery into the mainpage and the usercontrol only uses the id's of the jquery. Here is my usercontrol: <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %> <style type="text/css"> #mainpanel { width: 145px; height: 123px; } </style> <div id="mainpanel"> <div> test</div> <div id="shortly" style="background-color: #FFFFFF"> </div> <button id="resetButton"> Reset </button> </div> Mainpage: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register Src="WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc1" %> <!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 runat="server"> <title>hoi</title> <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="Scripts/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script> <link href="Css/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script type="text/javascript" src="Scripts/jquery.countdown.js"></script> <script type="text/javascript"> $(document).ready(function () { $(function() { $("#mainpanel"); }); shortly = new Date(); shortly.setSeconds(shortly.getSeconds() + 5.5); $('#shortly').countdown({ until: shortly, onExpiry: liftOff, layout: '{sn}', }); $('#resetButton').click(function () { $('#mainpanel').effect("highlight", {}, 700 ); $('#shortly').effect("highlight", {}, 700 ); shortly = new Date(); shortly.setSeconds(shortly.getSeconds() + 5.5); $('#shortly').countdown('change', { until: shortly }); }); function liftOff() { // refresh the page window.location = window.location; } }); </script> </head> <body> <uc1:WebUserControl ID="WebUserControl1" runat="server" /> </body> </html> But still my usercontrols are acting weird, now my question is: "How can I make the SAME usercontrols work properly on ONE page?" Both of those use the same jquery code but the buttons etc. should only work within the usercontrol itself.

    Read the article

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

< Previous Page | 8 9 10 11 12 13 14 15  | Next Page >