I have two divs...
<div class="row">
<div id="general" class="col-sm-4">
<p>General content.</p>
<p id="show">Open extra content.</p>
</div>
<div id="extra" class="alert alert-info col-sm-8">
×
<p>Here is the extra content!</p>
</div>
</div>
The general content div should always show, and the extra content div should show when the #show paragraph is clicked.
As you can see, the general div is 1/3 of the page, and the extra div is 2/3 of the page (when opened).
I want the general div to fill the whole width of the page when the extra div is closed, and fill the ususal 1/3 when it is open, making it behave like this...
How would I do this with jQuery / Javascript / CSS3?
I think if you will change div #general class, resolve it.
Firstly when #extra closed, #general set class="col-sm-12" and use this code;
$("#general").click(function(){
$(this).toggleClass('col-sm-12 col-sm-4');
$("#extra").show();
});
and you can use again this code when div #extra close.
Initially add col-sm-12 class to your #general so that it shows fully and hide the #extra div with hide class. Then on the button click, with jquery swap the classes to display #extra div.
$("#show").on('click',function(){
if($("#extra").hasClass('hide')){
// in case its already hidden
$("#general").removeClass('col-sm-12').addClass('col-sm-4');
$("#extra").removeClass('hide').addClass("show");
} else {
// in case its already visible
$("#general").removeClass('col-sm-4').addClass('col-sm-12');
$("#extra").removeClass('show').addClass("hide");
}
});
Related
I am using JQM and I have a situation where I have HTML generated dynamically. It's possible, even probable that the same HTML will be used in more that one place on the page. I have a div with data in it that I only want to be displayed when the user clicks the header div. IE:
<html>
<head>
<style>
</style>
<script src="/js/jquery.js"></script>
</head>
<body>
<div onclick="$(this).children('div:first').toggle();">This is Div 1</div>
<div style="display:none">
<p>I'm hidden</p>
</div>
</div>
</body>
</html>
What I'd like to do is when the user clicks on the Click Me link the child toggles its display on and off. Any thoughts on how this can be accomplished without some convoluted ID scheme? (I've thought of at least two).
According to the code you posted, the div containing "I'm hidden" is not a child of the first div.
You can use $.eq() to select a specific children index: https://api.jquery.com/eq/
<div onclick="$(this).children('div').eq(0).toggle();">
This is Div 1
<div style="display:none">
<p>I'm hidden</p>
</div>
</div>
See working JSFiddle (with "hidden div" child of Div1)
If you need to toggle visibility of a sibling, you can use $.siblings() https://api.jquery.com/siblings/ or $.next() https://api.jquery.com/next/
<div onclick="$(this).next().toggle();">
This is Div 1
</div>
<div style="display:none">
<p>I'm hidden and I'm a sibling</p>
</div>
See JSFiddle2 (hidden div sibling of Div1)
you can tie an event to the Click Me and in javascript/jquery, find the first child div after "this" (the div that was clicked). Something like this:
$(this).children("div:first");
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 problem when hiding/showing certain elements in IE8. If an element with display:inline-block has any child (including nested children) with display:block, then any child of that element has problems when hiding/showing. The page does not redraw correctly, and other elements position do not change to reflect the newly hidden/shown elements.
The minimal markup that shows the problem is below. In the example, when you click 'Clickable element', then the three divs directly below are hidden. However, the Footer Div does not change position - a large gap is left. If you do something to force a page redraw, such as selecting all text on the page, then the footer jumps to the correct position.
Something similar happens when showing the elements. Instead of the footer div being pushed to the bottom, it is overlapped by the newly shown elements.
<div style="display:inline-block">
<div>
<!-- Any number of other HTML elements -->
<div style="display:block">
<div class = "clickable" >Clickable element.</div>
<div class = "toggleable">Hideable element 1.</div>
<div class = "toggleable">Hideable element 2.</div>
<div class = "toggleable">Hideable element 3.</div>
</div>
</div>
</div>
<div>Footer Div</div>
<script type="text/javascript">
$('.clickable').click(function(){
$('.toggleable').toggle();
});
</script>
I've been trying to break this down for a fair while now, and I'm almost certain that I've got the minimal problem down (inline-block element followed by block element, and perform a show/hide on a child element). Has anybody encountered this before - or any suggestions on how to work around this?
This should do the trick. As the answer below states, inline-block isn't supported in older browsers and shows some quirky behaviour in certain versions of IE8. I've remembered this fix from something I did a while back, but I'm sorry, I can't give you a full explanation as to why this is happening. Anyhow, add a float to your main div, and clear your footer and, fingers crossed, it should work.
<div style="display:inline-block;float:left">
<div>
<!-- Any number of other HTML elements -->
<div class="div-2" style="display:block">
<div class = "clickable" >Clickable element.</div>
<div class = "toggleable">Hideable element 1.</div>
<div class = "toggleable">Hideable element 2.</div>
<div class = "toggleable">Hideable element 3.</div>
</div>
</div>
</div>
<div style="clear:left">Footer Div</div>
Seems to be working fine in here... But note that IE8 have some problems rendering jquery, and the css property 'inline-block' is not really supported by old browser versions (ie7, doesn't work, ie8, i'm not sure). Try adding the "zoom:1;" fix to the css of your tags that have the inline-block going on. Hope that helps somehow.
I'm using Jqtouch to design a iphone app.
As I'm using a standard header/toolbar at the top, I want to simply have it fixed there without moving. I found out how to do this by creating a div with class toolbar and setting CSS display to block and min-height to 0px with important.
However, when it starts up and every time I change pages (technically, it's making different divs display and not display(?)), it autoscrolls to the top of the div that it just changed to, and I need to scroll up to see the toolbar (the toolbar is at the very top, above the div).
How do I make it actually scroll up to the toolbar or top of the page?
Here's a simplified layout of my current code: (For body section)
<body>
<div id="toolbar" class="toolbar" style="display: block; min-height: 0px !important;">
<h1>Header</h1>
<a class="button" href="#">Button</a>
</div>
<div id="home" class="current">
<!--Content in here-->
Link to next page
</div>
<div id="next">
<!--Content in here-->
</div>
</body>
I am not entirely sure I got your question, but It sounds like you want to have an element with "fixed" position. If that's the case, you may want to try the solution I posted for this question.
I have seen some answers to this but I think I am actually having a CSS issue.
Here is a sample fragment of my HTML:
<id=container> children <id="modal">children</modal></container>
If I pop open the modal there is a print button. When I click it I use jQuery to apply a .noprint to #container and .print to #modal. But the .print to modal is disregarded, no matter what selector I apply I can't get the modal content to appear. What's worse, I cant use firebug, it is not showing me what print styles are being applied. I have tried
#container #modal.print {display: block; } etc...
thanks!
From the sound of it, your modal element is inside of the container. I'm guessing you have markup like this.
<div id="container">
<span>children</span>
<p>more children>
<div id="modal">
Modal text!
</div>
</div>
And CSS like this...
.noprint { display: none;}
.print {display: block;}
Which you use JavaScript to apply, like this:
<div id="container" class="noprint">
<span>children</span>
<p>more children>
<div id="modal" class="print">
Modal text!
</div>
</div>
In these examples, the #modal element is inside of a hidden container. The CSS spec dictates that if a parent element is hidden, all children will be hidden also, even if they are set to display: block (or any other valid display value) or are absolutely positioned.
What you should do if you want to hide everything on the page except for your modal window is get your markup to be structured something like this:
<div id="modal">
Modal Text!
</div>
<div id="container">
<span>children</span>
<p>more children>
<div id="modal">
Modal text!
</div>
</div>
If you have no control over where the modal element is rendered, you can use jQuery to re-position the modal element. Keep in mind that this may impact your modal window's layout:
// Moves the element outside of the hidden container
$("#container").before($("#modal"));
There is another way to print modal window contents. Add this function to modal window
Print contents of ModalPanel
I have tried this and it works. You only need to play around with stylesheets.