Add a little ajax to the top menu bar

8 posts from 3 voices

• Started 4 months ago by schmtzrbuck
• Latest reply from Devin
• This topic is not a support question

Tags:

No tags yet.

1. 

   schmtzrbuck
   Member

   I'm linking to a cell in a google doc file and would like to display that info in the center of the top menu (top 40px).

   I'd like this to be centered:
   "Prices based on Litecoin 5-day Moving Average: (that_value)"
   For (that_value) I've got this little ajax I need to add that should display cell K16 in that space.

   var sourceURL = "https://docs.google.com/spreadsheet/pub?key=0AuPBngUCEhapdGdfN3BRV1hJVVQwQ3JyS3prdGNPNkE&single=true&gid=0&range=K16&output=csv";
   var targetElement = "#5DayAvg"; <div id="5DayAvg">Calculating</div>

   $.get(sourceURL,
   function(data) {
   console.log("data is: "+data);
   $(targetElement).text(data);
   }

   Can I do this? If not, can I do it in the footer?
   I'd like it to be visible on all pages.

   Here is the site I'm using this for: https://litebit.co

   Cheers,
   Paul

   Posted 4 months ago #
2. 

   Dude
   Dude

   You could use jQuery to output the result. Eg wrap your menu item link text (Appearance > Menu) into a div with an unique class or id and use jQuery to "change" the html content of the div after the ajax request returned a (valid) value. You can add the ajax code itself to js/avia.js - i.e. call it after the document.ready function.

   Posted 4 months ago #
3. 

   schmtzrbuck
   Member

   Ok, sounds good. A lot of this is new to me.
   I found my avia.js and the document.ready function

   jQuery(document).ready(function(){

   //So can I add this whole thing?

   var sourceURL = "https://docs.google.com/spreadsheet/pub?key=0AuPBngUCEhapdGdfN3BRV1hJVVQwQ3JyS3prdGNPNkE&single=true&gid=0&range=K16&output=csv";
   var targetElement = "#5DayAvg"; <div id="5DayAvg">Calculating</div>
   $.get(sourceURL,
   function(data) {
   console.log("data is: "+data);
   $(targetElement).text(data);
   }

   ----------------------

   Is that all I need to do or do I need to create a "custom link" in Appearance/Menus on my sub menu? Like I said, I'm still learning some of the coding terms and what they do.

   All the rest of my options in appearance/menus is just for a Link, Quote or Gallery. I can't figure out where I can add special text "Prices based on Litecoin 5-day Moving Average: (that_value)" that will display the (valid) value the code sends me from the avia.js file. Does that need to go in my avia.js file as well?

   Thanks for helping!

   Posted 4 months ago #
4. 

   schmtzrbuck
   Member

   I think I can add this:

   <div id="5DayAvgPanel"><div class="info">Prices based on Litecoin 5-day Moving Average:</div><div id="5DayAvg"></div></div>

   to the template... only... where would that go? I don't see how it can be in appearances/menu. does it go in custom.css or functions.php or what?

   Cheers,
   Paul

   Posted 4 months ago #
5. 

   Devin
   Moderator

   Hi Paul,

   You can add it to the banner function in the functions.php file. Look for:
   function avia_shop_banner()

   This function creates the banner and adds in the menu/cart. So if you wanted that div after the menu you could add it in just after the sub menu is put into the output (also adding it into the $output).

   Regards,

   Devin

   Posted 4 months ago #
6. 

   schmtzrbuck
   Member

   Ok. Finally got it to post. But the look of the top menu/cart banner is really messed up now. https://litebit.co

   I'd like this message and the number to fit in the 40px height of the Propulsion theme. The blue bar is distracting and the number is below it and off to the left.

   Any advice?

   Posted 4 months ago #
7. 

   schmtzrbuck
   Member

   I added

   #5DayAvgPanel .info, #5DayAvgPanel #5DayAvg {
   display: inline-block;
   }

   to the Custom CSS but to no avail. Any other thoughts?

   Posted 4 months ago #
8. 

   Devin
   Moderator

   It looks like you added it in after the actual menu is added. If you want this bar to replace the current top bar, you can replace the content created in the function. Otherwise, you will need to add the new div into the actual output.

   The style is based on giving it the info class which then gets styled based on the themes info class. You just need to modify the css for those classes to get the layout you are trying to achieve.

   If you aren't comfortable with the css/html and php, I'd recommend looking into a freelance developer. All in all I would guess it'll take a bit less than hour to get the new div integrated and aligned how you want it.

   Regards,

   Devin

   Posted 4 months ago #

RSS feed for this topic

Reply

You must log in to post.