How to dynamically load generated html with javascript? - javascript

I am making a website using HTML, CSS and Javascript. What I'm currently trying to do is making a Javascript that simplifies the way to add more 'items' to a website. For example a store item. Please see http://nl.tinypic.com/r/t5khtf/9.
Those are 3 items that I am adding in this Javascript. However, it keeps telling me that the items are UNDEFINED...
Here is the code from the JavaScript http://pastebin.com/hjL9MByY.
Here is how I load it into a div:
<div id="store_beatles_eps"></div>
How do I fix this?
Any help would be very much appreciated.
If I made any mistakes in the question, please report that to me and I'll change it :).

You use wrong variable. Instead of this:
function generateStoreItem(item)
...
r = r.replace("{{page}}", store_beatles_eps.itemPage);
you should have
function generateStoreItem(item)
...
r = r.replace("{{page}}", item.itemPage);
And yet, while ago I did simple repeatable() jQuery plugin for that purpose:
https://github.com/c-smile/repeatable

Related

Wordpress How to COPY TEXT to CLIPBOARD

I need a copy-to-text button using a font awesome icon in a div in wordpress.
I do not want any alerts. Just a simple click.
<div class="btcTXT">text</div>
<div id="cpy" class="cpy"><i class="far fa-copy"></i></div>
I am a novice so please tell me the steps I need to do.
Thank you in advance.
Give your div an id first, like so:
<div class="btcTXT" id="your-div-id">text</div>
Then write this javascript to do the trick for you!
document.getElementById("cpy").addEventListener("click", () => {
navigator.clipboard.writeText(document.getElementById("your-div-id").textContent).then(() => {
console.log('Copied to clipboard!!!');
});
});
Make sure you "enqueue/inject" your javascript to the page you're testing.
Let me know if you were able to get it to work!
What #Ruvee said is correct. You typically need to enqueue scripts on your site to make sure everything works as expected. If that isn't your cup of tea I would suggest using a plugin like Simple CSS and JS Plugin.
You can add that piece of code as a new JS file using that plugin and should work just fine.

Problems with implementing a specific code

As stated above, I have problems with implementing a specific code on my website.
This is how it should look: https://codepen.io/smalinux/pen/VjXokA.
var d1_li = MorphSVGPlugin.convertToPath("#d1_li"),
d2_li = MorphSVGPlugin.convertToPath("#d2_li"),
d3_li = MorphSVGPlugin.convertToPath("#d3_li"),
d4_li = MorphSVGPlugin.convertToPath("#d4_li"),
d5_li = MorphSVGPlugin.convertToPath("#d5_li"),
d6_li = MorphSVGPlugin.convertToPath("#d6_li"),
d7_li = MorphSVGPlugin.convertToPath("#d7_li"),
d8_li = MorphSVGPlugin.convertToPath("#d8_li"),
d9_li = MorphSVGPlugin.convertToPath("#d9_li");
(I don't know how I show the rest of the JS code, but you can see it in the provided link)
Now, I have a Wordpress website and I am not good in HTML/JS/CSS at all. I am using the Avada theme and when I try to implement this, I either get a white box with nothing happening at all when I use the code generator. When I try to implement the codes seperately I see all the animations overlapping eachother and not moving (meaning JS is wrong?).
Now, I hope I explained my problem. If somebody could help me I would be forever grateful!
Exactly how are you implementing the css and js? Screenshots would help. Are you using a child theme?

How to use a random HTML file in JavaScript?

I'm having problems trying to figure this out, specifically because I'm really new to javascript. So, I have this place in my page where I want to have a random html file that I will make in html and I will like to link to it. I want it to be randomized every time the page refreshes, because I will do lots of these html files.
So, is this possible? I've searched for answers but all of the randomized html questions I've found are about the whole page. I just want a little part of the page to be randomized, similar to the random image I have in the same webpage.
The page I'm using for testing is this one: http://vannapruebas.jcink.net/ , I would like to use the toggle that says "búsquedas" for this. So, any help? thanks and exuse my poor english!
All you have to do is make a list of all your html, then you pick one randomly with -> Getting a random value from a JavaScript array.
I used jQuery just for easier demo
var listOfHTML = ["sample/your.html","sample/another.html"];
$('#magic').on('click',function(e){
var randomHTML = listOfHTML[Math.floor(Math.random()*listOfHTML.length)];
$.get(randomHTML,function(response){
$('#yourDiv').html(response);
//do your animation when completed
});
});
<div id="yourDiv"></div> <button id="magic">búsquedas</button>

Javarscript issues with dynamic tooltipster

I'm using Tooltipster which seems to be a nice jquery plugin.
Regardless I need to have my tooltips dynamic, which I don't believe should be that difficult. However I wrote a script and maybe it's because I'm tired or I don't know the simplest of javascript. Probably a combination of both.
I can't seem to get around this particular error. TypeError: $(...).tooltipster is not a function.
Here is the basic javascript code:
$("img#box_image[data-img-number]").hover(function(e) {
e.preventDefault();
i = $(this).attr("data-img-number");
var w = "http://trailerbrokerimages.s3.amazonaws.com/pics/" + i ;
window.console.log('before tool');
window.console.log('before tool ' +w);
tool(w);
});
var tool = function (w) {
$('.tooltip_two').tooltipster({content: $('<span><img style="height:191px; width:256px;"src="http://trailerbrokerimages.s3.amazonaws.com/pics/'+w+'" /></span>')});
An example of the code can be found at http://www.trailerbroker.com/go/listings/view/219
I suspect it's lame mistake on my part, thanks.
You have the same id box_image for multiple elements.
I understand that you're trying to make it unique by appending the data-img-number, but this won't work, as there's no way you can do this at run time unless your explicitly specifying different hover handlers.
Instead you could attach the hover handler to a class.
Add a class="box_image" to your <img /> elements and attach the hover as follows,
$(".box_image").hover(//rest of your code here//)
This should give you the desired functionality.
I solved this problem by using twitter bootstrap popover. Don't waste your time with tooltipers.

Minimizable side panel in html

I'm looking for a simple javascript to create side panel with hiding after some action(ex. after clicking on some area). Something like this example but appearing from left side not from up to down as the example works.
Will be appreciated for any help :)
You have 2 options. You can either use JQuery or scriptaculous to do this. There are plenty of examples and tutorials on the internet or you can simply use java script to this.
First download émile It's a very simple javascript animation framework.
Since you didn't provide any HTML markup, I'm assuming you have something like this.
<div id="side-panel">panel content..</div>
<div id="content">main content..</div>
and let's say your side-panel element has a CSS style of width:200px. Ok, now place a button somewhere and assign it a click event. Such as onclick="togglePanel()"
Here is the content of the togglePanel function:
function togglePanel(){
var panel = document.getElementById('side-panel');
if(!panel.__closed){
emile(panel, 'width:0px');
panel.__closed = true;
}else{
emile(panel, 'width:200px');
panel.__closed = false;
}
}
If you check the documentation of the emile framework you can do lot's of other cool things.
as you haven't provided us your code (which you have build) that's why I'm just giving a code to help you (And I don't know that this is a right answer or not). This code needs jQuery Ver.1.4 at least I think so, but I'm not clear. Anyways let's get started. Here is a link to live demo.
Hope this helps!

Categories