Scrolling through list elements doesn't start on first click - javascript

I am working on a script that will scroll through list elements by clicking on a "previous" and "next" link. When the user first clicks on the "next" button, they have to click twice before the second list element is displayed. The "previous" link works just fine but how can fix my script to where the user only has to click once on the "next" button?
http://jsfiddle.net/S79qp/290/

Simply put active on the first element by default.
<li class="first active none">Ferrari</li>

The problem is that on the first click on "next", there is no element with the class .active, consequently $('.active') won't find anything and $('.active').next().length will be 0, so the first element will be given the class .active.
The solution add the class .active to the first element that is initially shown, which will make the class .first obsolete: http://jsfiddle.net/hx4AD/

Related

Javascript to show/hide affects all boxes when one is clicked

I added a simple Javascript to show/hide boxes, which works correctly, but when I click on show all the boxes open. How to fix?
$(document).ready(function(){
$(".header").click(function(){
$(".contents").toggle();
});
});
CSS:
.contents{display:none;}
.header{cursor:pointer; user-select:none;}
HTML:
<div class="header">Exemple</div>
<div class="contents">Exemple</div>
I want only that box I clicked to open or close. Thanks
You need to apply show or hide logic is on box so when you click first need to check that show class exist or not if class not exist then add class to hide the box.
In the opposite if click again then if class exist then remove the class so box will be visible.

SlideToggle closes when Filter is chosen

Info:
I've added a button on my homepage, which triggers a div to expand. The div shows 3 different filters, which you can choose.
The problem is:
After choosing the first filter, the div closes again. To choose the 2nd and 3rd filter, you got to press the button again to expand the div. And the problem happens again when clicking on the 2nd filter.
Question:
How can I prevent closing of my div, while choosing filters?
My code:
$(document).ready(function() {
if($(window).width()<768) $("#button-opl").on('click',function(){
$("#views-exposed-form-attraktioner-block").slideToggle();
});
});

Trigger Element Click

JSFiddle Live Demo
Script Explanation
My script is to sort and/or filter a mailbox whereas you can select one of each options and the sort option upon clicking, if it's active it'll switch the icon indicating going from A-Z to Z-A and visa-versa.
The filter option changes the button text and upon clicking on the button it'll animate the button width to the drop down width and then slide down the drop down. Upon clicking again, it'll reverse the process, checking to see if the text has been changed to adjust for the width.
What I Wish To Implement
Upon clicking one of the options apart from the .Active filter/view options, I wish to trigger the click event to reverse the show progress. I have tried to trigger this click hover with using e.target, I'm not sure how to trigger this correctly as my attempts have been doing nothing.
Your trigger event seems to be working fine, you're only triggering it on the wrong element. This seems to be working:
$('.dropdown-toggle').trigger("click");
I've updated the plunker
You can trigger the click this way.
if ($(e.target).closest('.Sort').length) {
if ($(e.target).hasClass('Active')) {
$(e.target).parent().find('i').toggleClass("fa-arrow-down fa-arrow-up");
} else {
$('.dropdown-menu .Sort').find('.Active').removeClass('Active');
$('.dropdown-menu .Sort').find('i').remove();
$(e.target).addClass('Active');
$(e.target).prepend('<i class="fa fa-arrow-down" aria-hidden="true"></i> ');
}
//Here.
//Ideally add another unique class to the main dropdown button and use that instead, otherwise you will have problems when there are multiple elements with dropdown-toggle class.
$('.dropdown-toggle').click();
}

SCROLL JAVASCRIPT Skip one image and go to the next?

I am using javascript scroll plugin to scroll full page image horizontally. Now what I want is when I click down arrow it skips the next slide and moves to the third one by just passing by the second one.
How can I do that?
You can use html and improve with simply javascript.
To the button, element, arrow or something that will be clicked, but recommend using a (hyperlink):
Go to text
For the text that will receive focus after clicked
<div id="go-to-text">
your text
</div>
To understand The element A, with the attribute href starting with #, lead to another element with the same id, which need not contain the #.
The element has id # + of another html element
Element that receives focus has the ID referring to the element

JQuery : how to click delete button then click on item to remove

Currently I'm using JQuery to spawn items into a HTML canvas to drag around and create visio style kind of drawings. The problem I'm having trouble figuring out is how to remove these items. Now I know I can use the .remove or the .click but the functionality I want is like this:
I want the user to click on the delete button then click on the item on the canvas they wish to remove that they created earlier. I'm not sure how to track the fact that the delete button has been clicked so when they click on the item they want to remove it can send the .remove to remove it from the canvas.
I have seen lots of examples of a delete button next to a table or element so you can remove it once the button is clicked but I want a global delete button at the button of the screen that can be clicked then the user can click on the item anywhere on the canvas to be removed.
Any help would be greatly appreciated.
Basically you want to set a flag whenever the delete button is highlighted and look at that flag whenever the user clicks the element.
Here I am setting a class on the button. If the button has the specified class then the element should be deleted -
$(document).ready(function() {
$("#delete").click(function() {
$(this).toggleClass("deleting");
});
$("div").click(function() {
if ($("#delete").hasClass("deleting"))
$(this).remove();
});
});
button.deleting {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Text1</div>
<div>Test2</div>
<div>Test3</div>
<button id="delete">Delete</button>
You could assign a class to each of the elements that the user can remove.
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=IMG1&w=100&h=100" class="elements" />
Upon selecting(clicking) on the element remove the active class from all of the existing elements and assign the active class to the current item.
$('.elements').click(function () {
$('.elements.active').removeClass('active');
$(this).addClass('active');
});
Then upon delete button click. Remove the element with the active class.
$('#deleteElement').click(function () {
$('.elements.active').remove();
})
Example here:
http://jsfiddle.net/SeanWessell/4emomnqe/

Categories