Hi I'm new to web development and I'm trying to practice by making a small site for my mom!
So basically I have this div that I want to replicate multiple times only changing the image url & the h3 caption.
<div class="col-lg-4 mb-5 col-md-6">
<div class="wine_v_1 text-center pb-4">
<a class="thumbnail d-block mb-4"><img src="images/im.jpg" alt="Image" class="img-fluid"></a>
<div>
<h3 class="heading mb-1">Us</h3>
</div>
</div>
</div>
I was thinking of using JavaScript to copy the div as a string to be something like ( pseudocode )
for image.length {
getelementbyid.print (div1 + imageArray(i) + div2 + caption(i) + endofDiv )
}
Would this be possible? Would it make sense to do it this way or is there a more simple way?
Example
The example works by having a data object, which stores the captions and image URLs. Then, there is a clone template. It loops through each and clones the template, and replaces each element with the correct content. Then it adds it to the HTML with .appendChild.
You can write a function doing this job. Creating copies of your element and change the attributes corresponding to your new data.
function copyAndChangeImageAndCaption(){
const images = [
{imageUrl: "images/de.jpg", caption: "De"},
{imageUrl: "images/it.jpg", caption: "It"},
{imageUrl: "images/fr.jpg", caption: "Fr"}
];
images.forEach(image => {
const el = document.getElementsByClassName('col-lg-4 mb-5 col-md-6');
let copy = el[0].cloneNode(true)
copy.getElementsByClassName('thumbnail')[0].childNodes[0].src=image.imageUrl;
copy.getElementsByClassName('heading')[0].childNodes[0].innerHTML = image.caption;
document.getElementsByClassName('container')[0].appendChild(copy);
});
}
<div class='container'>
<div class="col-lg-4 mb-5 col-md-6">
<div class="wine_v_1 text-center pb-4">
<a class="thumbnail d-block mb-4"><img src="images/im.jpg" alt="Image" class="img-fluid"></a>
<div>
<h3 class="heading mb-1">Us</h3>
</div>
</div>
</div>
</div>
<button onClick="copyAndChangeImageAndCaption()">Add images</button>
Related
I am rendering dynamic data from array of objects on an html page. i want to flip the specific box. On front page i want to show image and heading while on the back page i want to show the paragraph. I am attaching the HTML and JavaScript file.
The HTML code
<div class="row rwOneOurservices ourServicesContainer" ></div>
JavaScript where I am rendering my data from an array of objects
const FnRenderOurService = () => {
if (ElourServicesContainer) {
ElourServicesContainer.innerHTML = "";
for (singleOurService of ourServices) {
ElourServicesContainer.innerHTML += `
<div class="col-sm-3 col-10 ourServiceElement" onclick="FnShowService('${singleOurService.id}')" id="${singleOurService.id}">
<div class="row">
<div class="col-md-4 col-12">
<img
src="${singleOurService.serviceImg}"
alt=""
/>
</div>
<div class="col-md-8 col-12">
<h5>${singleOurService.serviceName}</h5>
</div>
</div>
<div class="row">
<div class="col-12">
<p>
${singleOurService.serviceShortDesc}
</p>
</div>
</div>
</div>
`;
}
}
};
How to apply flip on every grid separately (might be on the basis of 'Id')?
Here's my code for a section of my page that i want to change
let existinguser = document.querySelector('#existing-user');
let table= document.querySelector('#table-contents');
existinguser.addEventListener('click', () => {
table.innerHTML = '';
});
since innerHTML only accepts string, how do i display content from another page
eg. new_page.html using .innerHTML
I dont't know if this will be required but here are the #existing-user snippets
<div class="col-xl-3 col-md-6">
<div class="card bg-primary text-white mb-4">
<div class="card-body">Existing User's requests</div>
<div class="card-footer d-flex align-items-center justify-content-between">
<a class="small text-white stretched-link" href="#" id="existing-user">View Details</a>
<div class="small text-white"><i class="fas fa-angle-right"></i></div>
</div>
</div>
</div>
You should use iframe for adding html pages
You can do hacky stuff. You can use Javascript to fetch another html.
fetch('new_page.html').then(res=>res.text()) and add the response to the innerHTML.
Use jQuery .load(url) or any other method of Ajax in general.
$(".container").load("https://jsonplaceholder.typicode.com/");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h1>next content is loaded from another html page</h1>
<div class="container" style="background:#eee"></div>
<h1>previous content was loaded from another html page</h1>
I am trying to build a search engine for my website and I need to store to data-content of the popovers in a variable so that I can search for them afterwards.
I already tried this:
var popover = $('.companyRoster').data('bs.popover');
popover.getContent();
but it is not working, as expected..
An example of my html containing the popover will be:
<div id="companyRoster" class="companyRoster container">
<div class="row mb-2">
<div class="col-lg-1 col-md-2 col-sm-3 col-6">
<img src="images/john-doe.jpg" alt="..." class="img-fluid rounded-circle padding-0" data-toggle="popover" title="John Doe" data-placement="top" data-content='<b>Position:</b> Team Leader Integration Services <br> <b>Department:</b> IT <br> <b>Email:</b> some.email#aaa.aa <br> <b>Skype:</b> johndoe'>
</div>
</div>
</div>
Can you tell me how can I make console.log() to display the data-content of the popover?
You're looking in the '#companyRoster' element for the data, which that element doesn't have. The data-content is in one of the child elements.
You should be able to get the data-content like so:
var dataContent = $(".img-fluid").data('content');
document.getElementById('other_div').innerHTML = dataContent;
I hope this helps!
I've got a problem to open Bootstrap 4 modal using element generated by Javascript.
There are two very similar cards (identical but with diffrent id). First is hard coded in html doc (and work correctly). Another is generated by simple JS script. I try to use the same class name "openEditModal" but it doesn't work. Then I declared "data-toggle" "data-target" attributes for both but still work only hard coded card. Is there any possibility that Bootstrap JS file work only with hard coded element?
HTML Coded Card
<div class="row" id="all-contacts-box">
<!-- ____EXIST_ADDRESSES____ -->
<!-- addressBoxWrapper -->
<div class="col-xl-3 col-md-4 col-sm-6 col-12 mt-2 d-flex">
<!-- addressBox -->
<div class="card bg-light openEditModal label flex-fill">
<!--contactHeader-->
<div class="card-header pl-2 pt-1 font-weight-bold text-muted label-title">
Office Address
</div>
<!-- contactBody -->
<div class="card-body row pt-0">
<!-- contactBodyLeft -->
<div class="col-4 d-flex justify-content-center align-items-center maps-pin">
<i class="fas fa-map-marker-alt"></i>
</div>
<!-- contactBodyRight -->
<div class="col-8">
<h4 class="label-title font-weight-bold">Main Name</h4>
<h5 class="label-address font-weight-normal">Street 22</h5>
<h5 class="label-address font-weight-normal">City, Country</h5>
</div>
</div>
</div>
</div>
Part of JS Code that generate new card
var createContactBox = function(dataToDisplay, idCounter) {
var mainAddressContainer = document.getElementById("all-contacts-box");
var addNewBox = document.getElementById("add-new-box");
var addressBoxWrapper = document.createElement("div");
var addressBox = document.createElement("div");
mainAddressContainer.insertBefore(addressBoxWrapper, addNewBox);
addressBoxWrapper.appendChild(addressBox);
addressBoxWrapper.classList = "col-xl-3 col-md-4 col-sm-6 col-12 mt-2 d-
flex";
addressBox.classList = "card bg-light openEditModal label flex-fill";
addressBox.setAttribute("data-toggle", "modal");
addressBox.setAttribute("data-target", "editBoxModal");
};
$(".openEditModal").click(function() {
$("#editBoxModal").modal();
});
The problem with dynamically created elements, is that they aren’t born with the same event handlers as the existing elements.
In order to fix it, you need to "refresh" the listeners after you add a dynamically element.
So I add events handlers to a function and turn it off before I turn it on (something like restart). If you don't turn it off, the event will triggered as many times this function is called, and you don't want it.
function refreshEvents() {
$(".openEditModal").off();
$("#add-new-box").off();
$(".openEditModal").click(function() {
$("#editBoxModal").modal();
});
$("#add-new-box").click(function() {
$("#addNewBoxModal").modal();
});
}
Now you can call this function whenever you create another element.
So I call it after you created the element.
This is a working fiddle
I apologize in advance for being weak English :(
My website looks like this:
https://scr.hu/LoDJpD
<div class="container-fluid">
<div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1 text-center">
<div class="card col-md-6 col-sm-6 row-2">
<div class="card-bg">
<div class="image" style="background-image: url('kwadrat.jpg');"></div>
<div class="title"><h1><hr>DNI OTWARTE<hr></h1></div>
<div id="big" class="text">#string/big</div>
</div>
</div>
<div class="card col-md-3 col-sm-3 row-2">
<div class="card-bg">
<div class="image" style="background-image: url('dlugi.jpg');"></div>
<div class="title"><h1><hr>PROJEKTY<br>UNIJNE<hr></h1></div>
<div id="small1" class="text">#string/small1</div>
</div>
</div>
<div class="card col-md-3 col-sm-3 row-2">
<div class="card-bg">
<div class="image" style="background-image: url('maly1.jpg');"></div>
<div class="title"><h1><hr>BUSINESS<br>ENGLISH<hr></h1></div>
<div id="small2" class="text">#string/small2</div>
</div>
</div>
<div class="card col-md-12 row-1">
<div class="card-bg">
<div class="image" style="background-image: url('banner.jpg');"></div>
<div class="title"><h1><hr>CZECHOMANIA<hr></h1></div>
<div id="bigwidth" class="text">#string/bigwidth</div>
</div>
</div>
</div>
</div>
I would like to convert the "#string/text" text to a variable from the database.
In the database, the variable also has the name "#string/text".
Right now I have a simple script, but I know it will be ineffective
text = document.getElementById("big").innerHTML;
lang = document.getElementById("jezyk");
function en(){
document.getElementById("jezyk").className="flag flag-gb";
}
function pl(){
document.getElementById("jezyk").className="flag flag-pl";
}
function useen(){
if(lang.className == "flag flag-gb" && text == "#string/big"){
document.getElementById("big").innerHTML="GB variable form database";
}
}
function usepl(){
if(lang.className == "flag flag-pl" && text == "#string/big"){
document.getElementById("big").innerHTML="PL variable form database";
}
}
setInterval(function jezyk(){
usepl();
useen();
jezyk();
}, 10);
Is there an easier way to retrieve text and replace it from the database?
Can somebody suggest some better and faster functions?
Use an object ( maybe retrieve it from server via JSON), like this:
var translate={
lang:["en","pl"],
values:{
curr_lang:["english","polish"],
info:["english text","polish text"]
}
};
So you can easily display a language chooser:
translate.lang.map(function(language){
var button=document.createElement("button");
button.textContent=language;
button.onclick=changeLanguage.bind(this,language);
document.body/* or a custom element*/.appendChild(button);
});
Traversing the whole dom is not that fast, so may just do it once, and replace all #identifier# with spans (may do this on serverside already and cache it):
document.body.innerHTML=document.body.innerHTML.split("#").reduce(function(part,i){
if(part%2===0) return part;
return "<span id='"+part+"' class='replace'>...</span>";
}).join("");
So the actual replacing is quite easy:
function changeLanguage(lang){
var index=translate.lang.indexOf(lang);
document.querySelectorAll(".replace").forEach(fumction(el){
var select=el.id;
el.textContent=(translate.values[select]||["error","error"])[index];
});
}
A sample text
This site is currently in #curr_lang# ...
The good way
Use some javascript frame work as Angular or React. It'll take some time to learn, but will be nice for you.
I'm not understanding what you want to do on this page, will those texts change frequently? Use setInterval will freeze your page, don't use it.