I am making a div which should be hidden when the page loads, then visible once the user clicks a link. The code below works in FF / IE7 / IE8 but not in IE9, where the div is visible at all times ( without content ). Thanks in advance!
<script>
$(document).ready(function() {
$('#translateBoxen').hide();
$('#translateToggle').click(function() {
$('#translateBoxen').toggle(400);
return false;
});
});
</script> // This is the jQuery code to hide and toggle the div //
<div style="width:200px;height:100px;position:absolute;"> // Just a holder that's needed for the site
<a class="vitxtext" style="font-size:10px;" id="translateToggle" href="#">
Translate
</a>
<div style="clear:both;"></div>
<div id="translateBoxen">
// BOX CONTENT //
</div>
</div>
Why don't you hide the <div> with CSS? Just set to to display:none in your CSS, then when the toggle link is clicked for the first time it should be shown.
There is no reason why toggle() should not work in IE9, are you getting any script errors?
Late to the party, but try making a .hidden class with display:none, then hiding/showing by putting addClass('hidden') and removeClass('hidden') instead of show/hide.
Related
I currently have a div in my HTML that is initially hidden (using display:none).
<div class="fulladdress">
<p>Only display the contents of this div when an element is clicked!</p>
</div>
I then use the following Javascript so when the .autocompleteitem item is clicked, it displays:
$(document).ready(function() {
$(document).on('click','.autocompleteitem:not(.autocompleteitemwithcontainer)',function(){
$("div.fulladdress").show();
});
});
However, if Javascript is disabled, the full address will never display. How do I resolve this?
Maybe try working with the tag <noscript>. It runs the code inside it if the javascript is disabled.
Use following HTML code. Now user can see the div when javaScript disabled by user or device not support javaScript. You can customize your div by select .fulladdress class on CSS.
<noscript>
<div class="fulladdress">
<p>Only display the contents of this div when an element is clicked!
</p>
</div>
</noscript>
You can try something like this.
If javascript enabled - Hide div on document ready and then show on click event
If javascript disabled your document ready function wont execute and it wont hide the div
$(document).ready(function() {
$("div.fulladdress").hide();
$("#button").on('click',function(){
$("div.fulladdress").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fulladdress">
<p>Only display the contents of this div when an element is clicked!</p>
</div>
<div class="button">
<button id="button">display</button>
</div>
Try this
<noscript>
<style type="text/css">
.pagecontainer {display:none;}
</style>
<div class="noscriptmsg">
You don't have javascript enabled.
</div>
</noscript>
If you absolutely have to have your div hidden at first even with JavaScript disabled and only then revealed, then there are some ways to deal with it.
You can detect if JavaScript is disabled and request the user to enable it, and not show the page unless the user does so. How to detect if JavaScript is disabled?
You can use CSS properties to show/hide .fulladdress on hover instead of on a click (you might want to modify your div for that, or put it inside a <noscript> tag).
You might want to use 'hacks' to detect a click without using JavaScript. Here are a few examples:
Show / hide div on click with CSS
What is the simplest way to implement pure css show/hide?
Hope this helps!
I have a CSS modal on my page that is automatically hidden by JS until a Sign Up link is clicked. My problem is that when the page loads, the modal briefly flashes before being hidden.
I have used JS Hide function on the modal but am unsure of how to prevent the flash on page load, without disabling the ability for it to show on sign up click.
Modal HTML:
<div id="openModal" class="modalDialog">
<div>
X
<header><h2>Header</h2></header>
<form><p>Form Contents</p></form>
</div>
</div>
Hide (and reveal on click) JS:
<script>
$(document).ready(function(){
// Hide Modal by default
$('#openModal').hide();
// Show Modal on click of Signup
$('#signup').click(function(){
$('#openModal').fadeIn(500);
});
// Hide Modal on click of Close
$('#close').click(function(){
$('#openModal').hide();
});
});
</script>
Your help is greatly appreciated.
D
Simple solution would be adding display: none to your .modalDialog class. Then you won't have to hide it by default ($('#openModal').hide(); line will not be necessary) and jQuery's .show() will override css.
Style atribute:
<div id="openModal" class="modalDialog" style="display: none;">
<div>
X
<header><h2>Header</h2></header>
<form><p>Form Contents</p></form>
</div>
</div>
or:
var $ = typeof (jQuery) === 'function' ? jQuery : typeof ($) === 'function' ? $ : false;
if ($ && $('#openModal').length) $('#openModal').hide();
$(document).ready(function(){
//...
});
Use css display:none to hide the modal.
The problem is from this part of your code
$(document).ready(function(){
$('#openModal').hide();
});
This is waiting that all the html has loaded before firing your code, so hiding your modal.
JQuery hide function is adding an inline style to your element display:none so you could add this inline style yourself on the dom element to avoid this flash
<div id="openModal" class="modalDialog" style="display:none">
<div>
X
<header><h2>Header</h2></header>
<form><p>Form Contents</p></form>
</div>
</div>
I have a parent div that is initially hidden. Inside the div I have an easyui accordion div. When I called the show() method on the parent div, the easyui div displays with a width of 0px. If the div isn't initally hidden, it calculates a width fine.
Does anyone know the proper way to initially hide a div and then when showing it calculate the proper width?
<div id='masterDiv' style='display:none;'>
<div class="easyui-accordion" style='height:475px;' data-options="border:false" >
<div title="Overview" class='accordionPanel' data-options="iconCls:'icon-no'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Checklist" class='accordionPanel' data-options="iconCls:'icon-no'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
</div>
</div>
<script type='text/javascript'>
$(document).ready(function(){
$('#masterDiv').show();
});
</script>
hey i ran into the exact same problem for the exact same reason as the comment you made. I ended up doing the display:none then manually added each css change that was made. First i made the masterDiv into a class
$('.masterDiv').css("display", "block");
$('.masterDiv' .accordian).css('width', '300px);
accordian being whatever the class easyUI set to a width of 0px. It ended up being a lot of css code but it works until Jquery EasyUI can come up with something.
Why you are hiding the div, if it has to be shown after pageload ?
Did you try
document.getElementById("masterDiv").style.display="block";
I have a page on my website called printUsers.html.
On it there is a button which prints the page using 'javascript:window.print()'.
I am also using '#media print' on the page to hide some buttons when the page is printed.
This is all working well and I have no problems here.
The problem is the following:
All the pages on the site, extend from the main page. So at the top of printUsers.html I have:
#{extends 'App/main.html' /}
This includes styles and a header which has buttons and drop-downs.
When the user clicks the print button, I want to hide all the header and buttons etc, which come from the main.html.
I tried wrapping it into a div, giving it an id and hiding it but this didn't work.
I have just started using javascript so any help would be much appreciated.
Thanks.
The CSS way
#media print
Use #media Print as you stated in your question, but include all the elements you don't want to see in your printed result, and put display:none to them. You can also apply some margin:0 auto; text-align:center; to your main content if you want to center it into your page.
Edit: You can hide any element, such as header this way:
header
{
display:none;
}
footer
{
display:none;
}
The Javascript way
Button's onClick
Your button's onclick:
Button onClick()
<button id="printThatText" name="printThatText" onclick="printPage();">Print this page</button>"
Your javascript code in the header (or at the end of the page)
Javascript
function printPage()
{
var myDropDown = document.getElementById('myDropDown');
myDropDown.style.display = "none";
//Whatever other elements to hide.
window.print();
myDropDown.style.display = "block";
return true;
}
You could also put all of these elements in an array and make a for ... in ... loop to show/hide them.
Wrap the contents with an element that encapsulates all of stuff you want to hide. In the print CSS, set the display to none.
The CSS:
#media print {
#myHeader, #myFooter { display: none }
}
The HTML:
<div id="myHeader">
<ul>
<li>
<a>My link</a>
</li>
</ul>
</div>
<div id="myContent">
<p>This will print fine</p>
</div>
<div id="myFooter">
<p>This will not print</p>
</div>
You could always use HTML5 header/footer elements!
Maybe try the opposite--print only a particular div--rather than hiding other divs: Print <div id=printarea></div> only?
I've got a sticky footer at the bottom of the webpage / viewpoint as well as clickable link "toggle menu" that SHOULD hide / show the menu. Problem is that I can't get the menu to hide and I've picked up that the problem lies within the CSS of the element that is supposed to hide / show. It's the fixed position {position:fixed;} ... When I remove "fixed" out, then the hide and showing of the menu works 100% but obviously the menu is no longer at the bottom of the browser.
How can I get work this with the fixed positioning?
Javascript to show/hide goes like:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").show();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
HTML Goes like:
<div id="stick_footer_title"><a class="show_hide" href="#">Toggle Menu
▼</a></div>
<div class="slidingDiv">
<div id="stickyfooter">
<ul id="footer_menu">
<li class="imgmenu"></li>
<li>Intro</li>
<li>Photos</li>
</ul>
</div>
</div>
FYI: The position:fix; css applies to the STICKYFOOTER div
what if you hide the "stickyfooter" div, instead of the container?That way, the container will always be fixed (and shown), but when you hide the content, it will have nothing shown in it.
Can you try giving a duration parameter?
Like this:
$(".slidingDiv").slideToggle("slow");
Move position fixed from #stickyfooter to .slidingDiv if you can, or create a new element inside #stickyfooter that you'll hide/show.