I am making a mobile application with jQuery Mobile, but I have a problem with the Navbar Widget.
Here is the relevant part of my HTML code:
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar">
<ul id="abc">
<li>a</li>
<li id="a">b</li>
<li id="b">c</li>
<li id="c">d</li>
<li id="d">e</li>
<li id="e">f</li>
<li id="f">g</li>
</ul>
</div>
</div>
I want to change the navbar depending on the situation, like this:
f(variable=='?'){
$("#a").hide();
$("#b").hide();
$("#c").show();
$("#d").show();
$("#e").show();
$("#f").show();
}else if(variable=='?'){
$("#a").hide();
$("#b").hide();
$("#c").hide();
$("#d").show();
$("#e").show();
$("#f").show();
}
But the Navbar is still not displayed the way I want. Also, the Navbar does not appear to be displayed in a well-designed way.
How can I obtain this?
I think you're looking for Window.matchMedia which allows you to set a rule like "when the screen size is less than 480px, do this, else other thing".
Here's an example from w3
function myFunction(x) {
if (x.matches) { // If media query matches
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
I'd add that this is also accomplishable via CSS which a lot of folks do to handle this kind of thing - see libraries like Bootstrap or MaterialUI. For more info media queries - check this MDN out.
You have a few errors and unecessary commands in your HTML code example. Consider this simplified example HTML code:
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar" id="mynavbar">
<ul>
<li>Back</li>
<li id="a">a</li>
<li id="b">b</li>
<li id="c">c</li>
<li id="d">d</li>
</ul>
</div>
</div>
Likewise JavaScript code:
let variable = "?";
//let variable = "";
if (variable == '?') {
$("#a").hide();
$("#b").hide();
$("#c").show();
$("#d").show();
} else {
$("#a").hide();
$("#b").hide();
$("#c").hide();
$("#d").show();
}
Check out this Fiddle.
Note that Navbar widget version 1.4.5 official demosite will display differently if the number of items exceeds 5 - in which case the items will be displayed in two columns with multiple rows.
JQM doesn't support out-of-the-box a variable number of navbar buttons. At widget creation, the framework is checking how many items there are inside the list. Then, to get this nice-looking equal-width-buttons effect, the framework is applying some CSS rules: either a two-, three-, four- or five-columns style:
two-columns: each column has 50% width (grid A)
three-columns: 33% width (grid B)
four-columns: 25% width (grid C)
five-columns: 20% width (grid D)
To get an idea of that CSS rules, see here a description of the Grid widget: Grids - jQuery Mobile Demos.
Now, I believe the simplest solution to Your needs is to check how many toolbar buttons You need:
Example: adding an extra column to get a total of max. 6 columns:
.ui-grid-e {
overflow: hidden;
}
.ui-grid-e > .ui-block-a,
.ui-grid-e > .ui-block-b,
.ui-grid-e > .ui-block-c,
.ui-grid-e > .ui-block-d,
.ui-grid-e > .ui-block-e,
.ui-grid-e > .ui-block-f {
width: 16.666%;
}
.ui-block-f {
margin: 0;
padding: 0;
border: 0;
float: left;
min-height: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
and then, depending from Your situation, override the original CSS rule with Your custom style, i.e. 100% / n. of cols. Hidden columns doesn't matter, while the visible columns will take the full-width space.
Related
I'm creating a responsive site. I have a media query set up so that when the screen width drops below 768 px a class (lets call it "hiddenClass") is hidden. Then I implement Javascript to toggle this class into view on a button click. The problem I'm running into is that javascript seems to override the media query. So if I shrink the screen below 768px the "hiddenClass" disappears....then I click the button which displays the "hiddenClass".....then click the button once more to hide it on the smaller device again.....now I expand the window and the "hiddenClass" stays hidden even after it gets to the 768px. If I take out the javascript and shrink the window the "hiddenClass" performs like it should...which tells me javascript is overriding it.
Is there a CSS fix to this? I know I could always check for a window resize event in javascript to display the hiddenClass after it reaches 768px. Was just wondering if this can be handled with CSS....or if javascript is the way to fix it.
Update JSfiddle with JS commented out so you can see how it should work...then add in the JS to see the issue described above. The button is the 'menu' navigation element when you shrink the screen down and "hiddenClass" would be the "menu" class in the li's:
http://jsfiddle.net/or5vy17L/1/
HTML:
<ul>
<li class="menuButton">- Menu -</li>
<a href="index.html">
<li class="menu" >
Home
</li>
</a>
<a href="instagram.html">
<li class="menu" >
Instagram
</li>
</a>
<li class="menu">Clients</li>
<li class="menu">Nutrition</li>
<li class="menu">About Me</li>
<li class="menu">Contact</li>
</ul>
css:
li {
display:inline;
color:$font-color--nav;
cursor:pointer;
font-size:1.5em;
padding: .7em .7em .7em .7em;
//for space between margins
margin-right:-4px;
border-radius:.5em;
}
ul {
text-align:center;
}
.menuButton {
display:none;
}
#media (max-width:768px) {
ul {
padding:0px;
}
li {
display:list-item;
border:1px solid white;
padding:.2em .2em .2em .2em;
border-radius:0px;
}
.menu {
display:none;
}
.menuButton {
display:list-item;
}
}
javascript:
/****
$('ul').on('click', '.menuButton', function() {
$('.menu').slideToggle();
});
****/
The .hiddenclass is staying hidden because it is a inline style, and inline styles override nearly all other styles. You have two options, one is to override the inline style with a CSS, as described in this CSS Tricks post:
<div style="background: red;">
The inline styles for this div should make it red.
</div>
div[style] {
background: yellow !important;
}
JSFiddle Demo
According to this article, this CSS solution works in:
Internet Explorer 8.0
Mozilla Firefox 2 and 3
Opera 9
Apple Safari, and
Google Chrome
Or, use JS or JQuery to remove the inline style when the screen is resized:
$(window).resize(function(){
if($(this).width() >= 768){
$('.hiddenclass').show();
}
else{
$('.hiddenclass').hide();
}
});
JSFiddle Demo
I seem to have come across this issue myself and following the advice here, I've come up with this solution:
window.onresize = function() {
var menu = document.getElementById('nav').getElementsByTagName('ul')[0];
if(window.innerWidth >= 1024) menu.style.display = '';
};
function toggleMenu() {
var menu = document.getElementById('nav').getElementsByTagName('ul')[0];
var link = document.getElementById('nav').getElementsByTagName('a')[0];
if(menu.style.display == 'block') {
menu.style.display = 'none';
link.innerHTML = '▼';
}else{
menu.style.display = 'block';
link.innerHTML = '▲';
}
}
Explanation:
The toggleMenu() function controls the display/hiding of the menu, and the issue presented itself after resizing the window from < 1024px (drop-down style menu) to > 1024px, my normal "desktop" menu disappeared completely. Given that JavaScript inserts styles inline (i.e. as a element attribute, ) then on a resize of 1024 or higher, this inline style should be gone.
Problem fixed.
I have used the affix property to fix the div in a particular pixels from top but this is not working out for me.The sidebar is not fixed out here
Here is the code I am using
<div id="sidebar" style="float:left" class="affix">
<div id="nav-anchor"></div>
<nav class="indexnav">
<ul id="indexlist">
<li>Adolescent gynecology</li>
<li>Breast evaluation</li>
<li>Birth control/emergency contraception</li>
<li>Endometriosis</li>
<li>Fibroids</li>
<li>HPV vaccination</li>
<li>Infertility</li>
<li>Menopause and hormonal issues</li>
<li>Menstrual problems</li>
<li>Minimally invasive surgical approaches</li>
<li>Normal and abnormal Pap smears</li>
<li>Polycystic ovarian syndrome</li>
<li>Premenstrual syndrome</li>
<li>Sexual dysfunction</li>
<li>Sexually transmitted diseases</li>
<li>Vaginitis</li>
<li>Urinary and fecal incontinence</li>
<li>Advanced laparoscopy</li>
<li>Colposcopy services</li>
<li>Gynecology surgical procedures</li>
<li>Need to know more?</li>
</ul>
</nav></div>
Css I used for the above code
#sidebar .affix{
top:10px;
position:fixed;}
Javascript Used
$(document).ready(function(){
jQuery("#sidebar").affix({
offset: {
top: 700
}
});
$("#sidebar").on('affixed.bs.affix', function(){
alert("The left navigation menu has been affixed. Now it doesn't scroll with the page.");
});
});
In your CSS try removing the space in this line:
#sidebar .affix
Also your javascript is quite right either should be something like:
jQuery('#sidebar.affix').css ( { <style definitions go here> } );
unless of course you have some plugin that defines an 'affix' method !
I'm not looking for accordion functionality, but the ability to toggle multiple states when a single element is clicked. I thought this would be extremely simple, and it is. The code simply isn't working. Can anybody take a look at the code and suggest something I might try?
$(document).ready(function(){
$("#nav_header").click(function(){
if (desktopNavigation === 0) {
$("#navigation").css("overflow","hidden");
$("#navigation").css("height","0px");
desktopNavigation = 1;
}
else if (desktopNavigation === 1) {
$("#navigation").css("overflow","visible");
$("#navigation").css("height","auto");
desktopNavigation = 0;
}
else {
}
});
});
The initial value for the variable is as follows:
var desktopNavigation = 0;
The HTML I am trying to effect is in a page with jQuery loaded, and is as follows:
<div id="nav_header" class="trigger">
<ul>
<li>NAV MENU #1 Title</li>
<li>NAV MENU #2 title</li>
<li>NAV MENU #3 title</li>
<li>NAV MENU #4 title</li>
<li>NAV MENU #5 title</li>
</ul>
</div><!--close nav_header-->
<div id="navigation" class="target" style="height:0;overflow:hidden;">
<div id="nav_column">
NAV MENU #1
</div><!--close nav_column-->
<div id="nav_column">
NAV MENU #2
</div><!--close nav_column-->
<div id="nav_column">
NAV MENU #3
</div><!--close nav_column-->
<div id="nav_column">
NAV MENU #4
</div><!--close nav_column-->
<div id="nav_column">
NAV MENU #5
</div><!--close nav_column-->
</div><!--close navigation-->
It may also be pertinent that I am executing this code on a wordpress page, and that it worked perfectly on my local environment.
Your question is lacking context. What does "the code simply isn't working" mean? Where is "desktopNavigation" define? What exactly does "toggle multiple states" mean?
Going off assumptions, people can't give a direct, concise, answers. With that being said, here is an example which hopefully answers your question:
JSFiddle: http://jsfiddle.net/seibert_cody/mk6juczp/1/
HTML:
<div>
<div id="nav_header"></div>
<ul id="navigation">
<li>I</li>
<li>Am</li>
<li>Iron</li>
<li>Man</li>
</ul>
</div>
JS:
$(document).ready(function(){
var state = 0;
var navClassMap = ["red_state", "blue_state", "green_state", "hidden_state"];
// Each click will increment the class of the UL thus toggling multiple states
$("#nav_header").click(function(){
var $navigation = $("#navigation");
// remove the current class
var curClass = navClassMap[state];
$navigation.removeClass(curClass);
// Increment to the next class (loop back to start on overflow)
state = (state + 1) % navClassMap.length;
// Add the new class
var nextClass = navClassMap[state];
$navigation.addClass(nextClass);
});
});
CSS:
#nav_header{
width: 100%;
height: 50px;
background-color: #ef102f;
cursor: pointer;
}
#nav_header:hover{
background-color: #Ff402f;
}
.red_state{
color: red;
}
.blue_state{
color: blue;
}
.green_state{
color: green;
}
.hidden_state{
display: none;
}
From within the code you provided its not clear what the var desktopNavigation initially is, so it will never be === 0or 1.
$(document).ready(function(){
var desktopNavigation = desktopNavigation || 0;
$("#nav_header").click(function(){
if (desktopNavigation === 0) {
$("#navigation").css("overflow","hidden");
$("#navigation").css("height","0px");
desktopNavigation = 1;
}
else if (desktopNavigation === 1) {
$("#navigation").css("overflow","visible");
$("#navigation").css("height","auto");
desktopNavigation = 0;
}
else {
}
});
});
or write:
...
if (desktopNavigation === 0 || !desktopNavigation) {
...
Above your click function, add:
var desktopNavigation = 0;
desktopNavigation is probably undefined.
But if your goal is to hide a div may I suggest using the built in jQuery function .toggle()
$("#navigation").toggle();
Or if you want to toggle multiple, more extensive styles use .toggleClass() to add or remove a custom class.
$("#navigation").toggleClass('hidden');
By "local environment", do you mean you have a wordpress environment set up on your local machine? If the changes are working on your local and not on your remote, I would try:
Clearing your browser's cache and refresh the remote environment
Inspecting the #navigation element using chrome "inspect element" and make sure it doesn't contain any extra css which may be hiding the #navigation
Print to the console when the #nav_header is clicked; this is to make sure the click callback is working as intended
Check to make sure there isn't another element consuming the click which is wrapping #nav_header
One thing I will also note is that you define id="nav_column" multiple times; you shouldn't be using more than one instance of the same ID.
Good luck
Thanks for the suggestions, they're all viable and work just fine. The problem was with Jquery itself.
This must have been a Wordpress thing, but when I changed the version of Jquery that enqueued, everything worked. It worked on my computer outside of wordpress, but as soon as I put it up live, none of the Jquery functions worked.
I changed it from 1.2.1 to 1.11.0. I thought it would be backward-compatible, but it seems like I have a lot to learn about Jquery.
I have a horizontal menu that is fixed to the top of the page and built by the following list:
<div id="menu">
<ul id="nav">
<li>Home</li>
<li>blog</li>
<li>more info</li>
<li>contact</li>
</ul>
</div>
Currently there is an empty space to the far left of the home menu link. How could I go about having an image of their logo show up in this location after the user scrolls down the page 150px?
I imagine this is a combo of javascript and CSS which is fine, I just need a roadmap of how to achieve the result. Thanks.
Place an element for the logo in the area you want it to be and provide it styling. Set it to display none at first.
Attach a scroll listener to the window. Check for if the page has scrolled 150px from the top. If it has change the display to block on the element with the logo. It if hasn't change the element to display none if it is visible.
You can do it with jQuery, if you'd like. The idea will be to go ahead and add the image, and then use JavaScript to add a class of hidden to the image (the image will be displayed whenever JavaScript is turned off, then), and then with jQuery, add or remove the class hidden depending on the scroll position.
<div id="menu">
<img src="path/to/logo.png" id="logo">
<ul id="nav">
<li>Home</li>
<li>blog</li>
<li>more info</li>
<li>contact</li>
</ul>
</div>
/* CSS */
.hidden {
display: none;
}
// jQuery
$(function() {
var logo = $('#logo');
logo.addClass('hidden');
$(window).scroll(function() {
if( +$(this).scrollTop > 149 ) {
logo.removeClass('hidden');
} else {
logo.addClass('hidden');
}
});
});
Just as a note, if you would like the image to always be hidden if JavaScript is off, then hard-code class="hidden" into the HTML. When JavaScript is turned on, the code will still work the same. It's just a preference of how you want your page to behave with vs without JavaScript being on.
here is a little example how you can show/hide an element on page scroll with jQuery. hope this helps: http://jsfiddle.net/KWyS2/
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
$('.addDistance').html(scrollTop);
if(scrollTop >= 150 ) {
$('.show-hide-me').fadeIn();
} else {
$('.show-hide-me').fadeOut();
}
})
})
</script>
<div class="show-hide-me"></div>
<div class="content"></div>
<p class="addDistance"></p>
<style text="type/css">
.show-hide-me {
display:none;
width:100px;height:100px;
background-color:orange;
position:fixed;
top:0px;
left:0px;
}
.content {
height:10000px;
background-color:fuchsia;
width:10px;
}
p {
position:fixed;
top:0px;right:0px;
border:solid 1px red;
}
</style>
I tried different plugins like bootstrap-paginator and bootstrap-pagination-js to make pagination through dynamically generated <li> elements , so that they don't exceed one line.
The wanted result : One line of dates with next and previous buttons respectively in the right and in the left .
The plugins that I've tried have not been useful to me .
My code looks like this:
<div class="row">
<div class="col-md-12 column">
<ul class="nav nav-pills center-pills text-center">
<li class="active">
<a href="#">
<span class="text-center badge pull-right span-list">1</span>
1 Mars
</a>
</li>
<li class="">2 Mars</li>
<li class="">3 Mars</li>
<li class="">4 Mars</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
</ul>
</div>
</div>
The code fiddle .
Your suggestions will be very welcome .
Are you having a problem with styling? If so...
I've set the row height to fixed, and made overflow hidden, so that you get just one row of buttons.
.row{overflow:hidden;height:42px;}
I've added a prev and next button, and made them float left and right respectively. I hope this doesn't violate your pagination framework. Please let me know if you want an example of how to programmatically add these elements.
HTML
<li class="next">Next</li>
<li class="prev">Previous</li>
CSS
li.next{float:right;}
li.prev{float:left;}
I believe this gives the desired result... please let me know if I've missed your intention.
Disclaimer: I've only tested this in Opera 19.0. I don't have access to Firefox/Chrome/IE at the moment.
Example: http://jsfiddle.net/nickg1/5ELfQ/2/
Updated: Updated to remove horizontal scrollbar. - http://jsfiddle.net/nickg1/5ELfQ/3/
I have had success with Bootstrap pagination. If you are generating too many elements to fit in your desired space, you need to either figure out a way to generate less or use css to limit the size of your pagination space and "cut off" the overflowing elements.
What you can do is .prepend() a left li and .append() a right li:
$(document).ready(function () {
$('.nav').prepend('<li class="left"><a>Left</a></li>');
$('.nav').append('<li class="right"><a>Right</a></li>');
});
Although there has little browser compatibility and styling issues in this solution. But I hope this will give you an idea to start.
My CSS:
.nav.nav-pills {
width:auto;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
position: relative;
padding-right: 38px;
display: inline-block;
}
.nav-pills > li {
display: inline-block !important;
float: none !important;
}
.nav-pills > li.last {
position: absolute;
right: 0;
}
As display:inline; is applied to .nav, so for centering use text-center class in wrapping div. i.e.
<div class="col-md-12 column text-center">
Apply jQuery for previous/next buttons and resizing issues.
$(document).ready(function () {
$('.nav').prepend('<li>«</li>');
$('.nav').append('<li class="last">»</li>');
var ulWidth = $('.nav').width();
var screenWidth = document.body.clientWidth;
if (screenWidth < ulWidth ){
$('.nav').css('width', '100%');
}
$(window).resize(function(){
screenWidth = document.body.clientWidth;
screenWidth < ulWidth == true ?
$('.nav').css('width', '100%') :
$('.nav').css('width', 'auto');
});
});