I am trying to use Twitter Bootstrap to create a website detailing the statistics of Minecraft servers, to make it easy for my users to know which server is online. However, when I use the alert component in Twitter Bootstrap, I cannot dismiss the alert. Here is my code:
<!DOCTYPE html>
<title>Dillon's Minecraft Servers</title>
<ul class="nav nav-tabs">
<li>Home</li>
<li class="active">Vanilla</li>
<li>Feed the Beast</li>
<li>Big Dig</li>
</ul>
<div class="hero-unit">
<h2>Vanilla</h2>
<p>The Vanilla server runs just plain Minecraft. It has some advanced features like Mob Arenas, anti-cheat, and MMO-like leveling.</p>
</div>
<div class="alert">
×
<strong>Warning!</strong> This server is currently offline.
</div>
Never mind. I found my problem. I forgot add the jquery script to the header. Sorry about that.
Have you considered using a <button> rather than an <a>. That's what I did on my Bootstrap page as I was having a similar problem. Doesn't fix that problem but it is a valid way round
<button type="button" class="close" data-dismiss="alert">×</button>
Make sure that jquery.min.js is loaded before button.js!
Related
I'm building an app in Angular 1 and have seen that I'm not supposed to interact directly with the DOM, rather I'm supposed to build custom directives to handle that interaction. I'm a bit new to web development in general, so I'm not sure how I would translate the JQuery examples given on the documentation at all of the UI Framework websites I've been looking at. For example, MaterializeCSS uses JQuery to hide and show the side-nav.
<nav>
<div class="nav-wrapper">
Logo
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
</div>
</nav>
<script>$(".button-collapse").sideNav();</script>
Another example (what I'm currently stuck on) is their modal dialog.
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal bottom-sheet">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
I have tried to see what's involved with calling the .modal() function from wihtin my controller, but it looks like it's a function that is returned from the JQuery selector. For functions that chain off the JQuery selector, is there no other way to invoke them, other than writing a directive and using JQuery in the directive? Or can I replace the JQuery usage with the element.bind and element.$apply stuff, invoking the UI Framework functions with the built in Angular element object? If not, do I have to worry about any life-cycle management since I'm interacting with the DOM through JQuery? I've read a couple of posts, but none seem to answer my question because they don't address 3rd party functions chained off JQuery.
Angular users are quite blessed with a big community, you can pretty much find a ready made Angular wrapper for every popular Jquery plugins.
By typing MaterializeCSS Angular in Google I found this plugin angular-materialize, it should be easier to integrate into your Angular app than the Jquery version.
If you are interested, you can read into his source code to learn how to wrap particular component into Angular directive, such as sidenav
I'm developing a very large page with lots of content and some overlays and all kinds of complicated things. I'll spare you all the code and only include the relevant pieces.
Essentially, I have some sidebar buttons that open an overlay depending on the button clicked. The HTML is below:
<div class="sideBtn sidebarOverlay" data-linkto="overlayMyInvoices">
<img src="icons/icon_invoice.svg" alt=""><h2>Invoices</h2>
</div>
<div id="overlayMyInvoices" class="overlay">
</div>
And here is some of the Javascript:
$(sideBtns).click(function(index){
var newId = "#" + (($(this).data("linkto")).toString());
var newOverlay = $(newId);
});
(I've left out a LOT of the Javascript, as I said I'm only including the relevant bits. That 'toString' might not be necessary, I'm not entirely sure I had it in there looking back, but I very much doubt that's the problem.)
BEFORE adding the jQuery tab plugin, this code works fine.
Now, INSIDE one of these overlays, I need some 'tabbed' content - so I downloaded three separate jQuery tab plugins, and ALL THREE of them produced the same error. In this particular case, the one I'm using is Tabslet. First, here's the HTML of the tab area:
<div id="overlayMyInvoices" class="overlay">
<div class='tabs'>
<ul class='horizontal'>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id='tab-1'></div>
<div id='tab-2'></div>
<div id='tab-3'></div>
</div><!-- tabs -->
</div>
And here's the Javascript:
$('.tabs').tabslet();
For some reason, every single jQuery tab plugin I use produces the same identical error (I've also used jQuery's UI core plugin, and EasyTabs). When I try to open ANY overlay using the sidebar buttons, the overlay doesn't appear, and I get THIS console error:
Uncaught TypeError: Cannot read property 'toString' of undefined
Perhaps the oddest element of this error is that it only appears ONCE. Any subsequent clicks after that first error function properly.
I just don't see how these plugins could be causing this error to appear. jQuery was able to read the custom data field before, how come it can't all of a sudden? If I don't call the plugin, it works again.
I realize this is a very long and complicated problem, but if anyone has ideas as to what this problem is and how to fix it, I'd be extremely grateful!
I discovered the problem, for anyone who still cares. I wrote some incredibly stupid Javascript that was looking for the class 'active'. Just any element with the non-specific class 'active'. The thing about 'active'? It's a great word that a lot of developers use. My code and the plugins were both using 'active', and my Javascript, since it was just looking for 'active' anywhere on the page, was effing up. So my own fault! Good.
I am currently using OpenCart and would like to replace their 'Add to Cart' button with a simple link that says add to cart but I am currently running into a few problems. Currently, OpenCart uses javascript to add products to the cart using a button:
<button type="button" onclick="cart.add('41');"><i class=""></i> <span class="hidden-xs hidden-sm hidden-md">Add to Cart</span></button>
Now, products are added by using "onclick" which as I understand can also be used in <a> tags. Therefore, I have also tried to do this using a simple link:
<a onclick="cart.add('41');" href="#">Add to Cart</a>
What I am failing to understand is why the product is added to the cart as it should be when using the button but then when using the link, nothing happens. All help will be appreciated, Thanks.
This seemed to be an issue with OpenCart's built in cache system. After clicking on the link today, It worked successfully. If anyone else experience this issue in the future, do not forget to delete OpenCart's cache files.
I am working with a page featuring a Bootstrap accordion. It works correctly, but I was asked to implement a feature whereby a specific collapsible element is "open" when linked from various other pages - so "www.whatever.tld#e2" would take you to the second element already opened. There was no problem getting something to behave like this, it's adequately covered by various other pages on StackOverflow and elsewhere. The implementation I tried was as follows:
$(window.location.hash + '.collapse').collapse('toggle');
This functions as desired, it opens the correct section of the accordion. However, after navigating to the page like this, it "locks" the page in that form - it no-longer responds to any clicks on accordion elements and you cannot close the opened element or open others. Nobody else seems to have been experiencing this problem or did not mention it if they did e.g. here:
Bootstrap Collapse - open the given id fragment
bootstrap-collapse.js hide and show events
I have attempted variations on this code, e.g.
var anchor = window.location.hash;
$(".collapse").collapse('hide');
$(anchor).collapse('show');
This behaves unexpectedly - all elements are forced open, and cannot close. Removing the second line fixes this issue, but then otherwise behaves as the original code I specified does - it opens the targeted element, but freezes the accordion.
The following is an excerpt of the structure of the accordion I am working with. I would prefer not to have to modify this unless I can't avoid it, since I'm trying to stick with organisational style guides and this accordion code is a standard accordion that people use on our CMS:
<div id="accordion-asset-listing" class="accordion" id="accordion" role="tabpanel">
<section class="accordion-group" role="tab" aria-selected="false">
<header class="accordion-heading">
<h3><a aria-controls="pharmacy" href="#pharmacy" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-asset-listing">Pharmacy</a></h3>
</header>
<div id="pharmacy" class="accordion-body collapse" aria-hidden="true" role="tabpanel">
<div class="accordion-inner">
<p><!-- content here --></p>
</div>
</div>
</section>
I am not amazing at JS or its use so any pointers people had to put me on the right track would be greatly appreciated.
Got it sorted in the end although I still don't understand why it originally broke. After jumping into the .js files that the site called upon, I ended up manually reconstructing the couple that I wanted and calling them in code. This is not a good solution but it has worked, at least.
Since the site (a university web-site managed on Squiz Matrix CMS) uses a sort of "customised version" of Bootstrap, Jquery and such that seems to strip out some elements of those things, there may have been some bugs introduced specific to our version of these things.
I got a problem about magento bundle products here. The price won't get updated everytime I make come options change on the products. And I also can't add it to the cart. I've spent several days to find the problem and finally I realize that the problem comes from this addthis snippet that I insert
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e770a31017c7f26"></script>
<!-- AddThis Button END -->
I put that addthis snippet on my default/template/catalog/product/view.phtml files. I guess it might caused by some conflict between magento's default theme script with the script from addthis.
Can anyone help me on this?? or maybe give me a better alternatives other than addthis
thank you very much :)
I had same problem! Try replacing
<a class="addthis_button_tweet"></a>
with:
IFRAME snippet available from https://dev.twitter.com/docs/tweet-button
That should work! :)
I have always been a 'seeder' of stockoverflow, get the information i need then bolt. But i thought id share this little tid bit.
Simple tweak i found it in a slightly different place.
"app/design/frontend/default/MYTHEME/template/ajax/catalog/product/view.phtml"
i just commented out <a class="addthis_button_tweet></a> from there and BOOM.
you have no idea the lengths i went to before finding this. Thanks
For people looking to solve this problem, i tried just about everything i could find, modifying option.phtml, effects.js, scpoptions.phtml, produt.js etc... and all along it was twitter