I got this code, which works fine, until I change '.1' too colselect. I guess its because it gets the value too late and when I want to use colselect it haven't registered. Does anyone have any ideas on how to solve this?
$(document).ready(function() {
var colSelect;
$('.test2').mousedown( function(){
colSelect = '.' + $(this).attr('id');
});
$( '#1' ).resizable(
{handles:'e'},
{alsoResize: '.1'} // <- here I would like too change '.1' to colselect
);
});
Updated:
$(document).ready(function() {
var colSelect;
$('#one').on('mouseover' ,mousedwn);
function mousedwn(){
colSelect = '.' + $(this).attr('id');
resize(colSelect);
}
$('#one').on('mouseout' ,function(){
$('#one').off('mouseover' ,mousedwn); //prevent memory leaks
});
});
function resize(para){
$( '#1' ).resizable(
{handles:'e'},
{alsoResize: para}
);
}
Working Fiddle
Related
I want the user to go to this URL: domain.com/index.php#index This operation occurs:
$("#index").click(function(){
$(".active").removeClass("active");
$("li#index").addClass("active");
$(".loading").show(1000);
$(document).ready(function() {
$('#wrapper').fadeOut('slow', function(){
$('#wrapper').load("indexs.php", function(){
$(".loading").hide(1000);
$('#wrapper').fadeIn('slow');
});
});
});
});
You may be looking for window.location.hash. This could be implemented, in your example, by doing something like this, assuming you want the value of the hash to affect your jquery selectors.
var hash = window.location.hash;
$(hash).click(function(){
$(".active").removeClass("active");
$("li" + hash).addClass("active");
$(".loading").show(1000);
$(document).ready(function() {
$('#wrapper').fadeOut('slow', function(){
$('#wrapper').load("indexs.php", function(){
$(".loading").hide(1000);
$('#wrapper').fadeIn('slow');
});
});
});
});
Note: The examples are tested with chrome.
Firefox ia not working.
I have this js code to append css transitions.
For a single image (working):
var isTransition = false;
var isRemoveQueue = false;
$( ".text" ).bind( "webkitTransitionEnd mozTransitionEnd transitionEnd", function () {
isTransition = false;
if ( isRemoveQueue ) {
$( this ).removeClass("animated-hover");
}
});
$(".text").on( 'mouseenter', function () {
$(this).addClass("animated-hover");
isTransition = true;
isRemoveQueue = false;
});
$(".text").on( 'mouseleave', function () {
if ( !isTransition ) {
$( this ).removeClass( "animated-hover" );
} else {
isRemoveQueue = true;
}
});
fiddle: https://jsfiddle.net/drecodeam/3pb38v4f/6/
It was important to me, that the transition does not stop if you just hover quick over the image. It is working good with one image.
Here is the thing: If i am using more images than one, i have weird effects, like the transition getting stuck e.g.
Example with more images:
https://jsfiddle.net/3pb38v4f/9/
Beside it is not working correctly, it is also not working with firefox.
You could just use
$(".text").on( 'mouseleave', function () {
$( this ).removeClass( "animated-hover" );
isRemoveQueue = true;
});
I think you over thought it a little :)
Hoverflow is exactly what i was looking for.
It can handle the queuing in js very nice and clean :)
http://www.2meter3.de/code/hoverFlow/
I am trying to load a url then check for a particular text of anchor and now I want to set an event of clicking of that anchar tag.How can I do it?So far my code:
$.get(y, function(data) {
console.log(data);
$(data).find('a').each(function() {
console.log($(this).text());
if($(this).text().indexOf("Full Text as PDF")>=0)
{
alert($(this).text());}
});
P.S: I am trying to do this in a chrome Extension.
UPDATED CODE:
chrome.tabs.onActivated.addListener( function(activeInfo){
chrome.tabs.get(activeInfo.tabId, function(tab){
y = tab.url;
$.get(y, function(data) {
console.log(data);
$(data).find('a').each(function() {
console.log($(this).text());
if($(this).text().indexOf("Full Text as PDF")>=0)
{ alert($(this).text());
$(this).on("click", function()
{ console.log("link clicked");
alert("link clicked");
});
}
});
});
});
});
a small implementation is:
$.get(y, function(data) {
$("#mydiv").html(data);
$("#mydiv").find('a').each(function(){
$(this).on("click",function(e){
e.preventDefault();
alert($(this).html());
});
});
});
http://jsfiddle.net/vzg6q/
Assuming that I am understanding correctly what you are asking, you want to bind a click event to all anchor tags with a certain text. If so, then something along these lines should work:
Tested and working. http://jsfiddle.net/rvrF8/8/
$.get( y, function( data )
{
$( data ).find('a').each(function ()
{
var theText = $( this ).text( );
var desiredText = 'abc';
if ( theText == desiredText )
{
$( this ).on('click', function ( )
{
event.preventDefault( );
alert( $( this ).text() );
});
}
});
});
$(this).live('click', function(event){
// do something
});
I'am trying to change the class of some input elements during some mouse events but only mouseover and mouseout events are working, what can be the reason of this problem ?
$(document).ready(function(){
$('.registerFormElements').mouseover(function(){
this.className='bright';
});
$('.registerFormElements').mouseout(function(){
this.className='';
});
$('.registerFormElements').focus(function(){
this.className='bright';
});
$('.registerFormElements').blur(function(){
this.className='';
});
});
Try to use the code :
$(this).attr('class', '');
or
$(this).attr('class', 'myClass');
and you can too
$(this).addClass('myClass');
$(this).removeClass('myClass');
$(document).ready(function(){
var classname= 'bright';
/*Can create a variable so that you can use it later. By creating variable we can avoid searching in entire dom again*/
var formElement = $(".registerFormElements");
/*Used chaining*/
formElement.on( "mouseover focus", function() {
$(this).addClass(classname);
})
.on( "mouseout blur", function() {
$(this).removeClass(classname);
});
});
You can use addClass() and removeClass()
$(this).removeClass(); //It clears all classes
$(this).addClass('MyClass');
you could bind many events and look at the event.type and toggle the class you want:
$(document).ready(function(){
$('.registerFormElements').on('focus mouseenter mouseleave blur', function(e) {
var element = $(this);
var shouldHaveBright = e.type === 'focus' || e.type === 'mouseenter';
var hasFocus = element.is(':focus');
element.toggleClass('bright', shouldHaveBright || hasFocus);
});
});
It seems to be working for me. Check your class names don't have typos in them. Also, by focus do you mean tab to the input? This is what triggers focus events.
See my fiddle:
http://jsfiddle.net/AdqzA/
$('.registerFormElements').mouseover(function(){
this.className='bright';
});
$('.registerFormElements').mouseout(function(){
this.className='';
});
$('.registerFormElements').focus(function(){
this.className='bright';
});
$('.registerFormElements').blur(function(){
this.className='';
});
Your Jqueries might be conflicting :-
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.registerFormElements').mouseover(function(){
this.className='bright';
});
$j('.registerFormElements').mouseout(function(){
this.className='';
});
$j('.registerFormElements').focus(function(){
this.className='bright';
});
$j('.registerFormElements').blur(function(){
this.className='';
});
});
My script:
(function($){
$.fn.megaswitcher = function(settings) {
return this.each(function() {
var $i = $(this),
current,
childs = $i.find('.selection li').length; // returns desired number
$i.find('.selection li').delegate('.active', 'dblclick', function(e){
e.preventDefault();
current = $i.find('.selection li').index(this);
alert('triggered # ' + current); // doesn't even execute
var _delay = $(this).attr('name') > 0 ? (parseInt($(this).attr('name')) * 1000) : 5000;
$(this).delay(_delay).show(0, function(){
if((current + 1) < childs){ // if not last
$(this).removeClass('active').next().addClass('active').show(0, function(){
$i.find('.image img').addClass('tempp');
$(this).find('img').clone().hide().addClass('temp').appendTo($i.find('.image')).fadeIn(400, function(){
$i.find('.image img.tempp').remove();
});
}).trigger('dblclick');
}else{
$(this).removeClass('active');
$i.find('.selection li:first').addClass('active').show(0, function(){
$i.find('.image img').addClass('tempp');
$(this).find('img').clone().hide().addClass('temp').appendTo($i.find('.image')).fadeIn(400, function(){
$i.find('.image img.tempp').remove();
});
}).trigger('dblclick');
}
});
});
$i.find('.selection li.active').trigger('dblclick');
});
};
})(jQuery);
Gotta admit, that, that's a huge mess over there, but I have no idea why that delegate is not working...
Any ideas?
P.S. I have a different plugin based on this same technique with dblclick, that works flawlessly, except, it doesn't do item selection with find();, and I have a feeling that it's the thing that's causing the problem, but I don't know with that to replace it.
Thanks in advance!
You have to call delegate on the parent of the items that you want to attach the event.
Instead of:
$i.find('.selection li').delegate('.active' ...
you should do
$i.find('.selection').delegate('li.active'