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/
Related
I have a gap just below my first pre tag I can not remove it.
I have tried
pre {
margin: 0 0 0;
}
And
pre {
margin: 0 0 0 !important;
}
But still shows
Question: How is it possible to correctly remove the margin or padding
just below the first pre?
Note: just found out something to do with nl2br on controller function below
I use codeigniter and ajax to generate the preview.
CSS
<style type="text/css">
body {
background-color: #F0F0F0;
}
pre {
display: block;
padding: 9.5px;
margin: 0 0 0 !important;
font-size: 13px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
}
hr {
background-color: #dedede !important;
height: 1px !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
font-family: Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
margin-top: 0;
}
</style>
Script
<script type="text/javascript">
$('#preview-question').on('click', function (e) {
$.ajax({
url: "<?php echo base_url('question/preview');?>",
type: 'POST',
data: {
title: $('#title').val(),
question: $('#question').val(),
'<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>'
},
dataType: 'json',
success: function(response){
if (response.success) {
$('#preview').html(response.question);
$('#preview pre br').remove();
var str = $('#preview pre').html();
$('#preview pre').html(str.replace(/</g, "<").replace(/>/g, ">"));
$('pre').each(function(i, block) {
hljs.highlightBlock(block);
});
} else {
}
}
});
e.preventDefault();
});
</script>
Function
public function preview() {
$data = array('success' => false, 'question' => '');
if ($_POST) {
$data['question'] = nl2br($this->input->post('question'));
$data['success'] = true;
}
echo json_encode($data);
}
FULL HTML
<?php echo form_open_multipart('question/create', array('id' => 'question_create', 'class' => 'form-horizontal', 'role' => 'form'));?>
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title"></h1>
</div>
<div class="panel-body">
<div class="form-group">
<label class="col-lg-2">Title</label>
<div class="col-lg-10">
<input type="text" name="title" id="title" class="form-control" placeholder="Title" />
</div>
</div>
<div class="form-group">
<label class="col-lg-2">Question</label>
<div class="col-lg-10">
<textarea name="question" id="question" class="form-control" rows="10"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-lg-2"></label>
<div class="col-lg-10">
<div id="preview"></div>
</div>
</div>
</div>
<div class="panel-footer">
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" id="preview-question" class="btn btn-default">Preview</button>
<button type="button" class="btn btn-warning">Clear Textarea</button>
Cancel
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#preview-question').on('click', function (e) {
$.ajax({
url: "<?php echo base_url('question/preview');?>",
type: 'POST',
data: {
title: $('#title').val(),
question: $('#question').val(),
'<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>'
},
dataType: 'json',
success: function(response){
if (response.success) {
$('#preview').html(response.question);
$('#preview pre br').remove();
var str = $('#preview pre').html();
$('#preview pre').html(str.replace(/</g, "<").replace(/>/g, ">"));
$('#preview pre').each(function(i, block) {
hljs.highlightBlock(block);
});
} else {
}
}
});
e.preventDefault();
});
</script>
<?php echo form_close();?>
I think if you format your HTML like this, you can manage the margins of a pre element. You have to apply the 'box' styles of color and backgroud e.g. to the .highlight class and the other styles to the pre.
The code element is optional if you use the same 'code recognizer' as bootstrap.
HTML
<figure class="highlight">
<pre>
<!--<code class="language-html" data-lang="html">-->
<!-- your code here -->
<!--</code>-->
</pre>
</figure>
CSS
.highlight {
padding: 9px 14px;
margin-bottom: 0; /* no margin-bottom */
}
First i think you should use
pre {
margin: 0 0 0 0 !important;
}
instead of
pre {
margin: 0 0 0 !important;
}
Let me know if that helps
Add clear into the pre tag
pre {
clear:both;
}
Thanks to #djl suggestion I have found out i needed to add replace('\n', '') to my script below to remove invisible line breaks
All working
<script type="text/javascript">
$('#preview-question').on('click', function (e) {
$.ajax({
url: "<?php echo base_url('question/preview');?>",
type: 'POST',
data: {
title: $('#title').val(),
question: $('#question').val(),
'<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>'
},
dataType: 'json',
success: function(response){
if (response.success) {
$('#preview').html(response.question);
$('#preview pre br').remove();
var str = $('#preview pre').html();
$('#preview pre').html(str.replace(/</g, "<").replace(/>/g, ">").replace('\n', ''));
$('#preview pre').each(function(i, block) {
hljs.highlightBlock(block);
});
} else {
}
}
});
e.preventDefault();
});
</script>
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>
I am new to this Google web translator. I want to add flags in front of each language I am using here.
Here is my code:
<div id="google_translate_element">
</div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ar,de,en,fr,ru,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, multilanguagePage: true}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>
How to add flags to the google web translator please?
<style type="text/css">
.translation-links {
text-align:right;
position:absolute;
right:0px;
top:3px;
}
.translation-links img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
cursor: pointer;
margin-right:8px;
height:24px;
width:24px;
}
.translation-links img:hover {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
}
</style>
<div class="translation-links">
<a class="english" data-lang="English"><img alt="English" title="English" src="En_flag.png"></a>
<a class="spanish" data-lang="Spanish"><img alt="Spanish" title="Spanish" src="Es_flag.png"></a>
<a class="french" data-lang="French"><img alt="French" title="French" src="Fr_flag.png"></a>
<a class="german" data-lang="German"><img alt="German" title="German" src="De_flag.png"></a>
</div>
<div id="google_translate_element" style="display:none;"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', autoDisplay: false}, 'google_translate_element'); //remove the layout
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
function triggerHtmlEvent(element, eventName)
{
var event;
if(document.createEvent) {
event = document.createEvent('HTMLEvents');
event.initEvent(eventName, true, true);
element.dispatchEvent(event);
}
else {
event = document.createEventObject();
event.eventType = eventName;
element.fireEvent('on' + event.eventType, event);
}
}
<!-- Flag click handler -->
var jq = $.noConflict();
jq('.translation-links a').click(function(e)
{
e.preventDefault();
var lang = jq(this).data('lang');
jq('#google_translate_element select option').each(function(){
if(jq(this).text().indexOf(lang) > -1) {
jq(this).parent().val(jq(this).val());
var container = document.getElementById('google_translate_element');
var select = container.getElementsByTagName('select')[0];
triggerHtmlEvent(select, 'change');
}
});
});
</script>
You will probably consider me a spoil sport for not working with wordpress for this purpose.
However I just want to use a flatfile blog system for a small site. I am using ozjournals-3.2 blog system.
I am seeking to install a header and a site navigation at the top of the blog page so that it coordinates with the existing site. I have had some success with the header but the navigation is making me struggle! I want navigation to position underneath the header as attached image demonstrates. Currently the task is presenting two problems that i need to find a work around for:
Nav will not center on page but keeps left even when I margin:auto; ?
Cannot get it to position at the foot of the header image!
My nav css is as follows:
.nav {
width: 950px;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #3b3b44; /*Navigation Active Background*/
border-top: 1px solid #ccf;
border-bottom: 1px solid #ccf;}
.nav ol {
list-style: none;
width: 950px;
margin: 0 auto;
padding: 0; }
.nav li {
float: left; }
.nav li a {
display: block;
padding: 2px 20px;
text-decoration: none;
font-family: Helvetica, arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #fff; /*Active Text Color*/
border-right: 1px solid #ccf; }
.nav li:first-child a {
border-left: 0px solid #ccf; }
.nav li a:hover {
color: #000; /*Active Hover Color*/
background-color: #8db3ff; } /*Navigation Hover Background*/
#header {
height: 185px;
margin-top: 15px;
background: url(zitemplateChange.jpg);
border-bottom: 30px solid #cc0; /*showing where I want navigation to position*/
}
and the index.php
<!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">
<head>
<link rel="stylesheet" href="themes/default/zitemplateChange.css" type="text/css" media="screen" />
</head>
<body>
<div class="nav">
<ol>
<li>Home</li>
<li>About</li>
<li>Book Preview</li>
<li>Guestbook</li> <li>Tell a Friend</li>
<li>Contact</li>
<li>Support</li>
</ol>
</div>
<?php
/********************************************************************************************************
OZJournals Version 3.2 released by Online Zone <https://sites.google.com/site/onlinezonejournals>
Copyright (C) 2006-2011 Elaine Aquino <elaineaqs#gmail.com>
This program is free software; you can redistribute it and/or modify it
under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or (at your option)
any later version.
********************************************************************************************************/
# For the session
ob_start();
# For function file inclusion
include "functions.php";
# For language file inclusion
$langfile = file_get_contents("lang/index.php");
$eachlang = explode("\t", $langfile);
$oklang = $eachlang[1];
$uselang = file_get_contents("lang/$oklang.php");
$lang = explode("\n", $uselang);
# Clean the GET variablezzz
$clean['show'] = string_filter_nospace($_GET['show']);
$clean['id'] = int_filter($_GET['id']);
$clean['p'] = string_filter_nospace($_GET['p']);
$clean['f'] = int_filter($_GET['f']);
$clean['pn'] = int_filter($_GET['pn']);
# Printer-friendly view
if($clean['show'] == "printpreview") {
if(isset($clean['id'])) {
$id = super_filter($clean['id']);
if(file_exists("$datadirectory/$id.php")) {
$pfile = file_get_contents("$datadirectory/$id.php");
$what = explode("\t", $pfile);
die("<html><head><title>$what[1]</title></head><body onload=\"window.print()\"><h1>$what[1]</h1><h5>Posted by $what[4] [ $what[5] ]<br />Date: ".date($timeformat, $what[2])."<br />Category: $what[6]</h5><p>$what[3]</p><h5>Source URL: <script>document.writeln(self.location)</script></h5></body></html>");
}
}
}
# RSS view
if($clean['show'] == "rss") {
die(generaterss());
}
# Theme Picker
$themefile = file_get_contents("themes/index.php");
$eachtheme = explode("\t", $themefile);
$oktheme = $eachtheme[1];
include "themes/$oktheme/advanced.php";
$header = implode(" ", file("themes/$oktheme/header.php"));
$header = str_replace("{blogtitle}", $blogtitle, $header);
$header = str_replace("{subtitle}", subtitle($clean["show"], $clean["p"], $clean["f"]), $header);
$header = str_replace("{metakeywords}", $metakeywords, $header);
$header = str_replace("{metadescription}", $metadescription, $header);
$header = str_replace("{author}", $auth, $header);
//$header = str_replace("{header}", $blogheader, $header);
$header = str_replace("{mainlinks}", $mainlinks, $header);
$header = str_replace("{add-ons}", $addons, $header);
$header = str_replace("{search}", $search, $header);
$header = str_replace("{categories}", $categories, $header);
$header = str_replace("{archives}", $archives, $header);
$header = str_replace("{miscellaneous}", $miscellaneous, $header);
$header = str_replace("{adminmenu}", "", $header);
$header = str_replace("{usermenu}", "", $header);
$header = str_replace("{footer}", $blogfooter, $header);
echo $header;
# Signing out Initial
if($clean['show'] == "signout") {
session_start();
session_destroy();
header("Location: index.php?show=signout2");
}
# Signing out Part 2
if($clean['show'] == "signout2") {
adminpanel("$lang[1]<br /><br />");
}
# Sign-in
elseif($clean['show'] == "signin") {
echo "<h3>$lang[2]</h3>\n";
echo "<form name=\"e\" method=\"post\" action=\"index.php?show=signinok\">\n";
echo "<table border=\"0\">\n";
echo "<tr><td width=\"40%\">$lang[3]</td>";
echo "<td width=\"60%\"><input type=\"radio\" name=\"mode\" value=\"admin\" checked=\"checked\" /> $lang[4] \n";
echo "<input type=\"radio\" name=\"mode\" value=\"user\"> $lang[5] </td></tr>\n";
echo "<tr><td width=\"40%\"> $lang[6] </td>";
echo "<td width=\"60%\"><input type=\"text\" name=\"username\" /></td></tr>\n";
echo "<tr><td width=\"40%\"> $lang[7] </td>";
echo "<td width=\"60%\"><input type=\"password\" name=\"password\" /></td></tr>\n";
echo "</table><br />\n";
echo "<button type=\"submit\"> $lang[8] </button> \n";
echo "<button type=\"reset\"> $lang[9] </button> \n";
echo "</form><br /><br />\n";
}
# Blog
elseif($clean['show'] == "" OR $clean['show'] == "main" OR $clean['show'] == "index") {
$fortitle=$tagline;
$pn = $clean['pn'];
if($total > 0) {
if($total >= $displaynumber) {
if($pn == "") {
$pn = $total;
echo display ($displaynumber, $datadirectory, $total, $pn);
echo "<p> </p>\n";
}
else {
$pn = $clean['pn'];
echo display ($displaynumber, $datadirectory, $total, $pn);
echo "<p> </p>\n";
}
}
else {
echo display ($displaynumber, $datadirectory, $total, $pn);
echo "<p> </p>\n";
}
}
else {
blogviewer("$lang[10]<br />\n\n", $blogtitle);
}
}
# Pages
elseif($clean['show'] == "pages") {
$totalpages = countfiles("pages");
$currentpage = super_filter($clean['f']);
if(file_exists("pages/$currentpage.php")) {
$cc = file_get_contents("pages/$currentpage.php");
$eachcc = explode("\t", $cc);
if($totalpages > 0) {
echo "<h3>".$eachcc[1]."</h3>\n";
echo "<h5>$lang[12] ".$eachcc[4]." $lang[11] ".date($timeformat, $eachcc[2])." </h5>\n";
echo "<p> ".stripslashes($eachcc[3])." </p>\n\n";
}
else {
blogviewer("$lang[13]<br />\n\n", $blogtitle);
}
}
else {
blogviewer("$lang[81]<br />\n\n", $lang[80]);
}
}
# Complete archives
elseif($clean['show'] == "archives") {
if($total > 0) {
$theyear = int_filter($_GET['y']);
$themonth = $_GET['m'];
$thecategory = $_GET['c'];
$p = $clean['p'];
if($p == "main") {
echo adisplayall ($datadirectory, $total);
}
else {
if(isset($theyear) AND isset($themonth)) {
echo adisplaymonthandyear ($datadirectory, $total, $themonth, $theyear);
}
elseif(isset($thecategory)) {
echo adisplaycategory ($datadirectory, $total, $thecategory);
}
elseif(file_exists("$datadirectory/$p.php")) {
for($e=1; $e <= $total; $e++) {
if($p == $e) {
echo displayeach($datadirectory, $p);
}
}
}
else {
blogviewer("$lang[81]<br />\n\n", $lang[80]);
}
}
}
else {
blogviewer("$lang[14]<br />\n\n", $blogtitle);
}
}
# Comment poster
elseif($clean['show'] == "postcomments") {
$date = date_and_time($timezone, "", "", "", "", "", "", "");
$name = string_filter($_POST['vname']);
$vemail = string_filter_email($_POST['vemail']);
$location = string_filter_url($_POST['vlocation']);
$comment = string_filter_comment($_POST['vcomment']);
$verify = string_filter_nospace($_POST['verify']);
$p = $clean['p'];
// (1) Block if there's no name, email and comment
if($name !== "" && $vemail !== "" && $comment !== "") {
// (2) Block if it doesn't have a valid email addie
if(ValidEmail($vemail)) {
$filecont = file_get_contents("comments/$p.php");
if($location == "") {
$all = "<?php /*\t".str_replace("\r\n", "<br />", $comment)."\t".$name."\t".$date."\tnone\t".$vemail."\t*/ ?>\n";
}
else {
if(substr($location, 0, 7)!=="http://") {
$all = "<?php /*\t".str_replace("\r\n", "<br />", $comment)."\t".$name."\t".$date."\thttp://".$location."\t".$vemail."\t*/ ?>\n";
}
else {
$all = "<?php /*\t".str_replace("\r\n", "<br />", $comment)."\t".$name."\t".$date."\t".$location."\t".$vemail."\t*/ ?>\n";
}
}
// (3) Block if the referrer is different from blog address in settings
if($_SERVER["HTTP_REFERER"]=="$blog/index.php?show=archives&p=$p") {
// (4) Verify session first before posting the comment.
if($verify!=="") {
session_start();
if($verify==$_SESSION['verify']) {
// (5) Block comment if it contains bad words
if(!strpos($comment, $badwords)) {
// (6) Do not post comment if the exact same comment and name already exists.
if(!preg_match("/\\t$comment\\t$name/", file_get_contents("comments/$p.php"))) {
$handle = fopen ("comments/$p.php", "a+");
fwrite ($handle, $all);
fclose ($handle);
// Email after comment has been posted. Negative (-) if not emailed.
if($emailcomments!=="yes") {
blogviewer($name.", $lang[15]<br />$lang[16]. -<br />\n\n", $blogtitle);
}
else {
$comment = str_replace("<br />", "\r\n", $comment);
if(mail($vemail, $lang[84], "$lang[85] $user,\r\n\r\n$name ($vemail) $lang[86] ($blogtitle). $lang[87]:\r\n\r\n------------\r\n\r\n$comment\r\n\r\n------------\r\n\r\n$lang[88]:\r\n$blog/admin.php?show=editdeletecomments\r\n\r\n$lang[89]\r\n\r\n$lang[90]", "From: $blogtitle <$email>")) {
blogviewer($name.", $lang[15]<br />$lang[16]. +<br />\n\n", $blogtitle);
}
else {
blogviewer($name.", $lang[15]<br />$lang[16]. -<br />\n\n", $blogtitle);
}
}
}
else {
blogviewer("$name, $lang[92]<br />$lang[21]<br />\n", $blogtitle);
}
}
else {
blogviewer("$name, $lang[93]<br />$lang[21]<br />\n", $blogtitle);
}
}
else {
blogviewer("$lang[17]<br />$lang[21]<br />\n", $blogtitle);
$session_degenerate_id;
}
}
else {
blogviewer("$lang[18]<br />$lang[21]<br />\n", $blogtitle);
$session_degenerate_id;
}
}
else {
blogviewer("$lang[19]<br />$lang[21]<br />\n", $blogtitle);
$session_degenerate_id;
}
}
else {
blogviewer("$lang[20]<br /><br />$lang[21]<br />\n", "$blogtitle");
$session_degenerate_id;
}
}
else {
blogviewer("$lang[22] <b>$lang[23]</b>, <b>$lang[24]</b>, $lang[25] <b>$lang[26]</b>.<br /> $lang[27]<br /><br />$lang[21]", "$blogtitle");
}
}
# Signed in
elseif($clean['show'] == "signinok") {
$mode = string_filter_nospace($_POST['mode']);
if($_POST['username'] !== '' AND $_POST['password'] !== '') {
# Administrator Mode
if($mode == "admin") {
$newsessionuser = md5($_POST['username'].mktime());
$newsessionpass = md5($_POST['password'].mktime());
if($newsessionuser == md5($user.mktime()) AND $newsessionpass == md5($pass.mktime())) {
session_destroy();
session_start();
$_SESSION['user'] = $user;
$_SESSION['mode'] = "admin";
adminpanel("$lang[28], <b>$auth</b>! <br /><br /> $lang[29]<br />$lang[30] $lang[31].<br />\n\n");
session_write_close();
}
else {
adminpanel ("$lang[32]<br />$lang[33] $lang[34].<br />\n\n");
$session_degenerate_id;
}
}
# User Mode
elseif($mode == "user") {
$usersdb = file_get_contents("usersdb.php");
$ida = explode($_POST['username']."\t", $usersdb);
$idb = str_replace("<?php /*\t", "", $ida[0]);
$idc = $idb - 1;
$passa = explode("\n", $usersdb);
$passb = explode("\t", $passa[$idc]);
$passc = $passb[4];
if(strpos($usersdb, $_POST['username']) !== FALSE AND $passc == md5($_POST['password'])) {
session_destroy();
session_start();
$_SESSION['user'] = $_POST['username'];
$_SESSION['mode'] = "user";
blogviewer("$lang[28], <b>".$_SESSION['user']."</b>! <br /><br /> $lang[29]<br /> $lang[30] $lang[35].<br />\n\n", "User's Panel");
session_write_close();
}
else {
blogviewer("$lang[32]<br />$lang[33] $lang[34].<br />\n\n", "User's Panel");
$session_degenerate_id;
}
}
# Anything else is invalid
else {
blogviewer("$lang[83] <br />\n\n", $lang[82]);
}
}
else {
blogviewer("$lang[36] <br />$lang[33] $lang[34].<br />\n\n", $lang[82]);
}
}
# Load 404 Page
else {
blogviewer("$lang[81]<br />\n\n", $lang[80]);
}
# Simple statistics
if(file_exists("counter.php")) {
$counterfile = file_get_contents("counter.php");
$counterdata = explode("|", $counterfile);
$countermagic = count($counterdata);
$h = fopen("counter.php", "a+");
fwrite($h, $_SERVER['REMOTE_ADDR']."|");
}
# Footer
$footer = implode(" ", file("themes/$oktheme/footer.php"));
$footer = str_replace("{blogtitle}", $blogtitle, $footer);
$header = str_replace("{subtitle}", subtitle($clean["show"], $clean["p"], $clean["f"]), $header);
$footer = str_replace("{metakeywords}", $metakeywords, $footer);
$footer = str_replace("{metadescription}", $metadescription, $footer);
$header = str_replace("{author}", $auth, $header);
$footer = str_replace("{header}", $blogheader, $footer);
$footer = str_replace("{mainlinks}", $mainlinks, $footer);
$footer = str_replace("{add-ons}", $addons, $footer);
$footer = str_replace("{search}", $search, $footer);
$footer = str_replace("{categories}", $categories, $footer);
$footer = str_replace("{archives}", $archives, $footer);
$footer = str_replace("{miscellaneous}", $miscellaneous, $footer);
$footer = str_replace("{adminmenu}", "", $footer);
$footer = str_replace("{usermenu}", "", $footer);
$footer = str_replace("{footer}", $blogfooter, $footer);
echo $footer;
# End flush for the session
ob_end_flush();
?>
All help appreciated.
Here's a fiddle with what I think is working.
Your problem was you had the div with a width of 950px, and inside that was a ol of 950px. When there's no room for a margin, auto will pick 0.
To fix this, remove the float from the outside div and set it to width:100%;. Then put all the background stuff in the ol. Finally put something at the end of the ol with clear: both;. A <br /> is the most common choice.
UPDATE:
Here's a full screen preview, in case the regular fiddle doesn't give you 950px.
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/