• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 46
  • Last Modified:

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
0
MOSTAGHASSI
Asked:
MOSTAGHASSI
  • 13
  • 10
1 Solution
 
YZlatCommented:
Can you post your html code?
0
 
leakim971PluritechnicianCommented:
Try this :
jQuery(function($) {
"use strict";
    //this part is for open mobile menu on tablet and mobile
    $(".mobile-menu-icon a").click(function(evt) {
         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").click(function(evt) {
         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

0
 
MOSTAGHASSIAuthor Commented:
Hi leakim971;

Thanks,it works very well as usual.
Appreciate for your help.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
MOSTAGHASSIAuthor Commented:
Thanks a lot
0
 
MOSTAGHASSIAuthor Commented:
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?
0
 
leakim971PluritechnicianCommented:
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) {
0
 
MOSTAGHASSIAuthor Commented:
I changed the codes as you said but,the problem still exist.
0
 
MOSTAGHASSIAuthor Commented:
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

0
 
leakim971PluritechnicianCommented:
Try "touchstart" instead "tap"
Was you able to close it before ?
0
 
MOSTAGHASSIAuthor Commented:
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.
0
 
leakim971PluritechnicianCommented:
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

0
 
MOSTAGHASSIAuthor Commented:
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?
0
 
leakim971PluritechnicianCommented:
please confirm you've included the jquery mobile plugin
0
 
MOSTAGHASSIAuthor Commented:
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

0
 
leakim971PluritechnicianCommented:
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

0
 
MOSTAGHASSIAuthor Commented:
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
0
 
leakim971PluritechnicianCommented:
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

0
 
MOSTAGHASSIAuthor Commented:
no,it doesn't work.
0
 
MOSTAGHASSIAuthor Commented:
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

0
 
leakim971PluritechnicianCommented:
I just tried this on my mobile and it work fine :
https://jsfiddle.net/c3vz4zjv/
0
 
MOSTAGHASSIAuthor Commented:
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.
0
 
leakim971PluritechnicianCommented:
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

0
 
MOSTAGHASSIAuthor Commented:
Thanks
1
 
leakim971PluritechnicianCommented:
you welcome!
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 13
  • 10
Tackle projects and never again get stuck behind a technical roadblock.
Join Now