I'm using the very interesting javascript library intro.js.
However, in my application, the highligted area becomes almost completely white.
I'm guessing that this is some CSS conflict, but what can I do to determine the cause of this problem?
Extracted from issue #109 (https://github.com/usablica/intro.js/issues/109):
.introjs-helperLayer {
background: transparent;
}
.introjs-overlay {
opacity: 0 !important;
}
.introjs-helperLayer:before {
opacity: 0;
content: '';
position: fixed;
width: inherit;
height: inherit;
border-radius: 0.5em;
box-shadow: 0 0 0 1000em rgba(0,0,0, .7);
opacity: 1;
}
.introjs-helperLayer:after {
content: '';
left: 0;
right: 0;
top: 0;
bottom: 0;
position: fixed;
z-index: 1000;
}
This will solve your problem. Hope it helps as it did for me! Shout to #weili1977 and #exoJSON who provided the answer in GitHub.
The problem can be fixed by setting absolute position for parent element:
.introjs-fixParent {
position: absolute !important;
}
This is common for users using table row element. I solve mine by adding these lines to css.
.introjs-relativePosition > td { position: relative; }
.introjs-showElement > td { z-index: 9999999 !important; }
I managed to get a useable result with this:
.introjs-helperLayer {
mix-blend-mode: overlay !important;
}
I set the target element position to absolute (in corresponding CSS) and it works now!
see here - http://prntscr.com/1dl0db
I didn't see any jsFiddle or any online example of your problem but I try to answer your question in this way:
It's seems you're using another UI library like ExtJs or something,
make sure you don't have any CSS conflicts.
Try to change
data-intro and data-step in another element, for example if now
you have the data-intro and data-step in the form element,
change it to an upper element or a div.
In the Introjs.css, setting the z-index to 1 for the introjs-helperlayer class fixes this issue. However, I do not know the full implication of this change.
Are you trying to highlight a Table Row ()? If so I experienced this problem too. Someone posted a fix in the github issues section: https://github.com/usablica/intro.js/issues/146
Related
I got my page working how I wanted it (based on the previous question I asked). However, when I display the timeline (default is display:none) it creates a large gap of empty space beneath it. How can I remove this empty space? I just want the timeline to replace the image when it is clicked and vice-versa.
Here is my code pen
I don't know what code to include here.
You are using position:relative and giving css top value. That is causing this issue. I have done some change in css with position and top values. That works as you require.
#timeline{
position:absolute;
background-color:beige;
/*top:-829px;*/
top:210px;
width: 755px;
height: 827px;
margin-left: 180px;
}
Hope this resolves your issue.
change the css,
#main-image-div{
position: relative;
margin: 0 auto;
width: 750px;
height: 400px;
}
#main-image-div img{
max-width: 100%;
}
#timeline{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
Hope this will solve the issue.
I created a nicer toggle effect and i think that's what you wanted.
http://codepen.io/anon/pen/dvdLpY
var img = $('img');
var list = $('.list');
list.hide();
img.click(function(){
$(this).fadeToggle(function(){
list.fadeToggle();
});
});
list.click(function(){
$(this).fadeToggle(function(){
img.fadeToggle();
});
});
I am trying to change a class of a element and my view gets distorted?
How do I solve it.
I have created the fiddle for the same Jsfiddle
Issue Description:
I have a custom textbox. I have a reference value at top left corner of it.
If I enter value greater or less than the reference value , I show a box asking for reason.
It works perfectly fine, but when I try to add some extra functionality , like changing the color of the div in right top corner of textbox by changing the class of the div , the view is distorted and not as it was expected.
In the fiddle I can commented the code in javascript section at line 73,74,77,78
function changeClassOfCommentToRed(divId){
//$("#"+divId).removeClass();
//$("#"+divId).addClass("commentCornerRed");
}
function changeClassOfCommentToGreen(divId){
//$("#"+divId).removeClass();
//$("#"+divId).addClass("commentCornerGreen");
}
if I uncomment the above line for extra functionality , I get a distorted view as in following image
You only need to remove the classes you want to change:
function changeClassOfCommentToRed(divId){
$("#"+divId).removeClass("commentCornerGreen commentCornerRed");
$("#"+divId).addClass("commentCornerRed");
}
function changeClassOfCommentToGreen(divId){
$("#"+divId).removeClass("commentCornerGreen commentCornerRed");
$("#"+divId).addClass("commentCornerGreen");
}
And in your CSS you need to address your arrow pseudo element not the element itself:
.commentCornerRed:after {
...
}
.commentCornerGreen:after {
...
}
With this changes, only the color of the arrows is changed, not the color of the box.
Try to specify which class to remove in your removeClass :
removeClass('classToRemove');
If I get what question correctly. I think this commentCornerRed class got width: 0 and height: 0. you can have the same properties as .arrow_box
.commentCornerRed {
position: absolute;
width: 0;
height: 0;
display: block;
border-style: solid;
border-width: 0 10px 10px 0;
border-color: transparent #ff0000 transparent transparent;
padding-left: 36px;
cursor: pointer;
}
You can make it like this.
.commentCornerRed {
position: absolute;
background: #bcb476;
border: 1px solid #08090a;
z-index: 1;
margin-left: 50px;
margin-top: -40px;
}
I made a silly mistake. I was passing the wrong id for class name. Got the desired result by passing the right id at line 85 and 87 in javascript section.
changing from
function handleCommentBox(event){
if(checkIfReasonSelected(returnIdPrefix(event)+"r1")){
changeClassOfCommentToGreen(returnIdPrefix(event)+"r1");
}else{
changeClassOfCommentToRed(returnIdPrefix(event)+"r1");
}
}
to
function handleCommentBox(event){
if(checkIfReasonSelected(returnIdPrefix(event)+"r1")){
changeClassOfCommentToGreen(returnIdPrefix(event)+"c1");
}else{
changeClassOfCommentToRed(returnIdPrefix(event)+"c1");
}
}
solved the problem. Thanks people for helping.
I'm trying to scroll an hidden element before I show it. This is the code i'm working with:
<div class="main">
<div class="bg">
</div>
</div>
.main {
display:none;
position:abolsute;
width:250px;height:250px;
overflow:scroll;
}
.bg {
background: blue url(http://defaulttester.com/img/bg-landing-mario.jpg);
width:1200px;
height:800px;
}
$(".main").scrollTop($(".bg").height()/2);
$(".main").scrollLeft($(".bg").width()/2);
IT works fine if its showing but if its display:hidden it will simple not work. Is there anyway to avoid this and make it work?
JSFiddle: http://jsfiddle.net/dpjzJ/
Use visibility: hidden; or some class like this instead:
.hide {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
Or this (from Boilerplate):
.visuallyhidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
Something with display: none; has no location on the page, as you probably knew.
Check out this article on the subject.
If your goal is to just set scrollLeft and scrollTop to 0(since that was my goal), one very hacky solution is to follow these steps:
Get a reference to the element you want to reset.
Get a reference to the element's parent.
Remove the element from the parent.
Append the element back to the parent.
scrollTop and scrollLeft will now be set back to 0 even though they are invisible.
function resetScroll(element) {
element.parentElement.replaceChild(element,element)
}
This will set both scrollTop and scrollLeft to 0 even if display none.
Example use:
resetScroll(document.getElementById("my_scroll"))
It's not ideal, but the way I solved this is to add a one-time IntersectionObserver that triggers the first time the element becomes visible. Here's a function to add a callback for when an element first becomes visible:
function onVisible(element, callback) {
new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if(entry.intersectionRatio > 0) {
callback(element);
observer.disconnect();
}
});
}).observe(element);
}
And use it like this:
let myElement = document.querySelector("#myElement");
// When the element first becomes visible, scroll it to 500px:
onVisible(myElement, el=>el.scrollTop=500);
Example: https://jsbin.com/gigumewemo/edit?html,output
I am building my website with inspecting elements option to inspect each elements separately like firebug. I like to built the styles like newer version of Firefox which will blur all the elements except the selected element. Any idea on how to do this? The example of the needed output is given below.
EDIT : Please note that, here the element i need to select may have lower DOM hierarchy than the other elements. For eg. i may need to gray out the body container and if i select some internal elements which should not have the grey effect.
Something like this:
http://jsfiddle.net/lollero/T7PyK/
Clicking any element will show overlay and isolate the element.
Clicking overlay will undo that.
JS:
$('*').on("click", function( e ) {
e.stopPropagation();
var self = $(this),
overlay = $('#overlay');
if ( !self.hasClass('active') ) {
if ( self.is(':not(#overlay)') ) {
self.addClass('active');
}
overlay.fadeTo(400, 0.7);
}
if ( self.hasClass('active') ) {
overlay.on("click", function() {
overlay.fadeOut(400, function() {
self.removeClass('active');
});
});
}
});
CSS:
#overlay {
display: none;
background: #000;
position: fixed;
z-index: 100;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
.active {
position: relative !important;
z-index: 101 !important;
background: #fff;
box-shadow: 0px 0px 50px #111;
}
HTML:
<div id="overlay"></div>
Put a div with a background color of black, 100% width/height, absolute positioning and left/top of 0, and an opacity of somewhere between 0 and 1 (eg. 0.5). That gives you the "gray out the page effect".
Then, put the text that you don't want grayed out in a separate div that's higher in the DOM hierarchy (or at the same level but with a higher z-index), so that it won't get covered up by your graying-out div.
You can use jQuery overlay effect along with some CSS..
hit this link: http://tympanus.net/codrops/2009/12/03/css-and-jquery-tutorial-overlay-with-slide-out-box/
Sorry for the unclear title, I can't formulate a better concise explanation.
I have a list, and within each list item is a link which opens an othersiwse hidden <div> using the following jQuery:
$('a.showreranks').click(function () {
$('body').append('<div class="overlay"></div>');
$('#rerank_details').slideToggle(300);
return false;
});
rerank_details being the id of the div and showreranks being the class of all the links.
This is the CSS of the div:
#rerank_details {
display: none;
background: white;
position: absolute;
border: 1px solid black;
border-radius: 6px;
width: 305px;
padding: 15px;
overflow: hidden;
top: 50%;
left: 50%;
height: 200x;
text-shadow: none;
z-index: 50;
}
So, you see, the opened div is centered when it's opened. It is then populated with info relating to the list item that was clicked but you don't need to worry about that. What I need help with is the following - I don't want the div to be centered on the screen. Instead I'd like it to be positioned right below the link that was clicked. Note that there could be a lot of links on the page, one below the other and the vertical distances could be irregular. How do I accomplish this?
I think that this is what you are trying to do:
http://jsfiddle.net/SO_AMK/r7ZDm/
The answer has already been accepted, but perhaps this is a cleaner version. The animations are all fixed.
if it doesn't have to be within the normal flow of the DOM just use absolute positioning and the event object.
function(event){
var box = //get a handle to box
box.style.position = 'aboslute';
box.style.left = event.page.x;
box.style.top = event.page.y;
}