Jquery tabs: breaking create-select-reload cycle - javascript

I have a page that is using Jquery tabs. The tabs determine not only what I want to show in the tab content area, but also outside of the tabs div as well.
The behavior that I want is, when user selects a tab, reload the whole page with new parameters in the url. (I currently do this by tacking string to location.href, thereby forcing the page to reload.
select: function(event, ui) {
// ... determine new_url
location.href = new_url;
}
And when the page is reloaded, I want the right tab to be active/selected, and I try to do that by detecting parameter for the tab.
create: function(event, ui) {
// ... figure out which tab should be selected
$('.tabs').tabs('select', tab_index);
}
I notice that this forces the browser in unending cycle of create-tabs, select-tab, reload, create-tabs, select-tab... and so on. Is there a way to break out of this?
I realize that JQuery tabs are not for this kind of work but help would be greatly appreciated!! This is my first time trying JQuery tabs.
Some extra notes:
- I am using Rails for some logic
- I attempted to 'ui-state-active' class to the tab that should be selected, that seems to be overwritten. First, first tab (index 0) is set to active, and then in the tabs create function, the tab I want to select is selected.
<li class="tab<%= " ui-state-active" if THIS_TAB_SHOULD_BE_SELECTED %>">
tab 1
</li>

You can't (or shouldn't) mix tabs that reload page every time the user changes tab with ones that just show/hide some content. I'd recommend sticking with one of the two methods. If you want the whle page to change, either show/hide both tabs and that other content, or ajax the new content and replace the old with the new. Alternately, you could do something like the following:
HTML:
<div class="tabs">
<span class="tab-head active">Tab 1</span>
<div class="tab-content active">Lorem ipsum...</div>
<span class="tab-head">Tab 2</span>
<div class="tab-content">Lorem ipsum...</div>
<span class="tab-head">Tab 2</span>
<div class="tab-content">Lorem ipsum...</div>
</div>
CSS:
.tabs {overflow: auto;}
.tab-head {display: inline-block; float:left;}
.tab-content {display:none;}
.tab-content-active {display:block;}
JS:
$(".tabs .tab-head").click(function(){
$(".tab-content,.tab-head",$(this).parent()).removeClass("active");
$(this).addClass("active");
$(this).next(".tab-content").addClass("active");
});
That's roughly what I made for another site a few months ago.
Edit: I'm currently working on a way to assign initial tab positions to every single tabber by passing that data in the fragment_id part of the URL, like this: page.com/path/page.php?foo=bar&baz=quux#tabs=0:1,2:6;, where #tabs=0:1,2:6; is the important part. I'd have an onload handler parse that to show the right tabs form the start and some JS that looks for links that point to the same page with different tab information.

Related

Im looking to create a specific drop down menu (example included)

