I have about 20 tabs which are placed underneath the content (not on-top as usual) with large content (forms,inputs) on each tabs.
Problem is that when the users visit the site, they see all the content before the tabs hide. Is there a way to prevent this? I am using jQuery tabs as simple as:
$(window).load(function() {
$(".tab_content").hide();$(".tab_content:first").show();
});
I was thinking if there is a way to hide .tab_content without jQuery? So I can load jquery at the end asynchronously. I would imagine, loading jquery and then hiding tabs takes time. But yet again I was thinking that, in order to hide .tab_content you need the content so, maybe there is no way around it?
Thanks alot
the hide comes into play after the DOM is ready or the element you are applying hide is inside the DOM so a better way is to add a class that hides the element
.tab_content
{
display: none
}
and
$(function(){
$(".tab_content:first").show();
});
If you simply want to hide then you can use pure CSS:
.tab_content{
display:none;
/* or */
visibility:hidden;
}
Once your page has loaded and jQuery is ready you can then show it as required.
Use CSS to hide the tabs by default:
.tab_content { display: none; }
Show them when ready.
You can prevent showing them by default using css.
.tab_content { display: none; }
the best way is to do it in css, that way it will never show up when the page loads
.tab_content { display: none }
Related
I am using Bootstrap for css and I need help in fading out a div when the class 'hidden' is toggled.
My site structure is pretty simple: there are 3 main container divs: search, wait and show. Essentially, show is the lowest positioned one, wait is on top of show and search is at the very top.
All I need is for search to fade out over 3 seconds when this Jquery event is fired:
$('.search').toggleClass('hidden');
I don't want it to just instantly disappear. Same with the wait div. I have tried using
$(".searchBar").fadeOut("slow", function() {
$('.searchBar').toggleClass('hidden');
});
But it doesn't work. The fadeout/fadein don't seem to have any visible effect. Since the hidden class is already in bootstrap, I do not want to create another custom one; there's got to be a way to accomplish this.
Bootstrap hidden class is:
.hidden {
display: none;
visibility: hidden;
}
You can easily achieve this:
$('.searchBar').toggle( "slow");
Use something like this:
$(".searchBar").fadeOut("slow", function() {
$('.searchBar').addClass('hidden').show(0);
});
I have a content slider on a page and I want to allow site visitors to print the contents of only the slide they click on. I have 7 slides and two of them have a button within the slide that says, "Print Contents". Each slide content is contained within it's own div.
I've successfully used a print specific style sheet before, but am not sure how to set varying print rules for one document. Is there some kind of JavaScript or jQuery I can apply? I am a novice with both but am willing to give anything a try.
Here is a similar question on SO but no answers; this one is close but I need to maintain CSS styles.
any help is appreciated. Thank you!
Set up a CSS rule for your main elements:
#media print {
div.main-element: display: none;
Then add another rule:
div.main-element.print-me: display: block;
Now you can add a "print" button to each section of content, and have a handler adjust the classes appropriately:
$('body').on('click', '.main-element button.print', function() {
$('.main-element').removeClass('print-me');
$(this).closest('.main-element').addClass('print-me');
window.print();
});
I used jQuery shown here (https://stackoverflow.com/a/6967175/1130782) to get the links on my page to show/hide 3 different divs, as seen here: http://ikstudio.squarespace.com/lightfield/
I needed all of the divs to be hidden initially, so I removed the #showall function and added
jQuery('.targetDiv').hide();
to hide all the divs initially. Doing this broke the javascript gallery I am using inside of .
I am assuming that this is because the page loads with that div hidden and the gallery script can not properly position everything it needs to.
Is there anyway to resolve this?
Thanks
Can you not hide them with CSS?
.targetDiv {
display: none;
}
I have run into a small problem I have not encountered before: I use javascript (jQuery) to show different sections of information in tabs on a web-page. So what I´m doing, is hiding the tabs that are not being viewed and only showing the tab that is being viewed.
This works very well, but now I am adding a print-specific style-sheet and I want to print the information of all tabs and not just the one being viewed.
How can I undo the javascript hiding of these sections for the print style-sheet?
Edit: Some additional information:
I am using jQuery to hide all div.tabs sections and in my print style-sheet I have set:
.wrapper div.tabs sections {
display: block;
}
assuming that the higher value of .wrapper div.tabs sections compared to div.tabs sections would make the sections visible. But it doesn´t...
The best approach would be to change the JavaScript so that it modified the classes that applied to the elements and didn't modify .style.display. Then you could target elements with those classes differently with the screen and print media stylesheets.
The quick and dirty approach would be to use !important in your print media stylesheet.
All you really need is CSS. Just define some things that show when printed.
Heres and example:
#media print {
div.print_show{ dispay: block; }
span.print_show{ display: inline; }
.print_hide{ display: none; }
}
You can add an extra class to add display:block to your print.css..
I just saw a demo that had this jquery code to show and hide a dive on hover, can't this be done with just regualr css though? And if you can do it with css is there any advantage of doing it with javascript?
$('.comment').hover(function() {
$(this).children('.delete').show();
}, function() {
$(this).children('.delete').hide();
});
CSS hover works fine with anchor tags, but IE6 does not recognize hover events on things like li tags.
If you were using an anchor tag, however, you could achieve the same effect in CSS:
a.comment .delete { display: none; }
a.comment:hover .delete { display: block; }
You can do this with CSS but IE6 only supports the :hover pseudo-class on anchor tags (A), so it's not as common.
Jody is correct. Check out the docs for the CSS Display property.
There is more functionality that the .hover will do. If you provide it more than 2 functions it will cycle through all the functions.
Example
$('.comment').hover(
function(){$(this).children('.delete.first').show()},
function(){$(this).children('.delete.first').hide()},
function(){$(this).children('.delete.second').show()},
function(){$(this).children('.delete.second').hide()}
);
That would show one set of children the first time they hover, then hide, and the next time show a different set of children.
The hover function also works over multiple elements, and only fires if the mouse has left all the elements (not just when it leaves one and moves to another)
I dynamically create something like this on the server side. I'm sure there is a more efficient/prettier way but this usually serves my needs. Basically hides all the divs and un-hides the one that needs to be shown (passed as arg in function from onClick event).
function toggleTab(id)
{
document.getElementById('divEnrollment').style.display='none';
document.getElementById('divSearch').style.display='none';
document.getElementById('divMeeting').style.display='none';
document.getElementById('divBenefit').style.display='none';
document.getElementById('div' + id).style.display='block';
document.getElementById('spnEnrollment').style.color='blue';
document.getElementById('spnSearch').style.color='blue';
document.getElementById('spnMeeting').style.color='blue';
document.getElementById('spnBenefit').style.color='blue';
document.getElementById('spn'+id).style.color = 'red';
}