I found a problem I can't solve by myself. I just want to render a jsvectormap, so the odd thing is when it renders it is way too small.
In addition to that there is a big black block in the site itself. Also when I scroll the site to 200% and then backwards it is then on normal size. And what is also very odd I completely copied it from another blade from my project.
It looked like the problem from this post:
jVectorMap renders too small but I found no solution with the hints from there.
I am very close to just cancel the vectormap and I have no problem with that but I am now very eager to just solve that problem!
I would very appreciate some hints because I didn't find the right solution. Thank you very much in advance
I tried:
Using .updateSize(); change the actual size of the map but only if I use that many times, like in a for. The black block is even there.
Other JQuery functions afterwards like .width() .height() .css()m - nothing worked
Copied the code 1:1 from another blade so I don't think it is because of css
I tried every solution from this post: jVectorMap renders too small
My code:
<script src="{{ asset('js/plugins/jvectormap/dist/jquery-jvectormap.min.js') }}"> </script>
<script src="{{ asset('js/plugins/jvectormap/maps/jquery-jvectormap-world-mill-en.js') }}"> </script>
<script src="{{ asset('js/jquery_vector_map.js') }}"></script>
<link rel="stylesheet" href="{{ 'js/plugins/jvectormap/dist/jquery-jvectormap.css' }}">
<!-- World Map -->
<div class="col-xl-12 js-appear-enabled animated fadeIn" data-toggle="appear" data-timeout="800">
<div class="block block-rounded block-bordered">
<div class="block-header block-header-default">
<h3 class="block-title">Studies - <small> {{ date("F", strtotime("this month")) }} </small> </h3>
<div class="block-options">
<button type="button" class="btn-block-option">
<i class="si si-settings"></i>
</button>
</div>
</div>
<div class="block-content block-content-full">
<!-- World Map Container -->
<div id="world-map-studies" class="js-vector-map-world" style="height: 500px;"></div>
</div>
</div>
</div>
<!-- END World Map -->
Interesting, I am using it very similar way and in my case it renders correctly. Which browser have you tried? Aren't you trying from a device with Retina display or some huge resolution?
You can try my implementation, if this renders ok for you: https://sevenhillsaway.com/map/
I know I was fighting with it as well. If I remember setting the height also helped me.... Maybe some other Divs are influencing it in the design?
Related
I'm learning to make basic site for adding photos, and when I add pictures they are upside down. I have no idea how to reverse them. When I open them in photo gallery they are normal, not reversed, also when I open photo in paint and not doing anything (because its not reversed) I save it, then photos become normal on a website.
I couldn't fix that so I tried adding package with jQueryReverse plugin:
meteor add jjman505:jquery-rotate ,
to reverse pictures using button below images, but this option is still not working for me.
I have no idea what I did wrong and how to work it out, so I hope you can help me. I guess it's something basic I must have missed.
HTML:
<body>
<div class="container">
{{> images}}
</div>
</body>
<template name="images">
<div class="row">
{{#each images}}
<div class="col-xs-12 col-md-3" id="{{_id}}">
<div class="thumbnail">
<img class="js-image" src="{{img_src}}" alt="{{img_alt}}"/>
<div class="caption">
<button class="btn btn-info js-rotate-image">rotate </button>
</div>
</div>
</div>
{{/each}}
</div>
</template>
JS:
Images= new Mongo.Collection("images");
if (Meteor.isClient){
Template.images.helpers({images:
Images.find({}, {sort:{createdOn: -1, rating: -1}})
});
Template.images.events({
'click .js-rotate-image':function(event){
var image_id = this._id;
console.log(image_id);
$("#"+image_id).rotateLeft([angle=90]);
}
});
startup.js:
if (Meteor.isServer){
Meteor.startup(function(){
if (Images.find().count() == 0){
for (var i=1;i<22;i++){
Images.insert(
{
img_src:"img_"+i+".jpg",
img_alt:"image number "+i
}
);
}
I also tried. rotate(90) but didn't work as well.
I cut the code, but I hope I didn't cut anything important in solving that problem.
Thanks
Use this package. It is happening because of metadata image have.
https://github.com/ccorcos/meteor-clientside-image-manipulation
Has anybody worked with Angular-Slick? I'm trying to use this directive so I can get a carousel that displays multiple images/cards. Everything works fine but I can't get to customize the CSS width of the images. I set the variableWidth to true, but nothing. I also removed the slides-to-show option so variableWidth can work, but no results — I still get the default width by Slick. Here is the code below:
<slick infinite="true" slides-to-show="4" slides-to-scroll="4"
init-onload="true" data="popularCourses" variableWidth="true" arrows="true">
<div class="homepage-course-box" ui-sref="courses.show({id: popCourse.id})" ng-repeat="popCourse in popularCourses">
<div class="row" style="margin:0;">
<div class="course-img"
ui-sref="courses.show({id: popCourse.id})"
ng-style="{'background-image':'url({{popCourse.banner_url}})'}"></div>
<div class="author-avatar" ng-style="{'background-image':'url({{popCourse.author.avatar}})'}"></div>
</div>
<div class="row" style="margin:0;">
<a ui-sref="courses.show({id: popCourse.id})" class="homepage-course-title">{{popCourse.title}}</a>
</div>
<div class="row homepage-course-last-row">
<p class="author-name">{{popCourse.author.full_name}}</p>
<p class="course-duration">{{popCourse.duration | secondsToHHMM | date: "H'H' mm'M'"}}</p>
</div>
</div>
</div>
</slick>
From the code, I'm using ng-repeat so it displays all the images, I'm suspecting is interfering with the width, I may be wrong.
So far I like this angular directive, but it will be awesome if I can set my own custom CSS width. Please can anybody help with this! Your help will be appreciated!
Html is not case sensitive so angular requires dashes in attribute names on directives. So instead of variableWidth put variable-width.
By the code alone, the scripts and libraries loaded in two pages are identical, the same template used, just slight difference in main content, but leanmodal works only while on the index page, but NOT in any other page.
<script type="text/javascript" src="js/jquery.leanModal.min.js"></script>
<a id="modal_trigger" href="#modal">Login/Register</a>
<div id="modal" class="popupContainer" style="display:none;">
<header class="popupHeader">
<span class="header_title">site.lt</span>
</header>
<section class="popupBody">
<!-- Social Login -->
<div class="social_login">
<div class="">
<script type="text/javascript">
$("#modal_trigger, #add_ad").leanModal({top : 200, overlay : 0.6, closeButton: ".modal_close" });
$(function(){
// Calling Login Form
$("#login_form").click(function(){
$(".social_login").hide();
$(".user_login").show();
$(".password_reset").hide();
return false;
});
You can try it here (click "Prisijungti/Užsiregistruoti" in the top right corner) http://www.bilietukai.lt . Can't see anything relevant in console either, well at least I can not see it, because I'm more a PHP guy currently and not good enough in JS/jQuery yet.
Alex Taker found the issue, the relative path of js script. So obvious I just lost the forest for the trees when looking for the problem.
I am using this: http://angular-ui.github.io/ui-utils/ and to be more specific this:https://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md
however it does not seem to work. Here is an example:
<div ng-scroll-viewport style="height:240px;" class="chat-messages">
<div class="chat-message" ng-scroll="chat in chats">
<div ng-class="$index % 2 == 0? 'sender pull-right' : 'sender pull-left'">
<div class="icon">
<img src="{{chat.img}}" class="img-circle" alt="">
</div>
<div class="time">
{{chat.time}}
</div>
</div>
<div ng-class="$index % 2 == 0? 'chat-message-body on-left' : 'chat-message-body'">
<span class="arrow"></span>
<div class="sender">{{chat.name}}</div>
<div class="text">
{{chat.msg}}
</div>
</div>
</div>
</div>
But All I get in HTML is this :
<div class="chat">
<div class="chat-messages" style="height:240px;" ng-scroll-viewport="">
<!--
ngScroll: chat in chats
-->
</div>
If I replace ng-scroll with ng-repeat, it works perfectly. But chats need scroll bars, so... How can I get one? :)
The documentation of ngScroll directive had also tricked me into simply replacing ng-repeat by ng-scroll. Unfortunately, it turned out not as simple as that, see also the small, working example at http://plnkr.co/edit/fWhe4vBL6pevcuLutGC4 .
Note that
"datasource" (or whatever object you want to iterate over for the contents of the scroll list) must implement a method "get(index,count,success)" that calls success(results), see hXXps://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md#data-source
The array must have exactly count elements. Otherwise, no scroll window/bar will ever show, which can be very irritating!
Although UI.Utils says it has no external dependencies, ui.scroll has actually a dependency on either ui.scroll.jqlite, or jQuery. So make sure to list both ui.scroll and ui.scroll.jqlite in your module definition which contains the controller with datasource object (and load their .js files, or load ui-utils.js which contains both), see https://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md#dependencies
Be careful when your server is sending some Content Security Policies (CSP). Maybe turn them off while trying to get ng-scroll to work first, then re-apply CSP and tune the policies accordingly for ui.scroll to work.
One way of getting a scroll is to use CSS, set overflow-y to scroll and you will get scroll bar.
If you need to scroll to the bottom, play with anchorScroll
http://docs.angularjs.org/api/ng.$anchorScroll.
I'm trying to add a jquery zoom plugin within a turn.js magazine flipping effect. I've got them both working separately, but can't get the zoom effect within each magazine page like I'd want. Some of the code is below. All ideas are appreciated, thanks.
<!-- Zoom script -->
<script src='jquery.zoom.js'></script>
<script>
$(document).ready(function()
{
$('#ex1').zoom();
});
</script>
<!-- Zoom html -->
<span class='zoom' id='ex1'>
<img src='pages/daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
</span>
<!-- Magazine html -->
<div id="magazine">
<div style="background-image:url(pages/01.jpg);">
</div>
<div style="background-image:url(pages/02.jpg);">
</div>
<div style="background-image:url(pages/03.jpg);">
</div>
in similar situations i used successfully anythingZoomer
it makes easy to zoom arbitrary html elements, given taht a bit of tweaking is needed in order to suit your needs