Uutiset:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu
Advertisement:

how to make a javascript popup

Aloittaja The Wizard, tammikuu 18, 2014, 05:42:18 AP

« edellinen - seuraava »
Tulosta
Siirry alas Sivuja1
Käyttäjän toimet

The Wizard

tammikuu 18, 2014, 05:42:18 AP
Hello:

I need some help here as I know nothing about javascript. Using the code below I would like to create a pop up of the selected image only, and not a full page with the image as the code below does.
If you could help it would be gratefully accepted.

Wiz

Koodi [Valitse]

function template_wizard_popup()
{
global $smcFunc, $txt, $user_info, $context, $db_prefix, $boardurl;

// Check for inputted image

$image3 = $_GET['c'];

// If inputted image exists display big image

if($image3)
{
echo'
<center>
<table border="1">
<tr>
<td><img src="', $boardurl, '/Themes/default/wizards-shop/big/' . $image3 . '" align="top"></td>
</tr>
</table>
</center>
';
}
}

The Wizard

#1
tammikuu 18, 2014, 04:56:27 IP
This is what I have so far, but I am not sure if this will work.

Wiz

Koodi [Valitse]

<?php

global $scripturl, $settings, $boardurl;

// Time for our helptext
 echo '
<a href="', $scripturl, '?action=wizard_popup&c=' . $message['member']['wizard_images'][$i] . '" onclick="return reqWin(this.href);"><img src="', $boardurl, '/Themes/default/wizards-shop/small/' . $message['member']['wizard_images'][$i] . '.png"  alt="', $message['member']['wizard_images'][$i], '" /></a>
';

?>



Koodi [Valitse]

<?php

function template_wizard_popup() 
{
 global $context, $settings, $options, $txt, $boardurl;

 // Since this is a popup of its own we need to start the html, etc.
 echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"', $context['right_to_left'] ? ' dir="rtl"' : '', '>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=', $context['character_set'], '" />
<meta name="robots" content="noindex" />
<title>', $context['page_title'], '</title>
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index.css" />
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js"></script>
</head>
<body id="help_popup">
<div class="windowbg description">';

 // Check for inputted image

 $image3 = $_GET['c'];

 // If inputted image exists display big image

 if($image3)
 {
 echo'
<center>
<table border="1">
<tr>
<td><img src="', $boardurl, '/Themes/default/wizards-shop/big/' . $image3 . '" align="top"></td>
</tr>
</table>
</center>
';
 }

 echo '
<br />
<br />
<a href="javascript:self.close();">', $txt['close_window'], '</a>
</div>
</body>
</html>';
}

?>

Matthew K.

#2
tammikuu 18, 2014, 05:03:14 IP
Can you define popup? Do you just mean a new window that has a set width / height? Like SMF's help text windows? Or do you mean an inline modal such as jQuery provides or can be done with some simple CSS and JavaScript?

Also, I would really encourage you to try and work on validating your XHTML, http://validator.w3.org/

The Wizard

#3
tammikuu 18, 2014, 05:25:53 IP
LainaaAlso, I would really encourage you to try and work on validating your XHTML, http://validator.w3.org/

oh no your not putting that on me I pulled that code from  the latest version of smf 2.0.6.

LainaaCan you define popup? Do you just mean a new window that has a set width / height? Like SMF's help text windows?

Yes.

Matthew K.

#4
tammikuu 18, 2014, 05:28:32 IP
I actually am. I guarantee that:
Koodi [Valitse]
<center>
<table border="1">
<tr>
<td><img src="', $boardurl, '/Themes/default/wizards-shop/big/' . $image3 . '" align="top"></td>
</tr>
</table>
</center>is not in SMF.

The Wizard

#5
tammikuu 18, 2014, 06:10:10 IP
Yea that part is mine and yes you got me.

I don't really need the table or center code.

So can you help?

Matthew K.

#6
tammikuu 18, 2014, 06:16:06 IP
Quick Google search turns it up pretty quickly, you'll want to use the open(); method of window (window.open();).

https://developer.mozilla.org/en-US/docs/Web/API/Window.open
http://www.w3schools.com/jsref/met_win_open.asp

The Wizard

#7
tammikuu 19, 2014, 05:12:49 AP
Below is a New Approach as pointed out by  Labradoodle-360 and I think it should work except I get the following error -

LainaaParse error: syntax error, unexpected T_STRING, expecting ',' or ';'

So could someone post a correction?

Wiz

Koodi [Valitse]

<?php
echo '
<a href="javascript:;" onClick="window.open(' . $boardurl . '/index.php?action=wizard_popup&c=' . $item['image'] . ','no','scrollbars=yes,width=550,height=400')" ><img width="', $modSettings['shopImageWidth'], '" height="', $modSettings['shopImageHeight'], '" src="', $boardurl, '/Themes/default/wizards-shop/small/', $item['image'], '" align="left" alt="Item Image" /></a>
';
?>

