Here's the site.
I contained the "Caption" button in a div and I'm trying to figure out how to position it relative to the image, just under it. So when I change the image, it positions itself just under the new image too. However, I can't even get it to position relative to the image. Here's the code:
<?php
$username = $_GET['username'];
session_start();
$_SESSION['username'] = $username;
//Database Information
$dbhost = "";
$dbname = "";
$dbuser = "";
$dbpass = "";
//Connect to database
mysql_connect ( $dbhost, $dbuser, $dbpass)or die("Could not connect: ".mysql_error());
mysql_select_db($dbname) or die(mysql_error());
//Do the query
$query = mysql_query("SELECT * FROM images ORDER BY idnum DESC LIMIT 5");
//Generate an array of all images
$images = array();
while($image = mysql_fetch_array($query)) {
//this adds each image to the images array
$images[] = $image;
$image['filename'] = $firstimage;
}
?>
<?php
// Beginning attempt at a caption script.
?>
<html>
<head>
<title>Home - Site in Development</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script type="text/javascript">
// Switches the url to view large image.
function switchImageUrl(url, width, height) {
var x = document.getElementById('caption_selection');
x.style.display = 'none';
document.getElementById('center_frame').style.backgroundImage = 'url' + '(' + url + ')';
document.getElementById('center_frame').style.width = width;
document.getElementById('center_frame').style.height = height;
}
</script>
<script type="text/javascript">
function selectionToggle() {
var x = document.getElementById('caption_selection');
if(x.style.display == 'block')
x.style.display = 'none';
else
x.style.display = 'block';
x.style.width = '75px';
x.style.height = '75px';
x.style.top = '0px';
x.style.left = '0px';
}
</script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#caption_selection").draggable({
containment : "#center_frame"
});
$("#caption_selection").resizable({
containment : "#center_frame"
});
});
</script>
</head>
<body onLoad="CalculateAllImageWidthes()">
<div id='account_links'>
<?php
if ($_SESSION['username']) {
echo "Welcome $username!";
} else { ?>
<a href='login.php'>Login</a> | <a href='register.php'>Register</a>
<?php } ?>
</div>
<h1>Picture Captions</h1>
<br/>
<br/>
<div id="left_bar">
Submit a picture here.
<hr/>
<h2>Top Images</h2>
<br/>
<div id="front_pg_images">
<?php foreach($images as $image) { ?>
<a onClick="switchImageUrl('<?php echo $image['filename']; ?>', '<?php echo $image['width']; ?>', '<?php echo $image['height']; ?>')"><img src="<?php echo $image['filename'];?>" width="72px" height="58px" id="front_pg_thumbnail"/></a>
<?php echo $image['name']." - by ".$image['submitter']; ?> <br/>
<br/>
<?php } ?>
</div>
</div>
<div id="center_frame" style="width: <?php echo $image['width']; echo "px" ?>; height: <?php echo $image['height']; echo "px" ?>; background-image: url('<?php echo $image['filename'];?>')" >
<div id="caption_selection" style="display:none">
</div>
</div>
<div id="toggle_select_container">
<input type="button" id="toggle_select" onClick="selectionToggle()" value="Caption"/>
</div>
</body>
</html>
I'm not sure where it's being set (probably styles.css), but change the positioning style for the '#center_frame' element from absolute to relative. That appears to fix the problem.
Why the need for static on either the picture or the button?
Put them both in a container div the width of the image and the button will always be below it :)
Add some margin to the button to so it's not sitting right on the bottom of the image.
Like this: http://jsfiddle.net/ChkXw/
Related
I'm attempting to position these icons to the bottom left of my page using CSS to align them. It works perfectly in all browser but Firefox. I've tried many things but cannot get it to work. You can check out the fiddle script and though it looks bad, you can see the icons are in fact positioned in the correct spot. When you load the actual webpage in Firefox, you can see the icons are actually more in the middle of the page. Can anyone tell me what's going on? I've tried rearranging the code many different ways and changing the position field but to no avail. Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<!--Blacklist-->
<?php
$file = file('blacklist.txt');
foreach ($file as $line)
{
if ($_SERVER['REMOTE_ADDR'] == $line) {
die;
}
}
?>
<!--IP Logger-->
<?php
if (getenv("REMOTE_ADDR") != "192.168.1.1")
{
$filename = "iplog.txt" ;
$file = file($filename);
$file = array_unique($file);
$fd = fopen ($filename , "r");
$fstring = fread ($fd , filesize ($filename)) ;
fclose($fd);
$fd = fopen ($filename , "w");
$fcounted = $fstring."\n".getenv("REMOTE_ADDR");
$fout= fwrite ($fd , $fcounted );
fclose($fd);
}
?>
<!--Hit Counter-->
<?php
if (getenv("REMOTE_ADDR") != "192.168.1.1")
{
$datei = fopen("counter.txt","r");
$count = fgets($datei, 1000);
fclose($datei);
$count=$count + 1 ;
$datei = fopen("counter.txt","w");
fwrite($datei, $count);
fclose($datei);
}
?>
<title>Endure Box</title>
<link rel="icon" type="image/ico" href="/images/favicon.ico">
<meta charset="UTF-8">
<meta name="author" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.interactive_bg.js"></script>
<script type="text/javascript" language="javascript" src="tooltip/tooltipscript.js"></script>
<link rel="stylesheet" href="tooltip/tooltipstyle.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--Disable Right Clicks-->
<script language="javascript">
document.onmousedown = disableclick;
function disableclick(event)
{
if (event.button == 2)
{
return false;
}
}
</script>
<!--View-->
<script type="text/javascript">
$(document).ready(function(){
$('#Page').fadeIn(500).removeClass('hidden');
resize();
});
window.onresize = function(event) {
resize();
};
function resize(){
if ($(window).width() < 800)
{
$("#Page").removeClass("Normal");
$("#Page").addClass("Small");
$("#IconBar").removeClass("Normal");
$("#IconBar").addClass("Small");
}
if ($(window).width() > 800)
{
$("#Page").removeClass("Small");
$("#Page").addClass("Normal");
$("#IconBar").removeClass("Small");
$("#IconBar").addClass("Normal");
}
}
</script>
<!--Animations-->
<script type="text/javascript">
$(document).ready(function(){
$("#Page").animate({opacity: 1}, 800);
$("#IconBar").animate({opacity: 1}, 850);
$("#hid").change(function() {
if(document.getElementById("hid").value)
{
$('#Form').fadeIn(500).removeClass('hidden');
$('#upload_button').removeClass('hidden');
$("#upload_button").animate({opacity: 1}, 400);
}
else
{
$('#Form').fadeOut(500).addClass('hidden');
$('#upload_button').addClass('hidden');
$("#upload_button").animate({opacity: 0}, 0);
}
});
$(".Box").mouseover(function(){
$(this).stop().animate({opacity: .95, height: 235, width: 235}, 150);
$("#OpenText").stop().animate({opacity: .85}, 400);
});
$(".Box").mouseout(function(){
$(this).stop().animate({opacity: .85, height: 220, width: 220}, 150);
$("#OpenText").stop().animate({opacity: 0}, 400);
});
$(".Icons").hover(function(){
$(this).animate({opacity: 1, height: 35, width: 35}, 100);
}, function(){
$(this).animate({opacity: .95, height: 32, width: 32}, 100);
});
});
function uploadstatus(uploading){
if (uploading)
{
$("#choosefile").addClass("hidden");
$("#Loading").removeClass("hidden");
$("#upload_button").addClass("hidden");
$("#upload_button").animate({opacity: 1}, 350);
$("#Form").animate({opacity: 0}, 0);
}
else
{
$("#Loading").addClass("hidden");
$("#upload_button").animate({opacity: 0}, 0);
$("#upload_button").removeClass("hidden");
$("#choosefile").removeClass("hidden");
}
}
</script>
<!--Body-->
<body oncontextmenu="return false">
<!--Input Parser-->
<script language="javascript">
String.prototype.ucfirst = function()
{
return this.charAt(0).toUpperCase() + this.substr(1);
}
$("document").ready(function(){
$("#hid").change(function() {
<!--Get File Name-->
var path = document.getElementById("hid").value;
var fileName = "" + path.match(/[^\/\\]+$/);
<!--Get Title-->
var titlelength = fileName.indexOf('.');
var truncatedtitle = fileName.substring(0, titlelength).ucfirst();;
document.getElementById('Title').value = truncatedtitle;
});
});
</script>
<!--Cleanup-->
<script language="javascript">
$("document").ready(function(){
$("#hid").change(function() {
if (document.getElementById("SuccessText") || document.getElementById("ErrorText") || document.getElementById("NameText"))
{
if (document.getElementById('SuccessText'))
{
var SuccessText = document.getElementById('SuccessText');
SuccessText.parentNode.removeChild(SuccessText);
}
if (document.getElementById('NameText'))
{
var NameText = document.getElementById('NameText');
NameText.parentNode.removeChild(NameText);
}
if (document.getElementById('ErrorText'))
{
var ErrorText = document.getElementById('ErrorText');
ErrorText.parentNode.removeChild(ErrorText);
}
}
});
});
</script>
<!--Body-->
<div class="bg" data-ibg-bg="/images/background.jpg">
<div class="display" id="Page" style="opacity:0;" align="center">
</br></br></br>
<img src="/images/logo.png">
</br></br></br>
<img style="opacity:.8;cursor:default" src="/images/box.png" class="Box" id="Box">
</br></br>
<p class="OpenText" id="OpenText" style="opacity:0;cursor:default">Open the box</p>
</br>
<!--Form-->
<form action="index.php" method="post" enctype="multipart/form-data">
<div id="choosefile">
<div id="doit">
<img src="images/choose_file.png"/>
</div>
<input id="hid" name="file" type="file" size=1></div>
</br>
<img src="images/loading.gif" id="Loading" class="hidden" width="85" height="85">
<div class="FormText hidden" id="Form" style="cursor:default">
File Name:
</br>
<input class="InfoText" type="text" id="Title" name="Title" value="" size="30">
</br></br>
Private:
</br>
<select class="InfoText" id="Private" name="Private" style="width:150px">
<option value="Public">Public</option>
<option value="Private">Private</option>
</select>
</br></br>
<input type="image" src="/images/upload_button.png" id="upload_button" value="Submit" class="hotspot hidden" onmouseover="tooltip.show('Your IP is <?php echo getenv(REMOTE_ADDR); ?>');" onmouseout="tooltip.hide();" onclick="uploadstatus(true);"/>
</br>
</div>
</form>
<!--Upload-->
<?php
if ($_POST)
{
if (strpos(($_FILES["file"]["name"]), 'php') == TRUE || strpos(($_FILES["file"]["name"]), 'jsp') == TRUE)
{
echo "<p class='ErrorText' id='ErrorText'>Filetype Banned!</p>";
}
else
{
$path = $_FILES['file']['name'];
$ext = pathinfo($path, PATHINFO_EXTENSION);
if ($_POST['Private'] == "Private")
{
if (!file_exists('contents/private/' . getenv(REMOTE_ADDR)))
{
mkdir('contents/private/' . getenv(REMOTE_ADDR), 0777, true);
}
$folder = "contents/private/" . getenv(REMOTE_ADDR);
}
else
{
$folder = "contents/public/";
}
$temp = explode(".", $_FILES["file"]["name"]);
$newfilename = $_POST['Title'] . '.' . end($temp);
move_uploaded_file($_FILES["file"]["tmp_name"], $folder . '/' . $newfilename);
$uploadStatus = true;
}
}
if ($uploadStatus)
{
if ($_FILES["file"]["error"] > 0)
{
echo "<p class='ErrorText' id='ErrorText'>Upload Failed!</p>";
if ($_FILES["file"]["error"] == 1)
{
echo "<p class='ErrorText' id='ErrorText'>File exceeds PHP upload limit (4 GB)</p>";
}
else if ($_FILES["file"]["error"] == 2)
{
echo "<p class='ErrorText' id='ErrorText'>File exceeds HTML upload limit (4 GB)</p>";
}
else if ($_FILES["file"]["error"] == 3)
{
echo "<p class='ErrorText' id='ErrorText'>The file was only partially uploaded (network interruption?)</p>";
}
else if ($_FILES["file"]["error"] == 4)
{
echo "<p class='ErrorText' id='ErrorText'>No file was selected!</p>";
}
else if ($_FILES["file"]["error"] == 6)
{
echo "<p class='ErrorText' id='ErrorText'>The temporary folder is missing! Contact administrator!</p>";
}
else if ($_FILES["file"]["error"] == 7)
{
echo "<p class='ErrorText' id='ErrorText'>Failed to write file to disk (Permission error?)</p>";
}
else if ($_FILES["file"]["error"] == 8)
{
echo "<p class='ErrorText' id='ErrorText'>A PHP extension has stopped the upload!</p>";
}
}
else
{
echo '<script type="text/javascript">', 'uploadstatus(false); ', '</script>';
echo "<p class='SuccessText' id='SuccessText'>Upload Successful!</p>";
echo "<p class='FileText' id='NameText'>" . $_FILES["file"]["name"] ." uploaded!</p></br>";
$ipLog="uploadlog.txt";
$friendly_name = $_FILES["file"]["name"];
$file_size = $_FILES["file"]["size"] / 1024 / 1024 . " MB";
$register_globals = (bool) ini_get('register_gobals');
$ip = getenv(REMOTE_ADDR);
$date = date ('m-d-Y H:i:s');
$log = fopen("$ipLog", "a+");
if (preg_match("/\bhtm\b/i", $ipLog) || preg_match("/\bhtml\b/i", $ipLog))
{
fputs($log, "File: $friendly_name | Size: $file_size | IP Address: $ip | Date Uploaded: $date <br>");
}
else
{
fputs($log, "File: $friendly_name | Size: $file_size | IP Address: $ip | Date Uploaded: $date \n");
}
fclose($log);
$uploadStatus = false;
}
}
?>
</div>
</div>
<!--Background Resize Manager-->
<script type="text/javascript">
$(".bg").interactive_bg();
$(window).resize(function(){$(".bg > .ibg-bg").css({width: $(window).outerWidth(),height: $(window).outerHeight()})})
</script>
</body>
<!--Icons-->
<div id="IconBar" style="opacity:0;">
<img src="/images/info.png" class="hotspot Icons" onmouseover="tooltip.show('We respect your privacy, but we do not hold any responsibilty for any damages uploaded to the box. If there is an issue with any content, including personal and copyright complaints, please feel free to email me for corrections.');" onmouseout="tooltip.hide();";
style="position:fixed;
float:left;
left:12px;
bottom:6px;
z-index:1;">
<a href="/contents/private/index.php?dir=<?php echo getenv(REMOTE_ADDR); ?>"><img src="/images/lock.png" class="hotspot Icons" onmouseover="tooltip.show('View your private files assciated with: <?php echo getenv(REMOTE_ADDR); ?>');" onmouseout="tooltip.hide();";
style="position:fixed;
float:left;
left:54px;
bottom:6px;
z-index:1;">
</a>
<a href="http://box.endurehosting.com/printscreensharp/PrintScreen%23.exe"><img src="/images/printscreensharp.png" class="hotspot Icons" onmouseover="tooltip.show('Download the latest version of PrintScreen#, the automatic screensnapper');" onmouseout="tooltip.hide();";
style="position:fixed;
float:left;
left:96px;
bottom:6px;
z-index:1;">
</a>
<a href="http://helpdesk.endurehosting.com/"><img src="/images/email.png" class="hotspot Icons" onmouseover="tooltip.show('If you have any suggestions, questions, or comments, feel free to shoot me an email at Kinlough#EndureMail.com or use our helpdesk');" onmouseout="tooltip.hide();";
style="position:fixed;
float:left;
left:138px;
bottom:6px;
z-index:1;">
</a>
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=BQLLXSL2AMZS8"><img src="/images/donate.png" class="hotspot Icons" onmouseover="tooltip.show('Buy me a coffee!');" onmouseout="tooltip.hide();";
style="position:fixed;
float:left;
left:180px;
bottom:6px;
z-index:1;">
</a>
</div>
</html>
If I remove the -moz-transform: scale(1); on the .Normal class, it appears like it does in Chrome on FireFox:
.Normal {
zoom: 1;
/*-moz-transform: scale(1);*/
}
That line can be found in the file: http://box.endurehosting.com/css/style.css
Updated fiddle: http://jsfiddle.net/uw8f9/2326/
I am trying to create a simple plugin to return my contact form 7 code which works fine in any page template. Everything works fine except the line to display contact form. I think plugin is loading before contact form or there are any other problem i dont know. Here is my code. Thank you all.
<?php
function contact_popup()
{
echo "
<div class='contact-popup'>
<div class='clickme-area'>
<a href='#' class='clickme' >We'd love your feedback</a>
</div>
<div class='testing'>
<div class='contact-form'>
<div class='header'>
<h2 class='title'>Leave your feedback</h2>
<a class='closeme' href='#'> X </a>
</div>
<?php do_shortcode( '[contact-form-7 id='55' title='Contact form 1']' ); ?>
</div>
</div>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<link rel='stylesheet' href='http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet' href='style.css'>
<script src='http://code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
<script>
$(document).ready(function(){
$('.wpcf7-submit').click(function(){
$('.contact-popup').animate({height:'470px'}, 900);
});
});
</script>
<script>
$(document).ready(function(){
$('.closeme').click(function(){
$('.testing').hide();
$('.clickme').fadeToggle('slow');
$( '.contact-popup' ).dialog({
width: 225,
height: 31,
position: [1000,200],
show: {
effect: 'fade',
duration: 1000
},
hide: {
effect: 'fade',
duration: 1000
}
});
});
});
</script>
<script>
$(document).ready(function(){
$('.clickme').click(function(){
$('.testing').fadeToggle('slow');
$('.clickme').hide();
$( '.contact-popup' ).dialog({
width: 220,
height: 356,
position: [1000,200],
show: {
effect: 'fade',
duration: 1000
},
hide: {
effect: 'fade',
duration: 1000
}
});
});
});
</script>
<script>
$(function() {
$( '.contact-popup' ).dialog({
create: function (event, ui) {
$('.ui-widget-header').hide();
$('.testing').hide();
},
width:225,
height:36,
position: [1000,200],
dialogClass:'dialog-class',
show: {
effect: 'fade',
duration: 1000
},
hide: {
effect: 'fade',
duration: 1000
}
}).css('position','fixed');
});
</script>
";
}
?>
You can't execute php inside of an echo statement.
Since you're using a double-quoted string, you could do something like this:
function contact_popup() {
$cf = do_shortcode( '[contact-form-7 id='55' title='Contact form 1']' );
echo "
...
</div>
$cg
</div>
...
";
Even better would be to create your string using HEREDOC syntax, with a placeholder like %%CONTACT_FORM%% as your contact form, then use str_replace to replace the placeholder with the $cf variable and echo that.
Why don't you put all the html styling for the form in the contact form itself and then just do:
<?php echo do_shortcode( '[contact-form-7 id="55" title="Contact form 1"]' ); ?>
I would like to click in an iframe and open the link in a new tab with jQuery UI, but it does not work, and the new link opens in the same tab.
However, if I click on any point on the screen that is outside the iframe the new tab is created.
I appreciate if anyone knows help me
Regards,
Christian
The main page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<style>
#tabs { margin-top: 1em; }
#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
#add_tab { cursor: pointer; }
</style>
<script type="text/javascript">
$(function () {
$('.dock').find("a").click(function(event) {
event.preventDefault();
var name = $(event.currentTarget).text(),
url = $(event.currentTarget).attr("href");
createNewTab(name, url, 5, true);
return false;
});
$(this).click(function(e){
$('iframe').contents().find("a").click(function(event){
event.preventDefault();
var name = $(event.currentTarget).text(),
url = $(event.currentTarget).attr("href");
createNewTab(name, url, 5, true);
return false;
});
});
tabs = $("#tabs").tabs();
tabCounter = 1;
function selectNewTab() {
$('#tabs').tabs('option', 'active', -1);
}
function addTab(name, url) {
tabCounter++;
var tabTemplate = "<li><a href='#{href}'>#{label}</a><span class='ui-icon ui-icon-close' role='presentation'>Remover Tab</span></li>";
var id = "tabs-" + tabCounter,
li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, name)),
tabContentHtml = '<iframe id="ifr" class="tabs-iframe" src="' + url + '" width="100%" height="400" scrolling="auto" frameborder="no" align="center"></iframe>';
tabs.find(".ui-tabs-nav").append(li);
tabs.append("<div id='" + id + "'>" + tabContentHtml + "</div>");
tabs.tabs("refresh");
}
function createNewTab(name, url, size, checkTabExists) {
addTab(name, url);
selectNewTab();
}
});
</script>
</head>
<body>
<div class="content">
<div id="tabs">
<ul>
<li>First Tab</li>
</ul>
<div id="tabs-1">
<p>Tab 1</p>
</div>
</div>
</div>
<div class="dock">
New Tab
</div>
</body>
</html>
The another page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<head>
</head>
<body>
<div>
Click Here
</div>
</body>
</html>
#ChristianB you are not attaching the click event to your iFrames when they are created, you are trying to attach the click event to the existing iFrames. I have tried to change the code in your function addTab;
I have attached an id attribute to your iFrames, so I can attach the click event to the iFrame document once iFrame is created.
Try This:
function addTab(name, url) {
tabCounter++;
var tabTemplate = "<li><a href='#{href}'>#{label}</a><span class='ui-icon ui-icon-close' role='presentation'>Remover Tab</span></li>";
var id = "tabs-" + tabCounter,
li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, name)),
tabContentHtml = '<iframe id="ifr' + tabCounter + '" class="tabs-iframe" src="' + url + '" width="100%" height="400" scrolling="auto" frameborder="no" align="center"></iframe>';
tabs.find(".ui-tabs-nav").append(li);
tabs.append("<div id='" + id + "'>" + tabContentHtml + "</div>");
tabs.tabs("refresh");
//Add the Link Click to newly created iFrame
$('#ifr'+tabCounter).ready(function(e) {
/* This does not work with chrome
$('#ifr'+tabCounter).contents().find("a").bind('click', function(event){
*/
//Below throws an exception in chrome, but still works
$('#ifr'+tabCounter.contentWindow.document.body).find(a).bind('click', function(event){
//event.preventDefault();
var name = $(event.currentTarget).text();
var url = $(event.currentTarget).attr("href");
createNewTab(name, url, 5, true);
return false;
});
});
}
Thanks Mohit Padalia. You have helped me a lot. I tried using your code but did not work. I believe it worked for you, because the function selectNewTab() was not working. In this case, I add a policy to force the selection of the new tab created. Note that when running the code below the new tab is selected and you click "ckick here" the new link will open in the same tab. However, if you click anywhere on the screen outside the iframe and then click the link that will work, and the new tab is created.
Kind Regards,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<style>
#tabs { margin-top: 1em; }
#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
#add_tab { cursor: pointer; }
</style>
<script type="text/javascript">
$(function () {
$('.dock').find("a").click(function(event) {
event.preventDefault();
var name = $(event.currentTarget).text(),
url = $(event.currentTarget).attr("href");
createNewTab(name, url, 5, true);
return false;
});
$(this).click(function(e){
$('iframe').contents().find("a").click(function(event){
event.preventDefault();
var name = $(event.currentTarget).text(),
url = $(event.currentTarget).attr("href");
createNewTab(name, url, 5, true);
return false;
});
});
tabs = $("#tabs").tabs();
tabCounter = 1;
function selectNewTab() {
$('#tabs').tabs('option', 'active', -1);
}
function addTab(name, url) {
tabCounter++;
var tabTemplate = "<li><a href='#{href}'>#{label}</a><span class='ui-icon ui-icon-close' role='presentation'>Remover Tab</span></li>";
var id = "tabs-" + tabCounter,
li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, name)),
tabContentHtml = '<iframe id="ifr' + tabCounter + '" class="tabs-iframe" src="' + url + '" width="100%" height="400" scrolling="auto" frameborder="no" align="center"></iframe>';
tabs.find(".ui-tabs-nav").append(li);
tabs.append("<div id='" + id + "'>" + tabContentHtml + "</div>");
tabs.tabs("refresh");
//Add force select new tab
tabs.tabs('option', 'active', -1);
//Add the Link Click to newly created iFrame
$('#ifr'+tabCounter).ready(function(e) {
/* This does not work with chrome
$('#ifr'+tabCounter).contents().find("a").bind('click', function(event){
*/
//Below throws an exception in chrome, but still works
$('#ifr'+tabCounter.contentWindow.document.body).find(a).bind('click', function(event){
//event.preventDefault();
var name = $(event.currentTarget).text();
var url = $(event.currentTarget).attr("href");
createNewTab(name, url, 5, true);
return false;
});
});
}
function createNewTab(name, url, size, checkTabExists) {
addTab(name, url);
//selectNewTab();
}
});
</script>
</head>
<body>
<div class="content">
<div id="tabs">
<ul>
<li>First Tab</li>
</ul>
<div id="tabs-1">
<p>Tab 1</p>
</div>
</div>
</div>
<div class="dock">
New Tab
</div>
</body>
</html>
The map will load just fine but the second I try to set a height and width % it won't show, how can I fix this? The only way the map will show is if I set it with px, but then the mobile version of the map is all wonky and offset on the side of the screen. Thanks.
<?php
/* Include header and config and set variable*/
require_once('config.inc.php');
require_once($rootdir . $dirsubfolder . 'navbar.php');
$route = $_GET['route'];
?>
<?php
/* User wants to retrieve their route */
if (isset($route)) {
?>
<?php
/* User wants Route 1 */
if (strcmp($route, "sunroute1") == 0) {
?>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=asdasd&sensor=true&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
<?php
printf('worked');
} else { printf('failed'); }
?>
<div class="container hero-unit">
<div id="map_canvas" style="width: 50%; height: 50%;"></div>
</div>
<?php
/* End isset(route) */
}
/* Include footer */
require_once($rootdir . $dirsubfolder . 'footer.php');
?>
I'm assuming you're using the responsive form of Bootstrap...
You'll need to set a height and width of 100% for your html, body and .hero-unit elements.
Here's a jsFiddle.
I am creating a theme in which I have created some custom post type products and some custom meta boxes to submit their respective custom information like its cost and expiry date.
By doing some search add_theme_support( 'post-thumbnails' );, I was able to add a featured image column to upload featured image related to a particular post. But it only allows me to add single image and I want to upload multiple images related to one particular custom post .For example different images of single product.
For this I found different solutions on internet and one of them which I found the most suitable to my problem is this, but again it only allows me to upload only one image but different than featured image.
Does WordPress has any functionality to upload multiple images like featured image upload particularly for single post or is there any plugin for this task?
<?php
add_action( 'admin_init', 'add_post_gallery_so_14445904' );
add_action( 'admin_head-post.php', 'print_scripts_so_14445904' );
add_action( 'admin_head-post-new.php', 'print_scripts_so_14445904' );
add_action( 'save_post', 'update_post_gallery_so_14445904', 10, 2 );
/**
* Add custom Meta Box to Posts post type
*/
function add_post_gallery_so_14445904()
{
add_meta_box(
'post_gallery',
'Studio Image Uploader',
'post_gallery_options_so_14445904',
'post',// here you can set post type name
'normal',
'core'
);
}
/**
* Print the Meta Box content
*/
function post_gallery_options_so_14445904()
{
global $post;
$gallery_data = get_post_meta( $post->ID, 'gallery_data', true );
// Use nonce for verification
wp_nonce_field( plugin_basename( __FILE__ ), 'noncename_so_14445904' );
?>
<div id="dynamic_form">
<div id="field_wrap">
<?php
if ( isset( $gallery_data['image_url'] ) )
{
for( $i = 0; $i < count( $gallery_data['image_url'] ); $i++ )
{
?>
<div class="field_row">
<div class="field_left">
<div class="form_field">
<label>Image URL</label>
<input type="text"
class="meta_image_url"
name="gallery[image_url][]"
value="<?php esc_html_e( $gallery_data['image_url'][$i] ); ?>"
/>
</div>
</div>
<div class="field_right image_wrap">
<img src="<?php esc_html_e( $gallery_data['image_url'][$i] ); ?>" height="48" width="48" />
</div>
<div class="field_right">
<input class="button" type="button" value="Choose File" onclick="add_image(this)" /><br />
<input class="button" type="button" value="Remove" onclick="remove_field(this)" />
</div>
<div class="clear" /></div>
</div>
<?php
} // endif
} // endforeach
?>
</div>
<div style="display:none" id="master-row">
<div class="field_row">
<div class="field_left">
<div class="form_field">
<label>Image URL</label>
<input class="meta_image_url" value="" type="text" name="gallery[image_url][]" />
</div>
</div>
<div class="field_right image_wrap">
</div>
<div class="field_right">
<input type="button" class="button" value="Choose File" onclick="add_image(this)" />
<br />
<input class="button" type="button" value="Remove" onclick="remove_field(this)" />
</div>
<div class="clear"></div>
</div>
</div>
<div id="add_field_row">
<input class="button" type="button" value="Add Field" onclick="add_field_row();" />
</div>
</div>
<?php
}
/**
* Print styles and scripts
*/
function print_scripts_so_14445904()
{
// Check for correct post_type
global $post;
if( 'post' != $post->post_type )// here you can set post type name
return;
?>
<style type="text/css">
.field_left {
float:left;
}
.field_right {
float:left;
margin-left:10px;
}
.clear {
clear:both;
}
#dynamic_form {
width:580px;
}
#dynamic_form input[type=text] {
width:300px;
}
#dynamic_form .field_row {
border:1px solid #999;
margin-bottom:10px;
padding:10px;
}
#dynamic_form label {
padding:0 6px;
}
</style>
<script type="text/javascript">
function add_image(obj) {
var parent=jQuery(obj).parent().parent('div.field_row');
var inputField = jQuery(parent).find("input.meta_image_url");
tb_show('', 'media-upload.php?TB_iframe=true');
window.send_to_editor = function(html) {
var url = jQuery(html).find('img').attr('src');
inputField.val(url);
jQuery(parent)
.find("div.image_wrap")
.html('<img src="'+url+'" height="48" width="48" />');
// inputField.closest('p').prev('.awdMetaImage').html('<img height=120 width=120 src="'+url+'"/><p>URL: '+ url + '</p>');
tb_remove();
};
return false;
}
function remove_field(obj) {
var parent=jQuery(obj).parent().parent();
//console.log(parent)
parent.remove();
}
function add_field_row() {
var row = jQuery('#master-row').html();
jQuery(row).appendTo('#field_wrap');
}
</script>
<?php
}
/**
* Save post action, process fields
*/
function update_post_gallery_so_14445904( $post_id, $post_object )
{
// Doing revision, exit earlier **can be removed**
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return;
// Doing revision, exit earlier
if ( 'revision' == $post_object->post_type )
return;
// Verify authenticity
if ( !wp_verify_nonce( $_POST['noncename_so_14445904'], plugin_basename( __FILE__ ) ) )
return;
// Correct post type
if ( 'post' != $_POST['post_type'] ) // here you can set post type name
return;
if ( $_POST['gallery'] )
{
// Build array for saving post meta
$gallery_data = array();
for ($i = 0; $i < count( $_POST['gallery']['image_url'] ); $i++ )
{
if ( '' != $_POST['gallery']['image_url'][ $i ] )
{
$gallery_data['image_url'][] = $_POST['gallery']['image_url'][ $i ];
}
}
if ( $gallery_data )
update_post_meta( $post_id, 'gallery_data', $gallery_data );
else
delete_post_meta( $post_id, 'gallery_data' );
}
// Nothing received, all fields are empty, delete option
else
{
delete_post_meta( $post_id, 'gallery_data' );
}
}
?>
ooh thanks for telling me that Brasofilo.
And the right answer is one can upload multiple images through the media upload button bellow the title of the post and can display those images in a gallery on front end by using gallery shortcode for-eg:-
<?php echo do_shortcode('[gallery size="thumbnail"]'); ?>