I'm using .toggle() on a button element:
$("header button").click(function(event){
$(".site-nav-wrapper").toggle();
event.preventDefault();
});
This works great. The problem is if the button is toggled to display:none and then I change the device orientation, triggering my desktop media query, despite the fact I re-force display:block; on the desktop media query, the button remains toggled to display:none:
(Sass):
.site-nav-wrapper{
//Mobile First
display:none;
#include breakpoint($breakpoint-lg) {
display:block;
}
}
Is there a way to reset whatever the toggle() function is storing?
toggle uses inline styling, which overrides whatever you're doing in your stylesheet.
To get the desired result, you should use a special hidden class to hide the element, and use toggleClass instead.
SASS:
.site-nav-wrapper.hidden {
display: none;
#include breakpoint($breakpoint-lg) {
display: block;
}
}
JS:
$("header button").click(function(event){
$(".site-nav-wrapper").toggleClass('hidden');
event.preventDefault();
});
If I remember correctly toggle sets the display property to none on the element's style attribute. If you want to force the button to display in the "desktop" orientation then you'll need to include an !important declaration in your desktop breakpoint.
Alternately, you can listen for onorientationchanged and switch to the desktop version of the site then (un-toggling / activating everything that needs to be activated).
Why not avoid the toggle so there's no issues with the media queries.
$("header button").click(function(event){
$(".site-nav-wrapper:visible").hide();
$(".site-nav-wrapper:hidden").show();
event.preventDefault();
});
Related
I am using a script to change the color of navigation links on scroll, but I am not getting how to do it for active link, can someone help?
<script>
jQuery(document).ready(function(){
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 100) {
jQuery(".current-menu-item").addClass("current-menu-item-sticky");
}
else{
jQuery(".current-menu-item").removeClass("current-menu-item-sticky");
}
});
});
</script>
This class code is responsible for color, how can I update color on scroll?
.et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item a {
color: #fff!important;
}
As you did not provide the markup, u could still solve this by making the css selectors broader, the class current-menu-item-sticky that is added on scroll doesn´t even exist in your css.
so to start off just use this css
.current-menu-item-sticky {
color:#fff!important;
}
If that doesn´t change anything, the reason is clear to me, all other color css should not have !important or have the right order so the correct !important will be applied.
You can easily use the element-inspector of your browser and see what css is applied and what css is overriden
I am sitting with an issue where CSS styles don't get removed from an anchor tag when the css class is removed via AJAX, it only happens on a mobile device. This doesn't happen when using a desktop browser.
Have a look here using a mobile device.
You will note that the filters turn red when you select them, but deselecting them doesn't remove the red.
The code that is used there:
$('.tagsContainer .tagsContainerA').click(function () {
vm.alphabet("");
clearAlphabet();
$('.pagination.alphabet .alphabetAll').addClass('currentPage');
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else {
$(this).addClass('selected');
}
return false;
});
Any ideas what could be causing this on a mobile device?
The problem has to do with the hover, not the click function.
This happens because the hover is triggered in mobile while the element is focused also.
Just add this to your css:
#media screen and (max-width: 768px) {
.places-filter .places-tags li:hover {
background-color: #d1d1d1;
background: #d1d1d1;
}
}
This way you will 'disable' the hover function and only have the click one in mobile.
Another solution is placing the hover effect only in screens bigger than X amount.
I have a problem with jquery script if page size was changed. For example - if you open site on the phone, then open and close menu, then rotate phone from vertical to horizontal and open menu again - the block will not shown.
I use this script
return $(document).ready(function() {
(function($) {
if ($(window).width() < 960) {
$('#header-menu').css('display', 'none');
$('header.grid-container').css('display', 'none');
return $('#toggle-mobile-menu').click(function() {
$('#header-menu').toggle();
return $('header.grid-container').toggle();
});
}
})(jQuery);
});
I need some hook maybe, to reload script if screen was changed, without reload page. I tried to use $(window).resize() but it didn't work
It is impossible Jquery gets put into the DOM and would require a page refresh in order for the script to change.
You should consider using AJAX instead.
The problem is that your script is triggered only once after loading all DOM elements (Your are checking the screen width and if condition is done you are triggering the event). I suggest move styling to CSS (media queries) and use jquery only for binding events
CSS
#media (max-width: 960px) {
#header-menu,
.grid-container { display: none; }
#toggle-mobile-menu { display: block; } // or whatever
}
JS
$(function(){
$('#toggle-mobile-menu').on('click', function() {
$('#header-menu').toggle();
$('header.grid-container').toggle();
}
});
I have the following CSS to keep one of my page elements hidden initially:
#media only screen {
#page-element-1 {
display: none;
}
}
and the following JS to fadeIn the element when another element is clicked.:
$('page-element-2').click(function(){
$('#page-element-1').fadeIn();
}
However I want to fade in the element only on tablets and desktops.
How can I do this?
I did try wrapping the js in something like: if (screen.width >= 769){}. But even with this, when I resize the browser, I do see the #page-element-1 as
element.style {
display:block
}
overrides:
#page-element-1 {
display: none;
}
Expanding on my comment above, rather than trying to apply the effect through JavaScript, instead use CSS transitions to do so, targeting the resolutions you want with media queries and then just use JS to initiate the effect by toggling a class.
Here's a pure JS proof of concept, click on the green div to reveal the red div above:
document.getElementById("shown").addEventListener("click",function(){
document.getElementById("hidden").classList.toggle("shown");
},0);
#hidden{
background:red;
height:0;
}
#media all and (min-width:769px){
#hidden{
opacity:0;
}
#hidden.shown{
opacity:1;
transition:opacity .5s;
}
}
#hidden.shown{
height:100px;
}
#shown{
background:green;
cursor:pointer;
height:100px;
}
<div id="hidden"></div>
<div id="shown"></div>
There's a couple of key factors here.
Make sure you have <meta name="viewport" content="width=device-width" /> in your <head> element.
As #Shaggy said, you need to use media queries for the desired effect.
example:
#media (min-width: 768px) { // tablets can't go below 768px
#someID {
// styles
}
}
Additional media queries here for selected devices
As for your javascript calculating the resize of your browser, this only works on doc load UNLESS you're using resize event.
$(window).on('resize', function() {
// throw your resize code here for whatever you want to hide/show
if (window.screen.availWidth > 768 {
......
}
});
You don't necessarily have to use both the resize event AND the media queries. Once you resize the browser, the media queries will pick up the width and assign styles to the elements.
best way, as others suggested, is using keyframes in css.
if you wanted to do it in javascript, try:
if ($(window).width() < 796) {
//DO STUFF
}
To see the change you should use the mobile emulation available in chrome and firefox, and reload the page. That and use the media queries.
I have created a dropdown menu with css. Here is the HTML code:
<li class="menu" id="menu">
<div class="dropdown">
<div class="col1"> ...
here is the css:
.dropdown {
visibility:hidden;
/*...*/
}
#menu li:hover .dropdown{
visibility:visible;
}
This works perfectly. In jQuery I handle the click event for the links in this menu and I want to use jQuery to hide the dropdown whenever the user clicks on a link so it goes away.
I tried these both (note: I haven't used these together.):
$('.dropdown').css('visibility', 'hidden'); //didn't work
$('.dropdown').hide(); //didn't work either
they both hide the menu but the problem is when they hide it, I don't get the menu again whenever I hover the mouse over the item.
You have to define what happens when the mouse is hovering the button and what happens when it's not. Something like this:
jQuery(document).ready(function(){
jQuery(".dropdown").hover(function() {
/* hovering actions */
}, function() {
/* non-hovering functions */
});
});
That's because jQuery's hide() method uses the rule "display:none" over that elemenent, in this case ".dropdown", to hide it, therefore, by definition, the "visibility" can't work on an element that has the rule "display:none" assigned to it.
Use jQuery to make the dropdown effect instead of a bunch of CSS rules.
Okay, what is actually happening is when you you set $('.dropdown').css('visibility', 'hidden'); on the element, it adds this to the style attribute of the element, inline (you can check this with Firebug). So the CSS
#menu li:hover .dropdown{
visibility:visible;
}
doesn't have any effect because inline styles take precedence. .dropdown elements will always be set as hidden now.