I'm looking to understand how to code drop down navigation bar similar to the reference site included below. Their solution works perfectly between pc/mac/iphone and android and it would be awesome if someone can show me the same. If you are looking at this site via your pc or mac adjust the size of the browser to activate the drop down version of the navigation. Thanks alot!
http://treadsack.com/
p.s Im new to asking these questions online so if you need me to be more specific please comment and I will comment back.
Thanks again!
Just use bootstrap, http://getbootstrap.com Its allready cross browser compliant, and uses that type of menu
There are a number of ways to show the dropdown like that, assuming that's what you're asking. In this case, observe what they've done using the browser's tools.
In Chrome:
Minimize the browser, so you can see the dropdown style of the page.
Click on the "NAV" link to see the dropdown menu.
Right-click on any of those menu items, and click Inspect Element.
You'll see the Developer Tools open up below, showing the HTML. You'll notice that the element that you wanted to inspect, is a <a> inside <li> inside <ul> inside a <div> of class dropdown
4.1 When the Nav is closed, this div is as below:
<div class="dropdown" id="nav-dropdown" style="display: none;">
<!-- bunch of ul, li elements follow here -->
</div>
Now click on the Nav link, and observe the change in HTML of that div alone. You'll notice it as below:
<div class="dropdown" id="nav-dropdown" style="display: block;">
<!-- bunch of ul, li elements follow here -->
</div>
They just changed the display property of the div, from none to block materializing all those menu items.
And that can be done using jquery as below:
$( "#nav-trigger" ).click(function() {
$('#dropdown').css("display", "block");
});
nav-trigger is the id of the NAV element.
Update:
The HTML is structured like this:
<div class="main-container">
<span class="navigation" id="nav-trigger"/>
<div class="dropdown" display="none">
<!-- menu items as <ul><li> here -->
</div>
</div>
That's the main structure (names changed). Initially, only the <span> element is visible. When this span element is clicked, the div below it is displayed. So we associate a click handler to the span element in jQuery, as I've shown above. That's how they are "connected"
The animation:
Again, there are a lot of ways to do that. There are jQuery plugins that you can directly use in your project (easiest). Alternatively, you can use jQuery.slideDown() and jQuery.slideUp() to toggle the menu items down or up. Links: slideUp() and slideDown()
You'll notice that there is a sequence to the animation. Not all menu items are dropped down at once.
$( "#nav-trigger" ).click(function() {
var menuitems = $("#dropdown").children(); //since the items are hierarchically , children of the dropdown div.
for(var i=0; i<6; i++){
menuitems.eq(i).slideDown(200); //200 is the speed.
}
});
That's a very crude code, but it gives you the picture. Hope that helps.
Basically, You can make sites mobile friendly by using percentages instead of set widths and heights... Typically developers will make separate styling sheets depending on device resolution... so at different resolutions content will scale accordingly.
see this example
This way you can control different styling so it displays correctly

twitter bootstrap dynamically add dropdown

I'm implementing a user notification system. When the page is loaded an AJAX request is made and if notifications exist, they are rendered into a <ul> which is hidden but should show up if the notification item is clicked.
I have a couple of working dropdowns with Bootstrap on my page, so that's not the problem.
The loading and creating of the elements works fine. They appear in the DOM if i check with Firebug.
// this is in the top bar
<a id="notifications" href="/user/profile/notifications" data-toggle="notifications-alert">Benachrichtigungen</a>
// and this appended to the end of body
<ul id="notifications-alert" class="notifications dropdown-menu" style="display: none;">
<li class="event_new">[..]</li>
<li class="event_new">[..]</li>
</ul>
I also initialize the dropdown() when i append set the data-toggle attribute. Like this:
$notifications.addAttr('data.toggle', 'notifications-alert')
.dropdown();
I also tried with a manual trigger but still doesent work.
$notifications.addAttr('data.toggle', 'notifications-alert')
.click(function(e) { e.preventDefault(); $(this).dropdown('toggle'); })
.dropdown();
Any ideas why it is not working?
#EDIT: my mistake, solved. See my answer for details.
All examples in twitter bootstrap shows both the link [tag a] and the dropdown [tag ul] together with the same parent. Maybe the easy solution is that you should add the ul after the a instead of adding the ul in the end of the body $('a selector').after(ul)

Hide several divs, show 1 by default, and switch (show/hide) between them based on link click?

I know the show/hide thing has been covered to death on stack, but I just can't find a solution that works for me, sorry. I've tried several JS/jQuery solutions that I found and can't quite get one to behave the way I'd like.
I have many divs that are very similar in content (content changes slightly based on version selected), and all have the exact same style.
Desired behavior
I'd like one div to show by default with all others hidden. Then, based on a link click, a different version div is displayed and all other content divs are hidden.
Basic HTML
<div class="container">
<h1>Header</h1>
<p>Basic info about page</p>
<ul>
<li>Version 1</li>
<li>Version 2</li>
// More links to other divs
</ul>
<div class="content" id="ver1"> // I'd like this div to be the default
Content here // when the page loads. All other divs
</div> // are hidden until a link is clicked.
<div class="content" id="ver2">
Content here
</div>
// More content divs
</div>
I'll have up to a dozen different versions of these content divs.
JS or jQuery is fine, but jQuery is preferred because I'll probably add some kind of show/hide effect. I don't care that greatly about the naming structure of the divs or links.
$("div.containter ul li").each(function(){
$(this).onclick(function(){
$("div.content").hide();
$("div" + $(this).attr("href")).show();
});
});
Wrap that in a $(document).ready or whereever and you should be good to go my friend. Learn the code, so that in the future, you are gosu.
How about adding some more RESTful behaviour.
$(function(){
// get the location hash
var hash = window.location.hash;
// hide all
$('div.content').hide();
if(hash){
// show the div if hash exist
$(hash).show();
}else{
// show default
$("#ver1").show();
}
$("div.containter ul li a").click(function(){
// hide all
$('div.content').hide();
$($(this).attr("href")).show();
});
});
I suggest you to use on() jquery function with selector. And also you can show the default div using css. Here is the complete code.

