I'm trying to add a counter up effect to my home page in a symfony 2 application with angular . i have added dependencies in my config.yml file like this :
counter:
inputs:
- "bundles/ubidelectricity/js/custom/waypoints.min.js"
- "bundles/ubidelectricity/js/custom/jquery.counterup.min.js"
and i have called counter in my twig like this :
{% block javascripts %}
{% javascripts
'#jquery'
'#bootstrap_4_js'
'#jqueryui'
'#elfinder'
'#fastclick'
'#angular'
'#angular_storage'
'#angular_table'
'#angular_translate'
'#angular_scroll'
'#angular_file_uplaod'
'#angular_dynamic_locale'
'#bootstrap_colorpicker'
'#videogular'
'#oclazyload'
'#breadcrumb'
'#ui_bootstrap'
'#loading_bar'
'#color_picker'
'#locationpicker'
'#multirange_slider'
'#site_front_scripts'
'#continuous_net_services'
'#continuous_net_directives'
'#site_front_controller' %}<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
and i have added html in the front page like this :
<div class="row pt-5 pb-5">
<div class="col-md-3 text-center">
<span class="counter">3300</span> <span class="counters">+</span>
<span class="counter-text">Buyers Organisations</span>
</div>
<div class="col-md-3 text-center">
<span class="counter">585</span>
<span class="counter-text">Buyer Partners</span>
</div>
<div class="col-md-3 text-center">
<span class="counter">41000</span> <span class="counters">+</span>
<span class="counter-text">Tenders / Quotes </span>
<span class="counter-text"> Every Year </span>
</div>
<div class="col-md-3 text-center">
<span class="counter">658</span>
<span class="counter-text">Industry Categories</span>
</div>
</div>
I use :
php app/console assets:install
php app/console assetic:dump
php app/console assetic:watch
but it doesn't work and there are no animations.
Related
I'm making a flask blog, I add a new feature InIt, and It can help to count how many views does current post has, but is there any way that I can present with html code instead of return. Because If I want to get the number of viewer, I won't see the post, but If I want to see the post, I won't see the number, so i want to see the number of view for different post, how should I fix the problem?
routes.py
#app.route("/post/<int:post_id>", methods=['GET', 'POST'])
#login_required
def post(post_id):
post = Post.query.get_or_404(post_id) # post = Get post by post_id
return render_template('post.html', title=post.title, post=post)
#app.route("/visit")
#login_required
def visit():
v = Visit.query.first()
if not v:
v = Visit()
v.count += 1
db.session.add(v)
v.count +=1
db.session.commit()
return jsonify(counter=v.count)
post.html
<html>
<!-- <p>{{ visit.count }}</p> -->
<article class="media content-section">
<img class="rounded-circle article-img" src="{{ url_for('static', filename='profile_pics/' + post.author.image_file) }}">
<div class="media-body">
<div class="article-metadata">
<a class="mr-2" href="{{ url_for('user_posts', username=post.author.username) }}">{{ post.author.username }}</a>
<br>
<small class="text-muted">{{ post.date_posted.strftime('%Y-%m-%d %H:%M') }}</small>
{% if post.author == current_user %}
<div>
<a class="btn btn-secondary btn-sm mt-1 mb-1" href="{{ url_for('update_post', post_id=post.id) }}">Update</a>
<button type="button" class="btn btn-danger btn-sm m-1" data-toggle="modal" data-target="#deleteModal">Delete</button>
</div>
{% endif %}
</div>
<div class="post-title">
<h2 class="article-title">{{ post.title }}</h2>
</div>
<article>
<div class="container">
<div class="row">
{{ post.content }}
</div>
</div>
</article>
<br>
<div class="post-tag">
<button type="button" class="btn btn-outline-info">{{ post.tag }}</button>
</div>
<br>
<hr>
<br>
<div>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<a class="nav-item nav-link" href="{{ url_for('allcomment', post_id=post.id ) }}"><i class='far fa-comment-alt'></i>See all comments</a>
<a class="nav-item nav-link" href="{{ url_for('commentpost', post_id=post.id ) }}"><i class='far fa-comment-alt'></i>Write comments</a>
</div>
</div>
</article>
</html>
return redirect(next_page) if next_page else redirect(url_for('home'))
This line looks suspicious, shouldn't the return be inside the if ?
I just made a project in laravel, some functions just worked normally, but in one .blade, the data didn't show up and the .css didn't work.
<div class="row row-centered">
#foreach ($profils as $profil)
<div class="col-md-4" >
<div class="card" style="width: 18rem;">
<center>
<div class="card-img-top bg-secondary">
<img class="card-img-top" src="{{ asset('storage/foto/'.$profil->foto_img) }}" width="150 ">
</div>
</center>
<div class="card-body" style="padding: 10px;">
<h5 class="card-title">{{ $profil->nama_pendaftar }}</h5>
<p class="card-text">{{ $profil->email }}</p>
<p class="card-text">{{ $profil->kontak }}</p>
</div>
</div>
</div>
#endforeach
</div>
But, it worked well in my teams laptop (firefox).
I think you can try these
Clear your browser cache / run using incognito mode
Try running php artisan view:clear
Are you extending view, if yes is it already the right view
Check if the css is load successfully using your browser developer tools
I create add-to-cart app. I need each col in a row to display like it's mentioned col-lg-4 col-md-2 col-sm-6. But it's displayed in a column (Maybe it doesn't work because I added ng-repeat? And this style is the same for every item?
<h2 class="title">{{title}} <i class="em em-shopping_bags"></i></h2>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-2 col-sm-6">
<div class="card" style="width: 18rem;" ng-repeat='item in itemsArray'>
<img class="card-img-top" ng-src={{item.img}} alt="Card image cap">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">{{item.name}}</p>
<p class="price">{{ item.price | currency }}</p>
<i class="em em-shopping_trolley"></i> Add to cart <span class="number">{{ item.quantity }}</span>
</div>
</div>
</div>
</div>
</div>
I am new to Drupal 8 platform. To start with I am trying to create a responsive layout using Bootstrap, but I don't want to use ready-made bootstrap theme provided by Drupal. Folder structure of my theme looks like this:
themes
custom
lexus
css
style.css
includes
bootstrap
bootstrap-theme.css
bootstrap-theme.css.map
bootstrap.css
templates
page.html.twig
lexus.libraries.yml
lexus.info.yml
Content of page.html.twig
<div id="page">
{% if page.headline %}
<section id="headline">
<div class= "container">
{{ page.headline }}
</div>
</section>
{% endif %}
<header id="header" class="header">
<div class="container">
{{ page.header }}
</div>
</header>
<section id="main">
<div class="container">
<div class="row">
<div id="content" class="col-md-9 col-sm-9 col-xs-12">
{{ page.content }}
</div>
{% if page.sidebar_first %}
<aside id="sidebar" class="sidebar col-md-3 col-sm-3 col-xs-12">
{{ page.sidebar_first}}
</aside>
{% endif %}
</div>
</div>
</section>
{% if page.footer %}
<footer id="footer" class>
<div class="container">
{{ page.footer }}
</div>
</footer>
{% endif %}
</div>
Content of lexus.info.yml
name: Lexus
description: Two column responsive layout
type: theme
core: 8.x
version: 8.2.0
base theme: bartik
libraries:
- lexus/global-styling
Content of lexus.libraries.yml
global-styling:
css:
theme:
includes/bootstrap/css/bootstrap.css: {}
css/style.css: {}
When the site loads in desktop view it does not seem to be using bootstrap column arrangements. The content section is taking up entire browser width and pushing sidebar_first contents below it. Here is a screenshot of my desktop view:
But when I resize my browser to mobile view it looks like the responsiveness works. Here is the screenshot of mobile view.
Please help me understand what I am doing wrong.
This could be due to your device being considered "large" by bootstrap when it is maximised. You don't currently have a "col-lg-X" class. Try changing
<div id="content" class="col-md-9 col-sm-9 col-xs-12">
to
<div id="content" class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I have just created module and controller for my functionality and got following error:
Error: [$injector:modulerr]
http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=ContactsApp&p1=%5B%24injector%3Anomod%5D%
Following is my html code:
<div ng-app="ContactsApp" class="container">
<div class="row" ng-controller="contactsCtrl">
<div class="col-sm-12 padding-0"> <h2 class="text-center"> Contacts</h2>
<div class="panel panel-default">
<div class="panel-heading c-list">
<span class="title">Contacts</span>
<div class="pull-right">
<a data-toggle="modal" data-target="#upload-contacts" href="#upload-contacts" data-placement="top" title="Add Contact">
<span class="title "><i class="glyphicon glyphicon-plus"></i>Add</span>
</a>
</div>
</div>
</div>
<div>
<!-- My contacts page -->
{% if contributors.details or importedContacts.details%}
{% if not role %}
{% include 'mpb/mycontacts/mycontacts_contributed_team.html' %}
{% else%}
{% include 'mpb/mycontacts/mycontacts_contributors_rolewise.html' %}
{% endif %}
{% elif not contributors.details and not importedContacts.details %}
<div class="no-contacts">
<h3 class="no-contacts-text">No Contacts to show</h3>
</div>
{% endif %}
</div>
</div>
</div>
<div id="upload-contacts" class="modal fade bs-example-modal-sm" tabindex="1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content bg-modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title text-center" id="mySmallModalLabel">Import your contacts <i class="glyphicon glyphicon-question-sign" rel="tooltip" title="click for help."></i></h4>
</div>
<div class="modal-body">
<!--upload your contacts-->
<div id="dvImportSegments" class="fileupload ">
<div class="btn btn-primary btn-block image-preview-input">
<span class=" glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Import Contacts</span>
<input type="file" id="contactFileUpload" accept=".csv .vCard" name="File Upload"/> <!-- rename it -->
</div>
</div><!--end of upload your contacts--><br>
</div>
</div>
</div>
</div>
</div>
Below is js code:
mycontacts.js
var app = angular.module('contactsApp', ['djangular-confirm', 'djangular-alert'])
.config(function ($httpProvider, $interpolateProvider) {
$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
$httpProvider.defaults.headers.common['X-CSRFToken'] = '{$ csrf_value $}';
$interpolateProvider.startSymbol('{$');
$interpolateProvider.endSymbol('$}');
});
app.controller('contactsCtrl', function ($scope, $http, $location, $djconfirm, $djalert) {
});
files I have included
<script type="text/javascript" src="/js/jquery-1.11.0.min.js"></script>
<script src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/angular.min.js"></script>
<script src="/djangular/js/django-angular.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/angular-route.min.js"></script>
The error is showing that there is no module named ContactsApp which is what is expected as main app module due to your ng-app value.
You registered contactsApp which is not the same due to case sensitivity.
In other words: ContactsApp != contactsApp