Responsive CSS /java script DIV - show on click only on mobile query - javascript

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.

Related

Disable scrolling when pop up open and menu not showing on mobile

thanks for looking into my issue
I am creating a website: http://testgod0312.000webhostapp.com/ , all the css are separate by blocks so that it is easier for you to potentially help me (in assets folder).
when you go to map and click on a button, a pop up shows up, but you can keep on scrolling. The button is only coded in css (no js), everything in the map.css file - any idea how to disable overflow without resorting to js? if using js, what would you do as there is no function capturing the opening / closing of the box?
I have a menu (click top right corner), works fine on laptop but on mobile, it shows only 50% of it. The code is in nav.css; with the responsive at the bottom. Any idea on how to display it all?
thanks in advance!!
fafa
#1 can't be solved without javascript as long as browsers are not supporting css:has(). So the only way is to apply a class or a style="overflow: none;" to the body as soon as a popup gets opened and remove it after it was closed. The very same happens already if the menu is opened/closed.
A very small code snippet would be enough:
window.addEventListener("hashchange",
() => document.body.classList.toggle("popup-open", location.hash.startsWith('#popup'))
);
and CSS
body.popup-open {
overflow: none;
}
About #2 inside the nav.css the values applied before the media query (#media all and (max-width: 767px) {) cause the issue.
The menu__right changes from flex to none on small screens. And menu__left still has the right 50% value applied for bigger screens, So adjusting this value inside the media query to 0% solves it.
.menu__left {
right: 0%;
width: 100%;
}

Wordpress text widget with onclick function

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" />

How to reposition things in a CCS media query

I have a navigation menu that is responsive using css media queries. When the nav is in desktop/laptop view the whole menu works fine. The nav tags are placed under an image in laptop desktop view which is how I want it but When it is in mobile view I need the nav tags and everything inside it to be placed about an img. I already have a css media query setup with some other styles in it but I think I need a javascript to do what I want.
Hope someone can help,
Thanks
Below are the media queries that I used for your question,
#mobileImg{
display:none;
}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
#desktopImg{
display:none;
}
#mobileImg{
display:block;
}
}
Here is the working demo
So to explain what I did, I have two images one with the id desktopImg and other as mobileImg. The desktopImg is above the nav tags and mobileImg is below the nav tags. Using the media queries, I'm setting the display of mobileImg as none for desktops/laptops. Similarly for mobile view, I made the mobileImg visible and the desktopImg invisible by making its display as none

Javascript/ Jquery slide menu not working in Chrome

I've been working on a website and when testing it out on a VM the slide menu didn't work. I've since managed to replicate the error in newer versions of Chrome The page is
http://paperfromabc2xyz.co.uk/
When you shrink the screen size small enough to loose the main menu you'll get a NAV Burger icon. Clicking this should slide a menu in. The Javascript file is 'App.JS'
The click does not get caught, somehow because the span does not have dimensions (the :before element does not expand it).
Add this to your styles:
span.Burger{ display: inline-block; }
for a start use a library as Jquery to simplify your code; then put your javascript code in an $(document).ready(function () {} then then add to your css : span.Burger{ display: inline-block; }

Using jQuery .hide() with CSS media queries for menu toggle based on screen resolution

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}
}

Categories