Horizontal div sliding with jQuery - javascript

I've found this little piece of code which fulfils my needs, but is there any way to make "target 1" be loaded defaultly? So "right" doesn't start as empty div, but with content from "target 1" already.
jQuery(function($) {
$('a.panel').click(function() {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active');
if (!$target.hasClass('active')) {
$other.each(function(index, self) {
var $this = $(this);
$this.removeClass('active').animate({
left: $this.width()
}, 500);
});
$target.addClass('active').show().css({
left: -($target.width())
}).animate({
left: 0
}, 500);
}
});
});
http://jsfiddle.net/sg3s/rs2QK/

To have target1 be active be default, you need to give it an active class, and add display: block to it's style in the HTML
By not using javascript to set the target1 div to active the page doesn't need to load first before it appears in the right div. Meaning that if the page is heavy at all it won't flash white because it's waiting for the page to load.
<div class="panel active" id="target1" style="background:green; display:block;">Target 1</div>
Like this - http://jsfiddle.net/rs2QK/2291/

just a little addition
$('a[href=#target1]').click()
Demo

Related

jQuery empty only works on the second click after an AJAX call

I have two divs .curation-contents-listand .film-contents-listeach with a list of links, when a link is clicked an AJAX call is made which appends some JSON data to a separate divs .article-container and .project-container. At the same time as the data is appended the div with the links where the link that was just clicked is hidden.
There is another div with the class .panel-close that can be clicked which removes the div with data that was just appended and makes the div containing the links reappear again. So everything is back to the original state
The problem is that it takes a second click on the .panel-close div to fire off the .empty() and .show() functions in my jQuery. Once this has been done the first time the jQuery works as it should. Any help on the matter would be greatly appreciated.
My is the basic set up of my HTML:
<div class="curation-panel">
<div class="curation-contents-list">
<a class="load-article"></a>
</div>
<div class="article-container">
</div>
</div>
<div class="film-panel">
<div class="film-contents-list">
<a class="load-project"></a>
</div>
<div class="project-container">
</div>
</div>
<div class="panel-close">
</div>
jQuery
$('.load-article').on('click', function(e) {
e.preventDefault();
var target = $('.article-container');
var url =$(this).data('page') + '.json';
$.get(url, function(data) {
$('.curation-contents-list').hide();
$(target).append(data);
$("body").addClass("load-article-is-open"),
$(this).animate({
scrollTop: 0
}, 300, "easeInOutExpo")
});
}),
$('.load-project').on('click', function(e) {
e.preventDefault();
var target = $('.project-container');
var url =$(this).data('page') + '.json';
$.get(url, function(data) {
$('.film-contents-list').hide();
$(target).append(data);
$("body").addClass("load-project-is-open"),
$(this).animate({
scrollTop: 0
}, 300, "easeInOutExpo")
});
}),
$(".panel-close").click(function() {
$("body").removeClass("curation-panel-is-open").removeClass("film-panel-is-open").removeClass("load-article-is-open").removeClass("load-project-is-open"),
$(".curation-panel").animate({
scrollTop: 0
}, 300, "easeInOutExpo"),
$(".film-panel").animate({
scrollTop: 0
}, 300, "easeInOutExpo"),
$('.curation-contents-list').show();
$('.film-contents-list').show();
$('.article-container').empty();
$('.project-container').empty();
});
I agree with Andy that you should use semi-colons instead of commas for your line endings. However, what's likely causing your issues is a missed dependency on the jQuery Easing library. Check your console for errors such as
easeInOutExpo is not a function
which would indicate that you're missing the jQuery Easing library.
Just for a Proof of Concept, here's a working Fiddle
And the relevant changes to the semi-colons:
$("body").removeClass("curation-panel-is-open film-panel-is-open load-article-is-open load-project-is-open");
$(".curation-panel").animate({
scrollTop: 0
}, 300, "easeInOutExpo");
$(".film-panel").animate({
scrollTop: 0
}, 300, "easeInOutExpo");
Please note that I've removed the chain of removeClass and instead supplanted it with a spaced list instead. There's no reason to re-call that function every time you want to remove a class on the same element.
This seems to do the trick, give it a go. changed animate to scrolTop, put in semi-colons in the right places
$(".panel-close").click(function() {
$("body").removeClass("curation-panel-is-open").removeClass("film-panel-is-open").removeClass("load-article-is-open").removeClass("load-project-is-open");
$(".curation-panel").scrollTop( 300, "easeInOutExpo");
$(".film-panel").scrollTop( 300, "easeInOutExpo");
$('.curation-contents-list').show();
$('.film-contents-list').show();
$('.article-container').empty();
$('.project-container').empty();
});
you could also simplify the code by doing:
$(".panel-close").click(function() {
$("body").removeClass("curation-panel-is-open film-panel-is-open load-article-is-open load-project-is-open");
$(".film-panel, .curation-panel").scrollTop( 300, "easeInOutExpo");
$('.curation-contents-list, .film-contents-list').show();
$('.article-container, .project-container').empty();
});
(2nd method is untested)

