I am trying to display content when hovering over an icon.
When I hardcode it in my HTML it works fine.
But when I try to render the same thing through javascript, nothing happens on hover.
So this works when written in HTML directly:
<i id="iconid"
class="ki flaticon2-information icon-lg ml-3 text-dark"
data-container="body"
data-toggle="popover"
data-html="true"
data-content="hello"i>
This does not work
<!--html-->
<i id="iconid"
class="ki flaticon2-information icon-lg ml-3 text-dark"
data-container="body"
data-toggle="popover"
data-html="true"
i>
<!--javascript-->
document.getElementById("iconid").setAttribute("data-content", "hello");
When I inspect the rendered code, everthing seems exactly the same in both cases, but in 2nd case nothing happens on hover.
Thanks for any help!
If you use bootstrap, you might want to call popover event manually after manipulating element by JS.
$('[data-toggle="popover"]').popover()
I think issue is, by the time you call your JS manipulation, bootstrap already finished binding events for the elements. So it got left behind.
I have a code like this :
<div id="logreg" style="display: none;width:100%;max-width:660px; height:450px;" class="logreg">
my content
</div>
and i need use in many links on my site like this :
<a data-fancybox="logreg" data-src="#logreg" href="javascript:;" class="btnReg float-right">
Register
</a>
<a data-fancybox="logreg" data-src="#logreg" href="javascript:;">
<i class="fas fa-user"></i>
</a>
but doesn't work too many links, only one link work :-(
Please help me.
You are creating gallery that contains two items and both items refer to the same content. Therefore simple use different value for data-fancybox element to not create a group and everything will work fine, demo - https://jsfiddle.net/tecnw6x7/
I have the following code where I use an Anchor tag instead of a button in my Bootstrap dropdown. The problem is that, despite what is said here, when I click on the Anchor tag (labeled Action) the browser opens the Anchor tag instead of just opening the menu. In other words, the default behavior of the Anchor tag is not prevented.
We use Bootstrap v3 and this does not happen in all the environments, only in prod for now and sometimes on my local machines. This happens accross all the known browsers i.e. Chrome, IE, FF for the desktop version, the non-desktop version does not have this functionality, so we did not test it there.
<div class="dropdown btn-group">
<a class="btn dropdown-toggle" role="button" data-toggle="dropdown" href="#">
Action <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Foo</li>
<li>Bar</li>
</ul>
Finally we used the following line of code to cancel out the default behaviour, but we never figured out the root cause of this happening only in one environment not in others:
$(".btn .dropdown-toggle").click(function(event){ event.preventDefault();})
Why do you need href="#"?
Use href="" instead of href="#".
Try removing from the code
role="button"
why is it an anchor?
you've missed out the data-target attribute as shown in the bootstrap documentation
https://getbootstrap.com/docs/3.3/javascript/#dropdowns
I get this error when I try to run the code below:
Failed: element not visible
Following is the html code for the elements I want to locate:
<a class="dropdown-toggle ng-binding ng-scope" aria-expanded="false"
role="button" href="/" data-toggle="dropdown" ng-if="tab.subtabs">
Content
<span class="caret"></span></a>
<ul class="dropdown-menu ng-scope" role="menu" ng-if="tab.subtabs">
<li class="ng-scope" ng-repeat="test in tab.subtabs">
<a class="ng-binding" target="_self" href="/custom/ui">Custom</a>
</li>
<li class="ng-scope" ng-repeat="test in tab.subtabs">
<a class="ng-binding" target="_self" href="/patch/ui">Patch</a></li>
<li class="ng-scope" ng-repeat="test in tab.subtabs">
<a class="ng-binding" target="_self" href="/swd/ui">Software</a>
I want to click on element within the tags:
<a class="ng-binding" target="_self" href="/custom/ui">Custom</a>
<a class="ng-binding" target="_self" href="/patch/ui">Patch</a>
<a class="ng-binding" target="_self" href="/swd/ui">Software</a>
I have tried following code in protractor, but it is not working:
it("should click on Content and then custom", function(){
element(by.xpath('/html/body/bf-header/div/nav/div/div/div[2]/ul[1]
/li[2]/a')).element(by.xpath('/html/body/bf-header/div/nav/div/div
/div[2]/ul[1]/li[3]/ul/li[1]')).click();
element(by.xpath('/html/body/bf-header/div/nav/div/div/div[2]/ul[1]
/li[2]/a')).element(by.xpath('/html/body/bf-header/div/nav/div/div
/div[2]/ul[1]/li[3]/ul/li[1]')).click();
Well, now you can probably see why the Protractor Style Guide recommends not to ever use XPath location technique:
NEVER use xpath
Why?
It's the slowest and most brittle locator strategy of all
Markup is
very easily subject to change and therefore xpath locators require a
lot of maintenance
xpath expressions are unreadable and very hard to
debug
It is not always true and, if you choose XPath, the expressions you make must at least really be simple and readable. The first thing to fix, if you are gonna stay with XPaths, is not to make absolute XPath expressions - you don't have to start with html element and check every single element going down the tree to the desired element.
In this case, simple "by link text" or "by partial link text" locators should work perfectly:
element(by.linkText("Custom")).click();
Note that the Failed: element not visible error might be thrown, because you don't click the menu to open it up, before trying to click the submenu (assuming these are the submenu links you need to click).
You might also need to wait for the element to be clickable:
var EC = protractor.ExpectedConditions;
var custom = element(by.linkText("Custom"));
browser.wait(Ec.elementToBeClickable(custom), 5000);
custom.click();
Hope that helps.
These "accordion submenus" work in chrome and firefox, but not on an iphone.
I have built a site which includes an "offcanvas" navigation menu on smaller screens. The user clicks "the hot dog button", and the navigation menu slides onto the screen from the left... that works great so far.
Some of the navigation elements contain submenus. For those, I used bootstrap's accordion markup. The user clicks an arrow, and the "submenu" expands.
The Problem
I develop using chrome on linux. This mechanism works perfectly in chrome, firefox, and every browser I can get my hands on, as well as on my personal android phone. It also works on responsinator.com. However, since I don't have Safari, nor an iPhone, I have not been able to test this functionality directly on an iphone. I am working on getting an iPhone emulator...
Until then, some other people have looked at this on an iPhone, and I am told the "submenus" do not work at all. When the user clicks the arrow, nothing happens...
Here is an excerpt of a "menu item" containing a "sub-menu": please note I am using the 'data-toggle' and 'data-target' attributes:
<div class="panel panel-default">
<!-- The "Trigger" -->
<div class="panel-heading">
<h4 class="panel-title">
<a href="view.php?cms_nav_id=1" name="about">
About</a>
<a data-toggle="collapse" data-target="#collapse1">
<i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</a>
</h4>
</div>
<!-- Populated submenus: -->
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
Ohio Improvement Process
</div>
<div class="panel-body">
Organization Beliefs
</div>
</div>
</div><!-- /.panel -->
I really don't know what to try next: Similar questions have ended with "a css conflict" or iphone problems regarding .click(), but I am not using that: I am using data-toggle/data-target. I am considering abandoning the 'data-target' markup in favor of manually invoking an on('click', ... ) event, but I would rather not...
By the way, I call this at the bottom of my page if that's relevant:
<script src="/assets/dist/js/bootstrap.min.js"></script>
Which is 'bootstrap.js v3.0.0' .
Does anyone have any other clues? Any recent direct experience with an issue like this?
Thanks in advance for your help.
So I think I figured this out: my original markup relied solely on the data-target element, but that is apparently not enough. Safari (on iPhone) seems to also need the href attribute (which really should be there on an <a> anyway. So this works:
<a data-toggle="collapse" data-target="#collapse1" href="#collapse1">
<i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</a>
But this does not:
<a data-toggle="collapse" data-target="#collapse1">
<i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</a>
For me, collapse would work on desktop and iphone, but some of my collapses were not working on ipads. It turned out that perfect solution for me was given by #Loris in #Ryan's answer, to add the pointer style to any collapsable trigger (e.g., a div acting as a button). I generalized this to the following CSS:
[data-toggle~="collapse"] {
cursor: pointer;
}
looking at this, I had the same problem, however, when you add a href="#collapse1", it jumps you to the top of the page. I fixed this by wrapping the element in a button and removed the css for buttons. So, your code would be:
<button data-toggle="collapse" data-target="#collapse1">
<i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</button>
Hope this helps.
You can fix this by simply adding this attribute to the div that triggers the dropdown.
cursor: pointer;
This is working for me :
$('.divClassName').on('click touchstart', function () {
$($(this).data('target')).collapse('toggle');
});
To make this work for any element type, such as a div, you can use the following jQuery method (tested ios 8):
<div class="collapse-header" data-target="#collapse_0">
Click this element...
</div>
<div id="collapse_0">
...to collapse this element.
</div>
<script>
$('.collapse-header').on('click', function () {
$($(this).data('target')).collapse('toggle');
});
</script>
for further reference:
I did this in my application:
a[data-toggle="collapse"]{
cursor:pointer;
}
And it fixed the problem.
In the MDN documentation says this:
"Safari Mobile 7.0+ (and likely earlier versions too) suffers from a bug where click events aren't fired on elements that aren't typically interactive (e.g. ) and which also don't have event listeners directly attached to the elements themselves (i.e. event delegation is being used). See this live example for a demonstration. See also Safari's docs on making elements clickable and the definition of 'clickable element'"
References:
https://github.com/twbs/bootstrap/issues/16213
https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
Enabling the animation will cause some problems in IOS devices. Disable it and it will work. That was the case for me.
[isAnimated]="false"