How to open a link from the same page, or should I say display the content of that link on the same page where the link is, I haven't tried anything yet cause I really don't know what this sort of thing is called, I'm new at web developing I really need this one cause it can make the website that I'm working on right now look more professional
here is an accurate picture/explanation for what I want:
Picture of what I want to do
You could do it using some jquery:
Take the code below as a reference:
$('#link1').on('click',function(){
$('#content1').css('display', 'inline');
$('#content2').css('display', 'none');
});
$('#link2').on('click',function(){
$('#content1').css('display', 'none');
$('#content2').css('display', 'inline');
});
.wrapper {
background: #cacaca;
width: 350px;
height: 150px;
}
.container {
display: relative;
float: left;
background: #9A9ACA;
width: 200px;
height: 150px;
}
#content1, #content2 {
position: absolute;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div id="content1">
Some content
</div>
<div id="content2">
Other stuff
</div>
</div>
<div>Link1</div>
<div>Link2</div>
</div>
Hope it helps
Use a browser side application like jQuery to change the CSS class or id from hidden to shown 'onmousedown'. Place your div style as hidden initially, then write jQuery to show the div on press of your mouse button.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggle demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">THE AWESOME SAUCE!</p>
<script>
$( "button" ).click(function() {
$( "p" ).toggle();
});
</script>
</body>
</html>
You need to do some studying up on JQuery for this purpose, luckily there are a lot of examples of this very topic out there for you to research, I suggest starting here:
http://api.jquery.com/toggle/
you can redirect the page by simply typing .....
header("Location: file_name");
or you can give the HTML content by simply giving
<a href ="localhost/8000/file_name">
Related
Sorry if I sound like an idiot, but I'm relatively new to php.
Basically, I want to have a navbar that is synced across all the pages of my website.
What I have so far is this:
navbar.php
<?php
echo '<link rel="stylesheet" type="text/css" href="style.css"> -
<ul> -
<li><div id="nav"><span id="middle">Home</span></div> -
<li><div id="nav"><span id="middle">Art</span></div></li> -
<li><div id="nav"><span id="middle">Games</span></div></li> -
<li><div id="nav"><span id="middle">Wish List</span></div></li> -
<li><div id="nav"><span id="middle">Doctor Who</span></div></li> -
</ul>';
?>
index.html
<!DOCTYPE html>
<html>
<head>
<title>Colin Site</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
p {
font-size: 150%;
}
</style>
</head>
<body>
<div class="navcontain">
<?php include "nav.php"; ?>
</div>
<br>
<br>
<br>
<h2>Welcome to my website, where I do random things</h2>
</body>
</html>
style.css
#navbar {
width: 100%;
}
#nav {
background-color: #848482;
width: 110px;
height: 40px;
text-align: center;
font-size: 100%;
color: white;
}
#navcontain {
position: relative;
top: 1%;
background-color: alpha;
width: 100%;
}
When I go to my website, there's just a blank space where my navbar should be.
Thanks in advance
You can't execute PHP code in a HTML file. Look at the extension of the file where you're including the navbar.php it's .html right? It's wrong then. In order to make it works rename it to index.php.
You have <?php include "nav.php"; ?> in your HTML, but according to your question the file is named navbar.php....
(yes, and your main file has to have a php ending, as #ReynierPM wrote)
It is not possible using php in a html file, though you can use AJAX / JQuery to load the php into the webpage, heres an axample
index.html
<html>
<head>
<script src="jquery.js"></script> <!-- You can get JQuery at http://jquery.com -->
</head>
<body>
<script>
$(document).ready(function(){
$.ajaxSetup({cache:false});
$("#nav").load("nav.php");
});
</script>
<div id="nav"></div>
</body>
</html>
I have draggable div with saving positions to database... I am moving picture but can I make only one area where i can click and move div or it need to be whole div? Because Now i can click anywhere on div and move it and I want to click on only one spot for moving div...
if you are using jqueryui draggable,then you can use handle option.
check the documentation
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
#draggable {
width: 100px;
height: 100px;
}
#draggable p {
cursor: move;
}
</style>
<script>
$(function() {
$("#draggable").draggable({
handle: "p"
});
});
</script>
<div id="draggable" class="ui-widget-content">
<p class="ui-widget-header">handle</p>
</div>
I want to show loading icon until pdf is loaded into the webpage.I have pasted what I have tried but loading icon keeps on displaying even the pdf is loaded fully. So, I concluded $iFrame.load(function() doesn't trigger anything. Got this code from JSFiddle. But in JSFiddle it is working.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
iframe {
width: 100%;
height: 100%;
border: 5px solid green;
}
</style>
<script>
$(function(){
var $iFrame = $('iframe');
$iFrame.load(function(){
$('h3').html('PDF Loaded!');
});
$('h3').html('Loading PDF...');
$iFrame.attr('src', 'http://listic.ru/jQuery_Cookbook.pdf');
});
</script>
</head>
<body>
<h3></h3>
<iframe></iframe>
</body>
</html>
I need to do an additional check for caches files (who fired the event, just before added an event handler listening for it). I tried the following jquery and it worked fine.
$iFrame.on('load', function() {
$('h3').html('PDF loaded...');
}).each(function() {
if(this.complete) $(this).load();
});
How to change the alert box size?
I use the following coding.
In Firefox the alert box resize automatically but it not change in chrome?
Kindly give a solution.
window.alert("You answered all questions. Press OK to continue.");
You can't change the size/formatting/title (default settings) of the Javascript Alert Box. Instead you should check out JQuery Alert Box.
The Resizable JQuery Alert Box
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</body>
</html>
To clarify: When you use window.alert() you are using resources of your browser, not of your web page. It's the browser then who is responsible for creating the alert box, and thus you cannot influence its properties (like size etc.)
I placed a single space in a new line at the end of my string which increased the length to a standard Windows message box.
Alert ("Hello World\n ");
I'm building this web page and I want the news to appear in jquery.modal, but with sharing functionality, that means with the URL. I found PJAX for the solution and then I wanted to put the link in URL and show the content in the modal window.
After days of googling I stumbled on this, and if you click on the page it opens in modal, but shows the URL, but I can't find how it works. Here is the link: http://rigaspots.blogspot.com/
Here is my code.
<link rel="stylesheet" href="../jquery.modal.css">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/jquery.pjax.js"></script>
<script src="../js/jquery.modal.js"></script>
<script type="text/javascript">
var direction = "right";
$(document).ready(function(){
$('a').pjax({
container: '.modal'
});
$('.modal').on('pjax:start', function() {
$(this).addClass('loading')
})
$('.modal').on('pjax:end', function() {
$(this).removeClass('loading')
})
});
</script>
<style>
#main {
font-family:Helvetica,Arial,sans-serif;
width:30%;
opacity: 1;
transition: opacity 0.20s linear;
}
#main.loading {
opacity: 0.5;
}
h2 {margin-left:200px;}
ul{padding-left:15px; list-style:none;}
</style>
</head>
<body>
<p ><strong style='color:green'> 2012-10-25 16:52:13</strong> (Time should only change on refresh!)</p><div id="main">
<h1>PJAX using PHP</h1>
<ul class='header'>
<li>Tyrannosaurus</li>
<li><a href='kong.php' data-pjax='modal' rel="modal:open" >King Kong</a></li>
</ul>
</div>
You can see it here: http://supervalters.mplab.lv/source/
Any help would be appreciated. Thanks.