How to amend my tooltip javascript? - javascript

This script fires whenever I'm on a link. I want to change it to fire up when Im on a simple div like: <div id="personal"></div> . Thanks for help!
html at the moment:
Fixed Tooltip
javascript:
<script type="text/javascript">
$(function(){
$('a.normalTip').aToolTip();
$('a.fixedTip').aToolTip({
fixed: true
});
$('a.clickTip').aToolTip({
clickIt: true,
tipContent: 'Hello I am aToolTip with content from the "tipContent" param'
});
$('a.callBackTip').aToolTip({
clickIt: true,
onShow: function(){alert('I fired OnShow')},
onHide: function(){alert('I fired OnHide')}
});
});
</script>
main script:
(function($) {
$.fn.aToolTip = function(options) {
/**
setup default settings
*/
var defaults = {
// no need to change/override
closeTipBtn: 'aToolTipCloseBtn',
toolTipId: 'aToolTip',
// ok to override
fixed: false,
clickIt: false,
inSpeed: 200,
outSpeed: 100,
tipContent: '',
toolTipClass: 'defaultTheme',
xOffset: 5,
yOffset: 5,
onShow: null,
onHide: null
},
// This makes it so the users custom options overrides the default ones
settings = $.extend({}, defaults, options);
return this.each(function() {
var obj = $(this);
/**
Decide weather to use a title attr as the tooltip content
*/
if(obj.attr('title')){
// set the tooltip content/text to be the obj title attribute
var tipContent = obj.attr('title');
} else {
// if no title attribute set it to the tipContent option in settings
var tipContent = settings.tipContent;
}
/**
Build the markup for aToolTip
*/
var buildaToolTip = function(){
$('body').append("<div id='"+settings.toolTipId+"' class='"+settings.toolTipClass+"'><p class='aToolTipContent'>"+tipContent+"</p></div>");
if(tipContent && settings.clickIt){
$('#'+settings.toolTipId+' p.aToolTipContent')
.append("<a id='"+settings.closeTipBtn+"' href='#' alt='close'>close</a>");
}
},
/**
Position aToolTip
*/
positionaToolTip = function(){
$('#'+settings.toolTipId).css({
top: (obj.offset().top - $('#'+settings.toolTipId).outerHeight() - settings.yOffset) + 'px',
left: (obj.offset().left + obj.outerWidth() + settings.xOffset) + 'px'
})
.stop().fadeIn(settings.inSpeed, function(){
if ($.isFunction(settings.onShow)){
settings.onShow(obj);
}
});
},
/**
Remove aToolTip
*/
removeaToolTip = function(){
// Fade out
$('#'+settings.toolTipId).stop().fadeOut(settings.outSpeed, function(){
$(this).remove();
if($.isFunction(settings.onHide)){
settings.onHide(obj);
}
});
};
/**
Decide what kind of tooltips to display
*/
// Regular aToolTip
if(tipContent && !settings.clickIt){
// Activate on hover
obj.hover(function(){
// remove already existing tooltip
$('#'+settings.toolTipId).remove();
obj.attr({title: ''});
buildaToolTip();
positionaToolTip();
}, function(){
removeaToolTip();
});
}
// Click activated aToolTip
if(tipContent && settings.clickIt){
// Activate on click
obj.click(function(el){
// remove already existing tooltip
$('#'+settings.toolTipId).remove();
obj.attr({title: ''});
buildaToolTip();
positionaToolTip();
// Click to close tooltip
$('#'+settings.closeTipBtn).click(function(){
removeaToolTip();
return false;
});
return false;
});
}
// Follow mouse if enabled
if(!settings.fixed && !settings.clickIt){
obj.mousemove(function(el){
$('#'+settings.toolTipId).css({
top: (el.pageY - $('#'+settings.toolTipId).outerHeight() - settings.yOffset),
left: (el.pageX + settings.xOffset)
});
});
}
}); // END: return this
};

Maybe try this:
$('div').aToolTip(); // For any div
$('div#myID').aToolTip(); // For div with id="myID"
$('div.myClass').aToolTip(); // For div with class="myClass"

Related

Bind modal window with a conditional statment

I've got this script which works on a click of button, it pops up a modal window with a faded background. What i want to achieve this time is to include it in a conditional statement. For example if var1= 2 then the modal window pops up
// JavaScript Document
$(document).on("pagecreate", function () {
$(".about").on("click", function () {
// close button
var closeBtn = $('Close');
// text you get from Ajax
var content = "<p> hello folks, good evening</p>";
// Popup body - set width is optional - append button and Ajax msg
var popup = $("<div/>", {
"data-role": "popup"
}).css({
width: $(window).width() / 0 + "px",
padding: 5 + "px"
}).append(closeBtn).append(content);
// Append it to active page
$.mobile.pageContainer.append(popup);
// Create it and add listener to delete it once it's closed
// open it
$("[data-role=popup]").popup({
dismissible: false,
history: false,
theme: "b",
/* or a */
positionTo: "window",
overlayTheme: "b",
/* "b" is recommended for overlay */
transition: "pop",
beforeposition: function () {
$.mobile.pageContainer.pagecontainer("getActivePage")
.addClass("blur-filter");
},
afterclose: function () {
$(this).remove();
$(".blur-filter").removeClass("blur-filter");
},
afteropen: function () {
/* do something */
}
}).popup("open");
});
});
Like this?:
$(".about").on("click", function () {
if (var1!=2) return;
...(the rest of the function)

JQuery Toggle Between multiple divs

I'm trying to toggle between divs so that when an tag is clicked a div will show.
When another a tag is clicked, the div will replace the div shown.
This is what I did.
HTML:
a<br>
b<br>
c<br>
d<br>
<div id="slidingDiv">a</div>
<div id="slidingDiv_2">a</div>
<div id="slidingDiv_3">a</div>
<div id="slidingDiv_4">a</div>
JQUERY:
function ($) {
$.fn.showHide = function (options) {
//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide'
};
var options = $.extend(defaults, options);
$(this).click(function () {
var toggleDiv;
var $divA = $('#slidingDiv'),
$divB = $('#slidingDiv_2'),
$divC = $('#slidingDiv_3'),
$divD = $('#slidingDiv_4'),
$divE = $('#slidingDiv_5'),
$divF = $('#slidingDiv_6'),
$divG = $('#slidingDiv_7'),
$divH = $('#slidingDiv_8'),
$divI = $('#slidingDiv_9');
if( $divA.is( ':visible' ) ){
$divA.hide();
}
if( $divB.is( ':visible' ) ){
$divB.hide();
}
if( $divC.is( ':visible' ) ){
$divC.hide();
}
if( $divD.is( ':visible' ) ){
$divD.hide();
}
if( $divE.is( ':visible' ) ){
$divE.hide();
}
if( $divF.is( ':visible' ) ){
$divF.hide();
}
if( $divG.is( ':visible' ) ){
$divG.hide();
}
if( $divH.is( ':visible' ) ){
$divH.hide();
}
if( $divI.is( ':visible' ) ){
$divI.hide();
}
// this reads the rel attribute of the button to determine which div id to toggle
toggleDiv = $(this).attr('rel');
$('.toggleDiv').slideUp(options.speed, options.easing);
// this var stores which button you've clicked
var toggleClick = $(this);
var toggleDiv = $(this).attr('rel');
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function() {
// this only fires once the animation is completed
// if(options.changeText==0){
//$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
//}
});
return false;
});
};
})(jQuery);
This currently works, but I know that this can be done better instead of using the if statement.
Thanks
Here we go: http://jsfiddle.net/fqK36/5/
Your whole function becomes:
$.fn.showHide = function (options) {
//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide',
slideDiv: '.slide-div'
};
var options = $.extend(defaults, options);
return this.each(function () {
$(this).click(function () {
$(options.slideDiv).hide();
// this var stores which button you've clicked
var toggleClick = $(this),
toggleDiv = $(this).data('slide-id');
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function () {
// this only fires once the animation is completed
// if(options.changeText==0){
//$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
//}
});
});
});
};
Then you can use it like this:
$('a').showHide({'slideDiv' : '.slide-div'});
The slideDiv option can be a custom selector you're using can the divs you wish to slide.
All slides are assigned a class which means you can hide them all at once. Then you can show the targeted div by getting the clicked link's data-slide-id attribute.
Generally, I do this by creating a hidden class. When you go to switch to a new div, you can do something like this:
$(this).click(function(){
$(this).removeClass('hidden')
$('div:not(#' + $(this).attr('id') + ')').addClass('hidden')
});
This uses the not selector to find everything but your current item. Sans animation, this is the simple way to do it. You can also grab whatever is not hidden by using $('div:not(.hidden)') and then run your toggle on everything in that selector.
$(this).click(function(){
if($(this).hasClass('hidden'){
$(this).show()
$(this).removeClass('hidden')
}
$('div:not(#' + $(this).attr('id') + ') :not(.hidden.)')
.hide().addClass('hidden')
});
Might help clean things up a bit.

javascript 'this' issue: programmatically hide jQuery spotlight

I'm trying to augment the (very nice) jQuery Spotlight plugin so that I can programmatically invoke the "hide" behavior.
I've moved the related code into a hide() function, and it works fine when invoked from within spotlight itself. But when I try to invoke it from outside of spotlight nothing happens. I've checked that spotlight.hide is in fact defined to type function, but invoking it seemingly does nothing.
(function($) {
$.fn.spotlight = function(options) {
var hide = function() {
alert('hiding...'); /* never gets invoked when called from outside spotlight */
if(settings.animate){
spotlight.animate({opacity: 0}, settings.speed, settings.easing, function(){
if(currentPos == 'static') element.css('position', 'static');
element.css('z-index', '1');
$(this).remove();
// Trigger the onHide callback
settings.onHide.call(this);
});
} else {
spotlight.css('opacity', '0');
if(currentPos == 'static') element.css('position', 'static');
element.css('z-index', '1');
$(this).remove();
// Trigger the onHide callback
settings.onHide.call(this);
}
};
// Default settings
settings = $.extend({}, {
opacity: .5,
speed: 400,
color: '#333',
animate: true,
easing: '',
exitEvent: 'click',
onShow: function(){},
onHide: function(){}
}, options);
// Do a compatibility check
if(!jQuery.support.opacity) return false;
if($('#spotlight').size() == 0){
// Add the overlay div
$('body').append('<div id="spotlight"></div>');
// Get our elements
var element = $(this);
var spotlight = $('#spotlight');
// Set the CSS styles
spotlight.css({
'position':'fixed',
'background':settings.color,
'opacity':'0',
'top':'0px',
'left':'0px',
'height':'100%',
'width':'100%',
'z-index':'9998'
});
// Set element CSS
var currentPos = element.css('position');
if(currentPos == 'static'){
element.css({'position':'relative', 'z-index':'9999'});
} else {
element.css('z-index', '9999');
}
// Fade in the spotlight
if(settings.animate){
spotlight.animate({opacity: settings.opacity}, settings.speed, settings.easing, function(){
// Trigger the onShow callback
settings.onShow.call(this);
});
} else {
spotlight.css('opacity', settings.opacity);
// Trigger the onShow callback
settings.onShow.call(this);
}
// Set up click to close
spotlight.live(settings.exitEvent, hide);
}
// Returns the jQuery object to allow for chainability.
return this;
};
})(jQuery);
I install it with:
var spotlight = $('#media-fragment').spotlight({
opacity: .5,
speed: 400,
color: '#333',
animate: false,
easing: '',
exitEvent: 'click',
onShow: function(){},
onHide: function(){}
});
And then to hide it I do:
spotlight.hide();
I'm pretty sure that there is a scope or this issue involved.
Update: full solution at https://gist.github.com/2910643.
Try changing:
var hide = function() {
to:
this.hide = function() {
var defines the scope of the function or variable within the parent scope, i.e. it's essentially protected. this on the otherhand will explicitly set it on the parent object, prototype, and make it publicly accessible.

Filterable Portfolio Hashtag

I'm working with a filterable Portfolio. I've got a little problem with the links to filter the portfolio.
When I click on the buttons, it filters the portfolio correctly, but after that it connects automatically to the a site like xy.com/#myfilter and trying to open it.
Maybe you have an idea how to disable this?
LINK SAMPLE:
Design
THE JS-FILE IS THE FOLLOWING:
(function($) {
$.fn.filterable = function(settings) {
settings = $.extend({
useHash : true,
animationSpeed : 500,
show : { width: 'show', opacity: 'show' },
hide : { width: 'hide', opacity: 'hide' },
useTags : true,
tagSelector : '#portfolio-filter a',
selectedTagClass : 'current',
allTag : 'all'
}, settings);
return $(this).each(function(){
/* FILTER: select a tag and filter */
$(this).bind("filter", function( e, tagToShow ){
if(settings.useTags){
$(settings.tagSelector)
.removeClass(settings.selectedTagClass);
$(settings.tagSelector + '[href=' + tagToShow + ']')
.addClass(settings.selectedTagClass);
}
$(this).trigger("filterportfolio", [ tagToShow.substr(1) ]);
});
/* FILTERPORTFOLIO: pass in a class to show, all others will be hidden */
$(this).bind("filterportfolio", function( e, classToShow ){
if(classToShow == settings.allTag){
$(this).trigger("show");
}else{
$(this).trigger("show", [ '.' + classToShow ] );
$(this).trigger("hide", [ ':not(.' + classToShow + ')' ] );
}
if(settings.useHash){
location.hash = '#' + classToShow;
}
});
/* SHOW: show a single class*/
$(this).bind("show", function( e, selectorToShow ){
$(this)
.children(selectorToShow)
.animate(settings.show, settings.animationSpeed);
});
/* SHOW: hide a single class*/
$(this).bind("hide", function( e, selectorToHide ){
$(this)
.children(selectorToHide)
.animate(settings.hide, settings.animationSpeed);
});
/* ============ Check URL Hash ====================*/
if(settings.useHash){
if(location.hash != '') {
$(this).trigger("filter", [ location.hash ]);
}else{
$(this).trigger("filter", [ '#' + settings.allTag ]);
}
/* ============ Setup Tags ====================*/
if(settings.useTags){
$(settings.tagSelector).click(function(){
$('#portfolio-list').trigger("filter", [ $(this).attr('href') ]);
$(settings.tagSelector).removeClass('current');
$(this).addClass('current');
});
}
});
}
})(jQuery);
$(document).ready(function(){
$('#portfolio-list').filterable();
});
Could it also be, that I have a problem with my search friendly URLS?
Thanks a lot for every help.
Best regards.
You need to make some adjustments to the click event:
At your current click function:
$(settings.tagSelector).click(function(){
$('#portfolio-list').trigger("filter", [ $(this).attr('href') ]);
$(settings.tagSelector).removeClass('current');
$(this).addClass('current');
});
Change it to:
$(settings.tagSelector).click(function(event){
$('#portfolio-list').trigger("filter", [ $(this).attr('href') ]);
$(settings.tagSelector).removeClass('current');
$(this).addClass('current');
// push the hash into the url
location.hash = $(this).attr('href');
// stop the regular href
event.preventDefault();
});
This allows you to place the hash value into the URL, but prevent the browser from actually reloading the page with that hash when the user clicks the link!
Read more about it:
event.preventDefault() | location.hash

jCarousel, Counter, how?

Im using this plugin: http://sorgalla.com/projects/jcarousel/
I want there do be a counter that can display:
1 of 4
When clicking the next button, it should say:
2 of 4 and so on...
The script is the default initialization:
<script type="text/javascript">
jQuery('#mycarousel').jcarousel();
</script>
However, haven't seen an example of this in the documentation ? So any help would be appreciated...
Thx
Uses something like this:
$(document).ready(function () {
var nmrElements = $('#mycarousel').children('li').length;
$('#mycarousel').jcarousel({
scroll: 1,
itemLoadCallback: function (instance, controlElement) {
if (instance.first != undefined) {
$('#label').html(instance.first + ' of ' + nmrElements);
}
}
});
});
Should be kind of impossible to realize with what is given there. Since it's just a ul that is hidden behind a div and only that ul element gets scrolled when you click on a button.
There is no semantic property that you could use to identify the currently visible object.
jQuery(document).ready(
function() {
function mycarousel_initCallback(carousel) {
// alert(this.mycarousel);
// alert("inside carousel");
// Disable autoscrolling if
// the user clicks the prev
// or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if
// the user moves with the
// cursor over the clip.
carousel.clip.hover(
function() {
carousel.stopAuto();
},
function() {
carousel.startAuto();
});
}
jQuery('#mycarousel').jcarousel({
auto : 2,
scroll : 1,
wrap : 'last',
initCallback : mycarousel_initCallback,
itemFallbackDimension: 300,
//size: mycarousel_itemList.length,
itemFirstInCallback:mycarousel_itemFirstInCallback
// itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback}
});
});
$(".jcarousel-prev").after("<div><h6 id=\"myHeader\" style=\"color:#FFFFFF;width:68%; top:85%; left:40px;font-size:100%; display: block;\" class=\"counterL\"></h6></div>");
function display(s) {
$('#myHeader').html(s);
};
function mycarousel_itemFirstInCallback(carousel, item, idx, state) {
display( idx +"<i> of </i>"+ $("#mycarousel li").length);
};
You can assign id-s to each image in carousel. And add some javascript to write the number from id of that images.
And also:
<script type="text/javascript">
function Callback_function(elem) {
document.write(this.id);
}
jQuery('#mycarousel').jcarousel({
scroll: 1,
initCallback: Callback_function,
});
</script>
it is simple, just open the following file:
sites\all\modules\jcarousel\js\jcarousel.js
and in line 146:
carousel.pageCount = Math.ceil(itemCount / carousel.pageSize);
change it to this: carousel.pageCount = Math.ceil(itemCount / 1);
it will work superb :D

Categories

Resources