Search Results

Search found 47712 results on 1909 pages for 'looking for a script'.

Page 276/1909 | < Previous Page | 272 273 274 275 276 277 278 279 280 281 282 283  | Next Page >

  • Perl CGI that sends a temporary loading page to client then later sends the actual results page

    - by Kurt W. Leucht
    I've wasted at least a half day of my company's time searching the Internet for an answer and I'm getting wrapped around the axle here. I can't figure out the difference between all the different technology choices (long polling, ajax streaming, comet, XMPP, etc.) and I can't get a simple hello world example working on my PC. I am running Apache 2.2 and ActivePerl 5.10.0. JavaScript is completely acceptable for this solution. All I want to do is write a simple Perl CGI script that when accessed, it immediately returns some HTML that tells the user to wait or maybe sends an animated GIF. Then without any user intervention (no mouse clicks or anything) I want the CGI script to at some time later replace the wait message or the animated GIF with the actual HTML results from their query. I know this is simple stuff and websites do it all the time, but I can't find a single working example that I can cut and paste onto my machine that will work. Here is my simple Hello World example that I've compiled from various Internet sources, but it doesn't seem to work. When I refresh this CGI URL in my web browser it prints nothing for 5 seconds, then it prints the PLEASE BE PATIENT web page, but not the results web page. What am I doing wrong? #!C:\Perl\bin\perl.exe use CGI; use CGI::Carp qw/fatalsToBrowser warningsToBrowser/; sub Create_HTML { my $html = <<EOHTML; <html> <head> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="expires" content="-1" /> <script type="text/javascript" > var xmlhttp=false; /*@cc_on @*/ /*@if (@_jscript_version >= 5) // JScript gives us Conditional compilation, we can cope with old IE versions. // and security blocked creation of the objects. try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } } @end @*/ if (!xmlhttp && typeof XMLHttpRequest!='undefined') { try { xmlhttp = new XMLHttpRequest(); } catch (e) { xmlhttp=false; } } if (!xmlhttp && window.createRequest) { try { xmlhttp = window.createRequest(); } catch (e) { xmlhttp=false; } } </script> <title>Ajax Streaming Connection Demo</title> </head> <body> Some header text. <p> <div id="response">PLEASE BE PATIENT</div> <p> Some footer text. </body> </html> EOHTML return $html; } my $cgi = new CGI; print $cgi->header; print Create_HTML(); sleep(5); print "<script type=\"text/javascript\">\n"; print "\$('response').innerHTML = 'Here are your results!';\n"; print "</script>\n";

    Read the article

  • Facebook require_login() in iFrame App

    - by LapKom
    Hi, I have serious problem with iframe application. I need to use many external JS libraries and other dynamic stuuf so FMBL application can't be done. When I call require_login() I get applicaition installing dialog when app is not already installed, which is ok. But then after authorization application enters an endless redirect loop with parameters like auth_token, installed and so. Yesterday I managed to fix this, but today it's broken again... What the heck is happening with FB? It's driving me crazy to find a sollution, none of ones found on net doesn't seem to be working. So far I tried: http://abhirama.wordpress.com/2010/03/07/facebook-iframe-xfbml-app/ (7th march 2010!) http://forum.developers.facebook.com/viewtopic.php?pid=156092 http://www.keywordintellect.com/facebook-development/how-to-set-up-a-facebook-iframe-application-in-php-in-5-minutes/ http://www.markdeepwell.com/2010/02/validating-a-facebook-session-within-an-iframe/ http://forum.developers.facebook.com/viewtopic.php?pid=210449 http://www.ajaxlines.com/ajax/stuff/article/facebook_fbml_rendering_in_iframe_application.php http://www.aratide.com/php/solving-the-break-out-issue-in-iframe-facebook-applications/ None of the above worked... According to those and some FB docs: http://wiki.developers.facebook.com/index.php/FB_RequireFeatures http://wiki.developers.facebook.com/index.php/Cross_Domain_Communication_Channel My example test files look as follow: <?php //Link in library. require_once '../application/vendor/Facebook/facebook.php'; //Authentication Keys $appapikey = 'XXXX'; $appsecret = 'XXXX'; //Construct the class $facebook = new Facebook($appapikey, $appsecret); //Require login $user_id = $facebook->require_login(); ?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> <title></title> </head> <body> <script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> This is you: <fb:name uid="<?php echo $user_id?>"></fb:name> <?php var_dump($facebook->$this->facebook->api_client->friends_get())?> <script type="text/javascript"> FB_RequireFeatures(["XFBML"], function(){ FB.Facebook.init("<?=$appapikey?>", "xd_receiver.html"); }); </script> </body> </html> And cross-domain file xd_receiver.html is: <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>cross-domain receiver page</title> </head> <body> <script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script> </body> </html> How do I get it working? I'm using Kohana framework to do this and already replaced header('Location') with url::redirect() in facebook php library.

    Read the article

  • rubygem Twitter4R Issues

    - by Leonardo Dario Perna
    Hi everyone, I'm trying to get started with twitter4r but I'm having some issues: Why I can't load the gem in IRB? $ sudo gem install twitter4r Successfully installed twitter4r-0.3.2 1 gem installed Installing ri documentation for twitter4r-0.3.2... Installing RDoc documentation for twitter4r-0.3.2... $ irb require 'rubygems' = false require 'twitter4r' LoadError: no such file to load -- twitter4r from /Library/Ruby/Site/1.8/rubygems/custom_require.rb:31:in `gem_original_require' from /Library/Ruby/Site/1.8/rubygems/custom_require.rb:31:in `require' from (irb):2 I've downloaded the http://files.rubyforge.vm.bytemark.co.uk/twitter4r/twitter4rails.post-0_2_4.zip app and it works only with twitter4r-0.2.4 and NOT with last version twitter4r-0.3.2: $ script/server ./script/../config/boot.rb:26:Warning: Gem::SourceIndex#search support for String patterns is deprecated, use #find_name = Booting Mongrel (use 'script/server webrick' to force WEBrick) = Rails application starting on http://0.0.0.0:3000 = Call with -d to detach = Ctrl-C to shutdown server ** Starting Mongrel listening at 0.0.0.0:3000 ** Starting Rails with development environment... Exiting /Library/Ruby/Site/1.8/rubygems/custom_require.rb:31:in `gem_original_require': no such file to load -- twitter/rails (MissingSourceFile) from /Library/Ruby/Site/1.8/rubygems/custom_require.rb:31:in `require' from /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/lib/ ruby/gems/1.8/gems/activesupport-1.4.2/lib/active_support/ dependencies.rb:495:in `require' from /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/lib/ ruby/gems/1.8/gems/activesupport-1.4.2/lib/active_support/ dependencies.rb:342:in `new_constants_in' from /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/lib/ ruby/gems/1.8/gems/activesupport-1.4.2/lib/active_support/ dependencies.rb:495:in `require' from /Users/leonardodarioperna/Projects/Kaaaki/marrakaaaki/ twitter4rails.post-0_2_4/config/environment.rb:64 from /Library/Ruby/Site/1.8/rubygems/custom_require.rb:31:in `gem_original_require' from /Library/Ruby/Site/1.8/rubygems/custom_require.rb:31:in `require' from /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/lib/ ruby/gems/1.8/gems/activesupport-1.4.2/lib/active_support/ dependencies.rb:495:in `require' ... 23 levels... from /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/lib/ ruby/gems/1.8/gems/rails-1.2.3/lib/commands/server.rb:39 from /Library/Ruby/Site/1.8/rubygems/custom_require.rb:31:in `gem_original_require' from /Library/Ruby/Site/1.8/rubygems/custom_require.rb:31:in `require' from script/server:3 Last thing, in the /config/environment.rb I need to specify: RAILS_GEM_VERSION = '1.2.3' unless defined? RAILS_GEM_VERSION if I use my last rails version: RAILS_GEM_VERSION = '2.3.4' unless defined? RAILS_GEM_VERSION I get this error: $ script/server -p3002 = Booting Mongrel = Rails 2.3.4 application starting on http://0.0.0.0:3000 /Library/Ruby/Site/1.8/rubygems.rb:280:in `activate': can't activate activerecord (= 1.15.6, runtime) for [], already activated activerecord-2.3.4 for ["rails-2.3.4"] (Gem::LoadError) from /Library/Ruby/Site/1.8/rubygems/custom_require.rb:35:in `require' from /Library/Ruby/Gems/1.8/gems/activesupport-2.3.4/lib/ active_support/dependencies.rb:156:in `require' from /Library/Ruby/Gems/1.8/gems/activesupport-2.3.4/lib/ active_support/dependencies.rb:521:in `new_constants_in' from /Library/Ruby/Gems/1.8/gems/activesupport-2.3.4/lib/ active_support/dependencies.rb:156:in `require' from /Library/Ruby/Gems/1.8/gems/twitter4r-0.2.4/lib/twitter/rails.rb: 6 from /Library/Ruby/Site/1.8/rubygems/custom_require.rb:31:in `gem_original_require' from /Library/Ruby/Site/1.8/rubygems/custom_require.rb:31:in `require' from /Library/Ruby/Gems/1.8/gems/activesupport-2.3.4/lib/ active_support/dependencies.rb:156:in `require' ... 8 levels... from /Library/Ruby/Gems/1.8/gems/rails-2.3.4/lib/commands/server.rb: 84 from /Library/Ruby/Site/1.8/rubygems/custom_require.rb:31:in `gem_original_require' from /Library/Ruby/Site/1.8/rubygems/custom_require.rb:31:in `require' from script/server:3 And that's all :-) Thank you!

    Read the article

  • integrating tinymce with asp .net MVC 4.0

    - by user1865670
    using ASP .NET MVC 4.0 , VS2012. In one of my page, I tried to integrate a WYSIWYG editor "TinyMCE". To integrate, I followed the following URL : .tugberkugurlu.com My view page is like : @model AboutModels @using FileUploadDemo.Models <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="Scripts/tinymce/jquery.tinymce.js" type="text/javascript"></script> @{ ViewBag.Title = "About"; } @using (Html.BeginForm()) { @Html.ValidationSummary(true) <fieldset> <legend>About</legend> <div class="editor-label"> @Html.LabelFor(model => model.Title) </div> <div class="editor-field"> @Html.EditorFor(model => model.Title) @Html.ValidationMessageFor(model => model.Title) </div> <div class="editor-label"> @Html.LabelFor(model => model.PostedOn) </div> <div class="editor-field"> @Html.EditorFor(model => model.PostedOn) @Html.ValidationMessageFor(model => model.PostedOn) </div> <div class="editor-label"> @Html.LabelFor(model => model.Tags) </div> <div class="editor-field"> @Html.EditorFor(model => model.Tags) @Html.ValidationMessageFor(model => model.Tags) </div> <div class="editor-label"> @Html.LabelFor(model => model.Content) </div> <div class="editor-field"> @Html.EditorFor(model => model.Content) @Html.ValidationMessageFor(model => model.Content) </div> <p> <input type="submit" value="Create" /> </p> <p> Posted Content : @ViewBag.HtmlContent </p> </fieldset> } Here my Model is like : public class AboutModels { public string Title { get; set; } public DateTime PostedOn { get; set; } public string Tags { get; set; } [UIHint("tinymce_jquery_full"), AllowHtml] public string Content { get; set; } } My about page loads with all features. "@html.EditorFor(model=>model.content)" also loads fine. but no "WYSIWYG" pane(i donno what it is called, the pane is used to edit my text written in the textarea(HTml.editorFor())) is loaded. In the runtime, Exception is thrown in jquery.tinymce.js file. Error Message : `Unhandled exception at line 86, column 11 in http://localhost:1706/Home/About 0x800a01b6 - Microsoft JScript runtime error: Object doesn't support this property or method` And give me two options, Continue or Break . If i continue, the page loads with features as i mentioned earlier. If i Break, then it stays in the jquery.tinymce.js file with a yellow text-background. I have no experience with Javascript/jquery. And new in ASP .NET MVC 4.0, actually this is my first try of web application in .net. I updated jquery from nuGet. What could be the possible ways to solve it?

    Read the article

  • Jquery loaded? Colorbox is available? Calling some js file via $.getScript are always downloading fr

    - by uzay95
    I am dynamically load js files with _tumIsler.js (_allStuff.js) <script src="../js/_tumJsler.js" type="text/javascript"></script> It contains: // url=> http: + // + localhost:4399 + /yabant/ // ---- ---- -------------- -------- // protocol + "//" + host + '/virtualDirectory/' var baseUrl = document.location.protocol + "//" + document.location.host + '/yabant/'; // If there is "~/" at the begining of url, replace it with baseUrl function ResolveUrl(url) { if (url.indexOf("~/") == 0) { url = baseUrl + url.substring(2); } return url; } // Attaching scripts to any tag function addJavascript(jsname, pos) { var th = document.getElementsByTagName(pos)[0]; var s = document.createElement('script'); s.setAttribute('type', 'text/javascript'); s.setAttribute('src', jsname); th.appendChild(s); } // I want to make sure jQuery is loaded? addJavascript(ResolveUrl('~/js/1_jquery-1.4.2.min.js'), 'head'); var loaded = false; // assume it didn't first and if it is change it to true function fControl() { // alert("JQUERY is loaded?"); if (typeof jQuery == 'undefined') { loaded = false; fTry2LoadJquery(); } else { loaded = true; fGetOtherScripts(); } } // Check is jQuery loaded fControl(); function fTry2LoadJquery() { // alert("JQUERY didn't load! Trying to reload..."); if (loaded == false) { setTimeout("fControl()", 1000); } else { return; } } function getJavascript(jsname, pos) { // I want to retrieve every script one by one $.ajaxSetup({ async: false, beforeSend: function() { $.ajaxSetup({ async: false, cache: true }); }, complete: function() { $.ajaxSetup({ async: false, cache: true }); }, success: function() { // } }); $.getScript(ResolveUrl(jsname), function() { /* ok! */ }); } function fGetOtherScripts() { // alert("Other js files will be load in this function"); getJavascript(ResolveUrl('~/js/5_json_parse.js'), 'head'); getJavascript(ResolveUrl('~/js/3_jquery.colorbox-min.js'), 'head'); getJavascript(ResolveUrl('~/js/4_AjaxErrorHandling.js'), 'head'); getJavascript(ResolveUrl('~/js/6_jsSiniflar.js'), 'head'); getJavascript(ResolveUrl('~/js/yabanYeni.js'), 'head'); getJavascript(ResolveUrl('~/js/7_ResimBul.js'), 'head'); getJavascript(ResolveUrl('~/js/8_HaberEkle.js'), 'head'); getJavascript(ResolveUrl('~/js/9_etiketIslemleri.js'), 'head'); getJavascript(ResolveUrl('~/js/bugun.js'), 'head'); getJavascript(ResolveUrl('~/js/yaban.js'), 'head'); getJavascript(ResolveUrl('~/embed/bitgravity/functions.js'), 'head'); } After all these js files are loaded, this line is executing to show UploadFile page inside the page when clicked to the button which id is "btnResimYukle" . <script type="text/javascript"> if (jQuery().colorbox) { alert("colorbox exists"); } else { alert("colorbox doesn't exist"); $.ajaxSetup({ cache: true, async: false }); $.getScript(ResolveUrl('~/js/3_jquery.colorbox-min.js'), function() { alert("Loaded ! "); $('#btnResimYukle').live('click', function() { $.fn.colorbox({ iframe: true, width: 700, height: 600, href: ResolveUrl('~/Yonetim/DosyaYukle.aspx') }); return false; }); }); } </script> First i want to ask you very good people, i am always calling js files with $.getScript function. Are they always downloading in every $.getScript requests? And if it is so, how can i prevent that? is this work: $.ajaxSetup({ cache: true, async: false }); Second, i am always getting this error when i press F5 or Ctrl+F5 : But when i press enter key on url, there is no error :s

    Read the article

  • passing input text value to ajax call

    - by amby
    Hi, I have to pass string entered in the input text to server method calling through jquery ajax. But its not going through. can please somebody tell me what i m doing wrong here. Below is the code: $.ajaxSetup({ cache: false timeout: 1000000}); function concatObject(obj) { strArray = []; //new Array for (prop in obj) { strArray.push(prop + " value :" + obj[prop]); } return strArray.join();} //var Eid = "stephen.gilroy1"; function testCAll() { //var ntid = $('#Eid').val(); $.ajax({ type: "POST", url: "Testing.aspx/SendMessage", //data: "{'ntid':'stephen.gilroy1'}", //working data: "{'ntid': $('#Eid').val()}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(result) { alert(result.d); resultData = eval("(" + result.d + ")"); $("#rawResponse").html(result.d); //$("#response").html(resultData.sn); }, error: function(result) { alert("jQuery Error:" + result.statusText); } });}$.ajaxSetup({ cache: false //timeout: 1000000 }); function concatObject(obj) { strArray = []; //new Array for (prop in obj) { strArray.push(prop + " value :" + obj[prop]); } return strArray.join(); } //var Eid = "stephen.gilroy1"; function testCAll() { //var ntid = $('#Eid').val(); $.ajax({ type: "POST", url: "Testing.aspx/SendMessage", //data: "{'ntid':'stephen.gilroy1'}", //working data: "{'ntid': $('#Eid').val()}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(result) { alert(result.d); resultData = eval("(" + result.d + ")"); $("#rawResponse").html(result.d); //$("#response").html(resultData.sn); }, error: function(result) { alert("jQuery Error:" + result.statusText); } }); } above is js file and below is its aspx file: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Testing.aspx.cs" Inherits="Testing" %> <!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></title> <script src="jquery.js" type="text/javascript"></script> <script src="Testing.js" type="text/javascript"></script> <script src="json2.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div> Employee's NTID: <input type="text" id = "Eid" name="Employee_NTID" /> <asp:GridView ID="GridView1" runat="server"> </asp:GridView> <br /> <br /> <input type="button" onclick="testCAll()" value = "Search"/> <div id="rawResponse"></div> <hr /> <div id="response"></div> </div> </form> </body> </html>

    Read the article

  • jQuery UI Dialog problem if modal is set to TRUE

    - by VansFannel
    Hello! I'm developing an ASP.NET WebForm application with Visual Studio 2008 SP1 and C#. I have the following ASPX page: <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("#dialog").dialog({ autoOpen: false, modal: true, buttons: { 'Ok': function() { __doPostBack('TreeNew', ''); $(this).dialog('close'); }, Cancel: function() { $(this).dialog('close'); } }, close: function() { }, open: function(type, data) { $(this).parent().appendTo("form"); } }); }); function ShowDialog() { $('#dialog').dialog('open'); } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:Button ID="TreeNew" runat="server" Text="Nuevo" OnClientClick="ShowDialog();return false;" onclick="TreeNew_Click"/> <asp:Label ID="Message" runat="server"></asp:Label> <div id="dialog_target"></div> <div id="dialog" title="Select content type"> <p id="validateTips">All form fields are required.</p> <asp:RadioButtonList ID="ContentTypeList" runat="server"> <asp:ListItem Value="1">Text</asp:ListItem> <asp:ListItem Value="2">Image</asp:ListItem> <asp:ListItem Value="3">Audio</asp:ListItem> <asp:ListItem Value="4">Video</asp:ListItem> </asp:RadioButtonList> </div> </div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </form> </body> </html> When modal is set to true the page stars to grow (I know that because both scroll bars are getting smaller, vertical bar faster than horizontal bar). Looking inside page source code I see that the following div is outside forms tag: <div class="ui-widget-overlay" style="z-index: 1001; width: 1280px; height: 65089px;" jQuery1267345392312="20"/> If I set modal to false, the error doesn't happen. I think the problem is that the div working as modal is outside the form. What do you think?

    Read the article

  • Python RSS Feeder + Jquery RSS Reader

    - by Panther24
    I'm trying to implement an RSS Feeder in python using PyRSS2Gen and it created an XML file. Now in jQuery I'm using Google Ajax API's RSS reader and trying to read it. I get an error saying something is wrong. I'm unable to figure out the issue. I've checked some documentation but not able to get it. This is how my xml file looks: <rss version="2.0"> <channel> <title>Andrew's PyRSS2Gen feed</title> <link> http://www.dalkescientific.com/Python/PyRSS2Gen.html </link> <description> The latest news about PyRSS2Gen, a Python library for generating RSS2 feeds </description> <lastBuildDate>Fri, 26 Mar 2010 13:10:55 GMT</lastBuildDate> <generator>PyRSS2Gen-1.0.0</generator> <docs>http://blogs.law.harvard.edu/tech/rss</docs> <item> <title>PyRSS2Gen-0.0 released</title> <link> http://www.dalkescientific.com/news/030906-PyRSS2Gen.html </link> <description> Dalke Scientific today announced PyRSS2Gen-0.0, a library for generating RSS feeds for Python. </description> <guid isPermaLink="true"> http://www.dalkescientific.com/news/030906-PyRSS2Gen.html </guid> <pubDate>Sat, 06 Sep 2003 21:31:00 GMT</pubDate> </item> <item> <title>Thoughts on RSS feeds for bioinformatics</title> <link> http://www.dalkescientific.com/writings/diary/archive/2003/09/06/RSS.html </link> <description> One of the reasons I wrote PyRSS2Gen was to experiment with RSS for data collection in bioinformatics. Last year I came across... </description> <guid isPermaLink="true"> http://www.dalkescientific.com/writings/diary/archive/2003/09/06/RSS.html </guid> <pubDate>Sat, 06 Sep 2003 21:49:00 GMT</pubDate> </item> </channel> </rss> And my JS looks like this <!-- ++Begin Dynamic Feed Wizard Generated Code++ --> <!-- // Created with a Google AJAX Search and Feed Wizard // http://code.google.com/apis/ajaxsearch/wizards.html --> <!-- // The Following div element will end up holding the actual feed control. // You can place this anywhere on your page. --> <!-- Google Ajax Api --> <script src="../js/jsapi.js" type="text/javascript"></script> <!-- Dynamic Feed Control and Stylesheet --> <script src="../js/gfdynamicfeedcontrol.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="../css/gfdynamicfeedcontrol.css"> <script type="text/javascript"> function LoadDynamicFeedControl() { var feeds = [ {title: 'Demo', url: 'wcarss.xml' }]; var options = { stacked : false, horizontal : false, title : "" } new GFdynamicFeedControl(feeds, 'feed-control', options); } // Load the feeds API and set the onload callback. google.load('feeds', '1'); google.setOnLoadCallback(LoadDynamicFeedControl); </script> <!-- ++End Dynamic Feed Control Wizard Generated Code++ --> Can some help me and tell me what I'm doing wrong here? NOTE: Does the XML file have to be deployed? Cause currently its in my local machine and I'm trying to just call it.

    Read the article

  • jQuery Accordion Plugin: removeClass('selected')

    - by mheppler9d
    I am using the Accordion menu to filter a data table. The menu contains two filters, with multiple options under each. You can only have ONE filter selected at a time. If you click between the two options under the first filter, the style class, 'selected' is added and removed without a problem. If you click an option under the second filter though, it DOESN'T remove the 'selected' class from the first filter. Any help would be appreciated. Thank you. <script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script> <script src="http://jquery.bassistance.de/accordion/jquery.accordion.js" type="text/javascript"></script> <div> <script type="text/javascript"> // <![CDATA[ jQuery.noConflict(); jQuery(document).ready(function(){ jQuery('#navigation').accordion({active: 'h3.selected', header: 'h3.head', autoheight: false, }); jQuery('.xtraMenu').accordion({active: 'h4.selected',header: 'h4.head', autoheight: false, }); }); // ]]> </script> <style type="text/css"> h3, h4 {font-weight: normal} h3.selected, h4.selected {font-weight:bold;} </style> <ul class="basic" id="navigation"> <li> <h3 class="head"><a href="">Filter by Organization</a></h3> <ul> <li> <ul class="xtraMenu basic"> <li> <h4 class="head"><a href="">Association</a></h4> </li> <li> <h4 class="head"><a href="">Business</a></h4> </li> </ul> </li> </ul> </li> <li> <h3 class="head"><a href="">Filter by Type</a></h3> <ul> <li> <ul class="xtraMenu basic"> <li> <h4 class="head"><a href="">Basic</a></h4> </li> <li> <h4 class="head"><a href="">Advanced</a></h4> </li> </ul> </li> </ul> </li> </ul> </div>

    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

  • Ad Server does not serve ads in Firefox, but works fine in Chrome, IE, & Safari!?

    - by HipHop-opatamus
    I'm having a strange (likely JavaScript) related issue. I'm running Open X Ad Server ( http://www.openx.org ) which serves ads to the website http://upsidedowndogs.com . The ads load fine every time when visiting the site via Chrome, IE, or Safari, but sometimes don't load at all in FireFox - Hence, it is a client side issue, which leads me to believe its something up with the javascript. The fact that the problem is intermittent, and does not through any error codes to FireBug, also doesn't make it any easier to diagnose and address. Any ideas how to diagnose / address this issue? Thanks! Here is the code generated by OpenX (it goes in the page header - additional code is then used in each ad unit, as seen on the page) if (typeof(OA_zones) != 'undefined') { var OA_zoneids = ''; for (var zonename in OA_zones) OA_zoneids += escape(zonename+'=' + OA_zones[zonename] + "|"); OA_zoneids += '&amp;nz=1'; } else { var OA_zoneids = escape('1|2|3|4'); } if (typeof(OA_source) == 'undefined') { OA_source = ''; } var OA_p=location.protocol=='https:'?'https://ads.offleashmedia.com/server/www/delivery/spc.php':'http://ads.offleashmedia.com/server/www/delivery/spc.php'; var OA_r=Math.floor(Math.random()*99999999); OA_output = new Array(); var OA_spc="<"+"script type='text/javascript' "; OA_spc+="src='"+OA_p+"?zones="+OA_zoneids; OA_spc+="&amp;source="+escape(OA_source)+"&amp;r="+OA_r; OA_spc+=(document.charset ? '&amp;charset='+document.charset : (document.characterSet ? '&amp;charset='+document.characterSet : '')); if (window.location) OA_spc+="&amp;loc="+escape(window.location); if (document.referrer) OA_spc+="&amp;referer="+escape(document.referrer); OA_spc+="'><"+"/script>"; document.write(OA_spc); function OA_show(name) { if (typeof(OA_output[name]) == 'undefined') { return; } else { document.write(OA_output[name]); } } function OA_showpop(name) { zones = window.OA_zones ? window.OA_zones : false; var zoneid = name; if (typeof(window.OA_zones) != 'undefined') { if (typeof(zones[name]) == 'undefined') { return; } zoneid = zones[name]; } OA_p=location.protocol=='https:'?'https://ads.offleashmedia.com/server/www/delivery/apu.php':'http://ads.offleashmedia.com/server/www/delivery/apu.php'; var OA_pop="<"+"script type='text/javascript' "; OA_pop+="src='"+OA_p+"?zoneid="+zoneid; OA_pop+="&amp;source="+escape(OA_source)+"&amp;r="+OA_r; if (window.location) OA_pop+="&amp;loc="+escape(window.location); if (document.referrer) OA_pop+="&amp;referer="+escape(document.referrer); OA_pop+="'><"+"/script>"; document.write(OA_pop); } var OA_fo = ''; OA_fo += "<"+"script type=\'text/javascript\' src=\'http://ads.offleashmedia.com/server/www/delivery/fl.js\'><"+"/script>\n"; document.write(OA_fo);

    Read the article

  • jQuery AJAX (google PageRank)

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

    Read the article

  • twitter bootstrap collapsable nav menu

    - by clifgray
    I am using twitter bootstrap on my web app to do all of the styling and everything is great for the most part. The problem is that my nav bar, once collapsed, will not drop down when I click the dropdown icon. I have listed my HTML but I think the problem is with my javascript seeing as this fiddle with the exact same code: http://jsfiddle.net/YWUmb/30/ works just fine. <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="/">Exployre</a> <div class="nav-collapse"> <ul class="nav"> <li><a href="/">Home</a></li> <li><a href="/profile">Profile</a></li> <li><a href="/sponsors">Sponsors</a></li> <li><a href="/working">Exployrers</a></li> <li><a href="/about">About</a></li> <li><a href="/share">Share</a></li> <li> {% if user %} User: {{ user }}<br> <a href="{{ logout }}">Logout</a> {% else %} <a href="/login">Signin or Register</a> {% endif %} <li> <a href="/profile"> {% if visits %} {% if visits > 10 %} Prestige: {{ visits }} {% elif visits > 5 %} {% endif %} {% endif %} </a> </li> <li> <form action="/search" class="navbar-search"> <div> <input type="text" placeholder="Search" class="search-query" name="q" size="55"/> </div> </form> <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script> </li> </ul> </div><!--/.nav-collapse --> </div> </div> </div> <script type="text/javascript" src="/static/js/bootstrap.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> Is there anything wrong with my source code links or anything additional that I need to do to make it work?

    Read the article

  • Customize jquery ui progress bar

    - by P. Sohm
    I'd like to add some values under the jquery progress like My current code is : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"> </script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script> <style type="text/css"> .ui-progressbar { height:2em; text-align: left; overflow: hidden; } .ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; } .ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; } .ui-widget .ui-widget { font-size: 1em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; } .ui-widget-content { border: 1px solid #dddddd; background: #EDEFF1 50% top repeat-x; color: #333333; } .ui-widget-content a { color: #333333; } .ui-widget-header { border: 1px solid #e78f08; background: #AB3B3B 50% 50% repeat-x; color: #ffffff; font-weight: bold; } .ui-widget-header a { color: #ffffff; } .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -khtml-border-top-right-radius: 4px; border-top-right-radius: 4px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } #progressbar { float: right; margin-right: 100px; width: 120px; margin-top: -30px } #progress { position: relative} </style></head> <body> <script type="text/javascript"> $().ready(function() { $("#progressbar").progressbar({ value: 29 }); }); </script> <div id="progressbar"></div> </body></html> I didn't find how to have this result ... Another possibility would be to add some text at the right of the progress bar (I tryied with a but it comes in the line after)

    Read the article

  • How do I search using the Google Maps API?

    - by Thomas
    Hello all, I'm trying to figure out how to search for nearby businesses in an iPhone app using the Google Maps API. I'm completely new to Javascript, and have waded through some of Google's sample code easily enough. I found how to grab the user's current location. Now I want to search for "restaurants" near that location. I'm just building on the sample code from here. I'll post it below with my changes anyway, just in case. <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps JavaScript API v3 Example: Map Geolocation</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script> <script type="text/javascript"> var currentLocation; var detroit = new google.maps.LatLng(42.328784, -83.040877); var browserSupportFlag = new Boolean(); var map; var infowindow = new google.maps.InfoWindow(); function initialize() { var myOptions = { zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); map.enableGoogleBar(); // Try W3C Geolocation method (Preferred) if(navigator.geolocation) { browserSupportFlag = true; navigator.geolocation.getCurrentPosition(function(position) { // TRP - Save current location in a variable (currentLocation) currentLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); // TRP - Center the map around current location map.setCenter(currentLocation); }, function() { handleNoGeolocation(browserSupportFlag); }); } else { // Browser doesn't support Geolocation browserSupportFlag = false; handleNoGeolocation(browserSupportFlag); } } function handleNoGeolocation(errorFlag) { if (errorFlag == true) { // TRP - Default location is Detroit, MI currentLocation = detroit; contentString = "Error: The Geolocation service failed."; } else { // TRP - This should never run. It's embedded in a UIWebView, running on iPhone contentString = "Error: Your browser doesn't support geolocation."; } // TRP - Set the map to the default location and display the error message map.setCenter(currentLocation); infowindow.setContent(contentString); infowindow.setPosition(currentLocation); infowindow.open(map); } </script> </head> <body style="margin:0px; padding:0px;" onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>

    Read the article

  • jQuery not support rich:hotKey in jsf tag

    - by eswaramoorthy-nec
    Hi, i have used rich:hotKey for h:inputText in my jsp page. And also i wrote jQuery for get the textBox value. When i use jquery, that time rich:kotKey not worked sample.jsp <%@page contentType="text/html" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j" %> <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <f:view> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> <script type="text/javascript" src="../../resource/js/jquery.min.js"/> <script type="text/javascript"> function typedName() { //Get The value using styleClass id var userName = jQuery.trim($('.textBox').val()); alert("Name is : " + userName); } // If i am not use above typedName() script and load src, then // the following testButton() clicked script perfectly worked. function testButton() { alert("Test Button Clicked"); } </script> </head> <body> <h:form> <rich:panel> <h:outputText value="Enter your Name : "/> <h:inputText id="textBox" styleClass="textBox" value ="" />&nbsp; <a4j:commandButton id="nameButton" value="NameButton" onclick="typedName();"/><br> <a4j:commandButton id="testButton" value="TestButton" onclick="testButton();" /> <%--HotKey for text Box and focus to testButton --%> <rich:hotKey key="return" selector="#textBox" handler="#{rich:element('testButton')}.click(); event.stopPropagation();event.preventDefault(); return false;"/> </rich:panel> </h:form> </body> </f:view> If i am not include the jquery, then that time i hit the enter button from text box, then automatically called testButton() script. If i include the Jquery, then rich:hotkey not work. I am also Used , var $J = jQuery.noConflict(); . But this time also not work jQuery. I hope help me about this. Thanks for your effort.

    Read the article

  • Problem with jQuery plugin TinySort

    - by Volmar
    I'm trying to sort a list with the help of jQuery and the TinySort-plugin, and it works good but one thing is not working as i want. My Code is: <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>TinySort problem</title> <script type="text/javascript" src="http://so.volmar.se/www/js/jquery.js"></script> <script type="text/javascript" src="http://so.volmar.se/www/js/jquery.tinysort.min.js"></script> <script type="text/javascript"> function pktsort(way){ if($("div#paket>ul>li.sortdiv>a#s_abc").text() == "A-S"){ $("div#paket>ul>li.sortdiv>a#s_abc").text("S-A"); $("div#paket ul li.sortable").tsort("",{place:"org",returns:true,order:"desc"}); }else{ $("div#paket>ul>li.sortdiv>a#s_abc").text("A-S"); $("div#paket ul li.sortable").tsort("",{place:"org",returns:true,order:"asc"}); } } </script> </head> <body> <div id="paket" title="Paket"> <ul class="rounded"> <li class="sortdiv">Sort: <a href="#" onclick="pktsort();" class="active_sort" id="s_abc">A-S</a></li> <li class="sortable">Almost Famous</li> <li class="sortable">Children of Men</li> <li class="sortable">Coeurs</li> <li class="sortable">Colossal Youth</li> <li class="sortable">Demonlover</li> <li class="sortable">Femme Fatale</li> <li class="sortable">I'm Not There</li> <li class="sortable">In the City of Sylvia</li> <li class="sortable">Into the Wild</li> <li class="sortable">Je rentre à la maison</li> <li class="sortable">King Kong</li> <li class="sortable">Little Miss Sunshine</li> <li class="sortable">Man on Wire</li> <li class="sortable">Milk</li> <li class="sortable">Monsters Inc.</li> <li class="sortable">My Winnipeg</li> <li class="sortable">Ne touchez pas la hache</li> <li class="sortable">Nói albinói</li> <li class="sortable">Regular Lovers</li> <li class="sortable">Shaun of the Dead</li> <li class="sortable">Silent Light</li> <li class="addmore"><b>This text is not supposed to move</b></li> </ul> </div> </body> </html> you can try it out at: http://www.volmar.se/list-prob.html MY PROBLEM IS: I don't want the <li class="addmore"> to move above all the <li class="sortable">-elements when i press the sort-link. i wan't it to always be in the bottom. you can find documentation of the TinySort plugin here. i've tried loads of combinations with place and returns propertys but i just can't get it right.

    Read the article

  • jQuery sortable Div's

    - by kai lange
    is it possible to sort direct between two or more div's/boxe's and return the complete data (var order = ...) ? Online Demo: http://jsbin.com/alegu4 <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery Dynamic Drag'n Drop</title> <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script> <style> body { font-family: Arial, Helvetica, sans-serif; font-size: 16px; margin-top: 10px; } ul { margin: 0; } #s1,#s2 { float: left; width: 400px; } #s1 li,#s2 li { list-style: none; margin: 0 0 4px 0; padding: 10px; background-color:#00CCCC; border: #CCCCCC solid 1px; color:#fff; } </style> <script type="text/javascript"> $(document).ready(function(){ $(function() { $("#s1 ul,#s2 ul").sortable({ opacity: 0.6, cursor: 'move', update: function() { var order = $(this).sortable("serialize") + '&action=updateRecordsListings'; //$.post("updateDB.php", order); alert(order); } }); }); }); </script> </head> <body> <div id="box"> <div class="box" id="s1"> <ul> <li id="recordsArray_1">1. Lorem ipsum dolor sit amet, consetetur</li> <li id="recordsArray_2">2. Lorem ipsum dolor sit amet, consetetur</li> <li id="recordsArray_3">3. Lorem ipsum dolor sit amet, consetetur</li> <li id="recordsArray_4">4. Lorem ipsum dolor sit amet, consetetur</li> </ul> </div> <div class="box" id="s2"> <ul> <li id="recordsArray_5">5. Lorem ipsum dolor sit amet, consetetur</li> <li id="recordsArray_6">6. Lorem ipsum dolor sit amet, consetetur</li> <li id="recordsArray_7">7. Lorem ipsum dolor sit amet, consetetur</li> <li id="recordsArray_8">8. Lorem ipsum dolor sit amet, consetetur</li> </ul> </div> </div> </body> </html> Please note it's not the same like my other post - thanks!

    Read the article

  • Craziest JavaScript behavior I've ever seen

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

    Read the article

  • jQuery: Div elements are not showing up

    - by Legend
    I am adapting the Coverflow technique to work with a div. Following is the html: <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> body,html { margin: 0; padding: 0; background: #000; height: 100%; color: #eee; font-family: Arial; font-size: 10px; } div.magnifyme { height: 80px; padding: 80px; position: absolute; top: 0px; left: 0px; width: 8000px; } div.wrapper { margin: 0px; height: 470px; /*border: 2px solid #999;*/ overflow: hidden; padding-left: 40px; right: 1px; width: 824px; position: relative; } div.container {position: relative; width: 854px; height: 480px; background: #000; margin: auto;} div.nav {position: absolute; top: 10px; width: 20%; height: 10%; right: 1px; } div.magnifyme div { position: absolute; width: 300px; height: 280px; float: left; margin: 5px; position: relative; border: 2px solid #999; background: #500; } </style> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="ui.coverflow.js"></script> <script type="text/javascript"> $(function() { $("div.magnifyme").coverflow(); $("#add").click(function() { location.reload(); $(".magnifyme").append("<div id=\"div5\">hello world</div>"); $("div.magnifyme").coverflow(); }); }); </script> </head> <body> <div class="container"> <div class="wrapper"> <div class="magnifyme"> <div id="div0">This is div 0</div> <div id="div1">This is div 1</div> <div id="div2">This is div 2</div> <div id="div3">This is div 3</div> <div id="div4">This is div 4</div> </div> </div> <div class="nav"> <button type="button" id="add">Add to Deck</button> </div> </div> </body> </html> The coverflow function (included as a js file in the head section) is here. When I click the button, I was expecting it to add a DIV to the already present deck. For some reason, it doesn't show the newly added DIV. I tried calling the coverflow() function after I added the new element but that didn't work either. Is there any way I can make this work?

    Read the article

  • Unable to show Desktop Notifications using Google Chrome

    - by Praveen Kumar
    I followed the instructions as given in Using The Notifications API. Also I faced many problems like the below, because I added the document.querySelector() inside the <head> part: Uncaught TypeError: Cannot call method 'addEventListener' of null Now I have the below source, where I am able to Check Notification Support, and Check Notification Permissions links. Guide me how to bring in notifications in a simpler way. Also, I tried this: $("#html").click(function() { if (window.webkitNotifications.checkPermission() == 0) { createNotificationInstance({ notificationType: 'html' }); } else { window.webkitNotifications.requestPermission(); } }); Now I am stuck with this source. I need to generate HTML & Simple Notifications. Am I missing something? Please guide me. Source: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Desktop Notifications</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> function checkNotifications() { if (window.webkitNotifications) alert("Notifications are supported!"); else alert("Notifications are not supported for this Browser/OS version yet."); } function createNotificationInstance(options) { if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED if (options.notificationType == 'simple') { return window.webkitNotifications.createNotification('icon.png', 'Notification Title', 'Notification content...'); } else if (options.notificationType == 'html') { return window.webkitNotifications.createHTMLNotification('http://localhost/'); } } else { window.webkitNotifications.requestPermission(); } } </script> <style type="text/css"> * {font-family: Verdana, sans-serif;} body {font-size: 10pt; margin: 0; padding: 0;} p {margin: 5px;} a {color: #09f; text-decoration: none;} a:hover {color: #f00;} </style> </head> <body> <p><strong>Desktop Notifications</strong></p> <p>Lets see how the notifications work in this browser.</p> <p> <a href="#" onclick="checkNotifications(); return false;">Check Notification Support</a>. Next <a href="#" onclick="alert('Notifications are ' + ((window.webkitNotifications.checkPermission() == 0) ? '' : 'not ') + 'allowed!'); return false;">Check Notification Permissions</a> and if permissions are not there, <a href="#" onclick="window.webkitNotifications.requestPermission(); return false;">Request Permissions</a>. Create a <a href="#" id="text">Simple Notification</a> or <a href="#" id="html">HTML Notification</a>. </p> </body> <script type="text/javascript"> document.querySelector("#html").addEventListener('click', function() { if (window.webkitNotifications.checkPermission() == 0) { createNotificationInstance({ notificationType: 'html' }); } else { window.webkitNotifications.requestPermission(); } }, false); document.querySelector("#text").addEventListener('click', function() { if (window.webkitNotifications.checkPermission() == 0) { createNotificationInstance({ notificationType: 'simple' }); } else { window.webkitNotifications.requestPermission(); } }, false); </script> </html>

    Read the article

  • jQuery gallery scrolling effect with ease

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

    Read the article

  • Hover/Fadeto/Toggle Multiple Class Changing

    - by Slick Willis
    So my problem is rather simple and complex at the same time. I am trying to create links that fade in when you mouseover them and fade out when you mouseout of them. At the same time that you are going over them I would like a pic to slide from the left. This is the easy part, I have every thing working. The image fades and another image slides. I did this by using a hover, fadeto, and toggle("slide"). I would like to do this in a table format with multiple images being able to be scrolled over and sliding images out. The problem is that I am calling my sliding image to a class and when I hover over the letters both images slide out. Does anybody have a solution for this? I posted the code that I used below: <html> <head> <script type='text/javascript' src='http://accidentalwords.squarespace.com/storage/jquery/jquery-1.4.2.min.js'></script> <script type='text/javascript' src='http://accidentalwords.squarespace.com/storage/jquery/jquery-custom-181/jquery-ui-1.8.1.custom.min.js'></script> <style type="text/css"> .text-slide { display: none; margin: 0px; width: 167px; height: 50px; } </style> <script> $(document).ready(function(){ $(".letterbox-fade").fadeTo(1,0.25); $(".letterbox-fade").hover(function () { $(this).stop().fadeTo(250,1); $(".text-slide").toggle("slide", {}, 1000); }, function() { $(this).stop().fadeTo(250,0.25); $(".text-slide").toggle("slide", {}, 1000); }); }); </script> </head> <body style="background-color: #181818"> <table> <tr> <td><div class="letterbox-fade"><img src="http://accidentalwords.squarespace.com/storage/sidebar/icons/A-Letterbox-Selected.png" /></div></td> <td><div class="text-slide"><img src="http://accidentalwords.squarespace.com/storage/sidebar/icons/TEST.png" /></div></td> </tr> <tr> <td><div class="letterbox-fade"><img src="http://accidentalwords.squarespace.com/storage/sidebar/icons/B-Letterbox-Selected.png" /></div></td> <td><div class="text-slide"><img src="http://accidentalwords.squarespace.com/storage/sidebar/icons/TEST.png" /></div></td> </tr> </table> </body> </html>

    Read the article

  • Geolocation through Android's GPS Provider on a website?

    - by Corey Ogburn
    I'm trying to get the geolocation of the mobile device in a regular website, not a webview of an application or anything native like that. I'm getting a location, but it's highly inaccurate, the accuracy comes back as 3230 or some other outrageous number. I'm assuming that's in meters, either way it's not nearly accurate enough. By comparison, the same webpage on a laptop gets an accuracy of 30-40. My first thought was that it was using the Network Provider instead of the GPS Provider, telling me where I am based on tower location and reach. A little research later I found enableHighAccuracy and set it true in the options that I pass. After including that, I still notice no difference. Here's the test page's HTML/javascript: <html> <head> <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script type="text/javascript"> function OnLoad() { $("#Status").text("Init"); if (navigator.geolocation) { $("#Status").text("Supports Geolocation"); navigator.geolocation.getCurrentPosition(HandleLocation, LocationError, { enableHighAccuracy: true }); $("#Status").text("Sent position request..."); } else { $("#Status").text("Doesn't support geolocation"); } } function HandleLocation(position) { $("#Status").text("Received response:"); $("#Position").text("(" + position.coords.latitude + ", " + position.coords.longitude + ") accuracy: " + position.coords.accuracy); var loc = new Microsoft.Maps.Location(position.coords.latitude, position.coords.longitude); GetMap(loc); } function LocationError(error) { switch(error.code) { case error.PERMISSION_DENIED: alert("Location not provided"); break; case error.POSITION_UNAVAILABLE: alert("Current location not available"); break; case error.TIMEOUT: alert("Timeout"); break; default: alert("unknown error"); break; } } function GetMap(loc) { var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {credentials: "Aj59meaCR1e7rNgkfQy7j08Pd3mzfP1r04hGesGmLe2a3ZwZ3iGecwPX2SNPWq5a", center: loc, mapTypeId: Microsoft.Maps.MapTypeId.road, zoom: 15}); } </script> </head> <body onload="javascript:OnLoad()"> <div id="Status"></div> <div id="Position"></div><br/> <div id='mapDiv' style="position:relative; width:600px; height:400px;"></div> </body> </html> I'm testing this on a rooted MyTouch 3G running Cyanogen 6.1 stable, Android 2.2 and GPS is enabled. In case rooting was a problem, I have also had various friends and coworkers try the webpage on their non-rooted 2.0+ Android devices. Each phone had various effects on the accuracy, but none were better than 1000, I attribute this to the different carriers. I have not (but eventually will) tested with iPhone or other location-aware cell phones.

    Read the article

  • Expanding Rows for Unique Checkboxes

    - by Marc Morgan
    I was just recently given a project for my job to write a script that compares two mysql databases and print out information into an html table. Currently, I am trying to insert a checkbox by each individual's name and when selected, rows pertaining to that individual will expand underneath the person's name. I am combining javascript into my script to do this, although I really have no experience is it. The problem I am having is that when any checkbox is selected, all the rows for each individual is expanding instead of the rows pertaining only to the one individual selected. Here is the coding so far: <?php $link = mysql_connect ($server = "harris.lib.fit.edu", $username = "", $password = "") or die(mysql_error()); $db = mysql_select_db ("library-test") or die(mysql_error()); $ids = mysql_query("SELECT * FROM `ifc_studylog`") or die(mysql_error()); //not single quotes (tilda apostrophy) $x=0; $n=0; while($row = mysql_fetch_array( $ids )) { $tracksid1[$x] = $row['fitID']; $checkin[$x] = $row['checkin']; $checkout[$x] = $row['checkout']; $n++; $x++; } $names = mysql_query("SELECT * FROM `ifc_users`") or die(mysql_error()); //not single quotes (tilda apostrophy) $x=0; while($row = mysql_fetch_array( $names )) { $tracksnamefirst[$x] = $row['firstName']; $tracksnamesecond[$x] = $row['lastname']; $tracksid2[$x] = $row['fitID']; $tracksuser[$x] = $row['tracks']; $x++; } $x=0; foreach($tracksid2 as $comparename) { $chk = strval($x); ?> <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script> <script type='text/javascript'> $(window).load(function () { $('.varx').click(function () { $('.text').toggle(this.checked); });}); </script> <?php echo '<td><input id = "<?=$chk?>" type="checkbox" class="varx" /></td>'; echo '<td align="center">'.$comparename.'</td>'; echo'<td align="center">'.$tracksnamefirst[$x].'</td>'; echo'<td align="center">'.$tracksnamesecond[$x].'</td>'; $z=0; foreach($tracksid1 as $compareid) { $HH=0; $MM =0; $SS =0; if($compareid == $comparename)// && $tracks==$tracksuser[$x]) { $SS = sprintf("%02s",(($checkout[$z]-$checkin[$z])%60)); $MM = sprintf("%02s",(($checkout[$z]-$checkin[$z])/60 %60)); $HH = sprintf("%02s",(($checkout[$z]-$checkin[$z])/3600 %24)); // echo'<td align="center">'.$HH.':'.$MM.':'.$SS.'</td>'; echo '</tr>'; echo '<tr>'; echo "<td id='txt' class='text' align='center' colspan='2' style='display:none'></td>"; echo "<td id='txt' class='text' align='center' style='display:none'>".$checkin[$z]."</td>"; echo '</tr>'; } echo '<tr>'; $z++; echo '</tr>'; } $x++; } } ?> Any Help is appreciated and sorry if I am too vague on the subject. The username and password is left off for security purposes.

    Read the article

< Previous Page | 272 273 274 275 276 277 278 279 280 281 282 283  | Next Page >