Search Results

Search found 7724 results on 309 pages for 'backbone js'.

Page 292/309 | < Previous Page | 288 289 290 291 292 293 294 295 296 297 298 299  | Next Page >

  • jQuery: Giving each matched element an unique ID

    - by AnGafraidh
    I am writing an 'inline translator' application to be used with a cloud computing platform to extend non-supported languages. The majority of this uses jQuery to find the text value, replace it with the translation, then append the element with a span tag that has an unique ID, to be used elsewhere within the application. The problem arises however, when there are more than one element, say , that have the exact same value to be translated (matched elements). What happens in the function in question is that it puts all matched elements in the same span, taking the second, third, fourth, etc. out of their parent tags. My code is pretty much like this example: <script src='jquery-1.4.2.js'></script> <script> jQuery.noConflict(); var uniqueID='asdfjkl'; jQuery(window).ready(function() { var myQ1 = jQuery("input[id~=test1]"); myClone=myQ1.clone(); myClone.val('Replaced this button'); myQ1.replaceWith('<span id='+uniqueID+'></span>'); jQuery('#'+uniqueID).append(myClone); }); </script> <table> <tr><td> <input id='test1' type='button' value="I'm a button!"></input> &nbsp; <input id='test2' type='button' value="And so am I"></input> </tr></td> <tr><td> <input id='test1' type='button' value="I'm a button!"></input> </tr></td> </table> As a workaround, I've experimented with using a loop to create a class for each span, rising in increment until jQuery("input[id~=test1]").length, but I can't seem to get anything I do to work. Is there any way to give each matched element an unique ID? My fluency in jQuery is being put to the test! Thanks for any help in advance. Aaron

    Read the article

  • Linking to a section of a site that is hidden by a hide/show JavaScript function

    - by hollyb
    I am using a bit of JavaScript to show/hide sections of a site when a tab is clicked. I'm trying to figure out if there is a way I can link back to the page and have a certain tab open based on that link. Here is the JS: var ids=new Array('section1','section2','section3','section4'); function switchid(id, el){ hideallids(); showdiv(id); var li = el.parentNode.parentNode.childNodes[0]; while (li) { if (!li.tagName || li.tagName.toLowerCase() != "li") li = li.nextSibling; // skip the text node if (li) { li.className = ""; li = li.nextSibling; } } el.parentNode.className = "active"; } function hideallids(){ //loop through the array and hide each element by id for (var i=0;i<ids.length;i++){ hidediv(ids[i]); } } function hidediv(id) { //safe function to hide an element with a specified id document.getElementById(id).style.display = 'none'; } function showdiv(id) { //safe function to show an element with a specified id document.getElementById(id).style.display = 'block'; } And the HTML <ul> <li class="active"><a onclick="switchid('section1', this);return false;">One</a></li> <li><a onclick="switchid('section2', this);return false;">Two</a></li> <li><a onclick="switchid('section3', this);return false;">Three</a></li> <li><a onclick="switchid('section4', this);return false;">Four</a></li> </ul> <div id="section1" style="display:block;"> <div id="section2" style="display:none;"> <div id="section3" style="display:none;"> <div id="section4" style="display:none;"> I haven't been able to come up with a way to link back to a specific section. Is it even possible with this method? Thanks!

    Read the article

  • Call PHP Function in jQuery (var)

    - by l3gion
    Hello, I'm facing a small problem that I can't solve by myself. I have this php function: function intervalo_manha(){ $que="select id_intervalo,data_15 from intervalo_manha order by id_intervalo"; $re=mysql_query($que); $object.="<select>"; $object.="<option></option>"; while(list($id_intervalo, $data_15)=mysql_fetch_row($re)) { $object.= "<option value=\"".$id_intervalo."\">".$data_15."</option>"; } $object.="</select>"; return $object; } This function return a select with information from database. I also have this js function: $(document).ready(function() { var destTable = $("#dataTable"); $("#btnAdd").click(function() { var newRow = $("<tr style='margin-left:-60px'><td><INPUT type='checkbox' name='chk'/></td><td><INPUT type='text' name='txt[]' id='txt'/></td><td></td></tr>"); $("#dataTable").append(newRow); newRow.find('input').autocomplete("get_cols_name.php", { width: 260, matchContains: true, selectFirst: false }); }); }); This one will add a new row to my table, and for each new input will "activate" autocomplete. What I want to do is, instead of this: var newRow = $("<tr style='margin-left:-60px'><td><INPUT type='checkbox' name='chk'/></td><td><INPUT type='text' name='txt[]' id='txt'/></td><td></td></tr>"); I would like to have something like this: var newRow = $("<tr style='margin-left:-60px'><td><INPUT type='checkbox' name='chk'/></td><td><INPUT type='text' name='txt[]' id='txt'/></td><td><?php echo intervalo_manha(); ?></td></tr>"); Calling php function directly will return nothing, and I can't do anything. Is there any way to accomplish this? Thank you

    Read the article

  • iPad web app: Prevent input focus AFTER ajax call

    - by Mike Barwick
    So I've read around and can't for the life of me figure out of to solve my issue effectively. In short, I have a web app built for the iPad - which works as it should. However, I have an Ajax form which also submits as it should. But, after the callback and I clear/reset my form, the "iPad" automatically focuses on an input and opens the keyboard again. This is far from ideal. I managed to hack my way around it, but it's still not perfect. The code below is run on my ajax callback, which works - except there's still a flash of the keyboard quickly opening and closing. Note, my code won't work unless I use setTimeout. Also, from my understanding, document.activeElement.blur(); only works when there's a click event, so I triggered one via js. IN OTHER WORDS, HOW DO I PREVENT THE KEYBOARD FROM REOPENING AFTER AJAX CALL ON WEB APP? PS: Ajax call works fine and doesn't open the keyboard in Safari on the iPad, just web app mode. Here's my code: hideKeyboard: function () { // iOS web app only, iPad IS_IPAD = navigator.userAgent.match(/iPad/i) != null; if (IS_IPAD) { $(window).one('click', function () { document.activeElement.blur(); }); setTimeout(function () { $(window).trigger('click'); }, 500); } } Maybe it's related to how I'm clearing my forms, so here's that code. Note, all inputs have tabindex="-1" as well. clearForm: function () { // text, textarea, etc $('#campaign-form-wrap > form')[0].reset(); // checkboxes $('input[type="checkbox"]').removeAttr('checked'); $('#campaign-form-wrap > form span.custom.checkbox').removeClass('checked'); // radio inputs $('input[type="radio"]').removeAttr('checked'); $('#campaign-form-wrap > form span.custom.radio').removeClass('checked'); // selects $('form.custom .user-generated-field select').each(function () { var selection = $(this).find('option:first').text(), labelFor = $(this).attr('name'), label = $('[for="' + labelFor + '"]'); label.find('.selection-choice').html(selection); }); optin.hideKeyboard(); }

    Read the article

  • Drupal incorrectly espaces tags in javascript

    - by sergdev
    I installed drupal-6.16. I applied the patch from the post http://drupal.org/node/222926#comment-930745. It works correctly in simple cases. But for following code for counter is handled incorrectly: <br><br> Text <br><br> <!-- counter.1Gb.ua --> <script language="javascript" type="text/javascript"> cgb_js="1.0"; cgb_r=""+Math.random()+"&r="+ escape(document.referrer)+"&pg="+ escape(window.location.href); document.cookie="rqbct=1; path=/"; cgb_r+="&c="+ (document.cookie?"Y":"N"); </script><script language="javascript1.1" type="text/javascript"> cgb_js="1.1";cgb_r+="&j="+ (navigator.javaEnabled()?"Y":"N")</script> <script language="javascript1.2" type="text/javascript"> cgb_js="1.2"; cgb_r+="&wh="+screen.width+ 'x'+screen.height+"&px="+ (((navigator.appName.substring(0,3)=="Mic"))? screen.colorDepth:screen.pixelDepth)</script> <script language="javascript1.3" type="text/javascript"> cgb_js="1.3"</script> <script language="javascript" type="text/javascript">cgb_r+="&js="+cgb_js; document.write("<a href='http://www.1Gb.ua?cnt=1416'>"+ "<img src='http://counter.1Gb.ua/cnt.aspx?"+ "u=1416&"+cgb_r+ "&' border=0 width=88 height=31 "+ "alt='1Gb.ua counter'><\/a>")</script> <noscript><a href='http://www.1Gb.ua?cnt=1416'> <img src="http://counter.1Gb.ua/cnt.aspx?u=1416" border=0 width="88" height="31" alt="1Gb.ua counter"></a> </noscript> <!-- /counter.1Gb.ua --> It modifies the string "alt='1Gb.ua counter' /><\/a>")</a></script> to "alt='1Gb.ua counter' />&lt;\/a>")</a></script> Does anybody have this code working? If so how this can be fixed? Thanks a lot in advance!

    Read the article

  • javascript error: variable is not defined

    - by Hristo
    to is not defined [Break on this error] setTimeout('updateChat(from, to)', 1); I'm getting this error... I'm using Firebug to test and this comes up in the Console. The error corresponds to line 71 of chat.js and the whole function that wraps this line is: function updateChat(from, to) { $.ajax({ type: "POST", url: "process.php", data: { 'function': 'getFromDB', 'from': from, 'to': to }, dataType: "json", cache: false, success: function(data) { if (data.text != null) { for (var i = 0; i < data.text.length; i++) { $('#chat-box').append($("<p>"+ data.text[i] +"</p>")); } document.getElementById('chat-box').scrollTop = document.getElementById('chat-box').scrollHeight; } instanse = false; state = data.state; setTimeout('updateChat(from, to)', 1); // gives error }, }); } This links to process.php with function call getFromDB and the code for that is: case ('getFromDB'): // get the sender and receiver user IDs from their user names $from = mysql_real_escape_string($_POST['from']); $query = "SELECT `user_id` FROM `Users` WHERE `user_name` = '$from' LIMIT 1"; $result = mysql_query($query) or die(mysql_error()); $row = mysql_fetch_assoc($result); $fromID = $row['user_id']; $to = mysql_real_escape_string($_POST['to']); $query = "SELECT `user_id` FROM `Users` WHERE `user_name` = '$to' LIMIT 1"; $result = mysql_query($query) or die(mysql_error()); $row = mysql_fetch_assoc($result); $toID = $row['user_id']; $query = "SELECT * FROM `Messages` WHERE `from_id` = '$fromID' AND `to_id` = '$toID' LIMIT 1"; $result = mysql_query($query); while($row = mysql_fetch_assoc($result)) { $text[] = $line = $row['message']; $log['text'] = $text; } break; So I'm confused with the line that is giving the error. setTimeout('updateChat(from,to)',1); aren't the parameters to updateChat the same parameters that came into the function? Or are they being pulled in from somewhere else and I have to define to and from else where? Any ideas how to fix this error? Thanks, Hristo

    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

  • how to add a dynamic param

    - by user569846
    the jquery plugin that im using is this http://code.google.com/p/jquery-in-place-editor/ if i have a table like this <table> <thead> <tr> <th>id</th> <th>first name </th> <th>last name </th> </tr> </thead> <tbody> <tr> <td class="id">1</td> <td class="fname">sarmen</td> <td class="lname">mikey</td> </tr> <tr> <td class="id">2</td> <td class="fname">john</td> <td class="lname">angelo</td> </tr> <tr> <td class="id">3</td> <td class="fname">sarmen</td> <td class="lname">grande</td> </tr> </tbody> </table> and my js looked something like this $("td.fname").editInPlace({ url: 'ajax.php', params: '', show_buttons: true }); then lets say i click on the first record to edit it which is fname of sarmen. how can i pass a param that only accociates id 1 ? because if i do a query of lets say "update tbl_users set fname = '$_POST['update_value']' where fname = '$_POST['original_html']'" (note: im just showing an example so no need to clean posts if that was bothering you :) ) if i run this query the fname of sarmen will update in two records rather than one. How can i only update to id of 1 being to update only one record.

    Read the article

  • Wordpress post query php custom field conditional

    - by Andy
    Here's the situation: In wordpress I'm trying to reset a post WP_Query so that I can rewrite the post link based on whether or not a custom field exists in the post. I'm trying to give the post a NEW link in the custom field. All I've managed to do here is kill the link entirely. Any and all help is greatly appreciated, I'm pretty green to php. Here's my WP_Query: <?php $recentPosts = new WP_Query(); $recentPosts->query('showposts=3'); ?> <?php while ($recentPosts->have_posts()) : $recentPosts->the_post(); ?> <div <?php post_class() ?> id="post-<?php the_ID(); ?>"> <?php $attribute = the_title_attribute(); $title = the_title(); $key = 'NewPostLink'; $newLink = get_post_meta( $post->ID, $key, TRUE ); if ($newLink != '') { $theLink = get_permalink ($post->ID ); if (has_post_thumbnail()) { $image = get_the_post_thumbnail( $post->ID ); echo '<div class="thumbnailbox"><div class="thumbnail"><a href="'.$theLink.'">'.$image.'</a></div></div>'; echo '<h2><a href="'.$theLink.'" rel="bookmark" title="Permanent Link to '.$attribute.'">'.$title.'</a></h2>'; } else { echo '<h2><a href="'.$theLink.'" rel="bookmark" title="Permanent Link to '.$attribute.'">'.$title.'</a></h2>'; } } else { $theLink = $newLink; if (has_post_thumbnail()) { $image = get_the_post_thumbnail( $post->ID ); echo '<div class="thumbnailbox"><div class="thumbnail"><a href="'.$theLink.'">'.$image.'</a></div></div>'; echo '<h2><a href="'.$theLink.'" rel="bookmark" title="Permanent Link to '.$attribute.'">'.$title.'</a></h2>'; } else { echo '<h2><a href="'.$theLink.'" rel="bookmark" title="Permanent Link to '.$attribute.'">'.$title.'</a></h2>'; } } ?> <small><?php the_time('F jS, Y') ?></small> <div class="entry"> <?php the_excerpt(); ?> </div> </div> <?php endwhile; ?>

    Read the article

  • Finding open contiguous blocks of time for every day of a month, fast

    - by Chris
    I am working on a booking availability system for a group of several venues, and am having a hard time generating the availability of time blocks for days in a given month. This is happening server-side in PHP, but the concept itself is language agnostic -- I could be doing this in JS or anything else. Given a venue_id, month, and year (6/2012 for example), I have a list of all events occurring in that range at that venue, represented as unix timestamps start and end. This data comes from the database. I need to establish what, if any, contiguous block of time of a minimum length (different per venue) exist on each day. For example, on 6/1 I have an event between 2:00pm and 7:00pm. The minimum time is 5 hours, so there's a block open there from 9am - 2pm and another between 7pm and 12pm. This would continue for the 2nd, 3rd, etc... every day of June. Some (most) of the days have nothing happening at all, some have 1 - 3 events. The solution I came up with works, but it also takes waaaay too long to generate the data. Basically, I loop every day of the month and create an array of timestamps for each 15 minutes of that day. Then, I loop the time spans of events from that day by 15 minutes, marking any "taken" timeslot as false. Remaining, I have an array that contains timestamp of free time vs. taken time: //one day's array after processing through loops (not real timestamps) array( 12345678=>12345678, // <--- avail 12345878=>12345878, 12346078=>12346078, 12346278=>false, // <--- not avail 12346478=>false, 12346678=>false, 12346878=>false, 12347078=>12347078, // <--- avail 12347278=>12347278 ) Now I would need to loop THIS array to find continuous time blocks, then check to see if they are long enough (each venue has a minimum), and if so then establish the descriptive text for their start and end (i.e. 9am - 2pm). WHEW! By the time all this looping is done, the user has grown bored and wandered off to Youtube to watch videos of puppies; it takes ages to so examine 30 or so days. Is there a faster way to solve this issue? To summarize the problem, given time ranges t1 and t2 on day d, how can I determine the remaining time left in d that is longer than the minimum time block m. This data is assembled on demand via AJAX as the user moves between calendar months. Results are cached per-page-load, so if the user goes to July a second time, the data that was generated the first time would be reused. Any other details that would help, let me know. Edit Per request, the database structure (or the part that is relevant here) *events* id (bigint) title (varchar) *event_times* id (bigint) event_id (bigint) venue_id (bigint) start (bigint) end (bigint) *venues* id (bigint) name (varchar) min_block (int) min_start (varchar) max_start (varchar)

    Read the article

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

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

    Read the article

  • color letters in a div

    - by Growler
    I've created a palindrome checker. I want to take it one step further and show the letters being compared as it is being checked. HTML: <p id="typing"></p> <input type="text" id="textBox" onkeyup="pal(this.value);" value="" /> <div id="response"></div> <hr> <div id="palindromeRun"></div> JS: To do this, I run the recursive check... Then if it is a palindrome, I run colorLetters(), which I'm trying to highlight in green each letter as it is being checked. Right now it is just rewriting palindromeRun's HTML with the first letter. I know this is because of the way I'm resetting its HTML. I don't know how to just grab the first and last letter, change only those letters' css, then increment i and j on the next setTimeout loop. var timeout2 = null; function pal (input) { var str = input.replace(/\s/g, ''); var str2 = str.replace(/\W/, ''); if (checkPal(str2, 0, str2.length-1)) { $("#textBox").css({"color" : "green"}); $("#response").html(input + " is a palindrome"); $("#palindromeRun").html(input); colorLetters(str2, 0, str2.length-1); } else { $("#textBox").css({"color" : "red"}); $("#response").html(input + " is not a palindrome"); } if (input.length <= 0) { $("#response").html(""); $("#textBox").css({"color" : "black"}); } } function checkPal (input, i, j) { if (input.length <= 1) { return false; } if (i === j || ((j-i) == 1 && input.charAt(i) === input.charAt(j))) { return true; } else { if (input.charAt(i).toLowerCase() === input.charAt(j).toLowerCase()) { return checkPal(input, ++i, --j); } else { return false; } } } function colorLetters(myinput, i, j) { if (timeout2 == null) { timeout2 = setTimeout(function () { console.log("called"); var firstLetter = $("#palindromeRun").html(myinput.charAt(i)) var secondLetter = $("#palindromeRun").html(myinput.charAt(j)) $(firstLetter).css({"color" : "red"}); $(secondLetter).css({"color" : "green"}); i++; j++; timeout2=null; }, 1000); } } Secondary: If possible, I'd just like to have it colors the letters as the user is typing... I realize this will require a setTimeout on each keyup, but also am not sure how to write this.

    Read the article

  • Jetty servlet respons to Ajax always empty

    - by chris
    Hi I try to run a java server on Jetty which should respond to an ajax call. Unfortunately the response seems to be empty when I call it with ajax. When I call http://localhost:8081/?id=something I get an answer. The Java Server: public class Answer extends AbstractHandler { public void handle(String target, Request baseRequest, HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { String id = request.getParameter("id"); response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); response.setContentLength(19+id.length()); response.setStatus(HttpServletResponse.SC_OK); response.getWriter().write("<message>"+id+"</message>"); //response.setContentType("text/html;charset=utf-8"); response.flushBuffer(); baseRequest.setHandled(true); } public static void main(String[] args) throws Exception { Server server = new Server(8081); server.setHandler(new Answer()); server.start(); server.join(); } } The js and html: <html> <head> <script> var req; function validate() { var idField = document.getElementById("userid"); var url = "validate?id=" + encodeURIComponent(idField.value); if (typeof XMLHttpRequest != "undefined") { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } req.open("GET", "http://localhost:8081?id=fd", true); req.onreadystatechange = callback; req.send(null); } function callback() { if (req.readyState == 4) { if (req.status == 200) { var message = req.responseXML.getElementsByTagName("message")[0]; document.getElementById("userid").innerHTML = "message.childNodes[0].nodeValue"; } } } </script> </head> <body onload="validate('foobar')"> <div id="userid">hannak</div> </body> </html> I'm actually don't know what I'm doing wrong here. Maybe someone has a good idea. greetings chris

    Read the article

  • SWF (using XML) only working locally, not on home server or web hosting server

    - by Andy
    Hi, I use a main SWF file, which has some animations. It uses xml from a .php file which specifies several items, e.g. images and other SWFs to be used in the main SWF. Locally everything works perfectly, but when invoking it via my home server, or hosting provider it doesn't work anymore and I don't get why. All links are relative and correct. Somehow the main SWF doesn't load fully, or has problems with the XML from the .php file. I'm not sure, now I only get a black box that doesn't show any of the other content it's supposed to. check it out: http://deoshermes.ath.cx/cc-common/templates/dynamiclead/dynamic_leadee.swf the XML: <?xml version="1.0" ?><dynamic_content> <item blurb="Text 1" content_url="" content_source="" content_timer="8000" content_target="_self" tab_color="0x000000" tab_border_color="0x000000" tab_arrow_color="0xFFFFFF" tab_text_color="0xFFFFFF" tab_image="/template/images/dle_TOPmay06.jpg" cycle="true" content_border_color="0x" content_bg_image="" tab_hl_color="0x000000" tab_highlight_color="0x" tab_highlight_text_color="0x" tab_highlight_image="" > </item> <item blurb="Text 2" content_timer="5000" cycle="true" content_border_color="0x" content_bg_image="" tab_hl_color="0xFFFFFF" tab_border_color="0xFFFFFF" tab_color="0xFFFFFF" tab_arrow_color="0xFFFFFF" tab_text_color="0xFFFFFF" tab_image="/template/images/dle_MIDandBOTmay06.jpg" tab_highlight_color="0x" tab_highlight_text_color="0x" tab_highlight_image="" content_url="" content_source="" content_target="_self" > </item> <item blurb="Text 3" content_timer="5000" cycle="true" content_border_color="0x" content_bg_image="" tab_hl_color="0xFFFFFF" tab_border_color="0xFFFFFF" tab_color="0xFFFFFF" tab_arrow_color="0xFFFFFF" tab_text_color="0xFFFFFF" tab_image="/template/images/dle_MIDandBOTmay06.jpg" tab_highlight_color="0x" tab_highlight_text_color="0x" tab_highlight_image="" content_url="" content_source="" content_target="_self" > </item> </dynamic_content> this works like a charm when invoking the main SWF locally. The ActionScript from the main sWF can be found at samedomain as above/Actionscript_mainmovie.txt This also seems to work great. the function formattabs (line 68) uses some javascript. Locally the main SWF functions even without this hbx file which is located /cc-common/wss/hbx.js and use in the webpage actually. I haven't got a clue what's keeping the main SWF from working properly, because all other single SWFs work properly when invoked using a direct link. And this one just isn't working... Do I maybe need to add something in the php.ini file?? Any help would be appreciated!

    Read the article

  • Google Maps API - Marker not showing

    - by popnbrown
    I'm trying to add markers for every single row from a table, that sits on the page. The page is http://www.sravanks.com/first/2013ftcmap.php This is the JS code that's loading the markers: $(document).ready(function() { var mapOptions = { center: new google.maps.LatLng(39.740, -89.503), zoom: 7 }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); var infowindow = new google.maps.InfoWindow(); /* City Markers */ var cityCircle = new Array(); var i = 0; $.each($('.events tr'), function(index, value) { var name = $(this).find('td:first()').html(); var address = $(this).find('.address').html(); var linkUrl = "http://www.sravanks.com/first/geocode.php?address=" + address; $.ajax({ url: linkUrl }).done(function(data){ var json = $.parseJSON(data.substring(0, data.length-1)); lat = json.results[0].geometry.location.lat; lng = json.results[0].geometry.location.lng; var latlng = new google.maps.LatLng(lat, lng); var marker = new google.maps.Marker({ position: latlng, map: map, icon: 'map-pointer-medium.gif' }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(name); infowindow.open(map, marker); cityCircle[i] = new google.maps.Circle({strokeColor: '#00FF00', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#00FF00', fillOpacity: 0.35, map: map, center: latlng, radius: 144841}); i++; }); }); }); /*Team Markers*/ var markers = {}; var teamName, teamNumber, lat, lng, content; $.each($('.list tr'), function(index, value) { teamName = $(this).find('td.name').html(); teamNumber = $(this).find('td.number').html(); markers[teamNumber] = {}; lat = parseFloat($(this).find('td.lat').html()); lng = parseFloat($(this).find('td.lng').html()); content = "Name: " + teamName + "<br />Number: " + teamNumber; markers[teamNumber]['latlng'] = new google.maps.LatLng(lat, lng); markers[teamNumber]['marker'] = new google.maps.Marker({ position: markers[teamNumber]['latlng'], map: map }); google.maps.event.addListener(markers[teamNumber]['marker'], 'click', function() { infowindow.setContent(content); infowindow.open(map, markers[teamNumber]['marker']); }); }); google.maps.event.addListener(infowindow, 'closeclick', function() { for(var i=0;i<cityCircle.length;i++){ cityCircle[i].setMap(null); } }); }); I've got no errors, but the Team Markers do not show up. The strange thing is that the City Markers do show up. Some more info, the City Markers ajax call is just to a proxy that calls the google geocoding api. Again the link's at http://www.sravanks.com/first/2013ftcmap.php

    Read the article

  • C#: Label contains no text

    - by Vinzcent
    Hey I would like to get the text out of a label. But the label text is set with Javascript. On the page I can see that there is text in the label, but when I debug it shows this: "". So how do I get the text out of a label that is set with Javascript, at least that is what I think is the problem. My code: <asp:TextBox ID="txtCount" runat="server" Width="50px" Font-Names="Georgia, Arial, sans-Serif" ForeColor="#444444"></asp:TextBox> <ajaxToolkit:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server" Minimum="1" TargetButtonDownID="btnDown" TargetButtonUpID="btnUp" TargetControlID="txtCount" Width="20" /> <asp:ImageButton ID="btnUp" runat="server" AlternateText="up" ImageUrl="Images/arrowUp.png" OnClientClick="setAmountUp()" ImageAlign="Top" CausesValidation="False" /> <asp:ImageButton ID="btnDown" runat="server" AlternateText="down" ImageUrl="Images/arrowDown.png" OnClientClick="setAmountDown()" ImageAlign="Bottom" CausesValidation="False" /> <asp:Label ID="lblKorting" runat="server" /> <asp:Label ID="lblAmount" runat="server" /> <asp:Button ID="btnBestel" runat="server" CssClass="btn" Text="Bestel" OnClick="btnBestel_Click1" /> JS function setAmountUp() { var aantal = document.getElementById('<%=txtCount.ClientID%>').value-0; aantal+=1; calculateAmount(aantal); } function setAmountDown() { var aantal = document.getElementById('<%=txtCount.ClientID%>').value-0; if(aantal > 1) aantal -=1; calculateAmount(aantal); } function calculateAmount(aantal) { var prijs = document.getElementById('<%=lblPriceBestel.ClientID%>').innerHTML -0; var totaal = 0; if(aantal < 2) { totaal = prijs * aantal; document.getElementById('<%=lblKorting.ClientID%>').innerHTML = ""; } else if(aantal >= 2 && aantal < 5) { totaal = (prijs * aantal)*0.95; document.getElementById('<%=lblKorting.ClientID%>').innerHTML = "-5%"; } else if(aantal >= 5) { totaal = (prijs * aantal)*0.90; document.getElementById('<%=lblKorting.ClientID%>').innerHTML = "-10%"; } document.getElementById('<%=lblAmount.ClientID%>').innerHTML = totaal; } C# private OrderBO bestelling; protected void btnBestel_Click1(object sender, EventArgs e) { bestelling = new OrderBO(); bestelling.Amount = Convert.ToInt32(lblAmount.Text); //<--- THIS IS "" in the debugger, but on the page 10 }

    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

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

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

    Read the article

  • Ajax progress with PHP session

    - by FFish
    I have an app that processes images and use jQuery to display progress to the user. I done this with writing to a textfile each time and image is processed and than read this status with a setInterval. Because no images are actually written in the processing (I do it in PHP's memory) I thought a log.txt would be a solution, but I am not sure about all the fopen and fread's. Is this prone to issues? I tried also with PHP sessions, but can't seem to get it to work, I don't get why.. HTML: <a class="download" href="#">request download</a> <p class="message"></p> JS: $('a.download').click(function() { var queryData = {images : ["001.jpg", "002.jpg", "003.jpg"]}; $("p.message").html("initializing..."); var progressCheck = function() { $.get("dynamic-session-progress.php", function(data) { $("p.message").html(data); } ); }; $.post('dynamic-session-process.php', queryData, function(intvalId) { return function(data) { $("p.message").html(data); clearInterval(intvalId); } } (setInterval(progressCheck, 1000)) ); return false; }); process.php: // session_start(); $arr = $_POST['images']; $arr_cnt = count($arr); $filename = "log.txt"; for ($i = 1; $i <= $arr_cnt; $i++) { $content = "processing $val ($i/$arr_cnt)"; $handle = fopen($filename, 'w'); fwrite($handle, $content); fclose($handle); // $_SESSION['counter'] = $content; sleep(3); // to mimic image processing } echo "<a href='#'>download zip</a>"; progress.php: // session_start(); $filename = "log.txt"; $handle = fopen($filename, "r"); $contents = fread($handle, filesize($filename)); fclose($handle); echo $contents; // echo $_SESSION['counter'];

    Read the article

  • Adding the text area input to a list with jquery

    - by amylynn83
    I am making a shopping list app. When an item is added to the text input, it should be converted into a list item with a class of "tile" and added to the beginning of the list with a class of ".shopping_item_list". Here is my HTML: <section> <h1 class="outline">Shopping List Items</h1> <ul class="shopping_item_list"> <li class="tile">Flowers<span class="delete">Delete</span></li> </ul> </section> My jQuery: $("input[name='shopping_item']").change(function() { var item = $(this).val(); $("<li class='tile'>+ item +</li>").prependTo(".shopping_item_list"); $(".tile").removeClass("middle"); $(".shopping_item_list li:nth-child(3n+2)").addClass("middle"); }); This isn't working, and I can't figure out why. I'm new to jQuery. Also, I need to add the "delete" span to the list item and am not sure how. Thanks for any help you can offer! Edited to add: Thanks to the feedback here, I was able to make it work with: $("input[name='shopping_item']").change(function() { var item = $(this).val(); $("<li class='tile'>" + item + "<span class='delete'>Delete</span>" + " </li>").prependTo(".shopping_item_list"); $(".tile").removeClass("middle"); $(".shopping_item_list li:nth-child(3n+2)").addClass("middle"); }); However, in my jquery, I have functions for the classes "tile" and "delete" that are not working for newly added items. // hide delete button $(".delete").hide(); // delete square $(".tile").hover(function() { $(this).find(".delete").toggle(); }); $(".tile").on("click", ".delete", function() { $(this).closest("li.tile").remove(); $(".tile").removeClass("middle"); $(".shopping_item_list li:nth-child(3n+2)").addClass("middle"); }); // cross off list $(".tile").click(function() { $(this).toggleClass("deleteAction"); }); The new items, which have these classes applied aren't using these functions at all. Do I need to add the functions below the add item? Does the order in which they appear in my js file matter? Do I need to add some kind of function?

    Read the article

  • jQuery Accordion /Tabs - Call different function upon load of content

    - by Scott
    I have the following markup: <body> <div id="tabs" style="float: left"> <ul> <li><a href="ajax/question_0.html" title="Question 1"><span>Question 1</span></a></li> <li><a href="ajax/question_1.html" title="Question 2"><span>Question 2</span></a></li> <li><a href="ajax/question_2.html" title="Question 3"><span>Question 3</span></a></li> <li><a href="ajax/question_3.html" title="Question 4"><span>Question 4</span></a></li> <li><a href="ajax/question_4.html" title="Question 5"><span>Question 5</span></a></li> <li><a href="ajax/question_5.html" title="Question 6"><span>Question 6</span></a></li> </ul> <div id="dynamicContent"> </div> </div> <div class="demo-description"> <p>Click tabs to see answers to Questions</p> </div> </body> I would like to utilize an accordion or the tabs plugin from the UI. Upon completion of the load event, I'd like to call a JavaScript function, but a different function for each tab -- almost like calling onDocumentReady for a page. I have the following JavaScript: $(function() { $('#tabs').tabs().bind('tabsselect', function(event, ui) { console.log("Loading: ajax/question_" + ui.index + ".html"); return true; //Ensure that the tab gets selected }); ); That's properly loading the Ajax file and all, but whenever I attempt to do something such as evaluating a statement in the JS, it seems to be ignored. Is there any way I can do this, so that once the file is loaded my function is called -- needs to be a different function for each tab.

    Read the article

  • Need simple Twitter API v1.1 example to show timeline using jQuery or C# ASP.NET

    - by Ken Palmer
    With Twitter turning off the API 1.0 faucet on 6/11/2013, we have several sites that now fail to display timelines. I've been looking for an "If you did that, now do this" example. Here was Twitter's announcement. https://dev.twitter.com/blog/api-v1-is-retired Here is what we were originally doing to show the Twitter timeline via API 1.0. <div id="twitter"> <ul id="twitter_update_list"></ul> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline/companytwitterhandle.json?callback=twitterCallback2&amp;count=1"></script> <div style="float:left;"><a href="https://twitter.com/companytwitterhandle" target="_blank">@companytwitterhandle</a> | </div> <div class="twitterimg">&nbsp;</div> </div> Initially I tried changing the version in the JavaScript reference URL like so, which did not work. <script type="text/javascript" src="http://api.twitter.com/1.1/statuses/user_timeline/companytwitterhandle.json?callback=twitterCallback2&amp;count=1"></script> Then I looked at the Twitter API documentation (https://dev.twitter.com/docs/api/1.1/overview) which lacks a clear transition example. I don't have 4 or 5 hours to delve into that, or into this disheveled FAQ (https://dev.twitter.com/docs/faq#17750). Then I found this API documentation regarding the user timeline. So I changed the URL again as shown below. https://dev.twitter.com/docs/api/1.1/get/statuses/user_timeline <script type="text/javascript" src="https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=companytwitterhandle&amp;count=1"></script> That did not work. Using jQuery or C# ASP.NET MVC, how can I transition that interface from Twitter API 1.0 to Twitter API 1.1? My first preference would be for a browser client side implementation if that is possible. Please include a code example. Thanks.

    Read the article

  • Access multiple objects/arrays in JSON in jQuery $.each

    - by user2880254
    I am trying to build a simple page to view messages saved in a mysql db via JSON and jQuery. My JSON IS {"unread_msgs":[{"id":"6","title":"33333","user1":"19","timestamp":"1383747146","client_id":"Generic"},{"id":"5","title":"42142","user1":"19","timestamp":"1383740864","client_id":"Generic"}],"read_msgs":[{"id":"4","title":"test to addnrow","user1":"19","timestamp":"1383676647","client_id":"Generic"},{"id":"2","title":"kll","user1":"19","timestamp":"1383675548","client_id":"Generic"},{"id":"1","title":"jkjljklj","user1":"19","timestamp":"1382539982","client_id":"Generic"}],"urm_t":2,"rm_t":3} My JS <script type="text/javascript"> function GetClientMsgs () { $.post("assets/server/client_msgs.php",{ client_id:local_client_id } ,function(data) { var MsgData = $.parseJSON(data); console.log("Msg json data parsed"); $.each(MsgData, function(key, value) { console.log(value); $('#unread_row').append('<td><a href="#read_pm" onClick="ReadMsg('+value.unread_msgs.id+'); return false;">'+value.unread_msgs.title+'</a></td><td><a href="#profile">'+value.unread_msgs.studioname+'</a></td><td>'+value.unread_msgs.timestamp+'</td><td><a href="#delete_msg" onClick="DeleteMsg('value.unread_msgs.id+'); return false;">X</a></td>'); $('#read_row').append('<td><a href="#read_pm" onClick="ReadMsg('+value.read_msgs.id+'); return false;">'+value.read_msgs.title+'</a></td><td><a href="#profile">'+value.read_msgs.studioname+'</a></td><td>'+value.read_msgs.timestamp+'</td><td><a href="#delete_msg" onClick="DeleteMsg('+value.read_msgs.id+'); return false;">X</a></td>'); }); }); } </script> PHP $msgs = array('unread_msgs' => $dn1s, 'read_msgs' => $dn2s, 'urm_t' => $unread_msgs, 'rm_t' => $read_msgs); $json = json_encode($msgs); I am trying to post values returned such as unread_msgs.title or .id and am not able to access any of the objects. I have searched on here and could not find something specific to my structure. Thanks alot.

    Read the article

  • Google Map lng + lat to hidden field not working

    - by user547794
    Hello, I am trying to get Marker data into hidden fields on my form. I'm not sure why this isn't working, it must be something in my js syntax: var initialLocation; var siberia = new google.maps.LatLng(60, 105); var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687); var browserSupportFlag = new Boolean(); function initialize() { var myOptions = { zoom: 6, mapTypeId: google.maps.MapTypeId.HYBRID }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); myListener = google.maps.event.addListener(map, 'click', function(event) { placeMarker(event.latLng), google.maps.event.removeListener(myListener); }); // Try W3C Geolocation (Preferred) if(navigator.geolocation) { browserSupportFlag = true; navigator.geolocation.getCurrentPosition(function(position) { initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); map.setCenter(initialLocation); }, function() { handleNoGeolocation(browserSupportFlag); }); // Try Google Gears Geolocation } else if (google.gears) { browserSupportFlag = true; var geo = google.gears.factory.create('beta.geolocation'); geo.getCurrentPosition(function(position) { initialLocation = new google.maps.LatLng(position.latitude,position.longitude); map.setCenter(initialLocation); }, function() { handleNoGeoLocation(browserSupportFlag); }); // Browser doesn't support Geolocation } else { browserSupportFlag = false; handleNoGeolocation(browserSupportFlag); } function handleNoGeolocation(errorFlag) { if (errorFlag == true) { alert("Geolocation service failed."); initialLocation = newyork; } else { alert("Your browser doesn't support geolocation. We've placed you in Siberia."); initialLocation = siberia; } } function placeMarker(location) { var marker = new google.maps.Marker({ position: location, map: map, draggable: true }); map.setCenter(location); } } var lat = latlng.lat(); var lng = latlng.lng(); document.getElementById("t1").value=lat; document.getElementById("t2").value=lng; <input type="hidden" name="lat" id="t1"> <input type="hidden" name="long" id="t2">

    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

< Previous Page | 288 289 290 291 292 293 294 295 296 297 298 299  | Next Page >