I'm not asking how to show/hide content upon click.
All I want to know is how by placing 2 divs, one on top the other, I can get the effect that by clicking on the bottom div, it "closing" the upper div. that's all. Not exactly accordion, but this is enough for my situation.
I tried to achieve this by animating the upper div height to 0, after clicking the bottom div. It works but not smoothly enough. and IE browsers didn't like it:
JQUERY
$('#BottomDiv').click(function() {
$('#UpperDiv').animate({ height: '0px' }, "slow");
});
in the markup side, both divs are position - relative:
HTML
<div id="UpperDiv" style="height:190px; width:100%; margin-top:80px; position:relative">
</div>
<div id="BottomDiv" style="width:100%; position:relative; z-index:10; float:left;" >
</div>
So I was just curious maybe there is a better way to achieve this, like jQuery accordion does it. Smooth and works for all browsers.
Assuming a structure such as:
<div id="accordionWrapper">
<div id="UpperDiv" class="accordionSlides">
<h2>Accordion tab</h2>
<!-- other content, 'p' elements in the demo -->
</div>
<div id="MiddleDiv" class="accordionSlides">
<h2>Accordion tab</h2>
<!-- other content, 'p' elements in the demo -->
</div>
<div id="BottomDiv" class="accordionSlides">
<h2>Accordion tab</h2>
<!-- other content, 'p' elements in the demo -->
</div>
</div>
Then I'd suggest:
$('#accordionWrapper .accordionSlides').click(
function(){
var cur = $(this);
cur.siblings().children().not('h2').slideUp(); // hides
cur.find('p').slideToggle(); // shows
});
JS Fiddle demo.
References:
children().
click().
find().
not().
slideToggle().
slideUp().
Does this help ?
Markup:
<div id="UpperDiv" style='background:red;height:200px;'>
</div>
<div id="BottomDiv" style="background:Gray;height:200px;">
</div>
Javascript:
$('#BottomDiv').click(function() {
$('#UpperDiv').slideUp("slow","linear");
});
$('#BottomDiv').click(function() {
$('#UpperDiv').css("display", 'none');
});
The simple solution is above, however, more elegant would be to define a css class such as:
.invisible
{
display: none;
}
and you can make something invisible by using the addClass function and you can remove this class by using removeClass from the tag to make it visible again.
Related
I made this example up in jsfiddle: http://jsfiddle.net/yt88bsnf/1/
One section has a display of none, and the other is shown. What I am trying to accomplish is when the one of the h2 element is clicked, that section below becomes shown (unless it is already shown, then it would stay shown), and the other h2 element display changes to none (unless it already has a display of none).
Any help or suggestions would be greatly appreciated! Thanks
HTML:
<div id="container">
<h2>Section One</h2>
<h2>Section Two</h2>
</div>
<div id="section_one">
This is Section One
</div>
<div id="section_two">
This is Section Two
</div>
CSS:
#container{
overflow:hidden;
}
#container h2{
float:left;
margin-right:30px;
cursor:pointer;
}
#section_two{
display:none;
}
Check this fiddle
You can use jquery show() and hide(). For more information see W3Scools
And for the docs see here
show()
hide()
JS
$("#header1").click(function () {
$("#section_one").show();
$("#section_two").hide();
});
$("#header2").click(function () {
$("#section_two").show();
$("#section_one").hide();
});
HTML
<div id="container">
<h2 id="header1">Section One</h2>
<h2 id="header2">Section Two</h2>
</div>
<div id="section_one">This is Section One</div>
<div id="section_two">This is Section Two</div>
I've added each h2 an id (header1 and header2) and used that id to show and hide the divs respectively..Please Try it..
with jQuery you can use
$(document).ready(function() {
$('#button1').on('click', function() {
$('#section_one').show();
$('#section_two').hide();
});
$('#button2').on('click', function() {
$('#section_one').hide();
$('#section_two').show();
});
});
i added two id's to the h2's to reference them for the click event.
if you are using more than two sections you might want to use a loop to iterate through them and change their visibility. in that case you could also use the h2's index to check which section should be shown.
see FIDDLE
JS Fiddle Live Demo
An easy way to do it would be to wrap these in their individual parents like:
<div class="parent">
<h1>Section One</h1>
<p>Section One</p>
</div>
<div class="parent">
<h1>Section Two</h1>
<p style="visibility: hidden;">Section Two</p>
</div>
This way you can add multiple sections in your dom and this jQuery would be enough:
$(".parent").children("h1").click(function(){
$(".parent").children("p").css("visibility", "hidden");
$(this).siblings("p").css("visibility", "visible");
});
Feel free to ask any questions in comments.
The following jquery code allows you to hide show the div's irrespective of the number of div's and also do not require additional id's to be created.
$("#container").on('click','h2',function(){//click on any h2 in container
//hide all div's having section id starting with section_
$("div[id^='section_']").hide();
//show the div which has index position equal to the clicked h2
$($("div[id^='section_']")[$(this).index()]).show();
});
See fiddle http://jsfiddle.net/3pmakwh4/
Here my first div shows an image. If you mouse hover on the image then it should show another div named hdiv.
Here $pitem[6] return data from database with php for loop.
CODE
<div class="pcimga">
<div class="pcimg"><img src="Portfolio_Image/'.$pitem[6].'" class="pcimg" /></div>
<div class="hdiv" style="display:none;">
<span class=" butnn"><a data-toggle="modal" href="#myModal'.$pitem[0].'">View</a>
</div>
</div>
Try this
$('.pcimga').hover(function() {
$(this).find('.hdiv').show();
}, function(){
$(this).find('.hdiv').hide();
});
Check it here JsFiddle
try this...
.pgimga:hover~.hdiv
{
display:block;
}
let me know if you want any further guidance..
Try this in CSS. You need to use !important to override the inline style "display:none"
.pcimg:hover+.hdiv
{
display:inherit !important;
}
You can do it with pure CSS:
1. When .hdiv is next to .pcimg
.pcimg:hover+.hdiv{
display:block !important;
}
Fiddle
2. When there is gap between .hdiv and .pcimg
.pcimg:hover~.hdiv{
display:block !important;
}
Fiddle
Note : Internal styles have higher priority than External styles.So for giving External styles more priority !important is needed
You can do it like this with onmouseover and onmouseout events using jquery:
<div class="pcimga">
<div class="pcimg"><img onmouseover='$(".hdiv").show();' onmouseout='$(".hdiv").hide();' src="Portfolio_Image/'.$pitem[6].'" class="pcimg" /></div>
<div class="hdiv" style="display:none;">
<span class=" butnn"><a data-toggle="modal" href="#myModal'.$pitem[0].'">View</a>
</div>
</div>
if you have multiple instances of this block, all of the images will be visible though. to distinguish which one is hovered you can send hideDiv(this) and get which image hovered to show appropriate image.
So, I have a requirement for dynamically generated content blocks on a page. These blocks have a thumbnail and when it is clicked, it should open a modal, and display an unique overlay window, as well as as the unique associated video.
I am trying to write some generic JavaScript that will traverse the DOM tree properly, so that when any particular thumbnail is clicked, a modal, the associated overlay, and the associated video will open.
Here is an example of what I have now (there are many of these, dynamically added):
<div class="block">
<div class="thumbnail">
//Thumbnail image
</div>
<p>Video Description</p>
<div class="window hide">
<div class="video hide">
//Video content
</div>
</div>
</div>
<div id="modal" class="hide"></div>
and after attempting to do a bunch of different things, I ended up trying to do something like this for the JavaScript, which doesn't work:
$(".thumbnail").on("click",function(){
$("#modal").removeClass("hide").addClass("show");
$(this).closest(".window").removeClass("hide").addClass("show");
$(this).closest(".video").removeClass("hide").addClass("show");
});
CSS is very basic:
.hide { display: none; }
.show { display: block; }
Trying to make the click function generic as possible so it would work on any .thumbnail that was clicked. I've also interchanged find(".window") and children(".window") but nothing happens. Any ideas on what I'm doing wrong? Thanks!
Depending on what you actually want your classes to be, I'd use this code:
$(".thumbnail").on("click", function () {
var $block = $(this).closest(".block");
$block.find(".window, .video").add("#modal").removeClass("hide").addClass("show");
});
DEMO: http://jsfiddle.net/gLMSF/ (using different, yet similar code)
It actually finds the right elements, based on the clicked .thumbnail. It finds its containing .block element, then looks at its descendants to find the .window and .video elements.
If you actually want to include . in your attributes, you need to escape them for jQuery selection.
As for styling, you should probably just have the styling be display: block; by default, and then toggle the hide class. It's less work, and makes more sense logically.
You have a huge issue with your class names in HTML:
<div class=".block">
it should be
<div class="block">
Your modal is the only one that has the class properly named. Your DOM traversals will not work because they are looking for "block" but it's called ".block"
So fix it all to this and you should find more success:
<div class="block">
<div class="thumbnail">
//Thumbnail image
</div>
<p>Video Description</p>
<div class="window hide">
<div class="video hide">
//Video content
</div>
</div>
</div>
<div id="modal" class="hide"></div>
Your code won't work because your selectors have periods (.) in your classes if that's actually what you want, you should try it like this:
$(".\\.thumbnail").on("click",function(){
$("#modal").removeClass("hide").addClass("show");
$(this).closest("\\.window").removeClass("hide").addClass("show");
$(this).closest("\\.video").removeClass("hide").addClass("show");
});
Otherwise just try removing the periods from the classes...
Also, you're using .closest() incorrectly, as it looks up through ancestors in the DOM tree...
You should change your code to:
$(".\\.thumbnail").on("click",function(){
$(this).next("\\.window").children(".video")
.addBack().add("#modal").removeClass("hide").addClass("show");
});
I have a horizontally centered container with a navbar that hides and shows divs of varying length with js. Sometimes, if the content in the shown div is too long, showing the div will also show a scrollbar and cause the page to "jump" to the left in certain browsers. The CSS is just Bootstrap's basic scaffolding.
Below is the gist of what's going on in the site. but you can see the problem in production here: http://dylanpatrickclark.com
<body>
<script type="text/javascript">
$(document).ready(function(){
function setNavState(currentHash) {
$('nav ul li').removeClass('active');
var selector = 'nav ul li a[href="' + currentHash + '"]';
$(selector).parent().addClass('active');
};
function hash() {
var hash = window.location.hash;
if (hash != ''){
$('.tabs div').hide();
$(hash).show();
}
else {
$('.tabs div').hide();
$('.tabs div#tab1').show();
hash = 'tab1'
}
setNavState(hash);
};
hash();
$(window).bind('hashchange', function() {
hash()
});
});
</script>
<h1>Hello, world!</h1>
<div class="container">
<div class="row">
<nav>
<ul>
<li> Tab1 </li>
<li> Tab2 </li>
</ul>
</nav>
</div>
</div>
<div class="row">
<div class="tabs">
<div class="tab-pane" id="tab1">
<p>Short</p>
</div>
<div class="tab-pane" id="tab2">
<p>Long</p>
</div>
</div>
</div>
</body>
I have seen a lot of older answers to this question here, a lot of them suggest forcing the scrollbar to show, but I'd rather use js to insert padding to compensate for the scrollbar. I think facebook does something like this. I'm not really want to worried about IE support, as I am mostly focusing on finding a solution that I can understand with my rudimentary understanding of javascript.
Can anyone explain simply how to best compensate for the appearance/disappearance of a scrollbar with javascript?
Thank you so much!
Two ways come to my mind, first you can define body { overflow:scroll } for preveting sliding with scroll or second you can create your own scroll with scrollbar plugin and define scrollbar's css { position: absolute; right:0px; }. Note: relative to body or wrapper ofcourse.
body {overflow-y:scroll} worked perfectly for me when I had this issue
I wonder if there is any way to set one div container to full page (like a zoom, with no other elements of the page shown) and allow user to turn back to normal by doing a escape or click outside of the div element.
I use jQuery UI for this solution. It's really simple and straight forward.
Here's the Fullscreen working Demo of this effect
Here's the Fiddle broken down piece by piece
And of course, the code ->
The HTML ->
<div class="body">
Open Modal
<div class="overlay"></div>
<div id="modal" title="the modal"> Modal </div>
</div>
The CSS ->
body{
height:100%;
width:100%;
padding:50px;
}
.ui-widget-overlay{
z-index:10;
}
.ui-dialog{
z-index:20;
}
The jQuery ->
$('#modal').dialog({
'autoOpen' : false,
'modal' : true
});
$('#open-modal').click(function(){
$('#modal').dialog('open');
$('.overlay').addClass('ui-widget-overlay');
});
$(document).on('click', '.ui-widget-overlay', function(){
$(this).removeClass('ui-widget-overlay');
$('#modal').dialog('close');
});