I have that <a> (Edit diagram + icons) inside <ul><li>...</ul></li>
I want to add clickable and hoverable arrow icon inside that <a>
So i created button with display: contents, some code:
...
<li class="active">
<a href="#"><span class="fa fas fa-edit mr-3"></span> Edit diagram
<button onclick="location.href='/drawdiagram'" class="fas fa-reply mr-3" style="display: contents">
</button>
</a>
</li>
...
And here is my problem. Look at that screen:
Inside my button tag, <span> was added... This span is adding some css, i mean some paddding etc. And the result is on that picture -.-
That green rectangle anoying me. For first it is adding margin from bottom to my <li>. For second and worst, it is adding extra area where i can move my mouse and my arrow will be hovered.
My mouse can be there and the arrow will be hovered all time -.-
That extra <span> is added by jQuery but I don't want to rummage inside library.
So the question is, anyone have idea what i can do it with this? I had an idea to delete "somehow" that span using JavaScript or jQuery but i have no idea how to do it. Or maybe i can "somehow" delete it using css. But remember, I don't want to rummage inside library.
there are many ways to do that.
but very first you have to confirm if you remove this <span> which is inside button, yours icon will not disturbed. for test just remove it with the help of inspect element(hope you knows. how to do it).
if its fine with removing this <span> then with the help of JQuery you can remove it via adding this line.
$(document).ready(function(){
$('#ID_of_button span').remove();
}
Related
I have this HTML code
<li class="menu-level-1">
<a href="/Public/app/#/calendar">
<i class="site-menu-icon material-icons">date_range</i>
<span>
Calendar
</span>
</a>
</li>
I don't know exactly what I need to select in CYPRESS for automation to press the calendar button. I don't have a unique css or id class so I can't isolate it from the rest of the menu items. I only have what is seen in this code.
I think you want to click the element <a href="/Public/app/#/calendar"> since it has the href.
There's lots of ways to target it, the one to use depends on what is unique on the page
cy.contains('a', 'Calendar').click() // if the word Calendar only appears on this link
cy.get('a[href="/Public/app/#/calendar"]').click() // specifies by the link itself
cy,get('i.site-menu-icon').parent().click() // if the icon is the unique thing
You can use custom xpath like //*[text()="Calendar"]
If you have found many others on your web page, you can give an index like //*[text()="Calendar"][1] make sure here the index always starts with 1, not 0.
I have a button in html, that when clicked turns light green. I have figured out that this is due to some css I have included, but I cannot remove it due to the css being needed in other parts of the code. Is there a way I can include some css specific to the button such that for it only, there will be no effects from clicking the button? Ideally I'd like to use css/html only, but if absolutely necessary I can do with javascript/jquery.
That's a simple example:
.active{background-color:green;}
.active:active{background-color:blue;}
.notactive{background-color:green;}
Example 1 (your situation):
<button class='active'>
pressme
</button><br>
Example 2 (change simple class):
<button class='notactive'>
pressme
</button>
<br>
Example 3 (use style):
<button class='active' style="background-color:green!important">
pressme
</button>
At the first example is your case, in the second example i change simple class then :active have no effect, in the third i used !important with style
It seems like you have used ":checked" on button directly.
You can use :checked css on specific ID only. So it will stop affecting for all buttons.
If you haven't used above please mention your CSS here.
In my .js script I add a div that will hold a slickgrid, then I add other elements inside the grid, all when my js script loads.
var container = $('#container');
container.html('<div id="gridView"></div>');
then I want to add the hoverIntent library functionality to it so that a popover, triggered on hovering over a element, doesn't pop up unless I hold the hover for a little while (slower then instant)
My popover looks like this (it's inside a font awesome tag that's inside a slickgrid cell), so when I hover over this font awesome tag the popover appears. I want to use hoverIntent on it.
<div class="slick-cell l0 r0"><i class="fa fa-plus-circle" id="21657" data-placement="right" data-trigger="hover" onmouseover="tp.manageRollups.showCustomerIdList(21657);"></i> 21657</div>
I'm assuming I have to call something like
$('#gridView').on('hoverIntent', 'i.fa.fa-plus-circle')
but I'm not sure! Any help would be appreciated.
I want to replace button with a DIV in template design of my blog.
The code for button is
<button onClick="menu1.toggle();" class="sideviewtoggle fa fa-bars"></button>
And jquery script I am using for it is
jQuery(function(){ // on DOM load
menu1 = new sidetogglemenu({ // initialize first menu example
id: 'togglemenu1',
marginoffset: 10,
downarrowsrc: 'toggledown.png'
})
})
It opens a siedbar toggle menu on click. I don't want to use <button> tag for this purpose, instead I want to use a <div> tag so that the functions onclick instead of button. I think that it can be done by using a small code of Javascript but as I am new to Javascript so unable to do it myself?
What should I do?
Here is the url to template.
http://testing-prov4.blogspot.com
It sounds like you would like to use a div element to trigger the slideout menu instead of a button element. This can be easily accomplished. Your current code reads:
<button class='sideviewtoggle fa fa-bars' onClick='menu1.toggle();'></button>
You can replace this with:
<div class='sideviewtoggle fa fa-bars' onClick='menu1.toggle();'></div>
without changing any functionality. (CSS changes just a bit)
The goal
Change status when I click in the child (<i>) of an element (<li>)
The problem
Nothing happens when I click in <i>, that is child of <li>.
Details
I'm using AngularJS with ng-click. See:
<li ng-click="openNavigator($event)">
<i class="ico ico-home"></i>
</li>
Update
Guys, you are right — it's working! The problem, actually, is a little bit further.
See this jsFiddle. If you click exactly on the button, the console retrieves back to you a specific result; otherwise, if you click exactly on the icon, you get another response from $event.target.
This behavior isn't good for me — it's flimsy. In my real application I need to work with parents, siblings, etc. and that incosistence unleashes expected, but unwanted, results.
Can you all see my problem? If so, ideas?
Thanks in advance!
HTML
<div ng-app='currentApp' ng-controller='ACtrl'>
<li class="btn btn-primary">
<i class="fa fa-phone" ng-click="openNavigator($event)"></i>
</li>
</div>
CONTROLLER
currentApp.controller('ACtrl', ['$scope', function ($scope, $event) {
$scope.openNavigator = function($event) {
var target = $event.target['parentElement' || 'patentNode'];
console.log('li parent', target);
}
}]);
Since the i tag is a child of the li and the click event is inconsistent, then I suggest you target the i tag on click and then grab the parent. You can say it's the bubbling down, which is correct, So to fix it target the i and it won't bubble up.
The main reason this is an issue is because AngularJS doesn't have event delegation functionality like jQuery does, so you can't specifically target the li tag.
The fiddles been updated too!
JSFIDDLE
It should work. Here is a plunker