jQuery bxSlider and jQuery-ui tabs - javascript

I am using jQuery-ui for it's tab feature and also using bxSlider to slide images/content within only the first tab. However, when I click on the second tab the bxSlider "prev" and "next" options are still in my container. I tried using event.stopPropagation(), event.preventDefault() and stop() to stop the function, after realizing those didn't work I tried to create a function like this:
(function() {
$('#ab').click(function() {
$('#showcase').bxSlider({
controls: false,
});
});
});
where '#ab' is the tab and #showcase is the list element the images are located in. This function wouldn't exactly stop the bxSlider from being active, it would simply just hide the controls. However this did not work either.
Does anyone have any idea how this can be done?
Here is my HTML:
<div class="container">
<div id="tabs">
<ul>
<li><a id="sh" href="#showcase">Resumes</a></li>
<li><a id="ab" href="#about">About</a></li>
</ul>
<div id="showcase_container">
<ul id="showcase">
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
</ul>
<div id="about">
<span class="ab_title">Portfolio</span>
<ul id="portfolio_list">
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
And here is my JavaScript:
//initialize tabs
$(document).ready(function() {
$('#tabs').tabs();
});
//initialize slider
$(document).ready(function(){
$('#showcase').bxSlider({
hideControlOnEnd: true,
infiniteLoop: false,
});
});
Any help would be greatly appreciated! If this cannot be done can someone please redirect me to a similar image/content slider so I can make this work?

Wrap the ul tag used for the slider in another div (called showcaseTab) or whatever. The bxslider will then be contained to that tab and the arrows should show and hide the correct way.
<div id="showcaseTab">
<ul id="showcase">
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
</ul>
</div>

Related

isotope filter - prevent "selected" category from loading all images

I've tried the suggested fixes on Stack Overflow but can't seem to fix my issue. I'm trying to get a "selected" category to keep from loading all the images on page load. I've tried to remove the "Show All" line but that does not help. I believe this to be a js problem.
Here's my html and js:
HTML:
<div id="isotope-options">
<ul id="isotope-filters" class="clearfix">
<li>Show All</li>
<li>Recital Photos</li>
<li>Home Photos</li>
<li>Recital Videos</li>
</ul>
</div>
JS:
I couldn't fit all the js here, so here's a link:
isotope filter js
Here's the code you requested:
<li class="span3 isotope-element isotope-filter2">
<div class="thumb-isotope">
<div class="thumbnail clearfix">
<a href="gallery_images/recital_pics/1pm hippie group.jpg">
<div class="banner_inner">
<div class="banner_inner2">
<figure>
<img src="gallery_images/recital_pics/1pm hippie group - sm.jpg" alt=""><em></em>
</figure>
<div class="caption">
Group 1
</div>
</div>
</div>
<img src="images/banner_shadow.png" alt="" class="banner_shadow">
</a>
</div>
</div>
</li>
You can filter using this
$grid.isotope({ filter: '.selected' });

jQuery: How to create a menu and a submenu where the classes toggle on each click

