HTML - Javascript - CSS3
i have a scrolling elements that contains texts.
When the user scroll using the side bar of the scroll , All buttons in my page will ignore the 1st click on them , u need to click a 2nd time to work.
i explain otherwise :
All my button are working fine and act with the 1st click on them (normal) .
But if you scroll an elements within the page , then the next click on any button will not work ... it's only when u click a 2nd time it works.
any help ? thx.
I think when you scroll something will reinitialize like your elements so on scrolling they will disappear so you should reinitialize the controls it will work.
You can give few code you wrote which will make more clear to us.
Related
I want to click the "continue" which is given on the end of this page, note that the site is not mine, its someone else's. The element is located after the pagination,
I tried to click it this way :
//Method 1
document.querySelector(".se-pagination-button.se-pagination-button--next").click();
//Method 2
document.querySelector(".se-pagination-layout").lastElementChild.click();
But unfortunately it did not work for me. Is there anyway I can click it ? Because when you click it through the mouse or pad, it triggers a function. But not when I want to click it through the JavaScript.
That website is a hot mess of different systems, but they use Vue.
So what you are looking for is:
document.querySelector(".se-pagination-button.se-pagination-button--next").__vue__._events.tap[0]()
I just recently started using WP with the Divi theme. However, I quickly ran into the first limitations of the theme and now am trying to sort this out manually.
I tried finding a solution to this problem before (extensively if I may say), but I just can't wrap my head around why my problem persists - mostly as I have absolutely no prior experience with Javascrip/jQuery.
What I am trying to do:
Have multiple buttons and on click show different divs. Once a different one is selected by the user, the previous one should be hidden - Currently I only use two buttons for testing.
What is working:
Both hiding and showing is working and there is no problem if the buttons are used in the sequence: Click 1. button to show -> click 1. button to hide -> then click 2. button to show etc.
My problem:
However, if the first button's div is visible and the second button is clicked, does what it's supposed to do but scrolls to the very end of the page. This is the behavior I am trying to stop.
I haven't understood yet, how I can get the neccessary HTML to make a working JSFiddle, but below is the code, which is implemented by the theme into the body of the page. It is mostly based on some code I found on this site, but I can't seem to find the original post.
I ve tried using scrollTop as well as the current tempScroll, which I saw in yet another post as a method to save the scrolling position and recalling it. However, no matter what I put in, it doesnt seem to change the behavior.
I'd appreciate any pointers in the right direction or other help and hope that I posted this correctly.
Cheers
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$('.button_verstecken_click').on('click', function(e){
e.preventDefault();
var targetDiv = $($(this).attr('href'));
if(!targetDiv.is(':visible')){
$('.button_verstecken').slideUp();
targetDiv.slideDown('slow',function(){);
e.preventDefault();
}else{
$('.button_verstecken').slideUp();
}
});
});
</script>
:)
I want to code a Forum where you can switch the divs (Sub Forums) which are shown via <a> tags.
I found this https://css-tricks.com/snippets/javascript/showhide-element/
And it works okay for the start, but sadly after I click on the link my scrollbar jumps to the top, I'd love to have it stay where it was before the click event. How can I achieve that? :)
Also when I refresh the whole process gets resettet (foo is always visible after refresh), can I somehow set variables so it remembers on which button we currently are and then, on a refresh, stays on that decision? :)
Just modify the href attribute of anchor tag
toggle
Hi there and happy new year,
I have a menu which uses the scrollto plugin ( * http://flesler.blogspot.com/2007/10/jqueryscrollto.html).
My Page is a onePager-Template and every menu item click, scrolls to a specific area.
I wanna disable this function (or any js) on certain a tags like this:
// normal behaviour / srolls to page (anchor link with scrollTo Plugin)
Area
// disabled behaviour
Another Area
But I have no idea how to do this.
I only know that something like this $(self).preventDefault could turn off js behaviour.
Can someone help me out with a oneliner?
Thank you!!!!!
I ended up with this snippet:
Blog
So this gets fired and overwrites the behaviour of any other script in my template.
I'm creating a small webapp using jquery mobile and php. I have an issue where I have a menu in a panel which i need to run an onclick event from. This works fine when the page has been re-loaded either using data-ajax='false' or running a page refresh. However when I try to use the event after a page change it just doesn't respond at all.
Here is my onclick code
$('#searchOptionMap').click(function()
{
window.alert("map clicked ");
});
and you can see the js fiddle here http://jsfiddle.net/jbcvnz0p/
If you go to page 1 - panel click - map click the alert appears
If you then navigate to page 2 - panel click - map click the alert doesn't appear
If you stay on page 2 and click the map collapsible - alert appears
You can see that the same onclick event works for a collapsible set outside the panel, just not within it. Is there any fix for this other than using data-ajax='false' or running a page refresh?
You have two divs with the same id, when you bind something with jQuery using an id, it only does the first one.
$('#searchOptionMap').click(function()
{
window.alert("map clicked");
});
So use a class instead, or make the panel external if it's going to be the same panel for both pages.
(#searchOptionMap2 works in this case because there's only one of them)