I have several buttons in the table (one button for each row) and show/hide them using jQuery:
$('#some-id tr').hover(
function() { $(this).find('.button-class').removeAttr('disabled').css(...); },
function() { $(this).find('.button-class').attr('disabled', true).css(...); }
);
It properly works for showing/hiding.
The catch is sometimes shown buttons aren't accessible from the browser (don't react to left and right clicks, browsers don't show tooltip). Could be liven up by right click on the rest of browser window (not always).
Tested in Firefox and Chrome.
SOLVED? Very interesting. .css(...) in the code above are contained setting background: none/url(image.png). Buttons have no text, so were invisible with disabled="disabled" and background: none;. I tried simply .show()/.hide() and can't reproduce the problem. Great, but what was wrong with the first edition except of its redundancy?
Make sure you wrap your code in jQuery's .ready() function, or some other such function, such as $(window).load().
Here's how it would look with .ready():
$(function() {
$('#some-id tr').hover(
function() { $(this).find('.button-class').removeAttr('disabled').css(...); },
function() { $(this).find('.button-class').attr('disabled', true).css(...); }
);
});
Related
My code has a button that changes some CSS via adding and removing classes. I have the JS working fine to do this. The first click adds the class, clicking again removes it and so on around it goes, nothing unusual there.
However, I've also incorporated a function that removes the classes if the browser window is resized at all. My issue is, if I then go back to press the button again after resizing the window, it thinks it should be doing the second click (almost reversing the function) and removes the classes (even though they've already been removed by the resizing), whereas I need the button function to almost reset and have it think the button hasn't been clicked yet after the resizing, so the process can be started from the beginning.
I really hope this makes sense, because its been driving me around the bend, and nothing I've tried will make it work how I would like it to.
Thank you for any help!
Heres the code:
JS/jQuery
{
/* Button Function to add and remove classes. */
$("#nav-icon").click(function () {
var clicks = $(this).data("clicks");
if (!clicks) {
$(".logo-container").addClass("border-change-image");
$(".container-fluid").addClass("border-change-header");
} else {
$(".logo-container").removeClass("border-change-image");
$(".container-fluid").removeClass("border-change-header");
}
$(this).data("clicks", !clicks);
});
/* Window Resizing Function */
$(window).on("resize", function () {
var size = $(this).on("resize");
if (size) {
$(".logo-container").removeClass("border-change-image");
$(".container-fluid").removeClass("border-change-header");
} else {
}
});
}
Removed the variable storing the data and just "asked" if one of the div's had one of the classes then add or remove, based on that. Works like a charm.
JS
$("#nav-icon").click(function () {
if ($(".logo-container").hasClass("border-change-image")) {
$(".logo-container").removeClass("border-change-image");
$(".container-fluid").removeClass("border-change-header");
} else {
$(".logo-container").addClass("border-change-image");
$(".container-fluid").addClass("border-change-header");
}
});
I would like to make a overlay when the uses make hover event on a link.
This part ok, the overlay created and everything fine.
But I also would like to remove this overlay, when user click (or hover) for it, and this part create a strange bug.
I try clicking for the overlay and its dosen't close, nothing happening, but if you paste script to the chrome console, this working fine.
Js, first part, add script:
var overlay = jQuery('<div class="overlay"> </div>');
$("#link-'.$myqlVideoID.'").hover(function() {
$("#hover-").attr("src","http://youtube.com/embed/'.$myqlVideoID.'?autoplay=1");
$(".drop-target").css("background-color","#070707");
$(".drop-target").css("padding","11px");
$(".drop-target").css("margin-bottom","16px");
$(".drop-target").show().fadeIn("3000");
overlay.appendTo(document.body)
});
And the second part, remove overlay:
$(document).ready(function() {
$(".overlay").click(function() {
$("#hover-").removeAttr("src");
$(".drop-target").hide().fadeOut("3000");
$(".overlay").remove();
console.log("clicked");
});
});
My site is where you can see the bug:
http://neocsatblog.mblx.hu/search/
Just search something and scroll down to "Cimkék"
Try delegating the event on the overlay by writing the following:
$(document).on('click', '.overlay', function () {
//The rest of your code
}) ;
And same for the rest of your event handlers.
The reason for this is that the element overlay is being added dynamically, and the script doesn't know about it at the moment when it's being instantiated.
I'd like to initially set the focus onto the text-field of an item when editing it, but cannot overcome TinymMCE'S iframe kickin' in. When disableling TinyMCE, everything works as expected, the text-field is focusable. I tried simulating a click in TinyMCE's body-element, no luck either. Is it possible at all, to focus the body-field via JS?
This is what I tried so far:
(function($) {
$(document).ready(function() {
$('#text').focus() // Only works, when TinyMCE is disabled.
$('body#content').click() // Cannot click into TinyMCE's body.
$('#text_bold').click() // Cannot even click one of the editor's buttons.
setTimeout(function() {
// Tried same as above with time-delay, no luck.
}, 277);
});
$(window).load(function() {
// Tried the same as in doc.ready, no luck.
});
})(jQuery);
I know this is kind of old but I definitely struggled finding a solution for this online, so I'm sharing. Add this, in your tinymce.init() codeblock. Change selector or event if needed.
selector: "textarea.tinymce",
setup: function (editor) {
editor.on('mouseup', function (e) {
this.focus();
});
}
TinyMCE is loaded inside an IFRAME so it's not in the DOM of the main document. Direct jQuery calls will not work.
This is an old code I used (TinyMCE version shipped with Plone 4.3):
(function($) {
function checkTinyMCELoaded () {
if (window.tinymce==undefined || !tinymce.editors.length) {
setTimeout(checkTinyMCELoaded, 100);
return;
}
$('#text_ifr').contents().find(".mceContentBody").get(0).focus();
}
$(document).ready(function() {
setTimeout(checkTinyMCELoaded, 100);
});
})(jQuery);
It's ugly. Best way is to get rid of setTimeout and attach an handler on TinyMCE load event, but when I looked into this I found this is not so easy on Plone as you must change the .init() call of TinyMCE done by Plone JS.
so I've been tasked with making a website using Wordpress and on the homepage there's a slider that if you click on the buttons below, it's displays another image, simple right? Well, I've got the slider and I've got the buttons, I've added the jQuery and it doesn't want to work.
I first tried making the buttons actually buttons:
<button type="button" class="btn btn-success" id="hideshow-healthcare">Healthcare</button>
and that worked fine when I used this:
jQuery(document).ready(function() {
jQuery('#hideshow-healthcare').on('click', function() {
jQuery('#healthcare').show();
};
};
So after having it working like that, I moved on to making the buttons in to li's instead so that I could follow the design. Upon doing this, the slider no longer works. I've tried mulitple different things including adding the ID to everything in the li to see if that would work, and sadly not. I did some research and tried to change
jQuery('#hideshow-healthcare').on('click', function() {
to
jQuery('li#hideshow-healthcare').on('click', function() {
but still, no luck. I was hoping someone would be able to provide a solution to this problem.
Also, this is the li code I'm currently using:
<li><a id="hideshow-healthcare"><h5>HEALTHCARE</h5> Lighting to create a feeling of well being</a></li>
You need to add space after li element to find its descendants #hideshow-healthcare. It should be
jQuery('li #hideshow-healthcare').on('click', function() {
#hideshow-healthcare is child of li. Use descendant selector in jquery
jQuery('li a#hideshow-healthcare').on('click', function(event) {
event.preventDefault(); // prevents default action
// your code
});
Id be unique in html you just straightly write with id
jQuery('#hideshow-healthcare').on('click', function(event) {
event.preventDefault(); // prevents default action
// your code
});
I have an issue with jQuery's .hover() method. I have a few paragraphs inside a tags which I use as a menubar. What I intend to do is, if I hover one of these menulinks, a new element gets displayed over the menulink which contains links to submenu links. The problem is, that the .hover() stops working immediately.
I did a simple FIDDLE to show my problem.
Any help is much appreciated.
Edit: Worth to say is, that I also want the sublinks to be clicked, so the hover must be still working then. It only stops when I leave the red div.
What about this?
$('p').hover(function() { $('div').fadeIn(); }, function() { });
$('div').hover(function() { }, function() { $('div').fadeOut(); });
Demo fiddle: http://jsfiddle.net/lparcerisa/1urs0wfr/2/