jQuery conflcits with the tabs of the theme Sahifa.

Hello Jahyr, i saw that you have solved this problem, How you did it? I’m having this problem too! Thanks

@lmvuong1997: If you require assistance then, as per the Forum Welcome, please post your own topic instead of tagging onto someone else’s.

Yes, I solved the problem. I noticed that when i use the tab this line of code is added too:

<script type='text/javascript' src='https://wwecuador.com/wp-includes/js/jquery/ui/tabs.min.js'></script>

and it causes the problem.

To solve it. What i did was first go to:

…/wp-content/plugins/gplus-comments/includes/lib/frontend.php

and edit this part:

function comments_evolved_enqueue_scripts() {
  echo '<!-- Comments Evolved plugin -->' . PHP_EOL;
  echo '<script>jQuery("#comment-tabs").tabs();</script>' . PHP_EOL;
  echo '<!-- //Comments Evolved plugin -->' . PHP_EOL;
}
add_action('wp_footer', 'comments_evolved_enqueue_scripts', 4269);

(This code is added to the footer of our template when we use the comments plugin)

Whit this:

function comments_evolved_enqueue_scripts() {
  echo '<!-- Comments Evolved plugin -->' . PHP_EOL;
  echo '<script type="text/javascript" src="https://YOURDOMAIN.com/wp-content/themes/sahifa/js/tabs.min_2.js"></script>' . PHP_EOL;
  echo '<!-- //Comments Evolved plugin -->' . PHP_EOL;
}
add_action('wp_footer', 'comments_evolved_enqueue_scripts', 4269);

(In this way we avoid the call of the plugin and instead we call the script of sahifa. Please replace YOURDOMAIN whit yours.)

———————————————————————————————————-

Then i go to: ../wp-content/plugins/gplus-comments/includes/templates/container.php

And change this:

<!-- comment-tabs -->
<script type="text/javascript">
jQuery(document).ready(function($) {
  window.comment_tab_width = $('#comment-tabs').innerWidth();
});
</script>

Whit this:

<!-- comment-tabs -->
<script type="text/javascript">
jQuery(document).ready(function($) {
  window.comment_tab_width = $('#comment-tabs').innerWidth();
});
</script>
<script type="text/javascript">	jQuery(document).ready(function($){
jQuery("ul.controls").tabs("> .embed-container");
}); </script>

—-

Change this too:
<ul class="controls inline clearfix">

Whit this:
<ul class="tabs-nav controls inline clearfix ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">

—-

Also Change this:
echo "<li" . $active . " id='".$tab."-control'><a href='#".$tab."-tab'>";

Whit this:
echo "<li id='".$tab."-control' class='active ui-state-default ui-corner-top' role='tab'><a href='#".$tab."-tab' class='ui-tabs-anchor' rol='presentation'>";

—————————–

Also this:
echo "echo "<div id='" . $tab . "-tab' class='embed-container content-tab clearfix'>" . PHP_EOL;

Whit this:
echo "<div id='" . $tab . "-tab' class='pane embed-container content-tab clearfix' rol='tabpanel'>" . PHP_EOL;

——————————————————————————————

Then i edited this file:
…/wp-content/plugins/gplus-comments/assets/styles/plugin.css

to put the check in the “actual section” in my case i only adeed this code to the final:

#comment-tabs a.ui-tabs-anchor.current {
    margin-bottom: -1px;
    padding-bottom: 7px;
    background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAAN0lEQVQ4y2NgGAWjgAA4cODAfxAmWzMMkGwIsmaSDcGmmWhD8GkmaAgxmnEaQopmDEPI0YxsCABrFhMg5A67XAAAAABJRU5ErkJggg==") no-repeat scroll center bottom;
    border: medium none !important;
    outline: medium none !important;
}

———————————————————————————————

Finally i go to:
../wp-content/themes/sahifa/js/tabs.min.js

And i changed the name of the file to this:

../wp-content/themes/sahifa/js/tabs.min_2.js

Please tell me if you can solve your problem too, to close this topic. ??

Thanks for your help! Seem like the tab has been shown but the comment box of the tab doesn’t show automatically until I press another tab. You can see this on here: https://dacvn.com/2015/11/24/cau-do-ve-ba-bong-den/

I was checking your code and exclusively for your site, the solution i found is go again to this file:

…/wp-content/plugins/gplus-comments/assets/styles/plugin.css

and add to the final:

#gplus-tab {
display: block !important;
}

Tell me if it’s work.

It made the the g+ comment block always appear although another tab is active ??