I have an issue with a responsive menu containing an input.
The original thread is here:
Fixed Responsive Top Nav / Off Canvas Nav with Single DOM Element
If I add an extra li, with an input (for a search field), I get a jump if I click the input. This happens only if I have scrolled before opening the sidebar.
ul class="left">
<li class="divider divider-first"></li>
<li class="active">Main Item 1</li>
<li class="divider"></li>
<li>Main Item 2</li>
<li>
<form method="get" action="/search.html">
<input type="text" placeholder="Search" name="Search">
</form>
</li>
</ul>
Here's the fiddle with the extra li: http://jsfiddle.net/29qgW/5/
If you open the result window on an iPhone, you can see it happening.
Some kind of margin gets added above both the sidebar and the top bar. I tried to find it with the iOS simulator, but the margin is not really there as a style.
It gets even worse if you try to scroll after having selected the input. How can this be fixed? I've tried to change the metatag to disallow user zooming, but that doesn't work.
Does anyone know how to fix this?
Update: edited to show metatag, and closed input tag.
Related
TLDR: Can I force a column layout refresh after dynamically updating the 'css-column' css with javascript/jquery?
I have a navigation menu that I am using css columns for (I cannot work out how to use the Magento2 menu column functionality). I cannot really change the markup much. I want to stop 'widow' titles from happening (titles at the bottom of the column, with all the content on the next column - see 3rd pink title in screenshot below). It cannot be set with css as the nav items are dynamic and will change.
(I have tried "break-after:avoid" on the parent list, but this stops the list from breaking altogether - i.e. it should be able to break anywhere in the middle of the list).
I came up with a hacky solution that almost works - with javascript I am dynamically adding "break-before: column" to any list that has a widow title. (It checks the left offset of the title, compared with the offset of the first list child. If it is different then it means the title starts on the previous column).
This (sometimes) works BUT it (sometimes) does not update the columns until you resize the screen a bit.
I have been been trying out these kinds of solutions and many of these too. However none of them seem to work, for example I have tried:
console.log(elt.offsetHeight);
console.log(elt.getBoundingClientRect());
Tried 'elt' being all sorts, the parent elements, the whole body/doc wrapper etc. I thought maybe this was because the element in question is hidden until you hover over the nav link. But I forced it to be open using chrome devtools and ran the same 'reflow triggering' javascript and it still made no difference?
Is there a (preferably nice and not forcing reflow of the whole document every pageload??) way to force a recalculation of the css columns?
OR is a better solution possible using css grid / any other way?
Thanks!
In case it is relevant to another possible solution, the markup is like this:
<ul class="level0 submenu">
<li class="navigation_item__back hidden-desktop">
Back
</li>
<li class="navigation_item__link hidden-desktop">
Title
</li>
<li class="level1 nav-3-1 category-item first parent">
<a href="">
<span>Sub Title</span>
</a>
<ul class="level1 submenu">
<li class="navigation_item__back hidden-desktop">
Back
</li>
<li class="navigation_item__link hidden-desktop">
Sub Title
</li>
<li class="level2 nav-3-1-1 category-item first">
<a href="/">
<span>Lorem 1psum</span>
</a>
</li>
<li class="level2 nav-3-1-2 category-item">
<a href="/">
<span>Lorem 2psum</span>
</a>
</li>
</ul>
</li>
...
</ul>
I have a dropdown menu that currently displays the dropdown unordered list on hover, which are lists of links. Hover is problematic for users and I want to change the to 'click' or 'toggle'. Here is the code currently in the site:
$("#main_nav .dropdown").hover(function() {
$('.dropdown-menu', this).fadeIn("fast");
$('.nav_main .mega-menu-column ul').attr("style", "display:flex; display: -ms-flexbox;");
$(this).addClass('active');
},
function()
{ $('.dropdown-menu', this).fadeOut("fast"); $(this).removeClass('active');
});
if I switch the .hover to .toggle the drop down menus work as I would expect them to. The problem is it now breaks my links. When I click on them they do nothing and go nowhere. Here is the HTML:
<ul class="nav_main">
<li class="active">Home</li>
<li class="dropdown">
Decisions <b class="caret"></b>
<ul class="dropdown-menu mega-menu" id="decisions">
<li class="mega-menu-column">
<ul>
<span>
<li>Our Decision on CanLII</li>
<li>SCC Decisions</li>
<li>Canada Supreme Court Reports (PDF)</li>
<li>vLex Canada Open</li>
<li>Sask Cases Judicially Considered</li>
</span>
<span>
<li>Federal Court</li>
<li>Quebec (translated decisions)</li>
<li>Tax Court of Canada</li>
</span>
<span>
<li class="list-heading">Tribunals</li>
<li>Automobile Injury Appeal Commission</li>
<li>Law Society of Saskatchewan</li>
<li>Labour Arbitration Awards – Sask</li>
<li>Sask LRB (CanLII)</li>
<li>Sask LRB</li>
</span>
</ul>
</li>
</ul>
Is there any easily explainable reason as to my this simple switch in code is causing the links to stop working completely?
Thanks in advance!
I was unable to precisely reproduce the issue with the code you provided, but I did observe issues clicking some of the links.
Removing the invalid span elements from the ul seems to have corrected the observed issue.
Try removing those span tags from the ul.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
Allowed child elements of ul
My guess would be that your .toggle is hijacking the click event for the whole container. So when you click a link it's toggling the menu rather than firing the default click for a link. You may try stopping propagation on the links, so it doesn't fire the click event on the parent menu:
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
I have created a menu for my website which you can find here:
http://jsfiddle.net/nq9Nt/9/
When click a category on the menu it opens that category on my main navigation?
Is something conflicting or have I placed my Javascript in the wrong place?
So I want to be able to click a category and show the sub-categories but it just won't work. Also is there a way to keep open the category you clicked after you change page?
Thank you
<ul class="nav">
<li>Category 1
</li>
<li class="drop">Category 2
<ul id="sub1">
<li>Item
</li>
<li>Item
</li>
</ul>
</li>
<li class="drop">Category 3
<ul id="sub1">
<li>Sticker
</li>
<li>Sticker
</li>
</ul>
</li>
<li>Category 4
<ul id="sub1">
<li> Mural
</li>
<li>Mural
</li>
</ul>
</li>
$(".drop")
.on('click', function () {
$(this).find('ul').toggle();
})
Actually at least on jsfriddle animation works and if you replace href of your anchors from '#' to a real url you will be redirected to another page, so first make sure that you've attached jquery library in head of the document (since you use it in your script), then move your script to the bottom of the page, right before tag 'body' closes.
About keeping the state of the opened categories after refresh - usually it is made on server side while generating template by adding class, for example 'active', to current link and then, using css, corresponding category (or a hierarchy of categories) is set to be opened (li.active ul {display: block;} for example). Well, actually you could do the same trick - use js to find out current url with the help of window.location.pathname value and match it with a href value of your navigation links and then assign class 'active' to the found element (or its parent, it is up to your css)
You can add a class drop to li in 4th Category, so it will work as others. And remove that onclick if you don't plan to use it.
http://jsfiddle.net/nq9Nt/10/
Here the example,
jsbin
You have gave the anchor href with #, So It reloads the page. And also you have gave the onclick method, But it doesn't there.
I want to make a content box with jquery tabs with a tab navigation for many tab contents, such as for more than 10 tab contents. The problem is that jquery UI does not provide built in tab navigation for large tab number and the "scrollable tabs for jquery plugin" at google code, https://code.google.com/p/jquery-ui-scrollable-tabs/, looks very slow and inefficient for large volumes about more than 50 pages. If the user tries to read the 1st and the 40th page, it will take more than 30 sec. to navigate for clicking the arrows.
So, I made a tab content box with only 5 tabs including selected shown and with a tab navigation of input text box selecting specific pages and next and previous with the first and the last page tab navigation buttons. (If you put regular jquery UI tab with more than 20-30 tabs it will mess up appearance and css.)
<div id="tabs" class="tabs-bottom">
<ul>
<li>Nunc tincidunt
</li>
<li>Proin dolor
</li>
<li>Aenean lacinia
</li>
</ul>
<ul class="TabbedPageNavi">
<li>Page
<input id="pageNumber" type="text" value="01" style="width:30px;" />
</li>
<li><a class="previous" href="#">« Prev</a>
</li>
<li><a class="nexttab" href="#">Next »</a>
</li>
<li class="copyTab">2013 ©John3825 blog</li>
</ul>
<div class="tabs-spacer"></div>
<div id="tab-contents">
<div id="tabs-1">
Sample:
http://jsfiddle.net/john3825/anh7c/embedded/result/
What is the best possible way to manage the large numbers of content tabs with navigation? Please tell me a example or correct problems.
I also want to make the tab content box fit within 350px width x 1000px height.
As far as the best possible way is concerned,there are many of them.One suggestion would be using iFrames.
The Result would be quite like this : DEMO
Or either your approach is quite scalable and is old-school which is good thing in reference of compatibility and usability. Now the other requirement goes like this. You set the width:350px; and the height:1000px for the content-tab like this.
Working Fiddle: DEMO
Code:
#tab-content{
height: 1000px !important;
width:350px;
background-color:darkgrey;
border:2px ridge black;
}
I'm using the JQTouch framework for building an iPhone app/WebPage. I have it working nicely, but i cannot make it scroll to the bottom of the page.
<body>
<div class="current">
<div class="toolbar">
<a class="back button" href="javascript:{}">back</a>
<h1>header</h1>
</div>
</div>
<ul id="myContent">
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>
<div id="myInput">
...a couple of input elements..& submit button
that results in the "myContent" being updated with another li
</div>
</body>
Basically I have a UL at the top of my page, that gets updated/added to via server events coming in. This works nicely, but i want to be able to scroll to the "myInput" div which is at the bottom. However, I can't find a way of achieving this, I'm either using libraries incorrectly, or missing a trick. Any ideas?
Cheers
Have you checked the size of your webview? I had this issue but it was because I set my webview height to 480 (so it was off the screen due to the navigation bar)