When hovering over an menu item with submenu pages in the wordpress backend a "tooltip" showing each submenu page is popping up.
How can I get rid of these?
What I've tried so far: Removing the wp-has-submenu style class. This works - kinda. When hovering the tooltip doesnt appear anymore. On mousedown on an item the tooltip still appears.
$('#adminmenu').children('li').each(function () {
$(this).removeClass('wp-has-submenu');
// removing or changing the value of the 'aria-haspopup' attr doesn't solve the problem. Not sure what the attr is for
// $(this).children('a').each(function(){
// $(this).attr('aria-haspopup', 'false');
// });
});
Update1
Well okay this seems to be pure javascript and no jQuery. I've removed any event bindings from any element. Still showing tooltips.
$('html').find("*").each(function () {
$(this).off();
$(this).unbind();
});
AFAIK and a short google you can't remove pure js event handlers without a reference to the actual handler.
Update2
Hmm looking through /wp-admin/js/ it seems everything or at least very much is done in jQuery.. So.. I'm running out of ideas
Update3
After searching/looking and editing a lot of .js files I decided to delete /wp-admin/js and /wp-includes/js. IT IS STILL APPEARING. Holy .. what the heck are they doin.
Update 4
This seems to work
.js #adminmenu .opensub .wp-submenu {
display:none !important;
}
Yes,your code is working now. But I 'm describing here a simple way for adding this code in our theme and it will remove the hover effect in admin section.
Follow the steps.Step-1: add this code in functions.php file of your theme.
function theme_name_scripts() {
wp_enqueue_style( 'admin-hovermenu', get_template_directory_uri() ."/admin.css" );
}add_action( 'admin_enqueue_scripts', 'theme_name_scripts' );
Step:2 Create a file named admin.css and add this line in that file..js #adminmenu .opensub .wp-submenu {
display:none !important;
}
Now it will works.If need anything else then please let me know.
Related
I have a Bootstrap carousel and an invisible div with a loading gif that I want to show while a big image is loading. I'd like to show this div only when I change the active image on the carousel and this image is still loading.
I've already got the HTML and CSS working, I just need an help with jQuery.
I fetch the images links from Imgur and then build the carousel-items that I need with jQuery and append them on the carousel container.
I then attached to the carousel event slide.bs.carousel a function that shows me the loader. and this works
BUT BUT BUT
I'm worried that the loader will show for few milliseconds even if the image is already loaded/cached. How can I prevent this? How can I know if the image that is becoming active is already loaded? Do I really need to worry about this or I just leave it like this?).
I then want to hide the loader when the active image is ready, and I've done this:
$('.carousel-item img').each(function(){
$(this).on('load', function(){
$("#loader_container").css("visibility","hidden");
});
});
But it doesn't work. Seems like this load even keeps firing until
all the images of the whole carousel are loaded, and also somehow
the loader doesn't hide in the end, and this is the issue n.2.
Probably I'm approaching this wrong.
Is issue n.1 really a problem? And how can I solve issue n.2?
Thank you!
EDIT 1:
I tried to do this but still doesn't work. When I slide to the next slide I see that the image is already loaded, then the loader appears and doesn't go away anymore.
$(".carousel-item img").each(function(index){
$(this).on('slid.bs.carousel', function(){
$("#loader_container").css("visibility","visible");
});
$(this).on('load', function(){
$("#loader_container").css("visibility","hidden");
});
$(this).attr("src",links[index]);
});
EDIT 2:
Also, it seems like the browser try to load all the images as soon as possible, even the ones that are not displayed/are not active items.
I'd like to load the images only if the user goes to that slide and makes the item active.
EDIT 3:
I've found a library name jquery.unveil.js that seems like it does exactly what I need and is super easy to use... but somehow it doesn't work.
Maybe AngularJS can help me? Anyone know how can I modify my code to do this with angular? Like using ngui-in-view?
$('.carousel-item img').each(function(){
$(this).on('slid.bs.carousel', function(){
$("#loader_container").css("display","none");
});
});
You can use the slide.bs.carousel and slid.bs.carousel instead
Solved with lazy loader, here the code:
$(".carousel.lazy").on("slide.bs.carousel", function(ev) {
var lazy;
lazy = $(ev.relatedTarget).find("img[data-src]");
if(lazy.length > 0){
$("#loader_container").css("visibility","visible");
$(".carousel-item img").on("load",function(){
$("#loader_container").css("visibility","hidden");
});
lazy.attr("src", lazy.data('src'));
lazy.removeAttr("data-src");
}});
I needed that if(lazy.length > 0) because once I did a full round of the carousel and all the images where loaded, somehow the loader would show up and never go away. I tried with if(img.complete) but it didn't work so I used that technique.
I have a problem with FullPage JS, and I come to ask for help :)
My problem is: I want to disable FullPage for a single page of my Website.
FullPage is made for little page, but my website has 1 long page, where I want to disable FullPage.
The file has the .ejs extension, instead of .html extension. The pages are in different EJS file.
I searched on the FullPage's Github, and it indicates me the destroy('all') method, but I've found a lot of way to write it, I tried 3 methods, and I don't know why, it doesn't work.
Does any of you know how to disable FullPage JS on a single page of the Website ?
I tried 3 methods.
1st Method tried:
document.querySelector('#destroy').addEventListener('click', function(e){
e.preventDefault();
fullpage_api.destroy('all');
});
2nd Method:
$('#destroy').click(function () {
$.fn.fullpage.destroy('all');
});
3rd Method:
function DestroyFullPage() { //default is 700.
$.fn.fullpage.destroy('all');
}
As Alvaro suggested, I tried something like this:
<script>
window.onload = function() {
alert('Ready ?');
fullpage_api.destroy('all');
alert('Done');
}
</script>
The first alert works fine, but the second never appear on my screen, and FullPage isn't destroyed.
Am I wrong in my syntax ?
Thanks
PS: Excuse my English, I'm french, but at least, I try :D
If you wonder how to use the destroy function, you can check the demo provided on the fullPage.js docs:
https://codepen.io/alvarotrigo/pen/bdxBzv
Which basically uses fullpage.js version 3 (no jQuery required) to do so:
fullpage_api.destroy('all');
There's no difference at all between your 2nd method and the 3rd one. In fact, 3rd method won't work until you call the DestroyFullPage somewhere else.
And the 1st one should only be used when initialising fullPage.js with jQuery. So, using $('#fullpage').fullpage(options) instead of new fullpage('#fullpage', options);
I'm trying to toggle a div on click via jQuery.
But somehow on my live site it does not work at all.
I tried .toggle; hasClass .addClass .removeClass in if/else; also .show/.hide on if/else and so on.
But somehow the content does not get displayed or cannot be hidden.
Here is my working fiddle with the segment DOM of the livesite:
JSFiddle Example
$(".jsselect").click(function() {
var popup = $(this).next(".popup_select");
if (popup.hasClass('showit')) {
popup.removeClass('showit');
} else {
popup.addClass('showit');
}
});
Here is my livesite: Livesite
Well,
sometimes you just need to go to bed and figure out, that you've added the same script.js twice - so the code did execute twice.
Well, screw me then ;)
Thank you all so much!
I know there are a million of these on here but I have sifted through them for days and I can not get this code to work.
I am trying to add hoverIntent to an existing Wordpress theme, Atahualpa. I love the theme but I wish the menu's would stick around for a bit. This is quite a GUI usability issue with complicated page structures.
I pretty new to Javascript so I have difficulty knowing if my syntax etc is OK. I hope it is that easy. Here is where I am at.
I have loaded the .js on my website and have used Firebug console to make sure it is being loaded.
I have enabled "menu animations" in the theme. This has some logic to point it to the original code, which is this.
/* JQUERY */
jQuery(document).ready(function(){
<?php if ( $bfa_ata['animate_page_menu_bar'] == "Yes" AND strpos($bfa_ata['configure_header'],'%page')!== FALSE ) { ?>
jQuery("#rmenu2 li.rMenu-expand").hover(function(){
jQuery(this).find('ul.rMenu-ver:first').css({"display":"block","position":"absolute"});
jQuery(this).find('ul.rMenu-ver:first li').css({"display":"none"}).slideDown(500);
},function() {
jQuery(this).find('ul.rMenu-ver:first').css("display","block");
jQuery(this).find('ul.rMenu-ver:first li').css("display","block").slideUp(300);
jQuery(this).find('ul.rMenu-ver:first').slideUp(300);
});
After looking at lots of different examples I have changed the code to the following. I would like to keep the animation affects (but they can go if they are a PITA) and I would like a little control over the delay. Most importantly though I need the hoverIntent to work because the complicated page structures are difficult to navigate.
/* JQUERY */
$(document).ready(function(){
<?php if ( $bfa_ata['animate_page_menu_bar'] == "Yes" AND strpos($bfa_ata['configure_header'],'%page')!== FALSE ) { ?>
$("#rmenu2 li.rMenu-expand").hoverIntent({
over: function(){
jQuery(this).find('ul.rMenu-ver:first').css({"display":"block","position":"absolute"});
jQuery(this).find('ul.rMenu-ver:first li').css({"display":"none"}).slideDown(500);
$(this).children('a:first').addClass("hov");
},
timeout: 500,
out: function() {
jQuery(this).find('ul.rMenu-ver:first').css("display","block");
jQuery(this).find('ul.rMenu-ver:first li').css("display","block").slideUp(300);
jQuery(this).find('ul.rMenu-ver:first').slideUp(300);
$(this).children('a:first').removeClass("hov");
});
This code is broken. The menu reverts to its default CSS style so it still functions, but the animations are gone and their is 0 delay when the mouse moves off the menu.
Please help! What am I doing wrong?
I've reached a limited success, based in http://kv5r.com/wordpress-and-hoverintent/ and your own code.
This is the code to append in functions.php for atahualpa:
function enq_hoverIntent() { wp_enqueue_script('hoverIntent'); }
add_action('wp_enqueue_scripts', 'enq_hoverIntent');
function init_hoverIntent() { ?>
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery('#rmenu2 > li.rMenu-expand').hoverIntent({
over : navover,
out : navout,
timeout : 500
});
function navover(){
jQuery(this).find('ul.rMenu-ver:first')
.css({"display":"block","position":"absolute"});
jQuery(this).find('ul.rMenu-ver:first li')
.css({"display":"none"}).show();
}
function navout(){
jQuery(this).find('ul.rMenu-ver:first')
.css("display","block");
jQuery(this).find('ul.rMenu-ver:first li')
.css("display","block").hide();
jQuery(this).find('ul.rMenu-ver:first')
.hide();
}
});
</script>
<?php }
add_action('wp_head', 'init_hoverIntent');
Note that I've only applied the hoverintent to the first level of submenus (#rmenu2 > li.rMenu-expand). You can change it at your own.
I've added the following CSS to the general rules also, in order to disable the default behaviour at the main level of the menu.
#rmenu2>li:hover>ul{display:none;}
I'm new to jquery and bumped into a problem i can't fix
I want that on pageload my content is sliding down so i use the next code:
$(document).ready(function () {
$("#content").hide();
$("#content").slideDown(1000);
});
when i load the page the content slides down narmally, than the content gets hidden and slides down again.
When i go to the css and do #content{display: none;} instead of $("#content").hide(); everything works fine. (can't use this for browsers without js)
Does anyone know the cause of this?
Thanks!
You are saying that everything works fine while using css #content{display: none;}
than i offer u to use Jquery .css() method( http://api.jquery.com/css/ )..
u can use it like :
$(document).ready(function () {
$("#content").css( { 'display' : 'none' } );
$("#content").slideDown(1000);
});
sipmle as that.
and i also agree with #Billy Moon , it can be a browser specific bug or u may be calling a page refresh command, somewhere within ur code.
Your code has no problem inside. It's somewhere else in your code.
isn't that function call in some function that is called twice?