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.
Related
I would like to ask you for help with bootstrap scollspy. I implemented first one in my project it is working fine and I am happy.
Problems started when I wanted to add another, different ID, different target. I added it in the same way but I cannot get it to work.
I googled about this but I couldn't find solution or proper informations, I saw some posts that there should be only one scrollspy on "body" I tried to experiment with that knowledge but still nothing.
My code:
<div id="back-button">
Back
</div>
<script>
$('body').scrollspy({ target: '#back-button' });
</script>
<div data-spy="scroll" data-target="#projects" data-offset="0">
CONTENT HERE
</div>
I tried to change order, change IDs to Classes, move scripts around but still nothing. Can you please help me?
Thanks and Cheers
I'm brushing up my html basics and I'm using a template to practice, here's my question with regards to reveal (uses jquery) menu:
<ul>
<li class="home-link">Home</li>
<li>Alpha</li>
<li>Beta</li>
</ul>
When the page is loaded and I click on the links nothing happens, the only one that works is home. In the example they use these type of links instead and they all work properly:
<ul>
<li class="home-link">Home</li>
<li>Alpha</li>
<li>Beta</li>
</ul>
They seem to be pointing to a folder instead? I've tried everything, relative, absolute, but nothing. Did they change the htaccess file? When I make a link outside of the menu div they work absolutely fine.
Any pointers, tips, hints? Thanks.
Edit: I applied the style to the other links as suggested but it didn't work. What's weird is that if I right-click and open the links they work.
Guessing it's to do with styling as I see you have a class on Home and home seems to be the only one that is working.
Try adding that same class on the other links and see if it works.
Also, if you're using position: absolute on one of the links and it remains unclickable, try adding a higher z-index to it [Not recommended as a permanent fix but rather to find the root of the problem].
CSS-Tricks has an excellent guide to understanding position properties.
Edit:
To clarify, add class="home-link" to the other li tags
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 had help with my previous question to be able to create changing navlinks with my navbar with JavaScript. Now I need to make the buttons be created automatically within the same JavaScript. This is what I had, this is what the code creates, with CSS and html output. http://jsfiddle.net/k35wawyg/2/
What Should Happen
What should happen is the buttons appear above each other in the top right, but it seems that it doesn't work. Also, the buttons should be linked with the JavaScript src that would be inside the HTML with
<div id="navigation">
<div class="navlinks">
<div id="output2">
</div>
</div>
<script src="nav.js">
</div>
What Actually Happens
As you can see in the JSFiddle, they are under the NavBar, across from each other, and clicking it will make it output a console error with:
Uncaught ReferenceError: execFunction() is not defined
Please help. I rewrote the question due to a JSFIDDLE request.
I think you had a number of problems in your fragment. I have modified the code and here is a new jsFiddle that now seems to work. Because there were so many things I changed, I can't list them here but if you compare the new code to your existing code, hopefully it should become clear.
jsFiddle
Probably the biggest change was the way that the functions were invoked:
<a onclick="execFunction2();">
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.