Jump to content

Search the Community

Showing results for tags 'JQuery'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 286 results

  1. Nice be with you everyone! My problem is how to call javascript function inside jquery? <script type="text/javascript" src="javascripts/jquery-1.9.1.min.js"></script> <script> function li(){ var A=$(this).text();$(.text(A.substr(0,19)); $("#job").removeAttr("name value"); $("#position").attr({"name":"jobApplied", "value":A }); $(.css({"color":"#000", "background":"#fff" }); $(C).css({"color":"#a9a9a9", "background":"#d9d9d9"}).text(D); $("#job").css({"background":"#d9d9d9" }); } $(document).ready(function(){$("#ul1 li ul a").on("click",function(){ var B="#cut1", C="#cut2", D="Medical positions"; /* I want to call function li() here but it is not working */ });}); $(document).ready(function(){$("#ul2 li ul a").on("click",function(){ var B="#cut2", C="#cut1", D="Technical positions"; /* I want to call function li() here but it is not working */ });}); </script> Thank you.
  2. Im wondering how to select .tabs column on button click because anything i tried didin't work for me. I've tried methdows below. Lets imagine my tab would be <div id="tabs"><li><a href="#tabs-1">Page1</a></li><li><a href="#tabs-2">Page2</a></li><li><a href="#tabs-3">Page3</a></li><li><a href="#tabs-4">Page4</a></li><div id="tabs-1">Page1 content here <button type="submit" value="Clickme" id="clickme"></div><div id="tabs-2">Page2 content here</div><div id="tabs-3">Page3 content here</div><div id="tabs-4">Page4 content here</div></div> And jQuery $(function() {$("#tabs").tabs();$("#clickme").on('click', function() {alert("This works");$("#tabs").tabs({selected:3}); //Doesnt work$("#tabs").tabs("select", "#tabs2"); //Doesnt work});}); So the alert work but tabs select doesn't. Yes i have jQuery & jQuery-ui files linked. Prob tried all methods herehttp://stackoverflow.com/questions/5912762/jquery-ui-tabs-how-to-select-a-tab-based-on-its-id-not-based-on-index jquery-ui tabshttp://jqueryui.com/tabs/
  3. Hello, im trying to make javascript/jquery code that will read excel file so i can paste it to listbox and make some functions.It should be like this DEMO 7, but with excel data and not php http://kotowicz.net/jquery-option-tree/demo/demo.html Here is one example also but mine needs more functionality not just writing all data to javascript, because i have 5000 lines in my excel file. http://www.mol.fi/paikat/
  4. http://jsbin.com/azipok/2/edit this piece of code does the trick of clearing up the option list of select menu and adding a "test" message, but this message becomes visible only upon dropping down the select menu. is there a way to make this "test" message display and replace the "no modules..." text upon clicking the button?
  5. Mudsaf

    jQuery GET method PHP

    Hello, im wondering how does jQuery get method work. Since it should not reload the page again? I've seen this, but how to example make this more automated whitout refreshing "http://mudsaf.info/games/index.php". $.ajax({ url: url, data: data, success: success, dataType: dataType});
  6. Need expert help, Javascript is same as example, but has error in IE, works perfect in chrome/firefox. Jquery spectrum() colorpicker The example works perfect in Internet explorer, here: http://jsfiddle.net/bgrins/ctkY3/ Then on my test site, using the exact same css+js files it will not work on my site in IE: http://xekon.byethost7.com/ I have even simplified the example a bit. I cannot tell what the problem is, but I would certainly appreciate any help. I inspected the source at jsfiddle but did not see anything being done differently. edit: Also I am using windows 7, latest updates, Internet Explorer 9.0.8112.16421I have also tried from windows XP sp3, latest updates, Internet Explorer 8.0.6001.18702
  7. General Question: Though aware that jQuery is just an adapted form of Javascript, I am confused about their simultaneous use and interaction. Although it seems very probable that one can employ jQuery wherever one employs Javascript, can one employ Javascript wherever there is jQuery. In my previous example entitled Turning the jQuery Overlay Tool Target Property into an Array I am wondering whether I could just as easily create my envisioned target property array inside the JQuery code as outside. For example, would it make a difference if I wrote, <script>$(window).load(function() { var overlay_target = Array('#overlay_1', '#overlay_2', ,,,, '#overlay_N); $("img[rel]").overlay({ effect:"apple" }); $("em.EM_Overlay").overlay({ effect:"apple", target:"overlay_target[]" });});</script> or <script>var overlay_target = Array('#overlay_1', '#overlay_2', ,,,, '#overlay_N);$(window).load(function() { $("img[rel]").overlay({ effect:"apple" }); $("em.EM_Overlay").overlay({ effect:"apple", target:"overlay_target[]" });});</script> Roddy
  8. Background: I recently discovered how to overcome the problem of misapplied "rel" attributes when using the Overlay Tool in the absence of HTML tags with link attributes such as "href" and "src". The Overlay Tool has something called the "target" property that allows users to assign a link to the jQuery code that corresponds to the selector that activates the code. Now, the beauty of the "rel" attribute was that one could use the same selector to evoke the same functionality for different Overlay and trigger elements. One had simply to enter a different target value for the "rel" attribute of each trigger element and a different overlay would result. This, however, is not possible with target property, as there is only one target for each invocation of the same selector. Problem: My proposal is to create a target_array that would become the value of the Overlay Tool's target property whose individual elements could be accessed according to the activated trigger element. Unfortunately, I do not know whether the target property would accept such a value, let alone how to access the target property once the array has been created. Any suggestions? The following code fails due to the redundancy of the selectors and conflicting targets. $(window).load(function() { $("img[rel]").overlay({ effect:"apple" }); $("em.EM_Overlay").overlay({ effect:"apple", target:"#overlay_1_narrative" }); $("em.EM_Overlay").overlay({ effect:"apple", target:"#overlay_2_narrative" }); ... $("em.EM_Overlay").overlay({ effect:"apple", target:"#overlay_N_narrative" });}); Roddy
  9. Background: I have implemented the jQuery UI Overlay Tool and am seeking to customize the Apple effect. Although I have been able to obtain the desired display, I am unable to implement the close function properly. Online queries have shown that I am not the only one with this problem. Unfortunately, each case appears to be different, and none matches mine. I have tried resetting the configuration options of the Overlay tool itself, but to know avail. What confuses me even more is that I have been able to get the close function to work for one set of overlays, but not for another. The only difference for the two set ups is the size and shape of the displayed image. After much frustration I stumbled on the following passage: Question: How does one replace the $(function() {...}); script with the $(window).load() script? Roddy
  10. Background: According to the W3Schools webpage the "rel" attribute should only be used with the <a> tag when the "href" attribute is present. In contrast, the "rel" attribute is used in jQuery Tools with the <img> element and the "src" attribute. There is an obvious contradiction here. Question One: Just how flexible is the "rel" attribute? Can it be used with any HTML element that refers to a link? If not, just what are its exact limitations? Question Two: Is it possible to reconfigure jQuery Tools dynamically so that an attribute other than the "rel" attribute can be used in the absence of an HTML tag with a linked document? How would one go about it? A former W3Schools regular,Roddy (Kiusau)
  11. Hello, it's been a while since I've posted in this forum, but I'm doing what I can to get a pre-existing jQuery plugin to work, and I'm currently pulling out all of my hair. The plugin itself works, I'm just unsure how to implement it. After including it, what html would I use to create the slider? A live version of the script can be viewed here: http://wptitans.com/majestics/ // JavaScript DocumentjQuery(function($){ $.fn.featureslider = function(options){ /* ================================================================================================ *//* ======================================== Plugin Options ======================================== *//* ================================================================================================ */var defaults = { time:4000, width:600, height:400, effect:'none', autoplay:false, listControls:true, callback:function(){ } }; var options = $.extend(defaults, options);/* ================================================================================================ *//* ==================================== Variables & Precaching ==================================== *//* ================================================================================================ */ return this.each(function() { var root = $(this).addClass('mainslider'); var parent = root.parent(); var li = root.find("li"); var images = li.find("img"); var pos,random_no,timer,image_timer,counter,arr,wait,index,block,w,h,src,parent,im,override=false,in_animation = false,controls,canvas,html5_flag=false,imageData,canvas,context,root_parent; var current = li.eq(1).toggleClass('active'),prev = li.first().addClass("reset"); var bool = true,first_bool = true; root.css({ width: options.width, height: options.height }); li.first().find("div.description").css("display","block"); li.first().fadeIn('slow'); current.hide(); if(options.listControls==true) appendControls(); /* ================================================================================================ *//* ======================================== Switcher Module ======================================= *//* ================================================================================================ */ function switcher() { if(current.prev().length>0) prev = current.prev(); else prev = li.last(); prev.removeClass("reset"); current.toggleClass("active reset"); if(current.next().length>0) // setting the next slide current = current.next(); else current = li.first(); current.hide(); current.addClass("active"); options.callback(); } /* ================================================================================================ *//* ================================= Effects Switching & Ending =================================== *//* ================================================================================================ */ function endeffect(image){ if(options.listControls==true) { controls.removeClass("control_active"); controls.eq(current.index()).addClass("control_active"); } clearInterval(timer); setTimeout(function(){ in_animation = false; if(override==false) // Return if manually triggered image_timer = setTimeout(function() { current.find("div.description").fadeOut('fast'); switcher(); effects(); },(options.time-800)); },1000); };function effects(){ if(li.is(":animated"))return; if(bool==true) { li.first().find("div.description").hide(); bool=false; first_bool = false; } switch(0) { case 0: current.find("div.description").fadeIn('normal'); current.fadeIn("slow",function(){ endeffect($(this)); });break; }}/* ================================================================================================ *//* ======================================== Control Options ======================================= *//* ================================================================================================ */ function appendControls() { var str = "<ul class='controls'>"; for(var i=0;i<li.length;i++) str = str + "<li>"+(i+1)+"</li>"; str = str+"</ul>"; root.after(str); controls = parent.find(".controls li"); controls.first().addClass("control_active"); controls.parent().css("left", 980/2 + 20 + controls.parent().width()/2 ) controls.bind({ click:function(){ setImage($(this).index()); }, mouseover:function(){ $(this).toggleClass("control_hover"); }, mouseout:function(){ $(this).toggleClass("control_hover"); } }); }/* ================================================================================================ *//* ======================================== Image Settings ======================================== *//* ================================================================================================ */ function setImage(index){ if(first_bool==true) { if(in_animation==true||current.index()-1==index) return; } else if(in_animation==true||current.index()==index) return; li.removeClass("reset active"); current.find("div.description").hide(); clearTimeout(image_timer); // Manual Override... if(first_bool==true) li.first().addClass("reset"); current.addClass("reset"); prev = current; current = li.eq(index).addClass("active"); override = true; effects(); } if(options.autoplay==true) image_timer = setTimeout(function() { effects(); },options.time); // Starting the Slideshow }); }; });
  12. Hey Everyone! i want to convert my HTML form data to JSON and send that JSON to a PHP page on server. How can i do that. My HTML form is like this.. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title></head><body id="top"><p>Enter Products</p><form id="form1" name="form1" method="post" action="create_product.php"> <p>Name <input type="text" name="name" id="name" /> </p> <p>Description <input type="text" name="desc" id="desc" /> </p> <p>Short Description <input type="text" name="short_desc" id="short_desc" /> </p> <p>Weight <input type="text" name="weight" id="weight" /> </p> <p>Price <input type="text" name="price" id="price" /> </p> <p>SKU <input type="text" name="sku" id="sku" /> </p> <p>Category <select id="userdata" name="category"> <option>Choose</option> </select> </p> <p>Promotion <select name="promotion"> <option value="1">Yes</option> <option value="0">No</option> </select></p> <p> <br> <label for="image"><span class="style1">Enter Image</span></label><br> <input type="file" name="uploaded" id="uploaded" /> </br></br> </p> <p>Submit <input type="submit" name="button" id="button" value="Submit" /> </p></form><p>*SKU must be unique</p></body></html> Please help me..
  13. Hello I have example database where is (Few values added) ID, SUBJECT, NAME1, Hello world, Mudsaf2, Hello world2, Mudsaf Then i get the data from sql with query (querys and row works perfectly <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script><script src="http://malsup.github.com/jquery.form.js"></script> <script> // wait for the DOM to be loaded $(document).ready(function() { // bind 'myForm' and provide a simple callback function $('#removepost').ajaxForm(function() { alert("Something happened"); }); }); </script> <?php$query = "blablaablla"... untill while ($row = mysql_fetch_array($result)) { echo "<form id='removepost' method='post' action='script/removepost.php'> <input type='hidden' readonly='readonly' name='id' id='id' value='1' /> <input type='submit' name='submit' id='submit' value='Remove'></form>" . $row['SUBJECT']; } ?> The form works perfectly, but doesn't work with jQuery. http://malsup.com/jquery/form/ <--- This method doesn't work So im wondering is it possible to get that script work OR where do i link the jQuery files. So currenctly it goes to script/removepost.php, but it should stay at same page and let jQuery run the script whitout page refreshing/moving to action file. Should the form be changed from id to class and in jquery the #removepost to .removepost?
  14. hi there again... battling a bit with this issue, the category "contact us" from the joomgallery in the following joomla page loads:http://www.gamersedg...atid=3&Itemid=3but i am however, trying to make the single image in the category, automatically clicked on page load. i know triggering this is possible with jquery - but here follows my attempt after the page is loaded: <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script language="javascript"> <!-- var q = "option=com_joomgallery&view=category&catid=3&Itemid=3"; // the querystring to check for $(document).ready(function(){ // perform onload of document if (location.search.indexOf(q)>=0) { // if querystring matches eg. valid page $(".jg_catelem_photo").trigger('click'); // trigger jquery click on link } }); //--> </script> however, it instead breaks all the loading into lightbox as would happen if a thumbnail is clicked. i need to trigger this click onload, as if the user did it - eg that the image loads within the lightbox as currently happens when you go to the url and click on the thumbnail.... how would i emulate a click, but pass the rel="lightbox[joomgallery];" attribute of the link? 0o any help - asap, would be appreciated... thanks in advance,Pierre "Greywacke" du Toit
  15. Hey Everyone! i have generated JSON from HTML form data, now i want to send that JSON to a PHP page. I have written this javascript. var jsondata;$.fn.serializeObject = function(){ var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name] !== undefined) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o;};$(function() { $('form').submit(function() { jsondata = $('#result').text(JSON.stringify($('form').serializeObject())); return false;});}) Please help me i am new to this..
  16. When we have 2 functions(one within another), in jquery. just like the code above: $("#test").click(function(){ $(function(){alert("hi"); $(this).append('<img id="rem_service" align="center" src="Images/rem_service.png">'); })return false; }); Is the second function(the inner)going to work as expected-or does it have to be called first, just like in PHP. I think not-in the above example though I only get the alert message-the append method does not work. Before examining other causes for this, I want to make sure first that an inner function(in jquery) works ok even if it is not called.
  17. Hey Everyone! i am writing a javascript for a button, when the button is pressed it gets the product id from url and add that product into the cart. The button is working fine but the problem is when i am pressing the button the screen hangs and a flash screen appears which is loading continously. I have also applied css in it for button.here is the javascript which i have written.. $('#detailsPage').live('pageshow', function(event) {var id = getUrlVars()["id"];var serviceURL = "http://localhost:8080/mano2/services/";$.getJSON(serviceURL + 'getmagento1.php?id='+id, displayPromotion);});var prodid ;function getUrlVars() { var vars = {}; var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; }); return vars;}function displayPromotion(data) { var promodetails = data.item;console.log(promodetails);$('#promopic').attr('src', 'media/catalog/product/' + promodetails.small_image);$('#code').text(promodetails.name + ' ' + promodetails.name);$('#details').text(promodetails.price);$('#address').html('<a id="bttn" href="http://localhost:8080/magento/index.php/checkout/cart/add?product=' + promodetails.entity_id + '&qty;=1" >add to cart</a>');$('#bttn').css({"width":"130px","height":"50px","padding":"0","display":"block","text-align":"center","text-decoration":"none","line-height":"48px","font-family": "'Tienne', sans-serif","font-size":"20px","font-weight":"bold","color":"black","margin":"10px auto","-moz-border-radius":"5px","-webkit-border-radius":"5px","border-radius":"5px","border-width":"2px","border-style":"solid","border-color":"#ccc #333 #777","background-color": "black7", /* Old browsers */"background-color":"-moz-linear-gradient(top, #878787 6%, #3d3d3d 49%, #000000 50%, #000000 100%)", /* FF3.6+ */"background-color": "-webkit-gradient(linear, left top, left bottom, color-stop(6%,#878787), color-stop(49%,#3d3d3d), color-stop(50%,#000000), color-stop(100%,#000000))", /* Chrome,Safari4+ */"background":" -webkit-linear-gradient(top, #878787 6%,#3d3d3d 49%,#000000 50%,#000000 100%)", /* Chrome10+,Safari5.1+ */"background": "-o-linear-gradient(top, #878787 6%,#3d3d3d 49%,#000000 50%,#000000 100%)", /* Opera11.10+ */"background":" -ms-linear-gradient(top, #878787 6%,#3d3d3d 49%,#000000 50%,#000000 100%)", /* IE10+ */"filter": "progid:DXImageTransform.Microsoft.gradient( startColorstr='#878787', endColorstr='#000000',GradientType=0 )", /* IE6-9 */"background": "linear-gradient(top, #878787 6%,#3d3d3d 49%,#000000 50%,#000000 100%)", /* W3C */},{"hover":{"background": "#878787", /* Old browsers */"background": "-moz-linear-gradient(top, #878787 6%, #3d3d3d 19%, #000000 21%, #000000 100%)",/* FF3.6+ */"background":" -webkit-gradient(linear, left top, left bottom, color-stop(6%,#878787), color-stop(19%,#3d3d3d), color-stop(21%,#000000), color-stop(100%,#000000))", /* Chrome,Safari4+ */"background": "-webkit-linear-gradient(top, #878787 6%,#3d3d3d 19%,#000000 21%,#000000 100%)", /* Chrome10+,Safari5.1+ */"background":" -o-linear-gradient(top, #878787 6%,#3d3d3d 19%,#000000 21%,#000000 100%)", /* Opera11.10+ */"background": "-ms-linear-gradient(top, #878787 6%,#3d3d3d 19%,#000000 21%,#000000 100%)", /* IE10+ */"filter": "progid:DXImageTransform.Microsoft.gradient( startColorstr='#878787', endColorstr='#000000',GradientType=0 )", /* IE6-9 */"background": "linear-gradient(top, #878787 6%,#3d3d3d 19%,#000000 21%,#000000 100%)" /* W3C */}});console.log(promodetails.name);$('#actionList').append('<li><h3>Dates</h3>' +'<p>This promotion starts from ' + promodetails.name + '</p><p> And will end at '+promodetails.price+'</p></li>');$('a#bttn').bind("click", function(event) {event.preventDefault();var url = $(this).attr("href"); alert("Now I want to call this page: " + url);$.ajax({ type: "GET", url:url, success: function() { alert("Product added to cart"); }});});$('#actionList').listview('refresh');}function getUrlVars() { var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); for(var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]] = hash[1]; } return vars;} Please help me i am new to this...
  18. Ok. Sorry that the title was a bit confusing, but this is what I need. I have the Konami code currently working on my website. Here is what I want to happen: If you get the code wrong: I want an alert that states you got it wrong. If you get it right, a youtube video opens in lightbox or fancybox. If this is not possible, how do I simply direct the user to another page on my site? This is my site currently: http://webdesign.miad.edu/stimm/ This is my javascript/jquery code: <script type="text/javascript" src="scripts/jquery.js"></script><script type="text/javascript" src="scripts/konami-JS.js"></script> <script type="text/javascript">konami = new Konami()konami.code = function() {alert("You have entered the KONAMI CODE! You now have 30 lives. Kinda.")} konami.load()</script> The Konami code works (up, up, down, down, left, right, left, right, b, a, enter). It just doesn't do what I want yet.
  19. In my website I have Fancyboxes that pop out with an HTML website embedded in them. Those work perfectly fine. What I want to do is in one of the boxes is to scroll over in the fancybox (like in an image gallery) to an additional amount of info. The html contact page will open in a fancybox with one business location and then the viewer will be able to click an arrow to the right to shift to the next set of location information (still in the SAME fancybox). Is this possible? What is the fancybox/javascript code to allow a manually scrolling gallery to be possible? This is my current javascript coding: <script type="text/javascript"> $(document).ready(function(){$(".contact").fancybox({'width' : '50%','height' : '50%','autoScale' : false,'transitionIn' : 'fade','transitionOut' : 'fade','overlayOpacity' : 0,'speedIn' : 2000,'speedOut' : 1000,'type' : 'iframe','cyclic' : true}); }); </script> .contact is the class that leads to contact.html page. Any help would be fantastic. Thanks!
  20. Sample code: <!DOCTYPE html><html><head><title></title><style>span {display:none;}</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("span").fadeIn(3000); });});</script></head><body><button>Fade in</button><span>This is some text.</span></body></html> It doesn't work in IE8 and probably older versions. Any solution?
  21. Hey everyone! i am trying to fetch data from different file locations, every time there is a new location like this /5/3/539238_375049019231475_1212083119_n.jpg/3/0/309320_396625203733616_1897402511_n.jpg/n/i/nike.jpg I want to get data from all these locations in a single query, how do i get it? Please help me..
  22. Hi all, I am using this product rotator and I am trying to make it work with various product on the same page. Is it possible to have multiple image rotators on a page? I'm doing a site that I would love to use this on, but when I add the second one, only the first one works, the rest doesn't.. Is there a way around it? I have tried adding different: id:'productImages, productImages-2, productImages-3',But still only the first one works. Can anyone please help with the re-writing of this script.Your help would be greatly appreciatedThank You -----------------------------------------------------------------------<script type="text/javascript"> $(document).ready(function(){ }); var tabber1 = new Yetii({ id: 'productImages', interval:3 }); </script>--------------------------------------------------------------------------Example can be seen and downloaded at http://www.dreamweavertutorial.co.uk/dreamweaver/video/product-image-rotator-zoomer-dreamweaver-part2.htm I have also tried using ----var $IR = jQuery.noConflict();------ but in vain
  23. Hey, I got some problems and i cant figure out whats wrong,i have a menu where you can filter the content displayed on the right.It works but it uses some weird animations and i can't figure out what's wrong.I use Quicksand for the filtering and the jQuery Easing Plugin for the animations. The link:http://bram-de-leeuw.nl/test/portfolio/index.html Thanks in advance!
  24. Hello there. I am implementing a JavaSript menu into my company's website, but seemed to have run into a snag. An existing script on the page is interfering with the new JavaScript menu. It is the JGlideMenu found here: http://www.sonicradish.com/labs/jGlideMenu/current/index.htmlI am using the inline example found on their page. I have the menu placed in a PHP side bar that acts as a persistent navigation that is conditionally fixed. The sidebar uses JQuery to switch from a static postion to a fixed position when reaching a certain scroll point. The JGlideMenu works great until I do any scrolling of the page. At that point the menu no longer functions. Instead the "rel" link (#tile_002), which is the next "slide" of the menu is placed at the end of the url. You can check out our website here to see what I'm talking about: mlkishigo.com/home-2012.html If I disable the conditionally fixed jquery it corrects the problem with JGlideMenu. But obviously I need them both to work. Any advice you have would be VERY MUCH appreciated. And please let me know if you need any other info to trouble shoot this. Thanks!
  25. sepoto


    I have this code that does some AJAX to go back into my database and extract an array of bars. I have developed the code to change one of my div's to display all the data for each bar. In addition to displaying the data I also need to modify the contents of #latestFromDSGbuffer to contain a twitter feed of 5 tweets each per bar that was queried. I have tried a number of samples but for some reason I am able to get the twitter samples working in a sandbox but when I try to integrate that code things don't seem to be working out. I don't know if maybe that is because I was trying to call $.ajax(); inside of the callback function from another $.ajax(). Maybe the design needs to be modified? Maybe I should use some DOM storage to store barLocations? I'm wondering what to do with it. All of the data is located in "barLocations". Although I have attempted to make "barLocations" "global" I am not able to access it from within button.onclick where it is showing as "undefined". $.ajax({ url: 'ajax.php', data: { lat: results[0].geometry.location.lat(), lng: results[0].geometry.location.lng(), radius: radius }, type: 'post', success: function(output) { barLocations = $.parseJSON(output); //alert(obj[0].lat); /* So now that we have the JSON encoded array it has to be displayed into one of the div's probably below the map someplace */ var newInnerHTML = ""; for(var i = 0; i < barLocations.length; i++) { newInnerHTML = newInnerHTML + "<strong>" + barLocations[i].company + "</strong></br>"; newInnerHTML = newInnerHTML + barLocations[i].first_name + " " + barLocations[i].last_name + "</br>"; newInnerHTML = newInnerHTML + barLocations[i].street_address1 + "</br>" + barLocations[i].street_address2 + "</br>" + barLocations[i].city + "</br>"; newInnerHTML = newInnerHTML + "Phone: " + barLocations[i].phone_number + "</br>"; newInnerHTML = newInnerHTML + "Email: " + barLocations[i].email + "</br>"; newInnerHTML = newInnerHTML + "Website: " + barLocations[i].website + "</br>"; newInnerHTML = newInnerHTML + "<a href=\"standardprofile.php\" target=\"_blank\">Profile page >>>></a>"; newInnerHTML = newInnerHTML + "</br></br>"; } for (i = 0; i < barLocations.length; i++) { var markerImage = 'image/baricon.png'; marker = new google.maps.Marker({ position: new google.maps.LatLng(barLocations[i].lat,barLocations[i].lng), map: map, icon: markerImage, title: barLocations[i].company }); } if(barLocations.length > 0) { document.getElementById('divBarLocations').innerHTML = newInnerHTML; } } }); Thanks in advance for any help comments or commentary. Your input is most welcome... The whole code looks more like this: (function() { var map, geocoder, marker, infowindow, barLocations; window.onload = function() { $('#hdivBarLocations').hide(); // Creating a reference to the mapDiv var mapDiv = document.getElementById('map'); // Creating a latLng for the center of the map var latlng = new google.maps.LatLng(37.09, -95.71); // Creating an object literal containing the properties // we want to pass to the map var options = { center: latlng, zoom: 4, mapTypeId: google.maps.MapTypeId.ROADMAP }; // Creating the map map = new google.maps.Map(mapDiv, options); // Getting a reference to the HTML form var button = document.getElementById('addressButton'); // Catching the forms submit event button.onclick = function() { button.disabled = true; // Getting the address from the text input var address = document.getElementById('addressBox').value; var radius = document.getElementById('radialDistance').value; // Making the Geocoder call getCoordinates(address, radius); // Preventing the form from doing a page submit //return false; $('#hdivBarLocations').show(); } } // Create a function the will return the coordinates for the address function getCoordinates(address, radius) { // Check to see if we already have a geocoded object. If not we create one if(!geocoder) { geocoder = new google.maps.Geocoder(); } // Creating a GeocoderRequest object var geocoderRequest = { address: address } // Making the Geocode request geocoder.geocode(geocoderRequest, function(results, status) { // Check if status is OK before proceeding if (status == google.maps.GeocoderStatus.OK) { //Go back in for some data. document.getElementById('divBarLocations').innerHTML = "No bars found in your area..."; $.ajax({ url: 'ajax.php', data: { lat: results[0].geometry.location.lat(), lng: results[0].geometry.location.lng(), radius: radius }, type: 'post', success: function(output) { barLocations = $.parseJSON(output); //alert(obj[0].lat); /* So now that we have the JSON encoded array it has to be displayed into one of the div's probably below the map someplace */ var newInnerHTML = ""; for(var i = 0; i < barLocations.length; i++) { newInnerHTML = newInnerHTML + "<strong>" + barLocations[i].company + "</strong></br>"; newInnerHTML = newInnerHTML + barLocations[i].first_name + " " + barLocations[i].last_name + "</br>"; newInnerHTML = newInnerHTML + barLocations[i].street_address1 + "</br>" + barLocations[i].street_address2 + "</br>" + barLocations[i].city + "</br>"; newInnerHTML = newInnerHTML + "Phone: " + barLocations[i].phone_number + "</br>"; newInnerHTML = newInnerHTML + "Email: " + barLocations[i].email + "</br>"; newInnerHTML = newInnerHTML + "Website: " + barLocations[i].website + "</br>"; newInnerHTML = newInnerHTML + "<a href=\"standardprofile.php\" target=\"_blank\">Profile page >>>></a>"; newInnerHTML = newInnerHTML + "</br></br>"; } for (i = 0; i < barLocations.length; i++) { var markerImage = 'image/baricon.png'; marker = new google.maps.Marker({ position: new google.maps.LatLng(barLocations[i].lat,barLocations[i].lng), map: map, icon: markerImage, title: barLocations[i].company }); } if(barLocations.length > 0) { document.getElementById('divBarLocations').innerHTML = newInnerHTML; } } }); circ = null; var circ = new google.maps.Circle({ map: map, radius: radius * 1609.344 }); circ.setCenter(results[0].geometry.location); // Center the map on the returned location map.setCenter(results[0].geometry.location); map.fitBounds(circ.getBounds()); google.maps.event.trigger(map,'dragend'); var markerImage = 'image/home.png'; // Check to see if we've already got a Marker object if (!marker) { // Creating a new marker and adding it to the map marker = new google.maps.Marker({ map: map, icon: markerImage }); } // Setting the position of the marker to the returned location marker.setPosition(results[0].geometry.location); // Check to see if we've already got an InfoWindow object if (!infowindow) { // Creating a new InfoWindow infowindow = new google.maps.InfoWindow(); } // Creating the content of the InfoWindow to the address // and the returned position var content = '<span style="color: black;">Your location.</span>'; // Adding the content to the InfoWindow infowindow.setContent(content); // Opening the InfoWindow infowindow.open(map, marker); } }); }})();
  • Create New...