EDIT: new problem is that even though current_slide.showCurrentSlide(); function is inside the hidePrevSlide function, the showCurrentSLide code is executing before the animation in hidePrevSlide is finished.
I am trying to create a website where if you click an < li > then the < li > will get a class added to it. It will then slide the current visible screen up and hide it and then show the screen corresponding to the < li > (for example, if the < li > is 'home' then it will slide the current existing screen up and hide it and then it would should the '#homeSlide' screen). Here is my code.
$(document).ready(function(){
hideItems(); //this function basically hides all the screens / slides.. The words 'screen' and 'slides' are interchangeable for the time being.
$('#homeSlide').fadeIn(1000); //the default screen to be shown is the home screen
$('#homeSlide').addClass('current'); //to signify that this is the current visible screen
$('#home').addClass('clicked'); //#home is the <li>, so it adds the .clicked class to the <li>
$('#sidebar ul a li').click(function(){ //loops through all <li>'s in the sidebar if an <li> is clicked
var current_slide = $(this);
$('#sidebar ul .clicked').removeClass('clicked'); // when an <li> is clicked, remove .clicked class from any other <li>'s
current_slide.addClass('clicked'); // add .clicked class to the clicked <li> ($(this))
hidePrevSlide(function(){
alert('enter showing step');
current_slide.showCurrentSlide();
});
});
});
and here is my hidePrevSlide function.
function hidePrevSlide(){
var test = $('.current').attr('id');
test = "#" + test; // surrounds the id with a # and the word 'Slide'. This is the id of the screen which should slideUp
$(test).slideUp( function () {
$(test).hide();
$(test).removeClass('current');
});
alert('finished hiding step. Should enter showing step now');
};
Now, when I run the code, it does say 'finished hiding step. Should enter showing step now' but it does not say 'enter showing step' so it doesnt enter the step which should be executed after the hidePrevSlide function is done. How come?
hidePrevSlide needs to call the callback function.
function hidePrevSlide(callback){
var test = $('.current');
test.slideUp( function () {
test.hide();
test.removeClass('current');
});
alert('finished hiding step. Should enter showing step now');
callback();
};
I also removed the use of $(test). If you have an element, there's no need to keep searching for it by ID.
Related
I am making slider. There is the main container and some DIVs inside it, each DIV is one slide and contains some buttons.
Buttons have event that slides to the next DIV and hides all the buttons from other DIVs with the same id as the clicked one (id is random number from 1 to 10). I don't know how to finish slide function and hide these buttons.
I know I can get clicked button id by using this property, but I don't know how to get the button from next DIV by id.
I just need to know what should i put instead of *** in if statement and I can finish the rest. For loop is not the problem
for (var i=1;i<maxLevel+1; i++){
var divId = i.toString()
var div = $("<div></div>").attr({
id:divId,
});
for (var j=0; j<classificationsNumber;j++){
if(accountArray[j].ad_level===i){
var classificationButton=$('<input/>').attr({
type: "button",
id: Math.round( Math.random()*10),
value: accountArray[j].ad_name
}).bind("click", function(){
// Go to the next slide
$(".slider").diyslider("move", "back");
//PROBLEM: find the buttons from next div have the same id as the clicked one
//for(...){
// if (***) {$('#'+id).css("display","none")}}
});
div.append(classificationButton);
}
}
mainContainer.prepend(div);
}
The title is a bit of a tongue twister. A brief description of the fiddle, is that it's a toggle style accordion where the toggle state changes color when one of the divs is toggled. I've got it working to where if another div is toggled it will close that previous div and open the new div while changing the toggle state.
The issue I am running into is if a user wants to close the current toggle without clicking a different div it will close the current toggle but not change the toggle state back to it's original state. I am currently using this and have tried multiple things including if the container 'is: visible' or hasClass then to remove the toggle class, but nothing seems to work. I've also tried a different slideToggle function, but of course that applied it to the toggled element I've found.
Fiddle: http://jsfiddle.net/NFTFw/1256/
What I am trying to do?
I want the current toggle class to change back to its original state if the user clicks the current toggled div or clicks another div. So essentially I want the user to have either option.
CODE:
$(document).ready(function () {
$('.column').each(function (index) {
$(this).delay(750 * index).fadeIn(1500);
});
$('.column').hide();
$('.body').hide();
$('.column').each(function () {
var $toggle = $(this);
$('.toggle', $toggle).click(function () {
$(".toggle").removeClass("toggle-d");
$(this).addClass('toggle-d');
$body = $('.body', $toggle);
$body.slideToggle();
$('.body').not($body).hide();
});
});
});
Check to see if the thing that you're clicking already has the class. If so, remove it, if not, add it. I suspect the problem you were having with hasClass() is that you were attempting to check the wrong this.
Oooh I did a bad thing and didn't remove the class when a new div was clicked. I've fixed that and updated the jsfiddle
jsfiddle
js:
$(document).ready(function () {
$('.column').each(function (index) {
$(this).delay(750 * index).fadeIn(1500);
});
$('.column').hide();
var width = $(window).width();
if (width <= 600) {
$('.body').hide();
$('.column').each(function () {
var $toggle = $(this);
$('.toggle', $toggle).click(function () {
if($(this).hasClass('toggle-d')){
$(this).removeClass("toggle-d");
}
else{
$('.toggle').removeClass('toggle-d');
$(this).addClass('toggle-d');
}
$body = $('.body', $toggle);
$body.slideToggle();
$('.body').not($body).hide();
});
});
}
});
What i would suggest is to pass the element itself in the function
in the index.html Do this
<a class = 'classname' onclick = toggle(this)>
Your Content Here
</a>
After that in the script.js
what i am saying is in javascript, i believe you can easily convert it to jquery
function toggle(value){
if(value.className == 'the predefined value'){
value.className = value.className + ' Your new class addition'
// remember there should be a space if you are adding an additional class to the present class, else directly change the classname
}
else{
value.className = 'the predefined value'
}}
this will toggle your classname whenever the element is clicked
I'm creating portfolio section where every portfolio item shows as an image and every portfolio item has its own div which is hidden and contains more information about that item. When the user clicks on some portfolio item (image) div with more information for that item is shown. Each div with more info has two classes, portf-[nid] and portf ([nid] is Node ID, I work in Drupal and this class with [nid] helps me to target portfolio item with more info div for that item).
Each of the more info divs contains arrows for item listing (next and previous) and I need to get them function, so when the user clicks on previous I need to hide current and show the previous item if it exists(when clicks on next to hide current and show next item if it exists).
My markup looks like:
<div class="portf-3 portf">
//some elements
</div>
<div class="portf-6 portf">
//some elements
</div>
<div class="portf-7 portf">
//some elements
</div>
My question is how to hide the div I'm currently on and show the previous (or next). For example: if it is currently shown div with class portf-6 and user clicks on previous arrow, this div is being hidden and div with class portf-3 is being shown.
It's not the problem to hide/show the div but how to check if there is the div above/below the current div and to target that div above or below the current div?
Here you are:
function GoToPrev()
{
var isTheLast = $('.portf:visible').prev('.portf').length === 0;
if(!isTheLast)
{
$('.portf:visible').hide().prev().show();
}
}
function GoToNext()
{
var isTheLast = $('.portf:visible').next('.portf').length === 0;
if(!isTheLast)
{
$('.portf:visible').hide().next().show();
}
}
To check if prev / next element is present or not, you can make use of .length property as shown below
if($('.portf:visible').prev('.portf').length > 0) // greater than 0 means present else not
same for next element
if($('.portf:visible').next('.portf').length > 0)
As you also need to update the next and previous buttons, I would suggest a more structured approach to the whole thing:
function update(delta) {
var $portfs = $('.portf');
var $current = $portfs.filter(':visible');
var index = $portfs.index($current) + delta;
if (index < 0) {
index = 0;
}
if (index > $portfs.length){
index = $portfs.length;
}
$current.hide();
$portfs.eq(index).show();
$('#prev').toggle(index > 0);
$('#next').toggle(index < $portfs.length-1);
}
$('#prev').click(function () {
update(-1);
});
$('#next').click(function () {
update(1);
});
// Hide all initially
$('.portf').hide();
// Show the first with appropriate logic
update(1);
JSFiddle: http://jsfiddle.net/TrueBlueAussie/xp0peoxw/
This uses a common function that takes a delta direction value and makes the decisions on range capping an when to hide/show the next/previous buttons.
The code can be shortened further, but I was aiming for readability of the logic.
If the next/prev buttons are correctly shown the range checking is not needed, so it simplifies to:
function update(delta) {
var $portfs = $('.portf');
var $current = $portfs.filter(':visible');
var index = $portfs.index($current) + delta;
$current.hide();
$portfs.eq(index).show();
$('#prev').toggle(index > 0);
$('#next').toggle(index < $portfs.length-1);
}
JSFiddle: http://jsfiddle.net/TrueBlueAussie/xp0peoxw/1/
I am building an accordion for school and I feel like it should work. I know I have everything right up until the if else statement. Any suggestions appreciated
$(document).ready(function () {
//
// Set up a click event handler for clicked <li>
//
$('#accordion li').click(function() {
// find first ul that is a child of this (the clicked <li>)
var $nextUL = $(this).children('ul:first-child');
// Select all siblings of the clicked <li> and then
// select any direct children <ul>'s
// that are visible - this is so we can close any visible
// <ul> before opening the <ul> for the clicked <li>
var $visibleSiblings = $(this).siblings().children('ul:visible');
// If any other <ul>s are visible, slide the visible <ul>
// up and then, after the slide up is complete, slide down
// the clicked <li>'s <ul> into view
if ($visibleSiblings.length > 0) {
$visibleSiblings.slideUp('normal', function() {
$nextUL.fadeIn('normal');
});
} else {
// either no <ul>s were open (open the clicked item)
// or the user clicked on the currently open one so close it
$nextUL.slideToggle('normal');
}
});
});
There is no 'normal' for duration with Jquery fadeIn().
$nextUL.fadeIn('normal');
Reference http://www.w3schools.com/jquery/eff_fadein.asp
speed: Optional. Specifies the speed of the fading effect. Default value is 400 milliseconds
Possible values:
milliseconds
"slow"
"fast"
I have a page with a row of boxes that are responsive........
so the smaller you resize the window the amount of boxes on each row lessens
heres a fiddle to show you whats going on
http://jsfiddle.net/abtPH/6/
Right now the behavior is......if you click on a box then a div appears under it.....if you click on the next box the div slides up a bit then slides down revealing the new content...
I want it so that if the box is on the same row and the user clicks the next one it does not slide up then down but fades the content in
I only want it to slide up when the box is on a different row...like underneath
heres my jquery so far
$('li').on('click', function(e){
$(this).siblings('.active').toggleClass('active', 400).find('.outer').slideToggle();
$(this).find('.outer').slideToggle();
$(this).toggleClass('active', 400);
});
The trick is detecting what is on the same line. For that I think the position() function is what you need. When a list item is clicked, check to see if there is an active one already, if so, check to see if the current and active items have the same top value. If they do crossfade otherwise toggle.
$('li').on('click', function(e){
var active = $(this).siblings('.active');
var posTop = ($(this).position()).top;
if (active.length > 0) {
var activeTop = (active.position()).top;
if (activeTop == posTop) {
active.toggleClass('active', 400).find('.outer').fadeOut('slow');
$(this).find('.outer').fadeIn('slow');
} else {
$(this).siblings('.active').toggleClass('active', 400).find('.outer').slideToggle();
$(this).find('.outer').slideToggle();
}
} else {
$(this).find('.outer').slideToggle();
}
$(this).toggleClass('active', 400);
});
jsFiddle