I am trying to show an image in the popover,
after i created an element i add attributes to show an popover.
var item = document.createElement('div');
var att2 = document.createAttribute("data-toggle");
var att3 = document.createAttribute("title");
var att4 = document.createAttribute("data-content");
var att5 = document.createAttribute("data-placement");
att4.value = "<img src ='blablabla.png' />;"
att3.value = itemname;
att2.value = "popover";
att5.value = "top"
item.setAttributeNode(att5);
item.setAttributeNode(att2);
item.setAttributeNode(att3);
item.setAttributeNode(att4);
any idea ? the output in the popover content is <img src ='blablabla.png' />;
SOLUTION
just add html:true into
$('[data-toggle="popover"]').popover({html:true,trigger:"hover",container: 'body'});
function addImg(theDiv,theImg) {
var element = document.createElement("img");
element.src = theImg;
document.getElementById(theDiv).appendChild(element);
}
<div id="myDiv" onclick="addImg('myDiv','https://media1.popsugar-assets.com/files/thumbor/7NnYpYvDfxr_HYUpa4tySashCM8/fit-in/1024x1024/filters:format_auto-!!-:strip_icc-!!-/2017/03/17/915/n/1922398/40d6ad1840bc51bf_GettyImages-89938282/i/1997.jpg')">
Click me to append image
</div>
Is this kinda what you're after? Hard to tell from your explanation.
Related
I am new to HTML jquery. I'm stuck on the below issue and unsure not sure how to go about solving it.
I have added a line chart onto a modal box. The chart displays, but only at half the height of the modal height, when I would have expected the entire modal height to be used.
My HTML code is follows
<div id = "myModal" class="modal">
<div class="modalContent">
<span class = "close"> </span>
<div id="data_chart"></div>
</div>
</div>
The jquery function I use to create the chart is below, I left out some formatting codes for simplicity.
function renderChart() {
//===========================
var len = data_obj["trend"]["x"].length;
var trend_data = []
for (var i=0; i<len; i++){
var d = new Date(data_obj["trend"]["x"][i]);
var t = {"date": d, "value": data_obj["trend"]["y"][i]};
trend_data.push(t)};
var chart = am4core.create("data_chart", am4charts.XYChart);
chart.data=trend_data;
var title = chart.titles.create();
title.text = "Pulse Index";
title.marginBottom = 30;
title.fontSize = 16;
var dateAxis_line = chart.xAxes.push(new am4charts.DateAxis());
dateAxis_line.renderer.inside = true;
dateAxis_line.renderer.grid.template.disabled = true;
// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
};
The output of the modal & chart shows the chart's height is not fully occupying the height of the modal box. I am not sure why.
For more detail, the DOM details are
Many thanks!
I am dynamically assembling divs within divs and adding text to each internal div - building a list with a Javascript list adapter. The internal list divs display as desired, but the respective text divs in each list div does not:
Example:
As you can see in the image the text div on the right in red text is slightly higher than the one on the left in green. I have set the properties for each as such:
In Javascript I add them in a loop using the following:
var divGreen = document.createElement("div");
divGreen.style.position = "relative";
divGreen.style.width = "10%";
divGreen.style.left = "100%";
divGreen.style.top = "100%";
divGreen.style.marginLeft = "-40%";
divGreen.style.marginTop = "-20%";
divGreen.style.color = "green";
divGreen.style.textAlign="left";
divGreen.style.backgroundColor = "#cccccc";
divGreen.innerHTML = 'Text';
div.appendChild(divGreen);
var divRed = document.createElement("div");
divRed.style.position = "relative";
divRed.style.width = "10%";
divRed.style.left = "100%";
divRed.style.top = "100%";
divRed.style.marginLeft = "-20%";
divRed.style.marginTop = "-20%";
divRed.style.color = "red";
divRed.style.textAlign="left";
divRed.style.backgroundColor = "#cccccc";
divRed.innerHTML = 'Text';
div.appendChild(divRed);
Also, the literal Text is used to eliminate character size differences.
Why do they not line up vertically as expected? What am I missing?
After reviewing this SO post - It's clear my understanding of absolute positioning was wrong. By setting the position absolute on the parent, I can use absolute positioning of it's children relative to the parent. The key is the parent having position set to absolute!
var divGreen = document.createElement("div");
divGreen.style.position = "absolute";
divGreen.style.width = "10%";
divGreen.style.left = "100%";
divGreen.style.top = "37px";
divGreen.style.marginLeft = "-40%";
divGreen.style.color = "green";
divGreen.style.textAlign="left";
divGreen.style.backgroundColor = "#cccccc";
divGreen.innerHTML = 'Text';
div.appendChild(divGreen);
var divRed = document.createElement("div");
divRed.style.position = "absolute";
divRed.style.width = "10%";
divRed.style.left = "100%";
divGreen.style.top = "37px";
divRed.style.marginLeft = "-20%";
divRed.style.color = "red";
divRed.style.textAlign="left";
divRed.style.backgroundColor = "#cccccc";
divRed.innerHTML = 'Text';
div.appendChild(divRed);
Now my links are aligned vertically as intended:
I had this happen to me. I was able to put my code in a table.
<table>
<tr>
<td>
html code here
</td>
</tr>
</table>
TR means table row and td is table data
In my application, a large number of divs is dynamically rendered in an HTML page through the use of JavaScript. In fact, there are more than 100 dynamically created divs. Loading the content from server side, it is taking more time to load dynamic divs than static divs. How can I reduce the time it takes to load dynamic divs? This is the sample code I am using:
var ul_slide = document.createElement('ul');
var slide_div = document.createElement('div');
slide_div.setAttribute("class", "slide");
for (var i = 0; i < data.arrayItems.length; i++) {
alert(data.arrayItems.length);
var postId = data.arrayItems[i].postId;
var tag = data.arrayItems[i].tag;
var li_slide1 = document.createElement('li');
var img_link1 = document.createElement('a');
var linka = "#" + postId;
img_link1.setAttribute("href", linka);
img_link1.setAttribute("class", "click");
var img_slide1 = new Image();
img_slide1.style.width = "159px";
img_slide1.style.height = "100px";
img_slide1.setAttribute("src",data.arrayItems[i].url);
img_link1.appendChild(img_slide1);
li_slide1.appendChild(img_link1);
ul_slide.appendChild(li_slide1);
slide_div.appendChild(ul_slide);
div.innerHTML = "";
div.appendChild(slide_div);
}
I am using ght ebelow script to get the image name in title and alt attribute.
var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
my question is there ant posibility of generating the caption using image title.
$("img").each(function () {
var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/')) + 1, filename.lastIndexOf('.'));
$img.attr('alt', filename.substring((filename.lastIndexOf('/')) + 1, filename.lastIndexOf('.'));
});
I need to create one single web page with 4 tab. By pressing on a tab the relevant content should display on the whole page and that should work for all tabs. I mean, when user press on one tab it will display content which will be linked to that tab and hide another tab's content. How can I do it in HTML and CSS?
Jquery UI has an out of the box solution for this:
http://jqueryui.com/demos/tabs/
Granted it's not a pure HTML and CSS solution however I'm not sure you'll be able to do it without some form of scripting
This is my final solution to my problem:
function show(showEl) {
var elements = new Array("tahsilatlarIcerik", "faturaTabGraf", "odemeIcerik", "kasaIcerik");
for (var i = 0; i < elements.length; i++) {
if (showEl == elements[i]) {
document.getElementById(showEl).style.display = "block";
}
else {
hide(elements[i]);
}
}
}
function hide(hideEl) {
if (document.getElementById(hideEl).style.display != "") {
document.getElementById(hideEl).style.display = "none";
}
}
Basically, I've created an Array with elements id's inside and manipulate them with 2 function. Functions are called inside of tabs, e.g., <a id="faturaMenu" onclick="show('faturaTabGraf')">Fatura Analizi</a>. I hope this will be helpfull to someone.
I solwed problem with javascript code. I am posting it and I am wondering if there is another,
less coded way to do it? As far as I researched, I've found that in javascript declaring and asigning global variables at the same time is not supported, do you know any other simple way to do it?
AND CODE:
function getFatura() {
var tahsilatId = document.getElementById("tahsilatlarIcerik");
var faturaTabloId = document.getElementById("faturaTabloIcerik");
var faturaGrafikId = document.getElementById("faturaGrafikIcerik");
var odemelerId = document.getElementById("odemeIcerik");
var kasaId = document.getElementById("kasaIcerik");
faturaTabloId.style.display = "block";
faturaGrafikId.style.display = "block";
tahsilatId.style.display = "none";
odemelerId.style.display = "none";
kasaId.style.display = "none";
}
function getTahsilatlar() {
var tahsilatId = document.getElementById("tahsilatlarIcerik");
var faturaTabloId = document.getElementById("faturaTabloIcerik");
var faturaGrafikId = document.getElementById("faturaGrafikIcerik");
var odemelerId = document.getElementById("odemeIcerik");
var kasaId = document.getElementById("kasaIcerik");
faturaTabloId.style.display = "none";
faturaGrafikId.style.display = "none";
tahsilatId.style.display = "block";
odemelerId.style.display = "none";
kasaId.style.display = "none";
}
function getOdemeler() {
var tahsilatId = document.getElementById("tahsilatlarIcerik");
var faturaTabloId = document.getElementById("faturaTabloIcerik");
var faturaGrafikId = document.getElementById("faturaGrafikIcerik");
var odemelerId = document.getElementById("odemeIcerik");
var kasaId = document.getElementById("kasaIcerik");
faturaTabloId.style.display = "none";
faturaGrafikId.style.display = "none";
tahsilatId.style.display = "none";
odemelerId.style.display = "block";
kasaId.style.display = "none";
}
function getKasa() {
var tahsilatId = document.getElementById("tahsilatlarIcerik");
var faturaTabloId = document.getElementById("faturaTabloIcerik");
var faturaGrafikId = document.getElementById("faturaGrafikIcerik");
var odemelerId = document.getElementById("odemeIcerik");
var kasaId = document.getElementById("kasaIcerik");
faturaTabloId.style.display = "none";
faturaGrafikId.style.display = "none";
tahsilatId.style.display = "none";
odemelerId.style.display = "none";
kasaId.style.display = "block";
}
AND I AM CALLING THESE FUNCTION IN a element WITH onclick event. Basically I am changing display propertie of selected tab to BLOCK and display properties of other tabs to NONE.
Now, I have 4 tab, but I can not imagine what crowd of code will I need if it exceed to, for example 10 tabs.
Thanks,
You could do it with CSS/javascript by changing the z-indexes of the pages (as divs) onclick. This would bring one in front of the other.
Just have a div containing all the tabs, and then divs with different ids for each one.
Start with the page divs all having z-index:0;, except for the home div, which hasz-index:1;.
Each tab has an onclick="nextpage('page1') (Change page1 to the id of the corresponding page).
Then in the javascript, place this code:
function nextpage(pageid) {
//Find the highest z-index. May need to be customized
var elements = document.getElementsByTagName("*");
var highest_index = 0;
for (var i = 0; i < elements.length - 1; i++) {
if (parseInt(elements[i].style.zIndex) > highest_index) {
highest_index = parseInt(elements[i].style.zIndex;
}
}
var highest_index_1 = highest_index + 1;
//set the z index of the tab-page to the highest+1
getElementByid(pageid).object.style.zIndex="1";
}