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.
Related
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">
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body >
<?php
echo '<ul id="menu">
<li>first</li>
<li>second</li>
<li>third</li>
</ul>';
?>
</body>
</html>
This list.php is separate file.i have included this in my pages and trying to highlight the currentpage clicked using a:active but it is not working..help me out in this
<div class= "main-menu" id= "main-menu">
<?php include 'includes/list.php';?>
</div>
a:active is the state when you click on the link. (http://www.w3schools.com/cssref/sel_active.asp)
a:visited is the state if you clicked on the link before. (http://www.w3schools.com/cssref/sel_visited.asp)
You can add a class ("current" in this example) to highlight your current link
<li>first</li>
And with css:
.current {
color: yellow;
}
If you can use jquery, then you can use this solution:
The js script should be common in all the pages i.e. first.php, second.php,etc.
Below is the code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<style>
.active{ color:yellow; }
</style>
<body >
<?php
echo '<ul id="menu">
<li>first</li>
<li>second</li>
<li>third</li>
</ul>';
?>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul#menu li a').click(function() {
$('ul#menu li a').removeClass('active');
$(this).addClass('active');
});
});
</script>
</body>
</html>
Hope, this will help you.
i found your problem
in your li tag you should check anchor tag and check first.php page actually exists or not
it means : href="../first.php" that is your solution
but your code is like this means first.php not exists thats why the css not working properly
first
i hope you understand what i actually told you
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();
});
There is my code so far. The issue is that the popup seems to be working perfect in Chrome but in Firefox it sticks to the top of the window after entering and in IE the popup does not even appear.
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<div id="dialog" title="My Dialog Title" style="display:none">
<p>This is My Dialog box Description/Content</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function(){
$(function () {
$("#dialog").dialog({
show: {
effect: 'drop',
direction : 'up',
distance: 1000,
duration: 2000,
},
});
});
}, 2000)
});
</script>
<style>
.ui-dialog-titlebar {display:none;}
#other_content {width:200px; height:200px;background-color:grey;}
#dialog_content{display:none;}
</style>
</body>
</html>
I want the popup to behave in the same manner as it is in Chrome with all the browsers.
http://jsfiddle.net/fakhruddin/x39Rr/14/
Web Page Link
Please guide.
Try to add:
<body style="height:100%">
The solution is simple! Add to the begin of file:
<!DOCTYPE HTML>