There is a script that works fine if the tab-panel is not hidden, but I need to count position, width of the element without to do action with tab-panel display , because that script i use beyond tab-panel like only ".swipeTab".
P.S. Sorry for my English ...
For example:
<div class="tab-panel" style="display: none">
<div class="swipeTab">
<div class="swipeTab__list">
<div class="swipeTab__item">TAB 1</div>
<div class="swipeTab__item">TAB 2</div>
<div class="swipeTab__item">TAB 3</div>
<div class="swipeTab__item">TAB ...</div>
</div>
</div>
</div>
Part of script
var target = $('.swipeTab__item'),
list= $('.swipeTab__list');
position: function(target) {
return {
left : $(target).position().left,
right : parseInt($(list).outerWidth()) - parseInt($(target).position().left) - parseInt($(target).outerWidth())
}
}
Related
I have 2 grid divs, one with images and the other with a list of names. Each element within each of the divs corresponds to another within the other div (eg. .image-1 corresponds with .name-1).
When you hover over one of the elements, I want that element AND the corresponding element in the other div to both disappear.
For example, when you hover over "Name 1", I want that and the corresponding image to both disappear. Here's my general html setup:
<body>
<div class="wrapper">
<div class="picture-grid grid">
<div class="grid-box image-1">
<img src="images/image1.png" />
</div>
<div class="grid-box image-2">
<img src="images/image2.png" />
</div>
<div class="grid-box image-3">
<img src="images/image3.png" />
</div>
<div class="grid-box image-4">
<img src="images/image4.png" />
</div>
<div class="grid-box image-5">
<img src="images/image5.png" />
</div>
</div>
<div class="names-grid grid">
<div class="grid-box name-1">Name 1</div>
<div class="grid-box name-2">Name 2</div>
<div class="grid-box name-3">Name 3</div>
<div class="grid-box name-4">Name 4</div>
<div class="grid-box name-5">Name 5</div>
</div>
</div>
</body>
I'm sorry, I've been stuck on this for hours and would love some help! Here's a fiddle:
https://jsfiddle.net/8egpf1j3/
One solution using JQuery is to add data-* attributes to the HTML markup. In this approach we going to add a data-target attribute that will hold the class of the related element that should be hidden (with opacity: 0) when the current element is hovered. You can use JQuery.data() to work with data-* attributes. Check the next simplified example, from where I hope you can understand the underlying idea.
$(".grid-box").hover(
// Handler for hover-in.
function()
{
$(this).css("opacity", 0);
$($(this).data("target")).css("opacity", 0);
},
// Handler for hover-out.
function()
{
$(this).css("opacity", 1);
$($(this).data("target")).css("opacity", 1);
}
);
.grid-box {
width: 100px;
background-color: skyblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="picture-grid grid">
<div class="grid-box image-1" data-target=".name-1">
IMAGE 1
</div>
<div class="grid-box image-2" data-target=".name-2">
IMAGE 2
</div>
<div class="grid-box image-3" data-target=".name-3">
IMAGE 3
</div>
<div class="grid-box image-4" data-target=".name-4">
IMAGE 4
</div>
</div>
<hr>
<div class="names-grid grid">
<div class="grid-box name-1" data-target=".image-1">
Name 1
</div>
<div class="grid-box name-2" data-target=".image-2">
Name 2
</div>
<div class="grid-box name-3" data-target=".image-3">
Name 3
</div>
<div class="grid-box name-4" data-target=".image-4">
Name 4
</div>
</div>
</div>
You can do it this way, I suppose number of images and names is the same, and they are in the same order. Means image number one is first in its div, and name number one is first in its div.
//getting all pictures by <a> tag
var pictures = document.querySelector(".picture-grid").querySelectorAll("a");
//getting all names by <a> tag
var names = document.querySelector(".names-grid").querySelectorAll("a");
//attach reaction to "hover" event to all pictures and names
for (var i = 0; i < pictures.length; i++){
pictures[i].addEventListener("mouseenter", hide.bind(i));
names[i].addEventListener("mouseenter", hide.bind(i));
}
//run function on "hover" event, i = index of chosen image/name
function hide (){
var i = this;
pictures[i].style.opacity = 0;
names[i].style.opacity = 0;
}
I've this loop in WordPress that displays post.
<div class="parent-div" id="unuqueIdHereForEachBlock">
<div class="child-1"></div>
<div class="child-2">
<div class="sub-child">
</div>
</div>
</div>
This 'parent-div' is in loop and it repeats 20-30 times for each post. For some of the posts, sub-child div would have no content, and in that case I want to hide 'child-1' div just for that particular post.
Solution in jQuery, JavaScript or PHP is fine.
Hope that makes sense.
Thanks.
You can try following
$(".parent-div").each((i,e) => {
if(!$(e).find(".child-2 .sub-child").text().trim()) $(e).find(".child-1").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent-div" id="unuqueIdHereForEachBlock">
<div class="child-1">Text 1</div>
<div class="child-2">
<div class="sub-child">
</div>
</div>
</div>
<div class="parent-div" id="unuqueIdHereForEachBlock">
<div class="child-1">Text 2</div>
<div class="child-2">
<div class="sub-child">
Some text
</div>
</div>
</div>
Try this with jQuery, where you can iterate over each parent div and check for text. if text length is zero then hide child div
$(function(){
$(".parent-div").each(function(){
var text = $(this).find(".child-2 > .sub-child").text();
if(text.length==0) {
$(this).find(".child-1").hide();
}
});
});
I am using this accordion script for an FAQ page: http://www.snyderplace.com/demos/accordion.html
It's great except for one problem which is especially evident on mobile devices. When you click on a question and it has a lot of content inside, it expands upwards off the screen, to where you have to scroll up to see the question and the beginning of the content.
Ideally I'd like to have it to where the script scrolls the question to the top of the page/viewport when you click on it. If anyone has an idea of what to tweak in the script that would be amazing!
You may try something like this. You don't need a plugin for an accordion:
Edited version with icons, default open, and touch enabled scroll to top
https://jsfiddle.net/07fdq3t1/10/
Add the class show to the one you want to open.
This could probably be written more efficiently as there's repeating code, but it should work.
jQuery
$(document).ready(function() {
$('.accordion').click(function(){
if($(this).next('.container').is(':visible')) {
$(this).removeClass('show');
$(this).next('.container').slideUp();
}
else {
$('.accordion').find('.container:visible').slideUp();
$('.accordion').removeClass('show');
$(this).addClass('show');
$(this).next('.container').slideDown();
}
});
$('.accordion').on( "touchstart", function(){
if($(this).next('.container').is(':visible')) {
$(this).removeClass('show');
$(this).next('.container').slideUp();
}
else {
$('.accordion').find('.container:visible').slideUp();
$('.accordion').removeClass('show');
$(this).addClass('show');
$(this).next('.container').slideDown();
$('html, body').animate({
scrollTop: $(this).offset().top
}, 200);
}
});
});
HTML
<div class="accordion">Heading<span></span></div>
<div class="container">
<div class="content">
<div>Sample Content</div>
<p>Content here....</p>
</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
<div class="content">
<div>Sample Content</div>
<p>Content here....</p>
</div>
</div>
<div class="accordion show">Heading<span></span></div>
<div class="container">
<div class="content">
<div>Sample Content</div>
<p>Content here....</p>
</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
<div class="content">
<div>Sample Content</div>
<p>Content here....</p>
</div>
</div>
Note you will need to include jQuery in your code.
Does anybody have any idea how to create a variable that contains the id of a clicked div?
I want to hide all the #content-wrappers on page load apart from the first one then when the .square has been clicked for it to display the div with the same class as the id that has been clicked, it doesn't make much sense when you write id down but if you look at my fiddle then it should hopefully make sense?
http://jsfiddle.net/alexjamest/Lkaxza22/
$('#content-wrapper').hide();
$(".square").click(function() {
var id_name= $(this).attr(id);
if $('#content-wrapper').hasClass(id_name){
$(this).fadeIn();
}
});
<div id="content-wrapper" class="c1">Content 1</div>
<div id="content-wrapper" class="c2">Content 2</div>
<div id="content-wrapper" class="c3">Content 3</div>
<div id="content-wrapper" class="c4">Content 4</div>
<div id="content-wrapper" class="c5">Content 5</div>
<div id="content-wrapper" class="c6">Content 6</div>
<div id="content-wrapper" class="c7">Content 7</div>
<div id="content-wrapper" class="c8">Content 8</div>
<div class="square" id="c1"></div>
<div class="square" id="c2"></div>
<div class="square" id="c3"></div>
<div class="square" id="c4"></div>
<div class="square" id="c5"></div>
<div class="square" id="c6"></div>
<div class="square" id="c7"></div>
<div class="square" id="c8"></div>
Change your content-wrappers elements so that they contain classes, not ids, since ids should be unique. You can, however, identify your content with some sort of a prefix, like content-:
<div class="content-wrapper" id="content-c1">Content 1</div>
<div class="content-wrapper" id="content-c2">Content 2</div>
<div class="content-wrapper" id="content-c3">Content 3</div>
<div class="content-wrapper" id="content-c4">Content 4</div>
<div class="content-wrapper" id="content-c5">Content 5</div>
<div class="content-wrapper" id="content-c6">Content 6</div>
<div class="content-wrapper" id="content-c7">Content 7</div>
<div class="content-wrapper" id="content-c8">Content 8</div>
Then the following code will work:
$(document).ready(function()
{
$(".content-wrapper").hide();
$(document).on("click", ".square", function()
{
var id = $(this).attr("id");
$("#content-"+id).fadeIn();
});
});
Note the following part
$(".content-wrapper").hide();
which is important, since we're identifying that we wish to hide all elements which contain the class content-wrapper, not the id content-wrapper.
Working Demo.
There are four problems with your code:
$('#content-wrapper').hide(); will only hide the first element with that ID, because IDs have to be unique. Use a common class instead.
var id_name= $(this).attr(id);. id is an undefined variable. You probably want to pass the string "id" instead, or better, just access the property of the DOM element: this.id.
if $('#content-wrapper').hasClass(id_name){ is a syntax error. The condition has to be put in parhenthesis:
if ($('#content-wrapper').hasClass(id_name)) {
However, that alone won't make the condition work, since again, #content-wrapper will only select the first element. Just select the corresponding element by class:
$('.' + this.id).fadeIn();
You can also add .content-wrapper for more granular filtering:
$('.content-wrapper.' + this.id).fadeIn();
Fixed code:
$('.content-wrapper').hide(); // give that class to all elements instead of the ID
$(".square").click(function() {
$('.' + this.id).fadeIn();
});
DEMO
A JQuery-less solution, still with the fade animation.
On load it gets an array of buttons and an array of content wrappers, then it just uses the order to figure out which box to reveal. Will only work with an equal number of buttons and wrappers. I started the wrappers as invisible in the style sheet, so we only have to reveal them. Also remembers which buttons was clicked last and resets its visibility.
<head>
<style>
.content-wrapper{
opacity:0;
transition:opacity 1s ease;/* only showing the normal one, prefixed may be required for portability*/
}
</style>
<script>
window.addEventListener('load',onload,false);
var wrappers;
var buttons;
var last;
function onload(){
wrappers = document.getElementsByClassName('content-wrapper');
buttons = document.getElementsByClassName('square');
var i = buttons.length;
while(i--) // add listener for each button
buttons[i].addEventListener('click',onclick,false);
}
function onclick(){
if(last)wrappers[last].style.opacity = '0.0'; //hide previous
var i = buttons.indexOf(this);
wrappers[i].style.opacity = '1.0'; //show clicked
last = i;
}
</script>
</head>
<body>
<div class='content-wrapper'></div>
<div class='content-wrapper'></div>
<div class='content-wrapper'></div>
<div class='content-wrapper'></div>
<div class='content-wrapper'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
</body>
<div id="wrapper">
<div class="accordionButton">Personal Information</div>
<div class="accordionContent">
Personal text
</div>
<div class="accordionButton">Experience</div>
<div class="accordionContent">
Experience information
</div>
<div class="accordionButton">Training</div>
<div class="accordionContent">
No skills
<div class="accordionButton">Career</div>
<div class="accordionContent">
Never had a job
</div>
<div class="accordionButton">Referers</div>
<div class="accordionContent">
None.
</div>
</div>
This code works how i want it to. It is a horizontal accordion. However, when it is loaded on my webpage, they content divs have to be hidden for my jquery to work.
Jquery:
$(document).ready(function() {
// When div is clicked, hidden content divs will slide out
$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
// Close all divs on load page
$("div.accordionContent").hide();
});
If i don't hide the divs, all the divs display. Is there any way to display the 1st page without changing too much of my jquery or would i have to set different class names for the button and the content so that when a specified button is clicked, the affiliated content will slide out for that button div?
You can use jquery selector for first div and set it as show(). Something like :
$('div.accordionContent:first').show();
I think you have to try this:-
<script type="text/javascript">
$.fn.accordion = function(settings) {
accordion = $(this);
}
$(document).ready(function($) {
$('div.accordionContent').click(function() {
if($(this).next().is(":visible")) {
$(this).next().slideDown();
}
$('div.accordionContent').filter(':visible').slideUp();
$(this).next().slideDown();
return false;
});
});
</script>
Why not use slideToggle() instead of IF statements....
Try this very simple solution
HTML
<div class="accordion-container">
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
</div>
jQuery
$('.accordion-content .accordion-title').on('click', function(){
$(this).toggleClass('active');
$('.accordion-title').not($(this)).removeClass('active');
$(this).next().slideToggle();
$(".accordion-toggle").not($(this).next()).slideUp();
});