jQuery remove only works on the second click after an AJAX call

I have two divs each with a list of links, when a link is clicked an AJAX call is made which appends some JSON data to a separate div. At the same time as the data is appended I want the div with the links where the link that was just clicked to be hidden/removed.
There is a third div with the class "panel-close" that can be clicked which removes the div with data that was just appended and makes the div containing the links reappear again. So everything is back to the original state
The problem I'm having is that once the div containing the data has been removed sometimes the div containing the links does not appear again, sometimes it happens on a second click of the panel close div and sometimes the JSON data does not append again after clicking on a link.
My is the basic set up of my HTML:
<div class="curation-panel">
<div class="curation-contents-list">
<a class="load-article"></a>
</div>
<div class="article-container">
</div>
</div>
<div class="film-panel">
<div class="film-contents-list">
<a class="load-project"></a>
</div>
<div class="project-container">
</div>
</div>
<div class="panel-close">
</div>
I'm a Jquery noob, I've probably taken completely the wrong approach but this is my jquery code:
$(function(){
var element = $('.load-article');
var url = element.data('page') + '.json';
var target = $('.article-container');
$(element).on('click', function(e) {
e.preventDefault();
$.get(url, function(data) {
$('.curation-contents-list').hide();
$(target).append(data);
});
$("body").addClass("load-article-is-open"),
$(this).animate({
scrollTop: 0
}, 300, "easeInOutExpo")
});
}),
$(function(){
var element = $('.load-project');
var url = element.data('page') + '.json';
var target = $('.project-container');
$('.load-project').on('click', function(e) {
e.preventDefault();
$.get(url, function(data) {
$('.film-contents-list').hide();
$(target).append(data);
});
$("body").addClass("load-project-is-open"),
$(this).animate({
scrollTop: 0
}, 300, "easeInOutExpo")
});
}),
$(".panel-close").click(function() {
$("body").removeClass("curation-panel-is-open").removeClass("film-panel-is-open").removeClass("load-article-is-open").removeClass("load-project-is-open"),
$(".curation-panel").animate({
scrollTop: 0
}, 300, "easeInOutExpo"),
$(".film-panel").animate({
scrollTop: 0
}, 300, "easeInOutExpo"),
$('.curation-contents').show();
$('.film-contents-list').show();
$('.article-container').remove();
$('.project-container').remove();
});
You reference an element which you than append the results of the Ajax call to
var target = $('.article-container');
And the problem here is the fact you are removing the elements
$('.article-container').remove();
$('.project-container').remove();
After you remove them, the code that references them can not find them.
I think you want to use empty() and not remove()

Hiding and showing sidebar div

