The links to my sites are only working on mobile but when I visite it via desktop none of the links work; the url changes but it doesn't actually go to the link unless I click into the address bar and press enter.
I am not getting any errors in the console and when I ran aXe to analyze the site everything came back good.
<nav class="cb-navbar">
<div class="cb-container">
<div class="cb-navbar-inner">
<div class="cb-navbar-left">
<a href="index.html" class="cb-navbar-back">
<i class="cb-icon -long-arrow-left"></i>
</a>
</div>
<div class="cb-navbar-right">
<div class="cb-navbar-nav">
<a href="/services/index.html" id="navbar-services" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -cog"></i>
</span>
<span class="cb-navbar-nav-item-text">Services</span>
</a>
<a href="/projects/index.html" id="navbar-projects" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -bars"></i>
</span>
<span class="cb-navbar-nav-item-text">Projects</span>
</a>
<a href="/contacts/index.html" onclick="yaCounter.reachGoal('contacts')" id="navbar-contacts" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -contacts"></i>
</span>
<span class="cb-navbar-nav-item-text">Contacts</span>
</a>
</div>
</div>
</div>
</div>
Can you post the whole file? From what you posted, I copied into a running application and replaced the navbar, and the links both worked mobile and on desktop.
You are however missing a closing tag, not sure if you have yours closed that may be causing the issue.
Related
I have a button which when user click on it, phone numbers will be appear slowly.
Here is the HTML Codes:
<span id="show-phone-numbers" class="btn btn-success">
<i class="fe fe-phone-call"></i> Show Phone Number
</span>
<div class="media margin-top-20" id="phone-number-section" style="display:none">
<div class="media-body text-center">
<a href="tel:00000000">
<p class="btn btn-outline-primary">
<i class="fe fe-phone-call"></i> somephonenumber
</p>
</a>
<a href="tel:00000000">
<p class="btn btn-outline-primary">
<i class="fe fe-phone-call"></i> somephonenumber
</p>
</a>
</div>
</div>
And here is the scripts:
$("#show-phone-numbers").on("click",function(){
$("#phone-number-section").toggle("slow");
});
The problem is when I click on the "Show Phone Number" button, nothing happens, even in console I see nothing happening
I did search about the error but I couldn't find a way which help me to handle this error.
Why do you have data-bs-toggle="tab" in there, without any bootstrap tab elements? This causes the BS event handler to be registered, which throws this error, because it can't find properly setupped tabs.
I'm trying to create a language bar with the jQuery bootstrap plugin, but it seems there is no option to append any action to anchor tags in drop down menu at all. They are just un-clickable.
Initialization of plugin:
<div class="bfh-selectbox bfh-languages" data-language="pl_PL" data-available="en_US,pl_PL" data-flags="true" data-blank="false">
<input type="hidden" value="">
<a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
<span class="bfh-selectbox-option input-medium" data-option=""></span>
<b class="caret"></b>
</a>
<div class="bfh-selectbox-options">
<div role="listbox">
<ul role="option">
<li>
<a href="/index.php?lang=pl_PL" data-option="pl_PL">
<i class="glyphicon bfh-flag-PL"></i>
</a>
</li>
<li>
<a href="/index.php?lang=en_US" data-option="en_US">
<i class="glyphicon bfh-flag-US"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
Commenting or uncommenting doesn't make any difference.
Another possibly related issue:
When I'm stretching out my web page, with the container overflowing the language bar completely, it becomes completely un-clickable. I don't want to change this plugin on something else in case someone will offer.
The address of the website is here.
I am using Bootstrap to create a website and have a menu that displays icons in the menu. When the menu button is clicked, the text will go next to each icon and push the menu out to the left so the text can fit.
<div id="wrapper">
<div id="sidebar">
<a class="btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div id="title-text">
<h3>Title</h3>
</div>
<!-- <div id="logo"> <img src="img/logo.svg" alt="logo" /> </div> -->
<nav id="nav" class="navigation" role="navigation">
<ul class="newnav">
<li class="active" data-section="1"><i class="icon-home"></i> <span>Home</span></li>
<li data-section="2" class=""><i class="icon-user"></i> <span>About</li>
<li data-section="3" class=""><i class="icon-laptop"></i> <span>Projects</span> </li>
<li data-section="4" class=""><i class="icon-pencil"></i> <span>Social</span> </li>
<li data-section="5" class="last"><i class="icon-envelope"></i> <span>Contact</span> </li>
</ul>
</nav><!-- /nav -->
</div><!-- /sidebar -->
At the moment, the spans expand to let the text in, it works fine but I would like it to be animated.
This is the majority of the code so far, although the live view isn't working.
JSFiddle
As you can see, when the top left button is clicked (.btn-navbar) the .expand CSS kicks in and changes the width from 0 to auto. I basically need the same thing but animated but cannot figure it out for the life of me.
Please can someone point me in the right direction?
Kind regards,
Tom
You can't animate to auto using CSS or native Jquery (at least when I last checked)
There is a JS/JQ method though
http://css-tricks.com/snippets/jquery/animate-heightwidth-to-auto/
I am using the addThis widget to display Facebook, Twitter, Google, Blogger, Wordpress logos on my site.
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-1324kj34h243kjh2"></script>
I would like to know of a way that I can capture when someone clicks one of the buttons for Google Analytics tracking reasons. I have attempted to add an onClick to an anchor, but this does not fire - presumably because the markup is re-written by the included JavaScript.
This is my code:
<div class="addthis_toolbox addthis_default_style">
<div class="share-icons" id="share-icons">
<span id="share-title">Share</span>
<span class="spacer"></span>
<a class="addthis_button_email left" title="Email" onClick="_gaq.push(['_trackSocial', 'addThis', 'email']);"> </a>
<a class="addthis_button_facebook left" title="Facebook"> </a>
<a class="addthis_button_twitter left last" title="Twitter"> </a>
<a class="addthis_button_google left" title="Google">
<img src="images/google.gif" alt="G" />
</a>
<a class="addthis_button_blogger left" title="Blogger"> </a>
<a class="addthis_button_digg left last" title="Wordpress"> </a>
</div>
</div>
I am using the addthis_config to report GA activity at the moment, but I wish to report to two profiles, so I am looking for a way of capturing the click as that seems like the best way around the problem.
Make sure you have that div appended on the DOM to ensure you could use events. Otherwise check liveQuery.
I haven't used addThis widget but I would try with jQuery using class name:
$.('.addthis_button_email').click(function(){
//Count it...
});
Or using a custom method in every button:
<div class="addthis_toolbox addthis_default_style">
<div class="share-icons" id="share-icons">
<span id="share-title">Share</span>
<span class="spacer"></span>
<a class="addthis_button_email left" title="Email" onClick="notifyGA(information....)"> </a>
Let me begin by saying that this problem is specific to TabPanel in ExtJS library.
I can successfuly simulate clicks on other ExtJS components using jQuery("#id").click() function.
But I cannot simulate user click on a given tab of TabPanel in ExtJS using jQuery. I see that the dom structure behind tabs looks like this:
<ul class="x-tab-strip x-tab-strip-top" id="ext-gen15">
<li id="ext-comp-1009__ext-comp-1001" class="x-tab-strip-active">
<a class="x-tab-strip-close" id="ext-gen18"></a>
<a href="#" class="x-tab-right" id="ext-gen19">
<em class="x-tab-left">
<span class="x-tab-strip-inner">
<span class="x-tab-strip-text">Submarine</span>
</span>
</em>
</a>
</li>
<li id="ext-comp-1009__ext-comp-1003" class="">
<a class="x-tab-strip-close" id="ext-gen20"></a>
<a href="#" class="x-tab-right" id="ext-gen21">
<em class="x-tab-left">
<span class="x-tab-strip-inner">
<span class="x-tab-strip-text">SpaceShuttle</span>
</span>
</em>
</a>
</li>
<li class="x-tab-edge" id="ext-gen16">
<span class="x-tab-strip-text"> </span>
</li>
<div class="x-clear" id="ext-gen17"></div>
</ul>
I've tried various methods of selecting the first tab using jQuery:
jQuery("#ext-comp-1009__ext-comp-1001").click();
jQuery("#ext-gen18").click();
jQuery("#ext-gen19").click();
but none of it seem to work.
If you take a look at the source (search for onStripMouseDown in particular) you'll see that it's expecting an Ext.EventObject. It'll fail straight away because e.button isn't 0.
Presumably you could patch it with your own onStripMouseDown.