I am using jasny bootstrap offcanvas navbar ( http://jasny.github.io/bootstrap/components/#navmenu-offcanvas ) which will close whenever a click event occurs elsewhere on the page. However, we have a Twitter feed that has been modified to move between 3 different Twitter accounts. In order to switch between them a click is triggered. This is causing the navmenu to close each time the tweets switch and I cannot seem to prevent it.
Here is the twitter scroll code:
var tabCarousel = setInterval(function() {
var tabs = $('#twittertab > li'),
active = tabs.filter('.active'),
nextone = active.next('li'),
toClick = nextone.length ? nextone.find('a') : tabs.eq(0).find('a');
toClick.trigger('click');
}, 5000)
I've tried applying preventDefault() and stopPropagation() to the trigger('click') but I am very inexperienced with jQuery and am really just guessing where to put this.
For anyone having a similar issue, the answer is simple if you don't mind sacrificing the navbar closing with any click outside of the navbar itself. Ie, the solution means clicking outside the navbar will not close it.
Simply add 'data-autohide="false"'to the offcanvas element.
I then added a function to toggle the navbar state on click of a link within the navbar as follows;
$('#my-menu > li > a').click(function() {
$('.navmenu').offcanvas('toggle');
});
This means if you have links that do not go to another page, but an anchor somewhere on the same page, the menu will close when you click to move to that section.
If you are want to close the navmenu on inside link click then you must add "data-autohide="false"" on this
<div class="navmenu navmenu-default navmenu-fixed-right offcanvas">
and add this script $(document).ready(function(){$('.navmenu a').click(function() {
$('.navmenu').offcanvas('hide');
});})
in your code. that's it.
Note: It's work like charm in single page application.
Related
I want to have a 'plus' icon when the accordion is collapsed, and a 'minus' icon when the accordion is 'expanded'.
I have checked other answers on the internet, but what am I asking is can't I do something simple like this? (For learning purposes)
Say I place both the plus and minus icons on the accordion
<i class="fa-plus"> <i class="fa-minus">
As I see, when the accordion is collapsed, it has a collapsed class, so I'd like to hide and show both the icons as the collapsed class gets toggled on click. Why doesn't it work as the DOM gets updated when the accordion is clicked?
if(document.getElementById('candidateName').classList.contains('collapsed')) {
document.querySelector('.fa-minus').style.display = 'none';
document.querySelector('.fa-plus').style.display = 'block';
}
else {
document.querySelector('.fa-plus').style.display = 'none';
document.querySelector('.fa-minus').style.display = 'block';
}
Please note that this is just for learning purposes. I want to understand this, please don't get offended. Thankyou
Glad you are learning. Apologies if my response comes across in a different plane than your current level.
When you run JS, you're executing the code in the current state of the content. It appears that you are hoping for the icon to change from a + to a - and vice verse when the accordion is expanded/collapsed.
What you need to do, is watch the page for changes to the accordion - these are called event listeners. Bootstrap has some really convenient ones that you can use for this. Since the Accordion uses collapse events API. From there, you can watch the page for changes, and execute the change you want whenever that change happens.
const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
// do something...
})
I have bootstrap form in my website
when a user focus on textfield the page don't scroll to view
so i found this JQuery code and apply it
$(":input[type='text']").focus(function () {
var e = $(this);
$("html, body").animate({
scrollTop: e.offset().top - 100
}, 400)
it is working but it is also affecting the links in the page
create your account.
when i click the link it does the scroll to the top of the page if i click it again it goes to the login page. I have to click the link two times to go the login page.
did i miss something? as i know my Jquery code is obviously selecting input of type text why it is affecting the tags
I just found the solution using this post
I changed the event from focus to click and it resolved my problem.
any explanation?
I am Playing around with
http://codepen.io/ettrics/pen/Jdjdzp
But because of the
var closers = $qsa('.modal__close'); // an element used to close the modal
If you put a link inside the container it wont work with left click but does with right click -> open link in new tab.
Is there anyway to keep the close element but also make it so links work?
I have a div in the middle of my web page that is placed in front of an iframe the with links along side of it. I would like to hide the div once any one of the links are clicked. How would I go about doing this using javascript? I am very new to this so please be as descriptive as possible so that I can understand.
Here is some of my html code. I have a number of links that appear in an iframe. I have the logo div positioned on top of the iframe and it loads when you enter the site. However I want to hide the logo when you click on anyone of the links.
<li>My Resume</li></br>
<li>My Course Work</li></br>
I used the jquery code noted by Dolours below along with extra coding within my the body of my html code, when you click on a link then the div disappears as I intended but then it reappears once you click on another link. I want it to disappear and stay away. Here is the additional code that I came up with
About Me
Does anyone know how I can make my logo stay away?
You can do this using jQuery:
// Get the iFrame jQuery Object
var $MyFrame = $("#iframeid");
// You need to wait for the iFrame content to load first
// So, that the click events work properly
$MyFrame.load(function () {
var frameBody = $MyFrame.contents().find('body');
// Find the link to be clicked
var link = frameBody.find('.link_class');
// Set the on click event for the link
link.on('click', function() {
// Hide the div inside the iFrame
$('#divID').hide();
});
});
You can use the code below
$('a').click(function() {
$('#divID').hide();
});
Assuming all links will load the iframe.
Trying to have my navigation have an on click and selected state, but I am not able to do so with this code (website is: http://bit.ly/rgwsite )
$('nav li a').click(function() {
$(this).parent().addClass('on').siblings().removeClass('on');
});
nav li is as follows
<nav>
<li class="highlt">
<span>Home</span>
</li>
The reason we need to use a jquery/javascript action to add the class to the navigation is because it doesn't refresh when a new page loads. For instance, when you're on the home page and click on the tab "Experience RGW", it only loads the content for that page below the header (within the "#ajax" div). Currently, none of these scripts are working. There is no reason they shouldn't... could there be something else causing the page not to recognize the jquery script and run it on-click? The main reason I ask is because I've tried to test the function and add an alert, but even that didn't work
Thanks in advance!
siblings has your current element selected, you don't want to remove his 'on' class.
$('nav li a').click(function() {
$(this).parent().siblings().removeClass('on');
$(this).parent().addClass('on');
});
edit : nvm, your code works fine : look at this jsfiddle.
re-edit : I'm totally wrong, siblings does not contain the current element.
re-re-edit : If you link to another page (href="index.php"), the page will be reloaded (or a new one will be loaded) and your JavaScript click action will be forgotten, could it be the error?
You might wanna try it like this:
$(this).parent().siblings().removeClass('on');
$(this).parent().addClass('on');
What you did is add the class "on" to the LI and then removed it with .siblings().removeClass('on');