I am creating a floating action button.
My code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a href="#" class="float" id="menu-share">
<i class="fa fa-share my-float"></i>
</a>
<ul>
<li>
<i class="fa fa-facebook my-float"></i>
</li>
<li>
<i class="fa fa-google-plus my-float"></i>
</li>
<li>
<i class="fa fa-twitter my-float"></i>
</li>
</ul>
Fiddle Link: jsfiddle.net/7zkjas08.
Currently in my code when the user click the action button the popup appears and the user need to click or tap in somewhere on the screen to close the popup.
I want functionality like this: jsfiddle.net/r2hxbL5j
When the user click the button it shows the cross X closing sign. So the user can tap/click the cross sign and popup disappears.
Cool menu, and that you're trying to achieve that with CSS. I wanted to do that myself for a while. What bootstrap is using is something called pseudo elements to display the character. You just need to replace that character with something else on hover.
I inspected the #menu-share element to find all this out. Just add the following code, and it will work out.
/* when hovering the "a" tag, change the content in the pseudo-element "before" */
a#menu-share:hover > i::before{
content: '✕';
font-weight: bold;
}
I added the multiplication character. If you want to go with an X, I suggest that you change the font-family to a sans-serif, like Arial.
[edit]
It's IMHO impossible to add close functionality to the button with CSS, so it's needed to add the following functions:
/* Old code, but you need to put the next one below this one */
a#menu-share:hover + ul{
visibility: visible;
animation: scale-in 0.5s;
}
/* When giving the element focus (=clicking or tabbing to), close */
a#menu-share:focus + ul {
visibility: hidden;
}
/* Ignore any kind of pointer interaction */
.float > i {
pointer-events: none;
}
<a onmouseout="this.blur()" href="#" class="float" id="menu-share">
this means "this element", namely the a tag. blur() means remove focus from. I also needed to add .float > i syntax to the CSS in order for this to work.
Related
This is a peculiar issue faced when creating internal links on a WordPress page. There are 3 CTA buttons on the page that when clicked do jump to the respective sections on the same page. However, it is jumping past the section exactly by the height of the header of the page. As a solution, I added a function to each of these buttons so that it sets the scrollbar to pull the bar backward. Below is the code that isn't working. Could you please suggest some changes to make it work?
<h4>Connect with our Team</h4>
<p>Does your order need extra care? You’re in the right place. For special requests, help collecting recipient addresses, or to add corporate branding to your gifts, our Gift Concierge experts can help.</p>
<p><a class="btn" role="button" href="#faqs">FAQs</a> <a class="btn" role="button" href="#let-us-chat">Schedule a Call</a> <a class="btn" role="button" href="#submit-questions">Submit a Question</a></p>
<p> </p>
<h5 id="faqs">FAQs</h5>
<p>Some questions have easy answers. Whether you want to know shipping prices, how soon your gifts will ship, or how to add a company logo, browse our FAQs.</p>
<p> </p>
<h5 id="let-us-chat">Let's Chat</h5>
<p>Prefer to schedule a call? Meet with a member of our Gift Concierge team at a time most convenient for you:</p>
<ul>
<li>Orders under 200 gifts, schedule here </li>
<li>Orders of 200 or more gifts, schedule here</li>
</ul>
<p> </p>
<h5 id="submit-questions">Submit questions</h5>
<p>Ask us anything below. A member of our team will get back to you within one business day.</p>
<p>
<style>
#media only screen and (max-width: 576px) {
.page-id-2765 .btn {
padding-left: 1rem;
padding-right: 1rem;
font-size: 1.1rem;
}
}
#media only screen and (min-width: 750px) and (max-width: 910px) {
.page-id-2765 .btn {
padding-left: 1rem;
padding-right: 1rem;
font-size: 1.1rem;
}
}
</style>
</p>
<p><script>
function resetScrollpoint() {
console.log("Hello Pramod");
window.scroll(0,$(".col-nav").css('height'));
}
</script></p>
In your code it is missing where you are calling the resetScrollpoint() function but but at first sight you can do this ...
<a class="btn" role="button" href="javascript:void(0)" onclick="resetScrollpoint('#faqs')">FAQs</a>
<a class="btn" role="button" href="javascript:void(0)" onclick="resetScrollpoint('#let-us-chat')">Schedule a Call</a>
<a class="btn" role="button" href="javascript:void(0)" onclick="resetScrollpoint('#submit-questions')">Submit a Question</a>
And your function change to this:
resetScrollpoint(selector){
if(!selector) return;
window.scroll(0,jQuery(selector).offset().top - jQuery('#header').height());
}
Explanations Sorry for my English!
Your first aproach are right
<a class="btn" role="button" href="#faqs">FAQs</a>
That get the #faqs element scrolling to top, but the top is 0 and you have a fixed #header element so you need to scroll to top + #header height
Your second aproach with onclick="resetScrollpoint()" are also right but
Is ambiguos because on the one hand you tell the interpreter to execute href="#faqs" but on the other hand you tell to interpreter to execute resetScrollpoint(). Solution: with href="javascript:void(0)" you tell to interpreter to ignore the default href action
The logical inside your function resetScrollpoint() was wrong because you need to know how many pixels you need to scroll.
Solution: you tell to the function what is the element that you need (passing it as a parameter) resetScrollpoint('#faqs'),
with jQuery(selector).offset().top you find the position of your element received by the parameter selector (how many pixels from the top) and substract the height of #header element because otherwise the scrolling it would be too upstair
I am building a react app. In that i have a button, i want if someone clicks on that one then it takes him to compose email. But it is not working. This is but i tried to do
<button className="btn_2" > <a href="mailto:my_email#gmail.com" > Say Hello </a> </button>
I just checked and the code is working fine. But one thing I observed is you have to click on the anchor text (a tag) and not the other part of button. To avoid this you can remove button as a wrapper element, use a tag and style it using css.
a{
display: inline-block;
padding:.5rem;
background: lightgrey;
border-radius: 5px;
}
<a href="mailto:my_email#gmail.com" > Say Hello </a>
It doesn't work because is not valid HTML5 according to the spec.
The a element can be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g., buttons or other links).
You probably should replace with:
<a className="btn_2" href="mailto:my_email#gmail.com"> Say Hello </a>
I am creating popups with popover bootstrap option in creating an interactive html. I first used the following tag:
<a class="btn popoverOption"
data-content="A group of people with a shared characteristic. It is an object of observation in epidemiological studies."
data-original-title="cohort"
data-placement="bottom"
href="#"
rel="popover"
style="font-size: inherit; vertical-align: baseline; padding: 0; font: inherit;">
cohort
</a>
I have purposely made spces to show the syntax. The popup is below the text, so I tried adding data-container='body', but in this way when I zoom in the popup is frequently outside the screen. How can I make the popup always stay within my screen (without fixing the size in any way, if possible)?
Thanks in advance! Please tel me if I need to show more code, I didn't do it for brevity.
I have an anchor tag in which I removed the href attribute through JavaScript.
I had also used setAttribute to add style="cursor:default;"
But still the hand pointer is being displayed on hovering over the text.
What is that I am doing wrong here.
HTML
<li>
<a class="menu-item" href="www.google.com" >
<span>Link Text</span>
</a>
</li>
JS
window.onload=function removeLink()
{
menuItem.removeAttribute("href");
menuItem.setAttribute("style","cursor:default;");
}
After page load html becomes like this
<li>
<a class="menu-item" style="cursor:default;" >
<span>Link Text</span>
</a>
</li>
When the page is rendered these changes are visible in the code, But still i get the Hand pointer on hovering over the link
I have already tried using menuItem.style.cursor="default";
And also tried to set it through css
CSS
.class a:hover{
cursor:default;}
Read here: Mouse Coursor 1, Mouse Coursor 2
Try this:
document.getElementById("anchor").style.cursor="default";
Google
You can make a link unclickable like this, using the simple css. This works in mobile devices and desktop also.
a {
pointer-events: none;
cursor: default;
}
Unclickable link
Using setAttribute is unreliable if you want the change to be reflected in the document. Use Element.style instead:
menuItem.style.cursor='default';
I'm trying to emulate a feature on Wikipedia's mobile pages. If you visit http://en.m.wikipedia.org/wiki/Mammal and scroll down to the heading "Distinguishing Features," then click it, you'll see the down arrow (chevron) change to an up arrow.
I inserted the two choices into my header via spans...
<h2 id="where" class="H2Toggle" data-toggle="collapse" data- target=".Header2,.Where,#glyph2">
<span class="glyphicon glyphicon1 glyphicon-chevron-down"></span>
<span id="glyph2" class="glyphicon glyphicon2 glyphicon-remove-sign"></span>
</h2>
I then added a CSS style - span#glyph2 { display: none; }
Now only the first span displays by default, but when I click on the header BOTH spans display. So I need to figure out how to make the first span not display when I click the header, then reappear when I click it again.
I could do it for a particular screen size. For example, I could make one span or the other appear or not appear if the screen is 1,000 pixels wide or wider. But I need a CSS style (or JavaScript function) that makes a character appear/disappear according to whether or not a header has been clicked.
So I guess what I'm asking is "What's the name of the default active vs the inactive state in Bootstrap?"
Bootstrap will apply the collapsed class to the trigger when the element it controls is collapsed. Otherwise, no such class is applied. You can use this to write an appropriate CSS rule.
.only-collapsed { display: none; }
.collapsed .only-collapsed { display: inline; }
.collapsed .only-expanded { display: none; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div data-toggle="collapse" data-target="#target">Header <span class="only-collapsed">Expand</span> <span class="only-expanded">Collapse</span></div>
<div id="target" class="collapse in">Hello, world!</div>