I have the following Demo: http://jsfiddle.net/NCj2u/
Currently it works on all platforms, but I'd prefer if the show button & hidden content only worked in Tablet & Mobile. Desktop would show the content automatically and hide the button.
Can someone explain how I do this? Would I use media queries or do this in my Javascript?
My jQuery:
$(document).ready(function() {
$('.nav-toggle').click(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
//change the button label to be 'Show'
toggle_switch.html('Show');
}else{
//change the button label to be 'Hide'
toggle_switch.html('Hide');
}
});
});
});
Thank you.
Hmmm there are few options you could try . I personally recommend against browser detection unless you want to specifically target only a browser that allows your implementation. For your requirement why not try media queries?
.nav-toggle{
display : none; // display none for everyone
}
/* Landscape phone to portrait tablet show the button */
#media (max-width: 767px) {
.nav-toggle{
display : block; // or inline-block or inline : which ever is appropriate for you.
}
}
With these scripts you can detect any mobile browser
http://detectmobilebrowsers.com/
I think the shortest solution is to ask for mobil browsers and if the user isn't using one execute the click() function of your button
Related
I am trying to implement a precise way of figuring out the user's browser width based on a media query. For example, I have an element div called #check_screen initially it'll be displayed as a block element. If the browser width is < 420px, then #check_screen will have a display: none property. This is what I have tried so far:
HTML
<div id='check_screen'></div>
CSS
#check_screen{
display: block;
}
#media only screen and (max-width: 420px){
#check_screen{
display: none;
}
}
jQuery
$(document).ready(function() {
// run test on initial page load
checkSize();
// run test on resize of the window
$(window).resize(checkSize);
});
//Function to the css rule
function checkSize(){
if ($("#check_screen").css("display") == "none" ){
console.log("hello");
}
}
For some reason, it is not working correctly. When I resize the screen to < 420px, the message is not displayed to the console. I have also tried using the :visible jQuery selector, but that does not work either. I am using Chrome as my browser.
I think you have a syntax error:
$(window).resize(checkSize); should be
$(window).resize(function(){
checkSize();
});
That correction worked for me with no other changes.
Assign unvisible div and set its color to black.
If resized, change its color to green.
Javascript would be like
var check = $("element").css("background-color");
if(check == "black" {
}
else if...
Bootstrap 3 multi level dropdown menu not working on mobile devices. I checked many solution in StackOverflow. That solution for Desktop not for mobile. Below is the best solutions for multi lebel dropdown menu.
Bootstrap 3 dropdown sub menu missing
https://github.com/djokodonev/bootstrap-multilevel-dropdown
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
// Avoid following the href location when clicking
event.preventDefault();
// Avoid having the menu to close when clicking
event.stopPropagation();
// If a menu is already open we close it
$('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
// opening the one you clicked on
$(this).parent().addClass('open');
});
Above code is working well for desktop.
Live example: http://rahulmoral.com/portfolio/essanet/
Please view on mobile devices. Second level dropdown-menu will not work on mobile devices.
It's actually working just fine. You need to scroll in order to see the expanded menu. However, to get it to work as you'd like, simply overwrite the max-height:
.navbar-collapse {
max-height: none;
}
i got it to working by adding this to my css
#media screen and (max-width: 767px){
.navbar-fixed-top .navbar-collapse{
max-height:100%;
} }
but instead of 100% you can also use none. i am using a fixed nav which is why i have navbar fixed top. u can change it to static or w.e. you are using.
I have a text widget, in it i just place there an iframe.
A few days ago i wanted to override this widget on mobile browsers and add a background of an image on mobile browsers, luckily i used How to hide widget on mobile , i changed the code from that link instead of hiding the widget on mobile i simply give it a background image.
Now my questions is how can i add an onclick function to this widget, for example when this widget is clicked on a mobile browser i call a shortcode.
Any code examples of how to add some javascript to a text widget so that when it is clicked i call a shortcode.
My solution is not related to javascript. But maybe this can help.
Check out the conditional tag wp_is_mobile
https://codex.wordpress.org/Function_Reference/wp_is_mobile
if ( wp_is_mobile() ) {
echo do_shortcode('[YOUR-CUSTOM-MOBILE-SHORTCODE]');
} else {
echo do_shortcode('[YOUR-CUSTOM-DESKTOP-SHORTCODE]');
}
You should be able to display whatever you want on mobile and then something different on desktop.
Finally all i had to do is specify the mobile custom css code, i give it a name then make it only visible to mobile (800width and above are not mobile, probably tablet, pc e.t.c)
#media only screen
and (max-width : 800px) {
.media{ display: none; }
}
#media only screen
and (min-width : 800px) {
.vid{
display: none;
}
}
Then from my widget i add the image background pointing to a custom function i put in the header.php
<img class="vid" onclick="myFunction();" src="http://www.domain.com/wp-content/uploads/2016/03/button.png" />
I have a website using css media queries to detect browser resolution and modify my site accordingly.
I have run into a slight problem with my main navigation menu. There are a number of pages on my site where I would like to have my main navigation hidden on load for mobile resolutions, but displayed on desktop resolutions.
This seems like a simple enough task to accomplish with css, but unfortunately for me, it is not. I am unable to use both display:none; and visibility:hidden; because when my menu detects on load that it is hidden, it sets it's height to 0, and will not change.
Here is a stack overflow page reference:
Setting a div to display:none; using javascript or jQuery
Ultimately, I the only option I found that would hide my menu on load, while still allowing the menu to correctly calculate it's height was the following bit of jQuery.
$(document).ready(function () {
$(".hide-menu").hide();
var $drillDown = $("#drilldown");
});
Now, this solution is working for pages that I would like to have the menu initially hidden on load for all screen resolutions. However, I have a number of pages on which I would like to have the menu hidden initially hidden on load for mobile, but displayed on desktop.
I have attempted to recreate this scenario in a jsfiddle: http://jsfiddle.net/WRHnL/15/
As you can see in the fiddle, the menu system has big issue with not being displayed on page load. Does anyone have any suggestions on how I might accomplish this task?
You can do it by comparing the screen-size:
$(document).ready(function () {
var width = $(window).width();
if (width < 768) {
$(".hide-menu").hide();
}
var $drillDown = $("#drilldown");
});
You can use !important to force to origional state via media queries.
This will over-ride the "display:none" from your js.
Example:
#media (max-width:980px){
nav > .btn-group{display:none}
}
Your Js then toggles style="display:block" or style="display:none"
you maximize the window and the below resets your origional style.
#media (min-width: 992px) {
nav > .btn-group{margin:0px auto; display:inline-block !important}
}
I have looked all over online trying to solve this problem. I am in the process of making a desktop website responsive for mobile and have run into issues with the Navigation menu. I have set it to display:none for the mobile version but I want to make it so it can be seen by clicking on either an image or text. The solution that I have found elsewhere have all only worked with a div menu that only has UL and LI elements in it. Mine has H2 tags for each "section", etc. I just would rather have a button click and bam the whole DIV shows up just on a mobile query without messing with any of my HTML code, etc.
I have found this jquery code that seems close, however it seems to hide the nav div on desktop. I need it to work with display:none only set in the media query via CSS.
$("#preview").toggle(function() {
$("#navi").hide();
}, function() {
$("#navi").show();
});
});
It gets called by just clicking on the text such as "Click here for menu"...Would also prefer that to be a button or a link.
Try $.toggleClass() instead of using $.hide(). This way the media query css will have more control. The following is an example that a button that hides a div only in screen smaller than 700px.
JS:
$("#preview").toggleClass('hideInMobile');
Css:
#media (max-width: 700px){
.hideInMobile
{
display:none
}
}
demo:http://jsfiddle.net/HZDCW/2/
Hope it helps.