I can't seem to get scrollspy to work with hidden elements.
I place the data-spy="scroll" on the body, and data-target=".classOfNavWrapper", and it doesn't ignore the hidden elements like the docs imply, but rather seems to choose elements to activate almost at random.
Here's a fiddle: http://jsfiddle.net/shdapqap/1/
<div class="container">
<div class="row">
<div class="span3">
<div class="nav-wrapper">
<ul id="my-nav" class="nav nav-list affix">
<li>Moose</li>
<li>Bear</li>
<li>Beaver</li>
<li>Raccoon</li>
<li>Bobcat</li>
</ul>
</div>
</div>
<div class="span9 my-content">
<section id="moose">
Mooses are cool and big and stuff.
</section>
<section id="bear">
You better stay away from bears, they are bad news.
</section>
<section id="beaver">
Beavers like to slap their tail to scare predators and children.
</section>
<section id="raccoon" class="hidden">
Raccoons like french fries, don't ask me how I know.
</section>
<section id="bobcat" class="hidden">
I would like to know if bobcats go crazy for catnip like my house cat does.
</section>
<button class="show">Show next</button>
</div>
</div>
</div>
On the bottom is a show next button.. which shows the next hidden div and refreshes scrollspy, it only seems to work fluently once the last hidden class is removed.
Bootstrap version: 2.2.2 (stuck with that).
I solved this by replacing the ScrollSpy part of the Bootstrap 2.2.2 JS with the Scrollspy part from Bootstrap 3.3.5. And of course, remembering to refresh the scrollspy after revealing each item.
Related
Just like the image I want to make, when Home is clicked, it is located in the navigation-aside-wrapper on the right.
Opening the navigation-aside-item page, I couldn't figure out how to do this. I would love it if you could help.
image
<div class="container">
<div class="navigation">
<div class="navigation-wrapper">
<div class="navigation-aside-item">
<span>Home</span>
</div>
<div class="navigation-aside-item">
<span>About</span>
</div>
</div>
</div>
<div class="navigation-aside-wrapper">
<div class="navigation-aside-item">
Home Child
</div>
<div class="navigation-aside-item">
About Child
</div>
</div>
</div>
If you are wanting to show different page content when you click an menu item you can use Javascript to show the correct content for each button.
Here is a post that shows how to do this. show hide html code/content using nav menu
I've looked around and unfortunately, haven't found anything that quite matches what I'm hoping to achieve. I have two things going on. First an image/content slider which I'm using Awkward Showcase for. Then within each slide I need to build a mousein/mouseout effect that swaps and hides an image when the user hovers over the text option. My JS looks like this:
$("#news-2, #news-3, #news-4, #news-5, #news-6").hide();
$("#newsitem-1, #newsitem-2, #newsitem-3, #newsitem-4, #newsitem-5, #newsitem-6").mouseover(function(){
$(this).css('cursor', 'pointer');
if($("#newsitem").val() != $(this).attr('id').replace('newsitem', 'news')){
$("#news-1").hide();
$("#news-2").hide();
$("#news-3").hide();
$("#news-4").hide();
$("#news-5").hide();
$("#news-6").hide();
$("#newsitem").val($(this).attr('id').replace('newsitem', 'news'));
var vid = $(this).attr('id').replace('newsitem', 'news');
$("#" + vid).show();
}
});
My html looks like this:
<div id="showcase" class="showcase">
<div class="showcase-slide cs-1">
<div class="showcase-content">
<div class="cs-container">
<div class="thumbs">
<div id="news-1"><img src="http://placehold.it/640x360/eeeeee/cccccc" border="0"></div>
<div id="news-2" style="display: none;"><img src="http://placehold.it/640x360/dddddd/dddddd" border="0"></div>
<div id="news-3" style="display: none;"><img src="http://placehold.it/640x360/cccccc/aaaaaa" border="0"></div>
</div>
<div class="cs-links">
<h2>Link Title 1</h2>
<ul>
<li id="newsitem-1">Hover Change Image 1</li>
<li id="newsitem-2">Hover Change Image 2</li>
<li id="newsitem-3">Hover Change Image 3</li>
</ul>
</div>
</div>
</div>
<div class="showcase-thumbnail">
<div class="showcase-thumbnail-caption">Caption Title</div>
<div class="showcase-thumbnail-cover"></div>
</div>
</div>
<div class="showcase-slide cs-2">
<div class="showcase-content">
<div class="cs-container">
<div class="thumbs">
<div id="news-4"><img src="http://placehold.it/640x360/eeeeee/cccccc" border="0"></div>
<div id="news-5" style="display: none;"><img src="http://placehold.it/640x360/dddddd/dddddd" border="0"></div>
<div id="news-6" style="display: none;"><img src="http://placehold.it/640x360/cccccc/aaaaaa" border="0"></div>
</div>
<div class="cs-links">
<h2>Link Title 2</h2>
<ul>
<li id="newsitem-4">Hover Change Image 1</li>
<li id="newsitem-5">Hover Change Image 2</li>
<li id="newsitem-6">Hover Change Image 3</li>
</ul>
</div>
</div>
</div>
<div class="showcase-thumbnail">
<div class="showcase-thumbnail-caption">Restaurant TV</div>
<div class="showcase-thumbnail-cover"></div>
</div>
</div>
</div>
Any suggestions would be hugely appreciated. One thing to note is the code I've written only works once, once you engage the slide function the hover effect breaks unless you hard refresh.
Edit: Question is, how can I make this more efficient. I have multiple items (image and text). And any ideas why this breaks once the slide function is engaged?
I used ID's because it's a one to one relationship between the text and the associated image.
Edit 2: If I swap the order of my js, the function breaks. Here is a JSFiddle as long as I keep this order everything works until I engage the slider.
http://jsfiddle.net/mV3dJ/
I've not really seen a function done like this before but one thing that stands out to me as a potential breaker is this
var vid = $(this).attr('id').replace('newsitem', 'news');
If you're replacing an ID of something which listen to an event, then the event can only occur once on that element (as the next time it has a different name and so won't recognise it.
Ideally you want to use a web debugger like firebug or Chrome developer tools, set breakpoints and figure out from stepping through the code why it isn't working correctly.
i have a Menu in which when user selects from menu list it displays that div and rest are hidden i have a huge menu list is there any function such that it displays only that div Can Anyone help please....
HTML:
<ul>
<li class="one">One</li>
<li class="two">Two</li>
<li class="three">Three</li>
</ul>
<div id="one"> Div one </div>
<div id="two"> Div two </div>
<div id="three"> Div three</div>
CSS:
div {
display:none;
}
li {
cursor:pointer;
}
JQuery:
$('li').click(function(){
$('div#' + $(this).attr('class')).show().siblings().hide();
});
This isn't a particularly well phrased question, but i'm thinking you want to give all your divs that can be shown a particular class, and give each ond an id:
<div class="revealPanel" id="panel1">
<!-- Content -->
</div>
<div class="revealPanel" id="panel2">
<!-- Content -->
</div>
<div class="revealPanel" id="panel3">
<!-- Content -->
</div>
<!-- etc. ... -->
You've tagged this query with jquery-ajax so I'm going to assume you know how to include jQuery in your page etc.. Define a javascript function to hide all divs and show a specified one:
function ShowPanel(panelId)
{
jQuery('.revealPanel').hide();
if (panelId != null)
{
jQuery(panelId).show();
}
}
And now just call that function from each of your menu links with the correct id, for instance:
<a href="javascript:ShowPanel('panel1');>Show Panel 1</a>
Of course I may have misinterpreted your question, and even if I haven't I encourage you to provide more detail in your questions — use code snippets to show how you've designed your menu etc.
Good luck!
I've got a page with a three column layout (main nav on the left, center console in the middle and specific page options/navigation on the right). Until now I've been using jQuery UI's Tabs widget in the center console area for one of my pages.
What I'd like to do is separate the tabs (putting them in the right hand column) whilst maintaining the contents position in the middle. Like this:
<div id="center_console">
<div class="tabs_container" id="pets"></div>
<div class="tabs_container" id="family"></div>
<div class="tabs_container" id="bio"></div>
</div>
<div id="right_options">
<div id="tabs">
<ul>
<li>Pets</li>
<li>Family</li>
<li>Bio</li>
</ul>
</div>
</div>
So far however I've been unable to find a way to use jQuery UI to do this (it seems to require that tabs and content be placed within the same container).
I think what you need to do is use the 'select' method
So you would bind your links to the tab you want to click
<div id="center_console">
<div class="tabs_container" id="pets"></div>
<div class="tabs_container" id="family"></div>
<div class="tabs_container" id="bio"></div>
</div>
<div id="right_options">
<div id="tabs">
<ul>
<li id="pets">Pets</li>
<li id="family">Family</li>
<li id="bio">Bio</li>
</ul>
</div>
</div>
$(function(){
//set-up your tabs as normal first
$('#bio').click(function(){
$('#center_console').tabs("select", '#bio');
});
});
You may need to have some links set-up as tabs in the center_console as well, but you could use CSS to hide these. I'm not 100% sure on how tabs() works under the hood. I managed to get this working by hacking around the jqueryui demo with firebug, but for some reason I couldn't get the tabs to work in jsfiddle. If you can set-up an example in that I'm happy to edit it to show you what I did
Thanks to a useful comment below, I realised that I'm not following best practice here. I've set-up a fiddle that should achive what you want ( all be it you will need to style it correctly). It can be found here http://jsfiddle.net/GKNC9/1/
thanks
I would like to create a simple javascript slideshow that allows a user to click 'Previous' or 'Next' and have the element slide in from the right or left depending. Content will be coming in from a CMS, so it's not 'hard-coded' persay. My markup would look like this ideally (where the most recent entry receives the 'show' class):
<span class="back">Previous slide</span>
<span class="next">Next Slide</span>
<div id="slideshow">
<div class="client show">
<p>Yada</p>
</div>
<div class="client hide">
<p>Yada</p>
</div>
<div class="client hide">
<p>Yada</p>
</div>
<div class="client hide">
<p>Yada</p>
</div>
</div><!--end slideshow-->
I need something that will automatically detect order and allow the number of .client classes to be anything. This seems very close: http://jsbin.com/ekecu but I don't want it to be based on visible links to switch, just the same absolutely positioned previous and next buttons.
Would really appreciate some help, or if you were feeling especially generous an source snippet I could use.
Shadow Box or Fancybox?