I am using intro.js to set up a tour of my website, and I would like to set the default placement of the tooltip (when not attached to any element) near the top of the page instead of the vertical center.
It doesn't look like there is an option to set it directly, but is there a way to do it changing the CSS? (or by editing the source, although that's kind of a last resort).
I needed to do something similar. Not elegant, but it works.
In the API documentation, there's an onafterchange method. Give it a callback function and it will get fired each time a step is displayed.
If the tooltip has a target element, the callback's argument contains that element. If the tooltip doesn't have an element, the argument contains an element with the class introjsFloatingElement. So, you just need to check for the presence of that class on that element. If it does, you can tweak the styles of the tooltip elements.
var help = introJs();
help.onafterchange(function(targetEl){
targetEl = jQuery(targetEl);
// check if it's a floating tooltip (not attached to an element)
if(targetEl.hasClass('introjsFloatingElement')){
// adjust the position of these elements
jQuery('.introjs-tooltipReferenceLayer').offset({top : 120});
jQuery('.introjs-tooltip').css({
opacity: 1,
display: 'block',
left: '50%',
top: '50%',
'margin-left': '-186px',
'margin-top': '-91px'
});
jQuery('.introjs-helperNumberLayer').css({
opacity: 1,
left: '-204px',
top: '-109px'
});
}
});
// add your steps
// ...
help.start();
Note:
I first tried onbeforechange, but that didn't work. Not sure why.
At first, I tried to adjust the introjs-tooltipReferenceLayer element only, but the nested elements (introjs-helperNumberLayer and introjs-tooltip) were not positioned correctly on first display. I had to inspect those elements on subsequent displays to get the proper stylings.
Tested with intro.js 2.5.0. Element classes aren't part of the api spec, so I don't know how future-proof this solution is.
I looked into the intro.js documentation. you should be able to just add this line of code to your script.
introJs().setOption("tooltipPosition", "top");
Related
I am trying to create a function that sends images back and forth between the two div elements by double clicking on the image . You should then be able to drag pictures freely in the second div element. Then you can double- click the image again to send the image back to its origin div elements. Here the problem arises . When I send back the image it assumes a different style position . How do I get the picture to get its old style position?
Ok, I guess I got what you mean.
After you drag your image around the #dropbox, jQuery adds an inline style to it to preserve its position after you drop it. Something like style="position: relative; right: auto; bottom: auto; left: 73px; top: 52px;". So when you doubleclick, the image is moved to #imagebox still having these positioning styles.
To prevent this, you can just reset these style props in your doubleclick handler like so:
$(e).css({ "top": "auto", "bottom": "auto", "left": "auto", "right": "auto" });
Here's the demo: JSFiddle
You don't need to detach if you're also using appendTo. DOM nodes can only have one parent, so moving them to a new parent necessarily also removes their old one (so they can't exist in two places at once)
As for the image position, your appendTo call appends an image to its new parent, so it'll always end up being the last element in the child set. If you don't want that, then you should not use appendTo, but use code that inserts the image in its original position, whatever that was before you sent it over (so remember to record the image position somewhere if you care about preserving it)
I am building a site with a right aligned nav.
The last menu item drop down runs off the page as it is positioned absolute to the left of its parent.
I am trying to create a solution for my menu below.
jsfiddle -http://jsfiddle.net/ashconnolly/6gjVr/
I cannot hardcode the pos left -xx style, because the width of the last menu item will vary (due to the text inside it), hence my use of js.
I've nearly cracked it, but i just need to apply a variable as a position absolute left style only on hover.
There maybe a better css only solution, but i couldn't find one.
Any help is appreciated! :D
Edit: updated explanation.
You have already calculated the left of your last menu, why didn't you use?
$(document).ready(function () {
var menuitemwidth = document.getElementById("last-menu-item").offsetWidth;
var menuitemdropdownwidth = document.getElementById("last-menu-item-drop-down").offsetWidth;
//alert(menuitemwidth);
var leftval = menuitemdropdownwidth - menuitemwidth;
//alert(leftval);
$("#last-menu-item").mouseenter(function(){
$("#last-menu-item-drop-down").css({'position':'absolute','left':'-'+leftval+'px','display':'block'});
});
$("#last-menu-item").mouseleave(function(){
$("#last-menu-item-drop-down").css({'display':'none'});
});
});
Check Here
As you probably already know, it is bad practice to "print" javascript values using a framework. It will pretty soon become unmaintainable.
But you can separate (element) logic from (element) presentation, i.e. print/format html elements in your templates by setting a data-attribute like this in your html:
<ul id="last-menu-item-drop-down" data-pos="left" data-val="-133px">
Then change your javascript to:
// cache last element, no need to jquery search on every hover
var last_elem = $("#last-menu-item-drop-down");
// set position and alignment
last_elem.css('position','absolute').css(last_elem.data("pos"), last_elem.data("val"));
// set dropdown meny visibility to hidden (do it by css)
last_elem.hide()
// show/hide
// ...
You can also do the offset calculations in javascript and only specify position in your templates
Fiddle at: http://jsfiddle.net/cYsp6/7/
I cant Make with css
$("#last-menu-item").mouseenter(function(){
var a=-(parseInt($("#last-menu-item-drop-down").css('width'))-parseInt($("#last-menu-item").css('width')));
$("#last-menu-item-drop-down").css('position','absolute').css('left',a);
$("#last-menu-item-drop-down").show();
});
$("#last-menu-item").mouseleave(function(){
$("#last-menu-item-drop-down").hide();
});
Updated Fiddle:
Fiddle
I'm using Isotope (http://isotope.metafizzy.co). Testing the reLayout method by using the example provided here (http://isotope.metafizzy.co/demos/relayout.html), copied the css, js to (http://punkbit.com/webzine/isotope.html) but when I click in the first element all other elements go to the first column. I wonder why this happens ?
If we do the same in the official example, it works properly, apparently!
I'd like to toggle a class in the first element and by doing that, having the other elements take the vertical space and positioned properly. I tried to change the width of the container, etc but no success!
I've also got the same issue happening with Masonry:
http://codepen.io/anon/pen/BKAdH
If clicking in the first element, it won't work. All elements will be placed in the first column.
Also tried different layout modes etc without success
Sorry,
I've found the answer:
http://punkbit.com/webzine/isotope2.html
The property "columnWidth" needs to be set.
For Masonry:
http://codepen.io/helderoliveira/pen/gwvjA
In order to verify if an element is aligned center, I was trying to get CSS property/values of the element. I am entirely a newbie to javascript, so I would like to seek your help in fetching the css property in order to verify text alignment using javascript.
Take a look at jQuery offset()
Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.
The .offset() method allows us to retrieve the current position of an element relative to the document. Contrast this with .position(), which retrieves the current position relative to the offset parent. When positioning a new element on top of an existing one for global manipulation (in particular, for implementing drag-and-drop), .offset() is the more useful.
Combined with documentation found
how to get right offset of an element? - jQuery
To get the offset values from jquery
Get bottom and right position of an element
You'll be able to achieve your goal of verifying if an element is aligned (postitionned) center.
For your other point of verify text alignment using javascript :
if ($('#yourElement').css('text-align') == 'center')
{
// true
}
Carry on
If you mean vertical alignment - you can't, no such thing exists outside tables.
If you want to get the horizontal alignment you can use 'text-align'.
document.getElementById('idOfElement').style.textAlign will return the alignment 'left', 'right', 'center', 'justify' etc.
Its even simpler with jQuery:
$('#idOfElement').css('text-align'); will return the same.
but for jQuery to work you need to include the script here
I have an html5 page with a dropdown menu using mootools. It's working if I use the hide() and show() functions. But, I want the menu's to slide in and out, like this:
var m = e.getElement(".dropdown-menu, .sidebar-dropdown-menu");
if (e.hasClass('active')) {
m.hide();
e.removeClass('active');
} else {
m.show();
e.addClass('active');
}
Instead of hide and show I want slideIn and slideOut:
var m = new Fx.Slide(e.getElement(".dropdown-menu, .sidebar-dropdown-menu"));
if (e.hasClass('active')) {
m.slideOut();
e.removeClass('active');
} else {
m.slideIn();
e.addClass('active');
}
Working example: http://jsfiddle.net/wzzeZ/
Not working: http://jsfiddle.net/37V53/1/
It's not throwing errors; where do I look to fix it?
There are a few things going on here.
First of all, you're not seeing any errors because there are none. If you litter the code with console.log() calls, they all run.
It's a style issue that's preventing the menus from displaying.
The FX.Slide Class in Mootools doesn't seem to explicitly set the 'display' property of the element you're sliding to block. You still need to call .show() for it to work.
Next, if you check out the docs for FX.Slide, you'll notice that it creates a wrapper element to do the slide effect (the container is needed for the height animation, overflow: hidden, etc.)
Unfortunately that seems to be messing with the positioning of the menu, which is positioned relatively to its containing element - but the containing element has height and overflow: hidden styles which then hide the menu (not to mention, even if you could see it, it's in the right place).
To see what I'm talking about check out this updated Fiddle here: http://jsfiddle.net/37V53/2/
If you run that in Firefox with Firebug, and you hover your cursor over the element that's logged to the console, you'll see Firebug's blue hilight appearing where your element actually is being displayed - in the middle of the window, and hidden from view.
This is a combination of assumptions made in the MooTools Classes you're using working against each other; You'll probably be better off writing your own (simple) slide-out script using FX.Tween rather than FX.Slide.
I created a sample of how to do this based on the original Fiddle (that works) - http://jsfiddle.net/LkLgk/
Trick is to show the element to the browser but not the user (by setting visibility: hidden before display: block, grab the height, set height to 1px, visibility back to visible, then tween the height to the previously detected value.
Hope that points you in the right direction; remember, when in doubt, console.log everything!