highcharts web chart inside a modal - javascript

I want to display highcharts web chart on a part bootstrap modal also I want to have a dynamic size along with the bootstrap modal.
What I tried so far is:
HTML code:
<td>${ studentInfo.name }</td>
Modal:
<div class="container">
<div id="studentProfile" class="modal container hide fade in" tabindex="-1">
...
<div class="modal-body">
<div class="row-fluid">
<div class="span6">...</div>
<div class="span6">
// chart
<div class="span6">
<div class="span6">
<div id="chart-web" class="span6"></div>
</div>
</div>
</div>
</div>
</div>
</div>
JS code:
$( function() {
var $modal = $('#studentProfile');
$('.profiler').on( 'click', function() {
$.post('../admin/student_stats.do',
{ name : $(this).text() }, function( data ) {
console.log( data );
console.log( data['studentBean'].myName );
$modal.modal();
},'json')
.fail( function () {
bootbox.alert('Internal Error, please try again.');
});
});
});
The chart code:
$(function () {
$('#chart-web').highcharts({
...
});
});
Result:
At initial draw it works perfectly fine but
when I resize the browser
It messes up the chart. Also when I maximize again the browser the chart still remain like the image shown below. Is there a way to fix this?
If my question isn't clear please kindly comment and I will reply accordingly.
Update: Here a fiddle

you have too many nested class="span6" you need to reduce them
<!-- Right side -->
<div class="span6">
<!-- Graphical view of weakness -->
<div id="chart-web"></div>
</div>
change your problem codes to the above codes
Updated Demo click here

Related

Semantic UI - How do I use sticky in modal window?

I'm using semantic-ui and i'm having a problem with the sticky component.
I can get it to work in a normal page but I can't get it to work in a modal window.
I'm using :
HTML:
<div class="ui modal">
<div class="header">Title</div>
<div class="scrolling content">
<div class="ui sticky">
... content I want to have stick ...
</div>
JS:
$('.ui.sticky')
.sticky('refresh')
;
$('.ui.sticky')
.sticky({
type: 'fixed',
offset: 200
})
;
You're initializing sticky behavior before the element is even visible yet, cause you're using modal , to prevent that from happening, use onVisible callback to start sticky behavior like the following :
[DEMO]
JS(jQuery)
$( document ).ready(function() {
$('.ui.modal').modal('show').modal({
onVisible:$('.ui.sticky').sticky({
type: 'fixed',
offset: 200
}).sticky('refresh')
});
});
HTML
<div class="ui modal">
<div class="header">Title</div>
<div class="scrolling content" style="min-height:1000px">
<div class="ui sticky"> ... content I want to have stick ... </div>
</div>
</div>

Trigger on show event for bootstrap modal not working

