Elxis CMS Forum

Extensions => Modules => Topic started by: openita on February 06, 2014, 19:39:57

Title: Search menu
Post by: openita on February 06, 2014, 19:39:57

Good Evening!
The picture 01 refers to the base site.
When I click on the magnifying glass appears to me the search menu (see picture 02) mind if I go to click on the money bag appears to me that the currency under search menu (see picture 03).
But I wish it did not appear below, but just in place of the search menu or better to alternate based on the fact that I go to select one or the other.
How can I do?
thank you very much

http://i.imgur.com/jpmYumZ.jpg

Title: Re: Search menu
Post by: datahell on February 06, 2014, 20:49:24

That's just javascript...

Sample HTML code - The button links
<a href="javascript:void(null);" onclick="showMyBox(1);"><img src="search.png" alt="search" /></a>
<a href="javascript:void(null);" onclick="showMyBox(2);"><img src="money.png" alt="money" /></a>
<a href="javascript:void(null);" onclick="showMyBox(3);"><img src="login.png" alt="login" /></a>

Sample HTML code - Box containers
<div class="myboxinv" id="mybox1">Search module here</div>
<div class="myboxinv" id="mybox2">Currency exchange module here</div>
<div class="myboxinv" id="mybox3">User login module here</div>

CSS declarations
.myboxinv { display:none; }
.myboxvis {}

And finally, the Javascript
function showMyBox(box) {
    for (var i = 1; i < 21; i++) {
         var boxelem = 'mybox'+box;
         if (!document.getElementById(boxelem)) { continue; }
         if (i == box) {
             document.getElementById(boxelem).className = 'myboxvis';
         } else {
             document.getElementById(boxelem).className = 'myboxinv';
         }
    }
}

I made the above code to support up to 20 such boxes.

If you use jQuery you can add a slide effect (or fade) like that.
function showMyBox(box) {
    for (var i = 1; i < 21; i++) {
         var boxelem = 'mybox'+box;
         if (!document.getElementById(boxelem)) { continue; }
         if (i == box) {
              $('#'+boxelem).slideDown();
         } else {
              $('#'+boxelem).slideUp();
         }
    }
}

Title: Re: Search menu
Post by: openita on February 07, 2014, 11:03:31

Since I am not very experienced not been able to integrate my code with the jquery function that sent me. I am sending my code could you please explain me how to do?
Thank you!

My Code:

<script>
$ eDoc = eFactory :: GetDocument ();
$ eDoc-> addLibrary ('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', '1 .10.2 ');
</script>
<script>
$(document).ready(function(){
  $("#mat_ricerca").click(function(){
    $("#fmmodsearch").toggle();
  });
});
</script>

<script>
$ eDoc = eFactory :: GetDocument ();
$ eDoc-> addLibrary ('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', '1 .10.2 ');
</script>
<script>
$(document).ready(function(){
  $("#mat_valuta").click(function(){
    $ (".selectbox").toggle();
  });
});
</script>

<div>
<img alt="" id="mat_ricerca" src="http://www.opensardinia.com/media/images/01search.png" style="width: 18px; height: 18px; " />
<img alt="" id="mat_valuta" src="http://www.opensardinia.com/media/images/02currency.png" style="width: 18px; height: 18px; " />
</div>