This question already has answers here:
Break long word with CSS
(6 answers)
Closed 12 months ago.
I am creating a forum and i noticed one issue im having is that if i spam letters or words consistently without using spaces it just overlaps everything ill show a example below
i have a character limit on my title and body but for body its like 200 and i dont really want to shorten that.
<html lang="nl">
<head>
<title>WilliamOverman</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css">
<link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet'>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<?php
include 'assets/header.php';
require_once('assets/getInfo.php');
?>
<div class="container">
<div class="row">
<div class="container col-md-6" style="margin-top: 1rem">
<?php
foreach (getPost()['posts'] as $item) {
echo " <div class='list-group' style='font-family: Quicksand; margin-top: .5rem'>
<a href='post?msgid=" . $item['id'] . "' class='list-group-item list-group-item-action' aria-current='true'>
<div class='d-flex w-100 justify-content-between'>
<h5 class='mb-1'> " . $item['titel'] . " </h5>
<small>" . $item['bericht_create_date'] . "</small>
</div>
<p class='mb-1'>" . $item['bericht'] . "</p>
<small>Posted by " . $item['username'] . "</small>
</a>
</div>";
}
echo "
<div class='container col-md-8 text-center justify-content-center' style='margin-top: .5rem;'>
<a class='btn btn-primary' role='button' href='forum?page=1'><<</a>
<a class='btn btn-primary' role='button' href='" . prevpage() . "'><</a>
<a class='btn btn-primary' role='button' href='" . nextpage() . "'>></a>
<a class='btn btn-primary' role='button' href='" . lastpage() . "'>>></a>
</div>
";
?>
</div>
<?php
if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] == true) {
echo
"<div class='container col-md-3' style='margin-top: 1rem'>
<form method='post' action='assets/postAddHandler'>
<div class='form-group'>
<label for='formGroupExampleInput'>Titel</label>
<input type='text' name='titel' class='form-control' id='formGroupExampleInput' placeholder='Example input'>
</div>
<div class='form-group'>
<label for='exampleFormControlTextarea1'>Bericht</label>
<textarea class='form-control' name='bericht' id='exampleFormControlTextarea1' rows='3'></textarea>
</div>
<div class='form-group'>
<label for='exampleFormControlFile1'>Foto</label>
<input type='file' name='foto' class='form-control-file' id='exampleFormControlFile1'>
</div>
<div class='form-group' style='margin-top: .5rem'>
<button type='submit' name='addPost' class='btn btn-success'>Add post</button>
</div>
</form>
</div>
";
}
?>
</div>
</div>
</body>
</html>
That happens because you haven't set behavior for when a word is too large, just add word-break: break-all; to your CSS
You can word-break:break-all; or word-break: break-word;
word-break is the CSS property that you want. It tells the browser where it should break your text when wrapping. The problem you're having is that, by default, the browser tries to leave "words" in place. However if you want to arbitrarily break long strings of text like this example, then you can use this property to tell the browser to break it anywhere via word-break: break-all.
#word-break {
word-break: break-all;
}
.list-group {
font-family: Quicksand serif;
margin-top: 0.5rem;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="list-group" id="word-break">
<a href="#" class="list-group-item list-group-item-action" aria-current="true">
<div class='d-flex w-100 justify-content-between'>
<h5 class='mb-1'> Example with word-break </h5>
<small>Today</small>
</div>
<p class='mb-1'>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
<small>Posted by "Bob"</small>
</a>
</div>
The problem is, of course, that you could end up with actual words being broken in strange places. Note that there are special considerations for Chinese/Japanese/Korean text as well. It also has pretty good browser support, unless you need to support Opera Mini.
I'm using Bootstrap 3.1.1 and my login page is not responsive under 768px.
The page is breaking as shown in the pictures:
What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<title>MY Site</title>
<link href="~/favicon.ico?v=2" rel="shortcut icon" type="image/x-icon" />
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<meta content='text/html;charset=utf-8' http-equiv='content-type'>
<meta content='Saúde Inteligente Móvel' name='description'>
<link href='~/favicon.ico?v=2' rel='shortcut icon' type='image/x-icon'>
<link href='~/assets/images/meta_icons/apple-touch-icon.png' rel='apple-touch-icon-precomposed'>
<link href='~/assets/images/meta_icons/apple-touch-icon-57x57.png' rel='apple-touch-icon-precomposed' sizes='57x57'>
<link href='~/assets/images/meta_icons/apple-touch-icon-72x72.png' rel='apple-touch-icon-precomposed' sizes='72x72'>
<link href='~/assets/images/meta_icons/apple-touch-icon-114x114.png' rel='apple-touch-icon-precomposed' sizes='114x114'>
<link href='~/assets/images/meta_icons/apple-touch-icon-144x144.png' rel='apple-touch-icon-precomposed' sizes='144x144'>
<!-- / START - page related stylesheets [optional] -->
<!-- / END - page related stylesheets [optional] -->
<!-- / bootstrap [required] -->
<link href="~/Content/bootstrap.css" media="all" rel="stylesheet" type="text/css" />
<!-- / theme file [required] -->
<link href="~/Content/light-theme.css" media="all" id="color-settings-body-color" rel="stylesheet" type="text/css" />
<!-- / coloring file [optional] (if you are going to use custom contrast color) -->
<link href="~/Content/theme-colors.css" media="all" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="assets/javascripts/ie/html5shiv.js" type="text/javascript"></script>
<script src="assets/javascripts/ie/respond.min.js" type="text/javascript"></script>
<![endif]-->
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
#Styles.Render("~/Content/themes/base/css")
#Styles.Render("~/Content/site-css")
#Scripts.Render("~/bundles/libs/modernizr")
</head>
<body class='contrast-blue login contrast-background'>
<div class='middle-container' style="display: none" data-bind="visible: true">
<div class='middle-row'>
<div class='middle-wrapper'>
<div class='login-container-header'>
<div class='container'>
<div class='row'>
<div class='col-sm-12'>
<div class='text-center'>
<h1 class="text-primary"><img src="~/Images/logo-sim.png" height="160" width="225" /></h1>
</div>
</div>
</div>
</div>
</div>
<div class='login-container'>
<div class='container'>
<div class='row' data-bind="validationOptions: {
registerExtenders: true,
messagesOnModified: true,
insertMessages: false,
parseInputAttributes: true
}">
<div class='col-sm-4 col-sm-offset-4'>
<h1 class="text-center">
</h1>
<div class="row">
<div class='col-sm-12'>
<div class="validation-summary" data-bind="visible: model().isAnyMessageShown()">
<ul>
<li data-bind="validationMessage: model().Email"></li>
<li data-bind="validationMessage: model().Senha"></li>
</ul>
</div>
</div>
</div>
<form>
<div class='form-group'>
<div class='controls with-icon-over-input'>
<input value="" placeholder="E-mail" class="form-control" data-bind="value: model().Email" name="email" type="email" />
<i class='icon-user text-muted'></i>
</div>
</div>
<div class='form-group'>
<div class='controls with-icon-over-input'>
<input value="" placeholder="Senha" class="form-control" data-bind="value: model().Senha" name="password" type="password" />
<i class='icon-lock text-muted'></i>
</div>
</div>
<div class='checkbox'>
<label for='remember_me'>
<input id='remember_me' name='remember_me' type='checkbox' data-bind="checked: model().CookiePersistente">
Lembrar de mim
</label>
</div>
<button class='btn btn-block' data-bind="click: submit">Entrar</button>
</form>
<div class='text-center'>
<hr class='hr-normal'>
#Html.ActionLink("Esqueceu sua senha?", "EsqueciSenha", "Login")
</div>
</div>
</div>
</div>
</div>
<div class='login-container-footer'>
<div class='container'>
<div class='row'>
<div class='col-sm-12'>
<div class='text-center'>
<img src="~/Images/logo-rodape.png" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#Scripts.Render("~/bundles/libs/jquery")
#Scripts.Render("~/bundles/libs/base")
<script type="text/javascript">
RouteUtility.rootPath = '#Url.Action("Index", "Home")';
</script>
<script type="text/javascript" src="#Url.Content("~/Scripts/pages/login.js")"></script>
</body>
</html>
EDIT:
After adding col-xs-* as suggested, a weird behaviour is happening.
When I add col-xs-*, the fields will fit only with 768px and up. If it's under 768px they will grow!!
It's totally the opposite!
How to fix this?
Under 768px: http://postimg.org/image/d0zcna7bf/
768px and up: http://postimg.org/image/56isu0qtt/
thiago Hi there.
Have a look around line number 60 in you code for this...
<div class='col-sm-4 col-sm-offset-4'>
When your screen size hits this breakpoint it will expand to 100% width because you are not controlling/using the col-xs-XX class here.
If you add this to your code like this...
<div class='col-sm-4 col-sm-offset-4 col-xs-8 col-xs-offset-2'>
for the line of code around line 60 and resize the window, you will see you have control.
This line of code you are using it is used to wrap the Form block, to set the width of this Form.
You just need to take control of this at all breakpoints.
Hope this helps.
Added to this
This is what I get when resized.
Using... <div class='col-sm-4 col-sm-offset-4 col-xs-8 col-xs-offset-2'>
You can control the width for xs device adding eg col-xs-6 :
<div class='form-group'>
<div class='controls with-icon-over-input col-xs-6'>
<input value="" placeholder="E-mail" class="form-control" data-bind="value: model().Email" name="email" type="email" />
<i class='icon-user text-muted'></i>
</div>
</div>
i'm using symfony 2.3 with bootstrap and FullPage.js .
When i load my page, it seems to be loaded twice...
So my width slides in my section is wrong, and the code created is wrong too.
<div class="section active" id="section_admin" data-anchor="admin"">
<div class="slides">
<div class="slidesContainer" style="width: 300%;">
<div class="slides">
<div class="slidesContainer" style="width: 300%;">
<div class="slide active" data-anchor="slide1" style="width:
With the call plugin, my console log return two 'toto', if i remove the plugin my console log return one 'toto'.
Where I am wrong ?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="/bundles/fosjsrouting/js/router.js"></script>
<script type="text/javascript" src="/app_dev.php/js/routing?callback=fos.Router.setData"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="/js/tcs.js"></script>
<script type="text/javascript" src="/bundles/ivoryckeditor/ckeditor.js" ></script>
<script type="text/javascript" src="/jQuery-File-Upload/js/jquery.fileupload.js" ></script>
<script type="text/javascript" src="/jQuery-File-Upload/js/jquery.fileupload-ui.js" ></script>
<script type="text/javascript" src="/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="/js/jquery.knob.js"></script>
<script type="text/javascript" src="/js/select2.js"></script>
<script type="text/javascript" src="/js/fullcalendar.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-colorpicker.min.js"></script>
<script type="text/javascript" src="/js/moment.min.js"></script>
<script type="text/javascript" src="/js/daterangepicker.js"></script>
<script type="text/javascript" src="/js/dataDays.js"></script>
<script type="text/javascript" src="/js/dataDaysEnh.js"></script>
<script type="text/javascript" src="/js/dataHours.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/js/jquery.fn.gantt.js"></script>
<script type="text/javascript" src="/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="/js/jquery.fullPage.js"></script>
<script type="text/javascript" src="/js/jquery.myAlert.js"></script>
<script type="text/javascript" src="/js/jquery.transit.min.js"></script>
<!-- wysihtml5 parser rules -->
<script type="text/javascript"src="/js/wysihtml5/parser_rules/advanced.js"></script>
<!-- Library -->
<script type="text/javascript"src="/js/wysihtml5/dist/wysihtml5-0.3.0.min.js"></script>
<link rel="stylesheet" href="/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="/css/font-awesome-ie7.min.css" type="text/css"/>
<link rel="stylesheet" href="/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="/css/jquery.ibutton.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery-ui-1.8.20.custom.css" type="text/css" />
<link rel="stylesheet" href="/css/select2.css" type="text/css" />
<link rel="stylesheet" href="/css/wysihtml5.css" type="text/css" />
<link rel="stylesheet" href="/css/gantt.css" type="text/css" />
<link rel="stylesheet" href="/css/datepicker.css" type="text/css" />
<link rel="stylesheet" href="/css/fullcalendar.css" type="text/css" />
<link rel="stylesheet" href="/css/bootstrap-colorpicker.css" type="text/css" />
<link rel="stylesheet" href="/css/daterangepicker-bs3.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery.fullPage.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery.dataTables.css" type="text/css" />
<link rel="stylesheet" href="/css/surcharge.css" type="text/css" />
<link rel="stylesheet" href="/css/surcharge-dataTable.css" type="text/css" />
</head>
<body>
<div class="section" id="section_projet">
<div id="myProject" class="col-lg-12">
<div class="row">
<div id="js-sidebar-projet" class="wrap col-sm-2 col-md-3 col-lg-2" >
<a href="/app_dev.php/todo/projet/add" class="visible-xs col-xs-12 btn btn-primary" style="margin-bottom: 20px;">
<i class="icon-cogs"></i>
<span>Nouveau projet</span>
</a>
<div class="sidebar bg-lighter">
<div class="sub-sidebar" style=" border-bottom: 1px solid #FFF">
<a href="/app_dev.php/todo/projet/" >
<div class="col-xs-10 col-sm-9 col-md-8 col-lg-9"><span>Mes Projets</span></div>
<div class="col-xs-2 col-sm-3 col-md-4 col-lg-3"><i class="icon-cogs"></i></div>
</a>
</div>
<div class="sub-sidebar">
<a href="#" onclick="loadOneProjet(1,8,event)" >
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<span class="visible-xs">Dev</span>
<span class="visible-sm visible-lg">Dev</span>
<span class="visible-md">Dev</span>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="color: #5cb85c;">
<i class="icon-sign-blank"></i>
</div>
</a>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<a class="" href="/app_dev.php/todo/delete/projet/8"onclick="return confirm('Are u sure ?')">
<i class="icon-trash"></i>
</a>
</div>
</div>
<div class="sub-sidebar">
<a href="#" onclick="loadOneProjet(1,5,event)" >
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<span class="visible-xs">Projet 2</span>
<span class="visible-sm visible-lg">Projet 2</span>
<span class="visible-md">Projet 2</span>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="color: #b85ca9;">
<i class="icon-sign-blank"></i>
</div>
</a>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<a class="" href="/app_dev.php/todo/delete/projet/5"onclick="return confirm('Are u sure ?')">
<i class="icon-trash"></i>
</a>
</div>
</div>
</div> </div>
<div id="js-load-projet" class="wrap col-sm-10 col-md-9 col-lg-10">
<div id='calendar'class="bg-lighter" style="padding: 10px;"></div>
</div>
</div>
</div>
</div>
<div class="section" id="section_tache">
<div id="wrap" class=" col-lg-12" style="padding-top: 20px;">
<div class="row" style="">
<div class="wrap col-sm-2 col-md-3 col-lg-2" >
<div class="sidebar bg-lighter" >
<div class="sub-sidebar active">
<a href="#" onclick="loadAjaxTaches('getActiveTaches',1,2,event)" title="Mes taches">
<div class="col-xs-2 col-sm-12 col-md-1 col-lg-1 text-center">
<i class="icon-fixed-width icon-inbox" ></i>
</div>
<div class="col-xs-10 hidden-sm col-md-9 col-lg-9">
<span>Mes taches</span>
</div>
</a>
</div>
<div class="sub-sidebar ">
<a href="#" onclick="loadAjaxTaches('getTodayTaches',1,2,event)" title="Aujourd'hui">
<div class="col-xs-2 col-sm-12 col-md-1 col-lg-1 text-center">
<i class="icon-fixed-width icon-calendar" ></i>
</div>
<div class="col-xs-10 hidden-sm col-md-9 col-lg-9 ">
<span>Aujourd'hui</span>
</div>
</a>
</div>
<div class="sub-sidebar ">
<a href="#" onclick="loadAjaxTaches('getRecentTaches',1,2,event)" title="Updated">
<div class="col-xs-2 col-sm-12 col-md-1 col-lg-1 text-center">
<i class="icon-fixed-width icon-refresh" ></i>
</div>
<div class="col-xs-10 hidden-sm col-md-10 col-lg-9 ">
<span>Updated</span>
</div>
</a>
</div>
<div class="sub-sidebar ">
<a href="#" onclick="loadAjaxTaches('getMyAssignedTaches',1,2,event)" title="Assignée">
<div class="col-xs-2 col-sm-12 col-md-1 col-lg-1 text-center">
<i class="icon-fixed-width icon-hand-right" ></i>
</div>
<div class="col-xs-10 hidden-sm col-md-9 col-lg-9 ">
<span>Assignée</span>
</div>
</a>
</div>
<div class="sub-sidebar ">
<a href="#" onclick="loadAjaxTaches('getSQLSharedTaches',1,2,event)" title="Partagée">
<div class="col-xs-2 col-sm-12 col-md-1 col-lg-1 text-center">
<i class="icon-fixed-width icon-share" ></i>
</div>
<div class="col-xs-10 hidden-sm col-md-9 col-lg-9 ">
<span>Partagée</span>
</div>
</a>
</div>
<div class="sub-sidebar">
<a href="#" onclick="loadAjaxTaches('getUserlessTaches',1,2,event)" title="Orpheline">
<div class="col-xs-2 col-sm-12 col-md-1 col-lg-1 text-center">
<i class="icon-fixed-width icon-frown" ></i>
</div>
<div class="col-xs-10 hidden-sm col-md-9 col-lg-9 ">
<span>Orpheline</span>
</div>
</a>
</div>
</div>
</div>
<div id="contenu" class="wrap col-xs-12 col-sm-8 col-md-7 col-lg-8">
<table id="dataTable" class="table table-tache" >
</table>
<div class="modal fade" id="ModalImportance" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Priorité</h4>
</div>
<div class="modal-body">
<table class="table">
<tbody>
<tr>
<td>
<a class=" js-modal-choice icon-3x color-primary" data-dismiss="modal" data-value="1" data-color="color-primary">
<i class="icon-warning-sign"></i>
</a>
</td>
<td>
<a class="js-modal-choice icon-3x color-warning" data-dismiss="modal" data-value="2" data-color="color-warning">
<i class="icon-warning-sign"></i>
</a>
</td>
<td>
<a class=" js-modal-choice icon-3x color-danger" data-dismiss="modal" data-value="3" data-color="color-danger">
<i class="icon-warning-sign"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<h4 class="modal-title">Choisissez ...</h4>
</div>
</div>
</div>
</div>
<script>
jQuery('.js-modal-choice').on('click',function(e){
e.preventDefault();
rate_id = jQuery(e.currentTarget).attr('data-value');
tache_id = myGlobalVar.attr('data-tache');
color = jQuery(e.currentTarget).attr('data-color');
console.log(rate_id);
path = Routing.generate('tcs_todo_ajax_edit_importance');
jQuery.ajax({
type: "POST",
url: path,
data: "tache_id="+tache_id+"&importance_id="+rate_id,
cache: false,
success: function(msg) {
myGlobalVar.attr('class','js-modal '+color);
},
error: function(msg) {
console.log( 'r&té');
}
});
});
</script><script>
jQuery(document).ready(function() {
$('#dataTable').dataTable({
"bPaginate": true,
"bLengthChange": false,
"bFilter": true,
"bSort": false,
"bInfo": false,
"bAutoWidth": false,
"bDestroy": true,
"oLanguage": { "sSearch": "" ,
"oPaginate": {
"sFirst": "<i class='icon-fast-backward visible-xs' title='Début'></i><div class='hidden-xs'> Début</div>",
"sLast": "<i class='icon-fast-forward visible-xs' title='Fin'></i><div class='hidden-xs'> Fin</div>",
"sNext": "<i class='icon-forward visible-xs' title='Suivant'></i><div class='hidden-xs'> Suiv.</div>",
"sPrevious": "<i class='icon-backward visible-xs' title='Précedent'></i><div class='hidden-xs'> Préc.</div>",
}
},
"sPaginationType": "full_numbers",
"fnDrawCallback": function( oSettings ) {
//jQuery('tr').removeClass('odd');
//jQuery('tr').removeClass('even');
jQuery('#dataTable_filter').find('input').addClass('form-control input-sm');
jQuery('#dataTable_filter').find('input').attr('placeholder','Recherche');
},
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
//dont apply odd even class, when warning class is present
if (jQuery(nRow).hasClass('alert-warning')){
jQuery(nRow).removeClass('odd');
jQuery(nRow).removeClass('even');
}
}
});
});
/********************************
* FONCTION DE RATING
*******************************/
jQuery('a.js-modal').on('click',function(e){
e.preventDefault();
myGlobalVar = jQuery(e.currentTarget);
//console.log(jQuery(e.currentTarget));
});
/********************************
* PROGRESSION
*******************************/
$(".dial").knob({
'height':48,
'width': 48,
'inline':false,
'inputColor' :'#5cb85c',
'fgColor':'#5cb85c',
'bgColor':'#dff0d8',
'thickness': '.1',
'draw': function(){
var hexa = colored(this.cv);
this.o.fgColor = hexa;
this.$.css('color' ,hexa);
$(this.i).val(this.cv + '%');
if(this.$.data('skin') == 'tron') {
var a = this.angle(this.cv) // Angle
, sa = this.startAngle // Previous start angle
, sat = this.startAngle // Start angle
, ea // Previous end angle
, eat = sat + a // End angle
, r = 1;
this.g.lineWidth = this.lineWidth;
this.o.cursor
&& (sat = eat - 0.3)
&& (eat = eat + 0.3);
if (this.o.displayPrevious) {
ea = this.startAngle + this.angle(this.v);
this.o.cursor
&& (sa = ea - 0.3)
&& (ea = ea + 0.3);
this.g.beginPath();
this.g.strokeStyle = this.pColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
this.g.stroke();
}
this.g.beginPath();
this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
this.g.stroke();
this.g.lineWidth = 2;
this.g.beginPath();
this.g.strokeStyle = this.o.fgColor;
this.g.arc( this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
this.g.stroke();
return false;
}
},
'change' : function (v) {
/****************************************************************
* ICI J UTILISE UN TIMEOUT POUR DECLENCHER LA MAJ
* LORSQU ON CHANGE LE NIVEAU AVEC LA SOURIS ON A PAS ENVIE
* D AVOIR 5 APPELS AJAX POUR PASSER DE 30 A 35%
* J ATTEND DONC QUE RIEN NE SE PASSE PENDANT 0.3 SEC
****************************************************************/
if(typeof myTimeout != "undefined"){
clearTimeout(myTimeout);
}
var hexa = colored(this.cv);
this.o.fgColor = hexa;
this.$.css('color' ,hexa);
tache_id = this.$.attr('data-id');
myTimeout= setTimeout(function() {
path = Routing.generate('tcs_todo_add_ajax_progression_tache');
jQuery.ajax({
type: "POST",
url: path,
data: "value="+v+"&tache_id="+tache_id,
cache: false,
success: function(msg) {
},
error: function(msg) {
console.log( 'r&té');
}
});
}, 400 );
},
});
</script> </div>
<div class="wrap col-sm-2 col-md-2 col-lg-2">
<div class="sidebar bg-lighter">
<div class="sub-sidebar">
<a href="#" onclick="loadAjaxTaches('getPublicActiveTaches',16,2,event);" >
<div class="col-xs-2 col-sm-12 col-md-3 col-lg-2 text-center">
<img class="avatar-xs" src="/uploads/img/agra" ></img>
</div>
<div class="col-xs-10 hidden-sm col-md-8 col-lg-9">
<span class="visible-xs">agra</span>
<span class="visible-lg">agra</span>
<span class="visible-md">agra</span>
</div>
</a>
</div>
<div class="sub-sidebar">
<a href="#" onclick="loadAjaxTaches('getPublicActiveTaches',1,2,event);" >
<div class="col-xs-2 col-sm-12 col-md-3 col-lg-2 text-center">
<img class="avatar-xs" src="/uploads/img/blebris" ></img>
</div>
<div class="col-xs-10 hidden-sm col-md-8 col-lg-9">
<span class="visible-xs">blebris</span>
<span class="visible-lg">blebris</span>
<span class="visible-md">blebris</span>
</div>
</a>
</div>
<div class="sub-sidebar">
<a href="#" onclick="loadAjaxTaches('getPublicActiveTaches',44,2,event);" >
<div class="col-xs-2 col-sm-12 col-md-3 col-lg-2 text-center">
<img class="avatar-xs" src="/uploads/img/chapou" ></img>
</div>
<div class="col-xs-10 hidden-sm col-md-8 col-lg-9">
<span class="visible-xs">chapou</span>
<span class="visible-lg">chapou</span>
<span class="visible-md">chapou</span>
</div>
</a>
</div>
<div class="sub-sidebar">
<a href="#" onclick="loadAjaxTaches('getPublicActiveTaches',15,2,event);" >
<div class="col-xs-2 col-sm-12 col-md-3 col-lg-2 text-center">
<img class="avatar-xs" src="/uploads/img/clement" ></img>
</div>
<div class="col-xs-10 hidden-sm col-md-8 col-lg-9">
<span class="visible-xs">clement</span>
<span class="visible-lg">clement</span>
<span class="visible-md">clement</span>
</div>
</a>
</div>
<div class="sub-sidebar">
<a href="#" onclick="loadAjaxTaches('getPublicActiveTaches',46,2,event);" >
<div class="col-xs-2 col-sm-12 col-md-3 col-lg-2 text-center">
<img class="avatar-xs" src="/uploads/img/userless.jpg" ></img>
</div>
<div class="col-xs-10 hidden-sm col-md-8 col-lg-9">
<span class="visible-xs">le_nom_le_plus_long_du_monde_...</span>
<span class="visible-lg">le_nom_le_plus...</span>
<span class="visible-md">le_nom_le_...</span>
</div>
</a>
</div>
<div class="sub-sidebar">
<a href="#" onclick="loadAjaxTaches('getPublicActiveTaches',17,2,event);" >
<div class="col-xs-2 col-sm-12 col-md-3 col-lg-2 text-center">
<img class="avatar-xs" src="/uploads/img/redero" ></img>
</div>
<div class="col-xs-10 hidden-sm col-md-8 col-lg-9">
<span class="visible-xs">redero</span>
<span class="visible-lg">redero</span>
<span class="visible-md">redero</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="section_admin">
<div class="slide active" data-anchor="slide1">
<div class="col-lg-12">
<div class="row">
<div class="wrap col-sm-2 col-md-3 col-lg-2" >
</div>
<div class="wrap col-sm-10 col-md-9 col-lg-10">
<div class="panel panel-default">
<div class="panel-heading">Groupes</div>
<div class="panel-body">
<ul class="list-unstyled">
<li></i> Voir les groupes</li>
<li></i> Ajouter un groupe</li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Utilisateurs</div>
<div class="panel-body">
<ul class="list-unstyled">
<li></i> Voir les utilisateurs</li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">A.C.L.</div>
<div class="panel-body">
<ul class="list-unstyled">
<li></i> Donner des droits</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slide" data-anchor="slide2">
<div class="col-lg-12">
<div class="row">
<div class="wrap col-sm-2 col-md-3 col-lg-2" >
</div>
<div class="wrap col-sm-10 col-md-9 col-lg-10">
<div class="panel panel-default">
<div class="panel-heading">Groupes</div>
<div class="panel-body">
<ul class="list-unstyled">
<li></i> Voir les groupes</li>
<li></i> Ajouter un groupe</li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Utilisateurs</div>
<div class="panel-body">
<ul class="list-unstyled">
<li></i> Voir les utilisateurs</li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">A.C.L.</div>
<div class="panel-body">
<ul class="list-unstyled">
<li></i> Donner des droits</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
jQuery(document).ready(function() {
console.log('toto');
$.fn.fullpage({
verticalCentered: false,
resize : true,
slidesColor : ['transparent', 'transparent','transparent'],
anchors:['projet','tache','admin'],
scrollingSpeed: 700,
easing: 'easeInQuart',
menu: false,
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['firstSlide', 'secondSlide'],
slidesNavigation: false,
slidesNavPosition: 'bottom',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
autoScrolling: true,
scrollOverflow: false,
css3: false,
//events
onLeave: function(index, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction){}
});
});
</script>
<div id="sfwdt4d109a" class="sf-toolbar" style="display: none"></div><script>/*<![CDATA[*/ Sfjs = (function() { "use strict"; var noop = function() {}, profilerStorageKey = 'sf2/profiler/', request = function(url, onSuccess, onError, payload, options) { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); options = options || {}; xhr.open(options.method || 'GET', url, true); xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); xhr.onreadystatechange = function(state) { if (4 === xhr.readyState && 200 === xhr.status) { (onSuccess || noop)(xhr); } else if (4 === xhr.readyState && xhr.status != 200) { (onError || noop)(xhr); } }; xhr.send(payload || ''); }, hasClass = function(el, klass) { return el.className.match(new RegExp('\\b' + klass + '\\b')); }, removeClass = function(el, klass) { el.className = el.className.replace(new RegExp('\\b' + klass + '\\b'), ' '); }, addClass = function(el, klass) { if (!hasClass(el, klass)) { el.className += " " + klass; } }, getPreference = function(name) { if (!window.localStorage) { return null; } return localStorage.getItem(profilerStorageKey + name); }, setPreference = function(name, value) { if (!window.localStorage) { return null; } localStorage.setItem(profilerStorageKey + name, value); }; return { hasClass: hasClass, removeClass: removeClass, addClass: addClass, getPreference: getPreference, setPreference: setPreference, request: request, load: function(selector, url, onSuccess, onError, options) { var el = document.getElementById(selector); if (el && el.getAttribute('data-sfurl') !== url) { request( url, function(xhr) { el.innerHTML = xhr.responseText; el.setAttribute('data-sfurl', url); removeClass(el, 'loading'); (onSuccess || noop)(xhr, el); }, function(xhr) { (onError || noop)(xhr, el); }, options ); } return this; }, toggle: function(selector, elOn, elOff) { var i, style, tmp = elOn.style.display, el = document.getElementById(selector); elOn.style.display = elOff.style.display; elOff.style.display = tmp; if (el) { el.style.display = 'none' === tmp ? 'none' : 'block'; } return this; } } })();/*]]>*/</script><script>/*<![CDATA[*/ (function () { Sfjs.load( 'sfwdt4d109a', '/app_dev.php/_wdt/4d109a', function(xhr, el) { el.style.display = -1 !== xhr.responseText.indexOf('sf-toolbarreset') ? 'block' : 'none'; if (el.style.display == 'none') { return; } if (Sfjs.getPreference('toolbar/displayState') == 'none') { document.getElementById('sfToolbarMainContent-4d109a').style.display = 'none'; document.getElementById('sfToolbarClearer-4d109a').style.display = 'none'; document.getElementById('sfMiniToolbar-4d109a').style.display = 'block'; } else { document.getElementById('sfToolbarMainContent-4d109a').style.display = 'block'; document.getElementById('sfToolbarClearer-4d109a').style.display = 'block'; document.getElementById('sfMiniToolbar-4d109a').style.display = 'none'; } }, function(xhr) { if (xhr.status !== 0) { confirm('An error occurred while loading the web debug toolbar (' + xhr.status + ': ' + xhr.statusText + ').\n\nDo you want to open the profiler?') && (window.location = '/app_dev.php/_profiler/4d109a'); } } ); })();/*]]>*/</script>
</body>
I would try it by adding the scrips as well as the scrips initializations at the header, where it is suppose to be. Right now fullpage initialization is at the bottom.
That would be the proper semantic way to do it, but nowadays the recommendation is to do it like you were doing it,at the bottom of the site, just before </body>. The problem is that right now the plugin operates over the body of the site instead over a wrapper and that's the why. I will try to fix it in future versions
GA is reporting not installed even though i've got the script in the HEAD location as specified, should it show straight away?
I've followed the full instruction on how to do it, or do I just need to sit and wait?
Code is
<?php
require("config.php");
$submitted_username = '';
if(!empty($_POST)){
$query = "
SELECT
id,
username,
password,
salt,
email
FROM users
WHERE
username = :username
";
$query_params = array(
':username' => $_POST['username']
);
try{
$stmt = $db->prepare($query);
$result = $stmt->execute($query_params);
}
catch(PDOException $ex){ die("Failed to run query: " . $ex->getMessage()); }
$login_ok = false;
$row = $stmt->fetch();
if($row){
$check_password = hash('sha256', $_POST['password'] . $row['salt']);
for($round = 0; $round < 65536; $round++){
$check_password = hash('sha256', $check_password . $row['salt']);
}
if($check_password === $row['password']){
$login_ok = true;
}
}
if($login_ok){
unset($row['salt']);
unset($row['password']);
$_SESSION['user'] = $row;
header("Location: main.php");
die("Redirecting to: main.php");
}
else{
print("Login Failed.");
$submitted_username = htmlentities($_POST['username'], ENT_QUOTES, 'UTF-8');
}
}
?>
<!DOCTYPE html>
<html>
<Head>
<title>Fishtrends | Tightlines</title>
<meta name="viewport" content="width=device-width, intitial-scale=1.0>
<link href = "css/css/bootstrap.css" rel = "Stylesheet">
<link href = "css/css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/css/style.css" rel = "stylesheet">
<link href = "css/fonts/fonta/css/font-awesome.min.css" rel = "stylesheet">
<link href='http://fonts.googleapis.com/css?family=Oxygen:400,700' rel='stylesheet' type='text/css'>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-5178940-4', 'fishtrends.com');
ga('send', 'pageview');
</script>
</head>
<body>
<div class = "navbar navbar-main navbar-static-top">
<div class="container">
<b>Fishtrends</b> - Social Fish trending
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class= "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li class = "active"><i class="glyphicon glyphicon-home"></i> Register</li>
<li class = "dropdown">
<i class="glyphicon glyphicon-user"></i> Login<b class="caret"></b>
<ul class = "dropdown-menu" style="padding: 15px; padding-bottom: px;">
<form action="login.php" method="post"> Username:<br />
<input type="text" name="username" value="<?php echo $submitted_username; ?>" />
<br /><br /> Password:<br /> <input type="password" name="password" value="" />
<br /><br />
<input type="submit" class="btn btn-info" value="Login" />
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="indexjumbotron">
<h1>Be Fish social</h1>
<p1>Add and see catch details, baits used, weights of fish plus more</p1>
</div>
<div class="container">
<div class="panel panel-default" style="margin:0 auto;width:500px">
<div class="panel-heading">
<h1 class="panel-title"><b>Sign up now for Free!</B></h1>
</div>
<div class="panel-body">
<form name="registration" method="post" action="/register.php" class="form-horizontal" role="form">
<div class="form-group">
<label for="username" class="col-xs-2 control-label">Username</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="username" name="username" placeholder="Your Userame">
</div>
</div>
<div class="form-group">
<label for="inputEmail1" class="col-xs-2 control-label">Email</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="email" name="email" placeholder="Your Email">
</div>
</div>
<div class="form-group">
<label for="inputSubject" class="col-xs-2 control-label">Password</label>
<div class="col-xs-10">
<input type="password" class="form-control" id="password" name="password" placeholder="Choose a password">
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-success">
Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class = "navbar navbar-inverse navbar-fixed-bottom">
<div class = "container">
<p class = "navbar-text pull-left">Copyright Fishtrends - 2013 <i class="glyphicon glyphicon-copyright-mark"></i></p>
<i class="fa fa-twitter fa-1x"></i> Follow Us
<p class = "navbar-text pull-right"><i class="glyphicon glyphicon-question-sign"></i> About Us</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="css/js/bootstrap.js"></script>
</body>
</html>
I can't find anything wrong in this code, did you tried the real time reports to clarify. If the code is installed then you can see some live traffic reports including referrals and other related info. Did you try that ?
The regular reporting won't update for several hours. However, there is a real-time tab that should show you results immediately. On the HTML side of things, you've got a lot of missing/extra/out-of-order tags. I think this is what you are aiming for in the HTML (I did not include the PHP code since I haven't made any changes to it):
<!DOCTYPE html>
<html>
<head>
<title>Fishtrends | Tightlines</title>
<meta name="viewport" content="width=device-width, intitial-scale=1.0">
<link href = "css/css/bootstrap.css" rel = "Stylesheet">
<link href = "css/css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/css/style.css" rel = "stylesheet">
<link href = "css/fonts/fonta/css/font-awesome.min.css" rel = "stylesheet">
<link href='http://fonts.googleapis.com/css?family=Oxygen:400,700' rel='stylesheet' type='text/css'>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-5178940-4', 'fishtrends.com');
ga('send', 'pageview');
</script>
</head>
<body>
<div class = "navbar navbar-main navbar-static-top">
<div class="container">
<b>Fishtrends</b> - Social Fish trending
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class= "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li class = "active"><i class="glyphicon glyphicon-home"></i> Register</li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
<i class="glyphicon glyphicon-user"></i> Login<b class="caret"></b>
</a>
<ul class = "dropdown-menu" style="padding: 15px; padding-bottom: px;">
<form action="login.php" method="post"> Username:<br />
<input type="text" name="username" value="<?php echo $submitted_username; ?>" />
<br /><br /> Password:<br /> <input type="password" name="password" value="" />
<br /><br />
<input type="submit" class="btn btn-info" value="Login" />
</form>
</ul>
</li>
</ul>
</div>
</div>
<div class="indexjumbotron">
<h1>Be Fish social</h1>
<p>Add and see catch details, baits used, weights of fish plus more</p>
</div>
<div class="container">
<div class="panel panel-default" style="margin:0 auto;width:500px">
<div class="panel-heading">
<h1 class="panel-title"><b>Sign up now for Free!</b></h1>
</div>
<div class="panel-body">
<form name="registration" method="post" action="/register.php" class="form-horizontal" role="form">
<div class="form-group">
<label for="username" class="col-xs-2 control-label">Username</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="username" name="username" placeholder="Your Userame" />
</div>
</div>
<div class="form-group">
<label for="inputEmail1" class="col-xs-2 control-label">Email</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="email" name="email" placeholder="Your Email" />
</div>
</div>
<div class="form-group">
<label for="inputSubject" class="col-xs-2 control-label">Password</label>
<div class="col-xs-10">
<input type="password" class="form-control" id="password" name="password" placeholder="Choose a password" />
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-success">
Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class = "navbar navbar-inverse navbar-fixed-bottom">
<div class = "container">
<p class = "navbar-text pull-left">Copyright Fishtrends - 2013 <i class="glyphicon glyphicon-copyright-mark"></i></p>
<a href = "http://www.twitter.com/fishtrends" class = "navbar-btn btn-primary btn pull-right">
<i class="fa fa-twitter fa-1x"></i> Follow Us
</a>
<p class = "navbar-text pull-right"><a href ="#">
<i class="glyphicon glyphicon-question-sign"></i> About Us</a>
</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="css/js/bootstrap.js"></script>
</body>
</html>
to all moderates reading this message I had asked it in another thread but was told to post it as a stand alone question. Not my intention to cluter the forum
My twitter bootstrap container is shifted to the left for some reason. Is there any way to make it take up the whole screen despite resolution? When I use .container-fluid, it seems to shrink the overall container (even when I add .row-fluid to all my rows).
My alerts are not increasing in width. That is to say that I would like the alert (background color and all) to be the width of the container. In the link below I would like "If this is your ad login to edit" to span the whole container. However when I try .span12 it just shifts the alert. Also width:100%; does nothing to help. Also when I press login and an a login error occurs the error is shown at the far left instead of right on top of the login form.
** concerning items 2 and 3 refer to this link https://twitter.com/HassanNSaid/status/355797180063301632/photo/1 **
Requested code
<div class="container-fluid">
<div class="row well">
<?php
loginFunc();
miniLogo();
searchFunc();
otherOptions();
?>
</div>
<div class="row">
<center>
<?php
if(isset($_GET['error_with_new_title'])){
echo'<span class="alert-error">'.$_GET['error_with_new_title'].'</span>';
}elseif(isset($_GET['success_with_new_title'])){
echo'<span class="alert-success">'.$_GET['success_with_new_title'].'</span>';
}elseif(isset($_GET['error_with_new_vitals'])){
echo'<span class="alert-error">'.$_GET['error_with_new_vitals'].'</span>';
}elseif(isset($_GET['success_with_new_vitals'])){
echo'<span class="alert-success">'.$_GET['success_with_new_vitals'].'</span>';
}elseif(isset($_GET['error_with_new_description'])){
echo'<span class="alert-error">'.$_GET['error_with_new_description'].'</span>';
}elseif(isset($_GET['success_with_new_description'])){
echo'<span class="alert-success">'.$_GET['success_with_new_description'].'</span>';
}else{
echo'<span class="alert">If this is your ad please log in to edit it!</span>';
}
?>
</center>
</div>
<div class="row page-header text-center">
<?php
if(isset($_SESSION['id'])){
$i = $_SESSION['id'];
printAdTitle($i);
}else{
$i = 0;
printAdTitle($i);
}
?>
</div>
<div class="imagesAndVitals">
<div class="row span9">
<center>
<? printAdImages($_GET['id']); ?>
</center>
</div>
<div class="row tabbable span6" style="height:374px;">
<ul class="nav nav-tabs">
<li class="active"> Ad Vitals</li>
<li>Contact Seller</li>
</ul>
<div class="contactVitalsDiv">
<div class="tab-content">
<div class="tab-pane active" id="adVitalsPane">
<?php
if(isset($_SESSION['id'])){
$i = $_SESSION['id'];
printAdVitals($i);
}else{
$i = 0;
printAdVitals($i);
}
?>
</div>
<div class="tab-pane" id="contactUserPane">
<?php
if(isset($_SESSION['id'])){
$i = $_SESSION['id'];
printAdContactForm($i);
}else{
$i = 0;
printAdContactForm($i);
}
?>
</div>
</div>
<div class="ratingForm">
<?php
$adId = $_GET['id'];
printRatingForm($adId);
?>
</div>
</div>
</div>
</div>
<div class="row text-center descriptionDiv">
<?php
if(isset($_SESSION['id'])){
$i = $_SESSION['id'];
printAdDescription($i);
}else{
$i = 0;
printAdDescription($i);
}
?>
</div>
<div class="row">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Similar Items
</li>
<li>
User's Other Items
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="similarItmesPane">
<? printSimilarItems(); ?>
</div>
<div class="tab-pane" id="otherUserItemsPane">
<? printOtherItems(); ?>
</div>
</div>
</div>
</div>
</div>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<title>Scoopclassifieds.com - Test4 posted under Electronics/Laptop</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap-carousel.js"></script>
<script type="text/javascript" src="js/bootstrap-tooltip.js"></script>
<script type="text/javascript" src="js/bootstrap-popover.js"></script>
<script type="text/javascript" src="js/editFormValidation.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/customStyles.css" type="text/css" />
</head>
<body onLoad="addOption_list();">
<div class="container-fluid">
<div class="row well">
<form class="form-inline pull-right" action="controllers/login.php" method="POST">
<input type="text" name="email" id="email" placeholder="Email" class="span2" />
<input type="password" name="password" id="password" placeholder="●●●●●●●●" class="span2" />
<input type="submit" name="login" id="login" value="Login" class="btn" />
</form>
<img src="/scoopclassifieds/slir/w300-h200-q60/scoopclassifieds/images/scoop3.png" alt="miniLogo" />
<form action="search.php" method="get" name="search_form" id="search_form" class="form-search pagination-centered">
<input type="text" name="searchFor" id="searchFor" class="searchInput span10" />
<input type="text" name="min" id="min" placeholder="Min Price" class="span2 text-center" />
<input type="text" name="max" id="max" placeholder="Max Price" class="span2 text-center" />
<input type="text" name="location" id="location" class="span2 text-center" />
<button type="submit" class="btn">Search</button>
</form>
<ul class="nav nav-pills">
<li>Add</li>
<li>Browse</li>
</ul>
</div>
<div class="row">
<center>
<span class="alert">If this is your ad please log in to edit it!</span> </center>
</div>
<div class="row page-header text-center">
<div id="item_title"><br/><span style="font-size:35px; font-weight:bold;">Test4</span></div> </div>
<div class="imagesAndVitals">
<div class="row span9">
<center>
<div id="myCarousel" class="carousel well span8">
<div class="carousel-inner">
<img src="/scoopclassifieds/slir/w500-h374-q60//classy/images/6/test4/61Ec8SFYZoL._SS500_.jpg" id="0" alt="image0" class="item active" />
<img src="/scoopclassifieds/slir/w500-h374-q60//classy/images/6/test4/0176440763.jpg" id="1" alt="image1" class="item" />
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</center>
</div>
<div class="row tabbable span6" style="height:374px;">
<ul class="nav nav-tabs">
<li class="active"> Ad Vitals</li>
<li>Contact Seller</li>
</ul>
<div class="contactVitalsDiv">
<div class="tab-content">
<div class="tab-pane active" id="adVitalsPane">
<span class="well span5" style="font-size:30px; color:white; text-align:center; background:#BC4F0F;">$124</span><br/>
<span style="font-size:16px; font-weight:bold;">Location:</span><span style="font-size:14px;">Ottawa</span><br/>
<span style="font-size:16px; font-weight:bold;">Category:</span><span style="font-size:14px;">Electronics</span><br/>
<span style="font-size:16px; font-weight:bold;">Sub-Category:</span><span style="font-size:14px;">Laptop</span>
</div>
<div class="tab-pane" id="contactUserPane">
<form action="" method="post">
<label>Email:</label> <input type="text" name="email" id="email" value="" class="viewInput" /><br/>
<label>Message:</label><br/>
<textarea rows="4" cols="50" name="message" id="message" class="input"></textarea><br/>
<input type="submit" name="contactUser" id="contactUser" value="Contact User" class="button" />
</form>
</div>
</div>
<div class="ratingForm">
<div class="modal hide fade" id="userFeedback" aria-hidden="true">
<div class="modal-header">
<h4>Give us some feedback about this user</h4>
</div>
<div class="modal-body">
<form>
<h5>The Good</h5>
<input type="radio" name="feedBack" value="Good1">Good1<br/>
<input type="radio" name="feedBack" value="Good2">Good2<br/>
<input type="radio" name="feedBack" value="Good3">Good3<br/><br/>
<input type="submit" name="giveFeedBack" id="giveFeedBack" class="btn btn-success" value="Give Feedback" />
</form>
</div>
<div class="modal-footer">
<input type="button" class="btn" data-dismiss="modal" value="Close" />
</div>
</div>
Give feedback
</div>
</div>
</div>
</div>
<div class="row text-center descriptionDiv">
<span class="page-header descriptionHeader">Description:</span><br/><div id="item_description">"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who lov</div> </div>
<div class="row">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Similar Items
</li>
<li>
User's Other Items
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="similarItmesPane">
<h4>Ads with similar category of: Electronics</h4><ul class="thumbnails">
<li class="span4"><a href="view.php?id=2&title=test3" class="thumbnail" style="height:235px; width:300px;" id="secondary-info" rel="popover" data-content="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the..." data-original-title="Price: $1234<br/>Location: Ottawa<br/>Electronics/Television">
<center>Test3</center>
<img src="/scoopclassifieds/slir/w300-h200-q60/" alt="Test3MainImage" />
</a></li>
<li class="span4"><a href="view.php?id=24&title=test21" class="thumbnail" style="height:235px; width:300px;" id="secondary-info" rel="popover" data-content="There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or..." data-original-title="Price: $1245<br/>Location: Ottawa<br/>Electronics/Laptop">
<center>Test21</center>
<img src="/scoopclassifieds/slir/w300-h200-q60/" alt="Test21MainImage" />
</a></li>
</ul> </div>
<div class="tab-pane" id="otherUserItemsPane">
<ul class="thumbnails">
<li class="span4"><a href="view.php?id=2&title=test3" class="thumbnail" style="height:235px; width:300px;" id="secondary-info" rel="popover" data-content="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the..." data-original-title=" Price: $1234<br/> Location: Ottawa<br/>Electronics/Television">
<center>Test3</center>
<img src="/scoopclassifieds/slir/w300-h200-q60/" alt="Test3MainImage" />
</a></li>
</ul> </div>
</div>
</div>
</div>
</div>
<!--
</div>
<div class="footer">
Home | Contact Us<br/>
Scoop Classifieds ©
2013 </div>
</div> -->
</body>
<script>
$(document).ready(
function(){
$('#myCarousel').carousel();
$('[rel="popover"]').popover();
}
);
</script>
</html>