How to get the div behind the div i clicked - javascript

Please take a look here at what I'm trying to achieve: http://jsfiddle.net/3m6r7ud2/4/
I have the following html page that looks like this:
<div class="page_conatiner" id="page1">
<img src=$file1>
<div class="page_conatiner" id="page2">
<img src=$file2>
<div class="page_conatiner" id="page3">
<img src=$file3>
And so on.
I also have a fixed button that shows up on hover:
<div class="rotate_button" id="rotate_left" ></div>
<div class="rotate_button" id="rotate_right" ></div>
This is the jQuery I'm using:
$(document).on("click", ".rotate_button", function(){
var direction = $(this).attr("id");
var page_num = ?
rotate_file(page_num,direction)
})
The buttons are in fixed locations on the page, and show on hover. When clicking on this button, I want to get which div was behind that div while clicking
so I could know which of the pages I need to rotate.
How can I do this?

First, I'm not certain what animation you are going for, but there might be a jQuery widget that will do what you want out of the box. Idk. The bootstrap one is handy, but maybe all of bootstrap is more than you want: http://getbootstrap.com/javascript/#carousel.
To answer your question: I would set a variable somewhere that keeps track of the current page num. Set it to 0 (or 1 if that's the first page number) when the page loads, and then in your click handler, increment it by 1. And then make sure to reset it to 0 (or 1) again when it gets high enough to start over. Does that answer your question?

Related

Accordion closing onClick anywhere in container

I am trying to create an accordion for a project I'm working on. For the sake of argument, lets assume this accordion only has one container. So far, I've got it all working, however when I expand the accordion, which will only expend if I click on the header, I am then able to close the open container by clicking anywhere in the container, rather than just the header.
I've tried a few different things resulting in null .toggle errors so far. Below is a snippet of the accordion itself, along with the JS I'm using with it. Please bare in mind the accordion functions correctly and displays correctly, its the click function that's the issue (meaning my CSS is fine so no point sharing):
JS:
const accordion = document.getElementsByClassName('container1');
for (i=0; i<accordion.length; i++) {
accordion[i].addEventListener('click', function () {
this.classList.toggle('active');
});
}
Accordion HTML:
<div class="accordion-body">
<div class="accordion">
<hr>
<div class="container1" id="container1">
<div class="label" id="linkId">Generate a payment link</div>
<div class="content">
<div class="form">
</div>
</div>
</div>
<hr>
</div>
</div>
Essentially, I only even want the accordion to open/close if the 'label' div is pressed. This is because within my accordion there are buttons, so at the moment when a button is pressed when accordion is open, it changes the class which closes the accordion back up. Right now I understand that the clickable area is 'container1' but I've not been able to make it work against the label div.
I can also provide a link to the webpage where it is happening, happy to provide this via PM.
I tried changing the JS to the below:
const accordion = document.getElementsByClassName('container1');
const linkId = document.getElementById('linkId');
for (i=0; i<accordion.length; i++) {
document.getElementById('linkId').addEventListener('click', function () {
accordion.classList.toggle('active');
});
}
However the above produces the following error:
Uncaught TypeError: Cannot read properties of undefined (reading 'toggle')
at HTMLDivElement. (txninfo.php:825:25)
LINE 825 is the following:
accordion.classList.toggle('active');
Any help would be massively appreciated
accordion in that case is instance of HTML-Collection and not Element as you assume.
So you correctly iterate over the collection of elements, you now just want to select the current element (where key == i) of iteration instead of the whole collection.
accordion[i].classList.toggle('active');
then you should have an Element and should be able to access it´s properties like classList
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

Apply class to neighbor div when div gets class

I have a div containing all my content, and then I have a div containing pop-up windows. So basically something like this:
<div class="content">
Some content
</div>
<div class="popup-wrapper">
Popup content
</div>
Then at some point a class is added to the popup-wrapper due to some button click, that in Angular would look something like:
<button (click)="popup = !popup">Click me</button>
<div class="popup-wrapper" [ngClass]="popup ? 'is-active' : ''">
Popup content
</div>
My question is: Are there some way (CSS wise. JS would probably also do if no other alternative is available) that when popup-wrapper has the class is-active I can also target content as well ?
The issue for me not just putting the same JS into the content div, i.e. [ngClass]="popup ? 'is-active' : ''" is because there are several instances that can activate a popup, and other popup wrappers as well. So if I were to do this I would have to go through every page that has this kind of popup-wrapper, and paste similar code into every content div, but with different state names.
So I just thought it would be much easier, if I could target the content div whenever the popup-wrapper div had the is-active class.
For my understanding, you'll need something like that:
function anyName () {
let x = document.getElementByClassName('is-active');
if (x === true) {
// do something
}
}
Depending on what ever you want to do next, you can either go for an identifier like your div's className ('content') or you try to target it by its position, like 'previousElementSibling'

sort divs by the number, no randomize

I found this great script: jsfiddle
Over here: Showing random divs using Jquery
The problem is that on reload the divs are randomized. I need the divs to show as they are sorted in the html, like 1,2,3,4 etc. And than of course cycle back starting over from div1.
Here's a version that works between page reloads, using the cookie plugin:
JavaScript:
var divIndex = $.cookie('div_index') || -1;
var divs = $('.Image');
divIndex = (parseInt(divIndex, 10) + 1) % divs.length;
divs.eq(divIndex).show();
$.cookie('div_index', divIndex);
Example: http://jsfiddle.net/RJMhT/124/
Try using the cycle plugin:
Updated JavaScript:
$("#slideshow").cycle();
Markup:
<div id="slideshow">
<div class="Image"><img src="/image1.jpg">1</div>
<div class="Image"><img src="/image2.jpg">2</div>
<div class="Image"><img src="/image3.jpg">3</div>
<div class="Image"><img src="/image4.jpg">4</div>
<div class="Image"><img src="/image5.jpg">5</div>
<div class="Image"><img src="/image6.jpg">6</div>
<div class="Image"><img src="/image7.jpg">7</div>
</div>
Example:
http://jsfiddle.net/RJMhT/120/
If you want to do this:
when reload, show 1, then
reload, show 2, then reload, show 3.....
you may have to use some cache technique such as localStorage to store the index of the last div, then when reload, read the last index from localStorage, calculate the next index, show it.
Edit: I think I misunderstood your question. You want a different image to load each time you actually reload the page? Seems like an odd request. Let me think about it.
Answer http://jsfiddle.net/morrison/RJMhT/133/
Features:
Uses kittens for images. (My favorite feature).
Uses the jQuery cookie plug-in when localStorage fails.
Properly cycles through a dynamic amount of images.
Answer: http://jsfiddle.net/morrison/RJMhT/123/
Features:
Uses kittens for images. (My favorite feature).
Uses the jQuery cycle plug-in.
When it hits the last one, it goes back to the first. This is default for cycle.

Play with Div using jQuery or Javascript

I want to move specific div to up on the up link. Same as to move div to down on the
down link. As shown in screenshot, same as i want to insert div before specific div on the
'IB' link. I want to insert div after specific div on the 'IA' link. To delete specific div on the 'D' link.
alt text http://freeimagehosting.in/images/204_screen_j.jpg
screenshot
Now of course there will be many alternatives are available to achieve above features like jquery, normal javascript, etc.
But I would like to know that which will be the best way to achieve this.
Any feedback would be highly appreciated...!
EDIT : screenshot link is up now !!
jQuery definately makes this sort of thing a bunch easier.
Given this simple markup:
<div class="moveable" id="div1">
One
Move up
Move down<br/>
</div>
<div class="moveable" id="div2">
Two
Move up
Move down<br/>
</div>
<div class="moveable" id="div3">
Three
Move up
Move down<br/>
</div>
This jQuery will move an element up or down:
$('.moveable a.up').live('click',function(){
var $div = $(this).parent('.moveable');
var idx = $div.index();
if(idx>0){
$div.remove();
$('div.moveable:eq(' + (idx-1) +')').before($div);
}
return false;
});
$('.moveable a.down').live('click',function(){
var $div = $(this).parent('.moveable');
var idx = $div.index();
if(idx<$('div.moveable').length-1){
$div.remove();
$('div.moveable:eq(' + idx +')').after($div);
}
return false;
});
That should give you enough to go on to start doing an insert too.
Here's the fiddle if you want a demo: http://jsfiddle.net/5hF98/
Have you looked at the Jquery-UI Sortable code, it may not be exactly what you need, but it is an option.

javascript slide slick_accessible_slideshow

i have three div's in an HTML page. the page look like this
HTML Page:
leftArrow(>) div rightArrow(<)
i need to move the div from left to right and right to left. using javascript and DHTMl
or JQuery.
Is it Possible to Move in that direction ?
Yes it's possible, i've done it in the past without using jQuery.
I have a the following markup:
<div id="HorThumbs" style="overflow:hidden;width:500px">
<div id="HorScroller" style="width:1000px">
//Data to be shown
</div>
</div>
var scrollStep=1;
var timerLeft,timerRight="";
function scrollDivLeft(id){
clearTimeout(timerRight);
document.getElementById(id).scrollLeft-=scrollStep;
timerRight=setTimeout("scrollDivLeft('"+id+"')",1);
}
function scrollRight(id){
clearTimeout(timerLeft);
document.getElementById(id).scrollLeft+=scrollStep;
timerLeft=setTimeout("scrollRight('"+id+"')",1);
}
Then add a MouseOver event to your left and right arrows, passing in 'HorThumbs' as the Id to either scrollDivLeft or scrollDivRight function.
Take a look at the jQuery cycle plugin. It will scroll left/right and allows prev/next buttons.

Categories