The Wizard

#8
tammikuu 19, 2014, 11:10:29 IP
javascript sucks :)

The Wizard

#9
tammikuu 20, 2014, 06:55:10 AP
Hello:

The following below is my latest attempt and the popup window does work. My problem now is how to pass the variable "c".
Could use some help here.
Thanks
Wiz

Koodi [Valitse]
<a href="' . $boardurl . '/index.php?action=wizard_popup&c=' . $item['image'] . '" onClick="myPopup2()"><img width="', $modSettings['shopImageWidth'], '" height="', $modSettings['shopImageHeight'], '" src="', $boardurl, '/Themes/default/wizards-shop/small/', $item['image'], '" align="left" alt="Item Image" /></a>




popup1.php
Koodi [Valitse]

// javascript function myPopup2() that creates the popup window and links to the php data to show
echo '
<script type="text/javascript">
function myPopup2()
{
window.open( "http://www.tribeuniverse3.com/temp6/popup2.php", "myWindow",
"status = 1, height = 300, width = 300, resizable = 0" )
}
</script>
';



popup2.php
Koodi [Valitse]

global $boardurl;

// Check for inputted image

$image3 = $_GET['c'];

// If inputted image exists display big image

if($image3)
{
echo'
<center>
<table border="1">
<tr>
<td><img src="', $boardurl, '/Themes/default/wizards-shop/big/' . $image3 . '" align="top"></td>
</tr>
</table>
</center>
';
}

All Colours Sam

#10
tammikuu 20, 2014, 09:39:24 AP
You can pass vars to the client by printing them:

Koodi [Valitse]

$c = 'lol';

echo '<a href="#" onClick="myPopup2()">click me!</a>

<script type="text/javascript"><!-- // --><![CDATA[
var c = "'. JavaScriptEscape($c) .'";

function myPopup2()
{
alert(c);
}
// ]]></script>';


And you're missing a ; in your window.open function:

Koodi [Valitse]

window.open( "http://www.tribeuniverse3.com/temp6/popup2.php", "myWindow",
"status = 1, height = 300, width = 300, resizable = 0" );
Oh, wouldn't it be great if I *was* crazy? ...then the world would be okay
Suki

The Wizard

#11
tammikuu 20, 2014, 11:17:20 AP
Hi Suki,

what you posted makes no sense to me. So maybe if I explane it will help -

I am displaying 12 image's in php, and when you click on one I want a popup to show off the image in a larger size.
So can you show me the code to make this happen?

I get how to make a simple text popup with known variables, but when the variable could be one of 12 choices is where I'm stuck.

Thanks

Wiz

All Colours Sam

