well wisher
asked 7 years ago

Hi 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

4 Answers
DominicStaff
answered 7 years ago

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 wisher
replied 7 years ago

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

well wisher
answered 7 years ago

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 hussain
replied 6 years ago

this is test response.

Jackie Lord
answered 6 years ago

You 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 aganza
replied 6 years ago

Super 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.

Improv aganza
replied 6 years ago

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!

Cover
replied 6 years ago

Please send me your website for further checking

well wisher
answered 6 years ago

i extracted a same kinda code from some theme which was using it as widget and turned it into a individually usable plugin

Jackie Lord
replied 6 years ago

That’s cool, we will consider and build this function into a separate plugin in the near future maybe.

well wisher
replied 6 years ago

that will be great 🙂

Powered by DW Question & Answer Pro