I have this JS fiddle:
https://jsfiddle.net/zczwjdrw/7/
Menu 1:
When clicking on AAA it opens a menu.
When clicking on BBB it opens an other menu and removes AAAs style back to default. When clicking on BBB again it closes the submenu but doesn't change back to default. How do I solve this?
Menu 2:
When clicking on a sub menu option - it colors it. when clicking on an other option - it doesn't remove the class from the previous element. and you can continue coloring all submenu options. What can be the solution for this? I have used the same functionality on jQuery as .sidebar1.
jQuery:
$('.sidebar1 a').click(function(){
$(this).addClass('active-sb1').siblings().removeClass('active-sb1');
});
$('.sidebar2 a').click(function(){
$(this).addClass('active-sb2').siblings().removeClass('active-sb2');
});
HTML:
<div class="main-wrapper">
<div class="sidebar1">
<a href="ssb1" class="category" id="sb1" onclick="return false">
<div>AAA</div>
</a>
<a href="ssb2" class="category" id="sb2" onclick="return false">
<div>BBB</div>
</a>
<a href="ssb3" class="category" id="sb3" onclick="return false">
<div>CCC</div>
</a>
</div>
<div class="sidebar2" id="ssb1" style="display: none;">
<div class="sb2-content">
<h3>Choose Something:</h3>
</div>
<div class="sb2-menu">
<ul>
<li>
AAAAAAAAAAAAA
</li>
<li>
AAAAAAAAAAA
</li>
<li>
AAAAAAAAAAA
</li>
</ul>
</div>
</div>
<div class="sidebar2" id="ssb2" style="display: none;">
<div class="sb2-content">
<h3>Choose Something:</h3>
</div>
<div class="sb2-menu">
<ul>
<li>
BBBBBBBBBB
</li>
<li>
BBBBBBBBBB
</li>
<li>
BBBBBBBBBB
</li>
</ul>
</div>
</div>
<div class="sidebar2" id="ssb3" style="display: none;">
<div class="sb2-content">
<h3>Choose Something:</h3>
</div>
<div class="sb2-menu">
<ul>
<li>
CCCCCCCCC
</li>
<li>
CCCCCCCC
</li>
<li>
CCCCCCCC
</li>
</ul>
</div>
</div>
<div class="main-content">
<div class="user-bar">
</div>
<div class="content">
</div>
</div>
</div>
In .sidebar2 your <a> elements are inside a <li> so the <a> has no other siblings. But instead the parent <li> has siblings.
So, you could try something like this:
$('.sidebar2 a').click(function() {
var e = $(this);
e.addClass('active-sb2');
e.parent().siblings().children().removeClass('active-sb2');
});
And for your first problem, you could test if the element already has the class active-sb1, which means that the element is open, in which case you remove the class.
$('.sidebar1 > a').click(function() {
var e = $(this);
if (e.hasClass("active-sb1")) {
e.removeClass('active-sb1');
} else {
e.addClass('active-sb1');
}
e.siblings().removeClass('active-sb1');
});
Updated Fiddle link

Is it possible to access internal jQuery # links (access single website sections directly) from external url?

I have a single page - auto scroll website template with different divs scattered around it.
As stated in the title, can I access those href sections directly from an outside url? For example typing http://ozzzi.herobo.com/#about to take me directly to the ABOUT section of the single page website?
HTML:
<div class="top-nav">
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s2">
<h3>Menu</h3>
<a class="scroll" href="#home">Home</a>
<a class="scroll" href="#features">Features</a>
<a class="scroll" href="#screenshots">Screen Shots</a>
<a class="scroll" href="#services">Services</a>
<a class="scroll" href="#about">About</a>
<a class="scroll" href="#products">Products</a>
</nav>
<div class="main buttonset">
<!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
<button id="showRightPush"><img src="images/menu.png" alt=""/></button>
<!--<span class="menu"></span>-->
</div>
jQuery:
<div class="top-nav">
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s2">
<h3>Menu</h3>
<a class="scroll" href="#home">Home</a>
<a class="scroll" href="#features">Features</a>
<a class="scroll" href="#screenshots">Screen Shots</a>
<a class="scroll" href="#services">Services</a>
<a class="scroll" href="#about">About</a>
<a class="scroll" href="#products">Products</a>
</nav>
<div class="main buttonset">
<!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
<button id="showRightPush"><img src="images/menu.png" alt=""/></button>
<!--<span class="menu"></span>-->
</div>
</pre>
another HTML + jQuery example:
<pre>
<div id="products" class="products wow fadeInUp" data-wow-delay="0.5s">
<div class="container">
<div class="products-info">
<h3>The basic introdution of our Products.</h3>
<p>Creativity itself doesn't care at all about results - the only thing it craves is the process.
Learn to love the process and let whatever happens next happen,
without fussing too much about it. </p>
<img src="images/1.jpg" class="img-responsive zoom-img" alt=" " />
<div class="link">
Sign up
</div>
</div>
</div>
</div>
</pre>
<script>
$(document).ready(function () {
size_li = $("#myList li").size();
x=1;
$('#myList li:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+1 <= size_li) ? x+1 : size_li;
$('#myList li:lt('+x+')').show();
});
$('#showLess').click(function () {
x=(x-1<0) ? 1 : x-1;
$('#myList li').not(':lt('+x+')').hide();
});
});
</script>
I've added a link to the template to view it's source in case my explanations weren't good enough: [SOURCE][1]
[1]: http://ozzzi.herobo.com/source
In your example #About is a "bookmark" link. Any browser will attempt to scroll to an element with id="About" in the specified page. Just add IDs to each section to want to bookmark. The links can then just have the #bookmarkid value at the end of the URL.

