I'm using bootstrap for UI Design. I have configured updated IntroJS to my site.
Now it works fine with other elements but giving problem with Dropdown Menu Elements.
hey man make sure your jquery link placed first then write javascript link
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Check the Console. Most likely jQuery was not referenced, in which case you need to include it before IntroJS:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
A bit late to the party but for anyone googling:
The dropdown menu UL has introjs-fixParent added to it, for me this caused my menu to appear behind other elements on the page, so I fixed that by doing a z-index: 1000!important on the UL. Intro.js adds introjs-showElement on the element to be shown, which has a really high z-index. The problem here is the parents z-index is lower than the mask so any children are always behind the mask.
My fix was to remove the z-index: 1000!important on the UL and put the other elements behind my menu.
I've had the same issue and I manage to resolve it, I posted an explanation there:
use intro.js on bootstrap dropdown element
Hope these help.
EDIT: Added snippet of code and explanation from link
I found a workaround, it's quite ugly, but does the job:
$scope.ChangeEvent = function (e) {
if (e.id === 'step2') {
document.getElementById('step1').click();
setTimeout(function () {
document.getElementById('step2').style.display = 'block';
}, 500);
}
console.log("Change Event called");
};
I set the display attribute to block just after the click event I added in the change event
When clicking executing the click on the element 1, I noticed that jquery set the state of the style.display of the element 2 to '', so I wait a bit after clicking in order to set it back to 'block', I know it's ugly, but I didn't find anything better at the time
Related
I am using bootstrap datepicker on a website, It is also styled to be sticky by giving its parent a fixed position, Its working fine normally but on testing it on Ipad and Iphone (not tested on andriod devices yet), when I scroll down and try to touch the datepicker to open it , it scrolls back to the top of the page, how can I fix this issue?
Similar problem arises when I am using a custom dropdown Selectric
I have created a simple striped down version of the problem here. Note that the problem wont replicate on emulator but on an actual mobile device or ipad.
I also faced same issue and resolved it as below solution , you can try it.
datepicker has beforeShow property where you have to set calendar position.
$("#EffectiveDateAccept").datepicker({
changeMonth: true,
changeYear: true,
// minDate: 0,
dateFormat: 'mm/dd/yy',
beforeShow: function (input, inst) {
var calendar = inst.dpDiv;
setTimeout(function () {
calendar.position({
my: 'center bottom',
at: 'top',
collision: 'none',
of: input
});
}, 1);
}
});
Try this
.dropdown-menu{
position: fixed!important
}
This issue is found unrelated to specific environment (not iOS only) and has a solution as follows:
You should find out which datepicker div class sets datepicker actually from hidden to visible (which of them change upon successful show and hide event).
Add to your css for that class (here modal-open) the missing show command:
body.modal-open {
overflow: visible;
}
Now the scroll should stay in place.
Example refers to html like:
<body>
<div class="modal-open">
Datepicker
</div>
</body>
Source:
Bootstrap modal: background jumps to top on toggle
PS. My source has also 18 other options, if this seems too hacky.
I have made this current one once, worked like charm and was not so tricky to do.
just add This CSS code to your site it will fix that issue.
.element{
position: sticky!important;
}
If you view it in Inspect Element, it's creating a separate DIV in HTML which has position absolute. Just change that position to sticky. That's why that happens. See in the image.
You can do this by adding this line of CSS code:
.dropdown-menu {
position: sticky;
}
Hope that will help you
As a start, have you looked thru the GH repo's issues for something matching your description?
This link specifically sounds promising:
https://github.com/uxsolutions/bootstrap-datepicker/issues/1866
I think what might be occurring is that your datepicker is set to absolute of the body, not the parent you are setting as "fixed".
So when you click to open the datepicker, your mobile device is scrolling you to the active element (in this case, the datepicker at the top, set to absolute on the parent).
Also there seems to be some default mobile behavior related to scrolling:
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
Perhaps setting the following will help:
-webkit-overflow-scrolling: auto; /* Stops scrolling immediately */
The following link provides more context on this scrolling behavior:
https://weblog.west-wind.com/posts/2015/Jun/05/IPad-Scroll-Issues-with-Fixed-Content
I have a pop up window for signing up for our mailing list. I need it to overlay everything. Currently the css menu sits on top of the pop up. The menu is 9999 on the z index. Where in the pop up code (see below) do I add z index info.
This is the code from Mail Chimp:
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
<script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L)
{
L.start({"baseUrl":"mc.us9.list-manage.com","uuid":"56eb37539d1e217bbc3a2ea22","lid":"d8e88803f2"})
})
</script>
You really need to post your HTML and CSS to get a definitive answer on this, but you can try the following:
Make sure your popup overlay has a classname or ID. For example:
<div id-"mailing-list-overlay">
mailing list form goes here...
</div>
Now try adding this CSS rule somewhere in your markup:
<style>
#mailing-list-overlay {
z-index: 10000 !important;
}
</style>
If that works, great! Now try removing the '!important' and see if that works. (Make sure your browser cache is cleared when you reload.) If that works, then try moving the css rule to the proper stylesheet.
If none of these things work, it's possible you have a different issue -- for example, the overlay might not be in the same layer stack as the content you want to overlay. But that would impossible to troubleshoot without being able to see a more complete picture of the HTML and CSS. I can help you if you post your code on pastebin or jsfiddle.
Here is a Fiddle, to show my current state: (attempting onClick())
http://jsfiddle.net/D5N4f/7/
$('.associationLinks').click(function () {
alert("I've been clicked"); //test to see if click is working
//$(this).next().toggle();
$(this.content).toggle();
//$(this .content').css("display", "block");
});
here is a version of the working HOVER, that I need to convert to onClick:
http://jsfiddle.net/D5N4f/6/
This is working fine.. however.. on HOVER is just not practical for my use.. I need to change it to onClick..but have the same behavior.
Do I need to use jQuery for this? (I havent been able to get it to work)
the content I want displayed starts off as display:none..
I have tried to show(), toggle() and even .css("display", "block"); (maybe Im not targeting things correctly?)
the last part of this (since there will be MANY links set-up like this) is to close the previous 'SHOW' content.. when I click on a new link.. (ie: only having one content box displayed at a time vs. having several open at same time!)
Please use the fiddle example instead of just random code suggestions! Thanks!
I removed the following CSS:
/*.associationLinks:hover .content {
display:block;
}*/
I also use a .children() selector to get the content div to display, and I change it's CSS on a click.
Is this closer to what you want? Hiding the image is a bit tricker, and I have an idea for that but I'm not sure if you need it.
is there any way to use "hover" attribute for all html elements instead of just '' in IE?
for example 'li:hover' . it doesn't work in IE6 . (i don't know about other versions of IE).
Edited:
i just want to do it with CSS no javascript.
it is a simple menu.
No, IE6 didn't properly implement the :hover pseudo-class for all elements. It only supports it for anchors.
I don't think there is anyway that you can do it without javascript in IE 6.
If it is a one level menu, you might be able to tweak the styling to make the links render as display:block inside of the li so you can perform hovers on them, and if needed put spans inside the links for extra styling flexibility, but personally never had much luck trying to extend that to multi level menus.
A strategy of graceful degradation may be your best bet there.
Use onmouseover/onmouseout with javascript.
When you mouseover an element you simply show a hidden div with your hover contents.
When you mouseout of an element you will then hide the div with you hover contents.
Jquery makes this easier if you dont want to do all the leg work
<span id="hoverSpan" class="hoverelement" hoverdata="this is my hoverdata">HoverSpan</span>
HoverAnchor
<div id="hoverdiv" style="display:none"></div>
<script language="javascript">
$(document).ready(function () {
$(".hoverelement").each( function () {
var myelement = $(this);
myelement.mouseover( function (e) {
var myhovertext = myelement.attr("hoverdata");
$("#hoverdiv").html(myhovertext).show();
});
myelement.mouseout( function (e) {
$("#hoverdiv").html(myhovertext).hide();
});
});
});
</script>
Its late and I did not test this, but the idea is there. Basically you would make a hover for any element with the class "hoverelement"
try jquery...i don't know exactly but it might work in IE6....
I want an animation modal (loading please wait) and when the page fully loads it disappears?
Using jQuery:
$(function() { $('#loading').fadeOut(); });
The rest is CSS and an animated GIF.
If you're using jQuery, try something like this:
$(function() {
var reqMgr = Sys.WebForms.PageRequestManager.getInstance();
reqMgr.add_beginRequest(ShowWait);
reqMgr.add_endRequest(HideWait);
});
function ShowWait() {
$("#Loading").fadeIn();
}
function HideWait() {
$("#Loading").fadeOut();
}
Then just have an element:
<div id="Loading">Loading, Please Wait...</div>
Style and position as you want with css, default it to have a display: none; though.
I recommend to write some simple html with your loading message (and may be a page mask to make it grayed) and place it at the beginning of the page. And at the end of page add script to remove that message and mask (see first answer). So users will see this message as soon as they get the html page (also some browsers support rendering of incomplete pages during loading of the page). See the code of this page for additional details.
This is my favorite way to make a modal popup. It does not use any AJAX, it's just pure HTML & CSS: http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
You can hook it up to code-behind instead of using hyperlinks (get rid of the opacity attribute and work with div.visble = true/false). Set the modal div visible as default, then when page load completes, set it to visible=false.