I searched a solution for this problem and I came to this: http://blog.amcharts.com/2012/08/displaying-javascript-charts-in-tabs-or.html which seems easy enough. But when I apply that piece of code according to the example, the tabs stop working, I can't switch between them.
In URL there is some change according on what tab I clicked, but content isn't switching, tabs are not also. I can't figure it out even after two days of searching. Structure of my code is like that:
I got file with html code, JS code for tabs (just like in the example on amCharts site), plus function for loading content to the tabs from another files:
$("#zalozka_kalkulace").click(function(){
$("#detail_ceny_switch_ceny").addClass("open");
$("#detail_ceny_switch_ceny").removeClass("rucka");
$("#detail_ceny_switch_ceny").css({ 'height' : '478px', 'margin-bottom' : '-360px', 'margin-right' : '-475px', 'float' : 'left', 'top' : '-360px', 'width' : '871px' });
if($("#detail_ceny_grafy_kalkulaci").html() == ""){
$("#detail_ceny_grafy_kalkulaci").load('./safe/kalkulace_grafy_all.php?k_stupen=<? echo $k_stupen; ?>&k_polozka=<? echo $co; ?>',function(){
$("#detail_ceny_grafy_kalkulaci").removeClass("hidden");
});
}else{
$("#detail_ceny_grafy_kalkulaci").removeClass("hidden");
}
});
I got another file which contains everything that is displayed in the tab. That means div in which the chart should be displayed, plus JS code for chart data and chart itself (just like in the example on amCharts site)
Do you have any idea how to fix this? I got everything like in that example (I copied that) but just separated in the two files.
I don't think it will work like that. The JavaScript code loaded through jQuery.load does not get executed.
The solution would be to load HTML and JavaScript part separately using two AJAX requests: jQuery.load for HTML and jQuery.getScript for JavaScript part. Or, even better, modify the loaded script to include the HTML items, too.
I.e.:
In the main script:
$.getScript("./safe/kalkulace_grafy_all.php?k_stupen=<? echo $k_stupen; ?>&k_polozka=<? echo $co; ?>',function(){
$("#detail_ceny_grafy_kalkulaci").removeClass("hidden");
});
In the loaded script:
$("#detail_ceny_grafy_kalkulaci").html('<div id="chartdiv"></div>');
var chart = new AmCharts.AmSerialChart();
....
chart.write("chartdiv");
Related
This would be a generic question asked a number of times before. The reason why i am asking this is because i did use the on ready call back in jquery and it did not modify the placeholder of my element "search_input"
$( document ).ready(function() {
$("#search_input").attr('placeholder','New data that will be shown');
}
This is because the CSS is applied on the id "search_input" before it is loaded. I have tried everything but nothing seems to work.
Any ideas?
Note : I am working on ArcGIS Javascript to applications using ERSI maps . The issue i face is occurs when I load a search bar through javascript, which takes time to load the search bar. But my html page calls the on ready callback before this script is loaded. Hence, I face this issue. I am unable to solve this and any help would be appreciated!
I fixed this in my code using this,
search.on("load", function () {
//push all the sources
var sources = search.sources;
sources.push(addSources("ABC","ABC","eg : ABC",1));
sources.push(addSources("XYZ","XYZ","eg: XYZ",1));
search.set("sources", sources);
//Adding the placeholder here, as the search bar is loaded with sources only at this point of the execution
//Hence, we can modify the CSS only after this point.
$("#search_input").attr('placeholder','Search Tree Data');
});
You cannot modify the CSS anywhere in the code. It has to be modified only when the search bar has been loaded with all its sources. I tried adding a $document.ready(function(){}); or adding the css at the end of the body. Nothing worked because we are using a different javascript library/toolkit here - Dojo. Hence, we can only performs operations based on how the data is loaded or when call backs are called in Dojo. and not in normal HTML javascript to jQuery.
OK, I am baffled on how to get Bootstrap 3 Tooltip working.
Bootstrap Tooltip "instructions"
http://getbootstrap.com/javascript/#tooltips
Says to trigger using:
$('#example').tooltip(options)
then HTML to write
Hover over me
No matter what I do, I cannot seem to get it working. There is no ID named example in their example, and adding said ID does not work (I wrap the script in a script tag and have added it before and after the anchor).
But, after looking around on Google, I found the following code, which when added makes the Tooltip work as it should.
$(function () { $("[data-toggle='tooltip']").tooltip(); });
So, my question is, How the hell do I get it working with the provided Bootstrap code! What am I missing? They really need to work on their instructions. This should not take this long to figure out when it should be simple!
I was able to recreate this in a fiddle. Check the console on your browser if you are getting javascript errors. Looking at the code you have provided though it hits me that you might be mixing two things together. The options need to be defined in your javascript code and not in HTML, like this:
$(document).ready(function() {
var option = {
title: "example",
placement: "bottom"
};
$("#example").tooltip(option);
});
Well, this is about how to read the document of bootstrap.
$('#example').tooltip(options)
just presents how to use the jquery method, and it is not right for the following html:
Hover over me
The method must be called in order to active the tooltips plugin. So, in order to make the html working with the plugin, you need to do two steps:
add an id into the html, say,
Hover over me
call the jquery method,
$('#tips').tooltip(options)
This is a page I'm currently working on as a project
$(function() {
$(".modal-launcher, #modal-background").click(function() {
$(".modal-content, #modal-background").toggleClass("active");
$(".vid-1i").attr("src", "link1");
$(".vid-2i").attr("src", "link2");
$(".vid-3i").attr("src", "link3");
$(".vid-4i").attr("src", "link4");
$(".vid-5i").attr("src", "link5");
$(".vid-6i").attr("src", "link6");
$(".vid-7i").attr("src", "link7");
$(".vid-8i").attr("src", "link8");
//$('html').toggleClass('active').css('top', -(document.documentElement.scrollTop) + 'px');//
});
});
above the actual links are replaced just to display a quick idea of the bad jQuery.
In it, I am attempting to create my own popup launcher for videos; however, I am having trouble using jQuery to replace the "" src of an iframe element to a YouTube link. I am unable to figure out why the jQuery is not working. I understand that the jQuery is, of course, working properly, and that it is me who has written the code incorrectly, but here I am asking if anyone is able to figure out what it is I've done wrong, or what can be changed to make it work.
For some reason, the last video in the jQuery list is always the one retrieved.
Understand that the images are missing from the page due to them being local files and not network locations. Clicking above the captions that read like "Match One" will have the "intended" result, regardless if the image is showing or not.
Coming back to this and understanding more of JavaScript and jQuery, my problem was simply misunderstanding the code. In order to do something like this, one function per link would be more suitable.
function video1()
{
$("#popup, #modal-background").toggleClass("active");
$("#popup").prop("src", "https://www.youtube.com/embed/7h1s15n74r3all1nk");
document.getElementById('scroll').style.cssText ='overflow:hidden';
}
complementary html would look like this:
<div onclick="video1()"></div>
The previous code would run each line, effectively setting the last link as the source of the element. The new code is button independent, ensuring only one link belongs to each button.
I am using Highstock V 1.2.5
I want to print chart with some custom HTML details on top of it.
I have created a div in my JSP with custom HTMLand tried adding it before body.appendChild(container); into exporting.js But, It didn't work.
Second, I have tried creating HTMl file and adding $("#tab2").html(); where tab2 is my container. But, No luck with that.
When I open the exported HTML its different than what I get from console.log($("#tab2").html()) and the copy it into HTML.
Is there any way to get container HTML into .js ?
You can edit source in that way: http://jsfiddle.net/3bQne/497/
// some custom code
$(body).append('<div style="width:50px;height:50px; background-color: red"></div>');
body.appendChild(container);
// print
win.focus(); // #1510
win.print();
i have one website which is working on templates.
in the template there is one main image & i want to replace that main image on some pages only not on full website. what i am looking for is to change the main image to new image on page where i need with ajax.
when i see the css of that template i found following code to show image
.top-bg{
background:url(../images/top-bg.jpg)
top center no-repeat;
position:relative;
}
and on php page i found following line which bring image.
<div class="top-bg">
i need ajax / jquery code to change image.
my basic logic is, i will get that image URL from MYSQL databse and assign to one variable and then i will change the image which come from database, actually its one page displaying products and i want to display main image of product with ref to loaded product, i hope you will understand what i need at the end...
Thanks
Thanks for every one how reply, i found the solution
$(document).ready(
function(){
$('#imageContainer').css("background-image", "url(images/cube.jpg)");
}
);
this did trick for me what i need, any way thanks and also for -ve voting thanks... :((
While I think Ajax is the wrong solution for your problem, I'll offer you the following (which, at least, meets your question):
$('#changeImage').click(
function(){
$('#imageContainer').load('http://path.to.php/file.php #imageID');
return false;
}
);
Clicking an element of id="changeImage" will load the contents of id="imageID" from the php file located at the url of http://path.to.php/file.php into an element (presumably div, but whatever) of id="imageContainer".
That said, I'd suggest following #Nick Craver and #Aaron Digulla's advice and use CSS.
If you view source there's a working demo of jQuery's load on my site (posted in response to a different SO question) at http://davidrhysthomas.co.uk/play/loadDemo.html.
Edited in response to comment from OP.
To do this automatically, on page-load:
$(document).ready(
function(){
$('#imageContainer').load('http://path.to.php/file.php #imageID');
}
);
You don't need any JavaScript at all for this, just include another stylesheet (or <style> block) on the webpages you want the imaged changed on. Just have this in there:
.top-bg { background:url(../images/other-image.jpg); }
Or the <style> version:
<style type="text/css">
.top-bg { background:url(../images/other-image.jpg); }
</style>
As long as this is declared after that template stylesheet, that background property will override the template one, and you'll have your custom image on just those pages.
I think AJAX is the wrong approach here. AJAX should be used to load new data when the user interacts with the web page.
Your problem can be solved much more simple: If you can add an AJAX call to the code of the page, why not simply add a new CSS style:
.tob-bg {
background:url(../images/other.jpg) top center no-repeat;
}
Or create a second template and use that for all but the main page.