hide div while the page is loading - javascript

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
});

Related

Jquery show div content onload and hide of the first click

I have created a side menu bar that menu items has id's 'h1-1', 'h1-2','h1-3' and so on. when first load the page I need to show the 'h1-1' content. so I've written code
$(document).ready(function() {
window.onload = $('#h1-1').show();
});
But here, when I click other menu item first, 'h1-1' content is still show on the page and clicked list item content showing below the 'h1-1' content .
However when I 'h1-1' itself first and then click other list items, it works fine (when I 'h1-1' itself first, 'h1-1' content still showing and then click other list item 'h1-1' content go away and show clicked item content).
I've tried to write hide the 'h1-1' content on the first click but then, 'h1-1' content is not showing even when click the 'h1-1' list item itself.
Can anyone suggest a way how can I solve this..
Fiddle Demo
You are relying on the content of curPage to hide the previous page, but you initialize it to "". Instead, set it to the first page.
var curPage="h1-1";
Updated fiddle
try this... all the codes are there.. I just updated your code.
$(function() {
var curPage="";
$("#menu a").click(function() {
$('#h1-1').hide();
if (curPage.length) {
$("#"+curPage).hide();
}
curPage=$(this).data("page");
$("#"+curPage).show();
});
});
$(document).ready(function() {
window.onload = $('#h1-1').show();
});
http://jsfiddle.net/M3ZhV/454/
I think you are complicating the things. Use a selector to get all elements to hide (jsFiddle).
$(function() {
$('#h1-1').show();
$("#menu a").click(function() {
var curPage = $(this).data("page");
$('.main div.content').hide();
$("#" + curPage).show();
});
});
Just change var curPage=""; to var curPage="h1-1";
$(function() {
var curPage="h1-1";
$("#menu a").click(function() {
if (curPage.length) {
$("#"+curPage).hide();
}
curPage=$(this).data("page");
$("#"+curPage).show();
});
});
$(document).ready(function() {
window.onload = $('#h1-1').show();
});
http://jsfiddle.net/M3ZhV/457/

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.

jquery accordion menu default closed on load