This question has probably been answered already however I am trying to ask it as specific as possible.
Using the examples found here. Under the varying content based on trigger button.
I have a bootstrap modal that is opened with an <a></a> tag which needs to be given information from AngluarJS. The example uses Jquery to do some magic and pass the data in.
BIG Edit Lots of code appearing here because something is slightly wrong. I am thinking it is in when the scripts load.
On live demo please attempt to debug and find why the var Index = button.data('Index') comes out undefined. - Fixed - case sensitive
Final problem why is the jquery failing at
VM155:8 Uncaught TypeError: angular.element(...).scope(...).logic.UpdateNews is not a function
Done it works, I freaking got it all!
HTML:
<script src="http://www.jqueryscript.net/demo/Responsive-jQuery-News-Ticker-Plugin-with-Bootstrap-3-Bootstrap-News-Box/scripts/jquery.bootstrap.newsbox.min.js" type="text/javascript"></script>
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-heading"> <span class="glyphicon glyphicon-list-alt logo-inverse pull-left"></span><b> General News</b></div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<ul class="demo1" style="overflow-y: hidden; height: 280px;" ng-model="Idk">
<li style="" class="news-item text-left" ng-repeat="item in News.GeneralNews"><strong>{{item.DateValue | date: "MMM dd yyyy"}}</strong>{{item.Preview}}<a class="FakeClickable" data-target="#GeneralModal" data-toggle="modal" data-Index="{{item.Index}}">Read more...</a></li>
</ul>
<div ng-if="Width>768">
<div ng-include="'../pages/Modals/General/GENERAL_INLINE.html?Update=Yes'"></div>
</div>
</div>
</div>
</div>
<div class="panel-footer"> </div>
</div>
</div>
Modal:
<div class="modal fade" id="GeneralModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="width:auto;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="FixModalHeader">
<img style="vertical-align:middle" src="../Content/Images/Icons/favicon-32x32.png">
<span style="">{{NewsCast.HeaderTitle}}</span>
</div>
</div>
<div class="modal-body">
<div data-ng-include="'../pages/Modals/General/GENERAL_MODAL.html'"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
console.log("I was here!");
$('#GeneralModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var Index = button.data('Index') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
angular.element('#mycontroller').scope().logic.UpdateNews('General', Index);
angular.element('#mycontroller').scope().$apply();
})
});
</script>
<script>
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
</script>
What happens inside the last ng-include:
<div class="html-format">
<div ng-bind-html="NewsCast.General.Body">
</div>
What I need answered:
Can I have have the jquery function trigger and then change something in my AngularJs code? The way I have my modals set up is the text and stuff appearing on them is data-bound to Angular objects. If the jquery can change a value in my angular all my modals will work.
Even more specific if the jquery can call a function from my angularjs code and pass in some arguments I'll really be set.
I'll take suggestions on proper code edikit please
If I understand correctly then you can use a service for this. Inject the service into both the controller with the jquery and the controller with the databound DOMs. Then if you store the data as well as functions to alter the data in the service you can alter it in both places and also bind it to the $scope of each.
You can use a service for this as described above.
I'm not an expert on Angular code etiquette, but you can do it this way.
Services
Simpler example Note: see creating custom service.

When div is clicked - slidetoggle other div

I have a problem with my jQuery code, I want the page to slideToggle one div ones the other is clicked, the problem is that I don't want to write all the code again and again so I tried to create a code that works all the time, but I'm stuck. Box is the div which should be clicked and it should contain a class that's also used on the div that's gonna slideToggle. It should pull the class from the tab and then use it to slideToggle the right object. Please help :S (the elements are not placed close to each other which makes next or children not possible). If you have any questions - ASK!
The jQuery code of mine:
$(".box").click(function() {
var Klassen = $(this).attr("class");
$("Klassen").slideToggle(300);
});
HTML:
<!-- These should be clicked -->
<div data-toggle-target="open1" class="box ft col-lg-3">
<div class="mer">
Läs mer
</div>
<div class="bild"><img src="images/sakerhet.jpg"></div>
<h4>HöstlovsLAN</h4>
</div>
</a>
<div data-toggle-target="open2" class="box st col-lg-3">
<div class="mer">
Läs mer
</div>
<div class="bild"><img src="images/sakerhet.jpg"></div>
<h4>NyårsLAN</h4>
</div>
<div data-toggle-target="open3" class="box tt col-lg-3">
<div class="mer">
Läs mer
</div>
<div class="bild"><img src="images/sakerhet.jpg"></div>
<h4>Säkerhet</h4>
</div>
<!-- These should be toggled -->
<div class="infobox" id="open1">
<h1>HöstlovsLAN</h1>
</div>
<div class="infobox" id="open2">
<h1>NyårsLAN</h1>
</div>
<div class="infobox" id="open3">
<h1>Säkerhet</h1>
</div>
EDIT - NEW PROBLEM - STILL AIN'T WORKING!
The code didn't work in my situation and would like you to take a look at the JS-fiddle I created:
http://jsfiddle.net/Qqe89/
undefined has presented the solution.
I would warn you about using this approach, if you add any classes to the .box div then your code will break.
Instead consider using data attributes to target the div to be toggled:
<div data-toggle-target="open1" class="box green"></div>
<div id="open1">
Opens
</div>
Which can then target with
$('.box').click(function (e) {
$( '#' + $(this).data('toggleTarget') ).slideToggle(300);
});
jsFiddle with example using your html - crudely formatted sorry!
$(".box").click(function() {
var Klassen = $(this).attr("class");
$("."+Klassen).slideToggle(300);
});
class attribute may contain several classes ($(this).attr("class") OR this.className)
$("."+Klassen) will not work if there are several classes
"Klassen" does not correspond to any DOM element as there is no such tag in HTML.

