I'm working on the following script :
http://www.andwecode.com/playground-demo/pop-up-login-signup-box-jquery/#
I've modified the Gmail and Facebook boxes in it, and I would like them to present a login form when I click on them. I tried this with Gmail box :
<a href="#1" class="social_box google" id="login_form" >
<span class="icon"><i class="fa fa-google-plus"></i></span>
Basically, I added the ID : (id="login_form") and it worked fine !
The problem is that you can use the ID just once. and when you do that the login button became useless ..
any idea how to make all the boxes go for the login form ?
The reason the functionality works only for one scenario is that 'ID's have to be unique', if you have duplicate ID's it will recognize only the id for the first element and it will ignore the rest.
You can achieve your result in two ways
1) have same class for all the boxes fb box,google box etc.
Example: box-form class for all the boxes
HTML:
<a href="#1" class="social_box google box-form" >
<span class="icon"><i class="fa fa-google-plus"></i></span>
<a href="#1" class="social_box fb box-form" >
<span class="icon"><i class="fa fa-google-plus"></i></span>
Jquery:
$('.box-form').click(function() {
//code
});
2) Apply different id for each box and combine the id's in jquery
HTML:
<a href="#1" class="social_box google" id="login-form" >
<span class="icon"><i class="fa fa-google-plus"></i></span>
<a href="#1" class="social_box fb" id="fb-form">
<span class="icon"><i class="fa fa-google-plus"></i></span>
Jquery:
$('#login-form, #fb-form').click(function() {
//code
});
Related
Okay .. I want to create a button once it's clicked it allows you to add a photo .. like the input tag of attribute type = "file" .. I've already designed the button shape .. all what is remained is to click on it so a window blows up .. and choose a photo to display in the post box ..
enter image description here
<div class="extras">
<ul class="icons">
<li class="photos">
<i class="fa-solid fa-image">
</i>
</li>
<li class="tag"> <i class="fa-solid fa-user-tag"> </i> </li>
</ul>
<div class="button">
<button>launch</button>
</div>
</div>
here is the element of class photos which I want it to display the window of adding a photo once it's clicked .. exactly like .. just different button style ..
If I understand well, what you have to do is this: first you'll need to add an id to your <li class="photos"> and your <button>launch</button>. And also remove your <i id="up"> component since you'll add it with JavaScript. See the html bellow.
<div class="extras">
<ul class="icons">
<li id="photos-component" class="photos">
<!-- there used to be an <i> tag here! -->
</li>
<li class="tag">
<i class="fa-solid fa-user-tag"> </i>
</li>
</ul>
<div class="button">
<button id="launch-button">launch</button>
</div>
</div>
After adding the ids, you'll need to call a JavaScript file by inserting a <script src="insert-your-file-name.js"></script> at the bottom of your <body>. Probably, you already have done this. If not, do it.
In that file, you'll want to add the following code.
// This constant bellow contains your photos component
const photosComponent = document.getElementById("photos-component");
// This constant bellow contains your launch button
const button = document.getElementById("launch-button");
// This whole chunk of code bellow is a function that will run whenever
// you click the button
button.addEventListener("click", () => {
// Here we create a new empty <input> tag
const fileInput = document.createElement("input");
// Here we add all the attributes for the <input> tag
fileInput.id = "up";
fileInput.type = "file";
fileInput.classList.add("fa-solid fa-image");
// Here we add the input to the photos component
photosComponent.append(fileInput);
// Here we change the style of the button
button.classList.add("insert-button-style");
})
Hopefully it helps. You can always read more about the JavaScript HTML DOM (Document Object Model) by googleing it.
These links might help you in your search:
https://www.w3schools.com/js/js_htmldom.asp
https://www.javascripttutorial.net/javascript-dom/
I have two views and each view contains an link with data-action attribute to call jQuery function called toggle menu like this:
<div id="hide-menu" class="btn-header pull-right">
<span>
<a href="javascript:void(0);" class="toggleMenu" data-action="toggleMenu" title="Collapse Menu")">
<i class="fa fa-reorder"></i>
</a>
</span>
</div>
jQuery:
toggleMenu: function () {
if (!$.root_.hasClass("menu-on-top")) {
$('html').toggleClass("hidden-menu-mobile-lock");
$.root_.toggleClass("hidden-menu");
$.root_.removeClass("minified");
} else if ($.root_.hasClass("menu-on-top") && $.root_.hasClass("mobile-view-activated")) {
$('html').toggleClass("hidden-menu-mobile-lock");
$.root_.toggleClass("hidden-menu");
$.root_.removeClass("minified");
}
}
one of the views calls the function properly but the another doesn't, What is the possible reason for that??
in fact I haven't known the actual reason of the issue, maybe as Ramesh said in the comments was the problem.
I solved it by putting the function in the same document (not in another js file) and in the element, I have used onClick attribute to execute the function.
<div id="hide-menu" class="btn-header pull-right">
<span>
<a href="javascript:void(0);" class="toggleMenu" onclick="toggle()" title="Collapse Menu">
<i class="fa fa-reorder"></i>
</a>
</span>
</div>
<script>
function toggle() {
if (!$.root_.hasClass("menu-on-top")) {
$('html').toggleClass("hidden-menu-mobile-lock");
$.root_.toggleClass("hidden-menu");
$.root_.removeClass("minified");
} else if ($.root_.hasClass("menu-on-top") && $.root_.hasClass("mobile-view-activated")) {
$('html').toggleClass("hidden-menu-mobile-lock");
$.root_.toggleClass("hidden-menu");
$.root_.removeClass("minified");
}
}
</script>
Here my problem.
<span class="col-sm-3 col-md-3" ng-bind-template="{{controller.getToolTip()}}">
<span class="icon " ng-class="controller.getIcone()" aria-hidden="true"></span>
</span>
In my controller, getToolTip() returns a string and same for getIcone().
The second span is never displayed and not present in the DOM.
But if i replace by this :
<span class="col-sm-3 col-md-3" >
{{controller.getToolTip()}}
<span class="icon " ng-class="controller.getIcone()" aria-hidden="true"></span>
</span>
This time i can see my second span. Do you have an idea what is the problem
ng-bind-template directive replaces the element's content with the interpolation of the template in the ngBindTemplate attribute.
Read more here: https://docs.angularjs.org/api/ng/directive/ngBindTemplate
There is also a syntax error in the sample template. Quotes don't close and curly braces are needed in that case, like this:
<span class="col-sm-3 col-md-3" ng-bind-template="{{controller.getToolTip()}}">
in my html I got Bootstrap glyphicons with the following code:
<span class="glyphicon glyphicon-copy" style="cursor:pointer;font-size:20px;">
</span>
is it possible to show some text on hover on it as it is done with img tag. Tried to add alt attribute but it did not work. Maybe there are some polifills for this (tooltips) or smth like that? Bootstrap-3 is used.
Thank you.
If you want to add tooltip use:
HTML
<span
class="glyphicon glyphicon-copy"
data-toggle="tooltip"
style="cursor:pointer;font-size:20px;"
title="myText"
></span>
JS
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
or else you can just add data-title attribute to your <span> element
<span
class="glyphicon glyphicon-copy"
data-toggle="tooltip"
data-title="myText"
style="cursor:pointer;font-size:20px;"
></span>
Try this:
<span class="glyphicon glyphicon-copy" title="yourtext" style="cursor:pointer;font-size:20px;">
Add attribute title with text thant you want to show on hover .
webdriver finding xpath its too dificult for me. i used fire path most of fire path given xpath not working and its too lengthy. some one give me idea about xpath will work all conditions and i know relative xpath
some times this posibilities also not working like {//ul[#class='review-nav']}. some one help me for find xpath that xpath will work all conditions
<ul class="review-nav">
<li id="pend" class="pend tabclass">
<a onclick="OnTabSelect(1,'pend',0)" href="#">Pending (197)</a>
<span class="glyphicon glyphicon-filter filterclass" style="color:#185daa;top:4px;display:none"/>
</li>
<li id="flag" class="flag tabclass active">
<a onclick="OnTabSelect(4,'flag',1)" href="#">Flagged (96)</a>
<span class="glyphicon glyphicon-filter filterclass" style="color:#185daa;top:4px;display:none"/>
</li>
<li id="esca" class="esca tabclass">
<a onclick="OnTabSelect(5,'esca',2)" href="#">Escalated (88)</a>
<span class="glyphicon glyphicon-filter filterclass" style="color:#185daa;top:4px;display:none"/>
</li>
<li id="closed" class="closed tabclass">
<a onclick="OnTabSelect(3,'closed',3)" href="#">Closed (99)</a>
<span class="glyphicon glyphicon-filter filterclass" style="color:#185daa;top:4px;display:none"/>
</li>
<li id="all" class="all tabclass">
<a onclick="OnTabSelect(0,'all',3)" href="#">All (1,355)</a>
<span class="glyphicon glyphicon-filter filterclass" style="color:#185daa;top:4px;display:none"/>
</li>
</ul>
I try this Xpath to read above list its not working
xpath = //ul[#class='review-nav']
Sorry for that, I am little bit not clear for what you need xpath..
If you are trying to get all link ('a') to collect into List
//ul[#class='review-nav']/li/a
If you are trying to get all 'span' element to collect into List
//ul[#class='review-nav']/li/span
If you want to get specific element in specific li, you can try with id of 'li', for example if you like to find xpath of 'a' in first li
//li[#id='pend']/a
Thank You
Try with CSS:
.tabclass
You should get the 'li' elements with this.