asked on

Correct this jQuery code for opening div.

Hello;

I have 2 icons( hamberger icon and search icon) that appear on my pages when the site is seen by tablet or mobile and when click on each icon it open one div as below:

//this part is for open mobile menu on tablet and mobile
jQuery(function($) {
"use strict";
    $(".mobile-menu-icon a").click(function(evt) {
         evt.preventDefault();
         $(".wrapper-mobile-menu").toggle("slow");
    });
});



//this part is for open google searchbox on tablet and mobile
jQuery(function($) {
"use strict";
    $(".mobile-search-icon a").click(function(evt) {
         evt.preventDefault();
         $(".google_search_mobile").toggle("slow");
    });
});

Open in new window

Now i want that correct this codes ,so when user click on one icon, first check that if another div has been open first close it and then open its div and vise versa .

Thanks

YZlat

Can you post your html code?

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

MOSTAGHASSI

ASKER

Hi leakim971;

Thanks,it works very well as usual.
Appreciate for your help.

MOSTAGHASSI

ASKER

Thanks a lot

MOSTAGHASSI

ASKER

But leakim971,there is a small problem on mobile,on desktop i checked it is good but on mobile the div of 'google_search_mobile' is open and dose not close with tap on its icon,where is the problem?

leakim971

you need to handle "tap" event instead "click" :

$(".mobile-menu-icon a").on("click tap",function(evt) {

$(".mobile-search-icon a").on("click tap", function(evt) {

MOSTAGHASSI

ASKER

I changed the codes as you said but,the problem still exist.

MOSTAGHASSI

ASKER

the html codes for icons:

 <div class="mobile-menu-icon">
      <a href="#"><img src="images/mobile_menu_icon.gif"  /></a>
     </div>

     <div class="mobile-search-icon">
     <a href="#"><img src="images/search-icon-responsive.gif"  /></a>
     </div>

Open in new window

leakim971

Try "touchstart" instead "tap"
Was you able to close it before ?

MOSTAGHASSI

ASKER

No,the problem is this that when i load the page the div of 'google_search_mobile' is opend(while it must be closed) and on desktop it close with click on its icon ,but on mobile it doesn't accept tap.

leakim971

this css to close it by default :

.google_search_mobile {
     width:0px;
}

Open in new window

now let me know if you get the alert on your mobile else share a link to see your page :

jQuery(function($) {
"use strict";
    //this part is for open mobile menu on tablet and mobile
    $(".mobile-menu-icon a").on("click touchstart", function(evt) {
         alert("menu!");
         evt.preventDefault();
         if($(".google_search_mobile").is(":visible")) {
              $(".google_search_mobile").toggle("fast", function() {
                    $(".wrapper-mobile-menu").toggle("slow");
              });
         }
         else
             $(".wrapper-mobile-menu").toggle("slow");
    });
    //this part is for open google searchbox on tablet and mobile
    $(".mobile-search-icon a").on("click touchstart", function(evt) {
         alert("search!");
         evt.preventDefault();
         if( $(".wrapper-mobile-menu").is(":visible")) {
               $(".wrapper-mobile-menu").toggle("fast", function() {
                   $(".google_search_mobile").toggle("slow");
              });
         }
         else
             $(".google_search_mobile").toggle("slow");
    });
});

Open in new window

MOSTAGHASSI

ASKER

No,on mobile i don't get alert but on desktop yes.

Would you please send me your email that i send my server link?

leakim971

please confirm you've included the jquery mobile plugin

MOSTAGHASSI

ASKER

No, i haven't the plugin, i have these attached:

<script src="jquery/jquery-3.1.1.min.js"></script>
<script src="jquery/mobile-menu.js"></script>

Open in new window

leakim971

ok, use this plugin : https://github.com/benmajor/jQuery-Touch-Events

<script src="jquery/jquery-3.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/1.0.5/jquery.mobile-events.min.js"></script>
<script src="jquery/mobile-menu.js"></script>

Open in new window

MOSTAGHASSI

ASKER

I added the second line to the page:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/1.0.5/jquery.mobile-events.min.js"></script>

Open in new window

But still on mobile i have no alert.

My email:
mmostaghasi@gmail.com

leakim971

ths plugin use tap :

jQuery(function($) {
"use strict";
    //this part is for open mobile menu on tablet and mobile
    $(".mobile-menu-icon a").on("click tap", function(evt) {
         alert("menu!");
         evt.preventDefault();
         if($(".google_search_mobile").is(":visible")) {
              $(".google_search_mobile").toggle("fast", function() {
                    $(".wrapper-mobile-menu").toggle("slow");
              });
         }
         else
             $(".wrapper-mobile-menu").toggle("slow");
    });
    //this part is for open google searchbox on tablet and mobile
    $(".mobile-search-icon a").on("click tap", function(evt) {
         alert("search!");
         evt.preventDefault();
         if( $(".wrapper-mobile-menu").is(":visible")) {
               $(".wrapper-mobile-menu").toggle("fast", function() {
                   $(".google_search_mobile").toggle("slow");
              });
         }
         else
             $(".google_search_mobile").toggle("slow");
    });
});

Open in new window

MOSTAGHASSI

ASKER

no,it doesn't work.

MOSTAGHASSI

ASKER

inside the div of 'google_search_mobile' is a form like this:

    <div class="google_search_mobile">
<form action="http://www.google.com/search" id="searchbox" method="get" target="_blank">
<input id="query" type="text" size="30" placeholder="search" name="q" class="field"/>
<input type="submit" value="search" class="btn">
<input type="hidden" value="test.com" name="sitesearch"/>
<input type="hidden" value="test.com/" name="domains"/>
<input type="hidden" value="fa" name="hl"/>
<input type="hidden" value="UTF-8" name="oe"/>
<input type="hidden" value="UTF-8" name="ie"/>
</form>
</div>

Open in new window

leakim971

I just tried this on my mobile and it work fine :
https://jsfiddle.net/c3vz4zjv/

MOSTAGHASSI

ASKER

I found it The problem was from history in google chrome,i cleared all history and now it is ok,i really sorry and apologize for this,and appreciate for your time and your help.

But the div of '.google_search_mobile' is open by default when the page load and putting its width to 0px cause that nothing to show,is there any way that remove it when the page load.

leakim971

ahaha no worry, that's funny mate :D

a more agressive CSS for the search box :

.google_search_mobile {
     display:none;
}

Open in new window

or more more more (yeah it deserve it!) agressive

.google_search_mobile {
     display:none !important;
}

Open in new window

MOSTAGHASSI

ASKER

Thanks

leakim971

you welcome!