Search Results

Search found 20021 results on 801 pages for 'click'.

Page 507/801 | < Previous Page | 503 504 505 506 507 508 509 510 511 512 513 514  | Next Page >

  • Possible iphone animation timing/rendering bug?

    - by David
    Hi all, I have been working on an iphone apps for several weeks. Now I encounter an animation problem that I can't figure out how to resolve. Mayhbe you can help. Here is the details (a little long, bear with me): Basically the effect I want to achieve is, when user click a button, a loading view pops up, hiding the whole screen; and then the apps does a lot of heavy computation, which takes a few seconds. Once the computation is done, soem result views (something likes checkers on a checker board) are rendered under the loading view. Once all result views are rendered, I used animation animation to remove the loading view nand show the result views to the user. Here is what I do: when user click a button, run this code: [UIView beginAnimations:nil context:nil]; [UIView setAnimationDuration:1.0]; [UIView setAnimationBeginsFromCurrentState:YES]; [UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:self.view cache:YES]; [UIView setAnimationDelegate:self]; [UIView setAnimationDidStopSelector:@selector(loadingViewInserted:finished:context:)]; // use a really high index number so it will always on top [self.view insertSubview:loadingViewController.view atIndex:1000]; [UIView commitAnimations]; In the "loadingViewInserted" function, it calls another function doing the heavy computation work. Once the computation is done, a lot of result views (like checkers on a checker board) are rendered under the loading view. for(int colIndex = 1; colIndex <= result.columns; colIndex++) { for(int rowIndex = 1; rowIndex <= result.rows; rowIndex++) { ResultView *rv = [ResultView resultViewWithData:results[colIndex][rowIndex]]; [self.view addSubview:rv]; } } Once all result views are added, following animation is invoked to remove the loading view: [UIView beginAnimations:nil context:nil]; [UIView setAnimationDuration:1.0]; [UIView setAnimationBeginsFromCurrentState:YES]; [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.view cache:YES]; [loadingViewController.view removeFromSuperview]; [UIView commitAnimations]; By doing this, most of the time (maybe 90%) it does exactly what I want. However, sometime I see some weird result: the loading view shows up first as expected, then before it disappears, some result views, which suppose to be under the loading view, suddenly appears on top of the loading view; and some of them are partial rendered. And then the loading view curled up, and everything looks normal again. The weird situation only lasts for less than a second, but already bad enough to screw up the UI. I have tried all different kinds of thing to fix this (using another thread to remove the loading view, make the loading view non-transparent), but none of them works. The only thing that makes a little better is, I hide all the result views first; after the last animation finished, in its call back, unhide all result views. But this loses the nice effect that when curling up the loading view, the results are already there. At this point, I really think this is a bug in iphone (I compile it with OS 3.0) OS. Or maybe you can point out what I have done wrong (or could do differently). (thanks for finishing this long post, :-) )

    Read the article

  • How can I add a previous button to this Jquery Content Slider?

    - by user1269988
    I did this nice tutorial for a Jquery Content Slider: http://brenelz.com/blog/build-a-content-slider-with-jquery/ Here is my test page: http://www.gregquinn.com/oneworld/brenez_slider_test.html But the Left button is hidden on the first slide and I do not want it to be. I don't know much about jquery but I tried to set the left button from opacity o to 100 or 1 and it didn't work the button showed up once but did not work. Does anyone know how to do this? Here is the code: (function($) { $.fn.ContentSlider = function(options) { var defaults = { leftBtn : 'images/panel_previous_btn.gif', rightBtn : 'images/panel_next_btn.gif', width : '900px', height : '400px', speed : 400, easing : 'easeOutQuad', textResize : false, IE_h2 : '26px', IE_p : '11px' } var defaultWidth = defaults.width; var o = $.extend(defaults, options); var w = parseInt(o.width); var n = this.children('.cs_wrapper').children('.cs_slider').children('.cs_article').length; var x = -1*w*n+w; // Minimum left value var p = parseInt(o.width)/parseInt(defaultWidth); var thisInstance = this.attr('id'); var inuse = false; // Prevents colliding animations function moveSlider(d, b) { var l = parseInt(b.siblings('.cs_wrapper').children('.cs_slider').css('left')); if(isNaN(l)) { var l = 0; } var m = (d=='left') ? l-w : l+w; if(m<=0&&m>=x) { b .siblings('.cs_wrapper') .children('.cs_slider') .animate({ 'left':m+'px' }, o.speed, o.easing, function() { inuse=false; }); if(b.attr('class')=='cs_leftBtn') { var thisBtn = $('#'+thisInstance+' .cs_leftBtn'); var otherBtn = $('#'+thisInstance+' .cs_rightBtn'); } else { var thisBtn = $('#'+thisInstance+' .cs_rightBtn'); var otherBtn = $('#'+thisInstance+' .cs_leftBtn'); } if(m==0||m==x) { thisBtn.animate({ 'opacity':'0' }, o.speed, o.easing, function() { thisBtn.hide(); }); } if(otherBtn.css('opacity')=='0') { otherBtn.show().animate({ 'opacity':'1' }, { duration:o.speed, easing:o.easing }); } } } function vCenterBtns(b) { // Safari and IE don't seem to like the CSS used to vertically center // the buttons, so we'll force it with this function var mid = parseInt(o.height)/2; b .find('.cs_leftBtn img').css({ 'top':mid+'px', 'padding':0 }).end() .find('.cs_rightBtn img').css({ 'top':mid+'px', 'padding':0 }); } return this.each(function() { $(this) // Set the width and height of the div to the defined size .css({ width:o.width, height:o.height }) // Add the buttons to move left and right .prepend('<a href="#" class="cs_leftBtn"><img src="'+o.leftBtn+'" /></a>') .append('<a href="#" class="cs_rightBtn"><img src="'+o.rightBtn+'" /></a>') // Dig down to the article div elements .find('.cs_article') // Set the width and height of the div to the defined size .css({ width:o.width, height:o.height }) .end() // Animate the entrance of the buttons .find('.cs_leftBtn') .css('opacity','0') .hide() .end() .find('.cs_rightBtn') .hide() .animate({ 'width':'show' }); // Resize the font to match the bounding box if(o.textResize===true) { var h2FontSize = $(this).find('h2').css('font-size'); var pFontSize = $(this).find('p').css('font-size'); $.each(jQuery.browser, function(i) { if($.browser.msie) { h2FontSize = o.IE_h2; pFontSize = o.IE_p; } }); $(this).find('h2').css({ 'font-size' : parseFloat(h2FontSize)*p+'px', 'margin-left' : '66%' }); $(this).find('p').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' }); $(this).find('.readmore').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' }); } // Store a copy of the button in a variable to pass to moveSlider() var leftBtn = $(this).children('.cs_leftBtn'); leftBtn.bind('click', function() { if(inuse===false) { inuse = true; moveSlider('right', leftBtn); } return false; // Keep the link from firing }); // Store a copy of the button in a variable to pass to moveSlider() var rightBtn = $(this).children('.cs_rightBtn'); rightBtn.bind('click', function() { if(inuse===false) { inuse=true; moveSlider('left', rightBtn); } return false; // Keep the link from firing }); }); } })(jQuery)

    Read the article

  • Slow Javascript touch events on Android

    - by oneself
    I'm trying to write a simple html based drawing application (standalone simplified code attached bellow). I've tested this on the following devices: iPad 1 and 2: Works great ASUS T101 running Windows: Works great Samsung Galaxy Tab: Extremely slow and patchy -- unusable. Lenovo IdeaPad K1: Extremely slow and patchy -- unusable. Asus Transformer Prime: Noticeable lag compare with the iPad -- close to usable. The Asus tablet is running ICS, the other android tablets are running 3.1 and 3.2. I tested using the stock Android browser. I also tried the Android Chrome Beta, but that was even worse. My questions is why are the Android tablets so slow? Am I doing something wrong or is it an inherit problem with Android OS or browser, or is there anything I can do about it in my code? multi.html: <html> <body> <style media="screen"> canvas { border: 1px solid #CCC; } </style> <canvas style="" id="draw" height="450" width="922"></canvas> <script class="jsbin" src="jquery.js"></script> <script src="multi.js"></script> </body> </html> multi.js: var CanvasDrawr = function(options) { // grab canvas element var canvas = document.getElementById(options.id), ctxt = canvas.getContext("2d"); canvas.style.width = '100%' canvas.width = canvas.offsetWidth; canvas.style.width = ''; // set props from options, but the defaults are for the cool kids ctxt.lineWidth = options.size || Math.ceil(Math.random() * 35); ctxt.lineCap = options.lineCap || "round"; ctxt.pX = undefined; ctxt.pY = undefined; var lines = [,,]; var offset = $(canvas).offset(); var eventCount = 0; var self = { // Bind click events init: function() { // Set pX and pY from first click canvas.addEventListener('touchstart', self.preDraw, false); canvas.addEventListener('touchmove', self.draw, false); }, preDraw: function(event) { $.each(event.touches, function(i, touch) { var id = touch.identifier; lines[id] = { x : this.pageX - offset.left, y : this.pageY - offset.top, color : 'black' }; }); event.preventDefault(); }, draw: function(event) { var e = event, hmm = {}; eventCount += 1; $.each(event.touches, function(i, touch) { var id = touch.identifier, moveX = this.pageX - offset.left - lines[id].x, moveY = this.pageY - offset.top - lines[id].y; var ret = self.move(id, moveX, moveY); lines[id].x = ret.x; lines[id].y = ret.y; }); event.preventDefault(); }, move: function(i, changeX, changeY) { ctxt.strokeStyle = lines[i].color; ctxt.beginPath(); ctxt.moveTo(lines[i].x, lines[i].y); ctxt.lineTo(lines[i].x + changeX, lines[i].y + changeY); ctxt.stroke(); ctxt.closePath(); return { x: lines[i].x + changeX, y: lines[i].y + changeY }; }, }; return self.init(); }; $(function(){ var drawr = new CanvasDrawr({ id: "draw", size: 5 }); });

    Read the article

  • jquery get radiobuttonlist by name dynamically

    - by Cindy
    I have two radiobuttonlist and one checkboxlist on the page. Ideally based on the checkbox selected value, I want to enable/disable corresponding radibuttonlist with jquery function. But some how $("input[name*=" + columnName + "]") always return null. It can not find the radiobuttonlist by its name? $(function() { function checkBoxClicked() { var isChecked = $(this).is(":checked"); var columnName = "rblColumn" + $(this).parent().attr("alt"); if (isChecked) { $("input[name*=" + columnName + "]").removeAttr("disabled"); } else { $("input[name*=" + columnName + "]").attr("disabled", "disabled"); $("input[name*=" + columnName + "] input").each(function() { $(this).attr("checked", "") }); } } //intercept any check box click event inside the #list Div $(":checkbox").click(checkBoxClicked); }); <asp:Panel ID="TestPanel" runat="server"> <asp:CheckBoxList ID = "chkColumn" runat="server" RepeatDirection="Horizontal"> <asp:ListItem id = "Column1" runat="server" Text="Column 1" Value="1" alt="1" class="HeadColumn" /> <asp:ListItem id = "Column2" runat="server" Text="Column 2" Value="2" alt="2" class="HeadColumn"/> </asp:CheckBoxList> <table> <tr> <td> <asp:RadioButtonList ID = "rblColumn1" runat="server" RepeatDirection="Vertical" disabled="disabled"> <asp:ListItem id="liColumn1p" runat="server" /> <asp:ListItem id="liColumn1n" runat="server" /> </asp:RadioButtonList> </td> <td> <asp:RadioButtonList ID = "rblColumn2" runat="server" RepeatDirection="Vertical" disabled="disabled"> <asp:ListItem id="liColumn2p" runat="server" /> <asp:ListItem id="liColumn2n" runat="server" /> </asp:RadioButtonList> </td> </tr> </table> </asp:Panel> source: <div id="TestPanel"> <table id="chkColumn" border="0"> <tr> <td><span id="Column1" alt="1" class="HeadColumn"><input id="chkColumn_0" type="checkbox" name="chkColumn$0" /><label for="chkColumn_0">Column 1</label></span></td><td><span id="Column2" alt="2" class="HeadColumn"><input id="chkColumn_1" type="checkbox" name="chkColumn$1" /><label for="chkColumn_1">Column 2</label></span></td> </tr> </table> <table> <tr> <td> <table id="rblColumn1" class="myRadioButtonList" disabled="disabled" border="0"> <tr> <td><span id="liColumn1p"><input id="rblColumn1_0" type="radio" name="rblColumn1" value="" /></span></td> </tr><tr> <td><span id="liColumn1n"><input id="rblColumn1_1" type="radio" name="rblColumn1" value="" /></span></td> </tr> </table> </td> <td> <table id="rblColumn2" class="myRadioButtonList" disabled="disabled" border="0"> <tr> <td><span id="liColumn2p"><input id="rblColumn2_0" type="radio" name="rblColumn2" value="" /></span></td> </tr><tr> <td><span id="liColumn2n"><input id="rblColumn2_1" type="radio" name="rblColumn2" value="" /></span></td> </tr> </table> </td> </tr> </table> </div>

    Read the article

  • Converting PHP pagination to jQuery?

    - by ClarkSKent
    Hey, I have been trying to get this pagination class that I am using to be more ajaxy - meaning when I click on the page number like page [2] the data loads, but I want to load in the data without going to a different page (HTTP request in the background, with no page reloads). Being new to both php and jquery, I am a little unsure on how to achieve this result, especially while using a php class. This is what the main page looks like by the way: <?php $categoryId=$_GET['category']; echo $categoryId; ?> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript" src="jquery_page.js"></script> <?php //Include the PS_Pagination class include('ps_pagination.php'); //Connect to mysql db $conn = mysql_connect('localhost', 'root', 'root'); mysql_select_db('ajax_demo',$conn); $sql = "select * from explore where category='$categoryId'"; //Create a PS_Pagination object $pager = new PS_Pagination($conn, $sql, 3, 11, 'param1=value1&param2=value2'); //The paginate() function returns a mysql //result set for the current page $rs = $pager->paginate(); //Loop through the result set echo "<table width='800px'>"; while($row = mysql_fetch_assoc($rs)) { echo "<tr>"; echo"<td>"; echo $row['id']; echo"</td>"; echo"<td>"; echo $row['site_description']; echo"</td>"; echo"<td>"; echo $row['site_price']; echo"</td>"; echo "</tr>"; } echo "</table>"; echo "<ul id='pagination'>"; echo "<li>"; //Display the navigation echo $pager->renderFullNav(); echo "</li>"; echo "</ul>"; ?> <div id="loading" ></div> <div id="content" ></div> Would I need to do something with this part of the class?, as seen above: $pager = new PS_Pagination($conn, $sql, 3, 11, 'param1=value1&param2=value2'); Or this?: echo $pager->renderFullNav(); I don't no much about jquery,but i guess I would start it like: $("#pagination li").click(function() { Then load something maybe... I don't no. Any help on this would be great. Thanks.

    Read the article

  • customizing into a reusable component in flex

    - by Fresher4Flex
    need to make a reusable custom component from the existing code here. So that I can use this code to make this effect(view stack) to work in any direction. In the code it has user specified height and works from downside. I need to make this component customizable, something like user is able do it in any direction.I need it urgently. I appreciate your help. 1)main Application: <?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:sh="windowShade.*"> <sh:Shade id="i1" height="15" headerHeight="14" thisHeight="215" alwaysOnTop="false" y="{this.height - 14}"/> </mx:WindowedApplication> 2)Custom Comp: Shade.mxml <?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="300" creationComplete="init()" verticalScrollPolicy="off" verticalGap="0" > <mx:Script> <![CDATA[ import mx.core.Container; import mx.core.Application; import mx.controls.Alert; import mx.effects.easing.*; import mx.binding.utils.BindingUtils; /** * Need host to adjust this object to Top */ public var alwaysOnTop:Boolean = false; /** * User can custom the height of this component */ public var thisHeight:int = 0; /** * User can custom the header height of this component */ [Bindable] public var headerHeight:int = 14; /** * The bindable value of this height */ [Bindable] public var tHeight:int = 0; /** * The bindable value of parent height */ [Bindable] public var pHeight:int = 0; /** * Initialize method */ private function init():void { if (this.thisHeight > 0 ) this.height = this.thisHeight; BindingUtils.bindProperty(this, "tHeight",this,"height" ); BindingUtils.bindProperty(this, "pHeight",this.parent,"height" ); } /** * Toggle button */ private function toggleBtn(e:MouseEvent):void { if (this.alwaysOnTop) { var container:Container = Application.application as Container; container.setChildIndex(this.parent, container.numChildren - 1 ); } if ( vs.selectedIndex == 0 ) panelOut.play(); else panelIn.play(); } ]]> </mx:Script> <mx:Move id="panelOut" target="{this}" yTo="{ pHeight - this.tHeight }" effectEnd="vs.selectedIndex = 1" duration="600" easingFunction="Back.easeOut"/> <mx:Move id="panelIn" target="{this}" yTo="{ this.pHeight - headerHeight }" effectEnd="vs.selectedIndex = 0" duration="600" easingFunction="Back.easeIn"/> <mx:VBox horizontalAlign="center" width="100%"> <mx:ViewStack id="vs" width="100%"> <mx:VBox horizontalAlign="center" > <mx:Label text="VBox 1"/> <mx:Image source="@Embed('/windowShade/add.png')" click="toggleBtn(event)"/> </mx:VBox> <mx:VBox horizontalAlign="center"> <mx:Label text="2nd VBox"/> <mx:Image source="@Embed('/windowShade/back.png')" click="toggleBtn(event)"/> </mx:VBox> </mx:ViewStack> </mx:VBox> <mx:VBox id="drawer" height="100%" width="100%" backgroundColor="#000000"> </mx:VBox> </mx:VBox>

    Read the article

  • window.open() in an iPad on load of a frame does not work

    - by user278859
    I am trying to modify a site that uses "Morten's JavaScript Tree Menu" to display PDFs in a frames set using the Adobe Reader plug-in. On the iPad the frame is useless, so I want to open the PDF in a new tab. Not wanting to mess with the tree menu I thought I could use JavaScript in the web page being opened in the viewer frame to open a new tab with the PDF. I am using window.open() in $(document).ready(function() to open the pdf in the new tab. The problem is that window.open() does not want to work in the iPad. The body of the HTML normally looks like this... <body> <object data="MypdfFileName.pdf#toolbar=1&amp;navpanes=1&amp;scrollbar=0&amp;page=1&amp;view=FitH" type="application/pdf" width="100%" height="100%"> </object> </body> I changed it to only have a div like this... <body> <div class="myviewer" ></div> </body> Then used the following script... $(document).ready(function() { var isMobile = { Android : function() { return navigator.userAgent.match(/Android/i) ? true : false; }, BlackBerry : function() { return navigator.userAgent.match(/BlackBerry/i) ? true : false; }, iOS : function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false; }, Windows : function() { return navigator.userAgent.match(/IEMobile/i) ? true : false; }, any : function() { return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows()); } }; if(isMobile.any()) { var file = "MypdfFileName.pdf"; window.open(file); }else { var markup = "<object data='MypdfFileName.pdf#toolbar=1&amp;navpanes=1&amp;scrollbar=0&amp;page=1&amp;view=FitH' type='application/pdf' width='100%' height='100%'></object>"; $('.myviewer').append(markup); }; }); Everthing works except for window.open() on the iPad. If I switch things around widow.open() works fine on a computer. In another project I am using window.open() successfully on the iPad from an onclick function. I tried using a timer function. I also tried adding an onclick function to the div and posting a click event. In both cases they worked on a computer but not an iPad. I am stumped. I know it would make more sense to handle the ipad in the tree menu frame, but that code is so complex I can't figure out where to put/modify the onclick event. Is there a way to change the object so that it opens in a new tab? Is anyone familiar enough with Mortens Tree Menu code that can tell me how to channge the on click event so that it opens the pdf in a new tab instead of opening a page in the frame? Thanks

    Read the article

  • Accordion "growing out" from its container - in IE7/8

    - by Richard Knop
    I think this problem is best explained by images. This is how my accordion looks: When you click on the small plus/minus icons the slides under each chapter will expand/collapse. However when the content in the accordion grows too tall, it grows out from its container. So if I click on more plus icons the accordion will look like this (not pretty): As you can see, the container is not growing taller together with the accordion and it does not look good. This problem only occurs in IE7 and IE8. It works in Firefox and Chrome. The HTML looks like this (simplified): <div id="content"> <div class="box2 rounded-corners"> <div class="chapters"> <h3><a href="/clientarea/view/archived-course/teid/133">Obsah</a></h3> <div id="accordion"> <ul> ... // accordion content - too long ... // accordion content - too long </ul> <div class="clear">&nbsp;</div> </div> <div class="clear">&nbsp;</div> </div> <div class="training-body"> ... // content to the right of the accordion </div> </div> </div> The CSS, again siplified: html, body { height: 100%; width: 100%; overflow: auto; } #content { background: white url('/images/background_middle.png') left top repeat-x; padding: 13px; min-height: 40em; height: auto !important; height: 40em; } /* this is the div with rounded corners */ #content .box2 { background: white; padding: 0 15px 15px; border: 1px solid #C5E3F8; position: relative; } /* left sidebar 98 #content div.chapters { float: left; width: 224px; } /* orange heading "OBSAH" */ #content div.chapters h3 { color: #ff6e19; text-transform: uppercase; font-size: .9em; text-align: center; padding-bottom: .5em; margin-top: 1em; margin-bottom: 0; } #content div.chapters h3 a { color: #ff6e19; } /* accordion */ #accordion { width: 226px; border-top: 1px solid #c5e3f8; } #accordion ul { padding-left: 0; margin-top: 0; margin-bottom: 0; margin-left: 0; } /* area to the right of the accordion */ #content div.training-body { float: left; padding-left: 0px; width: 748px; line-height: 1.3em; }

    Read the article

  • How can I hit my database with an AJAX call using javascript?

    - by tmedge
    I am pretty new at this stuff, so bear with me. I am using ASP.NET MVC. I have created an overlay to cover the page when someone clicks a button corresponding to a certain database entry. Because of this, ALL of my code for this functionality is in a .js file contained within my project. What I need to do is pull the info corresponding to my entry from the database itself using an AJAX call, and place that into my textboxes. Then, after the end-user has made the desired changes, I need to update that entry's values to match the input. I've been surfing the web for a while, and have failed to find an example that fits my needs effectively. Here is my code in my javascript file thus far: function editOverlay(picId) { //pull up an overlay $('body').append('<div class="overlay" />'); var $overlayClass = $('.overlay'); $overlayClass.append('<div class="dataModal" />'); var $data = $('.dataModal'); overlaySetup($overlayClass, $data); //set up form $data.append('<h1>Edit Picture</h1><br /><br />'); $data.append('Picture name: &nbsp;'); $data.append('<input class="picName" /> <br /><br /><br />'); $data.append('Relative url: &nbsp;'); $data.append('<input class="picRelURL" /> <br /><br /><br />'); $data.append('Description: &nbsp;'); $data.append('<textarea class="picDescription" /> <br /><br /><br />'); var $nameBox = $('.picName'); var $urlBox = $('.picRelURL'); var $descBox = $('.picDescription'); var pic = null; //this is where I need to pull the actual object from the db //var imgList = for (var temp in imgList) { if (temp.Id == picId) { pic= temp; } } /* $nameBox.attr('value', pic.Name); $urlBox.attr('value', pic.RelativeURL); $descBox.attr('value', pic.Description); */ //close buttons $data.append('<input type="button" value="Save Changes" class="saveButton" />'); $data.append('<input type="button" value="Cancel" class="cancelButton" />'); $('.saveButton').click(function() { /* pic.Name = $nameBox.attr('value'); pic.RelativeURL = $urlBox.attr('value'); pic.Description = $descBox.attr('value'); */ //make a call to my Save() method in my repository CloseOverlay(); }); $('.cancelButton').click(function() { CloseOverlay(); }); } The stuff I have commented out is what I need to accomplish and/or is not available until prior issues are resolved. Any and all advice is appreciated! Remember, I am VERY new to this stuff (two weeks, to be exact) and will probably need highly explicit instructions. BTW: overlaySetup() and CloseOverlay() are functions I have living someplace else. Thanks!

    Read the article

  • Use JQuery to target unwrapped text inside a div

    - by Chris
    I'm trying to find a way to wrap just the inner text of an element, I don't want to target any other inner dom elements. For example. <ul> <li class="this-one"> this is my item <ul> <li> this is a sub element </li> </ul> </li> </ul> I want to use jQuery to do this. <ul> <li class="this-one"> <div class="tree-item-text">this is my item</div> <ul> <li> <div class="tree-item-text">this is a sub element</div> </li> </ul> </li> </ul> A little background is I need to make an in-house tree structure ui element, So I'm using the UL structure to represent this. But I don't want developers to have to do any special formatting to use the widget. update: I just wanted to add the purpose of this is I want to add a click listener to be able to expand the elements under the li, However, since those elements are within the li the click listener will activate even when clicking on the children, So I want to attach it to the text instead, to do this the text needs to be targetable, which is why I want to wrap it in a div of it's own. So far I've come up with wrapping all the inner elements of the li in a div and then moving all inner dom elements back to the original parent. But this code is pretty heavy for something that might be much simpler and not require so much DOM manipulation. EDIT: Want to share the first pseudo alternative I came up with but I think it is very tasking for what I want to accomplish. var innerTextThing = $("ul.tree ul").parents("li").wrapInner("<div class='tree-node-text'>"); $(innerTextThing.find(".tree-node-text")).each(function(){ $(this).after($(this).children("ul")); }); Answered: I ended up doing the following, FYI i only have to worry about FF and IE compatibility so it's untested in other browsers. //this will wrap all li textNodes in a div so we can target them. $(that).find("li").contents() .filter(function () { return this.nodeType == 3; }).each(function () { if ( //these are for IE and FF compatibility (this.textContent != undefined && this.textContent.trim() != "") || (this.innerText != undefined && this.innerText.trim() != "") ) { $(this).wrap("<div class='tree-node-text'>"); } });

    Read the article

  • clock and date showing on a live site but not on localhost

    - by grumpypanda
    I've got clock.swf and date.swf working fine on a live site, now I am using the same code to set up a local develop environment. Everything is working well except the clock.swf and date.swf stopped working on localhost. Two same yellow errors "You need to update your Flash plugin. Click here if you want to continue." but of course my Flash player is up to date since the live site is working fine. I'll post the code below which I think has caused the error. I've been searching online for the last couple of hours but no luck, anyone has got into an issue like this before? What can be the possible cause? Any help is appreciated. This is on the index.php, I can post more code here if needed. <?php embed_flash("swf/clock.swf", CLOCK_WIDTH, CLOCK_HEIGHT, "8", '', "flashcontent");?> <?php embed_flash("swf/date.swf", DATE_WIDTH, DATE_HEIGHT, "8", '', "flashcontent_date");?> configure.php define('CLOCK_WIDTH', '450'); define('CLOCK_HEIGHT', ''); define('DATE_WIDTH', '440'); define('DATE_HEIGHT', ''); flash_function.php <?php function embed_flash($name, $w, $h, $version, $bgcolor, $id) { $cacheBuster = rand(); $padTop = $h/3; ?> <style> a.noflash:link, a.noflash:visited, a.noflash:active {color: #1860C2; text-decoration: none; background:#FFFFFF;} a.noflash:hover {color:#000; text-decoration:none; background:#EEEEEE;} .message { width: <?=$w;?>px; font-size:12px; font-weight:normal; margin-bottom: 10px; padding: 5px; color: #EEE; background: orange;"} </style> <div id="<?=$id; ?>" align="center"> <noscript> <div class="message"> Please enable <a href="https://www.google.com/support/adsense/bin/answer.py?answer=12654" target="_blank" class="noflash">&nbsp;JavaScript&nbsp;</a> to view this page properly. </div> </noscript> <div class="message"> You need to update your Flash plugin. Click <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash&promoid=BIOW" target="_blank" class="noflash">&nbsp;here&nbsp;</a> if you want to continue. </div> </div> <script type="text/javascript"> // <![CDATA[ var so = new SWFObject("<?=$name;?>", "", "<?=$w;?>", "<?=$h;?>", "<?=$version;?>", "<?=$bgcolor;?>"); so.addParam("quality", "high"); so.addParam("allowScriptAccess", "sameDomain"); so.addParam("scale", "showall"); so.addParam("loop", "false"); so.addParam("wmode", "transparent"); so.write("<?=$id;?>"); // ]]> </script>

    Read the article

  • Grabbing all <a> tags in a specific div and displaying them

    - by Taylor Swyter
    So I'v got a small problem with my portfolio site (you can see it at here) When you click on a portfolio piece, a top section opens up to reveal the details (Title, year, role, description) as well as the photos. I'v been able to get each project to replace all the text data, but I can't seem to get the images to load into the thumbnails. I have been able to get the last image i'm looking for in all of the images on the site, but not display each photo for each project. Here's the HTML i'm working with: <section id="details"> <div class="pagewrapper"> <section id="main-img"> <article id="big-img"> <img src="" alt="big-img" /> </article> <article class="small-img-container"> <a href="#"><img src="#" alt="smallimg" class="small-img" /></a> </article> </section> <section id="description"> <h3></h3> <h4></h4> <h5></h5> <p></p> </section> </div> <div class="clear"></div> </section> <section id="portfolio"> <div class="pagewrapper"> <h2 class="sectionTitle">Portfolio</h2> <div class="thumb"> <a class="small" href="#" title="David Lockwood Music" data-year="2010" data-role="Sole Wordpress Developer" data-description="David Lockwood is a musician and an educator based in New Hampshire who came to me needing a website for his musical career. I fully developed his site using Wordpress as a CMS, creating a custom template based on the design by Jeremiah Louf. Jeremiah and I worked together on the website's UX design."><img src="images_original/davidcover.png" alt="thumb" /> <div class="hide"> <a href="images/davidlockwood/homepage.png" ></a> <a href="images/davidlockwood/blog.png"></a> <a href="images/davidlockwood/shows.png"></a> <a href="images/davidlockwood/bio.png"></a> <a href="images/davidlockwood/photos.png"></a> </div> <h3>David Lockwood Music</h3> <div class="clear"></div> </a> </div><!--thumb--> and here's the jQuery: $(document).ready(function(){ var proj = {}; $('.thumb a').click(function() { $('#details').slideDown(1000); $('.hide a').each(function() { proj.img = $(this).attr("href"); $('.small-img-container img').attr('src',proj.img); }); alert("the image is " + proj.img);//is it getting the image URLS? proj.title = $(this).attr("title"); proj.year = $(this).attr("data-year"); proj.role = $(this).attr("data-role"); proj.description = $(this).attr("data-description"); $('#description h3').text(proj.title); $('#description h4').text(proj.year); $('#description h5').text(proj.role); $('#description p').text(proj.description); }); }); Anyone have any idea how I grab just the images for the specific project, display them all as thumbnails and then make those thumbnail clickable to see the bigger image? Thanks!

    Read the article

  • jquery drag and drop script and problem in reading json array

    - by Mac Taylor
    i made a script , exactly like wordpress widgets page and u can drag and drop objects this is my jquery script : <script type="text/javascript" >$(function(){ $('.widget') .each(function(){ $(this).hover(function(){ $(this).find('h4').addClass('collapse'); }, function(){ $(this).find('h4').removeClass('collapse'); }) .find('h4').hover(function(){ $(this).find('.in-widget-title').css('visibility', 'visible'); }, function(){ $(this).find('.in-widget-title').css('visibility', 'hidden'); }) .click(function(){ $(this).siblings('.widget-inside').toggle(); //Save state on change of collapse state of panel updateWidgetData(); }) .end() .find('.in-widget-title').css('visibility', 'hidden'); }); $('.column').sortable({ connectWith: '.column', handle: 'h4', cursor: 'move', placeholder: 'placeholder', forcePlaceholderSize: true, opacity: 0.4, start: function(event, ui){ //Firefox, Safari/Chrome fire click event after drag is complete, fix for that if($.browser.mozilla || $.browser.safari) $(ui.item).find('.widget-inside').toggle(); }, stop: function(event, ui){ ui.item.css({'top':'0','left':'0'}); //Opera fix if(!$.browser.mozilla && !$.browser.safari) updateWidgetData(); } }) .disableSelection(); }); function updateWidgetData(){ var items=[]; $('.column').each(function(){ var columnId=$(this).attr('id'); $('.widget', this).each(function(i){ var collapsed=0; if($(this).find('.widget-inside').css('display')=="none") collapsed=1; //Create Item object for current panel var item={ id: $(this).attr('id'), collapsed: collapsed, order : i, column: columnId }; //Push item object into items array items.push(item); }); }); //Assign items array to sortorder JSON variable var sortorder={ items: items }; //Pass sortorder variable to server using ajax to save state $.post("blocks.php"+"&order="+$.toJSON(sortorder), function(data){ $('#console').html(data).fadeIn("slow"); }); } </script> main part is saving object orders in table and this is my php part : function stripslashes_deep($value) { $value = is_array($value) ? array_map('stripslashes_deep', $value) : stripslashes($value); return $value; } $order = $_GET['order']; $order = sql_quote($order); if(empty($order)){ echo "Invalid data"; exit; } global $db,$prefix; if (get_magic_quotes_gpc()) { $_POST = array_map('stripslashes_deep', $_POST); $_GET = array_map('stripslashes_deep', $_GET); $_COOKIE = array_map('stripslashes_deep', $_COOKIE); $_REQUEST = array_map('stripslashes_deep', $_REQUEST); } $data=json_decode($order); foreach($newdata->items as $item) { //Extract column number for panel $col_id=preg_replace('/[^\d\s]/', '', $item->column); //Extract id of the panel $widget_id=preg_replace('/[^\d\s]/', '', $item->id); $sql="UPDATE blocks_tbl SET bposition='$col_id', weight='".$item->order."' WHERE id='".$widget_id."'"; mysql_query($sql) or die('Error updating widget DB'); } print_r($order); now forexample the output is this : items\":[{\"id\":\"item26\",\"collapsed\":1,\"order\":0,\"column\":\"c\"},{\"id\":\"item0\",\"collapsed\":1,\"order\":0,\"column\":\"i\"},{\"id\":\"item0\",\"collapsed\":1,\"order\":1,\"column\":\"i\"},{\"id\":\"item1\",\"collapsed\":1,\"order\":2,\"column\":\"i\"},{\"id\":\"item3\",\"collapsed\":1,\"order\":3,\"column\":\"i\"},{\"id\":\"item16\",\"collapsed\":1,\"order\":4,\"column\":\"i\"},{\"id\":\"item0\",\"collapsed\":1,\"order\":5,\"column\":\"i\"},{\"id\":\"item6\",\"collapsed\":1,\"order\":6,\"column\":\"i\"},{\"id\":\"item17\",\"collapsed\":1,\"order\":7,\"column\":\"i\"},{\"id\":\"item19\",\"collapsed\":1,\"order\":8,\"column\":\"i\"},{\"id\":\"item10\",\"collapsed\":1,\"order\":9,\"column\":\"i\"},{\"id\":\"item11\",\"collapsed\":1,\"order\":10,\"column\":\"i\"},{\"id\":\"item0\",\"collapsed\":1,\"order\":0,\"column\":\"l\"},{\"id\":\"item5\",\"collapsed\":1,\"order\":1,\"column\":\"l\"},{\"id\":\"item8\",\"collapsed\":1,\"order\":2,\"column\":\"l\"},{\"id\":\"item13\",\"collapsed\":1,\"order\":3,\"column\":\"l\"},{\"id\":\"item21\",\"collapsed\":1,\"order\":4,\"column\":\"l\"},{\"id\":\"item28\",\"collapsed\":1,\"order\":5,\"column\":\"l\"},{\"id\":\"item7\",\"collapsed\":1,\"order\":0,\"column\":\"r\"},{\"id\":\"item20\",\"collapsed\":1,\"order\":1,\"column\":\"r\"},{\"id\":\"item15\",\"collapsed\":1,\"order\":2,\"column\":\"r\"},{\"id\":\"item18\",\"collapsed\":1,\"order\":3,\"column\":\"r\"},{\"id\":\"item14\",\"collapsed\":1,\"order\":4,\"column\":\"r\"}]} question is how can i find out column_id or order im a little bit confused

    Read the article

  • Delaying execution of Javascript function relative to Google Maps / geoxml3 parser?

    - by Terra Fimeira
    I'm working on a implementing a Google map on a website with our own tiles overlays and KML elements. I've been previously requested to create code so that, for instance, when the page is loaded from a specific URL, it would initialize with one of the tile overlays already enabled. Recently, I've been requested to do the same for the buildings which are outlined by KML elements so that, arriving at the page with a specific URL, it would automatically zoom, center, and display information on the building. However, while starting with the tile overlays work, the building KML does not. After doing some testing, I've determined that when the code which checks the URL executes, the page is still loading the KML elements and thus do not exist for the code to compare to or use: Code for evaluating URL (placed at the end of onLoad="initialize()") function urlClick() { var currentURL = window.location.href; //Retrieve page URL var URLpiece = currentURL.slice(-6); //pull the last 6 digits (for testing) if (URLpiece === "access") { //If the resulting string is "access": access_click(); //Display accessibility overlay } else if (URLpiece === "middle") { //Else if the string is "middle": facetClick('Middle College'); //Click on building "Middle College" }; }; facetClick(); function facetClick(name) { //Convert building name to building ID. for (var i = 0; i < active.placemarks.length; i++) { if (active.placemarks[i].name === name) { sideClick(i) //Click building whose id matches "Middle College" }; }; }; Firebug Console Error active is null for (var i = 0; i < active.placemarks.length; i++) { active.placemarks is which KML elements are loaded on the page, and being null, means no KML has been loaded yet. In short, I have a mistiming and I can't seem to find a suitable place to place the URL code to execute after the KMl has loaded. As noted above, I placed it at the end of onLoad="initialize()", but it would appear that, instead of waiting for the KML to completely load earlier in the function, the remainder of the function is executed: onLoad="initialize()" information(); //Use the buttons variables inital state to set up description buttons(); //and button state button_hover(0); //and button description to neutral. //Create and arrange the Google Map. //Create basic tile overlays. //Set up parser to work with KML elements. myParser = new geoXML3.parser({ //Parser: Takes KML and converts to JS. map: map, //Applies parsed KML to the map singleInfoWindow: true, afterParse: useTheData //Allows us to use the parsed KML in a function }); myParser.parse(['/maps/kml/shapes.kml','/maps/kml/shapes_hidden.kml']); google.maps.event.addListener(map, 'maptypeid_changed', function() { autoOverlay(); }); //Create other tile overlays to appear over KML elements. urlClick(); I suspect one my issues lies in using the geoxml3 parser (http://code.google.com/p/geoxml3/) which converts our KML files to Javascript. While the page has completed loading all of the elements, the map on the page is still loading, including the KML elements. I have also tried placing urlClick() in the parser itself in various places which appear to execute after all the shapes have been parsed, but I've had no success there either. While I've been intending to strip out the parser, I would like to know if there is any way of executing the "urlClick" after the parser has returned the KML shapes. Ideally, I don't want to use an arbitrary means of defining a time to wait, such as "wait 3 seconds, and go", as my various browsers all load the page at different times; rather, I'm looking for some way to say "when the parser is done, execute" or "when the Google map is completely loaded, execute" or perhaps even "hold until the parser is complete before advancing to urlClick".

    Read the article

  • Jquery, XML and Google Map

    - by EXPennD
    Hi, I'm integrating a Google Map in my website that user could add some thumbnails and details of their own house. Here's a code preview of what I want to happen. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Jquery and Google Map // var locations = {}; function load() { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(47.614495, -122.341861), 13); GDownloadUrl("markerdata.xml", function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var address = markers[i].getAttribute("address"); var type = markers[i].getAttribute("type"); var latlng = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var store = {latlng: latlng, name: name, address: address, type: type}; var latlngHash = (latlng.lat().toFixed(6) + "" + latlng.lng().toFixed(6)); latlngHash = latlngHash.replace(".","").replace(".", "").replace("-",""); if (locations[latlngHash] == null) { locations[latlngHash] = [] } locations[latlngHash].push(store); } for (var latlngHash in locations) { var stores = locations[latlngHash]; if (stores.length > 1) { map.addOverlay(createClusteredMarker(stores)); } else { map.addOverlay(createMarker(stores)); } } }); } function createMarker(stores) { var store = stores[0]; var newIcon = MapIconMaker.createMarkerIcon({width: 32, height: 32, primaryColor: "#00ff00"}); var marker = new GMarker(store.latlng, {icon: newIcon}); var html = "<b>" + store.name + "</b> <br/>" + store.address; GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } function createClusteredMarker(stores) { var newIcon = MapIconMaker.createMarkerIcon({width: 44, height: 44, primaryColor: "#00ff00"}); var marker = new GMarker(stores[0].latlng, {icon: newIcon}); var html = ""; for (var i = 0; i < stores.length; i++) { html += "<b>" + stores[i].name + "</b> <br/>" + stores[i].address + "<br/>"; } GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } //]]> description I want this feature to be fully interactive. If possible user can drag and drop a marker to the location on the Google map and the description field would be enabled after adding the marker so user could add details and submit it. Also here's my current situation. The reason why I want it to be done in XML is the Content Management System that I currently use for this project don't allow me to add Database and Php scripts. The only thing that I have access is I could add new HTML on the BODY section and also External Javascript on the HEAD section. Sorry about the way I write it, it sounds like demanding. Its because I'm still learning Jquery. Thanks everyone!

    Read the article

  • jquery accordion - keeps hiding parent element?

    - by PopRocks4344
    Well, I fixed my original question by including after the closing tags, but now, those links won't open? So, basically, in the html below, I'm trying so that only the services section slides open, but I want the h3 tags to open those links... <div id="sp-accordion"> <h3><a href="/?page_id=3">Home</a></h3><div></div> <h3><a href="/?page_id=2">About Us</a></h3><div></div> <h3><a href="#"> Services</a></h3> <div> <p><a href="/?page_id=16">S1</a></p> <p><a href="/?page_id=14">S2</a></p> <p><a href="/?page_id=20">S3</a></p> </div> <h3><a href="/?page_id=9">Contact Us</a></h3><div></div> <h3><a href="/?page_id=5">Tips</a></h3><div></div> <h3><a href="/?page_id=108">Jobs</a></h3><div></div> <h3><a href="/?page_id=131">Newsletter</a></h3><div></div> </div> The accordion works, insomuch that when you click on the h3 tag, the container slides open, however, when it slides open, it hides the h3 before it. So, in the html below, when I click on "Services" the div beneath it slides open, but the About Us h3 disappears... This is the html: <div id="sp-accordion"> <h3><a href="/?page_id=3">Home</a></h3> <h3><a href="/?page_id=2">About Us</a></h3> <h3><a href="#"> Services</a></h3> <div> <p><a href="/?page_id=16">S1</a></p> <p><a href="/?page_id=14">S2</a></p> <p><a href="/?page_id=20">S3</a></p> </div> <h3><a href="/?page_id=9">Contact Us</a></h3> <h3><a href="/?page_id=5">Tips</a></h3> <h3><a href="/?page_id=108">Jobs</a></h3> <h3><a href="/?page_id=131">Newsletter</a></h3> </div> I'm using jquery ui, so the jquery is just this: $(document).ready(function() { $("#sp-accordion").accordion({autoHeight:false}); });

    Read the article

  • jQuery code not working in Google Chrome...

    - by Jonathan
    Hi, I have writen a simple jQuery code to control ajax tabs navigation.. Its working in good on FireFox but in Chrome it working in one page but not in the home page I don't know why... Its really simple code just a lot of animations and callbacks and stuff like that.. here's the code: jQuery.fn.tabs = function({movieID, movieTitle}) { var tabsWrap = '#movie_details_wrap'; var tabsContent = '#tab_content'; var firstTab = '#tab_detalles'; var postPHP = 'index.php?controlador=pelicula'; //When page loads... first tab actions $('ul.tabs_nav a:first').addClass('active'); //Activate first tab nav $.get(postPHP, {"activeTab": firstTab, "movieID": movieID}, function(response){ $(tabsContent).html(response); // insert response into the faded out div $(tabsWrap).animate({ // animate the wrap div using the new container div height height: $(tabsContent).height() + "px" }, function() { $(tabsContent).fadeIn(); // fade in the div with all the info }); }); //On Click Event $('ul.tabs_nav li').click(function() { $('ul.tabs_nav a').removeClass('active'); //Remove any 'active' class $(this).find('a').addClass('active'); //Add 'active' class to selected tab var activeTab = $(this).find('a').attr('href'); //Find the href attribute value to identify the active tab + content var orgHeight = $(tabsContent).height() + 'px'; // get original height $(tabsWrap).css('height', orgHeight); // set height with css to freeze the wrap div when we hide the inner div $(tabsContent).fadeOut(200, function() { // fade out the inner div // send data by ajax (post) $.get(postPHP, {"activeTab": activeTab, "movieID": movieID , "movieTitle": movieTitle}, function(response){ $(tabsContent).html(response); // insert response into the faded out div $(tabsWrap).animate({ // animate the wrap div using the new container div height height: $(tabsContent).height() + "px" }, function() { $(tabsContent).fadeIn(); // fade in the div with all the info }); }); }); return false; }); }; Here's the HTML: <script type="text/javascript"> $(document).ready(function(){ $('.tabs_nav').tabs({movieID:'135353', movieTitle: 'Some Title'}); }); </script> <!--Navigation--> <ul id="details_nav" class="tabs_nav"> <li><a href="#tab_detalles">Detalles</a></li> <li><a href="#tab_criticas">Criticas</a></li> <li><a href="#tab_posters">Posters</a></li> <li><a href="#tab_trailers">Trailers</a></li> </ul> <div class="border_wrap"> <div id="movie_details_wrap"> <div id="tab_content"> <!--Tabs content here--> </div> </div> </div>

    Read the article

  • Using javascript, show a certain amount of divs based on an answer

    - by Adam
    I'm building a form that first asks if you have 'foo'. If the answer is 'Yes', a div appears and asks 'How many foo do you have'? Based on the quantity answered, I'd like to show only that many divs. Thus if the user answers 1, only the first div will show. If they answer three, the first three will show. I have it set so that if the user answers no, the question of the amount remains hidden, but if they answer yes, they would be prompted for the quantity. This is what I've got so far... <script type="text/javascript"> $(document).ready(function(){ $(window).load(function() { $('#amt_of_foo,.foo_panels').hide(); }); $('#yes_foo').click(function() { $('#amt_of_foo').show(); }); $('#no_foo').click(function() { $('.foo_panels,#amt_of_foo').hide(); }); }); </script> </head> <body> <ul> <li> <div class="panel section_panel"> <h2>Questions About Your Foo</h2> <span>Do you have foo?:</span> <input type="radio" name="foo" id="no_foo" /> No <br /> <input type="radio" name="foo" id="yes_foo" /> Yes:</span></span> <span id="amt_of_foo"> <span>How many foo do you have?:</span> <span><input id="qty_of_foo" type="text" size="5" /> </span> </span> </div> </li> <!--answered yes to foo, and entered amount--> <div class="foo_panels"> <li> <li> <div class="panel foo_1"> <h1>First foo's information</h1> <span>Foo name:&nbsp;<input type="text" size="20" /></span> </div> </li> <li> <div class="panel foo_2"> <h1>Second foo's information</h1> <span>Foo name:&nbsp;<input type="text" size="20" /></span> </div> </li> <li> <div class="panel foo_3"> <h1>Third foo's information</h1> <span>Foo name:&nbsp;<input type="text" size="20" /></span> </div> </li> </div> <!--answered no to foo--> <li> <div class="panel"> <h1>Next Question, if no foo</h1> </div> </li> </ul> The ul is used for a jQuery 'slider' plugin. the 'panel' class is used for global css.

    Read the article

  • How do I make the info window editable in the Google Maps API?

    - by zjm1126
    I would like to make the info window editable when i click on it. This is my code: <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=0.3,maximum-scale=5.0,user-scalable=yes"> </head> <body onload="initialize()" onunload="GUnload()"> <style type="text/css"> *{ margin:0; padding:0; } </style> <!--<div style="width:100px;height:100px;background:blue;"> </div>--> <div id="map_canvas" style="width: 500px; height: 300px;"></div> <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA-7cuV3vqp7w6zUNiN_F4uBRi_j0U6kJrkFvY4-OX2XYmEAa76BSNz0ifabgugotzJgrxyodPDmheRA&sensor=false"type="text/javascript"></script> <script type="text/javascript"> var aFn; //********** function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); var center=new GLatLng(39.9493, 116.3975); map.setCenter(center, 13); aFn=function(x,y){ var point =new GPoint(x,y) point = map.fromContainerPixelToLatLng(point); //console.log(point.x+" "+point.y) var marker = new GMarker(point,{draggable:true}); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("<b>wwww</b>"); }); map.addOverlay(marker); /********** var marker = new GMarker(point, {draggable: true}); GEvent.addListener(marker, "dragstart", function() { map.closeInfoWindow(); }); GEvent.addListener(marker, "dragend", function() { marker.openInfoWindowHtml("????..."); }); map.addOverlay(marker); //*/ } $(".b").draggable({ revert: true, revertDuration: 0 }); $("#map_canvas").droppable({ drop: function(event,ui) { //console.log(ui.offset.left+' '+ui.offset.top) aFn(event.pageX-$("#map_canvas").offset().left,event.pageY-$("#map_canvas").offset().top); } }); } } </script> </body> </html>

    Read the article

  • Encoding GBK2312 Condundrum

    - by user792271
    I am an amateur coder and I have a small problem. My goal is to have one text input with two buttons. The first button uses a bit of Javascript called SundayMorning to translate the text (to Chinese) The second button submits the text to a URL. The URl requires that Chinese text be encoded it in GBK2312 character set. I have duct taped together various found code to the result I have now. Due to the finicky behavior of the SundayMorning Javascript, my solution is to have two input boxes, the second of which I will hide. Right now, this doesn't work: I am unable to encode the Chinese in GBK2312, no matter what I try. BONUS CONUNDRUM: The second box copies my input letter by letter as I type, but does not copy the Chinese translation that the Javascript returns. Sorry for my janky amateur code. I defer to those more clever, if you have any kind suggestions. <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <script type='text/javascript' Src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'> </script> ///THIS JS TRANSLATES THE TEXT INLINE <script type="text/javascript" src="jquery.sundaymorning.js"> </script> <script type="text/javascript"> $(function() { $('#example3').sundayMorningReset(); $('#example3 input[type=image]').click(function(evt) { $.sundayMorning( $('#example3 input[type=text]').val(),{source:'en', destination:'ZH', menuLeft:evt.pageX, menuTop:evt.pageY},function(response) {$('#example3 input[type=text]').val(response.translation);});});}); </script> /// ///THIS PUTS THE CONTENT OF THE TRANSLATION BOX INTO THE SUBMISSION BOX <script type="text/javascript"> $(document).ready(function(){ var $url = $("#url"); $("#track").keyup(function() { $url.val(this.value);}); $("#track").blur(function() { $url.val(this.value);});}); </script> ///THIS PUTS THE CONTENT OF THE SUBMISSION INSIDE A URL <SCRIPT type="text/javascript"> function goToPage(url) { var initial = "http://example.com/"; var extension = ".html"; document.something.action=initial+url+extension; } </SCRIPT> </head> <body> <div id="featured"> <div id="example3"> <input type="text" name="track" id="track" value="" class="box"onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('mama').click();}};"/> <input type="image" src="http://taobaofieldguide.com/images/orange-translate-button.png" id="searchsubmit" value="Translate" class="btn" /> </div> <FORM name="something" method="post" onsubmit="goToPage(this.url.value);"> <input type="text" id="url";> <INPUT type="submit" id="mama" value="GO" > </FORM> </div> </body>

    Read the article

  • create previous next button for iframe pages

    - by Resu
    This topic may have lots of code out there, BUT I seem to be looking for a variation that isn't based on history, is it possible... So I have this code... <script type="text/javascript"> var pages=new Array(); pages[0]="listItem1.html"; pages[1]="listItem2.html"; pages[2]="listItem3.html"; pages[3]="listItem4.html"; pages[4]="listItem5.html"; var i=0; var end=pages.length; end--; function changeSrc(operation) { if (operation=="next") { if (i==end) { document.getElementById('the_iframe').src=pages[end]; i=0;} else { document.getElementById('the_iframe').src=pages[i]; i++;}} if (operation=="back") { if (i==0) { document.getElementById('the_iframe').src=pages[0]; i=end;} else { document.getElementById('the_iframe').src=pages[i]; i--;}}} </script> </head> <body> <ul id="menu" role="group"> <li><a href="listItem1.html" target="ifrm" role="treeitem">Welcome</a> <ul> <li><a href="listItem2.html" target="ifrm" role="treeitem">Ease of Access Center</a></li> </ul> </li> <li><a href="listItem3.html" target="ifrm">Getting Started</a> <ul> <li><a href="listItem4.html" target="ifrm">Considerations</a></li> <li><a href="listItem5.html" target="ifrm">Changing Perspective</a></li> </ul> </li> </ul> <iframe id="the_iframe" scrolling="no" src="listItem1.htm" name="ifrm" style="width:540px;></iframe> <input type="button" onClick="changeSrc('back');" value="Back" /> <input type="button" onClick="changeSrc('next');" value="Next" /> and if I click on the next or prev button, it does move somewhere,but... let's say my iframe is showing listItem2, then I click on listItem4 in the menu (there is a tree menu involved), then I want to go to listItem3 and I hit the back button...instead of going to listItem3, it goes to listItem2 (or someplace that is not back a page from 4 to 3). It appears that the buttons are navigating based on history?...but I just want a straight forward or backward movement...I don't want my buttons to have this browser-type functionality...If I'm on listItem4 and hit the next button, I want it to go to listItem5. Many Thanks For Any Help!

    Read the article

  • posting array of text fields using jquery and ajax

    - by tabia
    i dont want to use serialize() function please help me with this. I am a beginner html <input type='button' value='Add Tier Flavor' id='Add'> <input type='button' value='Remove Tier Flavor' id='Remove'> <div id='batch'> <div id="BatchDiv1"> <h4>Batch #1 :</h4> <label>Flavor<input class="textbox" type='text' id="fl1" name="fl[]" value=""/></label></br> <label>Filling<input class="textbox" type='text' id="fi1" name="fi[]" value="" /></label></br> <label>Frosting<input class="textbox" type='text' id="fr1" name="fr[]" value=""/></label></br> </div> </div> <br> </div> this is a dynamically added fields using javascript the code is: javascript <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var counter = 2; $("#Add").click(function () { if(counter>5){ alert("Only 5 Tiers allow"); return false; } var newBatchBoxDiv = $(document.createElement('div')).attr("id", 'BatchDiv' + counter); newBatchBoxDiv.html('<h4>Batch #'+ counter + ' : </h4>' + '<label> Flavor<input type="text" name="fl[]" id="fl' + counter + '" value=""></label><br>'+ '<label> Filling<input type="text" name="fi[]" id="fi' + counter + '" value=""></label><br>'+ '<label> Frosting<input type="text" name="fr[]" id="fr' + counter + '" value=""></label><br>' ); newBatchBoxDiv.appendTo("#batch"); counter++; }); $("#Remove").click(function () { if(counter==1){ alert("No more tier to remove"); return false; } counter--; $("#BatchDiv" + counter).remove(); }); }); </script> i am trying to post the values in an array to post it onto next .php page i am using this var user_cupfl = $('input[name^="fl"]').serialize(); var user_cupfi = $('input[name^="fi"]').serialize(); var user_cupfr = $('input[name^="fr"]').serialize(); serialize is not passing the values. :( on second page i am trying to mail it using $message .= "<tr><td><strong>Cake Flavors(according to batches):</strong> </td><td><pre>" .implode("\n", $user_cupfl). "</pre></td></tr>"; $message .= "<tr><td><strong>Filling type (Inside the cake):</strong> </td><td><pre>" .implode("\n", $user_cupfi). "</pre></td></tr>"; $message .= "<tr><td><strong>Frosting type (top of the cake):</strong> </td><td><pre>" .implode("\n", $user_cupfr). "</pre></td></tr>"; i m posting array like this $user_cupfl=filter_var($_POST["userCupfl"], FILTER_SANITIZE_STRING); $user_cupfi=filter_var($_POST["userCupfi"], FILTER_SANITIZE_STRING); $user_cupfr=filter_var($_POST["userCupfr"], FILTER_SANITIZE_STRING); your replies will be highly appreciated

    Read the article

  • Help with Jquery and multiple forms on a page.

    - by Will
    I have a several forms that are output from a database on the same page. It works fine when I don't use ajax. When I use Jquery it will only work for the first form. Could anyone point me in the right direction please? Jquery..... $('.updateSubmit').live('click', function() { var id = $('.id').val(); var hardSoft = $('.hardSoft').val(); var brand = $('.brand').val(); var subCat = $('.subCat').val(); var subSubCat = $('.subSubCat').val(); var tProduct = $('.tProduct').val(); var description = $('.description').val(); var quantity = $('.quantity').val(); var price = $('.price').val(); var tCondition = $('.tCondition').val(); var featured = $('.featured').val(); var theData = 'id=' + id + '&hardSoft=' + hardSoft + '&brand=' + brand + '&subCat=' + subCat + '&subSubCat=' + subSubCat + '&tProduct=' + tProduct +'&description=' + description + '&quantity=' + quantity + '&price=' + price + '&tCondition=' + tCondition + '&featured=' + featured; $.ajax ({ type: 'POST', url: '/updateGrab.php', data: theData, success: function(aaa) { $('.'+id).append('<div class="forSuccess">'+aaa+'</div>'); } // end success }); // end ajax return false; }); // end click and my php form...... while ($row = $stmt->fetch()) { echo " <form action='http://www.wbrock.com/updateGrab.php' method='post' name='".$id."'> <input type='hidden' class='id' name='id' value='".$id."' /> Hardware/Software <input type='text' class='hardSoft' name='hardSoft' value='".$hardSoft."' /> Brand <input type='text' class='brand' name='brand' value='".$brand."' /> Sub-category <input type='text' class='subCat' name='subCat' value='".$subCat."' /> Sub-Sub-Cat <input type='text' class='subSubCat' name='subSubCat' value='".$subSubCat."' /> Product <input type='text' class='tProduct' name='tProduct' value='".$tProduct."' /> Description <input type='text' class='description' name='description' value='".$description."' /> Qty <input type='text' class='quantity' name='quantity' value='".$quantity."' /> Price <input type='text' class='price' name='price' value='".$price."' /> Cond <input type='text' class='tCondition' name='tCondition'value='".$tCondition."' /> Featured <input type='text' class='featured' name='featured' value='".$featured."' /> <input type='submit' id='".$id."' class='updateSubmit' name='updateSubmit' value='Update' /> </form> <span class='".$id."'></span> "; // end echo } // end while loop from database This is the first time I've posted here so sorry if its not in the right format. Thanks in advance for the help.

    Read the article

  • jQuery autocomplete. Doesn't reveal existing matches.

    - by Alexander
    Hello fellow engineers. I have come across a problem I just can't solve. I am using autocomplete plugin for jQuery on an input. The HTML looks something like this: <tr id="row_house" class="no-display"> <td class="col_num">4</td> <td class="col_label">House Number</td> <td class="col_data"> <input type="text" title="House Number" name="house" id="house"/> <button class="pretty_button ui-state-default ui-corner-all button-finish">Get house info</button> </td> </tr> I am sure that this is the only id="house" field. Other fields that are before this one work fine with autocomplete, and it's basically the same algorithm (other variables, other data, other calls). So why doesn't it work like it should work with the following init. code: $("#house").autocomplete(["1/4","6","6/1","6/4","8","8/1","8/5","10","10/1","10/3","10/4","12","12/1","12/5","12/6","14","14/1","15","15/1","15/2","15/4","15/5","16","16/1","16/2","16/21","16/2B","16/3","16/4","17","17/1","17/2","17/4","17/5","17/6","17/7","17/8","18","18/1","18/2","18/3","18/5","18/95","19","19/1","19/2","19/3","19/4","19/5","19/6","19/7","19/8","20","20/1","20/2","20/3","20/4","21","21/1","21/2","21/3","21/4","22","22/9","23","23/2","23/4","24","24/1","24/2","24/3","24/A","25","25/1","25/10","25/2","25/4","25/5","25/6","25/7","25/8","25/9","26","26/1","26/6","27","27/2","28","28/1","29","29/2","29/3","29/4","30","30/1","30/2","30/3","31","31/1","31/3","32/A","33","34","34/1","34/11","34/2","34/3","35","35/1","35/2","35/4","36","36/1","36/A","37","37/1","37/2","38","38/1","38/2","39/1","39/2","39/3","39/4","40","40/1","41","41/2","42","43","44","45","45/1","45/10","45/11","45/12","45/13","45/14","45/15","45/16","45/17","45/2","45/3","45/6","45/7","45/8","45/9","46","47","47/2","49","49/1","50","51","51/1","51/2","52","53","54","55/7","66","109","122","190/8","412"], {minChars:1, mustMatch:true}).result(function(event, result, formatted) { var found=false; for(var index=0; index<HChouses.length; index++) //HChouses is the same array used for init, but each entry is paired with a database ID. if(HChouses[index][0]==result) { found=true; HChouseId=HChouses[index][1]; $("#row_house .button-finish").click(function() { QueryServer("HouseConnect","FillData",true,HChouseId); //this performs an AJAX request }); break; } if(!found) $("#row_house .button-finish").unbind("click"); }); Each time I start typing (say I press the "1" button), the text appears and gets deleted instantly. Rarely at all after repeated presses I get the list (although much shorter than it should be) But if after that I press the second digit, the whole thing disappears again. P.S. I use Firefox 3.6.3 for development.

    Read the article

  • JQuery works on JsFiddle but not in project

    - by DanielNova
    Here is the JsFiddle I created: http://jsfiddle.net/ShHVy/ Everything works fine - different data is displayed in the column row to the right as I wish.. However, even having this exact code in my Project won't make it work The page in question is a popup view and it looks like this: <style type="text/css"> .highlighted { background-color: Orange; color: White; } </style> <script> var chosen = []; $("td").click(function () { var idx = $(this).index() + 1; $("td:nth-child(" + idx + ")").removeClass("highlighted"); $(this).addClass("highlighted"); chosen[idx] = $(this).parent("tr").index(); }); var data = { "Differdange": ["Differdange 1", "Differdange 2", "Differdange 3", "Differdange 4"], "Dippach": ["Dippach 1", "Dippach 2", "Dippach 3", "Dippach 4", ] }; function pushData(id, col) { $("#datachange table td:nth-child(" + 2 + ")").each(function (i, v) { $(this).html(data[id][i]) }); } $(function () { $("#datachange td").click(function () { var idx = $(this).index() + 1; $("td:nth-child(" + idx + ")").removeClass("highlighted"); $(this).addClass("highlighted"); pushData($(".highlighted").html(), 2); }); }); </script> <html> <head><title>Table Data Change</title></head> <body id="datachange" class="demo"> <table> <thead> <tr> <th>ID</th> <th>DATA</th> </tr> </thead> <tbody> <tr> <td>Differdange</td> <td></td> </tr> <tr> <td>Dippach</td> <td></td> </tr> <tr> <td>Dippach</td> <td></td> </tr> <tr> <td>Differdange</td> <td></td> </tr> </tbody> </table> </body> </html> Can anyone tell me why this small piece of JQuery doesn't work on mine (it's nothing to do with libraries as the top "td" function works 100% fine)

    Read the article

< Previous Page | 503 504 505 506 507 508 509 510 511 512 513 514  | Next Page >