I wrote this plugin but I'm having issues trying to position the tooltip so that it's completely centered above the parent container. I'm currently just calculating the width of the parent container that it's in and finding out where that is by getting it's left position, but it's always not completely centered.
Any ideas?
(function($) {
var toolTip = {
init: function() {
this.each(function() {
var $that = $(this);
// our boolean object to check if it already exists on the page
var $toolSpan = $('<div class="tooltip"><span class="tooltip_arrow"></span></div>');
var preloadImages = function() {
var tempImage = new Image();
tempImage.src = 'http://i.imgur.com/K5ynr.png';
tempImage = null;
};
preloadImages();
$that.mouseover(function() {
var $altText = $that.attr('alt');
var $parentWidth = $that.parent().width();
var $parentPos = $that.parent().position();
var $parentPosY = $parentPos.top;
var $parentPosX = $parentPos.left;
$that.parent().after($toolSpan);
$toolSpan.prepend($altText);
$that.parent().next($toolSpan).css('top', $parentPosY - 30).css('left', $parentPosX).fadeIn();
var $toolSpanWidth = $that.parent().outerWidth();
$that.parent().next('.tooltip').children('.tooltip_arrow').css('left', $toolSpanWidth / 2).fadeIn();
}).mouseout(function() {
$that.parent().next($toolSpan).text('').hide().remove();
});
});
} /* end init */
};
$.fn.toolTip = toolTip.init;
})(jQuery);
http://jsfiddle.net/QH8dy/2/
here you go - centered, all working, code a bit cleaner ...
http://jsfiddle.net/PBpWj/
though it can potentially go off screen if the tip text is too wide.
If you intention is so that the tooltip container is center aligned above the link containers (in this case the wrappers). Try modifying the following line of code:
$that.parent().next($toolSpan)
.css('top', $parentPosY - 30)
.css('left', $parentPosX + ($parentWidth/2) - ($toolSpan.width()/2))
.fadeIn();
See it at the following jsFiddle.
Related
I would like make same parallax banner like here http://gallery.smartadserver.com/mobile-parallax
What I have got is:
https://jsfiddle.net/mx5tfcwj/
var $wrap = $(".wrap");
var $parallax = $(".parallax-container");
function updatePosition() {
var offsetFromWrap = $parallax.offset().top - $wrap.offset().top;
$(".fixed").css({"top": offsetFromWrap * -1});
}
$wrap.scroll(function() {
updatePosition();
});
The problem is you can not see end of the image when you scroll. Can you help me How should I calculate the position?
Can someone spot the mistake in my JS syntax?
function setSize() {
var headerHeight = $('#header-blue:visible').height();
var subHeight = $('.subhead:visible').height();
var totalHeight = headerHeight + subHeight;
console.log(totalHeight);
}
// Set height variables on load
$(document).ready(function () {
setSize();
});
// Set height variables on window resize
$(window).resize(totalHeight);
// Fixed header on scroll
$(function() {
var header = $(".subhead");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= totalHeight) {
header.addClass(" fixed");
} else {
header.removeClass("fixed");
}
});
});
The goal here is to set a class when a scroll position is reached. The scroll position is variable because it depends on the height of 2 div's, which changes on mobile and desktop.
Unfortunately, I am receiving syntax errors saying totalHeight is not defined.
The variable totalHeight is only in the scope of the function setSize(), therefore it cannot be used outside the function. To solve the problem you have to make the variable global such as declaring it before the function:
var totalHeight;
function setSize()
You can also do the following:
var totalHeight = function(){
//code of the function here and make it return the value
}
I'm trying to position the dialog/modal window of CKEditor within my iframe but it seems to want to default to going middle center of my window. In the case of the site I'm working on, the iframe in question is 1000+ px in height, so the modal is way too far down the page and is causing confusion.
Based on this post (ckeditor dialog positioning) I have added the following code to my config file
CKEDITOR.on('dialogDefinition', function(e) {
var dialogName = e.data.name;
var dialogDefinition = e.data.definition;
dialogDefinition.onShow = function() {
var x_pos = this.getPosition().x;
var y_pos = 10;
this.move(x_pos, y_pos); // Top center
};
});
Which works great on initial load, but in the case of a hyperlink in the editor, once you change the "type" (URL, email, etc) it seems that the dialog content refresh also causes a recalculation of the dialog position, which throws it back to the middle center of the window.
So bottom line is I want to make all dialogs stick to the top (maybe 20px offset) and center of my window regardless of the iframe height and have it stay there through a dialog refresh, but not finding much supporting documentation to help with that.
Example of this in action here. Click on the link icon and the dialog appears at the top of the page. Change the "type" from URL to Link and the modal will jump to the middle of the 10000 px height iframe the page is inside of
Further Edit
So the accepted answer worked perfect, but there was still an issue that the hyperlink dialog would now show all fields on initial load, and then once you changed the link type it would remove fields not related to the current selection. So looking further into the documentation, it looks like the correct way to call a dialog is as follows:
CKEDITOR.on('dialogDefinition', function(e) {
var dialogName = e.data.name;
var dialog = e.data.definition.dialog;
dialog.on('show', function () {
var x_pos = this.getPosition().x;
var y_pos = 10;
this.move(x_pos, y_pos); // Top center
this._.moved = 1;
});
});
It looks like the dialog won't try reposition itself if the user has moved it. It tracks this using a variable called moved. You can trick it into thinking it has been moved by setting this variable to 1:
dialogDefinition.onShow = function() {
var x_pos = this.getPosition().x;
var y_pos = 10;
this.move(x_pos, y_pos); // Top center
this._.moved = 1;
};
Note that as per this post, there are negative side-effects to overriding the onShow method that you may want to consider.
Another option (besides the one the user1620220 gave), and an option to re-set the position of the dialog even on layout change is to override the layout function of the dialog:
CKEDITOR.on('dialogDefinition', function(e) {
var dialogName = e.data.name;
var dialogDefinition = e.data.definition;
// Save the old layout function
dialogDefinition.dialog.oldLayout = dialogDefinition.dialog.layout
dialogDefinition.dialog.layout = function() {
// first we need to call the layout function
dialogDefinition.dialog.oldLayout();
// Now we can reposition the way we want:
var x_pos = this.getPosition().x;
var y_pos = 10;
this.move(x_pos, y_pos); // Top center
}
dialogDefinition.onShow = function() {
var x_pos = this.getPosition().x;
var y_pos = 10;
this.move(x_pos, y_pos); // Top center
};
});
I can't figure out of to make scroll, (when a div is clicked), and make it smooth. (like not going straight to the scroll position)
Here's my code:
$('.about-center').click(function() {
var div = document.getElementById('ABOUT');
var pos = div.offsetTop;
$(window).scrollTop(pos);
});
try this one:
$('.about-center').click(function() {
var div = $('#ABOUT');
var pos = div.offset().top;
$('html, body').animate({scrollTop:pos},2000); // will take two seconds to scroll to the element
});
I am developing a website which have a scrolling newsticker in a strip using jquery.li-scroller.1.0.js.
page address is: http://www.designforce.us/demo/ticker/index.html
When we hover the mouse on the newsticker, strip is stop. At this stage i want to show a popup box right under the current li with its text. something i've done and when we hover the mouse pointer over the strip, newsticker stops and box is showing with its text.
PROBLEM:
jquery.li-scroller newsticker have a wrapper with {overflow:hidden} so if i add the popup box withing li then its not showing. Thats why i've coded the popup (.tickPop) withing a seperate space and white some script of jquery document ready. my script is:
$('ul#ticker01 li').each(function(e){
var iClass;
$(this).hover(function(){
iClass = $(this).attr('class');
$(this).css('height',$('tickPop').height()+30)
var offset = $(this).offset();
var left = offset.left;
var top = offset.top+20;
var iWidth = $(this).width();
var sText = $(this).children().html();
$(this).css('background','#f6f4f4');
$('.tickPop').css('left',left);
$('.tickPop').css('top',top);
$('.tickPop').css('width',iWidth);
$('.tickPop').css('display','block');
$('.tickPop').text(sText);
}, function(){
$('.tickPop').mouseleave(function(){
bHovering = false;
$(this).css('display','none');
});
$(this).css('background','transparent');
//$('.tickPop').css('display','none');
if(iClass == 'Yellow')
$(this).css('background','url(images/icon-yellow.jpg) left center no-repeat');
else
$(this).css('background','url(images/icon-white.jpg) left center no-repeat');
});
});
popup box called $('.tickPop') is hidden by default and when user hover on newsticker then jquery function set the attribute $('.tickPop').css('display','block') and it is visible.
Now problem is that as we move the mouse pointer over the popup box then newsticker is again start scrolling while i want when we mouseleave from the popup box then newsticker should start.
Dear Experts, Please advise..............?
Looking forward for a kind response.
Regards
You should modify jquery li-scroller sources.
watch this code (from li-scroller sources):
function scrollnews(spazio, tempo){
$strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
}
scrollnews(totalTravel, defTiming);
// $strip = $(this) so it triggers when you're hover a news
$strip.hover(function(){
jQuery(this).stop();
},
function(){
var offset = jQuery(this).offset();
var residualSpace = offset.left + stripWidth;
var residualTime = residualSpace/settings.travelocity;
scrollnews(residualSpace, residualTime);
});
You should add something like:
var popup = jQuery('.tickPop');
popup.hover(function(){
$strip.stop();
},
function(){
var offset = jQuery(this).offset();
var residualSpace = offset.left + stripWidth;
var residualTime = residualSpace/settings.travelocity;
scrollnews(residualSpace, residualTime);
});
I didn't test that code but should work....
P.S. Sorry for the indentation