Anchor links need two clicks to go to the right section - javascript

So I have a table of contents section which I want to open and close during the hovering process. The problem is that I need to click to a link in that table of contents twice to make it go to the right section. All corresponding IDs in the anchor tags are okay. It's a wordpress site. Browser Chrome.
Could it be that the script is interfering and how can I correct it?
Here's the javascript I used:
(function( $ ) {
$( '.tableofcontents' ).hover(function() {
$( this ).children( 'h5' ).trigger( 'click' );
});
})( jQuery );

Try to change "hover" function to "mouseenter"
$( '.tableofcontents' ).on('mouseenter', function() {
$( this ).children( 'h5' ).trigger( 'click' );
});

Related

How does this code where elementor is closing a popup work?

if anyone click on text that popup closes. we used this code for closing purpose.
jQuery( document ).ready( function( $ ) {
$( document ).on( 'click', '.close-popup', function( event ) {
elementorProFrontend.modules.popup.closePopup( {}, event );
});
});
jQuery( document ).ready( function( $ ) {
When jQuery it's loaded and ready
$( document ).on( 'click', '.close-popup', function( event )
When you click in a element with the class '.close-popup'
elementorProFrontend.modules.popup.closePopup( {}, event );
Using the elementor library for wordpress close the popup but you should pass the id to the closePopup function in the empty object. Like {"id":popup_id} if not all popups will be closed

How to sync slideToggle() elements so they expand/collapse all together regardless of current state?

I'm trying to show/hide sections using triggers based on classes. So it's easy to throw the trigger class on any element and it will slideToggle the next show/hide element class in the DOM.
The first part works fine. Now I'm adding a trigger to expand/collapse ALL elements. Trouble is, I can't figure out how to sync their states.
For example: I click on 3 of 8 elements so they slide open and become visible, the other 5 are still closed... Now when I click my expand/collapse all trigger, using slideToggle just switches their states so I end up with 3 closed and 5 open.
How do I get their states to sync regardless of what their current state is?
I've been trying to figure out the conditionals to check if the trigger has the opened or close class on it, then toggle the next element, but I've only made a mess so far.
Here's my code:
jQuery( document ).ready( function( $ ) {
// The element to hide/reveal
$( '.bodhi-hide-reveal' ).hide();
// The trigger to hide/reveal
$( '.bodhi-reveal-trigger' ).click( function( e ) {
e.preventDefault();
// Target only the next element to hide/reveal and toggle it
$( this ).next( '.bodhi-hide-reveal' ).slideToggle();
// Toggle the trigger class
$( '.bodhi-reveal-trigger' ).toggleClass( 'opened closed' );
});
// Expand/collapse all button
$( '.expand-collapse-all' ).click( function( e ) {
e.preventDefault();
// Find all hide/reveal elements and toggle them all together
$( 'body' ).find( '.bodhi-hide-reveal' ).slideToggle();
});
});
Just a class named "opened" is enough to detect if the next div is open or close. So I write an IF/ELSE block to decide whether to slideUp or SlideDown. Also you have to decide what would you do when some of divs are expanded? Do you want to collapse all or expand all? I prefer to collapse all first. So I search to find an opened one (using array length) and if I find it, I collapse all divs, elsewhere I expand all:
Also there are some inefficient selectors like $( 'body' ).find(). I also replace those selectors with efficient ones:
jQuery( document ).ready( function( $ ) {
// The element to hide/reveal
$('.bodhi-hide-reveal').hide();
$('.bodhi-reveal-trigger').removeClass("opened");
// The trigger to hide/reveal
$('.bodhi-reveal-trigger').click( function( e ) {
e.preventDefault();
// Target only the next element to hide/reveal and toggle it
$(this).next('.bodhi-hide-reveal').slideToggle();
// Toggle the trigger class
$(this).toggleClass('opened');
});
// Expand/collapse all button
$('.expand-collapse-all').click( function( e ) {
e.preventDefault();
//Check if there is at least one open div:
if ($('.bodhi-reveal-trigger.opened').length){
$('.bodhi-reveal-trigger').removeClass("opened")
$('.bodhi-hide-reveal').stop().slideUp();
}
else {
$('.bodhi-reveal-trigger').addClass("opened")
$('.bodhi-hide-reveal').stop().slideDown();
}
});
});

load external file into page id in jquery mobile

i have an external file profile.php, i want to load it into a sub page id profile after clicking a link.. i have tried the code below but i did not see any been displayed after the click event, the clicked event is triggered because i have tested it alert , there is no error in console i think i'm missing something please help out. thanks
$(document).on("click", "#profilel",function(){
$( ":mobile-pagecontainer" ).pagecontainer( "load", "profile.php" )
});
Try this one
$(document).on("click", "#profile",function(){
$( ":mobile-pagecontainer" ).pagecontainer( "load", "profile.php" )
});
or
$("#profilel").click(function(){
$.get("profile.php")
.done(function(data){
$( ":mobile-pagecontainer" ).html(data);
});
});

jquery and Jplist jquery plugin table data with many pages

$( '#list' ).on( "click", ".list-item", function( event ) {
event.preventDefault();
console.log( "toto" + $(this).text());
var $this = this;
$(this).addClass('selected');
$('.list-item').not($this).removeClass('selected');
});
Hello, I have a problem with the line $('.list-item').not($this).removeClass('selected'); which doesn't work for div present in another pages when navigated. thank you for your help.
I don't know that particular plugin, but I looked into it and it seems it caches the 'other' pages somewhere while they are not displayed. At the moment your script is executed the elements are not existing in the DOM.
You will have to run a code similar to yours everytime the plugin loads a page:
// event "loadNewPage" is not an actual event; you will have to figure out which callbacks/hooks/events your plugin offers
$( '#list' ).on( "loadNewPage", function( event ) {
$('.list-item').removeClass('selected');
});
This only works if your changes are cached as well, otherwise you will have to save the selected element in your javascript and reselect it everytime the plugin displays a page.
In the JPList plugin, when you navigate only the content of the div elements are replaced and not the complete div. So, you'll have to reset the selected class upon navigation or any such event.
While initializing the plugin with default options use 'redrawCallback'
i.e.,
redrawCallback: function() {
$('.list .selected').removeClass('.selected');
}
The above code will reset the selected class upon the div.
and also update your code to be
$( '#list' ).on( "click", ".list-item", function( event ) {
$('.list .selected').removeClass('selected');
event.preventDefault();
console.log( "toto" + $(this).text());
var $this = this;
$(this).addClass('selected');
});
Try this approach, as this would first remove the existing selected class from the elements and add selected class to clicked element

jQuery Mobile no styling after using Ajax .load()

I'm using an Ajax call to get a list of checkboxes to appear in a panel after the user presses login. The data loads in fine but there is no JQM styling on it, its only the default browser styling. The id of the checklist is filterlist, and the div where I want to put it is called test1.
javascript:
$(document).on('click', '#loginbutton', function() {
$( "#test1" ).load( "test.html #filterlist" );
});
Try using
$(document).on('click', '#loginbutton', function() {
$( "#test1" ).load( "test.html #filterlist" );
$( "#test1" ).trigger ('create');
});
this will apply the jquery mobile styling to the newly created elements, if it is loading a page you might try 'pagecreate' instead

Categories