I would like to disable the click event that opens the accordion if I click anywhere on the heading.Instead I would like to click only on the right most symbol....
Here it's opening if I click on the Save button..
<accordion-group is-open="status.open" template-url="accordion-group.html">
<accordion-heading>
I can have markup, too! <button type="button">Save</button> <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
Here's the plunker..
link
in your html file i modified:
<accordion close-others="oneAtATime">
<accordion-group style="pointer-events:none !important;" is-open="status.open" template-url="accordion-group.html">
<accordion-heading style="pointer-events:none !important;">
I can have markup, too! <button style="pointer-events:none !important;" type="button">Save</button> <i class="pull-right glyphicon" style="pointer-events:auto !important;" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
</accordion>
You should add css property: "pointer-events: none !important" on elements which you won't to react on mouse click event, and set "pointer-events: auto !important" on your icon indicator only. The accordion should be opened only when you click on the arrow icon. That should work :)
To make your solution more elegant you can make CSS classes like:
.disable-click-event {
pointer-events: none !important;
}
.enable-click-event {
pointer-events: auto !important;
}
There's also an option that prevents event bubbling ($event.stopPropagation()) but in this case i dont know where exactly event is invoked so it needs hard investigation to find it out.
One more hint: if any problem can be solve with CSS instead of JS it's completly worth to do it :) JavaScript events are not so easy to debug, so CSS fix will be much faster to find than dirty bug with event bubbling. I can recommend you to use simple CSS solutions with a clear conscience :) cheers
Related
I have the following div in my cshtml (Razor) file, which by default does not display. I want to override the no-display and make it visible using jquery in the associated javascript file, but it does not work. I am calling $(uiElements.divConfirmationMessage).show(), but noting happens. Any advice or help is appreciated.
<p id="divConfirmationMessage" class="success-message message no-display">
<span style="width:50px;" class="fl">
<span class="icon successGreen"></span>
<span> #Session["message"]</span>
#*<span> Hello From Hugh</span>*#
</span>
#*<span class="icon close" style="padding-left:20px" id="spnReserveAcctCloseIcon"></span>*#
</p>
Your question is not clear, but as of my understanding, 'no-display' class has style to hide the element. You can removeClass 'no-display' to show the element as follows.
$('#divConfirmationMessage').removeClass('no-display');
Let me know if I understood wrong
I have and element that should be displayed or hidden from different menu entries (e.g. its visibility toggled), and a toggle button that should switch the visibility of the element, but there are menu locations the element should be visible regardless of the toggle button state.
<a class="menu-bar" data-toggle="collapse" href="#menu">
<span class="bars"></span>
</a>
<div class="collapse menu surcarte" id="menu">
<div class="dansmenu">
some nice stuff comes here
</div>
</div>
HTML above is OK. But if add this code in a top menu bar :
<a data-toggle="collapse" href="#menu" onclick="somejavascript();return false;"> link 1 </a>
<a data-toggle="collapse" href="#menu" onclick="somejavascript();return false;"> link 2 </a>
<a data-toggle="collapse" href="#menu" onclick="somejavascript();return false;"> link 3 </a>
Each link will toggle the #menu element, first showing it, then hiding it and so and. But i want them to allways show the #menu element. Only the element with the "bars" class should act as a toggler.
I tryed to solve it with $("#menu").show();
but the jquery command seams not working.
Then i tryed the following to find out what happened:
click the link of class "menu-bar" to make the div appearing.
use the command $("#menu").hide(); => WORKS
click the link of class "menu-bar" to make the div disapear : DOES NOT WORK ANYMORE
click the link of class "menu-bar" to toggle the div once more : no effect
use the $("#menu").show(); => WORKS again
click the link of class "menu-bar" to make the div disapear : WORKS
use the $("#menu").show(); => DOSN'T work anymore.
It seems that there is a double imbricated toggle command and i can't escape it.
How do i write a working $("#menu").show(); ?
I finally found out my problem.
I was trying this :
$("#menu").toggle()
where the right syntax was :
$("#menu").collapse('toggle')
Special thanks to Rory McCrossan who showed me the strating point.
I am unable to click on button after giving z-index to it. It's overlapping on my side navigation bar I don't know why, any suggestions would be great:) .
How can I make it clickable even after z-index=-1
MY CODE :
<div class="col-lg-1 col-lg-offset-0 col-xs-4" >
<span class="glyphicon glyphicon-heart" id="lovehate" style="left:17px; top:20px;" ></span>
<a href="{{route('lovebutton',['username' => $user->username,'action'=>'love']) }}" >
<button class="btn btn-md btn-default btn-lg-round waves-effect waves-teal" type="button" style="z-index: -1; " id="lovebtn">Love</button>
</a>
</div>
Since for those element that z-index value has not assigned, it's z-index value is auto. and for as long as you do not post more of your code we are not going to be able to help.
I tried your code you provided here: https://jsfiddle.net/cb16h3jo/ and the button is responsive.
You can inspect you button in your browser and see if any other element is overlaying in your element. If so then change that element z-index to something lower than your button z-indez says: z-index: -2
I guess you have a reason for setting the zindex to -1? is not that your button is not clickable, is that probably something is overlapping it (I've tried the piece of code you posted and I can click on the button).
you could use high values to bring the button to top layer... try
z-index=3
or
z-index=5
or
z-index=9
I made a navbar and there is a green button. When the cursor hovers on it, I want a tooltip (at the bottom) to appear. However that is not happening. I used the following script:
$("[data-toggle="tooltip"]").tooltip();
A very strange thing happens. The tooltip is getting hidden underneath the navbar. Or so it seems. Can anybody help me with this? The following is the HTML code for the button (it is enclosed within the header tag):
<a id="ID" style="margin-right: 20px" class="btn btn-success"
data-placement="bottom" data-toggle="tooltip" href="#"
data-original-title="Tooltip on bottom">Has hover state</a>
Fix your JavaScript quotes:
$("a[data-toggle='tooltip']").tooltip();
See this Plunker as reference, it has your markup and the fixed JavaScript.
Note that the .tooltip() is running after the DOM is ready with the relevant markup.
EDIT: After a long discussion in the comments, the solution was to add this to the CSS:
.tooltip{ position: fixed;}
I am trying to change icon (i.e plus, minus) on click in expand collapse accordion, I am using Font Awesome class for icons. I know it is easily possible with jquery but if there is any way in angularjs, then please let me know.
HTML looks like:
<a class="accordion-toggle" data-toggle="collapse" href="#collapseOne{{test}}">
Test
</a>
You should be looking at ng-class.
Short example...
in your template:
<span ng-click="flag = !flag" ng-class="{ active : flag }">
click me!
</span>
in your css:
.active { color: red; }