Solved

Correct this jQuery code for opening div.

Posted on 2016-11-18
24
11 Views
Last Modified: 2016-11-18
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
Comment
Question by:MOSTAGHASSI
  • 13
  • 10
24 Comments
 
LVL 35

Expert Comment

by:YZlat
ID: 41892858
Can you post your html code?
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 41892974
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
 

Author Comment

by:MOSTAGHASSI
ID: 41893128
Hi leakim971;

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

Author Closing Comment

by:MOSTAGHASSI
ID: 41893131
Thanks a lot
0
 

Author Comment

by:MOSTAGHASSI
ID: 41893157
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
 
LVL 82

Expert Comment

by:leakim971
ID: 41893221
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
 

Author Comment

by:MOSTAGHASSI
ID: 41893262
I changed the codes as you said but,the problem still exist.
0
 

Author Comment

by:MOSTAGHASSI
ID: 41893268
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
 
LVL 82

Expert Comment

by:leakim971
ID: 41893269
Try "touchstart" instead "tap"
Was you able to close it before ?
0
 

Author Comment

by:MOSTAGHASSI
ID: 41893303
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
 
LVL 82

Expert Comment

by:leakim971
ID: 41893359
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
 

Author Comment

by:MOSTAGHASSI
ID: 41893387
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 82

Expert Comment

by:leakim971
ID: 41893435
please confirm you've included the jquery mobile plugin
0
 

Author Comment

by:MOSTAGHASSI
ID: 41893468
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
 
LVL 82

Expert Comment

by:leakim971
ID: 41893502
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
 

Author Comment

by:MOSTAGHASSI
ID: 41893518
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
 
LVL 82

Expert Comment

by:leakim971
ID: 41893522
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
 

Author Comment

by:MOSTAGHASSI
ID: 41893541
no,it doesn't work.
0
 

Author Comment

by:MOSTAGHASSI
ID: 41893546
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
 
LVL 82

Expert Comment

by:leakim971
ID: 41893564
I just tried this on my mobile and it work fine :
https://jsfiddle.net/c3vz4zjv/
0
 

Author Comment

by:MOSTAGHASSI
ID: 41893633
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
 
LVL 82

Expert Comment

by:leakim971
ID: 41893643
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
 

Author Comment

by:MOSTAGHASSI
ID: 41893666
Thanks
1
 
LVL 82

Expert Comment

by:leakim971
ID: 41893677
you welcome!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now