I have a site here and I want to hide and show the sidebar with a button in the header but it is not working. Here is what I have tried:
<div id="B">
<button>toggle</button>
</div>
$('button').toggle(function() {
$('#sidebarright').animate({ left: 0 })
}, function() {
$('#sidebarright').animate({ left: 200 })
})
Nothing happens. Could you help me find out the problem?
The toggle() functionality you're trying to use has now been deprecated and removed from the latest versions of jQuery. To replicate it you can use the click() event with a simple ternary expression. Try this:
$('button').click(function() {
var $el = $('#sidebarright');
$el.animate({
left: parseInt($el.css('left'), 0) == 0 ? 200 : 0
});
});
Also note that the page you link to on your website does not contain a reference to jQuery. Here's how you should do that, along with a full implementation of the above code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function() {
$('button').toggle(function() {
var $el = $('#sidebarright');
$el.animate({
left: parseInt($el.css('left'), 0) == 0 ? 200 : 0
});
});
});
</script>
</head>
Also note that you can simplify this by using CSS transitions only and toggling a class:
#sidebarright {
/* UI styling rules here */
left: 0;
transition: left 0.5s
}
#sidebarright.open {
left: 200;
}
$('button').click(function() {
$('#sidebarright').toggleClass('open');
});
You are using jQuery Script but you have not attached jQuery file in header.
Please add jQuery File in header.
Download it from http://www.jquery.com

jQuery scrollTop to top of container div

I am using the excellent accordion menu provided by Ian Flynn of RocketMill: http://www.rocketmill.co.uk/create-accordian-boxes-with-a-rotating-arrow-using-css-jquery
This has worked well for me in the past, but I have a new client that leans towards the verbose. This presents a problem when the user attempts to click on their next desired accordion link. The accordion works correctly, but the hyperbolic amount of content shoots off of the page, presenting an obvious usability issue.
What I want to do is to reconcile the top of the active (just clicked on) "menuTitle" div with the top of its parent, the "content" div.
<div id="content">
<div class="menuTitle">
<strong>Title 1…</strong>
</div>
<div class="menuContent"> <!-- Sliding content box -->
<h5>Sub-title 1</h5>
<p>Content</p>
</div> <!-- End of div class="menuContent" -->
<!-- THE ABOVE SEVEN LINES REPEAT FOR EACH FOLD OF THE ACCORDION -->
</div> <!-- End of div id="content" -->
I have been working on this for about three days and have consulted many, many sites, jQuery guides, and whisky. I am not a jQuery expert. Please help!
Oh… I made a jsFiddle. My first: http://jsfiddle.net/Parapluie/CRXX8/
well, if i understand what you want..
http://jsfiddle.net/CRXX8/4/
$(document).ready(function() {
$('#content .menuTitle').on('click',function() {
$('#content .menuTitle').removeClass('on'); // "closes" the closing menu arrow
$('#content .menuContent').slideUp('normal'); // slide-closes the closing div
if($(this).next().is(':hidden') == true) {
$(this).addClass('on'); // "opens" the opening menu arrow
$(this).next().slideDown('normal',function(){
$('html,body').animate({scrollTop:$(this).prev().offset().top}, {queue: false,duration:250, easing: 'swing'}); // on complete slidedown, scroll the clicked .menuTitle to top of page
});// slide-opens the opening div
}
}); // end of click event
}); // end of ready
UPDATE:
As your called elements are wraped in a div called '#focusWide', you dont have to scrollTop html,body, you have to scrollTop the wraper div '#focusWide' and use position().top istead of offset().top. And i add more '11px' (half of wraper div padding).
$('#focusWide').animate({scrollTop:$(this).prev().position().top + 11 + 'px'}, {queue: false,duration:250, easing: 'swing'});
http://jsfiddle.net/CUu7h/2/
I use the function shown below, which works great in most cases. Just make sure the container/wrapper is scrollable (using overflow-y:auto). See fiddle
function scrollIntoView(oElement, sContainer, fnCallback) {
var oContainer, nContainerTop, nContainerBottom, nElemHeight, nElemTop, nElemBottom;
if (!oElement || oElement.length <= 0) {
return;
}
oContainer = (typeof sContainer == "object" ? sContainer : $(sContainer));
nContainerTop = oContainer.scrollTop();
nContainerBottom = nContainerTop + oContainer.height();
nElemHeight = oElement.height() || 25;
nElemTop = oElement[0].offsetTop - 50;
nElemBottom = nElemTop + nElemHeight + 100;
if ((nElemTop < nContainerTop) || (nElemHeight >= $(sContainer).height())) {
oContainer.animate({ scrollTop: nElemTop }, { duration: "fast", complete: fnCallback });
}
else if (nElemBottom > nContainerBottom) {
oContainer.animate({ scrollTop: (nElemBottom - $(sContainer).height()) }, { duration: "fast", complete: fnCallback });
}
else if (fnCallback) {
fnCallback();
}
}

