hide div when page load - javascript

I have jquery issue, Kindly see my jquery code:
$(document).ready(function(){
$(".toggle_container").show();
$("h2.trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$("h2.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow,");
});
});
My .toggle_container is shown always its good, But I want to close it first time, when page load. Can you please provide me any solution?
I dont want to use $(".toggle_container").hide(); function for this problem because when i click on href then .toggle_container should not hide, It should open.
Regards.

You can just add attribute
style="display:none"
to your element .toggle_container.
Then on first call of $(document).ready it will be shown.
The full test example:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h2.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow,");
});
});
</script>
</head>
<body>
<h2 class="trigger">Toggle</h2>
<div class="toggle_container" style="display:none">Container</div>
</body>
</html>
Note: there`s no $(".toggle_container").show(); on $(document).ready

remove the
$(".toggle_container").show();
from your $(document).ready function.
in html part add style="display:none" for the toggle_container div.
check the #HCK s reply. he is clearly mentioned it..

Once the document gets loaded, a alert box will be prompted "page loaded".
$(document).ready(function(){
alert('page loaded'); // alert to confirm the page is loaded
$('.divClassName').hide(); //enter the class or id of the particular html element which you wish to hide.
});

Related

auto click a link when page loads doesn't work

I have a page for redirect purpose, I want to redirect user to another page once it hits this page:
<!DOCTYPE html>
<html>
<head>
<title>Open App</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert("test"); //this shows up.
$('#openApp').click(); //this button is not clicked.
});
</script>
</head>
<body>
redirect
</body>
</html>
I want the redirect happen once this page is load. But the click function is not fired. I have to click the link by myself to redirect to google.com.
I normally wouldn't give you an alternative as an answer, but looking at your comments, it looks like you're just trying to redirect.
You can use window.location.replace('http://www.google.com'); for that.
$(document).ready(function () {
window.location.replace('http://www.google.com');
});
See also, this answer.
It's not possible to trigger a click event without any user interaction. In other words, if the function being called wasn't called from a user interaction, the click event will not get triggered.
In your case, simply update the window.location attribute:
window.location = 'http://www.google.com';
try this fiddle mate, added script is
$(document).ready(function () {
//this shows up.
$('#openApp')[0].click(); //this button is not clicked.
});

how to click an anchor tag from javascript or jquery

Have an anchor tag, trying to click it from the javascript but not responding, while loading the page it should go to next.php without click anchor tag manually.how can I archive this?
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-2.0.3.js"></script>
<script type="text/javascript">
alert("hai");
$(document).ready(function() { $('#about').click(); });
</script>
</head>
<body>
<div>
click here
</div>
</body>
</html>
Use $('selector')[0], as $('selector') returns a jQuery object, so $('selector').click() will fire the click handler, while $('selector')[0].click() would fire the actual click.
$(document).ready(function () {
$('#about')[0].click(); //$('#about').get(0).click();
});
Demo
You can not use javascript to fire click event
It should use
<script type="text/javascript">
$(document).ready(function() {
document.location.href='/next.php'
});
</script>
Here is the code that can help you
$(document).ready(function() {
$(document).ready(function() {
$('a').trigger('click');
});
})
function abc() {
alert("");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
click me not
If you want the recommended way then use this inside $(document).ready
window.location="where ever you want to go";
If you want the page to go to next.php without clicking then place the window.location directly into $(document).ready(function() { });
Click() function is used when you want to trigger click event. ie. when you want to trigger some action when anchor tag is clicked.
<script>
alert("hai");
$(document).ready(function() {
window.location = 'next.php'; //If you wish the page to automatically go to next page on page load.
$('#about').click( // If you wish to do something clicking anchor
function(){
alert("Hello");
});
});
</script>
$(document).ready(function() { $('#about').trigger('click'); });
Updated:
$(document).ready(function() { $('#about')[0].click(); });

Load php website into div

Hi is there any possibility to load this page to div?
connectis.pl/connectis.pl/index.php
I tryied this way but seems to not load the data.
<div id="siteloader"></div>
$("#siteloader").html('<object data="ger-pol.home.pl/connectis.pl/index.php" />');
http://jsfiddle.net/SsJsL/
With jquery you can do it like this...
$("#siteloader").load("http://ger-pol.home.pl/connectis.pl/index.php");
Edit: Make sure your jquery functions are wrapped in the document ready wrapper...
<script type="text/javascript">
$(document).ready(function(){
$("#siteloader").load("http://ger-pol.home.pl/connectis.pl/index.php");
});
</script>
Or the shorthand...
<script type="text/javascript">
$(function() {
$("#siteloader").load("http://ger-pol.home.pl/connectis.pl/index.php");
});
</script>
I tried your fiddle and it works just fine..
Might be that you forgot the script tag?
<script>
$("#siteloader").html('<object data="http://ger-pol.home.pl/connectis.pl/index.php"/>');
</script>
Here's JSFIDDLE

Jquery change() not working

Hi everyone I am new to jquery. I am facing a problem with change function I jquery
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$("input").change(function(){
alert("The text has been changed.");
});
</script>
</head>
<body>
<input type="text">
<p>Write something in the input field, and then press enter or click outside the field.</p>
</body>
</html>
I am not getting an alert box when I press it outside the textbox. Please help me to resolve this issue :D
You are trying to add a change handler to an element before it is added to the dom. You can use dom ready callback to delay the script execution till all the elements are loaded to the dom
jQuery(function($){
$("input").change(function(){
alert("The text has been changed.");
});
})
Demo: Fiddle
you can also try this :
$(function() {
$("input").change(function(){
alert("The text has been changed.");
});
})
you can also try this :
$(document).ready(function(){
$("input").change(function(){
alert("The text has been changed.");
});
});
Put your code inside the:
$(function(){
// Your code
});
The script will wait the DOM ready to start.

jquery toggle in a pop up modal form

I want to toggle between a div on a pop-up modal form. The problem i see is the document.ready() function on the modal page, which tries to load the parent form. It distorts the whole page and tries to show automatically if i load the main parent form. Is there something like div.ready()? how do i include this code on my pop up modal form?
Toggle code here
<html>
<head>
<title>jQuery test page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#clickMe").click(function() {
$("#textBox").toggle();
});
});
</script>
</head>
<body>
<a id="clickMe">Toggle my text</a>
<br />
<div id="textBox">This text will be toggled</div>
</body>
Yes, such expressions like DOM_ELEMENT.ready() exists and very useful in scenarios like the one you are facing right now.
Update:
I found that this plugin is doing what you need :
jQuery.elementReady()
Examples:
1:
Change the source of a specific image as soon as it is loaded into the
DOM (before the whole DOM is loaded).
$.elementReady('powerpic', function(){
this.src = 'powered-by-jquery.png';
});
2:
If you want to have the jQuery object instead of the regular DOM
element, use the $(this) function.
$.elementReady('header', function(){
$(this).addClass('fancy');
});
3:
Chain multiple calls to $.elementReady().
$.elementReady('first', function(){ $(this).fancify(); })
.elementReady('second', function(){ $(this).fancify(); });
4:
Use the ‘$’ alias within your callback, even in noConflict mode.
jQuery.noConflict();
jQuery.elementReady('header', function($){
$(this).addClass('fancy');
});
5:
Change the polling interval to 100ms. This only works if $.elementReady() has not yet been called.
$.elementReady.interval_ms = 100;

Categories