I have this markup:
<div class="container" id="logo" style="text-align:center;">
//other loading stuff
Enter Website
</div>
<div id="content">
//main content
</div>
At the top before the closing head tag I have:
<script>
$(function() {
$('#enter').hide();
});
$(window).load(function() {
$('#enter').show();
});
</script>
And at the bottom I have (before the closing body tag):
function EnterSite() {
$("#enter").click(function(){
$("#content").show(2000);
});
}
and CSS:
#logo {
z-index: 99;
}
#content {
display: none;
}
But it just shows the logo div and clicking on the Enter Website link does nothing.
what I want to do is show the logo div till the page is loaded (window.load) with the Enter Website link hidden. Once the page is loaded then show the link which on click will show the content div
The problem is you are using an onclick handler, to bind a new click handler using jQuery. The new click handler won't fire first time you click on the <a> tag, because the event has already happened.
Either remove the onclick from markup and just use
$(function(){
$("#enter").hide().click(function(){
$("#content").show(2000);
});
})
Or change to:
function EnterSite() {
$("#content").show(2000);
}
I suggest using first solution and avoid mixing inline script and jQuery to keep all your script unobtrusive and easier to maintain
Try this:
$(window).load(function () {
$('#enter').show();
});
$(document).ready(function () {
$("#enter").click(function () {
$("#content").show(2000);
});
});
Fiddle here.
Related
I want to hide the all the content when page is load.
It work on icon when i click on icon it is hiding the content but i need to hide the content when page is load here is my java script code,
$(document.body).ready(function(){
$(window).on('load', function () {
$('.hide_class_name').hide();
})
$('.icon_class_name').on('click', function(event) {
$('.hide_class_name').toggle('hide');
});
});
Can anyone help me Thanks in advance.
You can add a class to the body tag which will hide it's content
CSS
.hideBody{
display:none
}
HTML
<body class = "hideBody">
//Rest of Code
</body>
Now you can use document.readyState to check if it is complete state
JS
if(document.readyState ==='complete'){
document.getElementsByTagName('body').classList.add("hideBody")
}
Use document.onreadystatechange to describes the loading state of the document.
document.onreadystatechange = function () {
if(document.readyState ==='complete'){
document.getElementsByTagName('body').classList.add("hideBody")
}
}
I'm including a widget in a page using PHP. The widget includes the following jQuery code, which is making all links open in an external page. Is there any way to override or neutralize this code so it no longer affects all links on the page?
Ideally, I'd like to wrap the widget in a div and specify those links to open in a _blank.
I am new to jQuery, so I appreciate any help offered.
$(document).ready(function() {
// change all links to open outside iframe
$("a").each(function(index) {
$(this).attr("rel", "external").attr("target","_blank");
});
});
If you do as you say and wrap your widget in a div like this:
<div class="container">
<!-- Your widget -->
</div>
You can select only the links inside that container like this:
$(".container a").each(function(index) {
$(this).attr("rel", "external").attr("target","_blank");
});
.container a selects anchor elements (links) that are children to that containing div, and will run your function on them.
Try it code
$(window).ready(function() {
$("a").each(function(index) {
$(this).attr("rel", "external").attr("target","_blank");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Peace of Paris
http://jsfiddle.net/98ftvycL/
I figured out how to make a toggle button which hides and shows the div with the content, but how can I make the content hidden by default and the toggle button to show the content
$(function(){
$('a.toggle').click(function(){
$('#content').stop().slideToggle(500);
return false;
});
});
Use CSS to hide content during page load.
CSS:
#content{
display:none;
}
Jquery:
$(function(){
$('a.toggle').click(function(){
$('#content').stop().slideToggle(500);
return false;
});
});
Here is a new jsFiddle.
The trick is to hide the entry when the page loads.
$(function(){
// New code
$("#content").hide();
$('a.toggle').click(function(){
$('#content').stop().slideToggle(500);
return false;
});
});
See also the jQuery docs on hide().
An alternative way shown in this additional jsFiddle is to set the "display:none;" CSS property on the div in the first place.
<div style="display: none;" id="content">
<p>Hello</p>
</div>
If you also want to hide the button when the content is shown, we can again use the .hide() function to now hide the button. Another jsFiddle is available. The core code for this becomes:
$(function(){
$('a.toggle').click(function(){
$('#content').stop().slideToggle(500);
// Start of new code
$('.toggle').hide();
// End of new code
return false;
});
});
When the javascript action below is called (prettyPhoto lightbox), I need to modify the style of the body to make overflow:hidden and position:fixed.
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']") .prettyPhoto({
});
});
</script>
So, I need to insert something like:
$('body').css('overflow','hidden');
$('body').css('position','fixed');
...but ONLY when the lightbox is open.
Basically, I need to stop the body from scrolling while prettyPhoto is active. Any ideas?
Try putting some basic JavaScript code in the function wich opens prettyPhoto.
Like this:
document.getElementById(BodyId).setAttribute("class","body_noscrolling");
And make a css value for the body (.body) in wich you disable scrolling:
.body {
}
.body_noscrolling {
overflow: hidden;
position: fixed;
}
Also change the <body> tag:
<body id="BodyId" class="body">
If you have a >CLOSE< button in your 'prettyPhoto', add this to the code of that button:
document.getElementById(BodyId).setAttribute("class","body");
I'm not really sure if it will work as I don't know how your prettyPhoto function is called.
Aside from it not being "recommended" we needed to do this for a specific project. Basically I've got a site master page that is displays a "Please wait while loading..." div to not display a page until it has been loaded. Reason being is we have many 3rd party tools that are quite slow to load.
In any event we have something to this effect:
<script type="text/javascript">
$("#msg").show();
$('#pageBody').css('opacity', 0);
$(window).load(function () {
$("#msg").hide();
$('#pageBody').css('opacity', 1);
});
</script>
We also set a timeout in the case that something doesn't load, we want the page to come back...
setTimeout('$("#pageBody").css("opacity", 1)', 1000);
The html is as simple as this snippet:
<body id="pageContainer">
<div id="msg" style="text-align:center;font-weight: bold;">
Loading, please wait...<br/>
<img src="/Images/ajax-loader.gif" alt="Loading please wait..."/>
</div>
<div id="pageBody">
</div>
</body>
The div id=pageBody is a container for all my .aspx pages that use this site master. The issue is when I go to one of these pages, it seems that I see the loading please wait... but then I still see the page for say 1/2 a second but then it goes away and comes back as fully loaded..its a bit noticeable to the user so the experience isn't as great.
I'm not really a front end developer so I am not certain if I am doing something wrong. Should I go to my .aspx pages and be doing anything in the jquery there...I was under the assumption that the site.master would handle everything.
Set the appropriate CSS for the #msg element (display: block) and #pageBody element (opacity: 0), instead of running $("#msg").show(); $('#pageBody').css('opacity', 0);. Then, all you need is the $(window).load handler.
That way, by default, the correct things are hidden/shown as the page is rendered, and only when you want to hide/show things ($(window).load) will they be correct.
Here's how I'd set it up (of course, some of it is for demo):
HTML -
<div id="msg">
Loading, please wait...
</div>
<div id="pageBody">
<div>HERE'S</div>
<div>SOME</div>
<div>CONTENT</div>
</div>
CSS -
#msg {
text-align: center;
font-weight: bold;
display: block;
}
#pageBody {
opacity: 0;
}
JS -
$(document).ready(function () {
// Simulate some time before everything's loaded
setTimeout(function () {
$("#msg").fadeOut(function () {
// Wait for #msg to fade out before fading in #pageBody
$("#pageBody").animate({
opacity: "1.0"
}, 800);
});
}, 1500);
});
DEMO: http://jsfiddle.net/X7nBN/
Create the overlay directly in the HTML using CSS instead of having Javascript show the overlay.
It's basically the same setup you have except the overlay will be visible always and only hidden when the page is fully loaded.
You would have something like this on your header:
<!-- jQuery assumed to be loaded prior to this code -->
<script type="text/javascript">
$(function(){
$(document).load(function(){
$('#msg').hide();
});
});
</script>
So, basically you do not have to use display:none or opacity:0 or visibility:hidden for your page. Just put the overlay directly over it, it should be covered completely. Then, when the page is loaded just remove or hide the overlay to show the webpage.