I am trying to create a dynamic list where a person can add items, one line at the time, each line with the control to delete or add a new one.
My list would be of 10 items and the first one is always mandatory.
I managed to pull it off till the point where a user can add all 10 lines but if he tries to delete or something everything goes south... Can someone help me with this without jQuery?
I also created an example in JSFiddle but it doesn't work there... never the less he is the link: http://jsfiddle.net/Zx8hc/2/
Thank you very much in advance.
<html>
<head>
<title>Doc</title>
<style type="text/css">
#usersform {
display: table;
}
.divtr {
display: none;
}
.divtd {
display: table-cell;
padding-top: 10px;
}
#presUser_1 {
display: table-row!important;
}
</style>
<script type="text/javascript">
function addUsersForm(x) {
var y = "presUser_" + x;
var z = "addUserButton_" + (x - 1);
var t = "removeUserButton_" + (x - 1);
document.getElementById(y).style.display = "table-row";
document.getElementById(z).style.display = "none";
document.getElementById(t).style.display = "inline-block";
}
function removeUsersForm(x) {
var y = "presUser_" + x;
document.getElementById(y).style.display = "none";
}
</script>
</head>
<body>
<div id="usersForm">
<div class="divtr" id="presUser_1">
<div class="divtd">Age <input type="text"></div>
<div class="divtd">
Add
Delete
</div>
</div>
<div class="divtr" id="presUser_2">
<div class="divtd">Age <input class="textAge" name="page_2" id="page_2" type="text"></div>
<div class="divtd">
Add
Delete
</div>
</div>
<div class="divtr" id="presUser_3">
<div class="divtd">Age <input class="textAge" name="page_3" id="page_3" type="text"></div>
<div class="divtd">
Add
Delete
</div>
</div>
<div class="divtr" id="presUser_4">
<div class="divtd">Age <input class="textAge" name="page_4" id="page_4" type="text"></div>
<div class="divtd">
Add
Delete
</div>
</div>
<div class="divtr" id="presUser_5">
<div class="divtd">Age <input class="textAge" name="page_5" id="page_5" type="text"></div>
<div class="divtd">
Add
Delete
</div>
</div>
<div class="divtr" id="presUser_6">
<div class="divtd">Age <input class="textAge" name="page_6" id="page_6" type="text"></div>
<div class="divtd">
Add
Delete
</div>
</div>
<div class="divtr" id="presUser_7">
<div class="divtd">Age <input class="textAge" name="page_7" id="page_7" type="text"></div>
<div class="divtd">
Add
Delete
</div>
</div>
<div class="divtr" id="presUser_8">
<div class="divtd">Age <input class="textAge" name="page_8" id="page_8" type="text"></div>
<div class="divtd">
Add
Delete
</div>
</div>
<div class="divtr" id="presUser_9">
<div class="divtd">Age <input class="textAge" name="page_9" id="page_9" type="text"></div>
<div class="divtd">
Add
Delete
</div>
</div>
<div class="divtr" id="presUser_10">
<div class="divtd">Age <input class="textAge" name="page_10" id="page_10" type="text"></div>
<div class="divtd">
Delete
</div>
</div>
</div>
</body>
</html>
========================
EDIT
More explanations... What I mean is that if a person starts to delete rows but not in the right order the "add" button disappears, or the rows can be added only a "limited" number of times, weird stuff if you try to find it's tickles you will discover. I was just asking if you guys with experience in this stuff can tell me a more easy way to do this, because I bet there is one.
When you add all 10 lines the "add" button disappears, but if there are added less than 10 lines there should be the add button on the last of the lines, right?
Also, when adding / deleting I notice some of the lines will simply not want do disappear...
Here's a fiddle to dynamically add and remove objects from a list: http://jsfiddle.net/Zx8hc/6/
The addUsersForm function adds a new element, assigns a new id and adds it and appends it to the form.
Something to note here is this:
this.id = this.id || 2; //Starts with 2, because the existing element has id 1
This is a useful thing to remember:) This says that you either set this.id to itself (not changing the value), or if it's undefined, you set it to 2 (the starting value). At the end you increase the id value by one. By using this, you store this on the function itself, rather than creating a new variable each time the function is run.
The removeUsersForm function takes in an id, and removes that element.
Update: This is a better fiddle: http://jsfiddle.net/Zx8hc/9/. This works by encapsulating the page controls in a controller object.
New Fiddle
This is a quick example to show you how to accomplish a similar effect with AngularJS. My Angular is not perfect, but it should suffice to show that you do not need all the repetition of HTML, nor do you have to manually specify JS target IDs.
Note: my previous answer was a little hasty as I take it you're new to web development and could have used a much more helpful response.
Related
I'm making a web application. First see this image:
Now, you can see the area outlined by yellow line. The list with white background is dynamic (It is displayed when something is typed in search bar). Now what I want is when I click anywhere out of this area (Search input field + List), the list should be display: none. I've tried a few things but for that I had to write a lot of code as I did this for different divs separately.
Also, I don't want to paste the whole code here as it is too long. So I'm just providing you HTML to get an idea of this picture.
<header>
<div id="headerdiv">
<div class="headerlogo"><img src="#" alt="Passwords"></div>
<div class="quit"><img src="#" alt="Quit"></div>
</div>
</header>
<div id="functions">
<div id="funcLeft">
<div id="addbuttonwrap"><input class="addbutton" type="button" value=" + ADD"></div>
<div class="heading1">Your saved passwords</div>
<input class="funcbutton" type="button" value="EMAIL">
<input class="funcbutton" type="button" value="CAREER">
<input class="funcbutton" type="button" value="SOCIAL">
<input class="funcbutton" type="button" value="OTHER">
</div>
<div id="funcRight">
<div id="search">
<form name="searchform" method="post" action="">
<input type="text" name="searchinput" placeholder="Enter any keyword">
</form>
</div>
<div class="heading1 heading2">GUIDELINES</div>
<div class="slides">
<!--CONTENT-->
</div>
</div>
</div>
<footer>
<div id="footer">
Copyright: Protected
</div>
</footer>
NOTE: While writing answer, you can assume any TAG Name/class/ID etc. for any element as code is not sufficient. I just want to know what to do.
You want to hide the search when someone clicks away, you can do this with Javascript with a onclick event.
var elementToHide = document.getElementById("searchElement");
window.onclick = function(e){
if(e.target != elementToHide){
elementToHide.style.display = "none";
}
}
This will hide the element contained in elementToHide (can be any element in the DOM) when the user clicks on an element which is not this one.
The variable e contains the click event of which we check the target element in the if
Hope it helps
$(document).on("click", function(e) {
if(e.target.className != "search_element"){
$("#element_list").hide();
}
});
you can try this.
i think you are looking for a js free solution (or easiest approach). I would personally recommend using + and :focus operator from css
.search-with-submenu{
.submenu{
display: none;
}
input[type=search]:focus + .submenu{
display: block;
}
}
Is there any code that I could add to the header of every page that would insert HTML at 2 or 3 points on a page (probably in the body), spread out evenly? This would be amazing for the platform that I am currently working on.
For example, maybe you wanted to embed a video using this. Ideally, I could put the code in the header, and it'd insert it 2 or 3 times in the body -- spread evenly.
Here you go: https://jsfiddle.net/westryder907/808xtyq7/
$(document).ready(function() {
$('.body > div').each(function(i, el) {
if (i % 3 === 0) {
$(this).append(" Inserted text via jQuery 2.2");
if (i > 3) {
return false;
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="body">
<div class="region1">
Region1
</div>
<div class="region2">
Region2
</div>
<div class="region3">
Region3
</div>
<div class="region4">
Region4
</div>
<div class="region5">
Region5
</div>
<div class="region6">
Region6
</div>
<div class="region7">
Region7
</div>
<div class="region8">
Region8
</div>
<div class="region9">
Region9
</div>
<div class="region10">
Region10
</div>
</div>
</div>
Why not just edit your code and manually insert content from an external file with PHP?
I think more information is needed to fully understand why you'd want to approach this with your current method. It just doesn't make much sense to me why you would want to do it like this?
I am not able to perform the auto suggestion functionality on divs with contenteditable attribute. Also when I write mass-autocomplete to divs, it is showing an error message like "mass-autocomplete not allowed on element div".
The following is code I have written. Could you please give the solution for this?
$scope.getClients = {
suggest: suggest_Client
};
<div class="row">
<div class="col-xs-12">
<div class="marginTB15" mass-autocomplete>
<div class="reach_box" contenteditable="true" ng-model="user.communities" mass-autocomplete-item="getNetworks">
<span class="form-control-feedback form-control-feedback_left_textbox"><img src="images/icon7.png" ></span>
<div class="reach"></div>
</div>
</div>
</div>
</div>
Seems that you using the mass-autocomplete directive incorrectly, it need so have an <input> tag as a element. Consider just having 2 blocks inside your div - one is a normal autocomplete:
<div mass-autocomplete>
<input ng-model="user.communities" mass-autocomplete-item="getNetworks">
</div>
while another one is a static end result of the autocompletion - say <div>{{user.communities}}</div>. And those two will be toggled by click for example. By this you wont' need content-editable at all.
So full code may look like this:
//controller
$scope.stateEdit = false;
$scope.toggleWidgetState = function(){
$scope.stateEdit = !$scope.stateEdit;
}
$scope.getClients = {
suggest: suggest_Client,
on_select:toggleWidgetState //here we put our widget back to read-only state
};
//other logic to handle mass-autocomplete
//template
<div class="row">
<div class="col-xs-12">
<div mass-autocomplete ng-show="stateEdit">
<input ng-model="user.communities" mass-autocomplete-item="getNetworks">
<ul> <li>Cardiologist Connect<button type="button">X</button></li></ul>
</div>
<div ng-show="!stateEdit" ng-click="toggleWidgetState()">
{{getNetworks}}
<span class="form-control-feedback form-control-feedback_left_textbox"><img src="images/icon7.png" ></span>
<div class="reach"></div>
</div>
</div>
</div>
I have this HTML
<div id="main-container">
<div style="style-here" data-status="active" data-state="loaded">
<div style="style-here">
<div style="style-here" {{click_event}}></div>
</div>
</div>
<div style="style-here" data-status="active" data-state="unloaded">
<div style="style-here">
<div style="style-here" {{click_event}}></div>
</div>
</div>
<div style="style-here" data-status="inactive" data-state="unloaded">
<div style="style-here">
<div style="style-here" {{click_event}}></div>
</div>
</div>
</div>
On click on one of the elements that has {{click_event}} I want to search recursively till I can find an element that has data-status or data-state, and in the worst case when I meet the id from top to stop de search.
The HTML is made generated from another JS file and I can't change the way is made it. Is there a way with closest or parent from jQuery to search after data attribute?
Thank you.
No need for recursion, you can use closest():
$clickedElement.click(function() {
var $parent = $(this).closest('[data-status], [data-state], #main-container');
});
I have the fiddle all ready to go I just need help with the jquery/javascript part. What I want is to have the record name/station title change when the user clicks on the play button they find on hovering over the album cover. I also want the record/vinyl in the "player" box to start spinning. Right now it spins on hover but I want to change that.
Here is the fiddle http://jsfiddle.net/7txt3/1/
and here is just the html code because the css is kinda long!
<div class="grid_12">
<div class="grid_6 alpha"><!-- record, overflow:hidden -->
<div id="player">
<div id="recordbox">
<div class="record2">
</div>
</div>
<div class="bars-box">
<div class="player-box">
<div id="title-player">Now playing:</div><br><strong><span class="player-station">Groove Salad</span></strong>
<div class="bars">
<div class="bar-1"></div>
<div class="bar-2"></div>
<div class="bar-3"></div>
<div class="bar-4"></div>
<div class="bar-5"></div>
<div class="bar-6"></div>
<div class="bar-7"></div>
<div class="bar-8"></div>
<div class="bar-9"></div>
<div class="bar-10"></div>
</div>
</div>
</div>
</div>
<div class="grid_3">
<div class="album">
<div class="record">
</div>
<div class="recordsinfo"><p class="recordinfo">A nicely chilled plate of ambient/downtempo beats and grooves.</p>
<a class="play" href="#">Play</a>
</div>
<div class="salad"><!-- sleeve -->
<h3>Groove Salad</h3>
</div>
</div>
</div>
<div class="grid_3 omega">
<div class="album">
<div class="record">
</div>
<div class="recordsinfo"><p class="recordinfo">Sensuous and mellow vocals, mostly female, with an electronic influence.</p>
<a class="play" href="#">Play</a>
</div>
<div class="lush"><!-- sleeve -->
<h3>Lush</h3>
</div>
</div>
</div>
Something like this?
$(function(){
var station = $('.player-station');
$('.play').click(function(){
station.text($(this).closest('.album').find('h3').text());
});
});
Demo: http://jsfiddle.net/7txt3/3/
For spinning you can use: http://code.google.com/p/jqueryrotate/
So, first thing is first... you need to read up on the use of an ID versus the use of a Class. To put it a bit simply:
ID = Unique identifier for an element
Class = Identifier for a series of elements
The reason I bring this up is because you have odd naming conventions like class="lush" which don't make sense. That should be an id, and the class should be something like "sleeve".
Anyway, here's the updated code and fiddle. Yes, you can make it a bit more condensed (not set a var for the title), but I wanted to spread it out so you could see the code a little better. If you have questions, let me know.
$('a.play').click(function() {
var title = $(this).closest('.album').find('.album-title');
$('span.player-station').text($(title).text());
});
I also added a class to the h3 tags, just so you didn't run into any issues down the road:
<h3 class="album-title">Lush</h3>
Here's the fiddle:
http://jsfiddle.net/7txt3/4/