I am using a modified version of the w3 schools example to have multiple draggable boxes containing information and it works very well, but now I must turn that into a function that can be called at any time. I pieced together this from multiple examples:
function createList() {
let div = document.createElement('div');
//div.classList.add('draggable', 'list');
div.innerHTML = `
<!-- list ui template -->
<div class="draggable list" id="list-template">
<!-- listheader div will contain file name variable, etc. -->
<div class="listheader">New Shopping List</div>
<h3>List - Incomplete</h3>
<p>Test Item<p>
<p>Number of items : 1</p>
</div>`
document.body.appendChild(div);
document.getElementById('listsdiv').appendChild(div);
}
I import it at the end of my index.html. The javascript from w3 that handles moving the boxes uses the class "draggable". This does not work. That might be obvious to some people, and I really hope this is the case because I can't find a solution online. I used to use id instead of class and other mistakes, but I've gone over it all and I'm stuck. Why does it only work when it's hard coded into the html? I apologize if this is not enough information, thank you for your help!
Related
This question already has an answer here:
How to duplicate a div in JavaScript
(1 answer)
Closed 3 years ago.
Maybe this is a common question in javascript world, but i can't find any usefull keyword for a profitable search. Long story short:
I have html code generated server side, suppose something like this
<div id="container">
<div class="element">
<!-- yadayada -->
</div>
<div class="element">
<!-- yadayada -->
</div>
</div>
and a client script to add new elements without reloading the page
<script>
// do asynchronous server stuff, then add new div from json server output
var string = "<div class=\"element\">\n" +
" <!-- yadayada -->\n" +
"</div>";
$("#container").prepend($(string));
</script>
Well, if the <!-- yadayada --> internal layout is changed in the server scripts, the javascript code must also be changed.
How can I avoid this ? how can I have only one maintainable source for the yadayada layout ?
Clone the first of the elements and prepend it to the container like so:
$('.element:first').clone().prependTo('#container');
As mentioned in the comments, you can 'clone' an item served up by the server.
elem.cloneNode(true)
On a page that I did, I named one element 'master' and then used that to create all new elements as needed (I hid the master with CSS display: none).
As mentioned in other posts you can use .clone() with jquery.
If you do not want to use jQuery, you can use regular javascript:
Excerpt from the W3 Schools site:
// Get the last <li> element ("Milk") of <ul> with id="myList2"
var itm = document.getElementById("myList2").lastChild;
// Copy the <li> element and its child nodes
var cln = itm.cloneNode(true);
// Append the cloned <li> element to <ul> with id="myList1"
document.getElementById("myList1").appendChild(cln);
The above is an example of cloning in regular javascript from W3 Schools site: https://www.w3schools.com/jsref/met_node_clonenode.asp
I am really not great at web stuff, so I am apologizing in advance for a potentially poor explanation of my problem.
Basically, I have a webpage which utilizes the handlebars js templating. Unfortunately, this means that many of my div elements are contained within javascript tags like the following:
<script type="text/x-handlebars" data-template-name="index">
<div class="row intro">
......
</div>
<div class="descript">
.....
</div>
</script>
My intent is to grab one of these div elements using jquery.find(), but from what I understand, the html within the script tags is not treated as part of the dom...so jquery does not see it as a dom element. I was wondering if there is any other way I could go about this. Some more code is included.
Here is another more explicit explanation in case the one I gave above was a little muddled: I am working on a personal website and would like to embed a project I have been working on in unity3d, but I need to add/remove elements based on whether or not the client has the unity3d web player installed. Normally I would get a particular element with
var $missingScreen = jQuery("#unityPlayer").find(".missing");
where 'missing' is simply an element inside unityPlayer which displays a link if the client does not have unity3d. I am also using some javascript templating to make my site look pretty and as a result, I have this problem:
<script type="text/x-handlebars" data-template-name="index">
<div class="row intro">
<div class="intro-text">Hi, I'm *****</div>
</div>
<div class="descript">
<p>
Here's a Project I have been working on in case I am of interest to you:
</p>
</div>
<div class="content">
<div id="unityPlayer">
<div class="missing">
<a href="http://unity3d.com/webplayer/" title="Unity Web Player. Install now!">
<img alt="Unity Web Player. Install now!" src="http://webplayer.unity3d.com/installation/getunity.png" width="193" height="63" />
</a>
</div>
</div>
</div>
<p class="footer">« created with Unity »</p>
</script>
Jquery cannot access the missing element. Is there any way to do this? Thanks for any help you can give me and sorry again for my inexperience.
EDIT* some people might want to know: here is how I determine whether or not to show the missing div. Another note; everything works fine if I remove the script tags...it is only when I put html within the script tags that it becomes inaccessible to jquery.
jQuery(function() {
var $missingScreen = jQuery("#unityPlayer").find(".missing");
$missingScreen.hide();
u.observeProgress(function (progress) {
switch(progress.pluginStatus) {
case "missing":
$missingScreen.find("a").click(function (e) {
e.stopPropagation();
e.preventDefault();
u.installPlugin();
return false;
});
$missingScreen.show();
break;
case "installed":
$missingScreen.remove();
break;
case "first":
break;
}
});
u.initPlugin(jQuery("#unityPlayer")[0], "temmp.unity3d");
});
Instead of
var $missingScreen = jQuery("#unityPlayer").find(".missing");
I would try out
var $missingScreen = jQuery("#unityPlayer").children(".missing");
or
var $missingScreen = jQuery("#unityPlayer .missing");
Don't forget the space between Player and .missing!
I hope it works.
First and for most, I am new to web coding and more or less just teaching myself when I have free time... so I apologize if I make little sense.
I essentially have a simple javascript that allows me to have a prev and next button to move through multiple images. However I wanted to have multiple of these sets of "galleries" but in my case they interact with each other. I've attempted to contain each section (gallery, small text box, and the two buttons) but I've had no luck.
If you follow my link bellow you can see my issue... depending on the size of your screen you may only see one gallery, but you can see the each set of buttons affects each gallery.. This also for some reason adds "blank" images into the list of the image galleries.
http://robinwkurtz.com/slider/issue.html
Thanks in advanced!
This is my source code
<div class="section black" id="top_ten">
<div id="title"><h1>TOP TEN</h1></div>
<div id="image">
<div class="container">
<ol>
<li><img src="images/project5_1.jpg"></li>
<li><img src="images/project5_2.jpg"></li>
<li><img src="images/project5_3.jpg"></li>
</ol>
<div id="contentfooter">
<div id="footer">A publication and poster, which teaches guide lines to technical constraints. With any design job there comes rules and guidelines to follow in order to put out a proper project.</div>
<span class="button prevButton">–</span>
<span class="button nextButton">+</span>
</div>
</div>
</div>
</div>
This is my js
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script>
$(window).load(function(){
var pages = $('.container ol li'), current=0;
var currentPage,nextPage;
$('.button').click(function(){
currentPage= pages.eq(current);
if($(this).hasClass('prevButton'))
{
if (current <= 0)
current=pages.length-1;
else
current=current-1;
}
else
{
if (current >= pages.length-1)
current=0;
else
current=current+1;
}
nextPage = pages.eq(current);
currentPage.hide();
nextPage.show();
});
});
You have multiple elements with the same ID #container. Only one element can have an ID. Make it a class if you want to give it to multiple elements.
Now, when you select pages, you're selecting all of them.
var pages = $('#container ol li')
That would select every li inside and ol inside #container (it would be every container but it's an ID so that's causing you problems, too).
You know which button you clicked using $(this) so you can use .parent() to go up the DOM and find the container that contains that button and set of pages and only select that.
I have a specific goal in mind.
Please reference this page: http://cubancomplex.kodingen.com/test/MM/dashboard1.html
On the very bottom right, there is a <div> with two buttons on each side. The <div> currently has one google chart contained inside.
The goal is for a user to be able to use those two buttons to switch between charts for approximately eight cities.
I am not familiar with javascript or jQuery so I would appreciate any assistance! How should I go about achieving this?
Here is the code for that section:
<div id="footer">
<div class="markerNavLeft" title="Prev" id="prevMarker">‹</div>
<div id="markers">
<div id="chart">
<div id="auckland_chart_div"></div>
</div>
</div>
<div class="markerNavRight" title="Next" id="nextMarker">›</div>
</div>
Based on my experience, there's 2 option that you can use..
you can place your charts in your div id="chart". The first one add a class to mark it as a selected one (e.g. selected), of course the other is hidden… Please add a same class for all of the chart(e.g. chart-detail). Then, you can use
var temp = $(".selected").next(".chart-detail"); $(".selected").removeClass("selected"); temp.addClass("selected");
for the previous button, you can use .previous function.
You can use ajax ( .ajax function or .load function). Mark each chart with an ID so, you know what's the next or previous chart (within php).
I've got a website set up with well structured pages, eg. <h1> for the website name, <h2> for the page name and <h3> for the different sections on the page.
Anyway, I was looking to set a bunch of the really long pages (an FAQ page for example) up with an "accordion" effect, with the <h3> elements being the toggle and the content directly following being toggled. But the collapsible content needs to be in it's own <div class="draw"> (or similar) and this isn't how the content is set up currently. I was hoping this was possible without touching the existing HTML and just somehow changing the DOM with JS (with jQuery assistance?) to accommodate.
I thought maybe wrapping content between the <h3> elements in a classed <div> might work but wouldn't know how to get this done. Help?
Here's one way to do it that doesn't rely on traversable DOM elements between the h3 tags. I'm not sure how efficient it is to swap out the entire contents of the body tag like this on every load though...
$(document).ready(function(){
var content = $('body').html();
content = content.replace(/(<\/h3>)((.|\n|\r)*?)(<h\d>|$)/gi, "$1<div class=\"draw\">$2</div>$4");
$('body').html(content);
});
I tested this out on content formatted like so:
<body>
<h1>Title</h1>
<h2>Sub-Title</h2>
<h3>Section Title</h3>
this is some content
<h1>Title</h1>
<h2>Sub-Title</h2>
<h3>Section Title</h3>
this is some content
...
</body>
The jQuery documentation on the accordion widget is very easy to use. http://docs.jquery.com/UI/Accordion. But using the jQuery method only works if you have the structure they describe in the docs. In other words (as far as I know) it is impossible to use the jQuery accordion widget without touching your HTML. This is the structure:
<div id="accordion">
<h3>Tab 1</h3>
<div>
First tab content
</div>
<h3>Tab 2</h3>
<div>
Tab two content
</div>
<h3>Tab 3</h3>
<div>
Tab three content
</div>
</div>
Then you would create the widget using the line of javascript:
$("#accordion").accordion();
If you wanted to use jQuery to format your HTML for you, you still need a way to select and parse your HTML. Each tab's content needs to be selectable some how. If your HTML already has the tabs separated somehow, then you need to take a look at this page http://docs.jquery.com/Manipulation. It should be pretty straightforward.
If you're willing to consider non-JS alternatives, Stu Nicholls has some interesting html/css (no js) options on his CSS Play website:
http://www.cssplay.co.uk/menu/gallery3l
http://www.cssplay.co.uk/menus/tabmenu.html
(Among others)
I suppose it looks like this:
<html>
<h1>site name</h1>
<h2>page name</h2>
<h3>section</h3>
<p>some stuff</p>
<p>different paragraph</p>
<ul><li>a list</li></ul>
<h3>next section</h3>
<p>different stuff</p>
...
</html>
you could iterate over all direct children of html. At first h3 you start collection all subsequent items until the next h3. if a next h3 comes or page end you create a div, and add it after the starting h3 all collected elements should be removed from their parent (the html) and added as children of the div.
looking at http://docs.jquery.com/Traversing this should be easy. I'm not an expert on jquery, but it should be doable.
Dave Ward of Encosia has great 10 minute tutorial on jQuery, Firebug and selectors that builds exactly what you looking for.