I'm trying to build a gallery page use Flexslider in a site built with Foundation. If I build the Flexslider on its own, it works fine, but when I incorporate it into a page with Foundation it stops working. I can only get any of the images to load by adding in some extra CSS to force the initial image to load, but the thumbnails do not control which slide is shown (nor do they even show as a clickable element) and none of the navigation controls appear. Everything related to both Foundation and Flexslider has been copied from a working example to avoid typing errors.
As a work around, I did the following...
I created thumbs with the code below:
<div class="flexslider-controls">
<ol class="new-nav">
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-1.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-1.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-2.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-3.jpg" />
</div>
</div>
</div>
</li>
</ol>
</div>
Then using some jquery, as you click on each thumb, it will change the slider to the corresponding slide:
$(document).ready(function () {
$(document).on('click','.new-nav li a',function(){
var index = $('.new-nav li a').index(this) + 1;
$('.videos-slider').flexslider(index);
return false;
});
});
Related
This is my site: http://2helix.com.au/v-04/ It's simple, built with HTML.
Now you can right side navbar. When you click on any link it will show you content. By default all content is hidden.
Now I want to point that section when I click on the link. For example: If I click on social link it's should go to social content section.
I know, If I use this It's should work:
<li><a class="showSingle social" target="1" href="social">SOCIAL</a></li>
<div id="social"></div>
If I do this then page is open on new window.
How can I smoothly go to that section without new window?
Thanks.
Here is my code:
<ul class="nav">
<li>SOCIAL</li>
<li><a class="showSingle" target="2">DIGITAL</a></li>
<li><a class="showSingle" target="3">DESIGN</a></li>
<li><a class="showSingle" target="4">DEVELOPMENT</a></li>
<li>CONTACT</li>
</ul>
<div class="container content">
<div class="row">
<div class="col-md-12">
<div id="div1 mySocial" class="targetDiv socialContent">
<h3 class="left"><span>1</span></h3>
<div class="textContent">
<h1><strong>SOCIAL</strong></h1>
<p>As Social Media becomes more intrinsic in our daily life’s, </p>
</div>
</div>
<div id="div2" class="targetDiv">
<h3 class="left"><span>2</span></h3>
<div class=" textContent">
<h1><strong>DIGITAL</strong></h1>
<p>Whethere it's eCommerce, web sites, EDM templates</p>
</div>
</div>
<div id="div3" class="targetDiv">
<h3 class="left"><span>3</span></h3>
<div class="textContent">
<h1><strong>DESIGN</strong></h1>
<p>Requiremtns for design in social </p>
</div>
</div>
<div id="div4" class="targetDiv">
<h3 class="left"><span>4</span></h3>
<div class="textContent">
<h1><strong>DEVELOPMENT</strong></h1>
<p>Success in Social is standing out</strong></p>
</div>
</div>
</div>
</div>
</div>
// jQuery code...
$(document).ready(function(){
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.content').show();
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).show();
});
});
});
You've a huge number of problems with your basic HTML code that you need to fix before you even look at adding jQuery
You cannot give an element 2 ids. <div id="div1 mySocial" class="targetDiv socialContent"> is not valid. You will need to create a separate element for your anchor e.g. <a id="mySocial"></a>
To link to an anchor you need to use # in the href, e.g. <a href="#mySocial" class="social" >
You cannot use target like that. There are specific values that are allowed and numbers are not any of them. Instead you could use the data-target
Now to what you are trying to do with jQuery...
You are hiding all content except for the one you click on, so there is no scrolling required... see the working example below. What exactly are you trying to achieve?
$(document).ready(function(){
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.content').show();
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).data('target')).show();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li>SOCIAL</li>
<li>DIGITAL</li>
<li>DESIGN</li>
<li>DEVELOPMENT</li>
<li>CONTACT</li>
</ul>
<div class="container content">
<div class="row">
<div class="col-md-12">
<a id="mySocial"></a>
<div id="div1" class="targetDiv socialContent">
<h3 class="left"><span>1</span></h3>
<div class="textContent">
<h1><strong>SOCIAL</strong></h1>
<p>As Social Media becomes more intrinsic in our daily life’s, </p>
</div>
</div>
<a id="digital"></a>
<div id="div2" class="targetDiv">
<h3 class="left"><span>2</span></h3>
<div class=" textContent">
<h1><strong>DIGITAL</strong></h1>
<p>Whethere it's eCommerce, web sites, EDM templates</p>
</div>
</div>
<a id="design"></a>
<div id="div3" class="targetDiv">
<h3 class="left"><span>3</span></h3>
<div class="textContent">
<h1><strong>DESIGN</strong></h1>
<p>Requiremtns for design in social </p>
</div>
</div>
<a id="development"></a>
<div id="div4" class="targetDiv">
<h3 class="left"><span>4</span></h3>
<div class="textContent">
<h1><strong>DEVELOPMENT</strong></h1>
<p>Success in Social is standing out</p>
</div>
</div>
</div>
</div>
</div>
Try to change your jquery code like This:
$(document).ready(function() {
jQuery(function() {
jQuery('.showSingle').click(function() {
jQuery('.content').show();
jQuery('.targetDiv').hide();
jQuery('#div' + $(this).attr('target')).show();
$('html, body').animate({
scrollTop: $('#div' + $(this).attr('target')).offset().top
}, 500);
return false;
});
});
});
Add also this code on click.
jQuery('html').animate({
scrollTop: jQuery(".content").offset().top
});
If you replace
target = "1"
with
data-target = "#social"
then the link will jump down to a div with the id = "social"
<li><a class="showSingle social" data-target="social" href="social">SOCIAL</a></li>
<div id="social"></div>
I building a website, and I am not good in js or jQuery. I have no idea what to do. I was in search for couple days, to find any library that support this feature. However, there are different libraries I found, but most of them are separate from what I need, zoom and thumbnails. It has to be similar to Amazon or eBay product listing slider.
Can any one give me a clue where should I start?
PS. I tried swiper.js, but it has zoom only on double click.
Updated 5/16/2017
Example
Hi first of all visit to the link http://www.landmarkmlp.com/js-plugin/owl.carousel/ and download slider.
open your header of the website theme and put the js and CSS which one mentions into the snippet below, and replace the images, js and css files path which where it is.
After that put the HTML sections where you would like to show your slider, and replace the div with your dynamic products loop code.
$(document).ready(function($) {
$("#owl-example").owlCarousel();
});
$("body").data("page", "frontpage");
<link href="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="http://www.landmarkmlp.com/js-plugin/owl.carousel/owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="http://www.landmarkmlp.com/js-plugin/owl.carousel/owl-carousel/owl.theme.css" rel="stylesheet">
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-example" class="owl-carousel">
<div class="item darkCyan">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/touch.png" alt="Touch">
<h3>Touch</h3>
<h4>Can touch this</h4>
</div>
<div class="item forestGreen">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/grab.png" alt="Grab">
<h3>Grab</h3>
<h4>Can grab this</h4>
</div>
<div class="item orange">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/responsive.png" alt="Responsive">
<h3>Responsive</h3>
<h4>Fully responsive!</h4>
</div>
<div class="item yellow">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/css3.png" alt="CSS3">
<h3>CSS3</h3>
<h4>3D Acceleration.</h4>
</div>
<div class="item dodgerBlue">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/multi.png" alt="Multi">
<h3>Multiply</h3>
<h4>Owls on page.</h4>
</div>
<div class="item skyBlue">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/modern.png" alt="Modern Browsers">
<h3>Modern</h3>
<h4>Browsers Compatibility</h4>
</div>
<div class="item zombieGreen">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/zombie.png" alt="Zombie Browsers - old ones">
<h3>Zombie</h3>
<h4>Browsers Compatibility</h4>
</div>
<div class="item violet">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/controls.png" alt="Take Control">
<h3>Take Control</h3>
<h4>The way you like</h4>
</div>
<div class="item yellowLight">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/feather.png" alt="Light">
<h3>Light</h3>
<h4>As a feather</h4>
</div>
<div class="item steelGray">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/tons.png" alt="Tons of Opotions">
<h3>Tons</h3>
<h4>of options</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://www.landmarkmlp.com/js-plugin/owl.carousel/owl-carousel/owl.carousel.min.js"></script>
Hope so it will work for you. You just need to update files path according where it is situated in your website files directories.
I wanted to load a html template inside foundation popover, but i could not found any good documentation or similar solution on internet. I just wanted to know weather this is possible to have a html template along with its controller inside popover or not.
i saw we just load content in popover using properties like below:
<button popover="{{dynamicPopover}}"
popover-title="{{dynamicPopoverTitle}}" class="button">Dynamic Popover</button>
or
<button popover="I appeared on mouse enter!" popover-trigger="mouseenter" class="button">Mouseenter</button>
i can somehow inject the html using scope but difficult to have controller for that.
I want to load a popover for my website (which is getting build using angularJS) when user mouse over on video thumbnail i want to load the preview image of the video and on mouse over on popover i want to have some buttons which perform some action when click on them.
Try This http://codepen.io/Blu-Jay/pen/wMRBLx
$(document).foundation();
.callout{
text-align:center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.0.5/foundation.min.js"></script>
<link href="https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css" rel="stylesheet">
<div class="row">
<div class="large-8 large-centered columns">
<div class="callout">
<h3>Password Verification</h3>
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="text-right">Username</label>
</div>
<div class="small-9 columns">
<input type="text" id="right-label" placeholder="Username">
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="text-right">Password</label>
</div>
<div class="small-9 columns">
<input type="password" id="right-label" placeholder="Password Please" data-toggle="example-dropdown-1">
</div>
</div>
</div>
</div>
</div>
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true">
<strong>Password Must meet to following criteria:</strong>
<ul class="no-bullet">
<li style="color:red;">Must be between 4 and 8 characters</li>
<li style="color:red;">Must contain capital letters</li>
</ul>
</div>
Im making an 'interactive menu' that moves along with user clicks.
Im wondering if there is a way to include html templates in ng-switch,
since all the logic is different in each 'switch' - it will result in huge html files.
<div class="content" ng-switch on="selection">
<div ng-switch-when="1" >
<h1>1</h1>
</div>
<div ng-switch-when="2">
<h1>2</h1>
</div>
</div>
Use ngInclude:
<div class="content" ng-switch on="selection">
<div ng-switch-when="1" >
<ng-include src="'template1.html'"></ng-include>
</div>
<div ng-switch-when="2">
<ng-include src="'template2.html'"></ng-include>
</div>
</div>
Note: Dont forget to use single quotes wrapped inside the double quotes if you are hard-coding the path.
You should be able to do it with ng-include directive :
<div class="content" ng-switch on="selection">
<ng-switch-when="1" ng-include="//TEMPLATE PATH">
<ng-switch-when="2" ng-include="//TEMPLATE 2 PATH">
</div>
**I used ng-Include this way.**
<!-- Main content -->
<div class="row">
<!-- right col -->
<section class="col-lg-12">
<ul class="nav nav-tabs responsive ui-tabbed" id="myTab">
<li class="active">
<a data-ng-click=' main.active.tab = "tab-1" '>Tab 1</a>
</li>
</ul>
<!-- end responsive tabs -->
<div class="tab-content ui-tabbed-contents responsive">
<div data-ng-switch = " main.active.tab ">
<div data-ng-switch-when='tab-1' >
<ng-include src="'tab-one.html'" ></ng-include>
</div>
</div>
</div>
</div>
<!-- end main tabs container -->
</section>
I'm using this script for jQuery Vertical Tabs.
http://www.scriptbreaker.com/javascript/script/JQuery-vertical-tab-menu
<script language="JavaScript">
$(document).ready(function() {
$(".tabs .tab[id^=tab_menu]").hover(function() {
var curMenu=$(this);
$(".tabs .tab[id^=tab_menu]").removeClass("selected");
curMenu.addClass("selected");
var index=curMenu.attr("id").split("tab_menu_")[1];
$(".curvedContainer .tabcontent").css("display","none");
$(".curvedContainer #tab_content_"+index).css("display","block");
});
});
</script>
Here's the HTML for the tabs (links)
<div class="tabscontainer">
<div class="tabs">
<div class="tab selected first" id="tab_menu_1">
<div class="link">JavaScript</div>
<div class="arrow"></div>
</div>
<div class="tab" id="tab_menu_2">
<div class="link">CSS</div>
<div class="arrow"></div>
</div>
<div class="tab last" id="tab_menu_3">
<div class="link">JQuery</div>
<div class="arrow"></div>
</div>
</div>
I am trying to create an additional link from within a tabs content to another tab.
So this way I can link to the next tab or the last tab, keeping the same functionality as the current tab links (no refresh)
This is my first question on stackoverflow and I've searched far and wide.
I really appreciate all the help. This is a great community.
UPDATE:
Okay, Here is an edit with my full code:
<script type="text/javascript">
$(document).ready(function() {
$(".tabs .tab[id^=tab_menu]").click(function() {
var curMenu=$(this);
$(".tabs .tab[id^=tab_menu]").removeClass("selected");
curMenu.addClass("selected");
var index=curMenu.attr("id").split("tab_menu_")[1];
$(".curvedContainer .tabcontent").css("display","none");
$(".curvedContainer #tab_content_"+index).css("display","block");
});
});
</script>
<div class="curvedContainer">
<div class="tabcontent" id="tab_content_1" style="display:block">
<p>text</p>
</div>
<div class="tabcontent" id="tab_content_2">
<p>text</p>
</div>
<div class="tabcontent" id="tab_content_3">
<p>text</p>
</div>
<div class="tabcontent" id="tab_content_4"><h2 class="wwd_title">
<p>text</p>
</div>
</div>
<div class="tabscontainer">
<div class="tabs">
<div class="tab selected first" id="tab_menu_1">
<div class="link">Onefish</div>
</div>
<div class="tab" id="tab_menu_2">
<div class="link">Twofish</div>
</div>
<div class="tab" id="tab_menu_3">
<div class="link">Redfish</div>
</div>
<div class="tab last" id="tab_menu_4">
<div class="link">Bluefish</div>
</div>
</div>
In order to make links in the tab contents force the tabs to switch, it helps to understand what is happening under the hood to make them switch by default.
By default, mouseover events force the tabs to change; therefore, the solution is to override the default click event of the hyperlinks in question by binding an event to hyperlinks in the tab content:
Include this code after the JavaScript code you showed in your question, inside the $(document).ready:
$('.tabcontent').find('a').click(function() {
event.preventDefault();
$('.tabs #' + $(this).attr("rel")).mouseover();
});
The event.preventDefault() prevents the hyperlinks from attempting to redirect to the page entered in the href attribute, and the rel attribute is used as a way to bind the hyperlink to the specific tab being linked to.
The rel attribute is used to get the value of the id of the tab so we can programmatically invoke its mouseover event, and switch tabs.
<div class="tabscontainer">
<div class="tabs">
<div class="tab selected first" id="tab_menu_1">
<div class="link">JavaScript</div>
<div class="arrow"></div>
</div>
<div class="tab" id="tab_menu_2">
<div class="link">CSS</div>
<div class="arrow"></div>
</div>
<div class="tab last" id="tab_menu_3">
<div class="link">JQuery</div>
<div class="arrow"></div>
</div>
</div>
<div class="curvedContainer">
<div class="tabcontent" id="tab_content_1" style="display:block">content for tab 1 tab2</div>
<div class="tabcontent" id="tab_content_2">content for tab 2</div>
<div class="tabcontent" id="tab_content_3">content for tab 3</div>
</div>
In the HTML content for your tab, simply include the hyperlink as you normally would, using an href="#" and a rel attribute. The rel attribute must equal the id of the target tab, in this case, tab_menu_2.
It Works as per your requirements
Just add
<div class="tabs">
<div class="tab selected first" id="tab_menu_1">
<div class="link">JavaScript</div>
<div class="arrow"></div>
</div>
</div>
in any of the tab
Go to this link http://jsfiddle.net/ipsjolly/ssR5f/
There is a similar tab in 3rd tab through which we can jump to 1st tab.