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.
Related
I am using Material Design Lite on a project and I have some mdl-tab tabs in my settings page. However, some of the settings are only useful if certain conditions are met. I would like to have a tab which is disabled unless the conditions are met.
This is what I'm doing now, which doesn't work:
<div class="mdl-tabs__tab-bar">
Display
Device
Measurement
</div>
Is there any way to do this? If so, how?
The project is in Cordova. So HTML, CSS, Javascript and JQuery answers are all welcome.
I just solved similar problem in my project. I know i am a bit late but I hope that this will maybe help someone in the future.
Render your page without classes or text.
<div class="mdl-tabs__tab-bar">
Display
<a id=deviceTab href="#deviceSettings"></a>
<a id=measurementTab href="#measSettings"></a>
</div>
You should add listener on input(needed for your conditions) and when the conditions are met just add class (mdl-tabs__tab) and text (Device, Measurement).
You can do that with jQuery
$("#deviceTab").addClass("mdl-tabs__tab").text("Device");
$("#measTab").addClass("mdl-tabs__tab").text("Measurement");
If user deletes information needed you can just remove text and class again and he wont be able to click on tab.
<div class="mdl-tabs__tab-bar">
Display
<a id="deviceTab" href="#deviceSettings" class="mdl-tabs__tab">Device</a>
<a id="measTab" href="#measSettings"class="mdl-tabs__tab">Measurement</a>
</div>
You can achieve this by removing the href attribute from the tag while still leaving the classes and link text. This will keep the tab looking like a tab and when you want to enable it just add the href with the id of the tab panel you want to activate.
I would like to add a new button with a link to a custom url on the addThis slideBar generated by using addThis Smart Layer Api (you can have a look at the documentation here)
I would like to add a custom service that is just a link to a precise page.
Is it possible?
Here is the sample of the code I use to generate the side bar.
addthis.layers({
'theme': 'transparent',
'share': {
'position': 'left',
'services': 'facebook,twitter,google_plusone_share,pinterest_share,print,more'
}
});
Is it Possible?
Although it's not particularly helpful to hear, I don't think that this can be accomplished with the AddThis SmartLayers API at this time. You may have found differently though, in which case I'm curious to hear about how you figured out to do it.
After perusing the docs and playing with it for a solid amount of time I can't figure out a way to insert a new option into the services on any of the layers (Share, Follow, What's Next, or Recommendation layers). The only way that I think adding a service to any of their SmartLayers would work is to submit it to AddThis to get it officially approved.
On the bottom of this page you can submit new services to AddThis to be implemented into their API completely. The massive downside to this in terms of your problem is that the submitted service needs to be OExchange compatible. For some projects this may not be feasible, but it might not be too much of a roadblock if you're free to implement compatibility in whatever web application you want to add to their services.
Small discussion about the API.
AddThis' platform is based around being able to show the most relevant marketing to its users, and so making custom buttons/services is discouraged by AddThis. They try to encourage developers to use their built in personalization by saying things such as:
We encourage you, however, to take advantage of automatic menu and
toolbox personalization. You'll see an increase in overall sharing of
about 20%, particularly from your site's international visitors, who
use many of our other hundreds of sharing services!
I think that this is why AddThis is not the most easily customizable service on the planet. However it is very good at what it boasts, showing relevant marketing to users.
The Workaround
These may be aspects of the API that you're familiar with and know how to use but I figure it can't hurt to help by providing them since the answer to the originally proposed question was "Probably not".
You can make what AddThis refers to as a toolbox of buttons and then put your service anywhere in the mix. This is done using HTML instead of JavaScript and it looks like this for the "default" toolbox:
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
This produces clickable sharing service links for the top 4 most
preferred services as decided by AddThis.
Now let's make one of these buttons our own. We will just use stackoverflow.com as an example.
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_stackoverflow" href="http://www.stackoverflow.com">
<img src ="http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png" width="16" height="16" border="0">
</img>
</a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
This code produces a clickable stack overflow button alongside the top
buttons as suggested by AddThis!
Although this isn't what you're looking for exactly, I hope that it helps!
The addthis creates a division with id #at4-share and creates the links within it, try to prepend ( or append ) using jquery an "a" element similar to the elements created by the addthis plugin in this div, and create a custom class similar to aticon-print in your css and set your custom icon.
I haven't tried it though but i think it shall work.
$("#at4-share").prepend('<a class="at4-share-btn at-svc-print"
href="https://stackoverflow.com/questions/31108214/how-to-increase-audio-play-speed-using-javascript">
<span class=" at4-icon aticon-print" title="KAD">KAD</span></a>');
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've searched around the web for a solution to my problem and im getting pretty close to my desired design with Accordion JQuery but..
I have some extension to the JQuery template which I dont know how to implement, so here it goes:
This is how my Div looks when you enter the webpage:
When you hover over either the picture or the title/text the text will be underlined and italic so that the user know the feature with cliking on it.
What I would like see if the visitor clicks the picture/text is this:
This is my HTML for that specific Div
<a href="#">
<div class="newsbox">
<img src="" class="fast" /><span class="newstitle">DarkShift Studios Web</span>
<br />
<p>We are pleased to present our first release of the Web-headquarter. Everything you see on these webpages have been builed from scratch, HTML/CSS and JS code, no CMS programs have been used. ...</p>
<div class="vertical_accordion_toggle">
<p></p>
</div>
</div>
</a>
Code:
http://jsfiddle.net/VCDe2/1/
Appreciate any hints/tips!
Here's a JSFiddle to show you what's happening.
jQuery:
$('h1').click(function(){
$(this).next('.hidden').slideToggle();
});
Simple enough! Adaam's fiddle in the post above certainly does work, but I'd recommend not using it as it will only work for one item - you'll need to add more code for every new section you create.
This solution, however, will look for any h1 item when it is clicked, and then find the next .hidden class item closest to it, allowing you to add as many different areas as you want.
For instance, with the same code above, you can scale everything up to work like this with no extra jQuery script.
All you have to do to incorperate it into your project is make sure your .hidden equivalent is nested inside of a container with the rest of the section, and change h1 and .hidden to fit your proper classnames. Make sure they're classnames, as IDs will not work.
I am using jquery tabify, http://unwrongest.com/projects/tabify/, to create a tab like feature for my menu.
Demo: http://jsfiddle.net/janjarfalk/6Y6Pa/1/
I am creating a menu like this:
<ul id="menu">
<li class="active">Home</li>
<li>Guestbook</li>
<li>Links</li>
</ul>
<div class="content" id="contentHome">Content for Home</div>
<div class="content" id="contentGuestbook">My guestbook</div>
<div class="content" id="contentLinks">Links</div>
The tabs will be added automatically as anchor link to my url, reading whatever that i have on my url. I need to have a url (for links tab only) such as {domain name}/{controller}/{method}/{articleId}#contentLinks-tab, examples:
http://www.test.com/site/shipping/5/#contentLinks-tab
http://www.test.com/site/delivery/3/#contentLinks-tab
while the rest will only be http://www.test.com/site#home-tab, etc. As you could see from the demo, the "{id}-tab" is auto generated based on the id. However, the problem arises if i am already on http://www.test.com/links/shipping/5/#contentLinks-tab of the links page, and if I were to go to other tabs like guestbook or home, the /shipping/5/#contentHome-tab will follow.
Can please advise how can I remove the /shipping/5/ even when I am on links tab, and hovering the rest of the tab? Sorry I was not able to provide much coding as I have no idea about doing it. Hence, really appreciate someone can shine some lights. Many thanks.
This is a tough one to answer, as jsFiddle is obviously missing the /shipping/5 part of the URL; And if understand correctly we're basically trying to change the functionality of the plugin.
At any rate, it's a little hacky, but you could try changing the href attribute of the Home and Guestbook links using javascript. So first give the Home and Guestbook links IDs:
Home
Guestbook
Then use jQuery to replace the URLs after Tabify has initialized:
$('#menu').tabify();
$('#home').attr('href','/site#contentHome-tab');
$('#guestbook').attr('href','/site#contentGuestbook-tab');
Which would equate to http://www.test.com/site#contentHome-tab, etc., effectively getting rid of the undesired part of the URL.
Or if that doesn't work (hard to tell when using such a plugin on jsFiddle), you could get even more hacky and instead add onclick listeners to the Home and Guestbook tabs:
$('#home').click(function() {
window.location.href = "/site#contentHome-tab";
});
I normally would never do something like this, but when you're working with plugins sometimes you gotta get a little hacky to achieve the desired effect =P
Hope this helps.