Need help for Javascript ?

[Blawdi]

Hello,

 

I need to install Navigation bar on m'y presta 1.6.0.8

 

This code :

 

How to setup

Firstly, extract all the files and then upload to your server. Next, include the foobar javascript file together with jquery in your head tag. Also include a link to the foobar CSS stylesheet.

Foobar will work with any version of jQuery from 1.4.4 upwards, so if you already have a version included in your page do not include another just for the foobar.

<link type="text/css" href="css/jquery.foobar.2.1.css" rel="Stylesheet" />
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.foobar.2.1.min.js"></script>

Now initialize the bar when the page has loaded, by placing some code in the head tag of your page. The simplest way to initialize the foobar can been seen in the following code:

<script type="text/javascript">
$(function(){
$foobar('Hello World!');
});
</script>

And i have error :

 

"ReferenceError: $foobar is not defined"

 

On simple Html file it work. You have idea ?

[mut3nr01]

Hi,

 

Probably the javascript files are not included in your html. Have you checked it?

 

If you want to include javascript files in all the pages, you can override FrontController and use Tools::addJS function to add your custom javascript files.

 

I hope that helps you.

[Blawdi]

I'm not sure I understand.

 

In my theme on header.tpl i have added :

<link type="text/css" href="http://www.eliquide-import.eu/foobar/jquery.foobar.2.1.css" rel="Stylesheet" />
  <style type="text/css">
    #social_target { margin-left:20px; }
    ul.socialbuttons { height: 32px; padding: 0 !important; margin:0 !important; }
    ul.socialbuttons li { padding:6px !important; float: left; list-style: none !important; }  
	.buttons_loading { display:block; width:117px; height:32px; background:url(throbber.gif) no-repeat center center; }
	ul.socialbuttons { height: 32px; padding: 0 !important; margin:0 !important; }
	ul.socialbuttons li { padding:6px !important; float: left; list-style: none !important; }
  </style>
  <script type="text/javascript" src="http://www.eliquide-import.eu/foobar/scripts/jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src="http://www.eliquide-import.eu/foobar/jquery.foobar.2.1.min.js"></script>

In footer i have added : 

 

<script type="text/javascript">
  $(function(){
    $foobar({
  "height" : {
    "bar" : 32
  },      
  "position": {
    "bar": "bottom"
  },
  
  
  "width": {
    "left": "360px", "center": "100%",
    "right": "360px", "button": "0px"
  },


  "display" : {
    "button": { "type": "toggle" },
    "backgroundColor" : "#9dcc40",


    "theme": {
      "bar": "x-white"
    }
  },
  
  "leftHtml" : "<div class='buttons_loading' id='social_target'></div>",


"rightHtml" : "<img src='Femmeet18.jpg' style='float:right;' 'alt='Pictograme cigarette electronique'>",
  
  "messages": [
    "Bienvenue sur Eliquide-import", 
"Découvrez nos promotions sur <a href='http://www.eliquide-import.eu/content/17-promotion-special'>Notre page Promotion</a>",
"N'hésitez pas à nous rejoindre sur les réseaux sociaux!",
"Bonne vape!"


  ]
});


initDemo4Buttons();


function initDemo4Buttons() {
  var url = window.location;


  //replace this with your facebook app ID
  var facebook_app_id = '666692936713982';
  
  var $target = $("#social_target");
  
  if ($target.hasClass("buttons_loading")) {
    var $ul = $('<ul class="socialbuttons"></ul>');
    
    $target.append($ul);
    
    //add facebook HTML
    var $facebook_li = $('<li/>').hide()
      .append('<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Feliquideimport.eu%3Fref%3Dbookmarks&width&layout=button_count&action=like&show_faces=false&share=false&height=21&appId=666692936713982" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:105px; height:21px;" allowTransparency="true"></iframe>')
      .appendTo($ul);
    
    var tweet = 'Découvrez de nombreux E-liquides US sur ';
    var twitter = 'EliquideImport';


    
    //add google+1 HTML
    var $google_li = $('<li/>')
      .hide()
      .append('<g:plusone size="medium" href="'+url+'" count="true"></g:plusone>')
      .appendTo($ul);


 //add tweet HTML
    var $twitter_li = $('<li/>')
      .hide()
      .append('<a href="http://twitter.com/share" class="twitter-share-button" data-url="'+url+'" data-text="'+tweet+'" data-count="horizontal" data-via="'+twitter+'">Tweet</a>')
      .appendTo($ul);
  
   
    var $stumble_li = $('<li/>')
      .hide()
      .append('<div id="socialprogress-su"></div>')
      .appendTo($ul);
    
    var $linked_li = $('<li/>')
      .hide()
      .append('<scr'+'ipt type="in/share" data-url="'+url+'" data-counter="right"></scr'+'ipt>')
      .appendTo($ul);


    //load twitter script
    $.getScript('http://platform.twitter.com/widgets.js', function() {
      
      // Load Google Plus script
      $.getScript('https://apis.google.com/js/plusone.js', function() {
        
        // Load StumbleUpon script
        $.getScript('http://www.stumbleupon.com/hostedbadge.php?s=2&r='+url+'&a=1&d=socialprogress-su', function() {
          
          // Load LinkedIn script
          $.getScript('http://platform.linkedin.com/in.js', function() {
            
            $target.removeClass("buttons_loading");
            $facebook_li.show();
            //$linked_li.show();
            //$stumble_li.show();
            $google_li.show();
            $twitter_li.show(); //show it
          });
        });
      });          
    });
  }
}      
  });
</script>

I also try a different location in the header.tpl*

 

Thank you for u help!

[mut3nr01]

Can I see your website running?

[Blawdi]

yes www.eliquide-import.eu  script is disable for moment

[mut3nr01]

I don't know if that may help but one of your js files is: 

http://www.eliquide-import.eu/foobar/scripts/jquery-1.7.1.min.js 

and it loads ok, but the other one is 

http://www.eliquide-import.eu/foobar/jquery.foobar.2.1.min.js

 and it doesn't load, maybe the correct url is 

http://www.eliquide-import.eu/foobar/scripts/jquery.foobar.2.1.min.js

Just a suggestion

Edited September 21, 2014 by mut3nr01 (see edit history)

[Blawdi]

   Thank you!