well wisherHi everyone i would like to know that how can we create a affix section in my wallpress sidebar as in the official designwall site i really like the feature the best part is the css used over there i wuold like to have a idea about it as well that how to show the progress of the section read with the scroll as done in every guide page for eg here http://designwall.com/guide/dw-question-answer-plugin/#Style_integration i know its bootstrap affix and scroll spy thing but an idea to integrate it with as done in your site will be really appreciated thanks
Dominic Hi Well !
To create an affix sidebar section as in our website, you can use the Q2W3 Fixed Widget (Sticky Widget) plugin. please find the plugin here: https://wordpress.org/plugins/q2w3-fixed-widget/
Regards,
well wisherthank you for bringing the plugin into notice @dominic however my main question was about creating an affix section with jumplist to different headings of the article and scroll spy thing for monitoring the progress of the amount of the section read in that particular section of the article as seen in the link i provided to one of your guide in my question above(the progress can be seen as we scroll down by increase in bar) an idea to do that thing will be highly appreciated thanks
thank you for bringing the plugin into notice @dominic however my main question was about creating an affix section with jumplist to different headings of the article and scroll spy thing for monitoring the progress of the amount of the section read in that particular section of the article as seen in the link i provided to one of your guide in my question above(the progress can be seen as we scroll down by increase in bar) an idea to do that thing will be highly appreciated thanks
aamir hussainthis is test response.
Jackie LordYou can read more about Affix at this link: http://getbootstrap.com/2.3.2/javascript.html#affix
Below is the code we wrote for the Navigation on Guide page. You want to display any heading into the navigation, you need to input name=”…” in the heading tag:
<div class="guide-nav" data-spy="affix" data-offset-top="200">
<h3 class="small-title">Content</h3>
<ul class="list nav">
<?php preg_match_all("/<h3 id=\"(.*?)\">(.*?)<\/h3>/is", get_the_content(), $matches); ?>
<?php $j = count($matches[0]); for($i=0;$i<$j;$i++) { ?>
<li><a href="#<?php echo $matches[1][$i]; ?>"><?php echo $matches[2][$i]; ?></a></li>
<?php } ?>
</ul>
</div>
Improv aganzaSuper dummy question (I’m using DW Minion and loooove your nav-bar on your website):How do I place this in the template? I have custom CSS, should I copy the above code into that? Or (what I’ve tried) is to put it into a PHP Code Widget on the sidebar. But I don’t know how to make it “link” to the headings.
Or say I wanted to “tag” an area on my post, and put a heading in this navbar to go to that area, how’d I do that? Thanks!
CoverPlease send me your website for further checking
i extracted a same kinda code from some theme which was using it as widget and turned it into a individually usable plugin
Jackie LordThat’s cool, we will consider and build this function into a separate plugin in the near future maybe.
that will be great 🙂
Please login or Register to submit your answer