CSS3 How do i add a hyperlink to <div data-image="#">

sorry i've tried asking this before and got no good results, so here's trying again.
I have tried many things and still haven't had any good results.
The code is here -> PasteBin
I want to add a hyperlink to the data-images for the ninja slider. I've never encountered data-image before but i can't use img src="#" cause that doesn't work with the javascript if you guys need any more information, let me know. This is driving me insane!
<div id='ninja-slider'>
<ul>
<li>
<div data-image="images/md/1.jpg"> </div>
</li>
<li>
<div data-image="images/md/2.jpg"> </div>
</li>
<li>
<div data-image="images/md/3.jpg"></div>
</li>
<li>
<div data-image="images/md/4.jpg"></div>
</li>
</ul>
</div>
this is the troublesome part.
Simply enclose your <div>s within an <a> tag. That way the <div>s are technically links.
<div id='ninja-slider'>
<ul>
<li>
<a href="images/md/1.jpg">
<div data-image="images/md/1.jpg"></div>
</a>
</li>
<li>
<a href="images/md/2.jpg">
<div data-image="images/md/2.jpg"></div>
</a>
</li>
<li>
<a href="images/md/3.jpg">
<div data-image="images/md/3.jpg"></div>
</a>
</li>
<li>
<a href="images/md/4.jpg">
<div data-image="images/md/4.jpg"></div>
</a>
</li>
</ul>
</div>
you can use java script to add link
Example:
<div onclick="javascript:location.href='http://www.google.com/'" data-image="images/md/1.jpg"> </div>
Also you can use css to change the pointer
#ninja-slider ul li div{
cursor:pointer;
}
Thanks..
Try using:
<div onclick="location.href='http://www.example.com';" />
Or use span or a tags instead
<style type="text/css">
.myspan {
display: block;
}
</style>
<span class="myspan">text</span>

How do you stop a event from effecting an image gallery?

I am using the on method to attach a 'click' event to a button to toggle a gallery...
$(document).ready(function() {
$('.galleryContainer').hide();
$('.myButtons').on("click", function(e) {
$('.galleryContainer').toggle(400);
e.stopPropagation();
return false;
});
});
The problem is, it's effecting the functionality of the gallery (i.e. clicking on the thumbnail of the gallery is causing the toggle function to fire...)
Any help would be appreciated!
<div class="container">
<div class="alpha sixteen columns omega">
<h2>Engagements</h2>
<div id="myWorkEngagements" class="scale-with-grid"></div>
press me
<p class="coreParagraph">
Skeleton is built on three core principles:
</p>
<ul class="galleryContainer gallery">
<li><img src="images/weddingImages/thumb/001.jpg" alt="Image 001" class="myButtons">
</li>
<li>
<img src="images/weddingImages/thumb/002.jpg" alt="Image 002" class="myButtons">
</li>
</ul>
</div><!-- eight columns -->
You have added the same class myButtons to the thumbnail images so the click handler will fire because of the selector is based on this class.
Try assigning another class to the images like myButtons2
Code:
<div class="container">
<div class="alpha sixteen columns omega">
<h2>Engagements</h2>
<div id="myWorkEngagements" class="scale-with-grid"></div> press me
<p class="coreParagraph">Skeleton is built on three core principles:</p>
<ul class="galleryContainer gallery">
<li><img src="images/weddingImages/thumb/001.jpg" alt="Image 001" class="myButtons2">
</li>
<li> <img src="images/weddingImages/thumb/002.jpg" alt="Image 002" class="myButtons2">
</li>
</ul>
</div>
<!-- eight columns -->
Demo: http://jsfiddle.net/IrvinDominin/856FL/

Categories