wordpress - slideToggle, fadeIn, fadeOut animation shifts up during animation -

-

i'm creating simple "read more/read less" button wordpress site when pressed reveals hidden content using slidetoggle. it's in form of wordpress plugin. buttons fadein , fadeout. , i'm using php/html display page.

everything working great except 1 little hiccup. reason, when read more button clicked , animation starts, content div (or p tag - can't tell sure) starts few pixels down , shifts after finishes animation. , vice versa, when read less button clicked, animation same thing.

i've looked through php , css , can't find anything. i've inspected elements , removed css way it's not helping.

i've included code , short video show mean.

here link video: https://youtu.be/3lnmapglypi

javascript

jquery('.wpsm-content').addclass('wpsm-content-hide'); jquery('.wpsm-show, .wpsm-hide').removeclass('wpsm-content-hide'); jquery('.wpsm-show').on('click', function (e) {     "use strict";     var currentcontent = jquery(this);     function complete() {         jquery(currentcontent).next('.wpsm-content').slidetoggle(800);     }     jquery(this).fadeout(200, complete);     e.preventdefault(); }); jquery('.wpsm-hide').on('click', function (e) {     "use strict";     var wpsm = jquery(this).parent('.wpsm-content');     function complete() {         wpsm.prev('.wpsm-show').fadein(200);    // read more     }     wpsm.slidetoggle(1250, complete);     e.preventdefault(); });

css

.wpsm-show a, .wpsm-show:active, .wpsm-show:visited {    cursor: pointer;    text-decoration: none; } .wpsm-show:hover {    cursor: pointer;    text-decoration: underline; } .wpsm-hide a, .wpsm-hide:active, .wpsm-hide:visited {    cursor: pointer;    text-decoration: none; } .wpsm-hide:hover {    cursor: pointer;    text-decoration: underline; } .wpsm-content-hide {   display: none; }

php/html

add_shortcode( 'show_more', 'wpsm'); function wpsm( $attr, $smcontent ) {   if (!isset($attr['color'])) $attr['color'] = '#cc0000';   if (!isset($attr['list'])) $attr['list'] = '';   if (!isset($attr['more'])) $attr['more'] = 'show more';   if (!isset($attr['less'])) $attr['less'] = 'show less';   $wpsm_string  = '<div class="show_more">';   $wpsm_string .= '<p class="wpsm-show" style="color: ' . $attr['color'] . ' ">';    $wpsm_string .= $attr['list']. ' '  . $attr['more'];   $wpsm_string .= '</p><div class="wpsm-content">';   $wpsm_string .= $smcontent;   $wpsm_string .= ' <p class="wpsm-hide" style="color: ' . $attr['color'] . ' ">';    $wpsm_string .= $attr['list']. ' '  . $attr['less'];   $wpsm_string .= '</p>';   $wpsm_string .= '</div></div>';   return $wpsm_string; }  add_action( 'wp_enqueue_scripts', 'sm_scripts'); function sm_scripts (){   $plugin_url = plugins_url( '/', __file__ );   wp_enqueue_style (     'sm-style',     $plugin_url . 'wpsm-style.css'   );   wp_enqueue_script (     'sm-script',     $plugin_url . 'wpsm-script-mine.js',     array( 'jquery' ),     '1.0.1',     true   ); }  add_action('wp_footer', 'sm_scripts'); ?>


Comments

Post a Comment

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

-
i have method method discussed , successful data entered 1 when more 1 can not database this programs my php form : <form class="form-horizontal" id="form-produk"> <div class="control-group" > <label class="control-label" for="kelas">kategori</label> <div class="controls"> <select class='form-control' name='id_kategori'> <?php $tampil=mysql_query("select * kategori order nama_kategori"); if ($id_kat==0){ echo "<option value=0 selected>- pilih kategori -</option>"; } while($w=mysql_fetch_array($tampil)){ if ($id_kat==$w[id_kategori]){ echo "<option value=$w[id_kategori] selected>$w[nama_kategori]</option>"; } else{ echo "<option value=$w[id_kategori]>$...
Read more

multithreading - Exception in Application constructor -

-
i wanna write snake game javafx , there exception don't know , want know how fix it. ( know it's not complete yet ) and want know , class extends application ( start override ) main in other programs? see , here not static void main bc didn't need, if want add main shoud do? it's exeption... exception in application constructor exception in thread "main" java.lang.nosuchmethodexception: main_snake.main([ljava.lang.string;) @ java.lang.class.getmethod(class.java:1819) @ com.intellij.rt.execution.application.appmain.main(appmain.java:125) and code : import javafx.animation.animationtimer; import javafx.application.application; import javafx.event.eventhandler; import javafx.scene.scene; import javafx.scene.canvas.canvas; import javafx.scene.canvas.graphicscontext; import javafx.scene.input.keyevent; import javafx.scene.layout.borderpane; import javafx.scene.paint.color; import javafx.stage.stage; import java.util.arraylist; /** * creat...
Read more

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -

-
i realize similar post others (e.g. this one ), there details missing posts might significant case. to start with, here's simplified program: #include "stdafx.h" #include <windows.h> #include <wincrypt.h> int _tmain(int argc, _tchar* argv[]) { // usage: certextract certpath char keyfile[] = "c:\\certificates\\public.crt"; byte lp[65536]; security_attributes sa; handle hkeyfile; dword bytes; pccert_context certcontext; sa.nlength = sizeof(sa); sa.lpsecuritydescriptor = null; sa.binherithandle = false; hkeyfile = createfile(keyfile, generic_read, file_share_read, &sa, open_existing, file_attribute_normal, null); if (hkeyfile) { if (readfile(hkeyfile, lp, getfilesize(hkeyfile, null), &bytes, null) && bytes > 0) { certcontext = certcreatecertificatecontext(x509_asn_encoding, lp, bytes); if (certcontext) { printf("yay...
Read more