jquery's removeAttr function inside $(document).ready doesn't work - javascript

Got stuck with some trouble.
I got a page, where I use #media to create mobile and tablet version separatly. In mobile version I use mmenu jquery plugin, to make a sliding menu. In tablet version I do not want to use this menu, but still planning to use it's html. So I decided to remove id, that shows mmenu plugin where it need to make sliding menu. But for some reason juery's removeAttr does not work as I expected.
Ps: I'm pretty new to js, so I might not know about thihgs related to browser workings.
I got this code (html is pretty simple - nav, that wraps a bunch of ul's) :
var func = function() {
var width = $(window).width();
var menu = $(".menu");
/*if it is tablet*/
if (width > 401) {
menu.removeAttr("id");
}
/*loading mmenu*/
$(function() {
$('#my-menu').mmenu({
slidingSubmenus: false,
zposition: "next"
});
});
};
$(document).ready = func();
I'll be very happy if someone clarifies where is my mistake.

You're binding document.ready incorrectly. It should be
$(document).ready(func);
You don't set the property, and you don't call your function.

Instead of removing the ID from #my-menu, you could move the function to create the menu inside the width-checking function. That way, the menu is only created if the width is wider than 401. Otherwise it's skipped altogether.
if (width > 401) {
$(function(){
$('#my-menu').mmenu(...);
});
}

Related

Tizen Selector touch event

I want to open different pages from a popup-selector menu in Tizen.
I have 8 menu items and each should open a different page in the same HTML using the active-ui-page class.
I tried doing it using the code mentioned here.
But then when I transfer back to the selector, them indicator-name doesn't change.
Please help me on this.
Try to make sure you are not closing the popup or destroying the Selector. In such way your selector is may be getting nonfunctional. tau.closePopup() will close the popUp window, thus selector won't appear back.
elSelector.addEventListener("click", function(event) {
var target = event.target;
if (tau.support.shape.circle) {
if (target.classList.contains("ui-selector-indicator")) {
tau.closePopup(popupCircle); //**comment out this line**//
//your code
}
}
});
selector.destroy() destroys & removes event listener, which might be the case in your situation, that's why indicator-name isn't changing.
selector.destroy(); //**comment out this line**//
Vice versa for solution try calling the popUp window again using tau.openPopup() :
if (tau.support.shape.circle) {
tau.openPopup(popupCircle);
}
otherwise call the selector again with tau.widget.Selector()
if (tau.support.shape.circle) {
var radius = window.innerHeight / 2 * 0.8;
selector = tau.widget.Selector(elSelector, {itemRadius: radius});
}
Code souce : 'TAUUIComponents' (Tizen Sample Web app)
Thank you.

Wordpress & jQuery Responsive Navigation

I have a problem with the wordpress and with Jquery.
I have this code to show and hide a responsive navigation on the left :
$('.menu').on('click', function(){ if ($('.responsive__menu').hasClass('is-open')) {
$('.responsive__menu').removeClass('is-open');
$('.menu').removeClass('is-active');} else {
$('.responsive__menu').addClass('is-open');
$('.menu').addClass('is-active');}});
It works with my website without Wordpress, but once in Wordpress, it seems that half of the code works : the creation of the cross to close the menu except that the menu does not appear.
Can you enlighten me on some points?
The script is loaded, are there a faster and easier way to transform the code with jquery and toogle () ?
It can only be a trouble about code but why it does not work anymore once on Wordpress ?
Thanks a lot for your help, before asking the question I tried many things. ^^
If it works with any of your websites means the code is good, just you might have conflicts in your css, so include your css which is menu related last, and if it doesn't work either, post your css code, so we could see better what's going on, and there is not need for so much code. Initialize your menu without class .open , in your html and use JQUERY:
$('.menu').on('click', function(){
$(".responsive_menu).toggleClass('open');
});
jQuery comes with wordpress in non-conflict mode , to make sure everything works you should use jQuery variable instead of the $ variable.
you can alternatively do the following
jQuery(document).ready(function($) {
// $ variable can be used here
$('.menu').on('click', function() {
if ($('.responsive__menu').hasClass('is-open')) {
$('.respons__menu').removeClass('is-open');
$('.menu').removeClass('is-active');
} else {
$('.responsive__menu').addClass('is-open');
$('.menu').addClass('is-active');
}
});
});

Disable certain Javascript on devices

I'm building a website and I'm using media queries to make the website responsive for mobile devices. On the desktop version of my website, I'm using the following Javascript to make 2 divs fade in/out once 100px have been scrolled down.
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 100) {
$('#firstHeadingLeft, #firstHeadingRight').fadeIn(3000);
} else {
$('#firstHeadingLeft, #firstHeadingRight').fadeOut();
}
});
Now the problem is, I don't want this javascript to be active on my mobile device, I want the 2 divs to be always present. I done some searching and found this
How to disable JavaScript in media query
One of the suggestions was to add an event listener using this code
window.addEventListener('resize', function(){
if(window.innerWidth > 568){
...execute script
}
});
However because I'm not fluent in javascript I'm unsure how to correctly wrap my code into the event listener code.
If someone could give me a hand that would be appreciated! -- Thank you!
This should work but I have no way to test it. Tell me what happens :)
window.addEventListener('resize', function(){
disableScript();
});
window.addEventListener('load',function(){
disableScript();
});
function disableScript(){
if(screen.width > 568){
//...execute script
}
}

