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);
}
Related
Good afternoon, I have a script that searches for divs by content and changes it, the script is executed when I click on the button, after the click they are rendered or deleted, but if I click on the button, and the content of the div of the last button will match the content of the next button of the div of the past the buttons will not disappear, and because of this, the script will repeatedly try to change the contents of the past divs.
I need that when switching to a new button, the script does not touch the divs that were in the previous button. how to implement it please tell me.
My code:
const boxes = Array.from(document.getElementsByClassName("btn-default"));
boxes.forEach((box) => {
box.addEventListener("click", function handleClick(event) {
console.log("box clicked", event);
var textProp = "textContent" in document ? "textContent" : "innerText";
[].slice
.call(document.querySelectorAll("button"), 0)
.forEach(function (aEl) {
if (aEl[textProp].indexOf("All") > -1) {
function convert() {
var pageDivs = document.getElementsByClassName("product__price");
for (i = 0; i < pageDivs.length; i++) {
const exchange = 57;
let sum = document
.getElementsByClassName("product__price")
[i].innerText.replace("EUR", "USD");
sum = sum.split(" ")[0];
sum = sum / exchange;
document.getElementsByClassName("product__price")[i].innerHTML =
sum + " EUR";
}
}
convert();
}
});
});
});
The code scans the buttons by class, and when I click on them, the page content is updated, and the script changes the contents of the divs, and as I said, if the contents of the buttons match, they will remain on the page and the script will try to change them again, I need the script to not changed past divas, if they remained.
I click on this button
<button role="button" class="btn btn-default active" ng-class="{'active': cat.id === Store.categoryId}" ng-click="Store.setCategory(cat.id)">All</button>
After clicking, about 5-10 such divs are created with different numbers
<div class="product__price">
111 USD
</div>
<div class="product__price">
555 USD
</div>
After i click on the button again and several divs are created again, but the old div remain, and some old div disappear, I need my script to not change the divs that remained after the click.
When you click on the button, the divs appear in the DOM, on the next click, some of them disappear, some remain, those that remain should not be changed by the script on the next click.
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/
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.
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
I have 3 buttons that control the visibility of 1 div.
we want to do following to div:
show the first time any of three buttons are clicked
show if button clicked is different to previously button click
hide if button clicked is the same as previous clicked and if div is currently visible
show if button clicked is the same as previous clicked and if div is currently invisible
currently I have this:
//$('#alert_area') = target div
$button = $('.button')
if ($button.attr('id') != $('#alert_area').attr('showing')){
$('#alert_area').show()
}else{
if ($('#alert_area').is(":visible")){
$('#alert_area').hide();
}else{
$('#alert_area').show();
}
}
$('#alert_area').attr('showing', $button.attr('id'))
It's only a slight improvement, but you can replace your else block with toggle. You can also cache your selector to neaten things up.
var $button = $('.button'), $alertArea = $("#alert_area");
if ($button.attr('id') != $alertArea.attr('showing')) {
$alertArea.show()
} else {
$alertArea.toggle();
}
$alertArea.attr('showing', $button.attr('id'));