HTML Structure:
<a class="fadeThis" id="paperoff" href="#"><span id="paperon" class="hover">News</span></a>
JAVASCRIPT:
$('.fadeThis > .hover').empty();
$('.fadeThis').each(function () {
var text = $(this).text();
$(this).append(''+text+'');
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(500, 1);
}, function () {
$span.stop().fadeTo(500, 0);
}).click (function () {
// HERE SOMETHING THAT TELLS TO NOT FADE BACK THE SPAN (ONLY FOR THE CLICKED DIV).
});
});
Your question is not very clear, but do you want someting like this?
var fadeBlock = false;
$(this).hover(function () {
$span.stop().fadeTo(500, 1);
}, function () {
if (!fadeBlock) {
$span.stop().fadeTo(500, 0);
} else { fadeBlock = false;}
}).click (function () {
fadeBlock = true;
});
Related
Currently below code is working fine but i want the PDF to be downloaded on same page instead of getting opened in a window(same/different).
Is it possible?Any help would be appreciated
<script>
$(document).ready(function () {
setTimeout(function () {
$('a[href]#hide-link').each(function () {
var href = this.href;
$(this).removeAttr('href').css('cursor', 'pointer').click(function () {
if (href.toLowerCase().indexOf("#") >= 0) {
} else {
window.open(href, '_self');
}
});
});
}, 500);
});
</script>
HTMl :
Download
$(document).ready(function () {
setTimeout(function () {
$('a[href]#hide-link').each(function () {
var href = this.href;
$(this).removeAttr('href').css('cursor', 'pointer').click(function () {
if (href.toLowerCase().indexOf("#") >= 0) {
} else {
window.location = href;
}
});
});
}, 500);
});
I am using CK-Editor 4. In which I have created Directive. When I click on Textarea my cursor pointer is Move to First position. I want my cursor position should be available when I click in any of the Place inside Textarea. It should not be able to move first or last position until I click on last position.
vpb.directive('ckeInline', function ($timeout, $parse, $rootScope,$) {
return {
require: "ngModel",
link: function (scope, element, attrs, ngModel) {
if (attrs.ckeInlineShowtitle) ngModel = "";
isMobile = $(".ipad, .ipod, .android").length > 0;
var destroy_this_editor = function(id)
{
setTimeout(function () {
try{
CKEDITOR.instances[id].destroy(true);
} catch (ex) {
}
},500)
}
if (!isMobile) {
var create_and_focus = function () {
if (scope.setup.edit_mode || attrs.ckeNonEditMode) {
attrs.$set('contenteditable', true);
var a_id = attrs.ckeInlineId;
var menu_selector = attrs.ckeInlineMenu;
//get editor
//create editor if doesn't exist
var e = CKEDITOR.instances[a_id];
if (!e) {
element.menu = $(menu_selector);
//set up behavior for menu
uif.wire_up_menu(element, scope);
//hide all menu bars
$("nav.text-editor-menu-bar").hide();
//create editor
var config = {
toolbar: "More",
on: {
'blur': function () {
save_editor_content(function () {
destroy_this_editor(a_id);
});
},
'focusout': function () {
save_editor_content(function () {
destroy_this_editor(a_id);
});
},
'focus': function () {
//show the current menu
element.menu.show();
//fix menu width
uif.stretch_menu(element);
},
'instanceReady': function (event,element) {
//----------------I think,Here i want logic to set caret sign or set mouse
//pointer to appropriate place
// event.editor.focus();
// element.focus();
}
}
};
if (attrs.ckeInlineToolbar) {
config.toolbar = attrs.ckeInlineToolbar;
}
var editor = CKEDITOR.inline(a_id, config);
if (attrs.ckeInlineOnInit) {
uif.apply_scope($rootScope, $parse(attrs.ckeInlineOnInit));
}
}
else
{
e.focus();
element.focus();
}
} else
{
attrs.$set('contenteditable', false);
}
}
element.click(function () {
create_and_focus();
});
if (attrs.ckeInlineFocusWatch) {
scope.$watch(function () {
return $parse(attrs.ckeInlineFocusWatch);
}, function () {
if (attrs.ckeInlineFocusCondition == undefined || $parse(attrs.ckeInlineFocusCondition)() == true) {
create_and_focus();
}
})
}
var saving = false;
var save_editor_content = function (cb) {
if (!saving)
{
saving = true;
var a_id = attrs.ckeInlineId;
if (a_id) {
var editor = CKEDITOR.instances[a_id];
if (editor) {
var menu_selector = attrs.ckeInlineMenu;
element.menu.hide();
//attrs.$set('contenteditable', false);
var newValue = editor.getData().replace(/ /, ' ');
if (ngModel.$modelValue != newValue) {
if (attrs.ckeInlineBlurBool) {
$parse(attrs.ckeInlineBlurBool).assign($rootScope, false);
}
ngModel.$setViewValue(newValue);
if (attrs.ckeInlineSave) {
uif.apply_scope(scope, $parse(attrs.ckeInlineSave));
}
$timeout(function () {
saving = false;
if (cb) cb();
}, 1100)
} else
{
saving = false;
$rootScope.setup.blcok_edits = false;
$rootScope.setup.block_all_editors = false;
if (cb) cb();
}
}
}
else
{
saving = false;
}
}
};
} else if (attrs.ckeNonEditMode) {
attrs.$set('contenteditable', true);
element.blur(function () {
ngModel.$setViewValue(element.html().replace(/ /, ' '));
if (attrs.ckeInlineSave) {
uif.apply_scope(scope, $parse(attrs.ckeInlineSave));
}
})
}
}
}
});
I would like to add a listener that listens for a click on 'html' and then closes the dropdown. It only ever works without the hide function by puttind css display to none. Nothing seems to work!!
Any ideas?
// Drop Down Menu
EZEMAIN.dropDown = {
slideTime: 200,
dropDown: '.dn-drop-down',
arrow: '.dn-menu-arrow',
arrowUp: 'dn-arrow-up',
bindElms: function () {
this.btn = $('.dn-dropdown-btn');
},
html: function(e) {
},
showHide: function (e) {
var self = EZEMAIN.dropDown,
dropDown = $(this).find(self.dropDown),
arrow = $(this).find(self.arrow),
openedDropDowns = $(self.dropDown).is(':visible');
if ($(e.target).parents(self.dropDown).length == 0)
e.preventDefault();
if (dropDown.is(':hidden')) {
if (openedDropDowns) self.hide();
dropDown.slideDown(self.slideTime, function () {
arrow.addClass(self.arrowUp);
});
setTimeout(function () {
$('body').on('click', self.hide);
}, 100);
}
else
self.hide();
},
hide: function () {
var self = EZEMAIN.dropDown;
$(self.dropDown).slideUp(self.slideTime, function () {
$(self.arrow).filter(function () { return $(this).siblings('.dn-basket-btn').length == 0; }).removeClass(self.arrowUp);
});
$("html").click(function () {
//$("#dn-header-basket").css("display", "none");
$(EZEMAIN.arrow).filter(function () { return $(this).siblings('.dn-menu-arrow').length == 0; }).removeClass(self.arrowUp);
});
$('body').off('click', self.hide);
},
init: function () {
this.bindElms();
this.btn.click(this.showHide);
}
};
I'm having a problem: when clicking on edit buttom, the message of the successful/error alert is displayed only on the first row even if i click on the second.
This is the js
var ROUTE = new function () {
var oGlobal = this;
this.sSaveUrl = '';
this.setSaveUrl = function (_sUrl) {
this.sSaveUrl = _sUrl;
}
this.setEventSubmit = function () {
$('[id^="route_update"]').each(function () {
$(this).click(function () {
var oData = $(this).closest('tr').find('input').serializeArray();
var oRow = $(this).closest('tr');
console.log(oData);
oReq = $.post(oGlobal.sSaveUrl, oData, function (data) {
if (data['valid'] != "true") {
//console.log('error');
//Fade in
oRow.closest('#comment').html('Error').css('display', 'block').fadeIn(1000);
//Fade out
setTimeout(function () {
$('#comment').html('').fadeOut(1000);
}, 1500);
//fade in
$('#comment')
} else {
//console.log('success');
//Fade in
$('#comment').html('Insert Success').fadeIn(1000);
//Fade out
setTimeout(function () {
$('#comment').html('').fadeOut(1000);
}, 1500);
//fade in
$('#comment')
}
return false;
}, 'json');
return false;
});
});
}
this.init = function () {
this.setEventSubmit();
}
}
What do I wrong?
Thanks in advance
I have some code that is running a JavaScript image flip, I'm new to JS and I need the image to flip when hovered and and hovered off, if I put it to onhover it flips everytime the mouse is moved, not when the mouse is off.
Here is the code:
$(document).ready(function () {
setInterval(function () {
$('.sponsorFlip').load('script.js');
$('.sponsorFlip').load('jquery.flip.min.js');
}, 30000);
$('.sponsorFlip').one("mouseenter mouseleave", function () {
var elem = $(this);
if (elem.data('flipped')) {
elem.revertFlip();
elem.data('flipped', false)
}
else {
elem.flip({
direction: 'rl',
speed: 250,
onBefore: function () {
elem.html(elem.siblings('.sponsorData').html());
}
});
elem.data('flipped', true);
}
});
$('.sponsorFlip').bind("click", function () {
var elem = $(this);
if (elem.data('flipped')) {
elem.revertFlip();
elem.data('flipped', false)
}
else {
elem.flip({
direction: 'rl',
speed: 250,
onBefore: function () {
elem.html(elem.siblings('.sponsorData').html());
}
});
elem.data('flipped', true);
}
});
});
Make use of classes. ;) Preview - http://jsfiddle.net/TJZmM/3/
$('div').bind('mouseover mouseout', function(){
var self = $(this);
if(self.toggleClass('flipped').hasClass('flipped')) {
self.html('rl');
}
else {
self.html('lr');
}
});