I'm using an accordion style html code
<div class="accordion-link">Link</div>
<div class="accordion-panel" style="display:none;">content</div>
with this jQuery script
$(function(){
$('.blog .accordion-link').click(function(){
if(!$(this).hasClass('accordion-on'))
$('.blog .accordion-link').removeClass('accordion-on');
$(this).toggleClass('accordion-on');
$(this).next(".accordion-panel").slideToggle().siblings(".accordion-panel:visible").slideToggle();
})
});
In the first accordion tab I'm using a fotorama slideshow.
The problem I'm facing is, that the 'style="display:none;' breaks/stops the execution of the slideshow. How can use the slideshow after toggling the accordion?
Regards
Peter
Try removing the inline style from there, and add a parent <div> which wraps all that, and then control the slideToggle from there, not on the accordion itself.
<div class="acc">
<div class="accordion-link">Link</div>
<div class="accordion-panel" style="display:none;">content</div>
</div>
Also I'm not sure what your if is for but you can just use toggleClass()
Hail mary guess
Try:
<div class="accordion-panel"style="visibility:hidden;">content</div>
I think the plugin is trying to manipulate that css.
Do you have a demo I could look at? I might be able to give a better answer.
$(function(){
$('.accordion-link').click(function(){
if(!$(this).hasClass('accordion-on'))
$('.accordion-link').removeClass('accordion-on');
$(this).toggleClass('accordion-on');
$(this).next(".accordion-panel").slideToggle().siblings(".accordion-panel:visible").slideToggle();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion-link">Link</div>
<div class="accordion-panel" style="display:none;">content</div>
<div class="accordion-link">Link2</div>
<div class="accordion-panel" style="display:none;">content2</div>
<div class="accordion-link">Link3</div>
<div class="accordion-panel" style="display:none;">content3</div>
I didn't see any wrong with your code
I removed the inline style "display:none" and added this line of code in jQuery script
$('.accordion-panel').css('display','none');
This helps fotorama initialize and start - but with the wrong image size.
Adding this line of code to the click(function)
$(window).trigger('resize');
resolves the problem. Now it works.
Related
I have a comment system and I would like to implement the "Show Replies (2)" slide down effect.
This is an example of my setup.
<div class="comment">
<div class="main-comment">
Message.
Show Replies (1)
</div>
<div class="sub-comment">
Funny comment up there, mate.
</div>
</div>
But because both the main comment and its sub comments are dynamically generated using ajax, setting event handlers was a little tricky. This is how I did it:
$(".comment").delegate('.show-replies', 'click', function(event) {
$(this).parent().next(".sub-comment").slideDown();
});
I've tried to make the setup as simple and close to the real thing as possible.
What am I doing wrong and how do I solve it?
<div class="comment">
<div class="main-comment">
Message.
Show Replies (1)
</div>
<div class="sub-comment" style="display: none">
Funny comment up there, mate.
</div>
</div>
<script>
$(document).ready(function() {
$('.show-replies').on('click', function() {
$('.sub-comment').slideToggle();
});
});
</script>
In order to bind to NEW dynamic content you need to tell jquery where it is going to be.. Also make sure to use the latest jQuery, delegate is old.
<div class="comments">
<div class="main-comment">
Message.Show Replies (1)
</div>
<div class="sub-comment" style="display: none">
Funny comment up there, mate.
</div>
</div>
<script>
$(document).ready(function() {
$('.show-replies').on('click','.comments', function() {
$('.sub-comment').slideToggle();
});
});
</script>
Notice the .on(eventType, selector, function) signature.
This will work for dynamic content, anything loaded INTO the div class 'comments' - jQuery will always travesre that container from fresh, instead of caching it.
Also- dont just do it on the entire page,because it will cause slow response, since, every click, it will try and bind to the selector.
Replacing
$(this).parent().next(".sub-comment").slideDown();
with
$(this).parent().parent().next(".sub-comment").slideDown();
Fixed the problem.
Is there any way to hide a div from source code at runtime
Using jquery, javascript or any other method.
Eg:
<div id="abc">
This will not be displayed on source as well as in page
</div>
By using jQuery remove() or hide() - the item is hidden from front end.
But i need to remove it from source...
I'm using drupal render method.
It is not possible to hide DOM elements in browser. You can only remove them using .remove() or hide with .hide() when rendered. But if DOM exist in code then you can not hide it in view source code component.
Here is one solution
In your body tag add onload event
<body onload='removeDiv()'>
<div id='abc'>
This will not displayed in source code as well as in web page.
</div>
<body>
Javascript
<script>
function removeDiv(){
var div = document.getElementById('abc');
div.remove();
}
</script>
<script>
$('.abc').hide();
</script>
If the .hide() and .remove() doesn't work for you. You can try this.
Make a parent div and set the html part empty
<div id="def">
<div id="abc">
This will not be displayed on source as well as in page
</div>
</div>
<script type="text/javascript">
$("#def").html('');
</script>
If you are using drupal the write a php if condition to hide the content of the div, example
<?php if(1){ ?>
<div id="abc">
This will not be displayed on source as well as in page
</div>
<?php }?>
I'm developing a simple webpage using Twitter Bootstrap.
At the sidebar I have 3 buttons. Each of this buttons calls a function to show one div and hide the others.
The HTML code is something like:
<div>
<div class="row" id="general" style="display:none">
Text1
</div>
<div class="row" id="medication" style="display:none">
Text2
</div>
<div class="row" id="diet" style="display:none">
Text3
</div>
</div>
And this is one of JS functions that hide/show the DIVs:
function showGeneral(){
document.getElementById('general').style.display = 'block';
document.getElementById('medication').style.display = 'none';
document.getElementById('diet').style.display = 'none';
}
I update the code with #ChaoticNadirs answer but still does not work.
Here is my code at Bootply
The problem is that the function works properly but once it finish all DIVs became hidden again (as default).
I feel the problem could be in any transition due to Twitter Bootstrap framework.
Does anyone how to solve this?
Bootstrap provides a .hidden class. You can use this rather than the display style to hide and show elements.
Check this bootply for an example: http://www.bootply.com/uY7kHe3Nw7
HTML:
<button class="btn btn-default" id="show-general">Show General</button>
<div>
<div class="row hidden" id="general">
Text1
</div>
<div class="row" id="medication">
Text2
</div>
<div class="row" id="diet">
Text3
</div>
</div>
JS:
$("#show-general").on('click', showGeneral);
function showGeneral(){
$('#general').removeClass('hidden');
$('#medication').addClass('hidden');
$('#diet').addClass('hidden');
}
EDIT:
In your new example you are firing the event on a <div> click inside an <a> tag. You can do something like this to prevent the default action:
JS:
$('#showGeneral').on('click', showGeneral);
function showGeneral(e){
e.preventDefault();
$('#general').removeClass('hidden');
$('#medication').addClass('hidden');
$('#diet').addClass('hidden');
$('#workout').addClass('hidden');
}
Here's a new bootply: http://www.bootply.com/3RkAbPX6d0
You might want to try using the "visibility" attribute... https://developer.mozilla.org/en-US/docs/Web/CSS/visibility you can read more about it here.
Usually I apply a class to an element I would like to hide. This way it prevents using inline styles. If you don't care about inline styling you could also use jQuery's show(),hide(), or toogle() methods.
I do not think that the issue is with Bootstrap.
my goal is to show an overlay on a div when that div is hovered on. The normal div is called .circleBase.type1 and the overlay is circleBase.overlay. I have multiple of these divs on my page. When I hover over one .cirlceBase.type1, overlays show on every .circleBase.type1. How do I prevent this?
Here is some code:
HTML
<div class="circleBase type1">
<p class="hidetext">Lorem ipsum</p>
<hr size="10">
<strong class="gray hidetext">gdroel</strong>
</div>
<div class="circleBase overlay">
<p class="date">11/12/14</p>
</div>
and jQuery
$(document).ready(function(){
$('.overlay').hide();
$('.date').hide();
$(".circleBase.type1").mouseenter(function(){
$(".overlay").fadeIn("fast");
$('.date').show();
$('.hidetext').hide();
});
$(".overlay").mouseleave(function(){
$(this).fadeOut("fast");
$('.date').hide();
$('.hidetext').show();
});
});
Use $(this) to get current element reference and do like this:
$(".circleBase.type1").mouseenter(function(){
$(this).next(".overlay").fadeIn("fast");
$(this).next(".overlay").find('.date').show();
$(this).find('.hidetext').hide();
});
and:
$(".overlay").mouseleave(function(){
$(this).fadeOut("fast");
$(this).find('.date').hide();
$(this).prev(".circleBase").find('.hidetext').show();
});
usually when I want to target something specific you just give it an ID.
ID's play better in JavaScript than classes.
If you had a specific container, using the container as your starting point is a good route as well
$('#container').find('.something.type1').doSomething();
This is much more efficient for jquery, because it only searches .something.type1 inside of #container.
Well I'm not sure exactly what you're looking to do, but it looks like you want to replace content in some kind of circle with a hover text, but with a fade. To do that you'll have to add some CSS and it would be best to change your HTML structure too.
The HTML should look like this:
<div class="circleContainer">
<div class="circleBase">
<p>Lorem ipsum</p>
<hr>
<strong class="gray">gdroel</strong>
</div>
<div class="overlay" style="display: none;">
<p class="date">11/12/14</p>
</div>
</div>
so your js can look like this:
$(function(){
$(".circleContainer").mouseenter(function(){
$(this).find(".overlay")
$(this).find('.circleBase').hide();
});
$(".circleContainer").mouseleave(function(){
$(this).find('.circleBase').show();
$(this).find(".overlay").hide();
});
});
Here's a working solution that includes some CSS to make it nice. Try taking it out and running it, you'll see the problems right away.
So let's say have the following content structure:
<div class="wrapper">
<div class="contentOne" style="width:50px"></div>
<div class="contentTwo"></div>
<div class="contentThree"></div>
<div class="contentFour"></div>
</div>
What I want to achieve on page load, is for the width of the 1st div (contentOne) to be picked up and increment the width of the other 3 divs by 50px. In the end I want the following:
<div class="wrapper">
<div class="contentOne" style="width:50px"></div>
<div class="contentTwo" style="width:100px"></div>
<div class="contentThree" style="width:150px"></div>
<div class="contentFour" style="width:200px"></div>
</div>
First prize would be for this to be possibly using CSS3 Calc. If not JS will be a close 1st princess.
Thanks
Right now, CSS has no preceding-sibling selector (although there is a "following sibling" selector, for some reason), so a pure CSS solution isn't yet possible. jQuery would be something like this:
$('div:not(:first)').each(function()
{
$(this).width($(this).prev().width() + 50);
});
Use Jquery to this . The code would be something like this. Please make the changes appropriate this is just a demo code.
var widthOfFirstChild=$('.wrapper').eq(1).width();
$('.width div').each(
function(){
$(this).attr('style':widthOfFirstChild+50);
widthOfFirstChild=+50
});