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.
Related
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.
<a href="#">
<div class="col-md-4 promo-item item-1">
<h3>
Unleash
</h3>
</div>
</a>
I got a template online, the above (with css/bootstrap?), is an image that is a link. I want to change it so that instead of a link (href), it's a clickable button.
My plan is for the button to use JavaScript to change some of the content on the page, basing it off the JavaScript below;
<button type="button" onclick="document.getElementById('demo').innerHTML='Hello JavaScript!' ">
Click Me!
</button>
So how do I change this href into a button?
in bootstrap you just add the button classes and it will look like a button
<a class='btn btn-default' ...
However, there is no reason you can't just copy the onclick attribute to the anchor tag (or "href" as you keep calling it).
From your code in the comments:
<div id='demo'></div>
<a onclick="document.getElementById('demo').innerHTML='Hello JavaScript!'; return false; "> Click Me!> <div class="col-md-4 promo-item item-1"> <h3> Unleash </h3> </div> </a>
I'm trying to implement bootstrap-wysiwyg editor in a project, but every time I click a button in the toolbar that has a dropdown the editor loses focus, meaning that, for example, it's impossible to add links because the text is not selected, and images are always added at the beginning of the content because the caret position in the editor was lost. This happens in Firefox and Chrome.
Here is the HTML code for the insert link button for example (quite similar to the editor documentation example, but not working)
<div class="panel panel-info">
<div class="panel-heading">
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Insert Link"><i class="fa fa-link text-primary"></i></a>
<div class="dropdown-menu input-append">
<input class="form-control" type="text" data-edit="createLink" placeholder="URL" />
<button class="btn btn-success" type="button"><i class="fa fa-link"></i></button>
</div>
</div>
</div>
</div>
<div class="panel-body">
<div id="editor">
</div>
</div>
</div>
The only JS code is the editor hook:
<script>
$(document).ready(function () {
$('#editor').wysiwyg();
});
</script>
I'm using jQuery v2.1.4, Bootstrap v3.3.6, and bootstrap-wysiwyg v1.0.4
Thank you for your help.
The version of the bootstrap-wysiwyg that you are using is out of date. This bug was fixed in the most recent version. You can download it here.
I have an web app which is working phine on the simulator,android and ios, but on windows phone one onclick event does not work. This is my HTML code:
<ul id ="triggerresolutionbg" class="table-view">
<li class="table-view-cell media">
<element>
<button class="btn btn-link btn-nav pull-left">
<span class="icon icon-left-nav" id ="triggerLeft" onClick = "triggerText(this.id)" ></span>
</button>
</element>
<button class="btn btn-link btn-nav pull-right">
<span class="icon icon-right-nav" id ="triggerRight" onClick = "triggerText(this.id)"></span>
</button>
<element>
<center id ="triggerText">After I...</center>
</element>
</li>
</ul>
I´m using Ratchet,Bootstrap and JQuery.
Why the onclick methods on Windows Phone does not work ?
According to the HTML5 spec for button putting interactive content inside a button element is invalid.
Content model:
Phrasing content, but there must be no interactive content descendant.
So you should not expect event listeners to work on elements inside a button. Some browser violate the spec and permit this, but others do not. Try attaching the onclick handler to the button element itself.
Since you are using this.id, I would recommend restructuring your HTML in the process, but something like this should work.
<button class="btn btn-link btn-nav pull-left" onclick="triggerText(this.firstElementChild.id)">
<span class="icon icon-left-nav" id="triggerLeft"></span>
</button>
I have a page that requires two Rich Text Editors, so I went with WYSIWYG (What You See Is What You Get). They work fine, except for one little annoying detail. When I click the buttons to bold, italicize or indent, it applies to BOTH RTEs, and focuses on the second input. I can't quite figure out how to separate the toolbars from each other.
HTML:
<div class="form-group">
<label for="definition" class="col-lg-3 control-label">Definition:</label>
<div class="col-lg-3">
<div class="btn-toolbar" data-role="editor-toolbar" data-target="##definition">
<div class="btn-group">
<a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
<a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
</div>
<div class="btn-group">
<a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
<a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
<a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
<a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
</div>
</div>
<div id="definition"></div>
</div>
</div>
<div class="form-group">
<label for="consent" class="col-lg-3 control-label">Consent:</label>
<div class="col-lg-3">
<div class="btn-toolbar" data-role="editor-toolbar" data-target="##consent">
<div class="btn-group">
<a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
<a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
</div>
<div class="btn-group">
<a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
<a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
<a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
<a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
</div>
</div>
<div id="consent"></div>
</div>
</div>
JS (not really needed, but just in case...)
$(function() {
$("#definition, #consent").wysiwyg();
})
After a while of research, the answer is quite simple. Read into the source code and you'll see that it has a toolbar selector:
toolbarSelector: '[data-role=editor-toolbar]',
So you have to override that with a unique data-role like so:
$("#consent").wysiwyg({ toolbarSelector: '[data-role=editor2-toolbar]'} );
Making sure to change the data-role to match the new selector.
Was going to just comment but it ran long.
If it's anything like my WYSIWYG editor, it's because the system is set up to work with one container. Even if you add 2 items, it will do the same to both. The only way you could get around this would be to create two separate pages and house them on the same page (via seamless Iframes, possibly AJAX).
Note that I don't know for sure how this particular editor works, but it looks like the backend works very similar (ie, those data- attributes are housing the related execCommand() arguments just as mine).
Haven't tried it but did you try separating the the WYSIWYG initialization.
$(function() {
$("#definition").wysiwyg();
$("#consent").wysiwyg();
})