Develop Reference

Initiate TwentyTwenty.js after a div is shown thru a click

I'm hiding a div until a button is clicked thru this script:
$(document).ready(
function() {
$(".openthis").click(function() {
$("#yalecontent").show("slow");
});
});
but I'm also using TwentyTwenty inside that div and after I clicked the link to show the div, the TwentyTwenty content doesn't have any height so it's not showing up. How can I make it show up? This is my script for twenty twenty:
$(window).load(function() {
$("#container1").twentytwenty();
});
Here's a jsfiddle. Note that I can't make twentytwenty to work in here and I'm not sure why. It's working in my localhost but I just want to show how I made the structure.

First of all don't hide '#yalecontent' div by css.
$(document).ready(function() {
$("#container1").twentytwenty();
// hide here after twentytwenty load in this div.
$("#yalecontent").hide("fast");
$(".openthis").click(function() {
$("#yalecontent").show("slow");
});
});
Try this one it may be solve your problem.

All the contents (of other pages) of my website sits under the same tab unless an user clicks on the tabs

I am having an issue with my newly published website. As soon as the site is loaded it shows all the contents including paragraph, videos (from other pages as well) etc.. under one single tab (in my case it HOME tab). But once any tab is clicked its fixed automatically. Please look here.
So, it's a problem! I want the contents previously fixed (shouldn't wait for an user click).
Now I am well aware of my design. I haven't used multiple pages link. I stored everything in my main index file and used the following jQuery code to just redirect them to the corresponding section (after clicking a corresponding tab):
Please help me to improve the code so that my page loads as I want.
I guess my issue is related with this piece of code:
/*Make the tabs work-begins*/
$(document).ready(function(){
$('#all_contents>div').filter(':first').show();
$('ul>li>a').click(function () {
$('#all_contents>div').hide();
var $this = $(this);
var target = $this.attr('href');
$(target).show();
return false;
});
});
/*Make the tabs work-ends*/

Hide all the divs and then show only the first div inside #all_contents. This should do the trick:
/*Make the tabs work-begins*/
$(document).ready(function(){
//Hide all divs first
$('#all_contents>div').hide();
//Then show only first
$('#all_contents>div').filter(':first').show();
$('ul>li>a').click(function () {
$('#all_contents>div').hide();
var $this = $(this);
var target = $this.attr('href');
$(target).show();
return false;
});
});
/*Make the tabs work-ends*/

If you want to hide all of the contents initially then you should apply the css styles added by clicking home to your html rather than applying it on js load:
$('ul>li>a').click(function () {
$('#all_contents>div').hide();
var $this = $(this);
var target = $this.attr('href');
$(target).show();
return false;
});
});
So this hides all pages except the one which was clicked by adding the style display:none; inline to all of the selected elements. Because tehy aren't hidden on page load, the site only works after clicking on a link. You should do the same, but add the style as a rule in your css rather than in-lining:
#all_contents > div {
display:none;
}

hide div while the page is loading

I have two "ul" list. With javascript a remove childrens from the second list and add inside the first ul list. But while the page is loading the second menu appears unstyled. see here and the web
Here is the code. #main-menu and #section menu are the ul lists:
//dinamyc main menu
if( $('body').hasClass('page-template-templateshome-page-php') ){
$('#section_menu').children().each(function(i, e){
var firstLi = '#' + $('.navbar').next().attr("id");
$('.home .menu-item-home a').removeClass('external').attr( "href", firstLi );
if($('#main-menu div ul li').is($(e).insertAfter('#main-menu ul li:eq(0)'))){
$(e).insertAfter('#main-menu ul:eq(0)');
}
$('#section_menu').css('display','none');
});
}else{
$('#section_menu ').children().remove();
$('#section_menu').remove();
}
CSS:
#section_menu { display:none; }

<div id="hidden-during-page-load">Loading...</div>
$(window).load(function(){
// this will ensure that all content has loaded before the div is shown
$("#hidden-during-page-load").show();
});
#hidden-during-page-load {
display:none;
}

try like this
<div id="mydiv" style="disply:none">somedata</div>
then make that div whenever you want. If you want to show it in page load,
$(document).ready(function(){
//after executing some functions
$("#mydiv").show()
});

Have you tried puting a breakpoint inside your each function?
That'd confirm that that process is causing the glitch. (or you can also add a small delay in it)
Put the breakpoint and do what you've been doing so far, if the menu remains that way until you let it continue, it means you need to change your logic: Hide the menu during processing and only show it when the process is complete.

You could create a css rule to hide the second list for example:
.hidden-list {
visibility: hidden
}
If after loading you want to see the second list, just listen to the ready event and remove the class.
$(document).ready( function($) {
$('ul').removeClass('hidden-list'))
// Do something else if needed
});

content not showing when clicking nav

I'm trying to figure out why my jquery isn't working correctly. I click on my navbar link and the content space shows for .0923202 of a second and goes back to be hidden. Thank you.
$(document).ready(function() {
$(".content").hide();
$("a").click(function() {
$(".content").show();
});
});
http://jsfiddle.net/NHgpg/

While anchor tags are meant to send users to another page, you're using it to show new content on the page. You will want to return false to override the default behavior of the anchor tag
$(document).ready(function() {
$(".content").hide();
$("a").click(function() {
$(".content").show();
return false;
});
});

Using JavaScript to switch through tabs without changing layout?

My webpage is at http://sarahjanetrading.com/js/j/index.html
I have done all the layout and coding. I want the tabs to toggle when clicked over them. I tried google but was in vain. I am willing to achieve the effect using either JavaScript or jQuery. My tabs are empty right now, And I want the layout to remain the same.
NEW :
This is my code so far:
<script type="text/javascript">
var lis = $('#main-tabs li');
lis.click( function() {
//Reset all the tabs
lis.removeClass('active-tab').addClass('inactive-tab');
$(this).addClass('active-tab');
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".tab-content").hide();
$("ul#main-tabs li a:first").addClass("active").show();
$("#wrap > div").hide().filter(":first").show();
$("ul.tabs li a").click(function() {
$("ul.tabs li > a").removeClass("active");
$(this).addClass("active");
$("#wrap > div").hide();
var activeTab = $(this).attr("href");
$(activeTab).show();
return false;
});
});
</script>
For the full HTML and JavaSript code (new) please go to http://sarahjanetrading.com/js/j/index.html
What it does is that when I click on a list item, it changes the tab, but not the content. And when I click on the anchor of a list item, it changes the content, but not the tab. I want both the content and the tab to change consistently.
Thanks

jQuery UI is probably the best solution. You can use the .tabs()
to accomplish what you are trying to do. You can also edit the layout easily by using ThemeRoller.

This quick test is working pretty well
var lis = $('#main-tabs li');
lis.click( function() {
//Reset all the tabs
lis.removeClass('active-tab').addClass('inactive-tab');
$(this).addClass('active-tab');
});
Of course it doesn't consider the content of the tabs, but it's a start :)