I have made a button within Revolution slider, that enables users to click the button to scroll down to the next section on the site.
However I am un-able to change the size of the button.
I am aware that it says "small" and I have tried changing this to "medium", but this does not change the size of the button.
Below is the code, thanks for any help!
<a onclick="scrollWin()" style="position:relative;" class='tp-button blue small'>
Scroll Down
<script>
function scrollWin() {
window.scrollBy(0, 900);
}
</script>
</a>
Related
So I have this small icon and I want it to go down a little just enough to cover the entire part of 1, you click on it, and it moves you smoothly to 1. How do I code that?
give the next element to the arrow some id for example if it's a div, add this to it:
<div id="header">some content...</div>
the wrap the arrow inside an anchor tag and give it the id of the element you want to go to like this :
<a href="#header">
<p>Go down 🡣</p>
</a>
Vanilla JS implementation:
window.scrollTo(0, 50);
or
window.scrollTo({ top: 50, behavior: 'smooth' });
where 50 is amount of pixels. Link to MDN Window.scrollTo
Scroll to particular element:
var element = document.getElementById("box");
element.scrollIntoView();
Link to MDN ScrollIntoView
I have an application in Angular. In one of the screen I can search for some data based on which the data gets filtered. There is a reset button to clear the filters. I want to alert the user in NVDA screen reader that the search has been reset after clicking reset button.
I have tried the following approach. But I have some issues. Please help or suggest some better approach. I have simplified the code as follows.
<div>
<a href="javascript:void(0);" aria-label="Reset search" (click)="resetSearch()"> Reset search
</a>
<span id="resetAlert">Search has been reset</span>
</div>
I am making a span element with the message that I want NVDA to read.
But this element should not be otherwise detected by screen reader. So I set display none.
On click of reset button, following method is executed.
resetSearch() {
// Making display block so that screen reader can find the element in DOM
document.getElementById('resetAlert').style.display = 'block';
// Removing existing attribute
document.getElementById('resetAlert').removeAttribute('role');
// Setting role attribute so that screen reader alerts as "alert Search has been reset"
document.getElementById('resetAlert').setAttribute('role', 'alert');
}
The above logic works fine. But then the element stays in the DOM. If I scroll the page using tab and arrow keys, screen reader detects this element and reads it again. (I want it to read only when reset button is clicked).
I tried to change the display back to none. But it is not working.
resetSearch() {
document.getElementById('resetAlert').style.display = 'block';
document.getElementById('resetAlert').removeAttribute('role');
document.getElementById('resetAlert').setAttribute('role', 'alert');
// This line doesn't work. May be I am missing something. Please help
document.getElementById('resetAlert').style.display = 'none';
}
Help me to toggle this span element when button is clicked to make display block and change it immediately to display none or suggest me a better approach for my use case.
I found a solution. I used aria-live on the span element.
I have kept the color of span element same as the background color of the parent.
I have kept the content of the span element as empty.
After reset button is clicked, the content is set to what I want screen reader to read. Then I remove the content after 2 seconds so that while scrolling the page using tab, the screen reader doesn't read it out again.
<span aria-live="polite" id="test" class="landing-page__alert"></span>
resetSearch() {
document.getElementById('resetAlert').innerHTML = 'Search has been reset';
setTimeout(() => {
document.getElementById('resetAlert').innerHTML = '';
}, 2000);
}
I have a form inside a modal and has reCAPTCHA in it. But when I click the I am not robot button, the box where you select images goes up to high in the browser, high enough that i can't select anyting.
Attached is the screen shot, I viewed the css inside it and seems like this is auto genereted by google? Is there anyway to fix this or override via css?
I tried searching net but all I see is just resizing the reCAPTCHA box not the image selection box
My code is this, this is inside a modal body tag:
<div class="g-recaptcha" data-size="compact" ></div>
My js:
var CaptchaCallback = function(){
$('.g-recaptcha').each(function(index, el) {
grecaptcha.render(el, {'sitekey' : 'mycode'});
console.log("Re-capcha loaded");
});
};
This worked fine with all my popups which are having Google Recaptcha.
<div class="g-recaptcha"
style="transform:scale(0.77);
-webkit-transform:scale(0.70);
transform-origin:4% 0 ;
-webkit-transform-origin:7% 0;
"data-sitekey="Your Site Key">
</div>
Generally Recaptcha screen (with Images) starts exactly next to Recaptcha checkbox.
I also tested your code with my popups and it worked well. There might be problem with your popup css. Have a look on it and then give it a try.
I have an Ionic app with a navbar. In this navbar are buttons that are a little bit bad to touch. So I want to increase the touch area of the buttons. I tried this:
<ion-nav-bar class="bar bar-stable background-main-color" align-title="center">
<ion-nav-buttons side="primary">
<div class="navbarIconArea" ng-click="test2()">
<button class="button searchIcon background-main-color icon-color" ng-click="test()"></button>
</div>
</ion-nav-buttons>
[...]
</ion-nav-bar>
But test2() is just called when the button is clicked exactly and test() is invoked, too. The div works when it is outside of an ion-nav-bar.
Any idea how to fix this or how to increase the area otherwise?
CSS (50px just to test, will be 10px):
.navbarIconArea {
padding-right: 50px;
padding-left: 50px;
padding-top: 2px;
display: inline-block;
}
EDIT:
The problem is not that I both functions are called when clicking on the button. It is that test2() is not called when clicking on the area around it.
What I could understand from your problem is. You have a div which has a button and you want to invoke the function test() only on button click and test2() only when the div is clicked. Now your problem is that when ever you click the button the div is also getting clicked. Actually this is the expected behaviour. The button is inside the div and when you click on the button you are actually clicking the div too. So click of button is also equal to click of div. So both your functions are getting executed.
Solution is Give enough margin between your button and div. So use this CSS, button.searchIcon{margin:20px}, this will set 20px space between button and the div.
So now one problem is fixed, you can click around the button and it will be a div click.
Now another problem still exist. Even if you click the button the div is clicked, So the solution would be to remove the ng-click on the button, So now you will just have the div click, so inside this div click what you do is see if the click happened on the button or not (since you have not added jquery tag i am not giving you any example code, you can check it in jquery), if the click was on button then dont execute test2() execute test(). else if it was not on the button execute test2(). So this will require a new function which will warp this logic and the toggling of the calls. and point to this new function in ng-click of the div.
You need to make the button div itself a link. Nest the div tag within an a tag.
<a href=#><div></div></a>
I have a current webpage that is broken into two sections. The top section contains various controls for filtering content on the webpage, and the bottom section contains a grid of the content.
What I want is encapsulate the filter controls in a div tag that initially is completely hidden except for a button link that will say something like "Click to Expand". Upon clicking the button link the div will open up downward to expose the filter controls that are in it. However, I don't want the div to just suddenly appear, because that's too easy and boring. I want the opening of the div to be noticeable as it slides downward to expose the content.
Is this possible? If so, how do I go about achieving it? I'm not a CSS monkey, but I've done a fair amount with jQuery.
Thanks in advance for any suggestions.
Straight from http://api.jquery.com/animate/ ...
So, instead of clicking the div, you could just add the click function to a button somewhere else on the page.
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123"
style="position: relative; left: 10px;" />
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});
You can use the jQuery slideToggle().
$('#expandBtn').click(function() {
$('#filterDiv').slideToggle('slow', function() {
// Animation complete.
});
});
As an alternative to jQuery there is also the scriptaculous.js blind down and slide down effects.