This is the website I am working on.
http://ankursinha.net/TestSite/index.php
It's stacking up properly, it's responsive, everything is fine apart from the following.
When I visit this site from my phone or tablet, the navbar shows 3 lines, I click that and all the links show up, and then when I click the "LOGIN", it drops down and shows me Faculty Log In and Student Log In, but when I click one of these, it toggles and closes the dropdown thing.
I know this is happening due to:
data-toggle="collapse" data-target=".nav-collapse"
But how do I fix this and make it like a proper link to navigate through the site on smartphones and tablets? All the browsers had the same problem!
I checked with Responsinator and the same problem occurs there also.
Thank You
Fixed by adding (replace) this piece of code on bootstrap-dropdown.js (at the end of the script) :
$(function () {
$('html').on('click.dropdown.data-api', clearMenus)
$('body').on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
})
Basically stops the touch event on a dropdown from bubbling to the next element, which would be the HTML tag and has the clearMenus function.
Related
I have tried different forms of tooltip, and they all work fine in Chrome or in browsers, on android etc..
But when it comes to iPad, iPhone and safari (sometimes even chrome) I get the problem that tooltip on a button will suddenly require 2 clicks to press the button. One click brings up the tooltip and the other press the button.
<button href="#mail-wrapper"
class="book-button book-text-button col-std-mail"
ng-click="vm.mailButton=true;"
uib-popover="Send Mail to Tenant"
popover-trigger="'mouseenter'">
<md-icon class="material-icons book-material" aria-label="Mail" role="img">mail</md-icon>
MAIL
</button>
Does anyone have a suggestion to a tooltip component for angular, jquery, js which works on safari / iOS?`
I see the same behavior, using bootstrap4 and tooltips on links.
<script>$(function () {$('[data-toggle="tooltip"]').tooltip()})</script>
my link or icon
Result:
Tap 1 triggers the tooltip only. The link is not followed.
A 2nd tap is required to triggers the link.
Don't ask me why, but I finally "solved" it using this configuration:
add the following CSS class to my link cursor:pointer
Add some config to the tooltip call: trigger:"hover" and delay:{"show":400,"hide":800}
Complete solution is
<script>$(function () {
$('[data-toggle="tooltip"]').tooltip({trigger:"hover",
delay:{"show":400,"hide":800}})})</script>
my link or icon</i>
I tried to change the delay an here are my observation on several iPhones
no delay: 2 taps required
"show":100: 2 taps required
"show":300: 1 tap required
I finally set it to 400ms and it seems to be fine.
This is my website .
It has a top menu and a sidebar menu. When the page loads up, the side bar is by default visible. There is no problem in Desktop, but when this is viewed on Mobile device, the side bar comes above the content of the website and it is not possible to remove it, since the toggle button to show/hide it is in the top menu.
Is it possible to make it hidden by default when the page loads up ? (Problem 1)
Also, if it works, then the show/hide sidebar works fine in desktop, but if we minimize the brower window, it becomes opposite, like, when it is hidden, HIDE SIDEBAR is displayed, when it is shown, SHOW SIDEBAR is displayed.
The jquery code I used to Hide/Show side bar is:
var f=1; // to displayd HIDE, since by default its shown.
$(document).ready(function(){
$("#menu-toggle").click(function(){
if (f==0)
{
$("#menu-toggle").html("<b>Show Categories</b>");
f=1;
}
else
{
$("#menu-toggle").html("<b>Hide Categories</b>");
f=0;
}
});
});
Is it possible to know if I am on mobile or desktop, so that I can initialise the value of f accordingly? (Problem 2)
Add one more line in $(document).ready to trigger click event on page load as below:
$(document).ready(function(){
//Event code start here
....
//Event code end here
$("#menu-toggle").trigger('click') //trigger its click
});
For your 2nd problem you will get lot of javascript solutions if you
search, like one here and another here
using toggle will be more convenient than click,if u want to make it hidden when the page loads up ,set display none first in html(simple way)
$(document).ready(function(){
$("#menu-toggle").toggle(function(){
if($(this).css('display') === 'none')
{
$("#menu-toggle").html("<b>Hide Categories</b>"); //this is hide
}
else
{
$("#menu-toggle").html("<b>Show Categories</b>"); //this is show
}
});
});
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.
I have the following form:
Whenever the user clicks on 'Don't have a Paypal account?', I want to display another form within the modal.
However, after displaying the hidden DIV and scrolling the modal, the background fade will scroll as well.
My jQuery code:
var cardForm = $('#card-form');
cardForm.hide();
$("#display-card-form").click(function (e) {
cardForm.show();
e.preventDefault();
});
If possible, upgrade from v3.3.2 to v3.3.4. This issue will be resolved.
I attempted an example first in 3.3.4, as that is what I am on. Once you specified you were on 3.3.2, I downgraded and saw your issue. This was a bug they fixed in the latest release (#15881).
Hope this helps.
I have this problem on this website: http://www.gruppoedico.it/Default.aspx
The top menu has some dropdown functionality (on "Gruppo", "Attività ", "Videoguide" and "Contatti"). It works like a charm on every browser exept the ones on ios7 (maybe ios6 too, I haven't tried), where the menu works on the page I linked, but not on every other page of the menu (you can try it just navigating on one of the pages from the menu).
I tried using the hover effect of css (no-js) and got the same result. Actually i'm using this script:
$(document).ready(function () {
$("nav li").click(function () {
$(".hover").removeClass('hover');
if ($(this).find("ul").hasClass('hover')) {
$(this).find("ul").removeClass('hover');
} else {
$(this).find("ul").addClass('hover');
}
});
});
I'm experiencing this problem only on apple devices.
UPDATE
I think i found the problem, it's the transition on the ul that in some way interfer with the click event. I'll try to find a solution.