jQuery Multiple Panel Toggle

I'm working on a portfolio site for an iPhone developer. In this site the iPhone app icons will act as a toggle buttons for panels that describe the application. The panels animate over the main page content. To add to this, if a panel is open and another app icon is clicked the open panels will need to close and the next app will open. Currently the script I have works great for toggling a single panel, see here: http://cncpts.me/dev/
So how can change the current script so it accepts multiple ids or classes, without creating duplicate code?
Here is the jQuery that is driving the functionality for a single toggle action.
$(document).ready(function() {
$("li.panel_button").click(function(){
$("div#panel").animate({
height: "700px"
})
.animate({
height: "600px"
}, "slower");
$("div.panel_button").toggle('zoom'); return false
});
$("div#hide_button").click(function(){
$("div#panel").animate({
height: "0px"
}, "slower"); return false
});
});
Here is the HTML:
<div id="panel">
<div id="panel_contents"></div>
<img src="images/iphone.png" border="0" alt="iPhone Development">
<div class="panel_button" id="hide_button" style="display: none;">
<img src="images/collapse.png" alt="collapse" />
</div>
</div>
give the list items a rel attribute that points to the div you are trying to show/hide.
<li rel='#panel_1' class='panel_button'>
give all the div's a common class such as 'flyaway', do a hide on any div with the same class that is not currently hidden
$('.flyaway').not(':hidden').animate({ height: "0px"}, "slower");
and show the one you want
$("li.panel_button").click(function(){
$($(this).attr('rel')).animate({
height: "700px"
})
.animate({
height: "600px"
}, "slower");
$($(this).attr('rel')+" div.panel_button").toggle('zoom'); return false
});
Here is my solution:
// Plugtrade.com - jQuery Plugin :: Bounce //
// answer for http://stackoverflow.com/questions/5234732/jquery-multiple-panel-toggle
jQuery.fn.bounce = function (el, bounceheight) {
var thisdiv = this;
var owidth = thisdiv.width();
var oheight = thisdiv.height();
var trigger = $(el);
// what we want is to make a parent div and then
// get the child div's dimensions and copy it's position
// display, width and height //
// child then becomes an absolute element nested within the
// parent div.
thisdiv.wrap('<div class="bounceparent"></div>');
// let's make a hidden button
thisdiv.append('<input type=text class="bouncehide" style="display:none" />');
var thishidebtn = thisdiv.last();
var thisparent = thisdiv.parent();
thisparent.width(owidth);
thisparent.height(oheight+bounceheight);
thisparent.css('border', '1px solid #ccc');
thisparent.css('position', thisdiv.css('position'));
thisparent.css('overflow', 'hidden');
thisdiv.css('position', 'relative');
thisdiv.css('top', oheight+bounceheight);
thisdiv.css('height', '0');
var toggle = false;
thishidebtn.click(function() {
if(toggle)
{
toggle = false;
thisdiv.animate({ top: 0, height:oheight+bounceheight }).animate({ top: oheight+bounceheight, height:0 });
}
});
trigger.click(function() {
// some code //
if(!toggle)
{
// show
$('.bouncehide').click();
toggle = true;
thisdiv.animate({ top: 0, height:oheight+bounceheight }).animate({ top: bounceheight, height:oheight });
}
else
{
// hide
toggle = false;
thisdiv.animate({ top: 0, height:oheight+bounceheight }).animate({ top: oheight+bounceheight, height:0 });
}
});
// return original object so it can be chained
return thisdiv;
}; // END -> plugin :: bounce
... and here is how you use it:
$(function(){
$('#boinky').bounce('#toggle', 50);
$('#boinkyb').bounce('#toggleb', 50);
});
jsFiddle example:
http://jsfiddle.net/523NH/14/
hope this helps you.

Categories