Javascript while loop not rendering html in IE8

EDIT: ( SEE ANSWER BELOW )
I've been a long time viewer of stackoverflow but my first question today since I didn't found any answer anywhere... I have a strange behavior with my javascript code. I've tried a lot of different way but never been able to correct the problem. What I want is to collapse and expand some element when I click on a button... Normally it would be simple and it's working In Chrome but not in IE8.
There is no error message
He enter the loop but do not had the class or the toggle to my element.
here is my javascript code:
function collapseClick(obj) {
var group = $(obj).attr('data-maingroup');
console.log("collapseClick on group:" + group);
console.log("obj class before:" + $(obj).attr('class'));
if ($(obj).hasClass("toggleExpand")) {
$(obj).addClass("toggleMinus");
$(obj).removeClass("toggleExpand");
} else {
$(obj).removeClass("toggleMinus");
$(obj).addClass("toggleExpand");
}
console.log("obj class after:" + $(obj).attr('class'));
$('div[data-group="' + group + '"]').each(function (index, item) {
console.log("div loop for group:" + group + " index:" + index);
$(this).toggle();
});
}
here is my Html that is rendered:
<div id="chart">
<div class="leftPart">
<div class="header">name</div>
<div class="item parent">
<a id="collapse_Integrated_Planning" onclick="collapseClick(this);return false;" style="float:left;" class="leftcollapse toggleMinus" data-maingroup="Integrated Planning"></a>Integrated Planning
</div>
<div class="item child gantShow" data-group="Integrated Planning">John Smith</div>
<div class="item child gantShow" data-group="Integrated Planning">Alex Smith</div>
</div>
<div class="gantMainControl" id="gantControl">
<div class="header">
<div class="headerRow">
<div class="headerRowYear" id="headerYear">
<div class="headerCellYear" style="width:1499.5983985355874px">2013</div>
</div>
</div>
<div class="headerRow">
<div class="headerCellMonth" style="width:126.42890508110469px">January</div>
<div class="headerCellMonth" style="width:114.1938497506752px">February</div>
<div class="headerCellMonth" style="width:126.42890508110469px">March</div>
<div class="headerCellMonth" style="width:122.35055330429486px">April</div><div class="headerCellMonth" style="width:126.42890508110469px">May</div>
<div class="headerCellMonth" style="width:122.35055330429486px">June</div>
<div class="headerCellMonth" style="width:126.42890508110469px">July</div><div class="headerCellMonth" style="width:126.42890508110469px">August</div>
<div class="headerCellMonth" style="width:122.35055330429486px">September</div>
<div class="headerCellMonth" style="width:126.42890508110469px">October</div>
<div class="headerCellMonth" style="width:122.35055330429486px">November</div>
<div class="headerCellMonth" style="width:126.42890508110469px">December</div>
</div>
</div>
<div class="container">
<div class="timelineContainer" style="width: 1503px;"></div>
</div>
<div class="container gantShow" data-group="Integrated Planning">
<div class="timelineContainer child" style="width: 1503px;">
<div class="timeline" style="width:722.9598440425635px;margin-left:772.560202716214px" title="2013/07/08 - 2013/12/31<br></div>Integrated Planning" onclick="onTimelineClick(this)" data-id="159c5c97-c135-4906-970c-e4d58f647c41" data-startdate="2013/07/08">100%</div>
</div>
</div>
<div class="container gantShow" data-group="Integrated Planning">
<div class="timelineContainer child" style="width: 1503px;">
<div class="timeline" style="width:949.2691917671041px;margin-left:546.2508549916735px" title="2013/05/14 - 2013/12/31<br></div>Integrated Planning" onclick="onTimelineClick(this)" data-id="5c3756b1-0674-4bfc-b6ce-fa765db63eed" data-startdate="2013/05/14">100%</div>
</div>
</div>
Here is my console log:
LOG: collapseClick on group:Integrated Planning
LOG: obj class before:leftcollapse toggleMinus
LOG: obj class after:leftcollapse toggleExpand
LOG: div loop for group:Integrated Planning index:0
LOG: div loop for group:Integrated Planning index:1
LOG: div loop for group:Integrated Planning index:2
LOG: div loop for group:Integrated Planning index:3
I really need help this IE8 problem begin to annoyed me a lot...
ANSWER:
I've found the answer to my question.
The problem was related with how chrome and IE handle the resize event.
I had another javascript function that was called on the resize of the browser (
$(window).resize(function () {
console.log("resize");
config.zoomLevel = ($(window).width() - 200) / 421.739; //magic formula to know how many pixel is entering in the screen for the chart.
createGantControl(('#' + mainControlId), config);
});
).
This function was regenerating my graph.
when you change css value, Chrome doesn't call the resize event.
BUT when you change css value in IE, IE recall the resize so my graph was always rerender.
Hope it can help in the futur!
-Jeff
I've found the answer to my question.
The problem was related with how Chrome and IE handle the resize event.
I had another JavaScript function that was called on the resize of the browser:
$(window).resize(function () {
console.log("resize");
//magic formula to know how many pixel is entering in the screen for the chart
config.zoomLevel = ($(window).width() - 200) / 421.739;
createGantControl(('#' + mainControlId), config);
});
This function was regenerating my graph.
When you change CSS value, Chrome doesn't call the resize event.
BUT when you change CSS value in IE, IE recalls the resize event so my graph was always rerender.

