I have bit of a problem. Animation is working just first time is clicked, second time when it is clicked, it is refusing to work - when I click right and back it is working, but when I want to go right again it is not working. Code:
var main_container = $('.main_container'),
menu = $('.home_navigation_text'),
second_page = main_container.find('.second_page'),
body_width = $(window).width();
menu.hover(
function(){
var $this = $(this),
page = $this.find('a').attr('href');
second_page.empty().load(page);
},
function(){
}
);
menu.on('click', function(e){
main_container.animate({
right: '+=' + body_width
}, 600, 'linear', function() {
go_back();
});
return false;
});
function go_back()
{
var back = second_page.find('.back');
back.on('click', function(e){
main_container.animate({
left: '+=' + body_width
}, 600, 'linear', function() {
});
return false;
});
}
HTML Code:
<div class="main_container clearfix">
<section class="home_page clearfix">
<header class="home_header container">
<div class="grid_3 alpha omega" id="home_logo">
<img class="" src="<?php echo IMG ?>resources/jbs_cc_logo.png" alt="JBS Logo">
</div>
<div class="grid_9 alpha omega">
</div>
</header>
<!-- END OF HEADER -->
<div class="home_main container">
<nav class="home_navigation clearfix">
<ul class="clearfix">
<?php foreach ($menu as $mn): ?>
<li class="home_navigation_text">
<a class=home_navigation_link href="<?php echo base_url($mn['slug']) ?>"><?php echo $mn['title'] ?></a>
</li>
<?php endforeach ?>
</ul>
</nav>
</div>
</section>
<section class="second_page">
</section>
</div>
As you're loading content, I'm guessing the menu is somehow replaced, and is as such dynamic. Delegating to the main_container would probably work, but it's hard to say as there is no markup posted and I have no idea how it looks ?
var main_container = $('.main_container'),
second_page = main_container.find('.second_page'),
body_width = $(window).width();
main_container.on({
mouseenter: function() {
second_page.empty().load( $(this).find('a').attr('href') );
},
click: function(e) {
e.preventDefault();
main_container.animate({
right: '+=' + body_width
}, 600, 'linear');
}
}, '.home_navigation_text');
main_container.on('click', '.back', function(e){
e.preventDefault();
main_container.animate({
right: '-=' + body_width
}, 600, 'linear');
});
Related
I have created tabs. There are 3 tab items and tabs content is sliders.When i use these slideshows without tabs it works fine. But when used tabs, the slider of tab2 or tab3 sometimes does not load. It only occurs sometimes. What I have learnt that it loads perfectly on page load when using no tabs, But with tabs I have to hide the other 2 tabs on page load. So when click on these tabs, the slideshow does not appear /load sometimes.It also works fine sometimes. Tabs working fine the text content also.
I have been working on shopify, so using slideshow of theme.
Here is the code for html code for tabs:
<ul class="tabs">
<li>
<a data-toggle="tab" href="#menu1">Tab 1</a>
</li>
<li>
<a data-toggle="tab" href="#menu2">Tab 2</a>
</li>
<li>
<a data-toggle="tab" href="#menu3">Tab 3</a>
</li>
</ul>
<!-- Code for tabs Contnet -->
<div id="menu1">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image1.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image2.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image3.jpg"/>
</div>
</div>
</section>
</div>
<div id="menu2">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image21.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image22.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image23.jpg"/>
</div>
</div>
</section>
</div>
<div id="menu3">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image31.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image32.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image33.jpg"/>
</div>
</div>
</section>
</div>
Javascript for tabs
<script type="text/javascript">
$(document).ready(function() {
$('ul.tabs').each(function(){
var active, content, links = $(this).find('a');
active = links.first().addClass('active');
content = $(active.attr('href'));
links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
$(this).find('a').click(function(e){
active.removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.addClass('active');
content.show();
return false;
});
});
});
</script>
I am working in shopify and the using the slider of theme, here is the code for slideshow from theme.
var slideshow = {
init: function(){
$('.js-homepage-slideshow').each(function (index, value){
var $homepageSlider = $(this);
var settings = {
slideshowSpeed: $homepageSlider.data('slideshow-speed')*1000,
slideshowTextAnimation: $homepageSlider.data('slideshow-text-animation'),
adaptiveHeight: $homepageSlider.data('adaptive-height')
}
//initiate the slideshow
if (!$homepageSlider.hasClass('flickity-enabled')){
var arrowShow = $homepageSlider.find('.gallery-cell').length === 1 ? false : true;
$homepageSlider.flickity({
adaptiveHeight: settings.adaptiveHeight,
wrapAround: true,
cellAlign: 'left',
imagesLoaded: true,
prevNextButtons: arrowShow,
draggable: arrowShow,
pageDots: usePageDots,
autoPlay: settings.slideshowSpeed,
arrowShape: arrowSize
});
if (settings.slideshowTextAnimation != ''){
var flkty = $homepageSlider.data('flickity');
setTimeout(function() {
$homepageSlider.find('.gallery-cell:nth-child(1) .caption-content').addClass('animated ' + settings.slideshowTextAnimation);
}, 400);
$homepageSlider.on( 'select.flickity', function() {
if($homepageSlider.is(':visible')) {
var currentSlide = flkty.selectedIndex + 1;
setTimeout(function() {
$homepageSlider.find('.caption-content').removeClass('animated ' + settings.slideshowTextAnimation);
$homepageSlider.find('.gallery-cell:nth-child(' + currentSlide + ') .caption-content').addClass('animated ' + settings.slideshowTextAnimation);
}, 400);
}
});
}
}
if ($homepageSlider.find('.gallery-cell').length > 1) {
$homepageSlider.addClass('multi-image');
} else {
$homepageSlider.addClass('single-image');
}
$homepageSlider.find('.gallery-cell').each(function(){
var buttonWidth = 0;
$(this).find('.action_button').each(function(){
$button = $(this);
if($(this).width() > buttonWidth){
buttonWidth = $(this).width();
}
});
$(this).find('.action_button').width(buttonWidth);
});
});
},
unload: function($target){
var $slider = $target.find('.js-homepage-slideshow');
$slider.flickity('destroy');
}
}
a while ago i was working on bootstrap carousel, which has represents properties thumbnails based on offices and houses respectively.
entire function goes fine but the carousel navigation is not working.
Here is HTML code
<div class="container-fluid">
<div class="row-fluid">
<div class="span12" id="work_hider">
<div class="page-header">
<h2 class="pull-left"><?php if($this->lang->line('work') != '') { echo stripslashes($this->lang->line('work')); } else echo "Work"; ?></h2>
<h3 class="pull-right" id="geolocate_work"></h3>
<script>
$.getJSON("https://freegeoip.net/json/", function(data) {
var country = data.country_name;
var city = data.city;
$("#geolocate_work").html("<a href='property?city="+city+"'><?php if($this->lang->line('see_all') != '') { echo stripslashes($this->lang->line('see_all')); } else echo "See All"; ?></a>");
jQuery.ajax({
type:'POST',
url:'<?php echo base_url("site/landing/get_work_places"); ?>',
data:{ city_name:city},
dataType: 'json',
success:function(data)
{
var ParsedObject = JSON.stringify(data);
var json = $.parseJSON(ParsedObject);
if (json=="")
{
$('#work_hider').hide();
}else
{
$.each(json, function(key, data)
{
// All the variables from the database containing the post data.
var product_id=data.product_id;
var product_name=data.product_title;
var product_image=data.product_image;
var work_price = data.price_perhour;
var work_address = data.address;
$("#work-carousel").append('<li class="span3"><div class="thumbnail"><img src="'+product_image+'" alt=""></div><div class="caption"><h2>'+work_price+'</h2></div><div class="caption"><h4>'+product_name+'</h4> <p>'+work_address+'</p></div></li>');
});
for (i = 0; i <= 1; i++) {
$('.span3').slice(i * 4, (i + 1) * 4).wrapAll('<div class="item"><ul id="work_property">');
}
}
}
});
});
</script>
</div>
<div class="work_carousel slide" id="myCarousel">
<div class="carousel-inner" id="work-carousel">
<div class="item active" style="height: 100% !important;">
<ul class="thumbnails" id="work_property">
</ul>
</div>
</div>
<div class="control-box" style="margin-bottom: 2em;">
<a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
<a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
</div>
</div>
</div>
</div>
</div>
Here is my carousel JS
<script>
var totalItems = $('.item').length;
var currentIndex = $('div.active').index() + 1;
$('.num').html(''+currentIndex+'/'+totalItems+'');
$('.work_carousel').carousel({
interval: 2000
});
$('.work_carousel').on('slide.bs.carousel', function() {
currentIndex = $('div.active').index() + 1;
if(currentIndex >= 2){
$('#work_property').attr("id")="newid";
}
});
</script>
I've searched around a lot but i can't fix it. Does someone has a suggestion for me? Thanks in advance!
Let's say I open an accordion tab with one click, and I want to close it with the second click.
This is the JS/jQuery I have so far:
var APP = window.APP = window.APP || {};
APP.accordion = (function () {
var $accordionHeader = $('.accordion__header');
var $accordionContent = $('.accordion__content');
var showAccordionContent = function(e) {
var $t = $(this);
$accordionHeader.removeClass('accordion__header--active');
$t.addClass('accordion__header--active');
$accordionContent.removeClass('accordion__content--expanded');
$t.next().addClass('accordion__content--expanded');
$('html, body').animate({
scrollTop: $t.offset().top - 60
}, 500);
e.preventDefault();
};
var bindEventsToUI = function () {
$accordionHeader.on('click', showAccordionContent);
};
var init = function () {
bindEventsToUI();
};
return {
init: init
};
}());
HTML:
<div class="accordion__tab">
<a href="#" class="accordion__header accordion__header--active">
Setting alerts
<span class="accordion__arrow"></span>
</a>
<div class="accordion__content">
<p>
{{!-- things --}}
</p>
<ul class="cf">
<li>
{{!-- more things --}}
</li>
</ul>
</div>
</div>
<div class="accordion__tab">
<a href="#" class="accordion__header">
Setting alerts
<span class="accordion__arrow"></span>
</a>
<div class="accordion__content">
<p>
{{!-- things --}}
</p>
<ul class="cf">
<li>
{{!-- more things --}}
</li>
</ul>
</div>
</div>
Suggestions?
I would do it like this, just some pseudos
var bindEventsToUI = function () {
$accordionHeader.on('click', toggleAccordionContent);
};
var toggleAccordionContent = function (e) {
var accordionIsOpen = $(this).classList.indexOf('accordion__header--active') >= 0; // may need to use another selector base on `this`
return accordionIsOpen ? hideAccordionContent.call(this) : showAccordionContent.call(this);
}
I guess you are looking for this. Modified showAccordionContent method logic a bit.
Hope this is what you are looking for.
This change will now close already open accordion on clicking it. And once you click on inactive accordion-header that will open. There might be a condition where user closes all the accordion after this code change.
var showAccordionContent = function(e) {
var $t = $(this);
/*Modified block logic*/
if($t.hasClass('accordion__header--active')){
$t.removeClass('accordion__header--active');
$t.next().removeClass('accordion__content--expanded');
}else{
$accordionHeader.removeClass('accordion__header--active');
$accordionContent.removeClass('accordion__content--expanded');
$t.addClass('accordion__header--active');
$t.next().addClass('accordion__content--expanded');
}
$('html, body').animate({
scrollTop: $t.offset().top - 60
}, 500);
e.preventDefault();
};
I want to toggle a div open, load a page into that div, then be able to toggle it closed.
I want to do this with multiple links.
<div id="main-nav">
<div id="menu-container">
<div id="menu">
<ul>
<li></li>
<li id="clicklink">mission</li>
<li>leadership</li>
<li>awards</li>
<li>sustainability</li>
<li>faq</li>
</ul>
</div>
<div id="clickme3">
<img src="images/logo-sm.png">
</div>
</div>
<div id="content-load">
</div>
</div>
$("#clicklink").toggle(function () {
$("#main-nav").animate({
height: "300",
}, 1000, function () {
$("#content-load").load("contentpage.html", function () {
})
function () {
$("#main-nav").animate({
height: "40",
}, 1000, )
};
});
});
This is what I have that isn't working.
I can get this to work, but of course does not toggle.
$("#clicklink").click(function () {
$("#main-nav").animate({
height: "300",
}, 1000, function () {
$("#content-load").load("contentpage.html", function () {
})
});
});
I'm new to jQuery but eager to learn. Is there a way that I can get this to toggle?
You can view production here http://billygoforth/learning/CMD
You can see that it shifts the bottom navigation up (which is what I want) and loads the external page content below (also what I want), but I want to have it so if the link is clicked again, it collapses and then I can put this jquery on the other link IDs.
Again, many thanks!
Try this way:
// global variable
var toggleHeight = $('#main-nav').height();
$("#clicklink").click(function () {
if(toggleHeight <= 0){
$("#main-nav").animate({
height: "300px",
}, 1000, function () {
$("#content-load").load("contentpage.html");
});
}
else{
$("#main-nav").animate({
height: "0px",
}, 1000, function () { });
}
});
This is how I would solve this:
The plnkr http://plnkr.co/edit/PcE2hxY4q98Trw90ztnL?p=preview
HTML:
<div class="view" data-page="contentPage.html">
<div class="actions">
<label><input type="checkbox"> Toggle View</label>
</div>
<div class="content"></div>
</div>
<div class="view" data-page="other.html">
<div class="actions">
<label><input type="checkbox"> Toggle View</label>
</div>
<div class="content"></div>
</div>
Javascript:
$(function() {
$(".view").each(function(){
var page = $(this).data("page")
$(this).find(".content").load(page, function(){
$(this).animate({height: 40});
});
})
$(".actions input").click(function() {
if ($(this).is(":checked")) {
$(this).parent().parent().siblings(".content").animate({height: 300});
}else
{
$(this).parent().parent().siblings(".content").animate({height: 40});
}
});
});
I need some help, theres a selection list and now you can scroll to next "shop" by clicking to the right. But cant get the left button to go to previous "shop". Theres a list of shops and you can scroll horizontal between each shop.
This is right button:
$(function() {
var scrollerwidth = 0;
var scroller = $("#scroller");
$("#scroller li").each(function() {
scrollerwidth += $(this).width() + 1;
});
$("#scroller").width(scrollerwidth);
$("#scroller li:first-child").attr('id', 'current');
var iscroll = new IScroll('#countylist', {
eventPassthrough: true,
scrollX: true,
scrollY: false
});
$("#scrollnext").click(function() {
current = document.getElementById("current");
current.id = "";
//var next = $("#current").next();
var next = current.nextSibling.nextSibling;
next.id = "current";
iscroll.scrollToElement(next);
});
}
)
HTML:
<div id="scrollnext" class="scrollnav next">
<span>»</span>
</div>
<div id="countylist">
<div id="scroller">
<ul>
<? foreach ($counties as $i => $c): ?>
<li>
<a id="county_<?=$i?>" href="javascript:" class="stopped"><span><?=utf8_decode($c)?> (<?=count($stores_by_county[$c])?>)</span></a>
</li>
<? endforeach ?>
</ul>
What do I need to get it for previous?