My question is about Gentelella Alela template
In this HTML page, there is an icon with class="fa fa-chevron-up" that displays an icon to close the panel (See HTML code at line: 294). When the panel is closed, another icon image should appear to re-open the panel again but I can't find it in the HTML page.
its a CSS you will not found it in your HTML
but you can reach the style at this file:
[url..]/assest/template/vendors/font-awesome/css/font-awesome.min.css
The "magic" is somewhere in the custom(.min).js
$(".collapse-link").on("click",function(){
...
t.toggleClass("fa-chevron-up fa-chevron-down")
there is a click handler that changes the class from fa-chevron-up to fa-chevron-down and back again every time you click.
Thank you guys for your help.
In fact, I did a big mistake! I changed the "fa fa-chevron-up" icon to a Bootstrap glyphicon (in HTML line 249)! In fact, if you change that icon name in HTML to a "Bootstrap glyphicon" the provided javascript will not display the "fa-chevron-down" icon!
Thank you.
Related
I am trying to implement a click event to get the details of every entry from this page: https://www.mrlodge.de/wohnungen/
The Html markup of the button which links to the Details looks like this:
<li class="action mrl-list__item details-bt">
<button>
<span class="icon icon-arrow-right">
::before
</span>
"Details"
</button>
</li>
I have some experience with LUA and Splash but have no idea how to attack this problem since there is no actual href link given in the html markup. I have read about the Splash method mouseclick(), which needs pixel directions. However I am looking for a more generic solution with Splash.
Please help
This page doesn't use javascript. Try disabling javascript and the page still works. The page works with forms instead.
>>> fetch('https://www.mrlodge.de/wohnungen/')
2019-07-10 14:56:41 [scrapy.core.engine] INFO: Spider opened
>>> response.xpath('//form/input[#name="name_url"]/#value').extract()
[u'/wohnen-auf-zeit/2-zimmer-wohnung-muenchen-maxvorstadt-11609/', u'/wohnen-auf-zeit/4-zimmer-haus-muenchen-fuerstenried-10756/', u'/wohnen-auf-zeit/3-zimmer-wohnung-muenchen-lerchenau-11653/', u'/wohnen-auf-zeit/2-zimmer-wohnung-muenchen-glockenbachviertel-4180/', u'/wohnen-auf-zeit/2-zimmer-wohnung-muenchen-berg-am-laim-11625/']
I am using ng2-material library (built on top of angular2). The documentation and demos are clearly out dated and not updated as per the new angular 2 release. However, having made the necessary adjustments so far, I want a menu icon inside a button which is located on the toolbar of the page. I am able to load the material icon of menu, but still cannot give it a button-icon styling. This is how I am doing it:
<button md-button class="md-icon-button" aria-label="Settings">
<i class="mdclass-dark material-icons" md-icon >menu</i>
</button>
This is giving the menu icon the styling, that of a button, rather than that of an md-icon.. Can someone please let me know how to do that?
use md-icon-button directive instead of md-button.
and you can also use <md-icon> element instead of <i> to display material icons.
<button md-icon-button aria-label="Settings">
<md-icon>menu</md-icon>
</button>
I've a situation where a user need to copy (click copy-to-clipboard icon) a link, however I've multiple dynamic links on a single page.
I've found the solution on the following post but I don't know a way to pass clicked icon ID to function as parameter and get the link copied to clipboard.
Click button copy to clipboard using jQuery
<i class="fa fa-link pull-right" id"copyToClipboard1"></i>
<i class="fa fa-link pull-right" id"copyToClipboard2"></i>
<i class="fa fa-link pull-right" id"copyToClipboard3"></i>
I went through the following post here in order to pass element ids to the function but no use as I just started crawling on jQuery path.
jQuery passing element ID into jquery statement?
Thanks in advance.
I don't have enough rep point therefore posting a new question [duplicate].
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;}
Whay I want to acomplish is use icons from fontawesome on my JQuery sliders, so I am pretty much trying to insert HTML code into the a that serves as the container for the handle.
This is my JavaScript
$(document).ready(function () {
$(function () {
$("#slider-vertical").slider({
orientation: "vertical"
});
$("#amount").val($("#slider-vertical").slider("value"));
});
$('#slider-vertical.blue a.slider-handle').append('<i class="fa fa-bars"></i>');
});
And this is the HTML for the said slider
<div id="slider-vertical" class="blue">zing</div>
Weird thing is I tried to target the outer part of the slider and that worked
$('#slider-vertical.blue').append('<i class="fa fa-bars"></i>');
, I don't understand why it won't put it inside the handler.
I expect something like this as output
<div id="slider-vertical" class="blue">
<a class="slider-handle">
<i class="fa fa-bars"></i>
</a>
</div>
It does add the element, which is visible. http://jsfiddle.net/LZx5L/1/ This is your problem
$('#slider-vertical.blue a.slider-handle').append('<i class="fa fa-bars"></i>');
There is no a.slider-handle, it's a.ui-slider-handle
$('#slider-vertical.blue a.ui-slider-handle').append('<i class="fa fa-bars"></i>');
However, There's no reason the icon has to be an <i>. Adding the classes to the element is the simplest solution.
$('#slider-vertical.blue a.ui-slider-handle').addClass('fa fa-bars');
http://jsfiddle.net/LZx5L/