I need to handle div resizing on my web page. The problem is that I have not idea why resize function cause stackoverflow exception. Can you explain me what am I doing wrong?
Here is a jsfiddle example: https://jsfiddle.net/u9q4k4ce/
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
function start() {
$(document).ready(function () {
$("#divId").off('resize').on('resize', function () {
});
$(window).bind('resize', function () {
$("#divId").resize();
});
});
}
</script>
</head>
<body onload="start()">
<div id="divId" style="position:absolute;left:0px;right:0px;top:0px;bottom:0px;"></div>
</body>
</html>
In jsfiddle I provided any window resize cause stack overflow. I'm using newest chrome, win 7.
Any help will be appreciated.
Please go through https://api.jquery.com/resize/. you should pass a callback/handler to your resize().
$( window ).resize(function() {
$( "#log" ).append( "<div>Handler for .resize() called.</div>" );
});
Related
I have a few queries that are quite big, i only want queries to run them once the page has finished loading.
This is what i have tried.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$("#query").load("sql-query.php");
});
</script>
</head>
<div id="query">Loading...</div>
sql-query.php
$data = DB::table('tapplicant')->limit(5000)->get();
var_dump($data);
The idea is to return the query data once the page has loaded.
Version mismatch "Uncaught TypeError: a.indexOf is not a function" error when opening new foundation project
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
/*
$( window ).load(function() {
$("#query").load("sql-query.php");
});
*/
$(window).on('load', function(){
$("#query").load("sql-query.php");
});
</script>
</head>
<div id="query">Loading...</div>
Suggest you to use document ready function (i.e $(function()) instead of window onload document.ready vs window
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#query").load("sql-query.php");
});
</script>
</head>
<div id="query">Loading...</div>
I recommend using jQuery.get() after the document.ready()
$( document ).ready(function() {
$.get( "sql-query.php", function( data ) {
$( "#query" ).html( data );
});
});
This is due to some changes made in this JQuery version ..
Just change
$(window).load(function() {});
to
$(window).on("load", function (e) {}); and keep the rest as it is.
Please refer to this for more details.
I want to toggle element that id's pg when click link.
header:
<title>Example</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("#link").click(function() {
$("#pg").toggle();
});
</script>
Elements:
<p id="pg">deneme deneme 123 deneme</p>
toggle
close click function by adding });:
$(function() {
$("#link").click(function() {
$("#pg").toggle();
});
});
You're missing the final }); for the statement
<title>Example</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("#link").click(function() {
$("#pg").toggle();
});
)}; //<-- Missing close bracket
</script>
Also, if you're using Firefox, check out Firebug. Its an invaluable debugger tool and will show you where errors are happening.
Chrome has a Developer Tools enabled, not sure about IE.
Any ideas why this doesnt work in my php document?
When i tested this on jsfiddle, everything worked fine.
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$("a").click(function() {
$("div.info").hide();
$("div." + this.className).show();
});
</script>
</head>
<body>
<div class="shipping-container">
Show UPS info
Show Fedex info
<div class="ups info" style="display:none">the info for ups</div>
<div class="fedex info" style="display:none">Who let the dogs out</div>
</div>
</body>
You missed the document ready handler, try this:
<script type="text/javascript">
$(function() {
$("a").click(function() {
$("div.info").hide();
$("div." + this.className).show();
});
});
</script>
Alternatively, leave your script tag as it is, but put it at the end of the document, before the </body> tag.
You should make sure that your JQuery code is only loaded AFTER your DOM has fully loaded by doing:
$(document).ready(function() {
$("a").click(function() {
$("div.info").hide();
$("div." + this.className).show();
});
});
You are running the script before the link element exists.
In jsfiddle the code is by default placed in an event that runs after the document is loaded. Use the ready event to do this in your code:
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function() {
$("div.info").hide();
$("div." + this.className).show();
});
});
</script>
I think you should do this in your header:
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
$("div.info").hide();
$("div." + this.className).show();
});
</script>
This will ensure that all of the DOM objects (especially the a elements) are loaded before you try to attach any event handler.
The following way of loading a page in a div via clicking a link works with all browsers but with Safari.
Can anyone please give me a clue on what is Safari choking on?
Thanks a lot!
<script type="text/javascript">
$(document).ready(function(){
$("#fs").click(function(eventt){
$("#adiv").html('<div id="destiny"></div>');
fs();
});
})
function fs() {
$("#destiny").load("mypage.php", {}, function(){ });
}
</script>
Click me
<div id="adiv"></div>
I think it would work better when you replace .html with below code
.ajaxComplete(function(event, XMLHttpRequest, ajaxOptions) {
});
Old code
<script type="text/javascript">
$(document).ready(function(){
$("#fs").click(function(event){
$("#content").html('<div id="content"></div>');
fs();
});
})
function Diensten() {
$("#content").load("test.php", {}, function(){ });
}
</script>
New Code
<script type="text/javascript">
$(document).ready(function(){
$("#Diensten").click(function(event){
$("#content").ajaxComplete(function(event, XMLHttpRequest, ajaxOptions) {
});('<div id="content"></div>');
Diensten();
});
})
function Diensten() {
$("#content").load("diensten.php", {}, function(){ });
}
</script>
Have you tried simplifying your code to
$(document).ready(function(){
$("#fs").click(fs);
function fs() {
$("#adiv").html('<div id="destiny"></div>');
$("#destiny").load("mypage.php");
}
});
I have the following code:
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript">
$(function() {
$('.webPanel').mouseover(function(){
$('.webPanel').animate({'width': '350px'}, 100);
});
});
</script>
Which doesn't work. As you could probably tell, it's supposed to expand the .webPanel div to 350px on mouseover, but nothing happens.
How can I get this thing to work? I don't understand why it isn't working!
Thank you
You need a separate script inclusion for jquery:
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.webPanel').mouseover(function(){
$('.webPanel').animate({'width': '350px'}, 100);
});
});
</script>
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script>
//you script
</script>
And how about hover function
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script>
$(function() {
$('.webPanel').hover(
function(){
$('.webPanel').animate({'width': '350px'}, 100);
},
function (){
$('.webPanel').animate({'width': '500px'}, 100);
}
});
});
</script>
I wrote your script in jsfiddle and it works great.
Please, see the code here.
I think that your problem is due to the code you wrote between the script tags.
Regards.
your function need to be in separate script tag:
<script type="text/javascript"> // this missing
$(function() {
$('.webPanel').mouseover(function(){
$('.webPanel').animate({'width': '350px'}, 100);
});
});
</script> // this missing