jQuery addClass() not working at certain media queries

If the page is loaded and the browser window is between 1100px & 640px, the following jQuery script works properly:
$('#mobileMenu').click(function(){
if ($('body').hasClass('mobile-nav-open')) {
$('body').removeClass('mobile-nav-open')
} else {
$('body').addClass('mobile-nav-open');
};
});
What this does is when a#mobileMenu is clicked, a class is added to body and the mobile nav menu slides in, then the class is removed and the mobile nav menu closes upon another click.
But if the page is loaded at <=640px, the class .mobile-nav-open never gets added onto the body. I cannot for the life of me figure out why it isn't working. This code is also being inserted through Squarespace's code injection into the footer. There's a lot of JS packed into the template that may be interfering, but I can't figure out how to override it. Anyone able to help me out? Any help is appreciated.
The site can be seen here: https://ryan-vandyke-4rks.squarespace.com/
This looks to be what I'm trying to override:
Y.use(function (a) {
a.on("domready", function () {
if (640 >= a.one("body").get("clientWidth")) a.one("#mobileMenu").on("click", function () {
a.one("body").hasClass("mobile-nav-open") ? a.one("body").removeClass("mobile-nav-open") :
(a.one("body").addClass("mobile-nav-open"), a.one("body.email-open") && a.one("body").removeClass("email-open"), a.one("body.desc-open") && a.one("body").removeClass("desc-open"))
});
})
});
Instead of add/remove class on click try below approach to add/remove class on body tag.
function addBodyClass(){
if($(window).width() <= 640){
$('body').addClass('mobile-nav-open');
} else {
$('body').removeClass('mobile-nav-open');
}
}
$(window).on('load resize', function(){addBodyClass()})
Fiddle Demo

Scroll to div on link click

There are questions all over SO about this topic, but I've tried a ton of different scripts for this and I cannot get it to work with my site.
I am building a personal portfolio wordpress theme for myself, and would like to keep it a one page theme. What I want is when a user clicks a link on the navigation, the page scrolls down to that section. Easy right? No.
I don't know why it isn't working on my site, but I think it has to do with the script I am using for the scroll to fixed navigation.
Here is the script I am currently attempting to use to create this in-page navigation scrolling effect: http://css-tricks.com/snippets/jquery/smooth-scrolling/
And here is the script I am using to create the scroll to fixed navigation effect:
window.onscroll=function () {
var top = window.pageXOffset ? window.pageXOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
if(top > 640){
document.getElementById("nav").style.position = "fixed";
document.getElementById("nav").style.height="65px";
} else {
document.getElementById("nav").style.position = "relative";
document.getElementById("nav").style.height="65px";
}
}
You can view the site I am trying to do this on at http://www.tylerb.me
Are the two scripts contradicting each other and making one of them not work?
It would appear wordpress uses the jQuery.noConflict() method to prevent well.. conflicts from occurring. Because of the script conflicts(moo tools uses $ as well, for example), replace each $ with jQuery. This should fix your issue.. and I do mean in the code which calls the plugin, not the plugin itself.
Example:
//normal jquery method call:
$("element").method(etc);
//with noConflict code:
jQuery("element").method(etc);
UPDATE 1:
It would appear that you forgot to leave a particular $ alone. This line:
var target = jQuery(this.hash), target = this.hash;
Should be this:
var $target = jQuery(this.hash), target = this.hash;
This of course goes with any variable that begins with a $. Those ones should not be deleted.
The core of your issue is that jQuery is not loading.
Daedalus just got there before me. It's no conflict that's causing your issue. Just use jQuery rather than $.
This could prove useful to some.
Try using:
jQuery(document).ready(function($){
// do stuff here using $
});
instead of
$(document).ready(function($){
// do stuff here
});
This declares a local $ instead of conflicting with the previously declared.
It helped me lots of times.

Categories

Resources