I am trying to load my sidebar (sidebar.php) based on window size. The original code loaded the sidebar regardless of the window size. It works fine, but I need to change it so that it only loads the sidebar if the window is greater than a specific width. This was the original:
<?php include("sidebar.php"); ?>
I'm trying to use jQuery to accomplish loading ONLY if the window is big enough to show it. The #sidebarcontainer is the main div where all of the sidebar content goes. Here is what I have tried:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
if($(window).width() > 665){
$("#sidebarcontainer").load("sidebar.php");
}
});
</script>
This isn't working. The sidebar does not show at all on any size window.
And I think I need an else statement in there as well that says do not load if if it isn't greater than 665?
Just try this code 100% working and tested:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Load demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<b>Response:</b>
<div id="sidebarcontainer"></div>
<script>
$(window).load(function(){
if($(window).width() > 665){
$( "#sidebarcontainer" ).load( "register.php", function( response, status, xhr ) {
if ( status == "success" ) {
$('#sidebarcontainer').show();
}
if ( status == "error" ) {
//var msg = "Sorry but there was an error: ";
//$( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
$('#sidebarcontainer').hide();
}
});
}
else{
$('#sidebarcontainer').remove();
}
});
</script>
</body>
</html>
Related
I have a list of rows from mysql table, each contains : a href tag, whose value is varying based on id like : href="123.php?id=sbsbd". I coded a jquery dialog, with 2 buttons - YES / NO. Upon, YES, I want to proceed with redirection request, from that particular a href link. Any guesses, how this can be done ?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script
src="https://code.jquery.com/jquery-3.1.0.js"
integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
crossorigin="anonymous">
</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
////////////////////////// 001 //////////////////////////
$("#proceed").dialog({
autoOpen: false,
buttons : {
"Yes": function(){
// stuck here
// need to go to URL in ahref = "123.php?id=sbsbd";
// id value keeps changing
},
"No": function(){
$(this).dialog("close")
}
}
});
//////////////////////// 002 ///////////////////////////
$("a").click(function(){
//$("#proceed").css("display", "block !important");
$("#proceed").dialog("open");
return false;
}); // click-function ends
}); // document.ready function-ends
</script>
</head>
<body>
Click for confirmation!
<div id="proceed" title="Delete this Slide-Image" style="display:none">
<p>Slide-Image will be deleted permanently from Homepage and from Server, too. Ok ?</p>
</div>
</body>
</html>
create the global access variable and set the href value to that variable when on click and use it to redirect.
<script type="text/javascript">
$(document).ready(function(e) {
////////////////////////// 001 //////////////////////////
$("#proceed").dialog({
autoOpen: false,
buttons : {
"Yes": function(){
alert(url);
window.location.href = url;
//here you can use that variable
},
"No": function(){
$(this).dialog("close")
}
}
});
var url ='';
$("a").click(function(){
$("#proceed").dialog("open");
url = $(this).attr('href');
//asign the clicked url into this url variable
return false;
});
});
</script
hello here i have i script but this dont work i caant update chat every second can you help me to update chat every second from database (pleasee no uppate div only text)
index.php
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
setTimeout(
function() {updateChat();},
1000);
function updateChat() {
$.get("read.php", function(data)
{
$("#Show_Data").html(data);
});
}
});
</script>
</head>
<body>
<div id="Show_Data"></div>
</body>
</html>
read.php
<?php
include("config.php");
$Data = "SELECT * FROM chat ORDER BY Time ASC";
$Result = mysqli_query($Connection, $Data);
while($row = mysqli_fetch_array($Result,MYSQLI_ASSOC))
{
echo '</br>' .$row['name'];
}
mysqli_free_result($Result);
mysqli_close($Connection);
?>
this is my code but my code when insert data in database my code not update data in html
Option 1:
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
setTimeout(
function() {updateChat();},
1000);
function updateChat()
{
$.get("read.php")
.done(function(data)
{
//You can do futher checks here....
$("#Show_Data").html(data);
setTimeout(function() {updateChat();},1000);
})
.fail(function()
{
//error 404 or 500
});
}
});
</script>
</head>
<body>
<div id="Show_Data"></div>
</body>
</html>
Int the code above, when something wrong with the call it stops and it does not continues the executions.
Option2:
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
setInterval(
function() {updateChat();},
1000);
function updateChat() {
$.get("read.php", function(data)
{
$("#Show_Data").html(data);
});
}
});
</script>
</head>
<body>
<div id="Show_Data"></div>
</body>
</html>
The code aboce executed every 1000 miliseconds the ajax call regardless if it is sucessfull the call or not
You need to use setInterval instead of setTimeout (it runs only once).
If that doesn't help, please post any PHP/JavaScript errors that you are getting.
To make sure PHP errors are set to display, add error_reporting(E_ALL) to the top of your script.
To see JavaScript errors, open the Developer Tools (F12) in your browser and go to Console.
I have a php page and I am trying to scroll user to section automatically after entire page is loaded. Right now it takes directly to that section on page load, I want entire page to be loaded and then scroll the page to that div. What I am doing is.
<script type="text/javascript">
<!--
function gotoit()
{
window.location="#gohere";
}
//-->
</script>
<body onload="gotoit()">
some code here
<a name="gohere"><div class="I want to scroll to this div"></a>
Please help me what should I do to scroll smoothly to that section automatically after page load.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(window).load(function() {
var theHash = "#go-here";
$("html, body").animate({scrollTop:$(theHash).offset().top}, 800);
});
</script>
</head>
<body>
<p>Lots of content here...</p>
<p>More content...</p>
<p>etc...</p>
<p id="go-here">Scroll down to here automagically</p>
<p>Some more content</p>
</body>
</html>
$(window).load() ensures the page starts to scroll after all your other assets have loaded (images, for example).
Here is a jQuery function I use to achieve this:
function scrollToStart(){
$("#scrollToStart").click(function (){
$('html, body').animate({
scrollTop: $("#startHere").offset().top
}, 2000);
});
};
I've made a site from an youtube tutorial. Here's my test site. And
here's the tutorial (final step of 3) if it helps. No CSS used yet.
When I click a link in the menu. Everything fades like supposed. But at the end of fade animation the previous page flickers.
Me
I'm totally new to JavaScript.
index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SuperFresh</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<a class="menu_top" href="pages/home.php">Home</a> /
<a class="menu_top" href="pages/portfolio.php">Portfolio</a> /
<a class="menu_top" href="pages/contact.php">Contact</a> /
<div id="content_area"></div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
</body>
</html>
nav.js:
$(document).ready(function () {
$('#content_area').load($('.menu_top:first').attr('href'));
});
$('.menu_top').click(function () {
var href=$(this).attr('href');
$('#content_area').hide('slow').load(href).fadeIn('slow');
return false;
});
Replace:
var href=$(this).attr('href');
$('#content_area').hide('slow').load(href).fadeIn('slow');
With:
$('#content_area').hide('slow', function(){
$(this).load($(this).attr('href')).fadeIn('slow');
});
This will fade it out and wait until the animation is complete before calling that function and loading in the new content.
Check out the documentation for more info.
you can use handlers with your own functions...
for ex :
$('#show').click(function() {
$('#myDiv').show(0, onDivShow);
});
$('#hide').click(function() {
$('#myDiv').hide(0, onDivHide);
});
function onDivShow() { alert('is shown'); }
function onDivHide() { alert('is hidden'); }
You can try this:
$('.menu_top').click(function () {
var href=$(this).attr('href');
var page = $('<div/>').attr('id','page').load(href);
$('#content_area').fadeOut('slow').html('').html(page).fadeIn('slow');
return false;
});
I have jquery plugin but on page load it works but when I integrate it with my php script it seems not to load.I have check paths but to no success. as soon as the page loads i want the window to show onload check out my code i put in the head tag please excuse the formatting:
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>SimpleModal Basic Modal Dialog</title>
<meta name='author' content='Eric Martin'
/>
<meta name='copyright' content='2012 - Eric Martin' />
<link type='text/css' href='../css/demo.css' rel='stylesheet' media='screen'
/>
<link type='text/css' href='../css/basic.css' rel='stylesheet' media='screen'
/>
<script>
window.onload = function () {
$(document).ready(function () {
$('#basic-modal-content').modal();
return false;
});
$('#modalContentTest').modal({
onShow: function (dialog) {
var sm = this;
dialog.container.animate({
height: 300,
width: 300
}, 500, function () {
sm.setPosition();
});
}
});
};
</script>
<style>
.noTitle .ui-dialog-titlebar {
display:none;
}
</style>
</head>
....between body tags i have the php script
I think your problem is in the combination of window.onload and jquery $(document).ready.
The "ready" method is triggered when the DOMContentLoaded event is triggered (jQuery simulates this on browsers that do not support it), while window.onload triggers when all additional content (css, images) is loaded - which happens afterwards.
So by the time you bind the "ready" event, the event has already been triggered and will not trigger again.
I suggest removing the window.onload wrapper function.
$('#modalContentTest').modal({
onShow: function (dialog) {
var sm = this;
dialog.container.animate({
height: 300,
width: 300
}, 500, function () {
sm.setPosition();
});
}
});
$(document).ready(function () {
$('#basic-modal-content').modal();
return false;
});
Here are some details on these two events
Another concern I have is that the id of the declared modal (#modalContentTest) is different from the one you are trying to trigger (#basic-modal-content)