How to unset default tab in Spry Tabbed Panel in dreamweaver? - javascript

I have a Spry Tabbed Panel in Dreamweaver and the first tab is open when the page is loading. I don't want to have any tab opened when the page is loaded.
How can i do this?
Thanks!
That's my html:
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab play" tabindex="0"><h4>Play! Framework</h4></li>
<li class="TabbedPanelsTab ruby" tabindex="1"><h4>Ruby on Rails</h4></li>
<li class="TabbedPanelsTab api" tabindex="2"><h4>Restful Api</h4></li>
</ul>

This could be the clumsiest workaround available but at least it's easy to do. Locate your SpryTabbedPanels.js file and see what the first function looks like. If you have somewhere a line this.defaultTab = 0; comment it and see what happens. It should make the panels invisible.
You might also want to get rid of javaScript error so find a line that contains panels[tpIndex].style.display = "block"; and replace it with:
if(panels[tpIndex]){
panels[tpIndex].style.display = "block";
}
Actually you need to do also the second correction if you have more than one panel groups on the page. Otherwise only the first panel group is hidden.
This should work. At least it works for me for Spry made with DW CS3. But it looks ugly IMHO. No transitions/animations. But at least no panels are visible when the page is loaded for the first time. The tabs, of course, are visible.

$('ul > li').removeClass('selected');

SpryCollapsiblePanel.js
Top section:
this.contentIsOpen = false;
(replace true by false)
Dreamweaver CS6

Related

Open first item in accordion on page load

Got a sidebar filter in my site that has accordion headers. I would like to be able to have the 1st item always open (/expanded) with an option to do the same with the 2nd one.
This is the js: (Its a script from a shopify app called Power Tools)
<script type="text/javascript">
$(function(){
$('.filter-menu h4').on('click', function(e){
$(this).closest('.filter-group').not('.has_group_selected, .refine-header').toggleClass('expanded').find('ul,.filter-clear').toggle('fast');
e.preventDefault();
})
});
</script>
Here's a link:
https://www.zoobgear.com/collections/punching-bags
(trying to make the category item always open)
Any suggestions? maybe altering the script would do the trick...?
Thanks a ton for any advice!!!
If you have access to the accordion plugin then you can make modify it to expand any options on page load based on which plugin is used.
In case you need any jQuery script to open the category menu in expanded form this can be done by using following code.
$('.filter-group-category').find('h4').trigger('click');

addClass in JQuery

