I'm trying to make a content popup using colorbox.
This is my code
<script type="text/javascript">
$(document).ready(function() {
$('.colorbox').colorbox({
inline:true,
width: 640,
height: 480
});
});
</script>
</head>
<body>
<div style="display:none">
<div id="popup">
<?php echo $row["content"]; ?>
</div>
</div>
<?php echo $row["content"]; ?> <a class='colorbox' href='#popup'><span>PopUp</span></a><br>
The problem is it always show the same content, example like this:
content one PopUp
content two PopUp
content three PopUp
content four PopUp
if i click content one PopUp link it will show "content one" in the colorbox although i click PopUp in content two or three or four it will always show "content one" in the colorbox, so how to fix this
I want to make if I click content one PopUp link it will show "content one", if I click content two PopUp link it will show "content two" and etc
======================================================================================
I can solve the problem but I have to change in
I change it into like this
<a class='colorbox' href='' onclick="$.fn.colorbox({ html:'<?php echo $row["comment"]; ?>'}); return false"><span>PopUp</span></a>
but how to change onclick function into jquery ? I don't want to use onclick..
please help me
You should change the content of #popup after clicking each .colorbox . You may do this as below :
$(function(){
$(".colorbox").on('click',function(){
//do someting to change the content of #popup
//eg:
//$("#popup").html(Math.rand())
}).colorbox({
inline:true,
width: 640,
height: 480
});
});
Related
How can I make each button instead of going to another page to display the information on a dialog box in the same page.
This code here is in the head to call the id from the other file
<script type="text/javascript">
function getvoucher(id){
return data;
});
}
</script>
Then I have this button in my while loop:
<td><?php echo $row['voucher_id']; ?></td>
<td> <?php echo' Click here'; ?></td>
When I click on the button it displays what I want in test but instead I want it to show in a dialog box, any help?
you can use JQuery's UI dialog which is pretty widely used today. Here is the link for demo:
https://jqueryui.com/dialog/
What you can do is to set the content you want to display in the dialog div's tag and then bind the dialog to the button id.
Example
JAVASCRIPT
$("#voucher_id").click(function() {
$.get("http://52.91.139.19/inactive/test.php?id=" + id, function(data,status){
$("#content").html(data);
});
});
HTML
<div id="dialog" title="Basic dialog">
<p id="content">This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
You should then put Id on button and in script
$("#id").click(function(){
alert("You clicked the button");
});
Did you try with alert something like this echo <script>alert("Message");</script>;
Or did you try to open fancybox you can use for example <a class="className" data-fancybox-type="iframe" href="yourhreftodisplayinfoonfancybox">Open</a>
<script>
$(".className").fancybox({
maxWidth:500,
maxHeight:600,
fitToView:false,
width:'60%',
height:'100%'
}
});</script>`
If you want on button then try with onclick to rised fancybox or dialog I don't do like that
$("#id").click(function() {
$.get("http://inactive/test.php?id=" + id, function(data,status){
$("#content").html(data);
});
});
I'm trying to create a pop-up to show images which have been uploaded into my database.
I have tried
echo '<td><a class=help href="'.$dbRow['image'].'"></td></tr>';
the class represents the pop-up class
<SCRIPT type="text/javascript">
$('.help').popupWindow({ height:400, width:500, top:100, left:100 });
</SCRIPT>
Any suggestions how I get the image to display from the database as a pop-up? The image field is retrieving on my webpage from the database but need it to click as a pop-up to display
Use jQuery for this.
Use an loop to echo all images to the certain div.
<div class="help">
<?php
foreach($key as $value) {
echo '<a class="help" href="'.$value.'"><br/>';
}
?>
</div>
then display the dialog
<script>
$('.help').dialog({
//your dialog options here
height:'500',
width:'500',
});
</script>
See jQuery dialog for more info about the dialogs
I am using bpopup with multiple popup links on the page and multiple content for each link. To associate the JQuery with each link, I use a [id^="div_name"]. The JS is given below:-
$(document).ready(function()
{
console.log( 'ready!' );
$('[id^="click"]').bind('click', function(){
$('[id^="profile"]').css('display','inline');
$('[id^="profile"]').bPopup({
modalClose: true
, opacity: .8
, positionStyle: 'fixed'
, fadeSpeed: 'slow'
, followSpeed: 'slow'
});
});
});
The corresponding PHP script has:-
<?php
foreach($listings as $listing)
{
<a id="click" href="some url"><?php echo $listing->profile_link;?></a>
<div id="profile" style="background-color:#fff; width:400px; height:400px; display:none; "><?php echo $listing->company_name; ?></div>
}
The listings are all being associated with the popup action. However, their content is the same as the last $listings->company_name. However, I want the content to have individual company names. I realize that I am using the same div-id and after the content is being rendered on the browser, it associates the last one to all the popups. How do I work around this?
<a data-toggle="modal" href="msg_id=<?php echo $id; ?>#example" class="link_comment">Comment</a>
<div id="example" class="modal" style="display: none; ">
Your message ID is :
<?php
echo $msg_id = $_GET['msg_id'];
?>
</div>
When I try to mouseover to Comment link, in status URL : I can see the msg_id value. But When I try to click the comment link (I using Jquery modal), it can't be show the value of the link.
So my question, how can I do that to make the value of msg_id show in Jquery modal.
Thanks for your help.
Since you open #example div with jquery Modal, it dosen't reload the page, hence $_GET is empty.
You can achieve what your goal in at least 2 ways:
Use Ajax to load contents of #example div when link is clicked.
<a data-toggle="modal" href="<?php echo $id; ?>#example" class="link_comment">Comment</a>
<script type='text/javascript'>
$('.link_comment').click(function(e) {
e.preventDefault();
var id = $(this).attr('href');
$.get('givemycomments.php?id='+id, function(data) {
$('#example').html(data);
});
});
</script>
Load all possible contents when page is rendered with php. For example, you would have #example_1 , #example_2 divs. When link is clicked, get value of its ID, and fire Modal with correct div. edit: after writing example code i realized that if you have lots of comments, it can be quite heavy to load em all.
I would like to know if there is a way to be able to click a Link on the navigational Div tag and have it display on the content Div like if i had
<div id="nav">
a link </div>
<div id="content>show the stuff</div>
From the comments below - the OP stated the following :
I am trying to redo a website but my imagagination is getting the better of me. If I have three links like home, about author, and about our mission. I would like to be able to click about author and in the main_content div tag show the html file aboutauthor.html
Alt 1: Use jquery tabs:
See demo and code here: http://jqueryui.com/demos/tabs/
Alt 2: Hide/show div in same html file:
HTML:
<div id="nav">
Show content 1
Show content 2
Show content 3
</div>
<div id="content1" class="toggle" style="display:none">show the stuff1</div>
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>
jQuery:
$("#nav a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).show();
});
Demo: http://jsfiddle.net/5NEu3/3/
Alt 3: Load from server ondemand:
To load html into your main div you should use: http://api.jquery.com/load/
Follow examples on that site. And be aware that the html side you are loading must be in same domain as you are hosting the new page.
Html
Show content 1
Show content 2
jQuery
$("#nav a").click(function(e){
e.preventDefault();
$('#maindiv').load($(this).attr("href"));
});
Using jQuery, you could do something like this.
This will open the site <a href="example.html"> and put it inside of the <div id="content"> when you click it, and then disable changing the whole site.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#nav a').click(function(e) {
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
</script>
<div id="nav">
Some page
Some other page
My page
</div>
<div id="content">
show the stuff
</div>
Something like this:
function setContent(div, content)
{
getElementById(div).innerHtml = content;
return false; // return false to ignore the click
}
a link
to show a hidden div (i think this is what you wanted)
the javascript (using jQuery)
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#showdiv").click(function () {
$("#hiddendiv").show();
});
});
<script>
the html
Show the Div
<div id="hiddendiv" style="display:none;">Content here</div>
you can see it in action here