.slideToggle() is being triggered many times?

I'm trying to create a Tumblr theme in which the links and post information slide in when you click a + sign. (My test blog is at http://noitsnotitsnotokay.tumblr.com/)
I'm quite the begginner at JavaScript, but I was able to work it out for a links menu with the following code:
<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>
<script>
$("ul.lks").hide();
$("span.btn").click(function () {
$("ul.lks").slideToggle("slow");
});
</script>
But I also have a piece of code that applies to all posts, for the post information. I used nearly the same code, but, as you can probably see, it slides in and out various times.
<div class="pstinfo">
<!-- info is here -->
</div>
<span class="plsign">+</span>
<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
$("div.pstinfo").slideToggle("slow");
});
</script>
It seems that the button's order and the way I name the classes in the JavaScript isn't changing much...any tips?
If you you don't want to open all the '.pstinfo' elements when you click on '.plsign', just the related one, try this code:
HTML:
<div class='parentContainer'> <!--put your elements in a parent Container -->
<div class='info'>
Info 1
</div>
<div class='plsign'>
+ Open
</div>
</div>
<div class='parentContainer'>
<div class='info'>
Info 2
</div>
<div class='plsign'>
+ Open
</div>
</div>
<div class='parentContainer'>
<div class='info'>
Info 3
</div>
<div class='plsign'>
+ Open
</div>
</div>
JS:
$(".plsign").on('click',function ()
{
$(this).parent().find('.info').slideToggle("slow");
});
Link to jsFiddle
code block 01
<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>
<script>
$("ul.lks").hide();
$("span.btn").click(function () {
$("ul.lks").stop().slideToggle("slow");
});
</script>
Code block 02
<div class="pstinfo">
<!-- info is here -->
</div>
<span class="plsign">+</span>
<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
$("div.pstinfo").stop().slideToggle("slow");
});
</script>
Try this code and Update the result :)

Categories