i'm trying to save up some space on my vertical accordion menu by making it more interactive.
i managed to get the menu to physically work and css styled as i need it.
problem is upon page load 1x category is "open" if i remove the class="open" style it doesn't hide the category.
this can be shown: jsfiddle (category 2 is my problem!)
i'm not at all comfortable with jquery so i'm not sure if this can be changed to default all categories "closed" until its clicked.
<script>
$(document).ready(function(){
$("ul.accordion span.name").click(function()
{
var $li = $( this ).parent("li").has("ul");
if( $li.hasClass("open") )
{
$li.find("ul").slideUp('slow', function( ){
$li.removeClass("open");
});
}
else
{
$li.addClass("open");
$li.find("ul").slideDown('slow');
}
});
});
</script>
can this be edited in the jquery script i would ultimetly like multiple drop down category but this will actually take more space up that the original.
inserted at the top this line in document ready function :
$('li.open').removeClass('open').find('ul').hide();
[http://jsfiddle.net/9kjpn4j7/][1]
DEMO: [1]: http://jsfiddle.net/9kjpn4j7/

HTML Divs show/hide issue

Hi friends I have issue with divs.
I have a link show/hide dive on my page on clicking which i have to show or hide specific divs.
I am successful with doing it.
But my issue is that whenever I click on that link div is get hide or shown but page get directly on the top & I have to scroll to down again.
I don't want to scroll this and don't want to get to top.
Please help me out with this.
Thank You in advance.
Update:
Friend I got the answer from one of my friend.
Actually I was using
Because of href="#" URL get changed and page got to top every time I click on that link.
Are you trying to do this?
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<div id="wrapper">
<div id="container">
</div><!-- end of #container div -->
<a id="showdiv">Show the div</a>|<a id="hideDiv">Hide the div</a>|<a id="toggle">Toggle</a>
</div><!-- end of #wrapper div -->
</body>
</html>
Here's the css:
#container {
width: 300px;
height: 300px;
background: red;
margin-bottom: 20px;
}
#wrapper {
margin: 40px auto;
width: 400px;
}
And here's the jquery
$(function() {// When document is ready, run this...
//Get hold of the link with the id #showdiv and do something when you click it
$("#showdiv").click(function() {
// Grab the div with the id #container and show it
// Alert me when you're done
$("#container").show(2000, function() {
alert("I'm done showing");
});
});
//Get hold of the link with the id #hideDiv and do something when you click it
$("#hideDiv").click(function() {
// Grab the div with the id #container and hide it
// Alert me when you're done
$("#container").hide(2000, function() {
alert("I'm done hiding");
});
});
// Toggle - This is like a On/Off Switch
//Get hold of the link with the id #toggle and do something when you click it
$("#toggle").click(function() {
// Grab the div with the id #container and show if hidden / hide if shown
$("#container").toggle(2000);
});
});
Of course you'd have to link to a copy of jQuery before using the script above.
Here's a link to a demo: http://jsfiddle.net/tonystark/HhNBA/
Assuming you have a link
Inline (not recommended but likely what you have)
<script>
function showhide(id) {
var elem = document.getElementById(id);
elem.style.display=elem.style.display=="none"?"block":"none";
return false; // MANDATORY
}
</script>
Toggle
<div id="someId">Show or hide me when you click a link</div>
You have to cancel the default behavior of the onclick handler of your link. For doing so, don't use return false in your click handler, but rather use event.preventDefault():
HTML:
hide me
<div id="#targetdiv">blah</div>
Javascript:
document.querySelector('a.foo').onclick = function(event) {
try {
document.querySelector(this.getAttribute('href')).style.display = 'none';
} catch (e) {
console.error("couldn't find element to hide");
}
event.preventDefault();
}
JQuery:
$('a.foo').click(function(event) {
try {
$($(this).attr('href')).hide();
} catch (e) {
console.error("couldn't find element to hide");
}
event.preventDefault();
})
More informations:
http://www.quirksmode.org/js/events_early.html
http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/
It happens because your link is pointing to something like #foo or just #, whereas it should not have a href (or have an empty one)...
remove the href attribute and apply a text-decoration style
<a style="text-decoration: underline;" title="click me"></a>
that'd seem to make more sense than applying an href you dont want, to block its normal operation later. an alternative for graceful degradation would be to use the href to point to the shown/hidden div, displaying normally by default and having javascript hide it where javascript is available.
"Change your anchor (link) to a span so that it doesn't have that behaviour. Then, style it using css so it looks how you want it to look."
i often use that techique. i.e., use a span or div with an onclick, styled with text-decoration: underline, cursor: pointer and possibly display: inline if you decide on a div. one caveat is that in IE6, css hover won't work on anything other than an anchor. that's easily fixed with javascript.
you could probably remove the href attribute completely. anchors have advantages as above (cross-browser :hover styles) and allow for a title attribute for tool tips etc.
you probaby have a # in href attribute like href=# please remove hash and instead of that write href='javascript:void(null);'

Javascript/Jquery alternative to "display:none"?

I have a menu that shows or hides content when you click menu items. The JQuery looks like this:
$(document).ready(function() {
$("#bioLink").click(function(){
$("#about").show(1000);
$("#portfolio, #contact, #expand").hide(1000);
}); // end bio-click
$("#portfolioLink").click(function(){
$("#portfolio").show(1000);;
$("#about, #contact, #expand").hide(1000);
}); // end portfolio-click
$("#contactLink").click(function(){
$("#contact").show(1000);
$("#about, #portfolio, #expand").hide(1000);
}); // end contact-click
}); // end ready
In an older version of the site, all content is hidden when the page first loads, with this CSS rule:
#about, #portfolio, #contact {
display:none;
}
That CSS now wreaks havoc with a carousel I have since installed in the portfolio section.
Is there something I can do with the script to hide the content upon loading? Given that the existing script doesn't interfere with the carousel, this could be a proper solution.
There's several options to hide content on a page.
display: none;
This is the one you're currently uses, which collapses content (i.e. the element doesn't take up any space on the page.
visibility: hidden;
This hides content, but doesn't collapse, so the element while not visible still takes up the same amount of space on the page (useful if you want to hide and show elements in a list or navbar without making things jump back and forth).
opacity: 0;
Similar to visibility hidden, but still allows a user to trigger events or tab to the element.
There's a couple others, but these are the main three that would be useful. Would you mind elaborating on the wreaking havoc part? It's a bit difficult to provide you with the right tools given the problem is a bit vague.
Simply initialize the content IDs to be initially hidden on document load like this:
$( document ).ready(function() {
$( "#about, #portfolio, #contact" ).hide();
});
Then let the conditional script follow this to show and hide as ordered by the click event. Initializing the hide allows for other things to work without your script trying to run at the same time. <-- not sure if I explained that correctly

Categories

Resources