I am trying to make a responsive navbar menu, just like the navbar of bootstrap but I can not use jquery, I am using Mootools. Have anyone done this behavior before?
Thanks.
Code:
You should definitely provide more info, also Dimitar Christoff is right saying that responsiveness is powered by media queries.
But I can imagine your problem is actually to toggle the collapsed menu when clicking over the menu button, if this is the case I used to use this code, with mootools and bootstrap 3.
/* bootstrap */
window.addEvent('load', function() {
$$('button[data-toggle=collapse]').each(function(btn) {
var target = $(btn.get('data-target'));
btn.addEvent('click', function() {
target.toggle();
})
});
})
Related
i have a modal with id #exampleModal , and there are three more modals in website.
What i want is when i open the #exampleModal the .modal-open class should have this css
.modal-open{
overflow-y : "scroll"
}
And when the other three opens they should have the default that bootstrap gives?
Good practice if you have multiple Modals (or multiple carousels/accordions etc) is to make sure they all have a different id. This is important for W3C validation especially.
Best Bootstrap Tip - The id can be anything you want. Then you can style that id any way you want.
Let's say you label each one as id="modal-1" and id="modal-2" etc.
Then, in your CSS all the id's can be edited independently of each other...
#modal-1{
/* Your styling */
}
#modal-2{
/* Your styling */
}
Bootstrap runs this automatically when modal is shown:
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('shown.bs.modal', function (event) {
exampleModal.style.overflowY = "scroll";
})
So I'm having a really hard time figuring out why I can't collapse my accordion tabs using the Foundation 6.3 responsive tabs (https://foundation.zurb.com/sites/docs/responsive-accordion-tabs.html). I am trying to use their javascript reference to implment: (https://foundation.zurb.com/sites/docs/accordion.html#up).
This only seams to work for the accordion but not responsive accordions tabs.
Code Pen to demonstrate:https://codepen.io/jinch/pen/RQxQNG
//This code only collapses the "Reugular Accordion" and NOT a responsive Accordion?
$('#regulare-accordion').foundation('up', $('#regulare-accordion .accordion-content'));
//This code does not working for the the "Responsive Accordion Tab"?
$('#responsive-tab-accordion').foundation('up', $('#responsive-tab-accordion .accordion-content'));
Does anyone know of a reason or solution if using the responsive tabs? I need to close all on small screens if possible.
So far the responsive tab accordion component does not implement the methods of the used plugins.
You can either collapse them with CSS or clonse the methods of the accordion plugin and execute their code.
See https://github.com/zurb/foundation-sites/pull/10961 which is not yet implemented.
I have a webpage with a simple navbar. The actual webpage can be seen here, and a CodePen demo can be seen here. In the CodePen demo, everything works fine. If I hover over a dropdown, the menu appears below. I can then seamlessly move my mouse down over that dropdown menu and select an option. In comparison, on the actual production website, things are not so smooth. The dropdown appears as expected, but as soon as I move my mouse down over the dropdown it disappears - it doesn't seem to register the hover event.
I've tried the following:
Setting z-index to be 1000 or 10000000 in the css for .dropdown
Doing step 1 with the added qualifier of !important;
In Chrome dev tools I tried giving other parts of the webpage lower z-index values, and it changed nothing
Notably, the drop-down is definitely hidden behind stuff. For example if I hover over Alumni, the options in the drop-down are occluded by the label of the website (in white font).
Is there some way other than messing with the z-index with which I can force my dropdown to register the hover event and work as expected? I am comfortable using Javascript, HTML, CSS, and any normal libraries such as Bootstrap or JQuery. Thanks!
EDIT: #lalitbhakuni's answer solved the problem for me. That said, it is possible that people who are dealing with the specifically identical circumstance to my own will run into this and wonder how to implement the CSS solution without access to the CSS for the entire web-page. Here is how I did it, in my banner code injection:
<script>
window.onload = function() {
var header = document.getElementById('header');
header.style.zIndex = 10;
};
</script>
Your header is overlapping your navbar. The y nav dropdown is not working as a result. To fix this, can, you can please define header z_index as follows:
.transparent-header #header {
z-index: 10;
}
I have a working click-able, collapsible div script:
$(document).ready(function() {
$(".toggle-content").hide();
$(".byline").click(function() {
$(".toggle-content").hide();
$(this).next(".toggle-content").slideToggle(500);
});
});
It started out just like this:
$(document).ready(function() {
$(".toggle-content").hide();
$(".byline").click(function() {
$(this).next(".toggle-content").slideToggle(500);
});
});
Thsi second example worked nicely, but it made it so the user could open all the divs and this made the page too tall. I added the hide() function, but now it's causing this other issue.
I would like to add functionality that when each div is clicked again, it actually closes it (hides it). Then, all divs would be closed (hidden) at this point. Currently, one div is always open (visible). I want both functions if possible...
I'm using accordion elsewhere (I know this could be used here) but I kind of need to get this going quickly so I'm not trying to implement the simpler script here. If I could just find a fix using the existing script, I'd be stoked.
EDIT
I've edited the fiddle to show the improved fix:
http://jsfiddle.net/nicorellius/gsDVS/
This should work. It will ignore hiding the content related to the clicked element and will slideToggle that div accordingly
$(document).ready(function() {
$(".toggle-content").hide();
$(".byline").click(function() {
var $next= $(this).next(".toggle-content");
$(".toggle-content").not($next).hide();
$next.slideToggle(500);
});
});
I use Twitter Bootsrap's navbar to put a navigation bar on top of my website. (class="navbar navbar-fixed-top")
I also need to use Google Translate widget.
I use tools written here.
But when user selects a language to translate, Google puts a horizontal navbar on top of my page.
That bar masks my own navbar.
I need my navbar appear just below the Google's horizontal bar.
Should I use z-index ? But in that case one of them will mask other navbar?
Is there a better solution? To show one of them below another?
Thank you
edit: when I add following code to the top of my page, Google puts a navbar before my navbar, and everything seems well. But the bad thing is, Google's navbar is visible for every user. I need to show only to the users that doesn't speak my page's language.
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'fr',
layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
edit: I suppose there is no option like "show google translate if language is different" and "show horizontal bar. If i load horizontal bar without considering the user's language everything is working fine. But the native speakers see the Google Translate bar. Which takes space from my page.
This would be a ugly solution but a quick one.
After clicked the tag will automatically add class="translated-ltr" or "translated-rtl". Use these class to hack your fixed header.
html.translated-ltr .navbar-inner, html.translated-ltr .navbar-inner { padding-top: 39px; }
i use jQuery to check it, im using this code :
setInterval(function(){
if ( $('html').hasClass('translated-ltr')) {
$('.navbar').css('margin-top','30px');
}else{
$('.navbar').css('margin-top','0px');
}
}, 3000);
the easy option would be
<div class="navbar-inner" style="padding-top:39px;">
Just want to share my experience, I have used Arthron's answer and it works.
But have a little bug if click the translate / show the original on the translate bar, the logic return false when the actual is true (translated bar visible). So I add this and perfect :
document.getElementsByClassName("skiptranslate")[1].style.visibility=='visible'
&& document.getElementsByClassName("skiptranslate")[0].style.display!='none'
full code :
setInterval(function(){
if ( $('html').hasClass('translated-ltr') ||
(document.getElementsByClassName("skiptranslate")[1].style.visibility=='visible' &&
document.getElementsByClassName("skiptranslate")[0].style.display!='none')) {
$('.navbar').css('margin-top','30px');
}else{
$('.navbar').css('margin-top','0px');
}
}, 500);
In your css:
body {
padding-top: 60px;
}
.navbar-fixed-top {
position: relative;
top: -60px;
}