Open first item in accordion on page load - javascript

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');

Related

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.

jQuery Mobile anchor links to other page are not working

I'm creating a jQuery Mobile web application.
This link, works correctly:
Click Here 1<!--This is working-->
But, these links which have anchors are not working:
Click Here 2<!--This is not working-->
Click Here 3<!--This is not working-->
How to make those links that have # work with ajax navigation?
Edit: The page, which contains these links, contains some links to different articles. And /ThePage/25 contains the full text of that articles. I want each link to go to somewhere inside /ThePage/25. So I've used #. (#3 means the third article in the page)... Do you know any better way?
Edit 2: I'm simply trying to load/show a page and then jump within it...
Edit 3: My jump inside that page isn't a simple jumping. It's a custom handled jumping with hashchange event. But if there is any other method, I can change that page...
add rel="external" to any links that have an anchor # and you don't want to load via ajax.
New Links would be:
Click Here 2<!--This is not working-->
Click Here 3
See http://jquerymobile.com/demos/1.1.1/docs/pages/page-links.html for more detail.
You can try using this from JS like this , I had problems with # tags :
<a class='homeSet'>Home</a>
....
$('body').on('click', '.homeSet', function(ev) {
$.mobile.changePage('/home.html#myhome', {
transition : "slide"
});
return false;
});

Loading an external .htm file into a div with javascript

So I got this code
Javascript:
<script type="text/javascript">
$(function(){
$('.ajax') .click(function(e){
e.preventDefault()
$('#content').load( 'file.htm' )
})
})
</script>
html:
Link
it works perfectly in firefox, but nothing happens when I click the link in chrome and IE simply opens a new window with the file. any advice?
I am not a coder of any sort, and I know there is more than one way to make this work.
This is what worked for me for MY situation.
I had a working site but with A LOT of code / DIV content all in one page and I wanted to clean that up.
I hope this Helps someone else!
I have been searching for this solution for quite some time and I have run across many examples of how it can work in different instances.
My scenario was as follows:
I have a photography website that uses a series of DIV tags containing the various "pages" so to speak of the site.
These were all set as:
<div id="DivId" style="display:none"></div>
The following script in the head of the page:
$(document).ready(function(){
$('a').click(function () {
var divname= this.name;
$("#"+divname).show("slow").siblings().hide("slow");
});
});
</script>
and called using the anchor links like this:
HOME
Where name was the name of the DIV to be called.
Please note the DIV will be called inside the parent container DIV.
Lastly and most importantly for this particular question and scenario, the DIV were all placed on the page as shown above.
Each div content was created just as if it were within the DIV tags but minus the opening and closing DIV tags and then saved as a separate .txt file, and called by placing this is the head of the parent page:
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js">
and
$(document).ready(function() { // this runs as soon as the page is ready (DOM is loaded)
$("#DivName") // selecting "div" (you can also select the element by its id or class like in css )
.load("PathToFile.txt");// load in the file specified
$("#AnotherDiv").load("AnotherFile.txt");// Additional DIV can be added to populate DIVs on th eparent page.
});
Change the link to href="#" or "javascript:void(0);return false;"
<a class='ajax' href='#'>...</a>
The loading logic is all in your ajax call. But, you have also a link which points to the file, too.
So, it seems that some browsers give different priorities on how the click is handled.
Anyway, links that do something other than changing page (f.ex. executing js) shouldn't have an explicit HREF attribute other than something that "does nothing" (like above)
I believe the problem is that the script loads before the document is loaded.
try this:
$(document).ready(function (){
$('.ajax').click(function(e){
e.preventDefault()
$('#content').load( 'file.htm' )
});
});
I am not sure, but i can not see any other problem.

lava lamp menu url

I'm using a JavaScript plugin from the following site:
http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
It uses the following: My Link
HTML in order to set up any number of text buttons in a lavalamp menu. Included in the head of the document is the following code:
<script type="text/javascript">
$(function() {
$("#3").lavaLamp({
fx:"backout",
speed:600,
click: function(event, menuItem) {
//my callback should go here
return false;
}
});
});
</script>
The menuItem must identify the menu item that was clicked, but I can't seem to figure out how to attach an external html document URL to each individual menuItem. can anybody straighten me out, or at least give me a tutorial link that explains this?
My Link
Specify the url in href attribute of the anchor. I'm guessing the callback is if you want to perform some action, or maybe load the content in via ajax and prevent the default action. But if you don't want any of that, then specifying the url in the link should take you to the page on click.

Dynamic content accessibility issue

I'm working on a website and I want to be able to access the dynamic content on the Menu page from every other page on the website but when you try to access it from another page, it doesn't even leave the page. How do I get it to take me to the Menu page and also display exactly what was clicked. The function created for this is as displayed below
$(document).ready(function() {
jcps.fader(300, '#switcher-panel');
});
var _tagIndex = window.location.href.indexOf('#');
if (_tagIndex>=0) {
showContent(window.location.href.substr(_tagIndex));
}
Jquery History plugin is a rather common solution

Categories