I am pretty new in JQuery and I have a question about addClass(). I spent some time to try to get this working, but seems like I did something wrong. I created a top menu with HTML and bootstrap. I assume visitors will land on my index.php first, so I created the class="active" for my index.php. Then if they click on any other link on the top menu (ex. About Us), then the class="active" will add to the and remove the class="active" from the "li" tab for index.php.
Below is my HTML code:
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li id="home" class="active"> Home</li>
<li id="about"> About Us</li>
<li id="browse"> Browse</li>
<li id="contact"> Contact</li>
</ul>
</div>
And below is the JQuery code that I use and try to get this done.
$(function (){
var sidebar = $('.nav');
sidebar.delegate("li", "click", function(){
if($(this).hasClass('active')){
//If click on the tab that is currently active, it will do nothing.
}else{
sidebar.find('.active').addClass('inactive');
sidebar.find('.active').removeClass('active');
$(this).removeClass('inactive');
$(this).addClass('active');
}
});
});
I tested it out on my local server. I could see the tab in my top menu turned to grey after I clicked it, but it didn't stay. So I am sure I did something wrong, but not sure where. I am really new in JQuery, so I hope I can learn from you guys. thank you!
When the link is clicked on, it takes the browser to a whole new page which starts a whole new javascript environment and nothing you've done to the current page carries over to the newly loaded page.
Thus the active class may be changed on the current page, but then a whole new page loads which inherits nothing from the first page (e.g. it's starts over from scratch). Your code from the first page is no longer in play once the new page is loaded.
You need to either just code the active class into each separate page (since each page knows what page it is) or have one common set of JS that sets the active class when the page loads based on the URL so it is intialized properly when the page loads.
Also, you probably don't need an inactive class. The default CSS state can represent the inactive look and the active class can apply a CSS override to show the active state.
This is not working, because when someone clicks on another link, they are redirected to a different page. However, your header doesn't really know which link was clicked on nor which page it is on. You need to let your header know which page you are. Does this make sense?
The other answers are correct, when you click on the tag you are opening a new page and therefore losing your javascript environment.
If you want to have a single page app, you can use preventDefault to stop the browser from following the link.
sidebar.delegate("li", "click", function(e){
e.preventDefault();
if($(this).hasClass('active')){
//If click on the tab that is currently active, it will do nothing.
}else{
sidebar.find('.active').addClass('inactive');
sidebar.find('.active').removeClass('active');
$(this).removeClass('inactive');
$(this).addClass('active');
}
});

4 navlinks needs to close all content and open its own

I have an almost working script but I don't understand scripting too good to make it work on all links.
When you have a look at my fiddle, and you click on the first two links, all work fine.
When you click on the other two ones the other content fields don't close. I need to close all, open just one..
http://jsfiddle.net/fourroses666/8y7Sr/100/
This is a part of the script:
$('#activator-werkwijze').click(function(){
$('#overlay-werkwijze').fadeIn('fast',function(){
$('#box-werkwijze').animate({'bottom':'0px'},800);
});
$('#box-bureau').animate({'bottom':'-600px'},800,function()
{
$('#overlay-bureau').fadeOut('fast');
});
});
i actually don't need the overlay
This is the script which works, (the overlay is useless) jsfiddle.net/8y7Sr/126/

JQuery Tabs and Hyperlinking (help me fix my code, please)

I am using multiple pages that each have jQuery tabs. Lets say I have Page1.html with #tab1 and #tab2 and Page2.html with #tab3 and #tab4. My code has issues with:
1) Within the tab content, Page1.html#tab2 has a hyperlink to Page1.html#tab1. The link does not work - the page just stays on #tab1 when clicking the link. However, a hyperlink in the menu container on Page1 to #tab1 does work. Both hyperlinks use the same a href="#tab1" but for whatever reason, only the link outside of the Page1.html#tab2 content works when linking to Page1.html#tab1. The hyperlinks in the menu container always work.
2) If I send someone a hyperlink to www.Page1.html#tab2, the page URL shows as www.Page1.html with tab 1 showing, meaning I cannot link directly to a tab. However, the menu on the website does correctly link to tabs. If I click the menu link for Page2.html#tab3 while browsing Page1.html, the tab will correctly load and the URL shows Page2.html#tab3 and will remain that way even if I click #tab4 on the page. The URL ONLY changes when clicking menu hyperlinks to different pages, i.e. Page1.html#tab1 to Page2.html#tab3. Clicking Page2.html#tab3 while on Page2.html#tab4, the tab content will correctly change to #tab3 but the URL will remain as Page2.html#tab4.
What I Want:
A) To be able to send someone a link directly to a tab. Sending someone a link to www.Page1.html#tab2 will always load as the URL www.Page1.html with the first tab displaying. However, the menu hyperlinks on the page do work.
B) To be able to link between tabs on the same page if the link is within the tab content. For example, a link in the content of Page1.html#tab1 should be able to link to Page1.html#tab2. Right now, it only works if the link in the content of Page1.html#tab1 is linking to a tab on a separate page like Page2.html#tab3.
C) **EXTRA CREDIT**: When I click directly on a tab, the tab image "pops" out and the previously selected tab "unpops". When I click a menu hyperlink to a tab, the previous tab remains popped out even with the correct content for the newly selected tab showing. Or, if using a menu link to travel to a tab on a new page, no tabs "pop" out but the correct tab content shows. I think fixing the above problems will solve this problem, too.
Here is my code:
<script type="text/javascript">
$(document).ready(function() {
var tabId = location.hash;
if(tabId) {
$(tabId).show();
}
$(function () {
$('a[href^="#"]').click(function(e){
e.preventDefault();
$('html,body').scrollTop($(this.hash).offset().top - 50);
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
var tabContents = $(".tab_content").hide(),
tabs = $("ul.tabs li, .rgtPanelBox ul li"); // Second selector to match left hand sidebar
var tabId = location.hash;
if(tabId) {
$(tabId).show();
}
else {
tabs.first().addClass("active").show();
tabContents.first().show();
}
tabs.click(function() {
var $this = $(this),
activeTab = $this.find('a').attr('href');
if(!$this.hasClass('active') && activeTab.length > 1 && activeTab.indexOf('#') === 0){
$this.addClass('active').siblings().removeClass('active');
tabContents.hide().filter(activeTab).fadeIn();
}
return;
});
});
</script>
Anyways, I'm a huge noob so the better the code you provide, the easier I can approve your answer as being correct. :)
Thanks!
You need to make your anchor tags hashable, that is, make them 'bookmarkable' for the front-end user. You seem to be on the way to creating your own tab plugin, but jQuery UI will do the hashing part for you. Here is a demonstration setting tabs up as you have mentioned:
http://muledesign.com/2009/05/bookmarkable-tabs-with-jquery-ui/
DEMO:
Here's the demo page -> http://muledesign.com/demo/tabs/default-tabs.html
Demo page with hashable link to tab -> http://muledesign.com/demo/tabs/default-tabs.html#movie
Re: point C) - Try using a lightbox plugin and attaching the lightbox plugins open/init function to the activate event on UI tabs -> http://api.jqueryui.com/tabs/#event-activate
I appreciate you may not want to use plugins, but you're already using jquery so meh.

Prevent full page from flashing before showing a tab

Currently I am using the twitter bootstrap tabs on a page with the following code. I added a bit of javascript/jquery to push hash tags in the url, so I can actually link to a tab. This works fine, but the when I load the first tab I see the whole page and then I am quickly shown just the first tab. Now, if I click tabs on the page everything works nicely and I am not shown the whole page again. This flash of data is annoying to say the least. Any ideas on what I am doing wrong?
Jade Template Code, compiles down to standard HTML
div(class="tabbable")
ul(id="myTab", class="nav nav-tabs")
li
a(href="#surveyEditData", data-toggle="tab") Survey
li
a(href="#surveyEditQuestions", data-toggle="tab") Questions
...etc...
JavaScript code:
$(function(){
// Function to activate the tab
function activateTab() {
var activeTab = $('[href=' + window.location.hash.replace('/', '') + ']');
activeTab && activeTab.tab('show');
}
// Trigger when the page loads
activateTab();
});
You are seeing the delay in the HTML being rendered before the Javascript is done executing.
To fix this, you need to put an initial CSS style such as fade or hide to all the other tabs, except the first one.
CSS rules are executed immediately during rendering, so there will be no delay for these rules.

Categories