The green "Blog" button on the top points to the right location, but when clicked, there is no response. It seems it's not a z-index issue. It seems to be a conflict with the jQuery nav, but the solution here is very unclear.
Here is the JS: http://pastebin.com/JuJwKdSZ
and JS #2: http://pastebin.com/VDpViTqP
Here is the HTML: http://pastebin.com/BYuehZnU
I think I may have found the answer. It is to do with the plugin you are using: OnePageNav
This handles all clicks on links on the page. There is a filter ability on that plugin though, when you initialize the instance of one page, you can include a filter of a class name and add that class name to your external link like so:
html
<a id="blog" class="btn button navbar-btn white external" href="/blog"><i class="fa fa-pencil"></i> Blog</a>
Change this in the first js file (line 44)
filter: '',
to this
filter: 'external',
Related
I have a table being built via the map function of JavaScript (ReactJS).
On the last column, I should be having buttons that are meant to open a popover that will (eventually) hold some information. This cell is being done like this:
<td>
<div>
<button className="btn btn-primary"
tabIndex="0"
role="button"
data-toggle="popover"
data-trigger="focus"
title="Details"
data-content="Testing, Testing">
<b>IN PIT</b>
</button>
</div>
</td>
So far, the said button appears, but no popover whatsoever. I'm not using npm or anything of the sorts since I'm not a front-end-designer myself, and that doesn't seem trivial to setup. I just want something "good enough" for testing purposes.
What am I missing?
Looking at your https://pastebin.com/KuRHjWxr. Popovers won't work, you have to implement them other way.
You initiate
$('[data-toggle="popover"]').popover();
$('[data-toggle="tooltip"]').tooltip(); when there are no buttons in DOM.
Call .popover() and .tooltip() after your buttons are successfully rendered to the DOM.
The names of your attributes imply that you are expecting bootstrap (an external library) to be loaded and attach to the element to provide functionality, is bootstrap included in a script tag on the page? Those attributes don't do anything themselves, they are just tags to attach actions to. Add a bootstrap cdn tag inside the bottom of the body tag to address.
I am using the bxslider carousel that generates a slider, as part of the settings I have:
...
nextText:"Next",
prevText:"Prev",
...
So the next button in the slider has the text "Next" (and same thing for the previous button). But instead of the text, I want to add a span with an image. How can I change that so it displays something like <span class="glyphicon glyphicon-search"></span> instead of "Next" or "Prev" text?
Thanks in advance
The website link
I have solved the problem by means of this link. I am sorry for this weak question. I have added like that;
nextText: '<span class="glyphicon glyphicon-search"></span>'
If you want to add the tag to an existing HTML tag, such as a div with id myDiv:
getElementById('myDiv').innerHTML = '<span class="glyphicon glyphicon-search"></span>';
or
getElementById('myDiv').appendChild('<span class="glyphicon glyphicon-search"></span>');
I'm trying to get my webpage to use the kind of color box that is demoed on this website here.
http://www.jacklmoore.com/colorbox/example2/. (Outside HTML ajax Example).
In their code for this, they have:
$(".ajax").colorbox();
targeting:
<p>
<a class='ajax' href="../content/ajax.html" title="Homer Defined">
Outside HTML (Ajax)
</a>
</p>
My question is, I want the colorbox to display another page I have, when I click this Icon span on my page.
<span id="pause">
<i class="fa fa-pause"></i>
</span>
I've used on() to make it so when it's clicked it runs a function.
$("#pause").on("click", function() {
game.pause();
});
Where as game.pause(); will create this effect, but I'm not sure how to make it happen, because I am not using a link like the examples.
I am looking for a way to open a modal as well as the underlying hyperlink.
So if my code looks like this:
<a class="btn pull-right" target="_blank" href="http://www.example.com" data-toggle="modal" data-target="#modal_div" data-remote="false">something</a>
I want to open the Modal as well as the link to "www.example.com"...
Does anybody have an idea of how to accomplish this?
Thanks for your advice!
You should define the .click handler for your link, remove data- attributes and toggle .modal() with javascript.
I think that bootstrap handler for clicking on anchors with data- attributes for modals and other plugins uses preventDefault(), that is why you just can't use href="http://www.example.com".
FIDDLE DEMO
I am using backbone, bootstrap "collapse". I am trying to change the class when the button is clicked..
html
<button id="btnCollapse" class="btn" type="button">
<i id="accordionIcon-{{id}}" class="icon-down"></i>
</button>
js
CollapsePress : function(event) {
//change the class back and forth with every click (icon-down to icon-right)
}
You haven’t given enough information for me to be sure this is correct, but try this:
$(event.target).find('i').toggleClass('icon-down icon-right')