Colorbox : starting group transition inline divs automatically

I have a set of DIVs, which I am displaying via Colorbox.
It works fine as below
$(".my_group").colorbox({rel:'my_group', inline:true, href:$(this).attr('href')});
Now I want to kick off colorbox as soon as the page is open, so I tried
$.fn.colorbox({rel:'my_group', inline:true, href:$('.my_group').attr('href')});
Which doesn't work. I also tried
$.fn.colorbox({rel:'my_group', inline:true, href:'#box1'});
Where #box1 is the first div of the group. However, it actually ADDS box1 as another inline slide in the group.
So what's the best way to start the group transition colorbox automatically?
To open colorbox automatically (on page load), just add open:true to your settings. Also, the grouping with the 'rel' doesn't necessarily need to be in the options. If you leave it out, it will allow you to put all your colorbox groups in one call. Also, if your target elements already have an href attribute, you don't need to put that in the options (colorbox looks for this attribute automatically, even on divs and whatnot). So, your colorbox call could look like this:
$(".cbox").colorbox({inline:true, open:true});
And then this html:
<a class="cbox" href="#C" rel="my_2group">C</a>
<a class="cbox" href="#D" rel="my_2group">D</a>
<a class="cbox" href="#A" rel="my_group">A</a>
<a class="cbox" href="#B" rel="my_group">B</a>
Will give you 2 seperate colorboxes each with 2 images, and the first group will open when the page is loaded.
Note that combining them all in one colorbox call only works when you can ensure that the group you want to open is the highest up in the dom (which is usually not a problem, as inline content is usually hidden). If that's not the case, then you will have to split it into a couple calls.

Hide anchors using jQuery

I've created a dynamic page that, depending on the view type, will sometimes utilize the anchor tags and other times not. Essentially, I want to be able to control if on click the page jumps to the anchor. Is it possible to hide anchor tags using jQUery, so they are essentially removed? I need to be able to re-enable the anchors when necessary, and always show the current anchor in the browser's address bar. It seems to work in FireFox, but not in Internet Explorer.
I have three sections: the 'table of contents', the content, and the javascript (jQuery) code
Table of Contents
<a id="expandLink0" class="expandLinksList" href="#green">What is green purchasing</a><br>
<a id="expandLink1" class="expandLinksList" href="#before">Before you buy</a><br>
Contents
<ul id="makeIntoSlideshowUL">'
<li id="slideNumber0" class="slideShowSlide">
<a name="green"></a>
<div>Green Purchasing refers to the procurement of products and service...Back to Top</div>
</li>
<li id="slideNumber1" class="slideShowSlide">
<a name="before"></a>
<div>We easily accomplish the first four bullet points under...Back to Top</div>
</li>
</ul>
jQuery On Page Load
$(".slideShowSlide").each(function() {
$(this).children(":first-child").hide();
});
jQuery to re-enable links
$(".slideShowSlide").each(function() {
$(this).children(":first-child").show();
});
I've also tried prepending an extra character to all anchor names to 'disable' them, but IE won't change the names using attr("name"). The only real manipulation it's letting me do is remove().
Try doing it this way:
$(".slideShowSlide").each(function() {
$(this).children().first().hide();
});
Or even this way:
$(".slideShowSlide").each(function() {
$(this).children(':first').hide();
});

Categories

Resources