I want to display the section's name on the dropdown tab using bootstrap scrollspy. When I scroll now, I only see section (which I would exclude) and I would like to see the current section in the dropdown bar as in when its not opened. So when I touch section 2 while scrolling I would like to see section 2 in the dropdown bar on top. At first, of course, I would like the bar to display section 1.
This is my code: https://codepen.io/alyssaalex/pen/rNNGrLy
I would appreciate it if someone could provide some help in this regard. Thanks!
You need to trigger an event on section change. And then get the section name and put on the dropdown title.
add this code in your JS
$(".navbar").on("activate.bs.scrollspy", function(){
$("#section_ddl").html('');
var sections = new Array("Section 1", "Section 2");
var x = $(".nav li.active > a").text();
if(sections.indexOf(x) != -1){
$("#section_ddl").html(x + '<span class="caret"></span>');
}
else {
$("#section_ddl").html('Section <span class="caret"></span>');
}
});
If you add/remove sections, you only need to put section names in the sections array.
Note: section_ddl is the id of the dropdown.
You can see the working example here
Related
Im trying to do; show divs when click on check-box radio button. I made it with jquery but when you load page all my divs are visible. You have to click my first check-box radio button to make other divs invisible. or just click other check-box radio buttons.
I tried
#row2 {
display:none;
}
But when I added this to css, if you click first check-box radio button(which is related to div row2) div is not visible and and it is not working.
Any other solution for when you open page I just want to see only div (row2) which is checked. I dont want to see other divs when page load.
Thanks...
Demo Link: https://rexin-demo.netlify.app/main.html
Ps: Pics and button are not visible on jsfiddled cuz of assets. Better to look it via demo link.
https://jsfiddle.net/t4e13xvj/
Trigger the click by adding .filter(':checked').click() at the end of the input's click event .. Try it
$(document).ready(function(){
$('input[type="radio"]').click(function(){
var inputValue = $(this).val(); // use .val() instead of .attr('value')
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
}).filter(':checked').click();
});
Also I prefer to use change instead of click for radio and checkbox inputs
$(document).ready(function(){
$('input[type="radio"]').on('change' ,function(){
if(this.checked){
var inputValue = $(this).val();
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
}
}).filter(':checked').prop('checked' , true).change();
});
OR With only css you can use
.box:not(.product){
display : none;
}
I use summernote on the bootstrap modal.But when click the dropdown item on the toolbar, the dropdown menu not show on the right place or even not exit the drop down DOM.I'll show you the picture below:
enter image description here
And I've search for a long time in summernote github issue list and stackoverflow.I try add "dialogsInBody: true", but not working.Anyone can help me about this problem.Thank you!
use $('.dropdown-toggle').dropdown();
Try this. Here work fine.
callbacks: {
onInit: function() {
//when inside a modal, re-link the dropdown
var thisNote = $(this);
if(thisNote.closest('.modal').length>0){
thisNote.next().find('.dropdown-toggle').dropdown();
}
}
}
I have to remove nav bar after click on login i.e on login page I want to remove nav-bar...How to do this please help me I am new in yii2
If the main reason is do not have the navbar when the user is not logged in you can always wrap the navbar inside an if statement checking if the user is logged in first before show the navbar:
if(!Yii::$app->user->isGuest) {
// my navbar
}
Now, if you meant specifically for this controller/action, you can accomplish that with checking the controller and the action inside your layout:
if (Yii::$app->controller->id !== 'YourController' && Yii::$app->controller->action->id !== 'YourAction') {
// my navbar
}
Or you can specify a layout in your action:
public function actionYourAction()
{
$this->layout = 'layoutName';
}
I have:
A list (UL,LI) with Bootstrap icon
Search bar with icon and an field.
I want that when I click on list item, then the related icon should be placed on top, and that should repeat with all (list items).
Here is the bootply.
Bind a click event to ul li and get the class on the clicked element.
Then apply the same class to the search bar icon element.
Like this..
$('.searchlink ul li').click(function(){
var className = $(this).find('.glyphicon').attr("class");
$(".searcati").find("span.glyphicon").attr("class", className);
$(".searchlink").slideToggle("slow");
return false;
});
Updated bootply : http://www.bootply.com/Fp6zfoiIZr
I'll try to explain:
I have numerous div classes, but for the sake of simplicity, let's say I only have 3.
Someone is viewing DIV 1, and I want to give them the option of only printing DIV 1, omitting 2 and 3.
However, on the same page, I would like to give them the option to ONLY PRINT DIV 2. Or only print DIV 3.
I think I get how you can omit certain things from getting printed. But how can you select a section here or there on the same page to be printed with a print link.
Thanks,
Tracy
You can use jQuery to show/hide divs. Read the jQuery tutorial:
http://docs.jquery.com/Tutorials
The code will look this way:
<script>
function showDiv(n) {
$('.divs').hide();
$('#div_'+n).show();
}
$(document).ready(function() { showDiv(1); });
</script>
<a href='javascript:showDiv(n)'>show div n</a>
<div class='divs' id='div_n'>I'm div n</div>
There are many related posts on printing div content, this particular question was still open though it was asked in '10.. Following JavaScript function can be used for printing content of a selected Div tag. Hope this helps. Declaimer: I used some of the existing answers, fixed/enhanced code/error(s) to work with (and tested on) IE-8.
function printDiv(divName) {
var divToPrint = document.getElementById(divName);
var newWin = window.open('', 'PrintWindow', 'width=400, height=400, top=100, left=100', '');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');
newWin.document.close();
setTimeout(function () { newWin.close(); }, 10);
}
Call printDiv from anywhere in page or from within selected Div. Here is test link:
Print Customer Data
Print Order Data
Assign respective IDs to Div that is to be printed:
<div id="divCustomerData">Div Contents goes here... </div>
The only catch right now is it loses css styles. I'll update response when i get a chance to fix it. Thanks.
https://github.com/jasonday/jquery.printThis
I would give each div an id, and then using the above plugin (i wrote) specify according to div id.