Search Results

Search found 1516 results on 61 pages for 'doctype'.

Page 42/61 | < Previous Page | 38 39 40 41 42 43 44 45 46 47 48 49  | Next Page >

  • Why is FF on OS X loosing jQuery-UI in click event handler?

    - by Jean-François Beauchamp
    In a web page using jQUery 1.7.1 and jQUery-UI 1.8.18, if I output $.ui in an alert box when the document is ready, I get [object Object]. However when using Firefox, if I output $.ui in a click event handler, I get 'undefined' as result. With other browsers (latest versions of IE, Chrome and Safari), the result is still [object Object] when clicking on the link. Here is my HTML Page: <!doctype html> <html> <head> <title></title> <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script> <script src="Scripts/jquery-ui-1.8.18.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { alert($.ui); // ALERT A $(document).on("click", ".dialogLink", function () { alert($.ui); // ALERT B return false; }); }); </script> </head> <body> <a href="#" class="dialogLink">Click me!</a> </body> </html> In this post, I reduced to its simplest form another problem I was having described here: $(this).dialog is not a function. I created a new post for the sake of clarity, since the real question is different from the original one now that pin-pointed where the problem resided. UPDATE: IF I replace my alerts with simply alert($); I get this result for alert A: function (selector, context) { return new jQuery.fn.init(selector, context, rootjQuery); } and this one for alert B: function (a, b) { return new d.fn.init(a, b, g); } This does not make sense to me, although I may not be understanding well enough what $ is... UPDATE 2: I can only reproduce this problem using Firefox on OS X. On Firefox running on Windows 7, everything is fine.

    Read the article

  • Drag and drop game - why isn't it working now I've moved it to another domain?

    - by vward
    Earlier this year I did some work on a drag and drop game. It was the first thing I'd coded other than basic html. I got it working but then had to put it to one side for a while. I've now come back to work on it. The game I had created was put on the ftp of a domain I no longer have. I took the html and image files and put them on another domain expecting them to work. However now nothing drags! I don't know what could be different. I can barely remember how I coded this in the first place. Is there an additional file that should be on the ftp or something like that? Can anyone shed any light? Thanks Vic Game: http://www.vic-taylor.com/dolls/doll6.html Code: <!doctype html> <html lang="en"> <head> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script> <script> $(function() { $( "#draggable" ).draggable() }); </script> <script> $(function() { $( "#draggable2" ).draggable(); }); </script> <script> $(function() { $( "#draggable3" ).draggable(); }); </script> <script> $(function() { $( "#draggable4" ).draggable(); }); </script> <script> $(function() { $( "#draggable5" ).draggable(); }); </script> </head> </body> <div id="bodies/palepd.gif"> <img src="bodies/palepd.gif" class="ui-widget-content" id="draggable"> <img src="bodies/trousers.gif" class="ui-widget-content" id="draggable2"> <img src="bodies/top.gif" class="ui-widget-content" id="draggable3"> <img src="bodies/dress.gif" class="ui-widget-content" id="draggable4"> <img src="bodies/coat.gif" class="ui-widget-content" id="draggable5"> </div> </body>

    Read the article

  • Rails only returns blank page

    - by user2793027
    I am new to Ruby on Rails and am trying to find all the orders for a given customer and then search through their order and total it all up. However when I try and test the page I only get a blank page, can anyone tell me why that might be? Also I am running Rails v. 2.3.14 <% # custdisplay.html.erb.rb %> <!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 profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <% # get the customer data from the customer table @custdata = Customer.find(@data) @orderinfo = Order.find(:all, :conditions => ["customer_id = ?",@custdata.id]) for i in [email protected] @total[i] = 0 @orderparts = Orderline.find(:all, :conditions => ["id = ?", @orderinfo[i].id]) for j in [email protected] @total[j] += @orderparts[i].quantity * @orderparts[i].price end end #for each quanity need to add up the part if @ordertotals.length > 0 %> <h1>customer data for customer: <%=@data %></h1> <table border=1> <tr> <td>Order Number</td> <td>Order Date</td> <td>Cost of Order</td> </tr> <% # for each customer who has this sales rep # display each customer in a row for @orderinfo in @ordertotals %> <tr> <td><%[email protected]%></td> <td><%[email protected]_date%></td> <td><%[email protected]%></td> </tr> <% end %> </table> <% else # no customers with this sales rep %> <h1>NO CUSTOMERS FOR SALES REP <%=@salesrepcust%></h1> <% end %>

    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

  • Message passing chrome extension

    - by Mayur Kataria
    I wants to create an extension where content script will send message to background page and then on browser action means clicking on extension icon will access that background page and get some data.I am using chrome Version 23.0.1271.64 m on windows8. I am getting following error. Port error: Could not establish connection. Receiving end does not exist. I tried to solve the same. but people are using sendRequest which is not supported by chrome20+. i also found solution mentioned for chrome 20+. But not working. Please help. Below is the file contents. manifest.json { "name": "Test Extension", "version": "1.0", "manifest_version": 2, "description": "A test extension.", "background": "background.html", "content_scripts": [ { "matches": ["<all_urls>"], "js": ["jquery.js","content.js"] } ], "permissions": ["tabs", "http://*/", "https://*/"], "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" } } background.html <html> <head> <script src="background.js"></script> </head> <body> <h1>Wy</h1> </body> </html> background.js chrome.extension.onMessage.addListener(function(request, sender, sendResponse) { // Chrome 20+ alert(request); console.log('received in listener'); sendResponse({farewell: "goodbye"}); }); content.js $(function(){ console.log('start-sending message'); chrome.extension.sendMessage({greeting: "hello"},function(response){alert(response);}); console.log('end-sending message'); }); popup.html <!doctype html> <html> <head> <title>Getting Started Extension's Popup</title> </style> <!-- JavaScript and HTML must be in separate files for security. --> <script src="jquery.js"></script> <script src="popup.js"></script> </head> <body> </body> </html> popup.js $(function(){ var str_html = "<tr><td width='60%'>S</td><td width='40%'>15</td></tr><tr><td width='60%'>M</td><td width='40%'>25</td></tr>"; $('#sizes_container').html(str_html); var bkg = chrome.extension.getBackgroundPage(); console.log(bkg); });

    Read the article

  • change maxlength depending of the option selected

    - by tuner3000
    I've seen similar questions posted and tried to change them to meet my needs but I don't know enough about javascript to do it. I need that when a user change the dropdown select, the "titre text field" maxlength is dynamically changed a, b c and d max maxlength should be 40 and e maxlength should be 2 my code is below, I don't know why but it is not working correctly: <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>title page</title> </head> <body> <script type="text/javascript"> function changeValue(dropdown) { var option = dropdown.options[dropdown.selectedIndex].value, field = document.getElementById('titre'); if (option == 'a' || option == 'b' || option == 'c' || option == 'd') { field.maxLength = 40; } else if (option == 'e') { field.value = field.value.substr(0, 2); // before reducing the maxlength, make sure it contains at most two characters; you could also reset the value altogether field.maxLength = 2; } }? </script> <form action="converter.php" method="post"> <h2>Feel all field below:</h2> <div> Title: <input type="texte" name="titre" id="titre" maxLength="40"/> Format: <select id="format" name="format" onchange="changeValue(this);"> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> <option value="d">D</option> <option value="e">E</option> </select> </div> <div> <textarea name="texte" style="width: 415px; height: 155px;"></textarea> </div> <div> <input type="submit" value="OK" /> </div> </form> </body> </html>

    Read the article

  • json data not rendered in backbone view

    - by user2535706
    I have been trying to render the json data to the view by calling the rest api and the code is as follows: var Profile = Backbone.Model.extend({ dataType:'jsonp', defaults: { intuitId: null, email: null, type: null }, }); var ProfileList = Backbone.Collection.extend({ model: Profile, url: '/v1/entities/6414256167329108895' }); var ProfileView = Backbone.View.extend({ el: "#profiles", template: _.template($('#profileTemplate').html()), render: function() { _.each(this.model.models, function(profile) { var profileTemplate = this.template(this.model.toJSON()); $(this.el).append(tprofileTemplate); }, this); return this; } }); var profiles = new ProfileList(); var profilesView = new ProfileView({model: profiles}); profiles.fetch(); profilesView.render(); and the html file is as follows: <!DOCTYPE html> <html> <head> <title>SPA Example</title> <!-- <link rel="stylesheet" type="text/css" href="src/css/reset.css" /> <link rel="stylesheet" type="text/css" href="src/css/harmony_compiled.css" /> --> </head> <body class="harmony"> <header> <div class="title">SPA Example</div> </header> <div id="profiles"></div> <script id="profileTemplate" type="text/template"> <div class="profile"> <div class="info"> <div class="intuitId"> <%= intuitId %> </div> <div class="email"> <%= email %> </div> <div class="type"> <%= type %> </div> </div> </div> </script> </body> </html> This gives me an error and the render function isn't invoking properly and the render function is called even before the REST API returns the JSON response. Could anyone please help me to figure out where I went wrong. Any help is highly appreciated Thank you

    Read the article

  • JQuery Ajax Updating MySQL Database, But Not Running Success Function

    - by myrmidon16
    I am currently using the JQuery ajax function to call an exterior PHP file, in which I select and add data in a database. Once this is done, I run a success function in JavaScript. What's weird is that the database is updating successfully when ajax is called, however the success function is not running. Here is my code: <!DOCTYPE html> <head> <script type="text/javascript" src="jquery-1.6.4.js"></script> </head> <body> <div onclick="addtask();" style="width:400px; height:200px; background:#000000;"></div> <script> function addtask() { var tid = (Math.floor(Math.random() * 3)) + 1; var tsk = (Math.floor(Math.random() * 10)) + 1; if(tsk !== 1) { $.ajax({ type: "POST", url: "taskcheck.php", dataType: "json", data: {taskid:tid}, success: function(task) {alert(task.name);} }); } } </script> </body> </html> And the PHP file: session_start(); $connect = mysql_connect('x', 'x', 'x') or die('Not Connecting'); mysql_select_db('x') or die ('No Database Selected'); $task = $_REQUEST['taskid']; $uid = $_SESSION['user_id']; $q = "SELECT task_id, taskname FROM tasks WHERE task_id=" .$task. " LIMIT 1"; $gettask = mysql_fetch_assoc(mysql_query($q)); $q = "INSERT INTO user_tasks (ut_id, user_id, task_id, taskstatus, taskactive) VALUES (null, " .$uid. ", '{$gettask['task_id']}', 0, 1)"; $puttask = mysql_fetch_assoc(mysql_query($q)); $json = array( "name" => $gettask['taskname'] ); $output = json_encode($json); echo $output; Let me know if you have any questions or comments, thanks.

    Read the article

  • javascript div movement not working

    - by William
    For some reason I can't move this div at all. Can anyone help me out with why this won't work? <!DOCTYPE html> <html lang="en"> <head> <title>Move Div Test</title> <meta charset="utf-8" /> <link href="/bms/style.css" rel="stylesheet" /> <style> body { text-align: center; background-color: #ffffff;} #box { position: absolute; left: 610px; top: 80px; height: 50px; width: 50px; background-color: #ff0000;} </style> <script type="text/javascript"> document.onkeydown=function(event){keyDown(event)}; document.onkeyup=function(event){keyUp(event)}; var box = document.getElementById('box'); var speed = 5; var keys = new Array(256); var i = 0; for (i = 0;i <= 256; i++){ keys[i] = false; } function keyDown(event){ if(!event){ //for IE event = window.event; } keys[event.keyCode] = true; } function keyUp(event){ if(!event){ //for IE event = window.event; } keys[event.keyCode] = false; } function update(){ if(keys[37]) box.style.left = parseInt(box.style.left) - speed + "px"; if(keys[39]) box.style.left = parseInt(box.style.left) + speed + "px"; if(keys[38]) box.style.top = parseInt(box.style.top) - speed + "px"; if(keys[40]) box.style.top = parseInt(box.style.top) + speed + "px"; } setInterval('update();', 1000/60); </script> </head> <body> <div id="box">blah</div> </body> </html>

    Read the article

  • Unexpected space between DIV elements

    - by jon
    my code for the php page displaying the divs <?php session_start(); require_once("classlib/mainspace.php"); if (isset($_SESSION['username'])==FALSE) { header("location:login.php"); } $user = new User($_SESSION['username']); ?><!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" /> <link rel="stylesheet" type="text/css" href="style/style.css" /> <title>SimpleTask - Home</title> </head> <body> <div id="main"> <div id="menu"> <div id="items"> <ul> <li><a href="home.php">home</a></li> <li>&bull;</li> <li><a href="projects.php">my projects</a></li> <li>&bull;</li> <li><a href="comments.php">my comments</a></li> </ul> </div> <div id="user"> <p>Welcome, <?php echo $user->GetRealName(); ?><br/><a href="editprofile.php">edit profile</a> &bull; <a href="logout.php">logout</a></p> </div> </div> <div id="content"> <h1>HOME</h1> </div> <div id="footer"> <p>footer text goes here here here here</p> </div> </div> </body> </html> and you can find my CSS here http://tasker.efficaxdevelopment.com/style/style.css and to view the live page go here http://tasker.efficaxdevelopment.com/login.php username:admin password:password

    Read the article

  • Facebook PHP SDK - can't pass parameters to getLoginUrl()

    - by Elliott
    I'm using the Facebook PHP SDK for simple login with extended permissions. I'm using the example code from the SDK docs, but I found that I need to manually clear out the FB session data otherwise if($user) comes back as true even though the user is logged out. I have the app going to logout.php upon logout; this page clears out the session vars and redirects to the app home page. Once I clear out the FB session data, log in/log out works fine. However, it stops working if I pass $params to the getLoginUrl function. Once I pass any params (I've tried several), the login breaks, either by not bringing up the second extended permissions screen or by refreshing the app page w/out login success. index page and logout page code follow. index.php <?php require 'services/facebook-php-sdk/src/facebook.php'; $facebook = new Facebook(array( 'appId' => '[APP_ID]', 'secret' => '[SECRET]', )); // Get User ID $user = $facebook->getUser(); if($user) { try { // Proceed knowing you have a logged in user who's authenticated. $user_profile = $facebook->api('/me'); $params = array('next' => 'http://'.$_SERVER["SERVER_NAME"].'/logout.php'); $logout_url = $facebook->getLogoutUrl($params); } catch (FacebookApiException $e) { error_log($e); $user = null; } } else { $login_url = $facebook->getLoginUrl($params = array('redirect_uri' => 'http://'.$_SERVER["SERVER_NAME"].'/', 'scope' => 'read_stream')); } ?> <!DOCTYPE html> <html lang="en"> <head> </head> <body> <?php if($user) { ?> <p><a href="<?php echo($logout_url); ?>">Log out</a></p> <?php } else { ?> <p><a href="<?php echo($login_url); ?>">Log in</a></p> <?php } ?> </body> </html> logout.php <?php session_start(); $fb_app_id = '[APP_ID]'; unset($_SESSION['fb_'.$fb_app_id.'_code']); unset($_SESSION['fb_'.$fb_app_id.'_access_token']); unset($_SESSION['fb_'.$fb_app_id.'_user_id']); unset($_SESSION['fb_'.$fb_app_id.'_state']); header('Location: http://'.$_SERVER["SERVER_NAME"].'/'); ?>

    Read the article

  • Google maps api v3: geocoding multiple addresses and infowindow

    - by user2536786
    I am trying to get infowindow for multiple addresses. Its creating markers but when I click on markers, infowindow is not popping up. Please help and see what could be wrong in this code. Rest all info is fine only issue is with infowindow not coming up. <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Google Maps Multiple Markers</title> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> </head> <body> <div id="map" style="height: 800px;"></div> <script type="text/javascript"> var locations = [ ['Bondi Beach', '850 Bay st 04 Toronto, Ont'], ['Coogee Beach', '932 Bay Street, Toronto, ON M5S 1B1'], ['Cronulla Beach', '61 Town Centre Court, Toronto, ON M1P'], ['Manly Beach', '832 Bay Street, Toronto, ON M5S 1B1'], ['Maroubra Beach', '606 New Toronto Street, Toronto, ON M8V 2E8'] ]; var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: new google.maps.LatLng(43.253205,-80.480347), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow(); var geocoder = new google.maps.Geocoder(); var marker, i; for (i = 0; i < locations.length; i++) { geocoder.geocode( { 'address': locations[i][1]}, function(results, status) { //alert(status); if (status == google.maps.GeocoderStatus.OK) { //alert(results[0].geometry.location); map.setCenter(results[0].geometry.location); marker = new google.maps.Marker({ position: results[0].geometry.location, map: map }); google.maps.event.addListener(marker, 'mouseover', function() { infowindow.open(marker, map);}); google.maps.event.addListener(marker, 'mouseout', function() { infowindow.close();}); } else { alert("some problem in geocode" + status); } }); } </script> </body> </html>

    Read the article

  • Jquery ajax using asp.net does not work on IE9 during the 2nd call of the function?

    - by randelramirez1
    I have gridview that is loaded from another aspx page after an ajax call, the problem is it works on chrome/firefox/safari but using ie9 the ajax call would work fine during the first call but when i try to call the function again it throws an 304 status on the network tab of ie9 dev tool and the gridview is not refreshed. Here is the jquery code: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="LoadCoursesGridViewHere.aspx.cs" Inherits="CoursesGridView" %> <!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="Scripts/jquery-1.8.2.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div id="Gridview-container"> <asp:GridView ID="GridView1" runat="server"> </asp:GridView> </div> <asp:TextBox ID="TextBox1" runat="server" ViewStateMode="Disabled"></asp:TextBox> <%-- <asp:Button Text="text" ID="btn" OnClientClick=" __doPostBack('UpdatePanel1', '')" runat="server" />--%> <input type="button" id="btn" value="insert"/> </form> <script type="text/javascript"> $("#btn").click(function () { var a = $("#TextBox1").val(); $.ajax({ url: 'WebService.asmx/insert', data: "{ 'name': '" + a + "' }", contentType: "application/json; charset=utf-8", type: "POST", success: function () { // alert('insert was performed.'); $("#Gridview-container").empty(); $("#Gridview-container").load("GridViewCourses.aspx #GridView1"); } }); }); </script> </body> </html> What happen is that after click the button it will insert the textbox value in the database through the webservice 'insert' and then reload the gridview that is placed inside a different aspx page. The problem is that when I ran it on IE9 during the 1st insert everything works properly but the succeeding inserts does reload the gridview and I noticed that it says '304' on the network tab of ie9 dev tool.

    Read the article

  • Hoe to convert a JSON array of paths to images stored on a server into a javaScript array to display them? Using AJAX

    - by MichaelF
    I need for html file/ ajax code to take the JSON message and store the PATHS as a javaScript array. Then my buildImage function can display the first image in the array. I'm new to AJAX and believe my misunderstanding lies within the converting of the JSON to Javascript. I'm confused also about if my code creates a JSON array or object or either. I might need also to download a library to my app to understand JSON? Below is a PHP file loading the paths of the images. I believe json ecode is converting the PHP Array in a Json message. <?php include("mysqlconnect.php"); $select_query = "SELECT `ImagesPath` FROM `offerstbl` ORDER by `ImagesId` DESC"; $sql = mysql_query($select_query) or die(mysql_error()); $data = array(); while($row = mysql_fetch_array($sql,MYSQL_BOTH)){ $data[] = $row['ImagesPath']; } echo $images = json_encode($data); ?> Below is the script in is going to be loaded on an Cordova app. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/cascading.css"> <script> function importJson(str) { // console.log(typeof xmlhttp.responseText); if (str=="") { document.getElementById("content").innerHTML=""; return; } if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4) { //var images = JSON.parse(xmlhttp.responseText); document.getElementById("content").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","http://server/content.php"); xmlhttp.send(); } function buildImage(src) { var img = document.createElement('img') img.src = src alert("1"); document.getElementById('content').appendChild(img); } for (var i = 0; i < images.length; i++) { buildImage(images[i]); } </script> </head> <body onload= "importJson();"> <div class="contents" id="content" ></div> <img src="img/logo.png" height="10px" width="10px" onload= "buildImage();"> </body>

    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

  • Video playback with jQuery Mobile and Phonegap

    - by aritchie
    I'm fairly new to mobile apps, so am trying to knock up a simple video player using Phonegap and jQuery Mobile. The problem is, jQuery mobile appears to be blocking the video playback for some reason. To troubleshoot I stripped it right back to the following HTML, but get the same result, ie a black rectangle where the video should be, but no video playback or controls. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1"/> <link rel="stylesheet" type="text/css" href="css/index.css" /> <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" /> <script type="text/javascript" src="cordova-2.2.0.js"></script> <script type="text/javascript" src="js/index.js"></script> <script src="js/jquery-1.8.3.min.js"></script> <script src="js/jquery.mobile-1.2.0.js"></script> <title></title> </head> <body> <div> <video controls autoplay> <source src="video/video1.mp4" type="video/mp4" > </video> </div> </body> </html> If I remove the link to jquery.mobile-1.2.0.js the video shows up and plays, otherwise, just the black rectangle. I don't know jQuery mobile at all, but searching in the js for a reference to the video elements doesn't show up, so I've no idea what is blocking it. The code works fine in Chrome and Firefox. There are no console messages in Xcode. I also tried hooking up to http://debug.phonegap.com/ but this gave no error messages either. Any ideas??

    Read the article

  • [jQuery] JS inside the template

    - by Martin Trigaux
    Hello, I'm trying to include some javascript code inside a template. The code of my html page : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery-jtemplates.js"></script> </head> <body> <div id="infos"></div> <div id="my_template"></div> <script type="text/javascript"> $(document).ready(function() { $('#my_template').setTemplateURL("my_template.html"); try { $('#my_template').processTemplate({'var' : 1}); } catch (e) { $('#infos').html('error : '+e); } $('#my_button').click(function(){ alert('it works outside'); }); }); </script> </body> </html> and the template content of the template<br/> {#if $T.var == 1} <script type="text/javascript"> $(document).ready(function() { $('#my_button').click(function(){ alert('it works inside'); }); }); </script> <input type='submit' id='my_button' value='click me' onclick='alert("direct");'/> {#else} not working {#/if} produce me an error inside the infos balise error : SyntaxError: missing } after function body if I just put alert('it works inside'); inside the script balise (remove all the jquery related code), the page load, the two message "direct" and "it works outside" are showed but not "it works inside" message. It's suppose to works as said on the doc page Allow to use JavaScript code in templates Thank you

    Read the article

  • Why won't my images align properly?

    I'm trying to make a dynamically sizable title banner, using fairly simple image tricks. I place the banner image in a table cell, and set the background-image of the table row to a one-pixel-wide repeat of the banner's right-most pixel column. Thus, the banner image appears to stretch to fit the screen width without stretching the logo. The code below is my entire page so far, and the problem is shown in a red circle in the screenshot. This is the transition where the main image ends and the one-pixel-wide background image begins. It appears that the one-pixel-wide bar at the end is compressed by one pixel - making the tops align properly, while the bottoms are one pixel off. I should add that I have checked the images more than once to make cure they the image data is correct. They are %100 accurate as far as MSPaint is concerned. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body bgcolor="#000000"> <form id="form1" runat="server"> <div> <table style="width:100%; "> <tr style="background-image: url('Images/Banners/WebBannerWideBar.png')"> <!--WebBannerWideBar is 1x100 px--> <td> <img alt="Angry Octopus" src="Images/Banners/WebBannerWide.png" /> <!--WebBannerWide is 760x100 px--> </td> </tr> </table> </div> </form> </body> </html>

    Read the article

  • jQuery UI problem: why do the elements go flying around the screen?

    - by George Edison
    Yes, I know the title sounds a little suspicious. I will try to explain this the best I can... The code below is supposed to have the blue div slide down beside the red div. The first time you hit the Show the div button, it works. Also, the Hide the div works. Then when I click to show the div again, it appears to the right of where it is supposed to be! Why is this?!? Note: You can find a live example of the code here <html> <!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" xml:lang="en" lang="en"> <head> <title>Demo</title> <style type='text/css'> #red { background-color: red; width: 200px; height: 150px; position: absolute; } #blue { background-color: blue; width: 150px; height: 200px; position: absolute; display: none; } #tester_1 { top: 300px; left: 300px; position: absolute; } #tester_2 { top: 350px; left: 300px; position: absolute; } </style> </head> <script type="text/javascript" src="jquery.js"></script> <script type='text/javascript'> function Show() { $('#blue').position({ of: $('#red'), my: 'left top', at: 'right top'}).slideDown(); } function Hide() { $('#blue').hide(); } </script> <body> <div id='red'></div> <div id='blue'></div> <button id='tester_1' onclick='Show()'>Show the <kbd>div</kbd></button> <button id='tester_2' onclick='Hide()'>Hide the <kbd>div</kbd></button> </body> </html>

    Read the article

  • Phonegap (Cordova) iOS button click

    - by JNM
    I am trying to create a very simple phone gap application for iOS. I am using query mobile. the problem is, that i can't get javascript event to fire on button click. Code i have now: <!DOCTYPE html> <html> <head> <title>Title</title> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.2.0.css" /> <script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script> <script type="text/javascript" charset="utf-8" src="js/jquery-1.8.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.2.0.min.js"></script> <script type="text/javascript"> document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { } function showAlert() { navigator.notification.alert("Cordova is working"); } </script> </head> <body> <div data-role="page" id="options" data-add-back-btn="true" data-back-btn-text="Atgal"> <div data-role="header" data-position="fixed"> <h1>Title</h1> </div> <div data-role="content"> <h1>Alert</h1> <p><a href="#" onclick="showAlert(); return false;" data-role="button">Show alert</a></p> </div> </div> </body> </html> I tried multiple solutions to fix my problem, but none of them works. When have button with # in href, it doesn't event change the color on click. When i add url, it changes color. But it never call javascript function. Another problem is, that document.addEventListener("deviceready", onDeviceReady, false); works only in the index page. If i press button in initial page which redirects to another page, OnDeviceReady function is never called. Anybody has any ideas?

    Read the article

  • Bug in Safari: options.length = 0; not working as expected in Safari 4

    - by Stefan
    This is not a real question, but rather an answer to save some others the hassle of tracking this nasty bug down. I wasted hours finding this out. When using options.length = 0; to reset all options of a select element in safari, you can get mixed results depending on wether you have the Web Inspector open or not. If the web inspector is open you use myElement.options.length = 0; and after that query the options.length(), you might get back 1 instead of 0 (expected) but only if the Web Inspector is open (which is often the case when debugging problem like this). Workaround: Close the Web Inspector or call myElement.options.length = 0; twice like so: myElement.options.length = 0; myElement.options.length = 0; Testcase: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Testcase</title> <script type="text/javascript" language="javascript" charset="utf-8"> function test(el){ var el = document.getElementById("sel"); alert("Before calling options.length=" + el.options.length); el.options.length = 0; alert("After calling options.length=" + el.options.length); } </script> </head> <body onLoad="test();"> <p> Make note of the numbers displayed in the Alert Dialog, then open Web inspector, reload this page and compare the numbers. </p> <select id="sel" multiple> <option label="a----------" value="a"></option> <option label="b----------" value="b"></option> <option label="c----------" value="c"></option> </select> </body> </html>

    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

  • Hibernate not Loading a class

    - by Noor
    Hi, I have a class Auction that contains a Class Item and Users but when I am getting the class, the class item and Users are not being loaded. Auction Class Mapping File: <?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN" "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd"> <!-- Generated Dec 28, 2010 9:14:12 PM by Hibernate Tools 3.4.0.Beta1 --> <hibernate-mapping> <class name="com.BiddingSystem.Models.Auction" table="AUCTION"> <id name="AuctionId" type="long"> <column name="AUCTIONID" /> <generator class="native" /> </id> <property name="StartTime" type="java.util.Date"> <column name="STARTTIME" /> </property> <property name="EndTime" type="java.util.Date"> <column name="ENDTIME" /> </property> <property name="StartingBid" type="long"> <column name="STARTINGBID" /> </property> <property name="MinIncrement" type="long"> <column name="MININCREMENT" /> </property> <many-to-one name="CurrentItem" class="com.BiddingSystem.Models.Item" fetch="join" cascade="all"> <column name="ItemId" /> </many-to-one> <property name="AuctionStatus" type="java.lang.String"> <column name="AUCTIONSTATUS" /> </property> <property name="BestBid" type="long"> <column name="BESTBID" /> </property> <many-to-one name="User" class="com.BiddingSystem.Models.Users" fetch="join"> <column name="UserId" /> </many-to-one> </class> </hibernate-mapping> When I am doing this: Query query=session.createQuery("from Auction where UserId="+UserId); List <Auction> AllAuctions= new LinkedList<Auction>(query.list()); The Users and Item are null

    Read the article

  • adding results of XML request to a page

    - by user2925833
    I am trying to get a feel for adding content to a page with XMLHTTPRequest. I would like to add the results to existing page content say in a second column, but I am not having any luck. I would appreciate a shove in the right direction. Thanks for any help. <!DOCTYPE html> <html> <head> <style> #button{ float: left; } #team{ float: left; } </style> <title>XMLHTTPRequest</title> <script src="jquery-1.10.2.js"></script> <script> $(document).ready(function(){ xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if (xhr.readyState == 4 && xhr.status == 200) { xmlDoc = xhr.responseXML; var team = xmlDoc.getElementsByTagName("teammember"); var html = ""; for (i = 0; i < team.length; i++){ html += xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue + "<br>" + xmlDoc.getElementsByTagName("title")[i].childNodes[0].nodeValue + "<br>" + xmlDoc.getElementsByTagName("bio")[i].childNodes[0].nodeValue + "<br><br>"; } //this is the code I would like help with var team = document.getElementById("team"); team.appendChild(document.createTextNode("html")); } } xhr.open("GET", "team.xml", true); }); </script> </head> <body> <div id="button"> <button onclick="xhr.send()">Click Me!</button> </div> <div id="team"> </div> </body> </html>

    Read the article

  • driver.findElement() with iframe and elements without ID

    - by user1864657
    Java Code: driver.switchTo().frame(0); WebElement elemText = driver.findElement(By.xpath("/html/body[contains(@class='forum')]")); //WebElement elemText = driver.findElement(By.xpath("//td[@id='cke_contents_vB_Editor_001_editor']/textarea")); elemText.sendKeys(message); elemText.submit(); forumLink = driver.getCurrentUrl(); HTML Code: <td id="cke_contents_vB_Editor_001_editor" class="cke_contents" style="height:1726px" role="presentation"> <iframe style="width:100%;height:100%" frameborder="0" title="Rich text editor, vB_Editor_001_editor, press ALT 0 for help." src="" tabindex="-1" allowtransparency="true"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="ltr" lang="en" contenteditable="true"> <head> <title data-cke-title="Rich text editor, vB_Editor_001_editor, press ALT 0 for help.">Rich text editor, vB_Editor_001_editor, press ALT 0 for help.</title> <base href="http://fairplay.garena.com/" data-cke-temp="1"> <link type="text/css" rel="stylesheet" href="http://fairplay.garena.com/clientscript/vbulletin_css/style00008l/editor_contents.css"> <style type="text/css" data-cke-temp="1"> form{border: 1px dotted #FF0000;padding: 2px;} img.cke_hidden{background-image: url(http://fairplay.garena.com/clientscript/ckeditor/plugins/forms/images/hiddenfield.gif?t=B37D54V);background-position: center center;background-repeat: no-repeat;border: 1px solid #a9a9a9;width: 16px !important;height: 16px !important;} img.cke_iframe{background-image: url(http://fairplay.garena.com/clientscript/ckeditor/plugins/iframe/images/placeholder.png?t=B37D54V);background-position: center center;background-repeat: no-repeat;border: 1px solid #a9a9a9;width: 80px;height: 80px;} img.cke_anchor{background-image: url(http://fairplay.garena.com/clientscript/ckeplugins/vblink/images/anchor.gif?t=B37D54V);background-position: center center;background-repeat: no-repeat;border: 1px solid #a9a9a9;width: 18px !important;height: 18px !important;} a.cke_anchor{background-image: url(http://fairplay.garena.com/clientscript/ckeplugins/vblink/images/anchor.gif?t=B37D54V);background-position: left center;background-repeat: no-repeat;border: 1px solid #a9a9a9;padding-left: 18px;} </style> </head> <body class="forum" spellcheck="true"> </body> </html> </iframe> </td> Image: http://s9.postimage.org/nwyvq3san/Screen_Shot038.jpg I can't find a way to get elements inside a iframe and without id. Can you help me?

    Read the article

< Previous Page | 38 39 40 41 42 43 44 45 46 47 48 49  | Next Page >