I am trying to fullscreen a div#controls when a button inside it is clicked and make all other div#controls with same parent, div#buttons, disappear.
My HTML:
<div id="testpile" class="inner cover">
<div id="buttons" class="buttons">
<div id="controls" class="col-md-4 rat">
<h1>Rationelt</h1>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
<a id="1" class="btn btn-group btn-default" role="button">Rationelt</a>
</div>
<div id="controls" class="col-md-4 emo">
<h1>Emotionelt</h1>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
<a id="2" class="btn btn-group btn-default" role="button">Emotionelt</a>
</div>
<div id="controls" class="col-md-4 per">
<h1>Personligt</h1>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
<a id="3" class="btn btn-group btn-default" role="button">Personligt</a>
</div>
</div>
</div>
My jQuery:
<script type="text/javascript">
$('.btn-group').on('click', function() {
$(this).parent().toggleClass('col-md-4 col-md-12');
$(this).parent().siblings().toggleClass('col-md-4 col-md-0');
});
</script>
I am quite sure that the problem I am having is that I have not succeeded in targeting the right div, but I have tried everything to solve it myself and sadly, haven't been able to.
As an aside of the control id being duplicated, simply toggle the display of the parents siblings to show/hide them on each button click:
$('.btn-group').on('click', function() {
$(this).parent().siblings().toggle();
});
You are targeting the right div, despite the invalid duplicate IDs.
The use of toggleClass is the problem, especially after the first click, since it will toggle each class from its current state, which will give inconsistent results depending on which order the user clicks on each item -- you also appear to be toggling grid column declarations, which I'm not sure is what you intend?
Below I've changed your code to use addClass and removeClass explicitly (and have made 'hidden' still slightly visible so you can see the effect of subsequent clicks)
$('.btn-group').on('click', function() {
$(this).parent().removeClass('hidden');
$(this).parent().siblings().addClass('hidden');
});
.hidden {opacity:0.1}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testpile" class="inner cover">
<div id="buttons" class="buttons">
<div id="controls" class="col-md-4 rat">
<h1>Rationelt</h1>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
<a id="1" class="btn btn-group btn-default" role="button">Rationelt</a>
</div>
<div id="controls" class="col-md-4 emo">
<h1>Emotionelt</h1>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
<a id="2" class="btn btn-group btn-default" role="button">Emotionelt</a>
</div>
<div id="controls" class="col-md-4 per">
<h1>Personligt</h1>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
<a id="3" class="btn btn-group btn-default" role="button">Personligt</a>
</div>
</div>
</div>
I don't think you are doing anything to the siblings of the parent except just giving them a column class. From what I understand what you need to add is .hide() method.
This will hide the divs that you want hidden.
Here is a link from the jquery api that will help you and give examples link
remove that id controls. IDs should not repeat, use class there like;
<div class="controls col-md-4 rat">
and use JS like;
$('.btn-group').on('click', function() {
$(".controls").hide();
$(this).parents(".controls").show();
});
Related
I have used have to change the wording of this CV whenever you click on a button.
function myFunction(){
document.getElementById("demo").innerHTML= " ACERCA DE MI Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id pellentesque orci. Duis vulputate est a nulla consectetur, vitae hendrerit purus malesuada. r";
}
function myFunction2(){
document.getElementById("demo").innerHTML = " EXPERIENCIA Proin et tortor ut lorem finibus enter image description hereblandit. Etiam convallis, libero eu pellentesque semper, nibh mauris suscipit magna, vehicula vulputate nibh urna at urnas.";
}
function myFunction3(){
document.getElementById("demo").innerHTML = " ESTUDIOS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id pellentesque orci. Duis vulputate est a nulla consectetur, vitae hendrerit purus malesuada. Vestibulum am.";
}
function myFunction4(){
document.getElementById("demo").innerHTML = " HABILIDADES Proin et tortor ut lorem finibus blandit. Etiam convallis, libero eu pellentesque semper, nibh mauris suscipit magna, vehicula vulputate nibh urna at urna. Duis eget dolor eros.";
}
<div class="text-center">
<button class="button button1" type="button" onclick="myFunction()">ACERCA DE MI</button>
<button class="button button2" type="button" onclick="myFunction2()">EXPERIENCIA </button>
<button class="button button3" type="button" onclick="myFunction3()">ESTUDIOS </button>
<button class="button button4" type="button" onclick="myFunction4()">HABILIDADES </button>
</div>
<p id="demo"><img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">
ACERCA DE MI Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id pellentesque orci. Duis vulputate est a nulla consectetur, vitae hendrerit purus malesuada. Vestibulum euismod orci volutpat fringilla egestas. Etiam pellentesque orci sed risus rhoncus tempor. Cras molestie id turpis ac laoreet. Curabitur vel justo nunc. Maecenas eget ante tincidunt lorem fermentum dapibus non in quam. orem ipsum dolor
</p>
How can I style the new text that appears with the click of the button? I have no idea how to link the inneHTML to CSS and be able to change the font, size and add space between sentences. Thank you!
how it looks so far. I want to create paragraphs with the text
I tried adding tags to the inner.html but that just breaks the link
so far I just styled de tag in css to forcefully make it as it looks now but it is not enough to change it into paragraphs
Be aware, that your code removed the image within <p> element too.
What you can do, is according to which button was clicked, add a different css class and define a style for it.
Simplified, it would look something like this:
<script>
function myFunction() {
let element = document.getElementById('demo');
element.classList = ['style1'];
element.innerHTML = 'new red inner text';
}
function myFunction2() {
let element = document.getElementById('demo');
element.classList = ['style2'];
element.innerHTML = 'new green inner text';
}
</script>
<style>
.style1 {
color: #FF0000;
font-weight: bold;
}
.style2 {
color: #00FF00;
font-weight: bold;
}
</style>
<div class="text-center">
<button class="button button1" type="button" onclick="myFunction()">Button 1</button>
<button class="button button2" type="button" onclick="myFunction2()">Button 2</button>
</div>
<p><img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow"> <span id="demo">Inner Text </span>
</p>
I'm using the following javascript to hide and reveal a sign up form on my website and it works perfectly for one form. The trouble starts when I would like more of these on one page.
<script type="text/javascript">
jQuery(document).ready(function() {
// Hide the div
jQuery('#reveal').hide();
jQuery('.rv_button').click(function(e){
e.preventDefault();jQuery("#reveal").slideToggle(1000);
jQuery('.rv_button').toggleClass('opened closed');
});
});
</script>
The CSS is
.rv_button.closed:after {content:"\33";}
.rv_button.opened:after{content:"\32";}
I added the class 'rv_button closed' to the button that triggers the toggle and an ID of 'reveal' to the form itself.
I would like to use the same effect to hide and reveal a list of blog posts on one page but it's not working. I tried adding an ID to the buttons instead of a class because they're not unique items but that didn't work either.
Is there a way of tweaking the code to help me achieve this?
It's a bit hard to answer without also seeing your HTML structure but you can create a wrapper for your divs. You can then check for which wrapper the button has been clicked and manipulate elements within that specific wrapper.
$(document).ready(function() {
$('.rv_button').click(function() {
$wrapper = $(this).closest('.wrapper');
$wrapper.find('.reveal').slideToggle(1000);
$(this).toggleClass('opened closed');
});
});
.wrapper { margin-bottom: 15px; }
.reveal { display: none; }
.rv_button.closed:after { content:"\25BD"; }
.rv_button.opened:after{ content:"\25B3"; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="reveal">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim congue pharetra. Morbi neque urna, vestibulum vel fringilla ac, congue id risus. Cras tristique, ipsum ornare tristique lobortis.</p>
</div>
<button class="rv_button closed"></button>
</div>
<div class="wrapper">
<div class="reveal">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim congue pharetra. Morbi neque urna, vestibulum vel fringilla ac, congue id risus. Cras tristique, ipsum ornare tristique lobortis.</p>
</div>
<button class="rv_button closed"></button>
</div>
<div class="wrapper">
<div class="reveal">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim congue pharetra. Morbi neque urna, vestibulum vel fringilla ac, congue id risus. Cras tristique, ipsum ornare tristique lobortis.</p>
</div>
<button class="rv_button closed"></button>
</div>
I need to create a pretty simple table that has pictures of our team members (4 total). When one of these images is clicked, I want a 'modal(correct term?)' to open beneath the images and include their biographies, titles, etc. I have included my code below to something that is close to functional, but I cannot figure out how to make one close when the other opens properly.
<script type="text/javascript">
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
</script>
<div class="spoiler">
<img onclick="showSpoiler(this);" src="https://via.placeholder.com/300" />
<div class="inner" style="display:none;">
<h1>John Doe</h1>
<p>President</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere tempus odio, in ornare lacus pulvinar quis. Aliquam sed risus non nisi euismod dignissim quis quis diam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere tempus odio, in ornare lacus pulvinar quis. Aliquam sed risus non nisi euismod dignissim quis quis diam. Nullam venenatis sit amet massa eget bibendum. Maecenas odio mi, tristique et viverra ac, ornare id enim. Aliquam et felis nibh. Etiam pharetra, nisi a scelerisque consectetur, nibh quam volutpat dui, nec faucibus ante nunc vel nisi. Fusce rutrum tempor auctor. Donec feugiat tellus in feugiat ultrices. Nulla et neque tristique, dictum metus in, dapibus eros. Duis interdum erat eget pellentesque tristique.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="spoiler">
<img onclick="showSpoiler(this);" src="https://via.placeholder.com/300" />
<div class="inner" style="display:none;">
This is a spoiler!
</div>
</div>
<div class="spoiler">
<img onclick="showSpoiler(this);" src="https://via.placeholder.com/300" />
<div class="inner" style="display:none;">
This is a spoiler!
</div>
</div>
<div class="spoiler">
<img onclick="showSpoiler(this);" src="https://via.placeholder.com/300" />
<div class="inner" style="display:none;">
This is a spoiler!
</div>
</div>
JSFIDDLE: https://jsfiddle.net/hLkgcqxr/1/
My ideas is that when the user clicks '1' it opens below, and when they click '2' it changes to the biography of user 2.
Please let me know if there's any additional info needed in order to push me in the right direction - I know it can be a bit confusing :)
This logic relies on a css rule that makes the inner elements hidden, so long as the parent spoiler does not have a class of active.
All our logic does is, when an outer is clicked, it removes the active class from any spoiler that already has it, and then adds the active class to the spoiler the outer belongs to.
var $spoilers = $('.spoiler').on('click', '.outer', function(e){
$spoilers.removeClass('active');
$spoilers.has(e.target).addClass('active');
});
.spoiler:not(.active) .inner { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="spoiler">
<img class="outer" src="https://via.placeholder.com/300" />
<div class="inner">
<h1>John Doe</h1>
<p>President</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere tempus odio, in ornare lacus pulvinar quis. Aliquam sed risus non nisi euismod dignissim quis quis diam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere tempus odio, in ornare lacus pulvinar quis. Aliquam sed risus non nisi euismod dignissim quis quis diam. Nullam venenatis sit amet massa eget bibendum. Maecenas odio mi, tristique et viverra ac, ornare id enim. Aliquam et felis nibh. Etiam pharetra, nisi a scelerisque consectetur, nibh quam volutpat dui, nec faucibus ante nunc vel nisi. Fusce rutrum tempor auctor. Donec feugiat tellus in feugiat ultrices. Nulla et neque tristique, dictum metus in, dapibus eros. Duis interdum erat eget pellentesque tristique.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="spoiler">
<img class="outer" src="https://via.placeholder.com/300" />
<div class="inner">
This is a spoiler!
</div>
</div>
<div class="spoiler">
<img class="outer" src="https://via.placeholder.com/300" />
<div class="inner">
This is a spoiler!
</div>
</div>
<div class="spoiler">
<img class="outer" src="https://via.placeholder.com/300" />
<div class="inner">
This is a spoiler!
</div>
</div>
I am using cycle2 (http://jquery.malsup.com/cycle2/) to produce a main slideshow containing a number of other slideshows (which contain images and text of variable heights). I want the height of the parent and current slideshow (and container) to resize to the current slide height. This nearly works but I am having a few problems that I can't for the life of me see why and would be massively grateful if someone could point me in the right direction.
You can see a live fiddle at http://jsfiddle.net/deshg/x8xaxx39/
My questions are:
1) Why on first load does it show the 2nd nested slideshow through the first one (when i click on the main pager it fixes it)?
2) Why on first load does cycle-slideshow height not match the current slide height as i'm using the wait command to wait for the images to load and have auto-height set to container (when i click on the main pager it fixes this as well)?
3) Is it a bug that when you manually drag to resize the viewport width sometimes the cycle-slideshow height value is not updated which means the parent height doesn't update or is there a way to solve this?
4) When you click to view gallery 2 and then click back to view gallery 1 the gallery 1 pager (the thumbnails at the bottom) don't work as gallery 2 has a higher z-index despite not being part of the active slide? How do I ensure the active slide has the highest z-index?
Thanks so much for any advice you can give, it doesn't seem to be playing nice for me!
Dave
FYI the related code is:
<div class="module">
<div class="inner">
<h2>GALLERIES</h2>
<!-- empty element for pager links -->
<div id="custom-pager-galleries" class="custom-pager"></div>
<p>Ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<div class="cycle-slideshow gallery"
data-cycle-fx="fade"
data-cycle-timeout=0
data-cycle-slides="> div"
data-cycle-pager="#custom-pager-galleries"
data-cycle-pager-template="<a href=#> {{name}} </a>"
data-cycle-loader="wait"
data-cycle-auto-height="container"
data-cycle-hide-non-active="true"
>
<div data-name="Gallery 1">
<div class="cycle-slideshow"
data-cycle-fx="fade"
data-cycle-timeout=0
data-cycle-slides="> div"
data-cycle-pager="#custom-pager-gallery"
data-cycle-pager-template="<a href='#'><img src='{{imgsrc}}' class='gallerythumbnail gt{{index}}'></a>"
data-cycle-loader="wait"
data-cycle-auto-height="container"
>
<div data-imgsrc="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach2.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 1</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
<div data-imgsrc="http://malsup.github.io/images/beach3.jpg">
<img src="http://malsup.github.io/images/beach3.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 2</strong></p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
<div data-imgsrc="http://malsup.github.io/images/beach1.jpg">
<img src="http://malsup.github.io/images/beach1.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 3</strong></p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
<div data-imgsrc="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach2.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 4</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
<div data-imgsrc="http://malsup.github.io/images/beach3.jpg">
<img src="http://malsup.github.io/images/beach3.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 5</strong></p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
</div>
<div class="pager">
<div id="custom-pager-gallery" class="custom-pager gallerythumbnails"></div>
</div>
</div>
<div data-name="Gallery 2">
<div class="cycle-slideshow"
data-cycle-fx="fade"
data-cycle-timeout=0
data-cycle-slides="> div"
data-cycle-pager="#custom-pager-gallery2"
data-cycle-pager-template="<a href='#'><img src='{{imgsrc}}' class='gallerythumbnail gt{{index}}'></a>"
data-cycle-loader="wait"
data-cycle-auto-height="container"
>
<div data-imgsrc="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach2.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 2</strong></p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
<div data-imgsrc="http://malsup.github.io/images/beach1.jpg">
<img src="http://malsup.github.io/images/beach1.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 1</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
<div data-imgsrc="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach2.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 3</strong></p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
<div data-imgsrc="http://malsup.github.io/images/beach3.jpg">
<img src="http://malsup.github.io/images/beach3.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 4</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
<div data-imgsrc="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach2.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 5</strong></p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
</div>
<div class="pager">
<div id="custom-pager-gallery2" class="custom-pager gallerythumbnails"></div>
</div>
</div>
</div>
</div>
</div>
What you're trying to do is not easy, or provided for "out of the box".
First,
data-cycle-auto-height="container"
is not an allowed option. Check the API. It needs to be an integer, a ratio, or the string "calc".
Second, autoheight can be tricky. You're on the right track with using the wait option on the loader. The problem is that the parent slideshow will still initialize before the children slideshows initialize, simply because it occurs earlier in markup. What you probably want to do is initialize the child slideshows, then initialize the parent slideshow as a callback once both of the child slideshows are fully loaded. Only then will they have layout height that the parent slideshow can use for autoheight calculations. You will need to move off of the declarative syntax, and instead to call cycle slideshow imperatively. I would suggest using jQ deferred objects, and when() syntax to simplify the callback structure.
In semi-pseudo-code:
var childSs1 = new $.Deferred();
var childSs2 = new $.Deferred();
$('.child-slideshow1).on("cycle-post-initialize", function() {
childSs1.resolve();
});
$('.child-slideshow2).on("cycle-post-initialize", function() {
childSs2.resolve();
});
// The following will be called asynchronously
$.when( childSs1, childSs2 ).done(function () {
$(.parent-slideshow).cycle({options});
});
Third, you are most likely running into issues with event bubbling. If an event fires on a child slideshow, that synthetic event will bubble to all parent elements in the DOM, including your parent slideshow(s). That is going to confuse the heck out of the parent slideshow, because it's going to interpret those events as applying to it. Cycle2 wasn't really written with this use case in mind. That isn't to say it can't be done. But you probably will need to do lock down bubbling on all cycle events with something drastic like:
$( ".all-slideshows" ).on("cycle-after cycle-before cycle-bootstrap
cycle-destroyed cycle-finished cycle-initialized cycle-next
cycle-pager-activated cycle-paused cycle-post-initialize
cycle-pre-initialize cycle-prev cycle-resumed
cycle-slide-added cycle-slide-removed cycle-stopped
cycle-transition-stopped cycle-update-view", function( event ) {
event.stopPropagation();
});
Also, it would make it easier for people to help out if you reduced your fiddle as much as possible. Hope this helps.
I'm needing to run a script that I made, it's pretty basic but it is working, but not the way I want, I made this code because I could not find any that could modify
HTML:
<div class="corpo">
<div class="menu-segmento">
<div class="item total">
<div class="item-topo">
<div class="tooltips" >
<img class="ocultar" src="img/ocultar.png" />
<span>Veja menos</span>
</div>
<div class="tooltips" >
<img class="mostrar" src="img/mostrar.png" />
<span>Veja mais</span>
</div>
<p>Drenagem Linfática</p>
</div>
<div class="segmento">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit nulla. Vestibulum sollicitudin sed sapien faucibus porta. Maecenas quis fringilla felis. Vestibulum ultricies quis orci et auctor. Suspendisse vitae mi odio. Maecenas tincidunt nisl sit amet ante ullamcorper bibendum. Vivamus et vestibulum velit. Proin cursus est quis velit euismod, vitae eleifend nisi ultrices. Proin nec felis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item total">
<div class="item-topo">
<div class="tooltips" >
<img class="ocultar" src="img/ocultar.png" />
<span>Veja menos</span>
</div>
<div class="tooltips" >
<img class="mostrar" src="img/mostrar.png" />
<span>Veja mais</span>
</div>
<p>Drenagem Linfática</p>
</div>
<div class="segmento">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit nulla. Vestibulum sollicitudin sed sapien faucibus porta. Maecenas quis fringilla felis. Vestibulum ultricies quis orci et auctor. Suspendisse vitae mi odio. Maecenas tincidunt nisl sit amet ante ullamcorper bibendum. Vivamus et vestibulum velit. Proin cursus est quis velit euismod, vitae eleifend nisi ultrices. Proin nec felis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
and here is the JS for jQuery
$(function () { // DOM ready shorthand
var flip = 0;
$('.mostrar').click( function(){
$('.segmento').slideToggle();
$('.mostrar').fadeOut();
$('.ocultar').fadeIn();
});
$('.ocultar').click( function(){
$('.segmento').slideToggle();
$('.ocultar').fadeOut();
$('.mostrar').fadeIn();
});
});
He is opening the 2 and know it is missing a line of code but I have no idea how to fix.
Any suggestions?
LIVE DEMO
If you have i.e this CSS:
.segmento, .ocultar{
display:none;
}
Remove the classes from the images and add to .tooltips:
<div class="corpo">
<div class="menu-segmento">
<div class="item total">
<div class="item-topo">
<div class="tooltips ocultar">
<img src="http://placehold.it/50x50/f00&text=ocultar" />
<span>Veja menos</span>
</div>
<div class="tooltips mostrar" >
<img src="http://placehold.it/50x50/cf5&text=mostrar" />
<span>Veja mais</span>
</div>
<p>Drenagem Linfática</p>
</div>
<div class="segmento">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit nulla. Vestibulum sollicitudin sed sapien faucibus porta. Maecenas quis fringilla felis. Vestibulum ultricies quis orci et auctor. Suspendisse vitae mi odio. Maecenas tincidunt nisl sit amet ante ullamcorper bibendum. Vivamus et vestibulum velit. Proin cursus est quis velit euismod, vitae eleifend nisi ultrices. Proin nec felis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item total">
<div class="item-topo">
<div class="tooltips ocultar" >
<img src="http://placehold.it/50x50/f00&text=ocultar" />
<span>Veja menos</span>
</div>
<div class="tooltips mostrar" >
<img src="http://placehold.it/50x50/cf5&text=mostrar" />
<span>Veja mais</span>
</div>
<p>Drenagem Linfática</p>
</div>
<div class="segmento">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit nulla. Vestibulum sollicitudin sed sapien faucibus porta. Maecenas quis fringilla felis. Vestibulum ultricies quis orci et auctor. Suspendisse vitae mi odio. Maecenas tincidunt nisl sit amet ante ullamcorper bibendum. Vivamus et vestibulum velit. Proin cursus est quis velit euismod, vitae eleifend nisi ultrices. Proin nec felis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
And this is all you need:
$(function () { // DOM ready shorthand
$('.mostrar, .ocultar').click( function(){
var $parent = $(this).closest('.item');
$(this).toggle().siblings().toggle();
$parent.find('.segmento').slideToggle();
});
});