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.
Related
I have a basic script which shows/hides a div. I'm using this for a drop-down menu.
https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
I'm looking for the div element to be hidden when the page loads instead of it showing and having to click it to toggle it.
Any help is appreciated!
Use display: none in div like below
<div id="myDIV" style="display:none">
This is my DIV element.
</div>
or you can create a class and assign to the div.
<style>
.hide{
display:none;
}
</style>
<div id="myDIV" class="hide">
This is my DIV element.
</div>
Instead of CSS, you may also use JavaScript to manipulate the display of a web page by taking advantage of events, such as onload.
window.onload = function(){
document.getElementById("myDIV").style.display='none';
};
<div>
This is the first DIV element.
</div>
<div id="myDIV">
This is the 2nd DIV element.
</div>
<div>
This is the last DIV element.
</div>
Using the following methods, you tell the browser to ignore these elements on the page.
Use display none on the element eighter in HTML, or in CSS files.
<div style="display: none">
This is my DIV element.
</div>
Attribute hidden is also helpful.
<div hidden>
This is my DIV element.
</div>
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");
}
});
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 hidden div which I reveal with the jquery fadein() method:
$("#panel").fadeIn("slow");
and here's the html:
<div id="panel" style="display:none;">
<hr/>
<p>text</p>
<button onclick="cancel()">cancel</button>
</div>
The text and the button within the panel is shown properly when the method is called but the hr stays hidden. Its display property is none according to firebug.
Why the HR is not shown together with the other elements? It's jquery 1.3.2
I copied your markup and jQuery, and it fades in fine for me. However, if I add the following CSS rule, it does not fade in correctly...
hr { display: none; }
So you must have this rule somewhere. Remove it and your fade will work as expected.