#12
tammikuu 20, 2014, 11:46:15 AP
I was just showing you how to pass a var to the client side and now you say you want something different :(

Yes, if you fully explain what you actually want to do maybe someone can help/guide you.


Where do those choices come from?  a select form?
Oh, wouldn't it be great if I *was* crazy? ...then the world would be okay
Suki

The Wizard

#13
tammikuu 20, 2014, 12:44:31 IP
Koodi [Valitse]

function your_shopping_bag()
{
global $txt, $context, $modSettings, $boardurl, $scripturl;

echo '
<div class="cat_bar">
<h3 class="catbg" align="center">', $txt['wizards_shop_your_inventory'], '</h3>
</div>
<div class="windowbg">
<span class="topslice"><span></span></span>
<div class="content" style="height:auto;min-height:', $context['wizards_shop_box_height'],'px;">
<table align="center">
<tr>
<td>
';

$i = 0;

echo '
<center>
<table class="wizards_shop_5px_padding">
<tr valign="top">
';

foreach ($context['shop_inv']['items'] as $item)
{
if (empty($item))
continue;

$i++;

$name  = $item['name'];

echo '
<td align="left" valign="top">
<a href="' . $boardurl . '/index.php?action=wizard_popup&c=' . $item['image'] . '"><img width="', $modSettings['shopImageWidth'], '" height="', $modSettings['shopImageHeight'], '" src="', $boardurl, '/Themes/default/wizards-shop/small/', $item['image'], '" align="left" alt="Item Image" /></a>
</td>
<td>
', $name, '
<br /><font color="green">', $txt['wizards_shop_paid'], ': ', $item['amtpaid'], '</font>
<br />
';

// The order of the if statements here is important!
// If the item is in the trade centre
if ($item['trading'] == 1)
{
// Tell them that they can't use it, and give the option to stop trading
echo '
<br /><font color="orange"><i>', sprintf($txt['wizards_shop_trading'], formatMoney($item['tradecost'])), '</i></font><br /><a href="', $scripturl, '?action=shop_inv;do=trade_stop&id=', $item['id'], '">', $txt['wizards_shop_stoptrade'], '</a>';
}
else
{
// If the item is unusable
if ($item['can_use_item'] == false)
echo '
<br /><strong>', $txt['wizards_shop_unusable'], '</strong>';
// If the item requires input - Go to inv2
else
echo '
<br /><a href="', $scripturl, '?action=shop_inv;do=inv2&#38;image=', $item['image'], '&#38;id=', $item['id'], '">', $txt['wizards_shop_use'], '</a><br />';

// If the trade centre is enabled...
if ($modSettings['shopTradeEnabled'])
//... show the 'Trade Item' link
echo '
<a href="', $scripturl, '?action=shop_inv;do=trade_sell&id=', $item['id'], '">', $txt['wizards_shop_trading_item'], '</a><br /><br />';
}

$wiz = 3;

if ($i % $wiz == 0)
echo '<br /></td></tr>';
}

// If this listing should have paging at the bottom
if (isset($context['shop_inv']['pages']['current']) && isset($context['shop_inv']['pages']['total']))
{
echo '
<tr>
<td colspan="6" align="center"><strong>Pages: </strong>';

//If current page != 1, show '< Back' link
if ($context['shop_inv']['pages']['current'] != 1)
{
$prevPage = $context['shop_inv']['pages']['current'] - 1;
echo '
<a href="', $context['shop_inv']['pages']['link'], ';page=', $prevPage, '">', $txt['wizards_shop_back'], '</a>';
}
else
echo '
', $txt['wizards_shop_back'], '';

// Show links to all pages
for ($x = 1; $x <= $context['shop_inv']['pages']['total']; $x++)
{
// If this number is the current page, don't make number a link
if ($x == $context['shop_inv']['pages']['current'])
echo '
<strong>', $x, '</strong>';
else
echo '
<a href="', $context['shop_inv']['pages']['link'], ';page=', $x, '">', $x, '</a> ';
}

// If current page != last page, show 'Next >' link
if ($context['shop_inv']['pages']['current'] != $context['shop_inv']['pages']['total'])
{
$nextPage = $context['shop_inv']['pages']['current'] + 1;
echo '
<a href="', $context['shop_inv']['pages']['link'], ';page=', $nextPage, '">', $txt['wizards_shop_next2'], '</a> ';
}
else
echo '
', $txt['wizards_shop_next2'], ' ';

echo '
</td>
</tr>
</table>
';
}

echo '
</center>
</td>
</tr>
</table>
</div>
<span class="botslice"><span></span></span>
</div>
';
}

All Colours Sam

#14
tammikuu 20, 2014, 01:03:17 IP
So?

OK, unless you're actually willing to explain what you want to do, I cannot help you. In the code you just pasted there is no popup code or even an attempt to do so, I have no idea where exactly do you want to put it either.

I have no idea where this "var $c" comes from either. You don't answer the questions I asked you.

I see a lot of potential issues with your code, for example, (and I already told you about this) for $modSettings keys you need to use empty() unless and only unless you want to actually know if a setting DO exists and for that you better use isset()  never use the var directly unless you have total control over it and you're certain that it will return the value/type you expect.
Oh, wouldn't it be great if I *was* crazy? ...then the world would be okay
Suki

riou

#15
tammikuu 22, 2014, 07:25:12 AP
The Wizard, It sounds like you want something like a Lightbox?

The Wizard

#16
tammikuu 22, 2014, 11:42:53 AP
Hello:

I would like to thank everybody who tryed to help me on this. I have solved the problem.
I am posting a rough version demo code of my final solution. For anybody trying to add a similar feature to their mods.

Note: I am not trying to be secretive about my new mod design it fact I plan to make it public domain for all to use and do as they want with it. Just right now it's so raw that I can't posted it in the mod developers area. Trust me it will be worth the wait.

Wiz


Koodi [Valitse]

<?php

    $width = 300;
    $height = 300; 
    row['img_file_name'] = 'Dalek 1.png';

  //Use javascript to make the popup

    echo "
    <script>
        function load(){
            var load = window.open('http://www.tribeuniverse3.com/popup/big/".$row['img_file_name']."', ' ', 'scrollbars=no,menubar=no,height=".$height.",width=".$width.",resizable=no,toolbar=no,location=no,status=no');
        }
    </script>";
    //This will display our thumbnail on the screen and make a link to the popup function
    //that was just created in the above javascript.
    echo'
    <p>
        <a href="javascript:load()">
        <img src="http://www.tribeuniverse3.com/popup/small/'.$row['img_file_name'].'" />
        </a>
    </p>'; 
?>
Tulosta
Siirry ylös Sivuja1
Käyttäjän toimet
Advertisement: