I have seen many threads about this online but none seem to provide a workable solution. I am simply trying to toggle different tabs in a Jquery UI tabs widget with an external href
The closest I feel I have got with this problem was with this solution, pasted below, which does not seem to work:
<script>
$(document).ready(function(){
$('#tabs2').tabs();
$('.open-tab').click(function(event) {
var tab = $(this).attr('href');
$('#tabs2').tabs('select', tab);
});
});
</script>
<div id="tabs2">
<ul>
<li>Tab header 1</li>
<li>Tab header 2</li>
<li>Tab header 3</li>
<li>Tab header 4</li>
<li>Tab header 5</li>
</ul>
<div id="tabs2-1">
Tab Content 1
</div>
<div id="tabs2-2">
Tab Content 2
</div>
<div id="tabs2-3">
Tab content 3
</div>
</div>
The reason I want to load the tabs with external hrefs is because I will be loading the tab from a david lynch maphilight utility. An example of such a link is as follows:
<area class="EU" shape="poly" title="France" href="#tabs2-1" coords="353,108,345,107,345,104,347,100,345,96,342,94,339,92,339,91,345,91,345,89,348,90,351,88,353,85,359,88,366,91,366,92,362,97,363,99,362,99,365,103,362,106,358,105,354,106,353,108">
As you can see from above the href gives you the ID of the link, so I don't want an indexed solution... Any help would be greatly appreciated as I am slowly but surely starting to lose my sanity and I think I have already broken the enter key :-) Thanks in advance!
Jsfiddle: http://jsfiddle.net/Guill84/spyt9/
I manipulate your fiddle, it's working greate.
updated fiddle
I've just use return false :
$(document).ready(function(){
$('#tabs2').tabs();
$('.open-tab').click(function(event) {
var tab = $(this).attr('href');
$('#tabs2').tabs('select', tab);
return false;
});
});
Edit:
your html code is wrong, you should use the selector in your jQuery for you link, it's working know by this :
TEST 1
try it : http://jsfiddle.net/spyt9/4/
Related
I am using the Bootstrap framework through out the entire site for the responsive design ability. I am also using AJAX calls to switch between every page. On one page I am using the Bootstrap tabs to switch between page contents. Everything works perfectly when you are directed to the page through any of the ajax links but if you manually type in the url the tab contents wont change. The tabs themselves will change when you click on them but the content stays on the original content. I originally though it might have something to do with the javascript I'm using so that you can direct the user to a certain tab with a hashtag but it still doesn't work when I remove the code. Here is the code:
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
Tab #1
</div>
<div class="tab-pane" id="tab2">
Tab #2
</div>
<div class="tab-pane" id="tab3">
Tab #3
</div>
<div class="tab-pane" id="tab4">
Tab #4
</div>
</div>
<script>
$(function(){
if (window.location.hash) {
var hash = window.location.hash;
var tab = $('[data-toggle="tab"][href="' + hash + '"]');
tab.show();
tab.tab('show');
}
});
</script>
Can anyone help me with this?
You have to add a listener to the hashchange window event.
You probably opened the page without a hash. At this point, your script was executed. When you change the hash in your adress bar, the page will not be reloaded. So there is no-one to handle that event. For this you have the hashchange event to react to such changes.
See the MDN documentation for more info and examples on this event.
If you are using jQuery, check out this answer.
Hi I am trying to create a one page website that contains multiple div's about the same size as the window.The website will have a menu that will refer to each div on the page.What I want to do is animate the window when the user clicks on one of the menu links to it's coresponding div.
http://www.nistoralexandru.comule.com/div.jpg
When a user clicks on a link I need the window to animate to that div similar to this site:
http://shahkaarshah.com/
How can I do this?
The site you're linking to is built with Flash, replicating the animation of different page elements with javascript should'nt be to hard, but there's really no quick "one size fits all" function to do it.
Here's a quick example of how it's usually done :
Build some sort of HTML structure:
<div id="site">
<div id="main" class="page">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
</ul>
</div>
<div id="page1" class="page">Back</div>
<div id="page2" class="page">Back</div>
<div id="page3" class="page">Back</div>
<div id="page4" class="page">Back</div>
<div id="page5" class="page">Back</div>
</div>
And animate it around the viewport with a little javascript:
$('.page a').on('click', function(e) {
e.preventDefault();
var href = $(this).attr('href'),
top = $(href).css('top'),
left = $(href).css('left');
$("#site").animate({top: '-'+top, left: '-'+left}, 1000);
});
Here's a FIDDLE
You might be meaning something like accordion?
http://jqueryui.com/demos/accordion/
There are many easy-to-use accordion plugins for jquery, so they might be easier to use for complex animations than coding from scratch.
Based on your added information, maybe a grid accordion such as this?
http://css-tricks.com/examples/InfoGrid/
Sorry for the vague title, but I couldn't find an appropriate title, explaining the problem well.
The problem: I wrote a code that toggles lists. It works the way I want it. When I click on the the 'headcategory' it opens the subcategories, etc. The problem occurs when I click on the headcategory for the first time, it opens every list, which is not what I want. When I close and open it again, it works the way it should be. I'm trying to figure out why it does that, but I've no clue. So if someone could help me, he/she would be greatly appreciated.
JQuery code.
$(document).ready(function()
{
$('ul.subcat').hide();
$('li').click(function(event)
{
event.stopPropagation();
$('ul', this).toggle();
});
});
HTML code
<ul class="headcat">
<li>item 1
<ul class="subcat">
<li>subitem 1
<ul class="subcat">
<li>subsubitem 1
<ul class="subcat">
<li><p>text</p></li>
</ul>
</li>
<li>subsubitem 2
<ul class="subcat">
<li><p>text</p></li>
<li>subsubsubitem 1
<ul class="subcat">
<li><p>text</p></li>
</ul>
</li>
<li>subsubsubitem 2</li>
</ul>
</li>
</ul>
</li>
<li>item 2</li>
</ul>
</li>
</ul>
You need to only select direct descendants of the currently clicked li, try this:
$(this).children("ul").toggle();
The following will also work, however it's not considered best practice to use the > descendant selector without a primary element before it.
$('> ul', this).toggle();
Example fiddle
Or try to hide the first subcat only on init:
$('ul.subcat:first').hide();
DEMO here: http://jsfiddle.net/kv4dT/
I'm creating a website to showcase an app and want to allow users to click through an iPhone mockup to view various features of the app.
I have an iPhone overlay, housed as a background-image, (.iphone) and a screen grab, also housed as a background-image, (.screen) on the page, but want users to be able to dictate what screengrab is shown by clicking specific buttons.
I'm not familiar with JQuery myself but have been told that that would be a possible solution to this. How would I achieve this? My code is...
<div class="iphone"></div>
<div class="screen"></div>
<ul>
<li class="screenshots">Screen 1</li>
<li class="screenshots">Screen 2</li>
</ul>
Any help would be greatly appreciated.
EDIT: I've found an example of something similar. Here it is...link. Click a thumbnail and it shows on the iPhone.
I'd probably set it up as follows:
<div class="fullsize">
<div class="iphone"></div>
<div class="screen"></div>
<div>
<ul class="screenshots">
<li class="iphone" id="scr1">Screen 1</li>
<li class="screen" id="scr2">Screen 2</li>
</ul>
<script>
$('.screenshots li').click(function() {
$('.fullsize div').hasClass($(this).attr('class')).css('background-image', 'imgurl'));
});
</script>
<div class="iphone"></div>
<div class="screen"></div>
<ul>
<li class="screenshots">Screen 1</li>
<li class="screenshots">Screen 2</li>
</ul>
<script>
$('.screenshots a').click(function(){
switch($(this).attr('id')){
case 'src1':
$('.iphone').css('background-image','url("image1.png")');
break;
case 'src2':
$('.iphone').css('background-image','url("image2.png")');
break;
}
});
</script>
$('li').click(function(){
$('div').css("background-image", "image/url/here.ext");
)};
Semantically speaking, your markup should look like:
<div class="screenshot" id="iphone"></div>
<div class="screenshot" id="screen"></div>
<ul id="screenshot-nav">
<li>Screen 1</li>
<li>Screen 2</li>
</ul>
It's more appropriate to use actual links instead of adding a click event to an li. Besides, doing it this way allows the functionality to work even without javascript, as at the very least, the user will simply be "jumped" to the right screenshot.
With that in place, the following jQuery should work:
$('#screenshot-nav a').click(function(){
$('.screenshot').hide();
$($(this).attr('href')).show();
});
However, since you're making this for an iPhone, you should probably look into jQuery Mobile, instead, and particularly the touch event handler, instead of click.
I'd suggest a single jQuery click handler that can set the desired image background for each one:
<div class="iphone"></div>
<div class="screen"></div>
<ul>
<li class="screenshots" data-backgroundurl="url1.jpg">Screen 1</li>
<li class="screenshots" data-backgroundurl="url2.jpg">Screen 2</li>
</ul>
<script>
$('.screenshots').click(function(){
$('.screen').css('background-image', $(this).data("backgroundurl"));
});
</script>
I needed a bit of help
My problem is I need a Fade in Fade out function that keeps repeating my Div Content about every 7 seconds. Content 1 will appear, then Content 2 will fade in, then Content 3 fade in after content 2 fades out, and it keeps repeating.
I wrote a script but it seems to not working properly. What am I doing wrong? How can I make this more efficient? Any guide will be helpful.
THE HTML inside of a UL wrapped in LIs
<ul>
<li class=”thecontent”> CONTENT 1</li>
<li class=”thecontent”> CONTENT 2</li>
<li class=”thecontent” > CONTENT 3</li>
<li class=”thecontent” > CONTENT 4</li>
<ul>
THE CSS
ul li.thecontent{ display:none;}
THE JQUERY
$(document).load(function(){
function fadeMyContent() {
$(".content:hidden:first").fadeIn(700).delay(1000).fadeOut(700,
function() { $(this).appendTo($(this).parent());
fadeMyContent(); });
}
fadeMyContent();
Here you go. In your code the class name in the selector is wrong and also the double quotes enclosing the class names in the markup is not correct.
Working demo
$(function(){
function fadeMyContent() {
$(".thecontent:first").fadeIn(700).delay(1000).fadeOut(700,
function() {
$(this).appendTo($(this).parent());
fadeMyContent();
});
}
fadeMyContent();
});
Mark up
<ul>
<li class='thecontent'> CONTENT 1</li>
<li class='thecontent'> CONTENT 2</li>
<li class='thecontent'> CONTENT 3</li>
<li class='thecontent'> CONTENT 4</li>
<ul
Are you calling the correct class?
.content in the jQuery code and "thecontent" in the markup. How exactly is it not working properly? Is the timer not working is it fading too fast, not showing anything at all?
luckily this is what i am working on right now lol
$(document).ready(function(){
$('.clicked').click(function(){
$(this).next('.nextSibling').toggle('slow');
});
});